/* Mobile media query*/

/* ================= RESPONSIVE LAYOUT ================= */

/* ---------- Large tablet / small laptop ---------- */
@media (max-width: 1024px) {
    .navbar {
      padding: 18px 32px;
    }
  
    .hero {
      padding: 120px 32px 80px;
    }
  
    .hero-left h1 {
      font-size: 3.2rem;
    }
  
    .card-stack {
      width: 380px;
      height: 440px;
    }
  }
  
  /* ---------- Tablet & mobile ---------- */
  @media (max-width: 768px) {


    /* Home */
  
    /* NAV & HAMBURGER */
    /* base hamburger icon (hidden on desktop) */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    padding: 4px;
    display: none;               /* shown only in media query */
    flex-direction: column;
    gap: 5px;
  }
  
  .nav-toggle span {
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: #2721f6;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  
  /* when nav is open, animate into "X" */
  .nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
    .navbar {
      padding: 14px 20px;
    }
  
    .nav-center {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: #000;
      padding: 16px 20px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: max-height 0.25s ease, opacity 0.25s ease;
    }
    
  
    .nav-center a {
      font-size: 0.98rem;
    }
  
    .contact-btn {
      width: 100%;
      text-align: center;
    }
  
    /* Show hamburger, hide inline nav until opened */
    .nav-toggle {
      display: flex;
    }
  
    /* When checkbox is checked, show menu */
    .nav-checkbox:checked ~ .nav-center,
    .nav-checkbox:checked ~ .nav-right {
      max-height: 260px;
      opacity: 1;
      pointer-events: auto;
    }
  
   
  
  
    
  
    /* Animate hamburger into an “X” */
    .nav-checkbox:checked + .nav-toggle span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
  
    .nav-checkbox:checked + .nav-toggle span:nth-child(2) {
      opacity: 0;
    }
  
    .nav-checkbox:checked + .nav-toggle span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  
    /* HERO LAYOUT */
    .hero {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 100px 24px 60px;
      gap: 40px;
    }
  
    .hero-left,
    .hero-right {
      width: 100%;
    }
  
    .hero-left p {
      margin-left: auto;
      margin-right: auto;
    }
  
    .cta-group {
      flex-direction: column;
      align-items: stretch;
    }
  
    .btn-primary,
    .btn-outline {
      width: 100%;
      text-align: center;
    }
  
    /* Card stack sizes */
    .card-stack {
      width: 100%;
      max-width: 420px;
      height: 360px;
    }
  
    .stack-card {
      width: 70%;
      height: 260px;
    }
  
    .card-1 { top: 0; left: 8%; }
    .card-2 { top: 40px; left: auto; right: 8%; }
    .card-3 { top: 140px; left: 18%; }
  
    /* “Carousel” row – photos side by side, slightly cut off */
    .scroll-loop-gallery {
      padding: 40px 0 20px;
      overflow-x: auto;
      overflow-y: visible;
    }
  
    .scroll-loop-gallery::-webkit-scrollbar {
      display: none;
    }
  
    .gallery-track {
      padding: 0 40px;
      gap: 24px;
      scroll-snap-type: x mandatory;
    }
  
    .g-card {
      width: 70vw;              /* wider than screen so edges are cut */
      max-width: 320px;
      scroll-snap-align: center;
    }
  
    /* CONTACT SECTION */
    .contact-section {
      padding: 80px 24px 100px;
    }
  }
  
  /* ---------- Small phones ---------- */
  @media (max-width: 480px) {
    .hero-left h1 {
      font-size: 2.4rem;
    }
  
    .navbar {
      padding: 10px 16px;
    }
  
    .card-stack {
      max-width: 360px;
      height: 320px;
    }
  
    .stack-card {
      width: 78%;
      height: 230px;
    }
  
    .contact-title {
      font-size: 2rem;
    }
  
    footer {
      padding: 24px;
      font-size: 0.85rem;
    }
  }
  
  
  @media (max-width: 768px) {
    .navbar {
      padding: 14px 20px;
    }
  
    /* show hamburger on mobile */
    .nav-toggle {
      display: flex;
    }
  
    /* stack nav links in a dropdown */
    .nav-center {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: #000;
      padding: 16px 20px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: max-height 0.25s ease, opacity 0.25s ease;
    }
  
    /* hide big quote button on mobile */
    .nav-right {
      display: none;
    }
  
    /* when nav is open (body has .nav-open) */
    .nav-open .nav-center {
      max-height: 260px;
      opacity: 1;
      pointer-events: auto;
    }
  
  

  /* About */
    
  .mission-vision {
    padding: 50px 7% 50px;
  }
  
  .mv-intro h2 {
    font-size: 2rem;
  }
  
  .mv-intro p {
    max-width: none;
  }
  
  
  


/*  our work */


  /* ========== HAMBURGER BASE (hidden on desktop) ========== */

.nav-toggle {
  display: none;              /* will be flex on mobile */
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: #2721f6;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* animate into an “X” when body has .nav-open */
.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}



/* ================= OUR WORK PAGE ================= */

/* Large tablets / laptops */
@media (max-width: 1024px) {
  .portfolio-section {
    padding: 120px 3rem 80px;
  }

  .portfolio-header h1 {
    font-size: 2.2rem;
  }
}

/* Tablets and mobiles */
@media (max-width: 768px) {
  /* Navbar adjustments already handled above */

  .portfolio-section {
    padding: 110px 1.5rem 3rem;
  }

  .portfolio-header {
    text-align: center;
  }

  .portfolio-header h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .portfolio-header p {
    font-size: 1rem;
    margin: 0 auto 1.5rem;
    max-width: 520px;
  }

  .carousel-viewport {
    height: 420px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .portfolio-card {
    width: 75vw;
    max-width: 340px;
    scroll-snap-align: center;
  }

  .carousel-arrow {
    display: none; /* hide arrows, rely on swipe */
  }

  .nav-right {
    display: none; /* hide quote button on mobile */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .portfolio-header h1 {
    font-size: 1.5rem;
  }

  .portfolio-card {
    width: 80vw;
    max-width: 300px;
  }

  .portfolio-section {
    padding: 100px 1.2rem 2.5rem;
  }
}

}


/* ================= NAVBAR RESPONSIVE ================= */
/* Desktop / base: hide hamburger completely */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
}
  
  @media (max-width: 768px) {
  
    .nav-toggle {
      display: flex;
      background: none;
      border: none;
      cursor: pointer;
      margin-left: auto;
      padding: 4px;
      flex-direction: column;
      gap: 5px;
    }
  
    .nav-toggle span {
      width: 26px;
      height: 3px;
      border-radius: 999px;
      background: #2721f6;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
  
    .nav-open .nav-toggle span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .nav-open .nav-toggle span:nth-child(2) {
      opacity: 0;
    }
    .nav-open .nav-toggle span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  
    .navbar {
      padding: 14px 20px;
    }
  
    .nav-center {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: #000;
      padding: 16px 20px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: max-height 0.25s ease, opacity 0.25s ease;
    }
  
    .nav-open .nav-center {
      max-height: 260px;
      opacity: 1;
      pointer-events: auto;
    }
  
    .nav-right {
      display: none;
    }
  }
  
  @media (max-width: 480px) {
    .navbar {
      padding: 10px 16px;
    }
  }
  

  @media (min-width: 1024px) {
    .nav-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
    }
    }


/* ================= HOME PAGE RESPONSIVE ================= */

@media (max-width: 1024px) {
  .hero {
    padding: 120px 32px 80px;
  }

  .hero-left h1 {
    font-size: 3.2rem;
  }

  .card-stack {
    width: 380px;
    height: 440px;
  }
}

@media (max-width: 768px) {

  .hero {
    flex-direction: column;
    text-align: center;
    padding: 100px 24px 60px;
    gap: 40px;
  }

  .hero-left{
    width: 100%;
  }

  .hero-right{
  display: none;
  }
  .hero-right {
    display: none;
  }

  /* expand hero-left to full width */
  .hero-left {
    width: 100%;
    text-align: center;
  }

  /* FIX THE GAP — reset hero height */
  .hero {
    height: auto;
    min-height: unset;
    padding-bottom: 40px; /* optional, looks cleaner */
  }

  .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .card-stack {
    width: 100%;
    max-width: 420px;
    height: 360px;
  }

  .stack-card {
    width: 70%;
    height: 260px;
  }

  .scroll-loop-gallery {
    padding: 40px 0 20px;
    overflow-x: auto;
  }

  .g-card {
    width: 70vw;
    max-width: 320px;
    scroll-snap-align: center;
  }

  .contact-section {
    padding: 80px 24px 100px;
  }
}

@media (max-width: 480px) {
  .hero-left h1 {
    font-size: 2.4rem;
  }

  .faq-section {
    padding: 60px 6%;
  }

  .faq-title {
    font-size: 2rem;
  }

  .faq-question {
    padding: 16px 16px;
  }

  .faq-answer {
    padding: 0 16px 16px 16px;
  }
  
}


/* ================= ABOUT PAGE RESPONSIVE ================= */

/* phones only – hide rocket */
@media (max-width: 480px) {
  .mission-vision {
    padding: 50px 7% 50px;
  }

  .mv-intro h2 {
    font-size: 2rem;
  }

  .mv-intro p {
    max-width: none;
  }

  /* hard-hide the rocket on mobile */
  .hero-rocket {
    display: none !important;
  }

  .hero-title {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
}

/* tablet + small laptop tweaks */
@media (max-width: 1024px) {
  .hero-left h1 {
    font-size: 2.4rem;
  }

  .hero-title {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
}

/* ================= OUR WORK PAGE RESPONSIVE ================= */

/* ---------- Stacked layout for ≤ 1024px ---------- */
@media (max-width: 1024px) {

  .portfolio-section {
    padding: 120px 1.5rem 3rem;
  }

  .portfolio-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .portfolio-header .work-title {
    font-size: 2rem;
    line-height: 1.3;
  }

  .portfolio-header .work-subtitle {
    margin: 0 auto;
    max-width: 540px;
    font-size: 1.05rem;
  }

  .portfolio-carousel-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  /* No fixed-height carousel, just a normal container */
  .carousel-viewport {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: auto;
    overflow: visible;
  }

  .portfolio-carousel-track {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transform: none !important;
    perspective: none;
  }

  /* No arrows */
  .carousel-arrow {
    display: none;
  }

  /* ✅ Plain stacked cards */
  .portfolio-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 640px;
    height: 420px;          /* adjust if you want taller/shorter */
    margin: 0 auto;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
  }

  .portfolio-card-inner {
    height: 100%;
    border-radius: 28px;
  }
}

/* ---------- Tablets & mobile tweaks (≤ 768px) ---------- */
@media (max-width: 768px) {

  .portfolio-section {
    padding: 110px 1.25rem 2.5rem;
    height: 100%;
    
  }

  .portfolio-header .work-title {
    font-size: 1.8rem;
  }

  .portfolio-header .work-subtitle {
    font-size: 1rem;
    max-width: 460px;
  }

  .portfolio-card {
    max-width: 520px;
    height: 400px;
  }

  .portfolio-carousel-track {
    gap: 1.75rem;
  }
}

/* ---------- Small phones (≤ 480px) ---------- */
@media (max-width: 480px) {

  .portfolio-section {
    padding: 100px 1rem 2.25rem;
  }

  .portfolio-header .work-title {
    font-size: 1.55rem;
  }

  .portfolio-card {
    max-width: 100%;
    height: 380px;
  }
}