/* ==========================================================
   RESPONSIVE OPTIMIZER
   Mobile-first overrides ONLY
   No base styles here
========================================================== */


/* ==========================================================
   ULTRA-WIDE SCREENS (1600px+)
========================================================== */
@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }

  .hero-slider {
    max-height: 820px;
  }
}


/* ==========================================================
   LARGE DESKTOPS (1400px ↓)
========================================================== */
@media (max-width: 1400px) {
  .hero-slider {
    max-height: 760px;
  }
}


/* ==========================================================
   LAPTOPS (1200px ↓)
========================================================== */
@media (max-width: 1200px) {
  .premium-main {
    grid-template-columns: repeat(2, 1fr);
  }

  .premium-sub {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    gap: 40px;
  }
}


/* ==========================================================
   SMALL LAPTOPS / TABLETS (1024px ↓)
========================================================== */
@media (max-width: 1024px) {
  .story-container,
  .mission-container,
  .internal-grid,
  .about-cta-grid,
  .service-details-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .story-image,
  .mission-image {
    order: -1;
  }

  .cta-pro {
    flex-direction: column;
    text-align: center;
  }

  .cta-buttons {
    justify-content: center;
  }
}


/* ==========================================================
   TABLETS (980px ↓)  **CRITICAL FIX ZONE**
========================================================== */
@media (max-width: 980px) {

  /* Header */
  .header-logo img {
    width: clamp(64px, 14vw, 88px);
    height: auto;
  }

  .header-flex {
    flex-wrap: wrap;
  }

  .header-cta {
    display: none;
  }

  /* Mobile nav */
  .main-nav {
    display: none;
  }

  .main-nav.open {
    display: block;
  }

  .mobile-menu-btn {
    display: block;
  }

  /* HERO FIX (prevents zoom) */
 /* .hero-slider {
/*    height: auto;
 /*   min-height: unset;
/*    padding: 120px 0 100px;
/*  }*/

  /* Disable parallax */
  .parallax-bg {
    background-attachment: scroll;
  }

  /* Layout stacks */
  .about-grid,
  .projects-grid,
  .service-row,
  .service-row.reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


/* ==========================================================
   LARGE PHONES (768px ↓)
========================================================== */
@media (max-width: 768px) {

  body {
    font-size: 0.95rem;
  }

  h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  .gallery-hero {
    padding: 160px 20px 120px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item img {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .testimonial-box {
    padding: 30px 20px;
    height: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .payment-icons,
  .social-icons {
    justify-content: center;
  }
}


/* ==========================================================
   PHONES (576px ↓)
========================================================== */
@media (max-width: 576px) {

  body {
    font-size: 0.9rem;
  }

/*  .hero-slider,*/
  .gallery-hero,
  .reviews-hero,
  .services-hero {
    padding: 110px 14px 90px;
  }

  .btn,
  .btn-rounded,
  .cta-btn,
  .hero-cta-btn {
    padding: 12px 22px;
    font-size: 0.85rem;
  }

  .cta-left h2,
  .gallery-cta h2 {
    font-size: 1.6rem;
  }
}


/* ==========================================================
   SMALL PHONES (360px ↓)
========================================================== */
@media (max-width: 360px) {

  body {
    font-size: 0.82rem;
  }

  .header-logo img {
    width: 64px;
  }

  .gallery-hero {
    padding: 130px 10px 90px;
  }

  .nav-list > li > a {
    font-size: 12px;
  }
}


/* ==========================================================
   SMARTWATCH / MICRO DEVICES (320px ↓)
========================================================== */
@media (max-width: 320px) {

  body {
    font-size: 0.75rem;
  }

  .btn,
  .btn-rounded,
  .cta-btn {
    padding: 10px 18px;
    font-size: 0.75rem;
  }

  .footer-area {
    padding: 35px 8px;
  }
}


/* ==========================================================
   TOUCH DEVICES – REMOVE HOVER DEPENDENCY
========================================================== */
@media (hover: none) {

  .gallery-item:hover img,
  .premium-card:hover,
  .about-image:hover,
  .team-card:hover {
    transform: none;
  }

  .gallery-item::after {
    opacity: 1;
  }
}


@media (max-width: 980px) {

  /* Show header CTA on mobile */
  .header-cta {
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }

  /* Style phone button for mobile */
  .header-cta .phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 999px;
    border: 2px solid #0b5a2b;
    color: #0b5a2b;
    font-weight: 800;
    white-space: nowrap;
    background: #ffffff;
  }

  /* Hide divider on mobile */
  .header-cta .divider {
    display: none;
  }

  /* Hide finance button on mobile */
  .header-cta .finance-btn {
    display: none !important;
  }
}


@media (max-width: 980px) {

  /* =========================
     MOBILE HERO SLIDER (SAFE)
  ========================= */

  /* Keep hero non-flex to avoid JS conflict */
  .hero-slider {
    position: relative;
    overflow: hidden;
  }

  /* Hide all slides */
  .hero-slider .slide {
    display: none !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Show ONLY active slide */
  .hero-slider .slide.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Center hero content */
  .hero-slider .slide-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px 18px 80px;
    text-align: center;
  }

  /* Slider arrows */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    font-size: 28px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
  }

  .left-arrow { left: 8px; }
  .right-arrow { right: 8px; }

  /* Dots */
  .slider-dots {
    bottom: 16px;
  }
}


/* ================================
   MOBILE CARD STACK (BEST UX)
================================ */

@media (max-width: 768px) {

  .premium-main,
  .premium-sub {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  .premium-card {
    width: 100%;
    max-width: 100%;
  }

  .card-img-wrap {
    height: 200px;
  }

  .card-img-wrap.small {
    height: 160px;
  }
}


/* ======================================
   PREMIUM SERVICES – FINAL RESPONSIVE FIX
====================================== */

/* Tablet + Mobile */
@media (max-width: 980px) {
  .premium-main {
    grid-template-columns: 1fr !important;
    gap: 25px;
  }

  .premium-sub {
    grid-template-columns: 1fr !important;
    gap: 25px;
  }
}

/* Small Phones */
@media (max-width: 600px) {
  .premium-main {
    grid-template-columns: 1fr !important;
  }

  .premium-sub {
    grid-template-columns: 1fr !important;
  }

  .premium-card {
    padding: 26px 20px 34px;
  }

  .card-img-wrap {
    height: 180px;
  }

  .card-img-wrap.small {
    height: 150px;
  }
}

/* ================================
   HIDE HERO ARROWS ON MOBILE
================================ */

@media (max-width: 980px) {
  .slider-arrow {
    display: none !important;
  }
}