/* ----------------------------------
    1. ROOT PALETTE (picked from logo)
---------------------------------- */
:root{
    --sfds-blue:##EFD9CE;
    --sfds-red:##CEA2AC;
    --overlay:0.35;            /* ⬅ lighter overlay → clearer photo */
}

/* ----------------------------------
    2. RESET & BODY
---------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    color:#fff;background:#111;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

/* ----------------------------------
    3. NAVBAR
---------------------------------- */
.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2rem;
    z-index: 10;
    background: transparent; /* make it transparent */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.logo img{max-width:120px;height:40px}

.nav-links{list-style:none;display:flex;gap:2rem}
.nav-links li{position:relative}
.nav-links a{
    font-weight:600;letter-spacing:.5px;
    transition:color .3s ease;
}
.nav-links a::after{
    content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
    background:var(--sfds-red);transform:scaleX(0);transform-origin:left;
    transition:transform .35s ease;
}
.nav-links a:hover{color:var(--sfds-red)}
.nav-links a:hover::after{transform:scaleX(1)}

/* hamburger (mobile) */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#fff;
                transition:transform .4s ease,opacity .4s ease}
#menuToggle{display:none}
#menuToggle:checked~.nav-links{right:0}
#menuToggle:checked~.hamburger span:nth-child(1){
    transform:translateY(8px) rotate(45deg)
}
#menuToggle:checked~.hamburger span:nth-child(2){opacity:0}
#menuToggle:checked~.hamburger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)
}

/* ----------------------------------
    4. HERO SECTION
---------------------------------- */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;text-align:center;
    overflow:hidden;
    background:
    linear-gradient(rgba(0,0,0,var(--overlay)),
                    rgba(0,0,0,var(--overlay))),
    url("banner1.png") center/cover no-repeat;
    animation:heroPanZoom 8s ease-in-out infinite alternate;
}
@media (max-width: 768px) {
    .hero {
    padding-top: 4rem;
    padding-bottom: 8rem;
    background-position: center top;
    background-size: cover;
    animation: heroZoomMobile 12s ease-in-out infinite alternate;
    background-attachment: fixed;
    }

    .hero-content {
    padding: 1rem 1.5rem;
    }
}

.hero-content{
    max-width:900px;padding:1rem;
    opacity:0;transform:translateY(40px);
    animation:fadeInUp 1.2s ease-out .6s forwards;
}
.hero h1{
    font-size:clamp(2.2rem,6vw,4rem);font-weight:800;margin-bottom:1rem;
    /* animated gradient shine */

    background-size:200%;-webkit-background-clip:text;
    text-shadow:1px 1px 6px rgba(0,0,0,.7);
    color:#fefefe;
    transform:scale(.85);
}
.hero p{
    font-size:clamp(1.1rem,2.5vw,1.5rem);color:#f3f3f3;margin-bottom:2rem;
    opacity:0;transform:translateY(20px);
    animation:fadeInUp .9s ease-out 1.2s forwards;
}
.btn-primary{
    display:inline-block;padding:.9rem 2.2rem;
    border:2px solid #ecdad1;
    border-radius:4px;font-weight:700;
    transition:background .3s ease,transform .3s ease;
}
.btn-primary:hover{background:#EFD9CE;transform:scale(1.06)}

/* ===== SERVICES (dark / glass) ===== */
.services{
position:relative;
background:
    linear-gradient(rgba(0,0,0,0.1),
                    rgba(0,0,0,0.1)),
    url("latest_4.png") center/cover no-repeat;
padding:5rem 2rem 6rem;
overflow:hidden;
min-height: 100vh;
}
/* 1-a. Center the Services heading */
.section-title{
text-align:center;                         /* was left-aligned */
color:#fff;
font-size:clamp(2rem,5vw,3rem);
margin:0 auto 3.5rem;
text-shadow:1px 1px 6px rgba(0,0,0,.7);
opacity:0;transform:translateY(30px);
animation:fadeInUp .9s ease-out .2s forwards;
}

/* 1-b. Make the heading pop on hover (optional, looks nice!) */
.section-title:hover{
letter-spacing:1px;
transition:letter-spacing .35s ease;
}

/* grid: 5-per-row then responsive collapse */
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
max-width:1600px;
margin:0 auto;
}

