/* =========================================================================
   10-responsive.css - Breakpoints: Desktop / Laptop / Tablet / Mobile
   ========================================================================= */

/* Laptop (<=1200px) */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > :nth-child(4) { grid-column: span 3; }
}

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  .nav-list, .header-cta .btn-outline { display: none; }
  .nav-toggle { display: flex; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :nth-child(4) { grid-column: span 2; }

  .main-nav {
    position: fixed;
    top: 0; right: -100%;
    width: min(360px, 85vw);
    height: 100vh;
    background: var(--color-ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    box-shadow: var(--shadow-lg);
    transition: right var(--transition-base);
    z-index: 940;
  }
  .main-nav.open { right: 0; }
  .nav-list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .header-cta { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-xl); }
  .header-cta .btn-outline { display: inline-flex; }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
  :root { --space-3xl: 5rem; --space-2xl: 3.5rem; }
  .section { padding-block: var(--space-2xl); }
  .about-stats { flex-direction: column; gap: var(--space-md); }
  .about-media-accent { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item:nth-child(3n+1) { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-grid > :nth-child(4) { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .cta-section { margin-inline: var(--space-sm); }
  .testimonial-card { flex: 0 0 90vw; }

  /* 🔒 ULTIMATE MOBILE HEADER LOCK FIX 🔒 */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 99999 !important; /* સૌથી ઉપર રાખવા માટે */
    background-color: #FBF9F4 !important; /* સૉલિડ આઇવરી કલર */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    
    /* ⚡ 🌟 આ બે લાઇન જાદુ કરશે: જો કોઈ લાઈબ્રેરી આખા પેજને ખેંચતી હશે, 
       તો પણ આ પ્રોપર્ટી હેડરને બ્રાઉઝરની વિન્ડો સાથે જકડી રાખશે અને ઉપર જવા નહીં દે! */
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
  }

  .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 15px !important;
  }

  /* હેડરની અંદરનું બોક્સ પણ સ્ક્રીન માપમાં લોક કરવા માટે */
  .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 15px !important;
  }

  /* 🎬 CINEMATIC SCROLL REVEAL - NO WHITE SPACE FIX 🎬 */
  section.hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 160vh !important; /* પર્ફેક્ટ સિનેમેટિક હાઇટ: કોઈ વ્હાઇટ સ્પેસ નહીં આવે */
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
  }

  /* ઇમેજને આખા સ્ક્રીન પર ફિક્સ (Fixed) કરી દીધી, જેથી તે બિલકુલ હલશે નહીં */
  section.hero .hero-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-position: 75% center !important; 
    background-size: cover !important;
    z-index: -1 !important; /* બધી વસ્તુઓની પાછળ લોક */
    transform: none !important;
  }

  /* ડાર્ક ઓવરલે પણ ઇમેજની સાથે જ આખી સ્ક્રીન પર લોક રહેશે */
  section.hero .hero-bg::before {
    display: none !important;
  }

  /* 🌟 લખાણ માટેનું સ્પેશિયલ સ્ક્રોલેબલ કન્ટેનર */
  /* 🌟 લખાણ માટેનું કન્ટેનર - ડાર્ક શેડ હવે આની પાછળ છે એટલે ફોન્ટ સાથે જ ઉપર જશે */
  section.hero .container {
    position: relative !important;
    z-index: 2 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 20px !important;
    padding-top: 80px !important;
    
    /* 🌟 આ લાઇન ઉમેરો: ડાર્ક શેડ હવે ફોન્ટના બોક્સ સાથે લોક થઈ ગયો */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)) !important;
  }

  section.hero .hero-content {
    width: 100% !important;
    text-align: center !important;
  }

  section.hero .hero-content h1 {
    font-size: 2.1rem !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
    margin-bottom: 15px !important;
  }

  section.hero .hero-content p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #FFFFFF !important;
    margin-bottom: 35px !important;
  }

  section.hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  section.hero .hero-actions .btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
  }

  /* 🌟 નેક્સ્ટ સેક્શન જે પાછળની ઇમેજને સ્મૂધલી ઢાંકશે */
  section.hero + section,
  #trust,
  .trust-bar {
    position: relative !important;
    z-index: 10 !important; 
    background-color: #ffffff !important; 
    box-shadow: 0px -15px 30px rgba(0,0,0,0.15) !important;
  }
}

/* Small Mobile (<=480px) */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .btn { padding: 0.85rem 1.75rem; font-size: var(--fs-xs); }
  .trust-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .announcement-bar { font-size: 0.7rem; padding-inline: 0.5rem; }
  .logo-text { font-size: var(--fs-lg); }
}