/* =========================================
   HERO SECTION 
   ========================================= */

/* --- 1. Hero Container --- */
.hero {
  position: relative; /* Added to anchor the carousel */
  overflow: hidden; /* Added to clip the background images */
  
  min-height: 80vh; 
  display: flex;
  flex-direction: column;
  justify-content: end; /* Keeps your text at the bottom! */
  align-items: center; 
  text-align: center; 
  padding: 40px 20px; 
}

/* --- Global Hero Overlay --- */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* The 10% dark overlay */
  z-index: 5; /* Sits exactly between the images (z-index: 1) and text (z-index: 10) */
  pointer-events: none; /* Ensures the overlay doesn't block you from clicking anything */
}

/* --- 2. Text Container (Keeps text above images) --- */
.hero-content {
  position: relative;
  z-index: 10;
}

/* --- 3. Carousel Logic --- */
.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Puts images behind text */
  background-color: #111;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  
  opacity: 0; 
  animation: heroFade 15s infinite; 
}

/* Mobile Images */
.slide-1 { 
  background-image: url(/img/hero_imgs/hero-mobile-1.webp); 
  animation-delay: 0s; 
}
.slide-2 { 
  background-image: url(/img/hero_imgs/hero-mobile-2.webp); /* Update with your 2nd image */
  animation-delay: 5s; 
}
.slide-3 { 
  background-image: url(/img/hero_imgs/hero-mobile-3.webp); /* Update with your 3rd image */
  animation-delay: 10s; 
}

/* --- 4. Hero Title --- */
.hero-title {
  font-size: 24px; 
  font-family: var(--font-display);
  color: var(--white);
  

  max-width: 20ch; 
}

/* --- 5. Hero Subtitle --- */
.hero-subtitle {
  padding: 10px 0;
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--white); 
  letter-spacing: 0.15em;
  text-transform: capitalize;
  margin-bottom: 40px;
}
/* --- Carousel Dots (Indicators) --- */
.carousel-indicators {
  position: absolute;
  bottom: 24px; /* Sits right at the bottom of the image */
  left: 50%;
  transform: translateX(-50%); /* Perfectly centers them */
  display: flex;
  gap: 12px;
  z-index: 10; /* Keeps them clickable/visible above the images */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background-color: transparent;
  
  /* The Magic Sync: Uses the exact same 15s loop as the images */
  animation: dotActive 15s infinite; 
}

/* Delay the dots exactly like the images! */
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 5s; }
.dot-3 { animation-delay: 10s; }

/* The Dot Keyframes */
@keyframes dotActive {
  0%   { background-color: transparent; }
  10%  { background-color: var(--white); } /* Fades to solid white */
  33%  { background-color: var(--white); } /* Holds solid white */
  43%  { background-color: transparent; }  /* Fades back to hollow */
  100% { background-color: transparent; }
}

/* --- The Cross-Fade Keyframes --- */
@keyframes heroFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; } 
  33%  { opacity: 1; } 
  43%  { opacity: 0; } 
  100% { opacity: 0; } 
}

/* =========================================
   2. HIGHLIGHTS BANNER
   ========================================= */
.highlights-banner {
  background-color: var(--main-red);
  color: var(--white);
  padding: 16px 0;
  width: 100%;
  overflow: hidden; /* Hides the text as it slides off the screen */
  display: flex;
}

.banner-track {
  display: flex;
  width: max-content; /* Allows the track to be wider than the screen */
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px; /* Matches the gap so the loop spacing is perfect */
  
  /* Typography */
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: capitalize;
  white-space: nowrap; 

  /* The Magic Animation Engine */
  animation: scroll-left 15s linear infinite;
}

.separator {
  font-size: 14px;
  opacity: 0.8;
}

/* --- The Infinite Loop Keyframes --- */
@keyframes scroll-left {
  0% {
    transform: translateX(0); /* Starts at normal position */
  }
  100% {
    transform: translateX(-100%); /* Slides entirely to the left */
  }
}

/* =========================================
   3. ABOUT & SERVICES SECTION
   ========================================= */

/* --- Main Section Wrapper --- */
.about-services {
  /* Use an off-white cream color. If you have a faint pattern image, add it here! */
  background-color:var(--cream-bg); 
  background-image: url(/img/islamic-pattern.png);    
  
  padding: 60px 20px; /* Top/bottom padding, safe space on sides */
  text-align: center;
}

.about-services .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Intro Text --- */
.about-intro {
  max-width: 800px; /* Keeps the text from stretching too wide and becoming hard to read */
  margin: 0 auto 50px auto; /* Centers the block and pushes the cards down */
}

.section-title {
  font-size: 20px;
  color:var(--dark-blue); 
  margin-bottom: 20px;
}

.about-intro p {
  font-size: 14px;
  color:var(--gray-text-dark);
}

/* --- The Cards Grid --- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 column on Mobile */
  gap: 40px; /* Space between the cards */
}

/* --- Individual Cards --- */
.service-card {
  background-color:var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Very soft shadow to lift them off the cream background */
}

.card-image-wrapper {
  width: 100%;
  height: 220px; /* Locks all 3 images to the exact same height */
  overflow: hidden;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Acts like background-size: cover so images never squish */
}

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1; /* Pushes the button to the bottom evenly */
}

