:root{
  --bg: #ffffff;
  --fg: #0b0b0b;
  --muted: #9ca3af; /* grey */
  --panel: #f7f7f8;
  --primary: #0b0b0b;
  --accent: #111;
}
.hero-lead, .lead{color:var(--muted)}
body{background:var(--bg);color:var(--fg);font-family:Inter, Roboto, "Segoe UI", Arial, sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}
.btn-dark{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-outline-dark{color:var(--primary);border-color:var(--muted)}
.navbar-brand{letter-spacing:1px}
.lead{color:var(--muted)}
footer{background:#fafafa}

/* HERO / BANNER */
section[aria-label="Hero banner"], .bg-banner {
  color: #fff;
  position:relative;
  overflow:hidden;
}
/* background wrapper class - uses inline style or .bg-banner-image element */
.bg-banner .bg-banner-image{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
section[aria-label="Hero banner"] .display-4,
.bg-banner .display-4{ font-size:3.0rem; font-weight:800; letter-spacing:-0.02em; line-height:1.05 }
@media (max-width: 992px){ section[aria-label="Hero banner"] .display-4{font-size:2.0rem} }
@media (max-width: 576px){ section[aria-label="Hero banner"] .display-4{font-size:1.4rem} }
.hero-lead, section[aria-label="Hero banner"] .lead{ color: rgba(255,255,255,0.9); font-size:1.03rem }

/* center the input nicely */
.input-group.input-group-lg{ box-shadow:0 10px 30px rgba(2,6,23,0.25); border-radius:10px; overflow:hidden }
.input-group.input-group-lg .form-control{ border:0; padding:14px 16px }
.input-group.input-group-lg .btn{ border-radius:0; }

/* Buttons in hero */
.btn-light{ background:#fff; color:#0b0b0b; border:0 }
.btn-outline-light{ color:#fff; border-color: rgba(255,255,255,0.18) }
.btn-outline-light:hover{ background: rgba(255,255,255,0.06) }

/* Section headings */
h2, h3{ color:var(--fg); font-weight:700 }
.section-sub{ color:var(--muted); margin-bottom:1.25rem }

/* Why Choose - MNC style (dark, animated, eye-catching) */
.why-choose{ margin-top: 60px;background: linear-gradient(80deg,#070707,#f2f2f2); color:#fff }
.why-choose h2{ color:#fff; position:relative; padding-bottom:0.6rem }
.why-choose h2:after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:60px; background:linear-gradient(90deg,#ff7a18,#af002d); border-radius:4px; box-shadow:0 6px 20px rgba(175,0,45,0.12) }
.why-choose p{ color:rgba(255,255,255,0.72) }

.why-choose .feature{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); border-radius:14px; padding:28px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
.why-choose .feature .icon{ width:72px; height:72px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; background:linear-gradient(180deg,#1a1a1a,#0f0f0f); color:#fff; box-shadow:0 12px 30px rgba(2,6,23,0.6); margin:0 auto 12px }
.why-choose .feature h5{ color:#fff }
.why-choose .feature p{ color:rgba(255,255,255,0.68) }

.why-choose .feature:hover{ transform:translateY(-10px); box-shadow:0 20px 45px rgba(2,6,23,0.6); border-color:rgba(255,255,255,0.08) }

/* Entrance animation */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.why-choose .feature{ opacity:0; transform:translateY(12px); animation:fadeUp .64s cubic-bezier(.2,.9,.3,1) both }
.why-choose .row > .col-md-4:nth-child(1) .feature{ animation-delay:0.04s }
.why-choose .row > .col-md-4:nth-child(2) .feature{ animation-delay:0.12s }
.why-choose .row > .col-md-4:nth-child(3) .feature{ animation-delay:0.2s }

/* Responsive tweaks */
@media (max-width: 767px){
  .why-choose .feature{ padding:20px }
  .why-choose .feature .icon{ width:60px; height:60px; font-size:22px }
}

/* How it works - polished MNC style */
.how-works{ background:linear-gradient(180deg,#ffffff,#fbfbfb); color:var(--fg) }
.how-works h3{ color:var(--fg); font-weight:800; margin-bottom:1rem }
.how-works p{ color:var(--muted) }

.how-works .row{ position:relative; align-items:stretch }
.how-works .row::before{ content:''; position:absolute; left:6%; right:6%; top:50%; height:2px; background:linear-gradient(90deg, rgba(11,11,11,0.04), rgba(11,11,11,0.08), rgba(11,11,11,0.04)); z-index:0 }

.how-works .step{ position:relative; z-index:1; background:var(--panel); border-radius:12px; padding:20px; transition:transform .28s ease, box-shadow .28s ease; box-shadow:0 10px 26px rgba(2,6,23,0.06); text-align:center }
.how-works .step-num{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:1.15rem; background:linear-gradient(180deg,#111,#2b2b2b); box-shadow:0 10px 24px rgba(2,6,23,0.35) }
.how-works .step h6{ margin-bottom:6px; font-weight:700 }
.how-works .step p{ color:var(--muted); margin-bottom:0 }

.how-works .step:hover{ transform:translateY(-8px); box-shadow:0 20px 45px rgba(2,6,23,0.12) }

/* entrance animation, staggered */
.how-works .step{ opacity:0; transform:translateY(12px); animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) both }
.how-works .row > .col-md-3:nth-child(1) .step{ animation-delay:0.06s }
.how-works .row > .col-md-3:nth-child(2) .step{ animation-delay:0.14s }
.how-works .row > .col-md-3:nth-child(3) .step{ animation-delay:0.22s }
.how-works .row > .col-md-3:nth-child(4) .step{ animation-delay:0.30s }

@media (max-width: 991px){
  .how-works .row::before{ display:none }
  .how-works .step{ text-align:left; padding:18px }
  .how-works .step-num{ margin-right:14px; width:52px; height:52px; display:inline-flex }
  .how-works .step .content{ display:inline-block; vertical-align:middle }
}

@media (max-width: 576px){
  .how-works .step{ padding:14px }
  .how-works .step-num{ width:48px; height:48px; font-size:1rem }
}

/* About Us card - subtle, professional MNC style */
.about-us .about-card{ background:var(--panel); border-radius:14px; padding:28px; display:flex; gap:28px; align-items:center; box-shadow:0 10px 30px rgba(2,6,23,0.06); border:1px solid rgba(0,0,0,0.04) }
.about-us .about-card .about-text h2{ margin-bottom:0.5rem; color:var(--fg) }
.about-us .about-card .about-text p{ color:var(--muted); max-width:640px }
.about-us .about-stats{ display:flex; gap:14px; align-items:center }
.about-us .about-stat{ background:#fff; border-radius:10px; padding:12px 16px; text-align:center; min-width:110px }
.about-us .about-stat .num{ font-weight:700; color:var(--fg); font-size:1.15rem }
.about-us .about-stat .label{ color:var(--muted); font-size:0.85rem }

/* About page: hero, values, illustration */
.about-hero{ padding-top:48px; padding-bottom:48px }
.about-hero .display-6{ font-size:1.75rem }
.about-hero .about-value{ background:linear-gradient(180deg, #fff, #fbfbfb); border:1px solid rgba(0,0,0,0.04); border-radius:12px }
.about-illustration img{ width:100%; height:100%; object-fit:cover; display:block }
.about-illustration{ background:linear-gradient(180deg, #fff, #fafafa); padding:12px }

.about-values .feature-box{ background:var(--panel); border-radius:12px; border:1px solid rgba(0,0,0,0.04); min-height:100px }

.about-stats{ display:flex; gap:12px; flex-wrap:wrap }
.about-stat{ background:#fff; border-radius:12px; padding:18px; min-width:120px; flex:1; box-shadow:0 12px 30px rgba(2,6,23,0.06); text-align:center }
.about-stat .num{ font-size:1.35rem }
.about-stat .label{ color:var(--muted) }

@media (max-width: 991px){
  .about-illustration{ display:none }
  .about-hero .display-6{ font-size:1.35rem }
}

/* Team cards */
.team-card{ background:var(--panel); border:1px solid rgba(0,0,0,0.04); transition:transform .22s ease, box-shadow .22s ease }
.team-card:hover{ transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,0.06) }
.team-avatar{ width:92px; height:92px; border-radius:50%; object-fit:cover; display:inline-block; border:2px solid rgba(0,0,0,0.04) }

/* Partners grid */
.partners-grid .partner-logo{ max-width:110px; opacity:0.92; filter:grayscale(20%); transition:transform .18s ease, filter .18s ease }
.partners-grid .partner-logo:hover{ transform:translateY(-6px); filter:grayscale(0) }

/* FAQ tweaks */
.accordion-button{ border-radius:10px }
.accordion .accordion-item + .accordion-item{ margin-top:8px }

/* Contact / subscribe */
.join-cta + section .form-control{ background:#fff }
.bg-white .form-control{ background:#fff }

@media (max-width: 576px){
  .team-avatar{ width:72px; height:72px }
  .partners-grid .partner-logo{ max-width:80px }
}

/* Contact page styles */
.contact-hero{ background:transparent }
.contact-form .form-control{ border-radius:8px; box-shadow:none }
.contact-details a{ color:var(--fg); text-decoration:none }
.contact-details a:hover{ text-decoration:underline }
.map-placeholder img{ width:100%; height:220px; object-fit:cover }

@media (max-width: 767px){
  .map-placeholder img{ height:180px }
}

@media (max-width: 991px){
  .about-us .about-card{ flex-direction:column; text-align:center }
  .about-us .about-stats{ flex-direction:row; justify-content:center }
}

@media (max-width: 576px){
  .about-us .about-card{ padding:18px }
  .about-us .about-stat{ min-width:88px; padding:10px }
}

/* Feature & service cards */
.card.shadow-sm{ border-radius:14px; background:var(--panel) }
.service-card img{ border-radius:10px; background:transparent }
.service-card .card-body{ padding:1rem }
.feature-box{ background:var(--panel);border-radius:12px;border:1px solid #eee;padding:26px }

/* Services grid - polished MNC style */
.services-grid .service-card{ border-radius:16px; padding:26px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(0,0,0,0.05); transition:transform .28s ease, box-shadow .28s ease; text-align:center }
.services-grid .service-card{ border-radius:16px; padding:26px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(0,0,0,0.05); transition:transform .28s ease, box-shadow .28s ease; text-align:center; min-height:300px; display:flex; flex-direction:column; justify-content:flex-start }
.services-grid .service-card .service-icon{ width:160px; aspect-ratio:1/1; margin:0 auto 18px; overflow:hidden; border-radius:14px; background:linear-gradient(180deg,#fff,#fafafa); box-shadow:0 16px 40px rgba(2,6,23,0.06); display:block }
.services-grid .service-card .service-icon img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .28s ease }
.services-grid .service-card h6{ margin-top:6px; margin-bottom:6px; font-weight:700 }
.services-grid .service-card p{ color:var(--muted); margin-bottom:0 }
.services-grid .service-card:hover{ transform:translateY(-10px); box-shadow:0 28px 80px rgba(2,6,23,0.12); border-color:rgba(0,0,0,0.06) }
.services-grid .service-card:hover .service-icon img{ transform:scale(1.04) }

/* subtle entrance animation for services */
.services-grid .service-card{ opacity:0; transform:translateY(12px); animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) both }
.services-grid .row > .col-md-3:nth-child(1) .service-card{ animation-delay:0.04s }
.services-grid .row > .col-md-3:nth-child(2) .service-card{ animation-delay:0.12s }
.services-grid .row > .col-md-3:nth-child(3) .service-card{ animation-delay:0.20s }
.services-grid .row > .col-md-3:nth-child(4) .service-card{ animation-delay:0.28s }

@media (max-width: 767px){
  .services-grid .service-card{ padding:18px }
  .services-grid .service-card .service-icon{ width:110px; aspect-ratio:1/1; margin-bottom:12px }
  .services-grid .service-card .service-icon img{ object-fit:cover }
}

/* Products */
.product-card img{ height:180px; object-fit:cover }

/* Testimonials */
.testimonial-card{ background:var(--panel);border-radius:12px;padding:22px;border:1px solid #eee }
.testimonial-card p{ font-size:0.98rem; color:var(--fg) }

/* Dark-themed testimonials */
.testimonials-dark{
  background: linear-gradient(180deg, rgba(14,14,14,1) 0%, rgba(28,28,28,1) 100%);
  color: #e9eef8;margin-bottom: 60px;
}
.testimonials-dark h3{ color:#fff }
.testimonials-dark .testimonial-card{
  background: linear-gradient(180deg, rgba(30,30,30,0.65), rgba(18,18,18,0.45));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  position:relative;
  overflow:visible;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
}
.testimonials-dark .testimonial-card p{ color:rgba(255,255,255,0.92); font-size:1rem; line-height:1.45 }
.testimonials-dark .testimonial-meta{ color:rgba(255,255,255,0.72); font-size:0.92rem }
.testimonials-dark .testimonial-avatar{ width:56px; height:56px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,0.04); box-shadow:0 6px 18px rgba(0,0,0,0.6) }
.testimonials-dark .testimonial-quote{ font-size:44px; line-height:0.6; color:#f2f2f2; position:relative; top:-4px; margin-bottom:-10px }

/* hover lift and subtle depth */
.testimonials-dark .testimonial-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(2,6,23,0.6) }

@media (max-width: 767.98px){
  .testimonials-dark .testimonial-quote{ font-size:34px }
  .testimonials-dark .testimonial-avatar{ width:48px; height:48px }
}

@media (max-width:767px){
  .testimonials-dark .testimonial-avatar{ width:48px; height:48px }
  .testimonials-dark .testimonial-quote{ font-size:22px; left:8px }
}

/* Join CTA */
.join-cta{ padding:48px 0 }
.join-cta .btn{ padding:12px 26px; font-weight:700 }

/* Container sizing and gutters */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1500px;
}
@media (min-width:1500px){ .container{ max-width:1500px } }

/* Banner: remove container padding inside hero/banner */
.bg-banner .container{ padding-top:0 !important; padding-bottom:0 !important }

/* Ensure other sections have comfortable vertical spacing */
section:not(.bg-banner){ padding:3%; }

/* Slightly larger input group for search */
.input-group-lg > .form-control{ padding:14px 16px }


/* Mobile adjustments */
@media (max-width: 576px){
  .display-5{font-size:1.6rem}
  .navbar-brand{font-size:1rem}
}

/* Header and footer polish for MNC-style look */
.topbar{font-size:0.85rem}
.site-header{background:var(--bg)}
.site-header .navbar-brand img{filter:none}
.brand-text{letter-spacing:0.6px}
.search-input{width:360px}

/* Header sizing: fixed height for MNC look */
.site-header{ height:auto; min-height:80px; }
.site-header .container{ height:auto; display:flex; align-items:center }
.site-header .navbar{ width:100%; align-items:center; padding:0 }

/* Logo and brand */
.site-header .navbar-brand img{ height:80px; width:80px; }
.site-header .navbar-brand{ padding-top:0; padding-bottom:0 }

/* Center nav links vertically without relying on line-height */
.site-header .navbar-nav .nav-link{ display:flex; align-items:center; height:auto; padding-top:0; padding-bottom:0 }

/* Small-screen adjustments: reduce header height and logo */
@media (max-width: 576px){
  .site-header{ height:auto; min-height:60px }
  .site-header .container{ height:auto }
  .site-header .navbar-brand img{ height:60px; width:60px }
  .site-header .navbar-nav .nav-link{ height:auto }
}

/* Responsive fallback: reduce hero horizontal inset on very small screens */
@media (max-width: 576px){
  section[aria-label="Hero banner"]{ padding-left:16px !important; padding-right:16px !important }
}

/* Avatar sizing inside header */
.site-header .avatar{ width:34px; height:34px; min-width:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:600 }

/* MNC-style polished header look */
.site-header{
  background: linear-gradient(180deg, rgba(18,18,18,0.96), rgba(11,11,11,0.96));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}

.site-header .navbar-brand{ display:flex; align-items:center }
.site-header .navbar-brand .brand-text{ color:#fff; margin-left:10px; font-weight:700; font-size:1.02rem }

/* Nav link polish */
.site-header .nav-link{ color: rgba(255,255,255,0.88); margin:0 .25rem; padding:.45rem .6rem; border-radius:8px; transition: all .16s ease }
.site-header .nav-link:hover{ color:#fff; background: rgba(255,255,255,0.04); transform:translateY(-2px) }
.site-header .nav-link:focus{ box-shadow: 0 6px 18px rgba(0,0,0,0.25) }

/* Accent CTA button */
.btn-accent{ background: linear-gradient(90deg,#ff7a18,#af002d); color:#fff; border:0; box-shadow:0 8px 28px rgba(175,0,45,0.12) }
.btn-accent:hover{ filter:brightness(0.98) }

/* Search input on dark header */
.site-header .search-input{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#fff; padding:6px 12px; border-radius:999px }
.site-header .search-input::placeholder{ color: rgba(255,255,255,0.65) }

/* Make sure desktop auth buttons contrast on dark header */
.site-header .btn-outline-dark{ color:#fff; border-color:rgba(255,255,255,0.12) }
.site-header .btn-outline-dark:hover{ background: rgba(255,255,255,0.03) }

@media (max-width: 991px){
  .site-header .search-input{ display:none }
}

@media (max-width: 991px){
  .search-input{display:none}
}

.avatar{font-weight:600}

.site-footer h6{color:var(--fg)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--fg)}

/* Make footer columns stack cleanly on small screens */
@media (max-width: 767px){
  .site-footer .col-md-2{flex:0 0 50%;max-width:50%}
}

.sticky-top.shadow-sm{box-shadow:0 1px 6px rgba(0,0,0,0.05)}


/* Horizontal padding for header: inset content by 10% on wide screens */
.site-header{
  padding-left:6%;
  padding-right:6%;
  box-sizing:border-box;
}

/* Slightly smaller inset on medium screens */
@media (max-width: 1200px){
  .site-header{ padding-left:3%; padding-right:3% }
}

/* Use comfortable fixed padding on small screens */
@media (max-width: 576px){
  .site-header{ padding-left:8px; padding-right:8px }
}
/* Polished touches */
.navbar .nav-link{color:var(--muted);padding:.5rem .75rem}
.navbar .nav-link:hover{color:var(--fg)}
.navbar-brand{font-size:1rem}
.brand-text{font-size:1.05rem}
.topbar a{opacity:.85}
.site-footer .fw-bold{font-size:.92rem}
.site-footer .text-muted{color:var(--muted)}
.modal-fullscreen-sm-down{max-width:100%}

/* focus states for accessibility */
.nav-link:focus, .btn:focus, .form-control:focus{outline:3px solid rgba(0,0,0,0.08);outline-offset:2px}

/* Footer gradient and polished links */
.bg-gradient{background:linear-gradient(180deg,var(--primary) 0%, var(--accent) 60%);} /* dark gradient */
.site-footer{color:#e6e6e6}
.site-footer .text-light{color:rgba(255,255,255,0.9)}
.footer-link{color:rgba(255,255,255,0.75);text-decoration:none}
.footer-link:hover{color:rgba(255,255,255,1);text-decoration:underline}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);text-decoration:none}
.social-btn:hover{background:rgba(255,255,255,0.12)}
.site-footer input.form-control{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);color:#fff}
.site-footer .btn-outline-light{color:#fff;border-color:rgba(255,255,255,0.12)}
.site-footer .btn-outline-light:hover{background:rgba(255,255,255,0.06)}

/* Footer specifics to match sample layout */
.dark-footer h6{color:#fff;margin-bottom:.6rem}
.dark-footer .text-muted{color:rgba(255,255,255,0.65)}
.dark-footer .small{color:rgba(255,255,255,0.78)}
.dark-footer .social-btn svg{opacity:0.95}
.footer-bottom{background:#070707;padding-top:.75rem;padding-bottom:.75rem}
.footer-bottom .text-muted{color:rgba(255,255,255,0.6)}
.footer-bottom .footer-link{color:rgba(255,255,255,0.7)}
.footer-bottom .footer-link:hover{color:#fff}

/* spacing adjustments for desktop */
@media (min-width: 768px){
  .dark-footer .col-md-2, .dark-footer .col-md-3{padding-left:2.5rem}
}

/* Card and image sizing */
.card-img-top{ height:180px; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px }
.service-card img{ height:120px; object-fit:cover; border-radius:10px }
.testimonial-card .rounded-circle{ width:48px; height:48px; object-fit:cover }

/* Products grid - polished MNC look */
.product-grid .product-card{ border-radius:14px; overflow:hidden; transition:transform .28s ease, box-shadow .28s ease; background:var(--panel); border:1px solid rgba(0,0,0,0.04) }
.product-grid .product-card:hover{ transform:translateY(-10px); box-shadow:0 30px 80px rgba(2,6,23,0.12) }
.product-grid .img-wrap{ position:relative; width:100%; background:#f3f3f3 }
.product-grid .img-wrap img{ width:100%; height:220px; object-fit:cover; display:block }
.product-grid .product-badge{ position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.7); color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem }
.product-grid .card-body{ padding:18px }
.product-grid .price{ font-weight:800; color:var(--fg); font-size:1.05rem }
.product-grid .meta{ color:var(--muted); font-size:0.92rem }

/* Action overlay visible on hover */
.product-grid .img-wrap .product-actions{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px; opacity:0; transform:translateY(8px); transition:all .24s ease }
.product-grid .product-card:hover .img-wrap .product-actions{ opacity:1; transform:none }
.product-grid .product-actions .btn{ padding:.35rem .7rem; font-size:0.85rem }

@media (max-width: 767px){
  .product-grid .img-wrap img{ height:160px }
  .product-grid .product-badge{ top:10px; right:10px; padding:5px 8px }
}



@media (max-width: 767px){
  .site-footer .col-md-2{flex:0 0 50%;max-width:50%}
  .site-footer .col-md-4{flex:0 0 100%;max-width:100%}
}