/* =====================================================================
   BHAGYALAXMI WATER PURIFIER & INVERTER BATTERY — style.css
   Blue theme, white base, solid colours (no gradients).
   Change the colours below to re-theme the whole site.
===================================================================== */

/* ---------- THEME VARIABLES (edit these to re-colour) ---------- */
:root {
   --blue: #1273c4;
   /* primary blue  */
   --blue-dark: #0b4c86;
   /* darker blue (hover/accent) */
   --navy: #0c2340;
   /* deep navy (dark sections, footer) */
   --blue-50: #eaf3fb;
   /* very light blue tint */
   --blue-100: #d7e8f7;
   /* light blue */
   --ink: #1a2630;
   /* main text */
   --muted: #5b6b7a;
   /* secondary text */
   --line: #e4ebf2;
   /* borders */
   --white: #ffffff;
   --black: #0a0f14;
   /* near-pure black for deep contrast */
   --wa: #25d366;
   /* whatsapp green (functional) */

   --radius: 14px;
   --radius-sm: 10px;
   --shadow: 0 14px 34px rgba(12, 35, 64, .10);
   --shadow-sm: 0 6px 18px rgba(12, 35, 64, .08);
   --ease: cubic-bezier(.22, .61, .36, 1);

   --ff-head: "Sora", system-ui, sans-serif;
   --ff-body: "Inter", system-ui, sans-serif;
}

/* ---------- BASE / RESET ---------- */
* {
   box-sizing: border-box;
}

html,
body {
   overflow-x: clip;
   /* kill horizontal scroll without clipping fixed children badly */
   scroll-behavior: smooth;
   /* smooth anchor scrolling */
}

body {
   margin: 0;
   font-family: var(--ff-body);
   color: var(--ink);
   background: var(--white);
   font-size: 16px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
   font-family: var(--ff-head);
   color: var(--ink);
   line-height: 1.2;
   margin: 0 0 .5rem;
}

p {
   margin: 0 0 1rem;
   color: var(--muted);
}

a {
   text-decoration: none;
   color: var(--blue);
   transition: color .25s var(--ease);
}

img {
   max-width: 100%;
   display: block;
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

/* ---------- SHARED SECTION BITS ---------- */
section[id] {
   scroll-margin-top: 84px;
}

/* offset for sticky header on anchor jump */
.section {
   padding: 84px 0;
   position: relative;
}

.section-head {
   max-width: 680px;
   margin: 0 auto 52px;
}

.section-kicker {
   display: inline-block;
   font-family: var(--ff-head);
   font-weight: 700;
   font-size: .82rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--blue);
   padding: 6px 14px;
   border-radius: 40px;
   background: var(--blue-50);
   margin-bottom: 14px;
}

.section-kicker.light {
   color: #bfe0ff;
   background: rgba(255, 255, 255, .12);
}

.section-title {
   font-size: clamp(1.65rem, 3.4vw, 2.5rem);
   font-weight: 800;
}

.section-title.text-white {
   color: var(--white);
}

.section-desc {
   color: var(--muted);
   font-size: 1.05rem;
   margin-bottom: 0;
}

.section-desc.light {
   color: #c7d7e6;
}

/* buttons */
.btn {
   font-family: var(--ff-head);
   font-weight: 600;
   border-radius: 40px;
   padding: .72rem 1.5rem;
   border: 0;
   transition: all .3s var(--ease);
}

.btn i {
   margin-right: .35rem;
}

.btn-primary-solid {
   background: var(--blue);
   color: #fff;
}

.btn-primary-solid:hover {
   background: var(--blue-dark);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 10px 22px rgba(18, 115, 196, .35);
}

.btn-ghost {
   background: transparent;
   color: #fff;
   border: 2px solid rgba(255, 255, 255, .75);
}

.btn-ghost:hover {
   background: #fff;
   color: var(--blue-dark);
   transform: translateY(-3px);
}

.btn-call {
   background: var(--blue);
   color: #fff;
   padding: .55rem 1.2rem;
}

.btn-call:hover {
   background: var(--navy);
   color: #fff;
}

.btn-call-sm {
   background: var(--navy);
   color: #fff;
   padding: .6rem 1.3rem;
   display: inline-flex;
   align-items: center;
}

.btn-call-sm:hover {
   background: var(--blue);
   color: #fff;
   letter-spacing: .3px;
}

.btn-wa-inline {
   background: var(--wa);
   color: #fff;
}

.btn-wa-inline:hover {
   background: #1da851;
   color: #fff;
   transform: translateY(-3px);
}

