*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green: #003f5f;
  --green-dark: #5078d1;
  --green-light: #cacaca;
  --green-pale:#eef2e8;
  --white:#FFFFFF;
  --off-white:#F7F8F5;
  --text-dark:#1a1f12;
  --text-mid:#4a5568;
  --text-light:#718096;
  --border: #ffffff;
  --card-shadow:0 4px 20px rgba(88,109,55,0.08);
  --card-shadow-hover:0 8px 32px rgba(88,109,55,0.18);
}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;font-size:16px;color:var(--text-dark);line-height:1.7;background:var(--white)}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif}

/* NAV */
nav{position:sticky;top:0;z-index:1000;background:var(--white);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:70px;box-shadow:0 2px 16px rgba(88,109,55,0.12);border-bottom:2px solid var(--border)}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:48px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text-dark);text-decoration:none;font-size:14px;font-weight:600;font-family:'Poppins',sans-serif;transition:color 0.2s}
.nav-links a:hover{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn-call{background: linear-gradient(135deg, #ec4899 0%, #7c3aed 100%);color:white;text-decoration:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;font-family:'Poppins',sans-serif;transition:all 0.2s;display:flex;align-items:center;gap:6px}
.btn-call:hover{
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(124,58,237,0.28);
}
.btn-wa{background:#25D366;color:white;text-decoration:none;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;transition:background 0.2s}
.btn-wa:hover{background:#1eba59}

/* HERO */
#hero{background:  radial-gradient(circle at top left,
    rgba(37,99,255,0.25),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(144, 74, 209, 0.2),
    transparent 35%),

    linear-gradient(135deg,
    #243458 0%,
    #2a354e 50%,
    #33435a 100%); min-height:88vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:4rem 2rem}
#hero::after{
    content:'';
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size: 60px 60px;

    pointer-events:none;
}

.hero-bg-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,0.06) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(0,0,0,0.15) 0%,transparent 50%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-content{position:relative;max-width:760px;text-align:center;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:white;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:600;font-family:'Poppins',sans-serif;margin-bottom: 2.5rem;letter-spacing: 0.8px;}
.hero-badge::before{content:'';width:7px;height:7px;background:#fff;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(1.5)}}
.hero-content h1{font-size:clamp(2rem,5vw,3.8rem);font-weight:800;color:white;line-height:1.15;margin-bottom:1rem;letter-spacing:-0.5px}
.hero-content h1 span{color: #7c3aed;display:block;
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub{font-size:1.15rem;color:rgba(255,255,255,0.8);margin-top:2.5rem;margin-bottom:2.5rem;font-weight:400;letter-spacing:0.5px}
.hero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:2.5rem}
.hero-pill{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.9);padding:5px 14px;border-radius:100px;font-size:13px;font-weight:500}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2.5rem;
  
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);

  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
}

/* Critical fix for SVG alignment */
.hero-pill svg {
  display: block;                    /* removes baseline gap */
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


.hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn-primary{background:white;color:var(--green);text-decoration:none;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15)}

a.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
color:#ffffff;
}
.btn-primary:hover{ background: linear-gradient(135deg, #ec4899 0%, #7c3aed 100%); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(236,72,153,0.28);}
.btn-outline{background:transparent;color:white;text-decoration:none;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;border:2px solid rgba(255,255,255,0.5);transition:all 0.2s;display:inline-flex;align-items:center;gap:8px}
.btn-outline:hover{border-color:white;background:rgba(255,255,255,0.1)}

/* USP */
#usp{background:linear-gradient(135deg, #1754a7 0%, #0b1f38 50%, #3a124f 100%);padding:3rem 2rem}
.usp-grid{
  max-width:1100px;
  margin:0 auto;
  display: grid;  
  grid-template-columns: repeat(3, 2fr);
  gap:1.5rem;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
    max-width: 1100px;
  margin: 0 auto;

}
.usp-card{background:white;border-radius:14px;padding:1.8rem 1.5rem;text-align:center;border:1.5px solid var(--border);transition:all 0.25s}
.usp-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.usp-icon{width:56px;height:56px;background:var(--green-pale);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:26px}
.usp-card h3{font-size:1rem;font-weight:700;color:var(--green-dark);margin-bottom:.3rem}
.usp-card p{font-size:13.5px;color:var(--text-light);line-height:1.5}

/* SECTIONS */
section{padding:5rem 2rem}
.section-header{text-align:center;max-width:640px;margin:0 auto 3.5rem}
.section-tag{display:inline-block;background:var(--green-pale);color:var(--green);font-size:12px;font-weight:700;font-family:'Poppins',sans-serif;letter-spacing:1.5px;text-transform:uppercase;padding:4px 14px;border-radius:100px;margin-bottom:.8rem}
.section-header h2{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800;color:var(--text-dark);margin-bottom:.7rem;line-height:1.25}
.section-header p{color:var(--text-mid);font-size:15.5px}

/* ABOUT */
#about{background:white}
.about-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-img{border-radius:20px;overflow:hidden;background:var(--green-pale);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;border:2px solid var(--border)}
.about-img-placeholder{text-align:center;color:var(--text-light);padding:2rem}
.about-img-placeholder div:first-child{font-size:4rem;margin-bottom:.5rem}
.about-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--green)}
.about-content h2{font-size:clamp(1.8rem,1vw,2.2rem);font-weight:800;color:var(--text-dark);margin-bottom:1rem;line-height:1.3}
.about-content p{color:var(--text-mid);margin-bottom:1rem;font-size:15.5px}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}
.about-stat{background:var(--off-white);border-radius:12px;padding:1rem;text-align:center;border:1px solid var(--border)}
.about-stat strong{display:block;font-size:1.6rem;font-weight:800;color:var(--green);font-family:'Poppins',sans-serif}
.about-stat span{font-size:12px;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* PRODUCTS */
#products{background:var(--off-white)}
.products-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem}
.product-card{background:white;border-radius:18px;border:1.5px solid var(--border);transition:all 0.3s;position:relative;overflow:hidden}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--green)}
.product-card-img{width:100%;height:200px;object-fit:cover;display:block;background:#e8eedb}
.product-card-img-placeholder{width:100%;height:200px;background:linear-gradient(135deg,var(--green-pale),var(--border));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-light)}
.product-card-img-placeholder span:first-child{font-size:2.5rem}
.product-card-img-placeholder span:last-child{font-size:12px;font-style:italic}
.product-card-body{padding:0.5rem}
.product-card h3{font-size:1.15rem;font-weight:700;color:var(--text-dark);margin-bottom:.4rem}
.product-card>div>p{font-size:13.5px;color:var(--text-light);margin-bottom:1.2rem}
.product-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.product-list li{background:var(--green-pale);border:1px solid var(--border);border-radius:100px;padding:3px 12px;font-size:12.5px;color:var(--green-dark);font-weight:600}