/* card styling */
.service-card-1{
position:relative;
background:
    linear-gradient(rgba(0,0,0,var(--overlay)),
                    rgba(0,0,0,var(--overlay))),
    url("1.png") center/cover no-repeat;
border:1px solid rgba(255,255,255,0.18);
border-top:4px solid var(--sfds-blue);
backdrop-filter:blur(8px);
border-radius:10px;
padding:8rem 1rem;
color:#fefefe;
text-align: center;
box-shadow:0 6px 20px rgba(0,0,0,.35);
opacity:0;
transform:translateY(50px) scale(.94);
animation:cardIn .95s cubic-bezier(.25,.8,.25,1) forwards;
}
.service-card-2{
position:relative;
background:
    linear-gradient(rgba(0,0,0,var(--overlay)),
                    rgba(0,0,0,var(--overlay))),
    url("2.png") center/cover no-repeat;
border:1px solid rgba(255,255,255,0.18);
border-top:4px solid var(--sfds-blue);
border-radius:10px;
padding:8rem 1rem;
color:#fefefe;
text-align: center;
box-shadow:0 6px 20px rgba(0,0,0,.35);
transform:translateY(50px) scale(.94);
animation:cardIn .95s cubic-bezier(.25,.8,.25,1) forwards;
}
.service-card-3{
position:relative;
background:
    linear-gradient(rgba(0,0,0,var(--overlay)),
                    rgba(0,0,0,var(--overlay))),
    url("3.png") center/cover no-repeat;
border:1px solid rgba(255,255,255,0.18);
border-top:4px solid var(--sfds-blue);
backdrop-filter:blur(8px);
border-radius:10px;
padding:8rem 1rem;
color:#fefefe;
text-align: center;
box-shadow:0 6px 20px rgba(0,0,0,.35);
opacity:0;
transform:translateY(50px) scale(.94);
animation:cardIn .95s cubic-bezier(.25,.8,.25,1) forwards;
}
.service-card:nth-child(1){animation-delay:.2s}
.service-card:nth-child(2){animation-delay:.3s}
.service-card:nth-child(3){animation-delay:.4s}
.service-card:nth-child(4){animation-delay:.5s}
.service-card:nth-child(5){animation-delay:.6s}
.service-card:nth-child(6){animation-delay:.8s}
.service-card:nth-child(7){animation-delay:.9s}
.service-card:nth-child(8){animation-delay:1s}
.service-card:nth-child(9){animation-delay:1.1s}
.service-card:nth-child(10){animation-delay:1.2s}

.service-card-1 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:3.50rem;
}

.service-card-2 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:3.50rem;
}
.service-card-3 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:3.50rem;
}
.service-card p{
font-size:.93rem;
line-height:1.55;
}

.service-card:hover{
/* lift + tilt for instant feedback */
transform:rotateX(4deg) rotateY(-3deg) translateY(-10px) scale(1.06);
box-shadow:0 14px 32px rgba(255,36,0,.38);

/* ✨ gentle float starts **only** while hovered */
animation:
    cardIn .95s cubic-bezier(.25,.8,.25,1) forwards,
    float   11s ease-in-out infinite;
}

/* glowing ring is unchanged */
.service-card::after{
content:"";
position:absolute;inset:-2px;
border-radius:inherit;
background:radial-gradient(circle at 50% 50%,
            rgba(255,36,0,.45) 0%,
            rgba(255,36,0,0) 60%);
opacity:0;pointer-events:none;
transition:opacity .4s ease;
}
.service-card:hover::after{opacity:.7}

@keyframes float{
0%,100% {transform:translateY(0)}
50%     {transform:translateY(-14px)}
}


/* keyframes */
@keyframes cardIn{
to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1)}}

/* responsive columns */
@media(max-width:1400px){
.services-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1100px){
.services-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
.services-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
.services-grid{grid-template-columns:1fr}
.service-card-1 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:2.5rem;
}

.service-card-2 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:2.5rem;
}
.service-card-3 h3{
color:var(--sfds-red);
margin-bottom:1rem;
font-size:2.5rem;
}
}

/* ===== Add to your existing <style> ===== */
.product-tabs {
    padding: 5rem 5rem;
    background:
    linear-gradient(rgba(0,0,0,0.4),
                    rgba(0,0,0,0.4)),
    url("4.jpg") center/cover no-repeat;
    min-height: 100vh;
}
.product-tabs .section-title {
    margin-bottom: 2rem;
    color: #eaeaea;
}