/* =====================================================================
   1. TOP BAR
===================================================================== */
.topbar {
   background: var(--navy);
   color: #cfe0f0;
   font-size: .86rem;
   padding: 8px 0;
}

.topbar-link {
   color: #cfe0f0;
   display: inline-flex;
   align-items: center;
   gap: .4rem;
}

.topbar-link:hover {
   color: #fff;
}

.topbar-note {
   color: #8fb3d6;
   font-size: .82rem;
}

.topbar-social {
   color: #cfe0f0;
   width: 28px;
   height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all .3s var(--ease);
}

.topbar-social:hover {
   background: var(--blue);
   color: #fff;
   transform: translateY(-2px);
}

/* =====================================================================
   2. STICKY HEADER
===================================================================== */
.site-header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: #fff;
   transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}

.site-header.scrolled {
   box-shadow: 0 6px 20px rgba(12, 35, 64, .10);
}

.navbar-brand {
   display: flex;
   align-items: center;
   gap: .65rem;
}

.brand-mark {
   width: 44px;
   height: 44px;
   background: var(--blue);
   color: #fff;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
}

.brand-text {
   font-family: var(--ff-head);
   font-weight: 800;
   font-size: 1.18rem;
   color: var(--navy);
   line-height: 1.05;
   display: flex;
   flex-direction: column;
}

.brand-text small {
   font-family: var(--ff-body);
   font-weight: 500;
   font-size: .62rem;
   letter-spacing: .04em;
   color: var(--muted);
   text-transform: uppercase;
}

.navbar-nav .nav-link {
   font-family: var(--ff-head);
   font-weight: 600;
   color: var(--ink);
   padding: .5rem .9rem;
   position: relative;
}

/* link hover = growing underline (unique vs other hovers) */
.navbar-nav .nav-link::after {
   content: "";
   position: absolute;
   left: .9rem;
   right: .9rem;
   bottom: .35rem;
   height: 2px;
   background: var(--blue);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s var(--ease);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
   transform: scaleX(1);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: var(--blue);
}

.navbar-toggler {
   border: 0;
   font-size: 1.6rem;
   color: var(--navy);
   box-shadow: none;
}

/* =====================================================================
   3. HERO
===================================================================== */
.hero {
   position: relative;
   min-height: 88vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--navy);
}

.hero-slides,
.hero-overlay {
   position: absolute;
   inset: 0;
}

.hero-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   background-color: #000000a8;
   opacity: 0;
   transform: scale(1.06);
   transition: opacity 1.1s var(--ease), transform 6s linear;
}

.hero-slide.is-active {
   opacity: 1;
   transform: scale(1);
}

.hero-overlay {
   background: rgba(0, 0, 0, 0.66);
}

/* solid tint, no gradient */

.hero-content {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: 60px 0;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   color: #cfe6ff;
   font-family: var(--ff-head);
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   font-size: .8rem;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   padding: 6px 14px;
   border-radius: 40px;
   margin-bottom: 18px;
}

.hero-title {
   color: #fff;
   font-size: clamp(2rem, 5vw, 3.6rem);
   font-weight: 800;
   max-width: 14ch;
   margin: 0 auto 18px;
}

.hero-title .hl {
   color: #7cc0ff;
}

/* single accent colour, not gradient */
.hero-sub {
   color: #d7e6f4;
   font-size: clamp(1rem, 1.6vw, 1.2rem);
   max-width: 60ch;
   margin: 0 auto 30px;
}

.hero-actions .btn {
   padding: .85rem 1.8rem;
   font-size: 1.02rem;
}

/* floating decorative icons */
.floaty {
   position: absolute;
   z-index: 2;
   color: rgba(255, 255, 255, .16);
   font-size: 3rem;
   animation: floaty 6s ease-in-out infinite;
}

.floaty-1 {
   top: 18%;
   left: 7%;
   font-size: 3.4rem;
   animation-delay: 0s;
}

.floaty-2 {
   bottom: 20%;
   right: 9%;
   font-size: 4rem;
   animation-delay: 1.2s;
}

.floaty-3 {
   top: 30%;
   right: 16%;
   font-size: 2.6rem;
   animation-delay: 2.1s;
}

@keyframes floaty {

   0%,
   100% {
      transform: translateY(0) rotate(0);
   }

   50% {
      transform: translateY(-22px) rotate(6deg);
   }
}

