/* /home/mgijimi/my_flask_app/static/assets/css/index.css */

/* Note: This file relies on variables defined in main.css */

/* ===== HERO SECTION (Homepage Specific) ===== */
.hero {
    background: linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.85)),
      url('/static/assets/images/hero-bg.jpg') no-repeat center center/cover;
    color: var(--primary-white);
    padding: 180px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Floating Bubbles (if used in hero) */
.floating-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Ensures bubbles are behind the hero content */
    pointer-events: none; /* Prevents bubbles from interfering with mouse events */
}

.floating-bubbles .bubble {
    position: absolute;
    background-color: var(--primary-white);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.4); /* Slight red shadow */
    animation: floatUp 15s infinite ease-in-out;
    opacity: 0.5; /* Set constant opacity to 50% as requested */
}

/* Individual bubble sizes and positions */
.bubble.b1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 5%;
    animation-duration: 18s;
    animation-delay: 0s;
}
.bubble.b2 {
    width: 120px;
    height: 120px;
    top: 50%;
    left: 15%;
    animation-duration: 25s;
    animation-delay: 2s;
}
.bubble.b3 {
    width: 60px;
    height: 60px;
    top: 70%;
    left: 40%;
    animation-duration: 15s;
    animation-delay: 5s;
}
.bubble.b4 {
    width: 100px;
    height: 100px;
    top: 30%;
    right: 10%;
    animation-duration: 20s;
    animation-delay: 3s;
}
.bubble.b5 {
    width: 90px;
    height: 90px;
    top: 60%;
    right: 25%;
    animation-duration: 22s;
    animation-delay: 1s;
}
.bubble.b6 {
    width: 70px;
    height: 70px;
    top: 10%;
    right: 40%;
    animation-duration: 16s;
    animation-delay: 4s;
}

/* The floating animation - simplified for constant opacity */
@keyframes floatUp {
    0% { transform: translateY(100px) scale(0.8); }
    50% { transform: translateY(-50px) scale(1.1); }
    100% { transform: translateY(100px) scale(0.8); }
}

/* Ensure the hero's text and content are above the bubbles */
.hero .container {
    position: relative;
    z-index: 2;
}

/* Hero header animations */
@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-header-text, .animate-header-button {
    opacity: 0; /* Hidden initially */
    animation: fadeInSlideUp 0.8s ease-out forwards;
}
.animate-header-text.delay-1 { animation-delay: 0.3s; }
.animate-header-button.delay-2 { animation-delay: 0.6s; }
.animate-header-button.delay-3 { animation-delay: 0.9s; }


.hero-title {
    font-size: 3.2rem;
    margin-bottom: 25px;
    line-height: 1.2;
    font-weight: 700;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* ===== ABOUT SECTION (Homepage Specific - if unique styles) ===== */
/* If about-section has styles unique to homepage, put them here.
   Otherwise, if it's general, it should be in main.css.
   Based on your provided main.css, about-section itself is not unique,
   but its content styles are. Keeping this block empty for now. */

/* ===== TESTIMONIAL SLIDER (Homepage Specific) ===== */
/* Only if the slider has unique styles beyond the general testimonial-card/slider-button */
/* The general card and button styles are in main.css, so only layout/positioning if unique */
.slider-container {
  /* This was in main.css, but if it's only for this slider, it's better here */
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.testimonial-slider {
  /* This was in main.css, better here if only for this slider */
  display: flex;
  gap: 30px;
  padding: 30px 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.testimonial-slider::-webkit-scrollbar {
  display: none;
}

/* Slider navigation buttons */
.slider-button {
  /* These were in main.css, better here if only for this slider */
  display: none; /* MODIFIED: Completely remove slider buttons on this page */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(26, 26, 26, 0.7);
  color: var(--primary-white);
  border: none;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
}

.slider-button:hover {
  background-color: var(--primary-red);
}

.prev-button {
  left: 0;
}

.next-button {
  right: 0;
}

/* ===== CTA SECTION (Homepage Specific - if unique styles) ===== */
/* If CTA has styles unique to homepage, put them here.
   Otherwise, if it's general, it should be in main.css.
   Keeping this block empty for now, as the general CTA is in main.css. */


/* ===== RESPONSIVE DESIGN (Homepage specific sections) ===== */
@media (max-width: 768px) {
    .hero {
        padding: 150px 0 80px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    /* Testimonial slider responsive styles */
    .slider-container {
        padding: 0 20px;
    }

    /* The .slider-button display: none; rule above already handles this,
       but keeping this media query block for other responsive styles.
    .slider-button {
        display: none;
    }
    */

    /* If services-grid or testimonial-slider have unique stacking behavior on mobile */
    .services-grid {
        grid-template-columns: 1fr; /* Stack services cards on small screens */
    }

    .testimonial-slider {
        flex-direction: column; /* Stack testimonials on small screens */
        overflow-x: hidden; /* Prevent horizontal scroll when stacked */
    }
    .testimonial-card {
        flex: 0 0 auto; /* Allow cards to take full width when stacked */
    }

    /* If CTA has unique responsive styles */
    .cta-content h2 {
        font-size: 2rem;
    }
}