/* Tabs */
.product-tabs .tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.product-tabs .tab.active {
    background: transparent;
    border: none;
    border-bottom: 3px solid #eaeaea;
    color: #eaeaea;
    font-weight: bold;
    border-radius: 0px;
}

.product-tabs .tab {
    background: rgba(255,255,255,0.1);
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    color: #eaeaea;
    transition: background 0.3s;
}
.product-tabs .tab.active,
.product-tabs .tab:hover {
    background: var(--sfds-red);
}

/* Tab content panels */
.product-tabs .tab-content { display: none; }
.product-tabs .tab-content.active { display: block; }

/* Product grid & cards */
.product-tabs .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: none;    /* allow full width for 4 items */
    margin: 0 auto;
}


.product-tabs .product-card{
  background:#eaeaea;
  border-radius:8px;
  /* 4 cards in the row */
  flex:0 0 calc(25% - 15px);   /* 25 % width minus a share of the 20 px gap */
  overflow:hidden;
  text-align:left;
  color:#000;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s;
}
.product-tabs .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.product-tabs .product-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}
.product-tabs .product-card h4 {
    margin: 0.5rem 0;
    color: var(--sfds-red);
    padding-left: 20px;
}
.product-tabs .product-card .price {
    font-weight: 700;
    padding-left: 20px;
    margin: 0.25rem 0 0.75rem;
}
.product-tabs .product-card p {
    font-size: 0.9rem;
    padding-left: 20px;
    line-height: 1.4;
}




.product-tabs .product-card-1{
  background:#eaeaea;
  border-radius:8px;
  /* 4 cards in the row */
  flex:0 0 calc(25% - 15px);   /* 25 % width minus a share of the 20 px gap */
  overflow:hidden;
  text-align:left;
  color:#000;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s;
}
.product-tabs .product-card-1:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.product-tabs .product-card-1 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}
.product-tabs .product-card-1 h4 {
    margin: 0.5rem 0;
    color: var(--sfds-red);
    padding-left: 20px;
}
.product-tabs .product-card-1 .price {
    font-weight: 700;
    padding-left: 20px;
    margin: 0.25rem 0 0.75rem;
}
.product-tabs .product-card-1 p {
    font-size: 0.9rem;
    padding-left: 20px;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .product-tabs .product-grid {
    grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width:600px){
  .product-tabs .product-card{
    flex:0 0 calc(50% - 10px); /* 2-up on phones */
  }
  .product-tabs .product-card-1{
    flex:0 0 calc(50% - 10px); /* 2-up on phones */
  }
  .product-tabs .tabs {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    margin-bottom: 2rem;
}
.product-tabs {
    padding: 2rem 2rem;
    min-height: 80vh;
}
}


/* Modal Styles */
/* --- unchanged wrapper rules --- */
.product-modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;                      /* shorthand for top/left/btm/right 0 */
  overflow: auto;
  background: rgba(0, 0, 0, 0.7);
}

/* --- modal box --- */
.product-modal .modal-content {
  background: #fff;
  color: #111;
  margin: 5% auto;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  max-width: 760px;              /* wider to fit 2 cols */
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* --- two-column layout --- */
.modal-body {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* image column */
.modal-image {
  flex: 1 1 45%;
}

.modal-image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.modal-image img.zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}

/* details column */
.modal-details {
  flex: 1 1 55%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-details h4 {
  font-size: 1.45rem;
  margin: 0;
  letter-spacing: 0.3px;
}

.modal-details .price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e63946;
  margin: 0;
}

.modal-details p {
  line-height: 1.55;
  margin: 0;
}

/* WhatsApp button */
.whatsapp-btn {
  align-self: flex-start;
  display: inline-block;
  background: #25d366;
  color: #fff;
  padding: 0.8rem 1.8rem;
  margin-top: 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease;
}

.whatsapp-btn:hover {
  background: #1ebe5b;
}

/* close icon */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 1.7rem;
  cursor: pointer;
  color: #666;
}

/* --- responsive: stack on small screens --- */
@media (max-width: 640px) {
  .modal-body {
    flex-direction: column;
    gap: 1.25rem;
  }
  .modal-image,
  .modal-details {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
  }
  .modal-details {
    align-items: center;
  }
  .whatsapp-btn {
    align-self: center;
  }
}