/* hero dots */
.hero-dots {
   position: absolute;
   bottom: 26px;
   left: 0;
   right: 0;
   z-index: 4;
   display: flex;
   gap: 10px;
   justify-content: center;
}

.hero-dots button {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 2px solid #fff;
   background: transparent;
   padding: 0;
   cursor: pointer;
   transition: all .3s var(--ease);
}

.hero-dots button.active {
   background: #fff;
   width: 30px;
   border-radius: 20px;
}

/* =====================================================================
   4. MARQUEE (JS rAF driven — track is translated in script.js)
===================================================================== */
.marquee {
   background: var(--blue);
   color: #fff;
   overflow: hidden;
   white-space: nowrap;
}

.marquee-track {
   display: inline-flex;
   align-items: center;
   will-change: transform;
}

.marquee-item {
   font-family: var(--ff-head);
   font-weight: 600;
   font-size: 1rem;
   padding: 16px 34px;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   position: relative;
}

.marquee-item::after {
   content: "\2022";
   position: absolute;
   right: -4px;
   color: rgba(255, 255, 255, .5);
}

.marquee-item i {
   font-size: 1.15rem;
   color: #bfe0ff;
}

/* =====================================================================
   5. ABOUT
===================================================================== */
.about {
   background: var(--white);
}

.about-media {
   position: relative;
}

.about-img {
   background-size: cover;
   background-position: center;
   border-radius: var(--radius);
   background-color: var(--blue-100);
}

.about-img-main {
   height: 400px;
   box-shadow: var(--shadow);
}

.about-img-sub {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 48%;
   height: 200px;
   border: 6px solid #fff;
   box-shadow: var(--shadow-sm);
}

.about-badge {
   position: absolute;
   top: 24px;
   right: -10px;
   background: var(--navy);
   color: #fff;
   border-radius: var(--radius);
   padding: 16px 20px;
   text-align: center;
   box-shadow: var(--shadow);
}

.about-badge-num {
   display: block;
   font-family: var(--ff-head);
   font-weight: 800;
   font-size: 2rem;
   color: #fff;
}

.about-badge-num span {
   color: #7cc0ff;
}

.about-badge-label {
   font-size: .72rem;
   color: #bcd4ea;
   max-width: 110px;
   display: inline-block;
   line-height: 1.3;
}

.lead-text {
   color: var(--ink);
   font-size: 1.08rem;
   font-weight: 500;
}

.stat {
   background: var(--blue-50);
   border-radius: var(--radius-sm);
   padding: 18px 10px;
   text-align: center;
   border: 1px solid var(--line);
   transition: transform .3s var(--ease), background .3s var(--ease);
}

.stat:hover {
   transform: translateY(-5px);
   background: #fff;
   box-shadow: var(--shadow-sm);
}

.stat-num {
   display: block;
   font-family: var(--ff-head);
   font-weight: 800;
   font-size: 1.7rem;
   color: var(--blue-dark);
}

.stat-label {
   font-size: .82rem;
   color: var(--muted);
   font-weight: 500;
}

/* =====================================================================
   6. SERVICES (zig-zag)
===================================================================== */
.services {
   background: var(--blue-50);
}

.service-row {
   margin-bottom: 56px;
}

.service-row:last-child {
   margin-bottom: 0;
}

.service-row-rev>div:first-child {
   order: 2;
}

/* flips image side on desktop */
@media (max-width:991.98px) {
   .service-row-rev>div:first-child {
      order: 0;
   }
}

.service-img {
   position: relative;
   height: 390px;
   border-radius: var(--radius);
   background-size: cover;
   background-position: center;
   background-color: var(--blue-100);
   box-shadow: var(--shadow);
   overflow: hidden;
}

.service-img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(12, 35, 64, 0);
   transition: background .35s var(--ease);
}

/* service image hover = zoom + darken overlay (unique effect) */
.service-row:hover .service-img::after {
   background: rgba(12, 35, 64, .14);
}

.service-tag {
   position: absolute;
   left: 18px;
   top: 18px;
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: #fff;
   color: var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   box-shadow: var(--shadow-sm);
   z-index: 2;
   transition: transform .35s var(--ease);
}

.service-row:hover .service-tag {
   transform: rotate(-8deg) scale(1.08);
}

.service-name {
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--navy);
}

.service-points {
   margin: .5rem 0 1.4rem;
}

.service-points li {
   display: flex;
   align-items: flex-start;
   gap: .55rem;
   color: var(--ink);
   margin-bottom: .5rem;
   font-weight: 500;
}

.service-points i {
   color: var(--blue);
   margin-top: .2rem;
}