.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 20px;
  color:var(--dark-blue);
}

/* --- Dark Navy Buttons --- */
.btn-navy {
  display: inline-block;
  background-color:var(--dark-blue); /* Dark navy */
  color: var(--white);
  padding: 12px 24px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.btn-navy:hover {
  background-color: var(--light-blue);
  color: var(--white);
}


/* =========================================
   4. OUR MENU SECTION
   ========================================= */

.menu-section {
  background-color:var(--dark-blue);
  background-image:
  url(/img/islamic-pattern-white.png); 
  
  padding: 80px 20px;
  text-align: center;
}

.menu-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Menu Intro --- */
.menu-intro {
  max-width: 700px;
  margin: 0 auto 50px auto;
}

/* Utility classes to easily make text white on dark backgrounds */
.text-white {
  color: var(--white) !important; 
}

.menu-intro p {
  font-size: 16px;
  
  margin-bottom: 30px;
  opacity: 0.9; /* Softens the white paragraph slightly so the title stands out more */
}

/* Red Button */
.btn-red {
  display: inline-block;
  background-color: var(--main-red);
  color: var(--white);
  padding: 12px 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.btn-red:hover {
  background-color:var(--light-red); /* Slightly darker red on hover */
}

/* --- The Collage Grid (Mobile First) --- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
  gap: 10px; /* Small gaps to create that tight puzzle look */
  grid-auto-rows: 150px; /* Forces every standard square to be exactly 150px tall */
}

/* The standard grid item */
.grid-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images perfectly fill their boxes without squishing */
  transition: transform 0.4s ease; /* Prepares for a hover effect */
}

.grid-item:hover img {
  transform: scale(1.05); /* Slight zoom on hover for a premium feel */
}

/* The magic class that makes an image span two rows tall! */
.tall {
  grid-row: span 2; 
}


/* =========================================
   5. GOOGLE REVIEWS SECTION
   ========================================= */

.reviews-section {
  padding: 80px 20px;
  text-align: center;
}

.reviews-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-section .section-title {
  color:var(--dark-blue);
  margin-bottom: 50px;
}

/* --- The Grid --- */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 Stacked Column */
  gap: 30px;
}

/* --- The Cards --- */
.review-card {
  background-color:var(--white);
  padding: 40px 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft drop shadow */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  text-decoration: none; /* Removes the underline */
    color: inherit; /* Stops the text from turning blue */
    
    /* Smooth Hover Animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
/* The Hover Effect */
.review-card:hover {
  transform: translateY(-8px); /* Lifts the card up 8 pixels */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); /* Makes the shadow deeper and softer */
}

.reviewer-name {
  font-family: var(--font-display);
  font-size: 18px;
  color:var(--dark-blue);
  margin-bottom: 8px;
}

/* Classic Google Gold Stars */
.stars {
  color: #fbbc04; /* Official Google Review Yellow */
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
/* Gray Star for realistic reviews */
.gray-star {
  color: #e0e0e0; /* A light, muted gray */
}

.review-text {
  font-size: 15px;
  
  color:var(--gray-text-dark);
  font-style: italic; /* Adds a nice editorial quote feel */
}









/* Desktop  */
@media (min-width: 768px) {
    /* =========================================
         HERO SECTION (Desktop)
         ========================================= */
      .hero {
        min-height: 90vh; 
      }
      
      /* Desktop Background Swap */
      .slide-1 { background-image: url(/img/hero_imgs/hero-desktop-1.webp); }
      .slide-2 { background-image: url(/img/hero_imgs/hero-desktop-2.webp); } /* Update with your 2nd desktop image */
      .slide-3 { background-image: url(/img/hero_imgs/hero-desktop-3.webp); } /* Update with your 3rd desktop image */
    
      .hero-title {
        font-size: 60px; 
      }
      .hero-subtitle {
        font-size: 20px;
      }
  /* =========================================
     DESKTOP BANNER SCALING
     ========================================= */
 
    .banner-content {
      font-size: 18px; 
      gap: 40px; 
      padding-right: 40px; /* Must match the gap! */
    }
    
    .separator {
      font-size: 16px;
    }
    
    /* =========================================
    About - serviecs
       ========================================= */
    
    .section-title {
      font-size: 30px;
    }
    
    .services-grid {
      grid-template-columns: repeat(3, 1fr); /* Splits into 3 equal columns! */
      gap: 40px;
    }
    
    /* =========================================
       DESKTOP MENU section
       ========================================= */
   
    /* --- Desktop Menu Gallery --- */
    
      .menu-grid {
        display: grid;
        /* Adjust the repeat number to however many columns you want (e.g., 3 or 4) */
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px; 
        
        /* 🪄 THE MAGIC TRICK: Forces smaller images to backfill the empty holes! */
        grid-auto-flow: dense; 
      }
    
      .grid-item {
        width: 100%;
        height: 100%;
      }
    
      .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures images fill their blocks without stretching */
        display: block;
        
      }
    
      /* Tells the tall items to stretch across 2 vertical blocks */
      .grid-item.tall {
        grid-row: span 2; 
      }
  
    /* =========================================
       DESKTOP google-reviews
       ========================================= */
    
    .reviews-grid {
      grid-template-columns: repeat(3, 1fr); /* Desktop: 3 Equal Columns */
      gap: 40px;
    }
  }