/* === Product carousel === */
.carousel            { position: relative; }
.product-track {
display: flex;
gap: 20px;                 /* ↔ must match JS GAP */
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;     /* Firefox */
}
.product-track::-webkit-scrollbar { display: none; }  /* Chrome */

.carousel-btn {
position: absolute;
top: 50%;  translate: 0 -50%;
border: none;
font-size: 2rem;
padding: .2rem .6rem;
background: #fff;
box-shadow: 0 0 4px rgb(0 0 0 / .25);
cursor: pointer;
opacity: .6;
transition: opacity .2s;
}
.carousel-btn.prev { left: 0;  }
.carousel-btn.next { right: 0; }
.carousel-btn:hover { opacity: 1; }





/* ===== ABOUT SECTION ===== */
.about{
position:relative;
padding:5rem 2rem 6rem;
background:
    linear-gradient(rgba(0,0,0,0.1),
                    rgba(0,0,0,0.1)),
    url("latest_5.png") center/cover no-repeat;      /* swap for your image */
overflow:hidden;
color: #fff;
height: 100vh;
}
.about h2{
    color: #fff;
}

.about-wrapper{
display:grid;
grid-template-columns:repeat(1,1fr);
gap:3rem;
max-width:1200px;
margin:0 auto;
}


.about-card{
background-color:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255,255,255,0.18);
backdrop-filter:blur(8px);
border-radius:12px;
padding:2.2rem 2rem 2.6rem;
margin: 50px;
text-align:center;
color: #fff;
opacity:0;
transform:translateY(-10px) scale(1.04);
box-shadow:0 14px 32px rgba(255,36,0,.38);
animation:cardIn .95s cubic-bezier(.25,.8,.25,1) forwards;
}

.about-card:nth-child(1){animation-delay:.25s}
.about-card:nth-child(2){animation-delay:.45s}

.about-icon{
width:100px;
filter:drop-shadow(0 4px 6px rgba(255, 248, 248, 0.4));

}

.about-card h3{
margin-bottom:1rem;
font-size:1.35rem;
}

.about-card p{
font-size:1rem;
line-height:1.6;
}

.about-card:hover{
    box-shadow:0 6px 20px rgba(154, 154, 154, 0.35);
    transform:translateY(50px) scale(.94);

}

/* single-column on mobiles */
@media(max-width:900px){
.about-wrapper{grid-template-columns:1fr}
}

/* ===== COUNTERS STRIP ===== */
.counters{
    position:relative;
    padding:4.5rem 2rem;
    background:
        linear-gradient(rgba(0,0,0,0.10),rgba(0,0,0,0.10)),
        url("latest_3.png") center/cover no-repeat;   /* swap for any backdrop */
    overflow:hidden;      /* subtle glass over dark */
    border-top:1px solid rgba(255,255,255,0.10);
    border-bottom:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(6px);
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:2.4rem;
    justify-items:center;
    text-align:center;
    opacity:0;
    transform:translateY(40px);
    animation:fadeInUp .9s ease-out .3s forwards;
}

.counter-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.45rem;
}

/* big number */
.counter-card .count{
    font-size:clamp(2.8rem,6vw,4rem);
    font-weight:800;
    color:#fff;
    text-shadow:1px 1px 6px rgba(0,0,0,.65);
    letter-spacing:1px;
}

/* little + sign */
.counter-card sup{
    font-size:1.8rem;
    font-weight:700;
    color:var(--sfds-red);
    margin-left:.25rem;
    vertical-align:top;
}

/* label */
.counter-card p{
    font-size:1.05rem;
    color:#fff;
    letter-spacing:.3px;
}

@media(max-width:500px){
    .counters{padding:3.5rem 1.2rem}
    .counter-card p{font-size:.95rem}
}

/* icon size & tint */
.counter-icon{
    width:46px;height:46px;
    color:var(--sfds-red);
    margin-bottom:.4rem;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}

/* softly glowing separator between rows on big screens */
@media(min-width:640px){
    .counter-card:not(:last-child)::after{
    content:"";
    position:absolute;right:-1.2rem;top:50%;height:44%;
    width:2px;background:rgba(255,255,255,0.12);
    transform:translateY(-50%);
    }
}

/* card hover pulse */
.counter-card:hover .count{
    animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{transform:scale(1)}
    50%    {transform:scale(1.06)}
}