/* =====================================================================
   7. WHY CHOOSE US (sequential colour-blink wave)
===================================================================== */
.why {
   background: var(--navy);
}

.why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
}

.why-item {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--radius);
   padding: 32px 24px;
   text-align: center;
   /* wave: each item highlights in turn via staggered delay */
   animation: whyWave 3.2s ease-in-out infinite;
   animation-delay: calc(var(--i) * .5s);
}

.why-ico {
   width: 68px;
   height: 68px;
   margin: 0 auto 18px;
   border-radius: 18px;
   background: rgba(124, 192, 255, .14);
   color: #7cc0ff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.9rem;
   transition: all .4s var(--ease);
}

.why-item h3 {
   color: #fff;
   font-size: 1.18rem;
   font-weight: 700;
}

.why-item p {
   color: #b9cde0;
   font-size: .94rem;
   margin: 0;
}

@keyframes whyWave {

   0%,
   100% {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .1);
      transform: translateY(0);
   }

   8% {
      background: var(--blue);
      border-color: var(--blue);
      transform: translateY(-8px);
      box-shadow: 0 16px 34px rgba(18, 115, 196, .4);
   }

   22% {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .1);
      transform: translateY(0);
   }
}

/* the icon flips to white when its card lights up */
.why-item {}

/* keep specificity simple */
@keyframes whyIco {

   0%,
   100% {
      background: rgba(124, 192, 255, .14);
      color: #7cc0ff;
   }

   8% {
      background: #fff;
      color: var(--blue);
   }

   22% {
      background: rgba(124, 192, 255, .14);
      color: #7cc0ff;
   }
}

.why-item .why-ico {
   animation: whyIco 3.2s ease-in-out infinite;
   animation-delay: calc(var(--i) * .5s);
}

/* =====================================================================
   8. HOW IT WORKS (timeline)
===================================================================== */
.how {
   background: var(--white);
}

.timeline {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   position: relative;
}

/* connecting line behind the steps (desktop) */
.timeline::before {
   content: "";
   position: absolute;
   top: 26px;
   left: 12%;
   right: 12%;
   height: 3px;
   background: var(--blue-100);
   z-index: 0;
}

.tl-step {
   position: relative;
   z-index: 1;
   text-align: center;
}

.tl-num {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-family: var(--ff-head);
   font-weight: 800;
   font-size: 1.3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   box-shadow: 0 0 0 6px #fff, var(--shadow-sm);
   transition: transform .35s var(--ease);
}

.tl-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 26px 20px;
   transition: all .35s var(--ease);
}

/* step hover = lift + blue border + number pop (unique effect) */
.tl-step:hover .tl-card {
   transform: translateY(-8px);
   border-color: var(--blue);
   box-shadow: var(--shadow);
}

.tl-step:hover .tl-num {
   transform: scale(1.12);
   background: var(--navy);
}

.tl-card i {
   font-size: 2rem;
   color: var(--blue);
   margin-bottom: 10px;
   display: block;
}

.tl-card h3 {
   font-size: 1.12rem;
   color: var(--navy);
}

.tl-card p {
   font-size: .92rem;
   margin: 0;
}

/* =====================================================================
   10. GALLERY (4 col desktop / 2 col mobile)
===================================================================== */
.gallery {
   background: var(--blue-50);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.gallery-item {
   position: relative;
   margin: 0;
   border-radius: var(--radius-sm);
   overflow: hidden;
   cursor: pointer;
   box-shadow: var(--shadow-sm);
}

.gallery-img {
   height: 220px;
   background-size: cover;
   background-position: center;
   background-color: var(--blue-100);
   transition: transform .5s var(--ease);
}

/* gallery hover = zoom image + reveal plus badge (unique effect) */
.gallery-item:hover .gallery-img {
   transform: scale(1.12);
}

.gallery-zoom {
   position: absolute;
   inset: 0;
   margin: auto;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(.6);
   transition: all .4s var(--ease);
}

.gallery-item::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(12, 35, 64, 0);
   transition: background .4s var(--ease);
   z-index: 1;
}

.gallery-item:hover::before {
   background: rgba(12, 35, 64, .35);
}

.gallery-item:hover .gallery-zoom {
   opacity: 1;
   transform: scale(1);
   z-index: 2;
}

/* =====================================================================
   11. VIDEO (4 in a row)
===================================================================== */
.video {
   background: var(--white);
}

.video-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.video-card {
   border-radius: var(--radius-sm);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   background: var(--navy);
   border: 1px solid var(--line);
}