/* BRANDS - INFINITE SCROLL */
#brands{background:white;overflow:hidden}
.brands-container{max-width:1100px;margin:0 auto}
.brands-track-wrap{overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
.brands-track{display:flex;gap:1rem;width:max-content;padding:0.5rem 0}
.brands-track.right{animation:scrollRight 28s linear infinite}
.brands-track.left{animation:scrollLeft 28s linear infinite}
.brands-track:hover{animation-play-state:paused}
@keyframes scrollRight{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scrollLeft{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.brand-card{flex-shrink:0;width:160px;height:88px;background:white;border:1.5px solid var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;cursor:default}
.brand-card:hover{border-color:var(--green);box-shadow:0 4px 16px rgba(88,109,55,0.12);transform:translateY(-2px)}
.brand-card-img{width:90px;height:40px;object-fit:contain;display:block}
.brand-card-img-placeholder{width:90px;height:40px;background:var(--green-pale);border-radius:6px;display:flex;align-items:center;justify-content:center}
.brand-name{font-size:12px;font-weight:700;color:var(--green-dark);font-family:'Poppins',sans-serif;text-align:center;padding:0 8px}
.brands-row-gap{margin-top:1rem}

/* VIDEO */
#video{background:var(--green-dark);padding:5rem 2rem}
.video-inner{max-width:860px;margin:0 auto;text-align:center}
#video .section-tag{background:rgba(255,255,255,0.15);color:#d4e6a0}
#video .section-header h2{color:white}
#video .section-header p{color:rgba(255,255,255,0.65)}
#video .section-header{margin-bottom:2.5rem}
.video-wrapper{border-radius:16px;overflow:hidden;background:#0a1a00;position:relative;padding-bottom:56.25%;height:0;border:2px solid rgba(255,255,255,0.1)}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:rgba(255,255,255,0.5)}
.video-play-btn{width:72px;height:72px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;transition:transform 0.2s;cursor:pointer}
.video-play-btn:hover{transform:scale(1.1)}

/* REVIEWS */
#reviews{background:var(--off-white)}
.reviews-header-row{max-width:1100px;margin:0 auto 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.google-rating-badge{display:flex;align-items:center;gap:12px;background:white;border:1.5px solid var(--border);border-radius:14px;padding:12px 20px}
.google-rating-badge img{width:80px}
.google-rating-badge .rating-num{font-size:2rem;font-weight:800;color:var(--text-dark);font-family:'Poppins',sans-serif;line-height:1}
.google-rating-badge .stars{color:#F59E0B;font-size:16px;letter-spacing:2px}
.google-rating-badge .count{font-size:12px;color:var(--text-light)}
.reviews-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.review-card{background:white;border-radius:16px;padding:1.6rem;border:1px solid var(--border);transition:all 0.25s}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
.review-stars{color:#F59E0B;font-size:17px;margin-bottom:.8rem;letter-spacing:2px}
.review-text{font-size:14.5px;color:var(--text-mid);font-style:italic;margin-bottom:1rem;line-height:1.7}
.review-author{display:flex;align-items:center;gap:10px}
.review-avatar{width:38px;height:38px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;font-family:'Poppins',sans-serif;flex-shrink:0}
.review-author-info strong{display:block;font-size:14px;font-weight:700;color:var(--text-dark);font-family:'Poppins',sans-serif}
.review-author-info span{font-size:12px;color:var(--text-light)}
.reviews-loading{text-align:center;padding:3rem;color:var(--text-light);font-style:italic}
.reviews-error{text-align:center;padding:2rem;color:var(--text-light)}
.reviews-footer{text-align:center;margin-top:2.5rem}
.btn-reviews{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--green-dark);text-decoration:none;border:2px solid var(--green);padding:12px 28px;border-radius:10px;font-weight:700;font-family:'Poppins',sans-serif;font-size:14.5px;transition:all 0.2s}
.btn-reviews:hover{background:var(--green);color:white}

/* MAP */
#location{background:white}
.location-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.map-wrapper{border-radius:18px;overflow:hidden;height:380px;border:2px solid var(--border)}
.map-wrapper iframe{width:100%;height:100%;border:0}
.store-info h3{font-size:1.3rem;font-weight:800;color:var(--text-dark);margin-bottom:1.5rem}
.info-row{display:flex;gap:14px;padding:1rem 0;border-bottom:1px solid var(--border);align-items:flex-start}
.info-row:last-child{border-bottom:none}
.info-icon{width:40px;height:40px;background:var(--green-pale);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.info-row div strong{display:block;font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px}
.info-row div a,.info-row div p{font-size:14.5px;color:var(--text-dark);text-decoration:none;font-weight:500}
.info-row div a:hover{color:var(--green)}

/* CTA */
#contact{background:linear-gradient(135deg, rgb(23, 84, 167) 0%, rgb(11, 31, 56) 50%, rgb(58, 18, 79) 100%);padding:5rem 2rem;text-align:center;position:relative;overflow:hidden}
#contact::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 30% 50%,rgba(255,255,255,0.06) 0%,transparent 60%);pointer-events:none}
.contact-inner{max-width:700px;margin:0 auto;position:relative;z-index:1}
#contact h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:white;margin-bottom:.8rem}
#contact>div>p{color:rgba(255,255,255,0.75);font-size:15.5px;margin-bottom:2.5rem}
.contact-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:3rem}
.btn-wa-lg{background:#25D366;color:white;text-decoration:none;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s;box-shadow:0 4px 18px rgba(37,211,102,0.25)}
.btn-wa-lg:hover{background:#1eba59;transform:translateY(-2px)}
.enquiry-form{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:18px;padding:2rem;text-align:left;max-width:500px;margin:0 auto}
.enquiry-form h3{color:white;font-size:1.1rem;margin-bottom:1.2rem}
.form-group{margin-bottom:1rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;color:white;font-size:14px;font-family:'Open Sans',sans-serif;outline:none;transition:border-color 0.2s}
.option{width:100%;padding:10px 14px;background:#0b1f38;border:1px solid rgba(255,255,255,0.2);border-radius:8px;color:white;font-size:14px;font-family:'Open Sans',sans-serif;outline:none;transition:border-color 0.2s}

.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.45)}
.form-group input:focus,.form-group textarea:focus{border-color:rgba(255,255,255,0.6)}
.form-group textarea{resize:vertical;min-height:90px}
.btn-submit{width:100%;background:white;color:var(--green-dark);border:none;padding:12px;border-radius:8px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;cursor:pointer;transition:background 0.2s}
.btn-submit:hover{background:#f0f5e8}

/* FOOTER */
footer{background:#121021;color:rgba(255,255,255,0.7);padding:3.5rem 2rem 1.5rem}
.footer-grid{max-width:1100px;margin:0 auto 2.5rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.footer-logo{margin-bottom:1rem}
.footer-logo img{height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1) opacity(0.85)}
.footer-brand p{font-size:14px;line-height:1.7;margin:0 0 1.5rem;max-width:320px}
.footer-social{display:flex;gap:10px}
.social-btn{width:38px;height:38px;background:rgba(255,255,255,0.07);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;transition:background 0.2s}
.social-btn:hover{background:var(--green)}
footer h4{font-size:13px;font-weight:700;color:white;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:1.2rem}
footer ul{list-style:none}
footer ul li{margin-bottom:.6rem}
footer ul a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:14px;transition:color 0.2s}
footer ul a:hover{color:#a8c46a}
footer ul li span{color:rgba(255,255,255,0.6);font-size:14px;display:block}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.08);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:12.5px;color:rgba(255,255,255,0.4)}

/* MOBILE STICKY */
.sticky-mobile{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:#1a2110;padding:10px 1rem;gap:10px;border-top:2px solid rgba(255,255,255,0.08);box-shadow:0 -4px 20px rgba(0,0,0,0.25)}
.sticky-mobile a{flex:1;text-align:center;padding:12px;border-radius:10px;font-weight:700;font-family:'Poppins',sans-serif;font-size:14px;text-decoration:none;color:white;display:flex;align-items:center;justify-content:center;gap:6px}
.sticky-mobile .s-call{background:var(--green)}
.sticky-mobile .s-wa{background:#25D366}
.product-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: #e8eedb;
}

.brand-logo-img {
  width: 130px;
  height: 80px;
  object-fit: contain;
  display: block;
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}


@media(max-width:900px){.nav-links{display:none}.about-grid{grid-template-columns:1fr}.location-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){section{padding:3.5rem 1.2rem}#hero{padding:3rem 1.2rem;min-height:80vh}nav{padding:0 1rem}.footer-grid{grid-template-columns:1fr}.about-stats{grid-template-columns:repeat(2,2fr)}.sticky-mobile{display:flex}footer{padding-bottom:5rem}.usp-grid{grid-template-columns:repeat(2,2fr)}}

.success-msg {
    /*background: #155724;*/
    color: #d4edda;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.error-msg {
    /*background: #f8d7da;*/
    color: #f8d7da;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.brands-cta{padding: 20px;}
.brand-title{text-align: center;font-size:clamp(1.5rem,1vw,2.2rem);font-weight:800;color:var(--text-mid);margin-bottom:1rem;line-height:1.3}
.brands-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding: 20px;}
.brands-btn-primary{background:var(--green);color:white;text-decoration:none;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.brands-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.2)}
.brands-btn-outline{background:transparent;color:var(--green);text-decoration:none;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;border:2px solid var(--green);transition:all 0.2s;display:inline-flex;align-items:center;gap:8px}
.brands-btn-outline:hover{border-color:white;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.2);border:2px solid var(--green);}



.product-card-btns {
  display: flex;
  gap: 10px;
  margin-top: 1.2rem;
}

.btn-wholesale {
  height: 38px;
  flex: 1;
  text-align: center;
  padding: 8px 8px; 
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  background: var(--green);
  color: white;
  transition: background 0.2s, transform 0.15s;
}

.btn-wholesale:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

.btn-enquire {
  height: 38px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;

  background: white;
  color: var(--green);
  border: 2px solid var(--green);
  transition: all 0.2s;
}

.btn-enquire:hover {
  background: var(--green);
  color: white;
  transform: translateY(-2px);
}

#why-choose{
    padding: 80px 20px;
    background:linear-gradient(135deg, rgb(23, 84, 167) 0%, rgb(11, 31, 56) 50%, rgb(58, 18, 79) 100%);
    color: #fff;
}

.why-inner{
    max-width: 1200px;
    margin: auto;
}

#why-choose .section-header{
    text-align: center;
    margin-bottom: 50px;
}

#why-choose .section-tag{
    display: inline-block;
    padding: 6px 14px;
    background: rgba(47, 46, 133, 0.08);
    color:white;
    border: 1px solid white;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 12px;
}

#why-choose .section-header h2{
    color:white;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

#why-choose .section-header p{
    color:white;
    max-width: 650px;
    margin: auto;
    font-size: 15px;
    opacity: 0.8;
}

/* GRID */
#why-choose .why-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* LEFT CARDS */
#why-choose .why-left .why-card{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 15px;
    transition: 0.3s ease;
}

#why-choose .why-left .why-card:hover{
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
}

#why-choose .why-card h3{
    font-size: 18px;
    margin-bottom: 6px;
}

#why-choose .why-card p{
    font-size: 14px;
    opacity: 0.8;
}

/* FAQ RIGHT SIDE */
#why-choose .why-right{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#why-choose .faq-item{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
}

#why-choose .faq-question{
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    color: #fff;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
}

#why-choose .faq-answer{
    padding: 0 15px 15px;
    font-size: 14px;
    opacity: 0.8;
    display: none;
}

/* ACTIVE STATE */
#why-choose .faq-item.active .faq-answer{
    display: block;
}

/* RESPONSIVE */
@media(max-width: 768px){
    #why-choose .why-grid{
        grid-template-columns: 1fr;
    }

    #why-choose .section-header h2{
        font-size: 26px;
    }
}