/* ===== TESTIMONIALS ===== */
.testimonials{
    position:relative;
    padding:5rem 2rem 6rem;
    background:
        linear-gradient(rgba(0,0,0,0.40),rgba(0,0,0,0.40)),
        url("1.png") center/cover no-repeat;   /* ✦ new banner */
    overflow:hidden;
}

.slider-wrapper{
    position:relative;
    max-width:1300px;
    margin:0 auto;
}

.slider-btn{
    position:absolute;top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,0.25);
    backdrop-filter:blur(6px);
    color:#fff;font-size:2rem;line-height:1;
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:5;
    transition:background .3s ease,transform .3s ease;
}
.slider-btn:hover{background:rgba(255,36,0,.80);transform:scale(1.14)}
.slider-btn.prev{left:-1.4rem}
.slider-btn.next{right:-1.4rem}

/* Track is horizontally scrollable (snap) */
.testimonial-track{
    display:flex; gap:20px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-left:1px;              /* smooth first snap */
    scrollbar-width:none;                 /* Firefox */
}
.testimonial-track::-webkit-scrollbar{display:none}

/* Card sizing: 3-per-view → 2 → 1  */
.testimonial-card{
    scroll-snap-align:start;
    flex:0 0 calc((100% - 40px) / 3);     /* 3 cards minus 2 gaps */
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18);
    backdrop-filter:blur(10px);
    border-radius:12px;
    padding: 80px 5px 30px 5px;
    color:#fff;text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
}
@media(max-width:920px){
    .testimonial-card{flex:0 0 calc((100% - 20px) / 2);} /* 2-per-view */
}
@media(max-width:600px){
    .testimonial-card{flex:0 0 100%;}                    /* 1-per-view */
}

.student-photo{
    width:80px;height:80px;border-radius:50%;
    object-fit:cover;
    margin:-4.2rem auto 1.1rem;
    border:3px solid var(--sfds-red);
    box-shadow:0 4px 14px rgba(0,0,0,.55);
}

.testimonial-card h3{
    font-size:1.1rem;color:var(--sfds-red);margin-bottom:.35rem;
}

.stars{font-size:1rem;color:#ffc107;margin-bottom:.8rem}
.review{font-size:.95rem;line-height:1.55;color:#eaeaea}

/* ===== FAQ SECTION ===== */
.faq{
    position:relative;
    padding:5rem 2rem 6rem;
    background:#eaeaea;   /* add / swap image */
    overflow:hidden;
    background:
        linear-gradient(rgba(0,0,0,0.10),rgba(0,0,0,0.10)),
        url("banner bedsheet.png") center/cover no-repeat; 

    color:#eaeaea;
}

/* wrapper – centred column */
.faq-wrapper{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:1.4rem;
}

/* glassy accordion cards */
.faq-item{
    border:1px solid rgba(255,255,255,0.18);
    border-left:4px solid var(--sfds-red);
    border-radius:10px;
    background:#eaeaea;
    backdrop-filter:blur(100px);
    color:#000;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    opacity:0;
    transform:translateY(50px);
    animation:fadeInUp .9s ease-out forwards;
}
.faq-item:nth-child(1){animation-delay:.25s}
.faq-item:nth-child(2){animation-delay:.35s}
.faq-item:nth-child(3){animation-delay:.45s}
.faq-item:nth-child(4){animation-delay:.55s}

/* question row */
.faq-item summary{
    padding:1.2rem 1.6rem;
    font-weight:600;
    font-size:1.1rem;
    cursor:pointer;
    position:relative;
    list-style:none;              /* hide default marker */
}
.faq-item summary::-webkit-details-marker{display:none}

/* + / – icon */
.faq-item summary::after{
    content:"+";
    position:absolute;
    right:1.4rem;top:50%;
    transform:translateY(-50%);
    font-size:1.6rem;
    color:var(--sfds-red);
    transition:transform .35s ease;
}
.faq-item[open] summary::after{
    content:"–";
}

/* answer text */
.faq-item p{
    padding:0 1.6rem 1.4rem;
    font-size:.97rem;
    line-height:1.55;
    color:#000;
}
.faq-title{
    color: #000;
}

/* tighter on mobiles */
@media(max-width:600px){
    .faq-wrapper{gap:1.1rem}
    .faq-item summary{font-size:1rem}
}

/* ===== FOOTER ===== */

/* bottom strip */
.footer-bottom{
    padding: 20px 0px;
    border-top:1px solid rgba(255,255,255,0.15);
    font-size:.85rem;
    letter-spacing:.3px;
    text-align:center;
    color:#cfcfcf;
}


/* ----------------------------------
    5. KEYFRAMES
---------------------------------- */
@keyframes slideDown{to{transform:translateY(0);opacity:1}}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
@keyframes textPop{to{opacity:1;transform:scale(1)}}

/* Ken-Burns-style pan & zoom */
@keyframes heroPanZoom{
    0%  {background-size:110%;background-position:50% 60%}
    100%{background-size:130%;background-position:50% 40%}
}
/* moving gradient across headline */
@keyframes shine{
    0%  {background-position:0% 50%}
    100%{background-position:200% 50%}
}

/* ----------------------------------
    6. RESPONSIVE
---------------------------------- */
@media(max-width:900px){
    .nav-links{
    position:fixed;right:-100%;top:0;height:100vh;width:60%;
    flex-direction:column;align-items:center;justify-content:center;
    gap:2.5rem;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);
    transition:right .45s ease;z-index:9;
    }
    .hamburger{display:flex}
}

/* ============================================================
   UNIVERSAL REVEAL ANIMATIONS  —  © 2025 TBW / ChatGPT
   ------------------------------------------------------------
   Usage ✦  <div class="reveal" data-reveal="fade-up" data-delay="0.2">…
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(40px);          /* fallback if no data-attr */
  filter:blur(8px);
  transition:
    opacity .8s ease-out,
    transform .8s cubic-bezier(.22,1,.36,1),
    filter .8s ease-out;
  will-change:opacity,transform,filter;
  backface-visibility:hidden;          /* fixes Safari 3D flicker */
}