.video-card video {
   width: 100%;
   height: 240px;
   object-fit: cover;
   display: block;
   background: #0a1a2c;
}

/* =====================================================================
   12. FAQ (accordion)
===================================================================== */
.faq {
   background: var(--blue-50);
}

.faq-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.faq-q {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   overflow: hidden;
   transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.faq-q.open {
   border-color: var(--blue);
   box-shadow: var(--shadow-sm);
}

.faq-btn {
   width: 100%;
   background: none;
   border: 0;
   text-align: left;
   font-family: var(--ff-head);
   font-weight: 600;
   color: var(--navy);
   font-size: 1.02rem;
   padding: 18px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
}

.faq-btn i {
   color: var(--blue);
   transition: transform .35s var(--ease);
   flex: 0 0 auto;
}

.faq-q.open .faq-btn i {
   transform: rotate(45deg);
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s var(--ease);
}

.faq-a p {
   padding: 0 20px 18px;
   margin: 0;
}

/* =====================================================================
   13. TESTIMONIALS (custom slider)
===================================================================== */
.testimonials {
   background: var(--white);
}

.tst-slider {
   max-width: 900px;
   margin: 0 auto;
}

.tst-viewport {
   overflow: hidden;
}

.tst-track {
   display: flex;
   transition: transform .55s var(--ease);
}

.tst-slide {
   flex: 0 0 100%;
   padding: 10px;
}

.tst-card {
   background: var(--blue-50);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 40px;
   position: relative;
}

.tst-quote {
   font-size: 3rem;
   color: var(--blue-100);
   position: absolute;
   top: 18px;
   right: 26px;
}

.tst-text {
   color: var(--ink);
   font-size: 1.12rem;
   font-weight: 500;
   line-height: 1.7;
   position: relative;
   z-index: 1;
}

.tst-person {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 18px;
}

.tst-avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-family: var(--ff-head);
   font-weight: 700;
   font-size: 1.3rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.tst-meta {
   display: flex;
   flex-direction: column;
}

.tst-meta strong {
   color: var(--navy);
   font-family: var(--ff-head);
}

.tst-meta small {
   color: var(--muted);
}

.tst-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-top: 26px;
}

.tst-arrow {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 2px solid var(--line);
   background: #fff;
   color: var(--navy);
   font-size: 1.1rem;
   cursor: pointer;
   transition: all .3s var(--ease);
}

.tst-arrow:hover {
   background: var(--blue);
   color: #fff;
   border-color: var(--blue);
   transform: scale(1.08);
}

.tst-dots {
   display: flex;
   gap: 8px;
}

.tst-dots button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: 0;
   background: var(--blue-100);
   padding: 0;
   cursor: pointer;
   transition: all .3s var(--ease);
}

.tst-dots button.active {
   background: var(--blue);
   width: 26px;
   border-radius: 20px;
}

/* =====================================================================
   14. CONTACT
===================================================================== */
.contact {
   background: var(--blue-50);
}

.contact-info {
   background: var(--navy);
   color: #fff;
   border-radius: var(--radius);
   padding: 38px 32px;
   height: 100%;
}

.contact-info h3 {
   color: #fff;
   font-size: 1.4rem;
   margin-bottom: 22px;
}

.contact-list li {
   display: flex;
   gap: 16px;
   margin-bottom: 22px;
}

.ci-ico {
   flex: 0 0 46px;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: rgba(124, 192, 255, .16);
   color: #7cc0ff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
}

.contact-list span strong {
   display: block;
   color: #fff;
   font-family: var(--ff-head);
   font-size: .95rem;
   margin-bottom: 2px;
}

.contact-list span {
   color: #c7d9ea;
   font-size: .95rem;
}

.contact-list a {
   color: #c7d9ea;
}

.contact-list a:hover {
   color: #fff;
}

.contact-cta {
   margin-top: 8px;
}

.contact-form {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 34px;
   box-shadow: var(--shadow-sm);
   height: 100%;
}

.form-label {
   font-family: var(--ff-head);
   font-weight: 600;
   color: var(--navy);
   font-size: .9rem;
   margin-bottom: 6px;
}

.form-control,
.form-select {
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   padding: .7rem .9rem;
   font-size: .96rem;
}

.form-control:focus,
.form-select:focus {
   border-color: var(--blue);
   box-shadow: 0 0 0 .2rem rgba(18, 115, 196, .15);
}

.form-note {
   margin: 14px 0 0;
   font-size: .92rem;
   font-weight: 600;
}

.form-note.ok {
   color: #157347;
}

.form-note.err {
   color: #b02a37;
}

/* =====================================================================
   15. FOOTER
===================================================================== */
.site-footer {
   background: var(--navy);
   color: #c7d9ea;
   padding: 64px 0 0;
}

.footer-brand {
   display: flex;
   align-items: center;
   gap: .65rem;
   margin-bottom: 16px;
}

.footer-brand .brand-text {
   color: #fff;
}

.footer-brand .brand-text small {
   color: #9ab8d6;
}

.footer-about {
   color: #9ab8d6;
   font-size: .94rem;
}

.footer-head {
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 18px;
}

.footer-links li,
.footer-contact li {
   margin-bottom: 10px;
}

.footer-links a {
   color: #9ab8d6;
   transition: all .25s var(--ease);
}

.footer-links a:hover {
   color: #fff;
   padding-left: 5px;
}

.footer-contact li {
   display: flex;
   gap: 10px;
   color: #9ab8d6;
   font-size: .92rem;
}

.footer-contact i {
   color: #7cc0ff;
   margin-top: 3px;
}

.footer-contact a {
   color: #9ab8d6;
}

.footer-contact a:hover {
   color: #fff;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 44px;
   padding: 20px 0;
   text-align: center;
}

.footer-bottom p {
   margin: 0;
   color: #8aa8c6;
   font-size: .88rem;
}

/* =====================================================================
   FLOATING BUTTONS + BACK TO TOP
===================================================================== */
.float-btn {
   position: fixed;
   bottom: 24px;
   z-index: 1050;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 1.5rem;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.float-wa {
   left: 24px;
   background: var(--wa);
   animation: pulseWa 2s infinite;
}

.float-call {
   right: 24px;
   background: var(--blue);
   animation: pulseCall 2s infinite;
}

.float-btn:hover {
   color: #fff;
   transform: scale(1.1);
}

@keyframes pulseWa {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
   }

   70% {
      box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
   }
}

@keyframes pulseCall {
   0% {
      box-shadow: 0 0 0 0 rgba(18, 115, 196, .5);
   }

   70% {
      box-shadow: 0 0 0 16px rgba(18, 115, 196, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(18, 115, 196, 0);
   }
}

.to-top {
   position: fixed;
   right: 24px;
   bottom: 90px;
   z-index: 1040;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 0;
   background: var(--navy);
   color: #fff;
   font-size: 1.1rem;
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: all .35s var(--ease);
}

.to-top.show {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

.to-top:hover {
   background: var(--blue);
}

/* =====================================================================
   SCROLL REVEAL (only hides when JS present -> no stuck-invisible bug)
===================================================================== */
.js .reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .reveal[data-reveal="left"] {
   transform: translateX(-50px);
}

.js .reveal[data-reveal="right"] {
   transform: translateX(50px);
}

.js .reveal.in {
   opacity: 1;
   transform: none;
}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width:1199.98px) {
   .hero-title {
      max-width: 18ch;
   }
}

@media (max-width:991.98px) {
   .section {
      padding: 64px 0;
   }

   .navbar-collapse {
      background: #fff;
      margin-top: 10px;
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      box-shadow: var(--shadow-sm);
   }

   .navbar-nav .nav-link::after {
      display: none;
   }

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

   .timeline {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
   }

   .timeline::before {
      display: none;
   }

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

   .video-card video {
      height: 200px;
   }

   .about-media {
      max-width: 520px;
      margin: 0 auto;
   }
}
.cu-lg-wdth{
	width:270px;
}
@media (max-width:767.98px) {
   .hero {
      min-height: 92vh;
   }

   .section-head {
      margin-bottom: 38px;
   }

   .service-img {
      height: 260px;
   }

   .gallery-img {
      height: 170px;
   }
}

@media (max-width:575.98px) {
   .section {
      padding: 52px 0;
   }

   .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   /* 2 per row mobile */
   .why-grid {
      grid-template-columns: 1fr;
   }

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

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

   .video-card video {
      height: 220px;
   }

   .tst-card {
      padding: 28px 22px;
   }

   .contact-form,
   .contact-info {
      padding: 26px 20px;
   }

   .about-img-main {
      height: 300px;
   }

   .floaty {
      display: none;
   }

   /* keep mobile clean */
   .float-btn {
      width: 50px;
      height: 50px;
      font-size: 1.3rem;
   }
}
@media(max-width:374px)
{
	.cu-lg-wdth{
	width:220px;
}
}