/* ---------- VARIANTS (set via data-reveal) ------------------ */
.reveal[data-reveal="fade-up"]    { transform:translateY(60px);        }
.reveal[data-reveal="fade-left"]  { transform:translateX(-60px);       }
.reveal[data-reveal="fade-right"] { transform:translateX( 60px);       }
.reveal[data-reveal="zoom"]       { transform:scale(.6);               }
.reveal[data-reveal="flip-x"]     { transform:rotateX(-90deg);         transform-origin:top;    }
.reveal[data-reveal="flip-y"]     { transform:rotateY(-90deg);         transform-origin:left;   }

/* ---------- ACTIVE STATE ------------------------------------ */
.reveal.show{
  opacity:1;
  transform:none;
  filter:none;
}

/* ---------- OPTIONAL: jazz it up on hover after reveal ------ */


/* ---------------------------------------------------
   7. MOBILE-ONLY PATCHES ─ stack & shrink things
   --------------------------------------------------- */
@media (max-width:480px){

  /* 0️⃣  Global tweaks */
  body{font-size:15px;}
  img , svg{max-width:100%;height:auto}          /* never overflow */

  /* 1️⃣  Navbar */
  .navbar{padding:12px 1rem;}
  .logo img{max-width:90px}
  .nav-links{
    width:100%;
    padding:80px 0 40px;
    gap:1.8rem;
  }

  /* 2️⃣  Hero */
  .hero{min-height:90vh;background-attachment:scroll;}  /* iOS fix */
  .hero-content{padding:0 1rem}
  .hero h1{font-size:2rem}
  .hero p {font-size:1rem}

  /* 3️⃣  Services cards */
  .services{padding:4rem 1rem}
  .services-grid{grid-template-columns:1fr}

  /* 4️⃣  Product tabs / carousel */
  .product-tabs{padding:4rem 1rem}
  .product-tabs .tabs{flex-wrap:wrap}
  .product-tabs .tab{
    flex:1 1 30%;
    margin-bottom:.6rem
  }

  /* carousel arrows a bit smaller */
  .carousel-btn{font-size:1.6rem;padding:.15rem .45rem}

  /* 5️⃣  Product modal */
  .product-modal .modal-content{
    margin:10% 1rem;
    padding:1.4rem
  }
  .modal-body{flex-direction:column;gap:1rem}
  .modal-image img.zoomed{transform:none;cursor:auto}

  /* 6️⃣  About */
  .about{padding:2rem 0.11rem}
  .about-card{margin:0}

  /* 7️⃣  Counters */
  .counters{padding:3rem 1rem;gap:1.5rem}

  /* 8️⃣  Testimonials / FAQ / Footer */
  .testimonials,
  .faq          {padding:4rem 1rem}
  .footer-bottom{padding:16px}
}