/* =====================================================================
   AB ROLING SHUTTER — style.css
   Industrial steel + spark-orange theme
   ---------------------------------------------------------------------
   >> CHANGE THE COLOUR THEME HERE (CSS variables in :root) <<
===================================================================== */
:root {
   /* ---- Brand colours (edit these to re-theme the whole site) ---- */
   --primary: #12324a;
   /* deep steel blue-charcoal */
   --primary-dark: #0c2537;
   /* darker shade for gradients */
   --accent: #ff6a00;
   /* spark orange */
   --accent-dark: #e85d00;
   --dark: #10151c;
   /* near-black text / dark sections */
   --steel: #5a6b7b;
   /* mid steel grey */
   --muted: #6b7684;
   /* body text muted */
   --light: #f4f6f9;
   /* soft off-white section bg */
   --light-2: #eef2f6;
   /* alt light bg */
   --white: #ffffff;
   --line: #e2e8ef;
   /* borders */

   /* ---- Typography ---- */
   --font-head: 'Oswald', sans-serif;
   --font-body: 'Inter', sans-serif;

   /* ---- Effects ---- */
   --shadow-sm: 0 4px 14px rgba(16, 21, 28, .06);
   --shadow-md: 0 12px 30px rgba(16, 21, 28, .10);
   --shadow-lg: 0 22px 55px rgba(16, 21, 28, .16);
   --radius: 14px;
   --radius-sm: 10px;
   --transition: .35s cubic-bezier(.25, .8, .25, 1);
}

/* =====================================================================
   BASE
===================================================================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px;
}

html,
body {
   overflow-x: clip;
}

body {
   font-family: var(--font-body);
   color: var(--dark);
   background: var(--white);
   line-height: 1.7;
   font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-head);
   font-weight: 600;
   line-height: 1.15;
   letter-spacing: .3px;
   color: var(--primary);
}

a {
   text-decoration: none;
   color: inherit;
   transition: color var(--transition);
}

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

p {
   color: var(--muted);
}

.text-accent {
   color: var(--accent) !important;
}

:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 2px;
}

/* ---- Section rhythm ---- */
.section {
   padding: 92px 0;
}

.section-title {
   font-size: clamp(1.7rem, 3.4vw, 2.6rem);
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 16px;
}

.section-lead {
   font-size: 1.06rem;
   color: var(--muted);
   max-width: 620px;
}

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

.section-head .section-lead {
   margin-top: 6px;
}

.eyebrow {
   display: inline-block;
   font-family: var(--font-head);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   font-size: .82rem;
   color: var(--accent);
   padding: 6px 14px;
   background: rgba(255, 106, 0, .10);
   border-radius: 40px;
   margin-bottom: 16px;
}

.eyebrow-light {
   color: #ffb27a;
   background: rgba(255, 178, 122, .14);
}

/* =====================================================================
   BUTTONS (varied styles)
===================================================================== */
.btn {
   font-family: var(--font-head);
   font-weight: 600;
   letter-spacing: .5px;
   border-radius: 8px;
   padding: 12px 26px;
   text-transform: uppercase;
   font-size: .92rem;
   border: 2px solid transparent;
   transition: all var(--transition);
}

.btn i {
   margin-right: 6px;
}

.btn-primary-solid {
   background: var(--accent);
   color: #fff;
   box-shadow: 0 8px 20px rgba(255, 106, 0, .28);
}

.btn-primary-solid:hover {
   background: var(--accent-dark);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 14px 28px rgba(255, 106, 0, .38);
}

.btn-ghost {
   background: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, .55);
}

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

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

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

.btn-quote {
   background: var(--accent);
   color: #fff;
   padding: 10px 22px;
}

.btn-quote:hover {
   background: var(--accent-dark);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 18px rgba(255, 106, 0, .35);
}

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

.topbar-link {
   color: #cdd6df;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.topbar-link i {
   color: var(--accent);
}

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

.topbar-hours {
   color: #9aa6b2;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.topbar-hours i {
   color: var(--accent);
}

.topbar-social a {
   width: 26px;
   height: 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   color: #cdd6df;
}

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

/* =====================================================================
   2. HEADER / NAVBAR
===================================================================== */
.site-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: #fff;
   box-shadow: var(--shadow-sm);
   transition: box-shadow var(--transition);
}

.site-header.scrolled {
   box-shadow: var(--shadow-md);
}

.navbar-brand {
   display: flex;
   align-items: center;
   gap: 10px;
}

.brand-mark {
   width: 42px;
   height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--accent), var(--accent-dark));
   color: #fff;
   border-radius: 10px;
   font-size: 1.2rem;
   box-shadow: 0 6px 14px rgba(255, 106, 0, .3);
}

.brand-text {
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 1.35rem;
   color: var(--primary);
   letter-spacing: .5px;
}

.brand-text strong {
   font-weight: 700;
}

.navbar-nav .nav-link {
   font-family: var(--font-head);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .6px;
   font-size: .92rem;
   color: var(--primary);
   padding: 8px 14px;
   position: relative;
}

.navbar-nav .nav-link::after {
   content: "";
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 2px;
   height: 2px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--transition);
}

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

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

/* Custom hamburger */
.navbar-toggler {
   border: none;
   padding: 6px;
}

.navbar-toggler:focus {
   box-shadow: none;
}

.toggler-bar {
   display: block;
   width: 26px;
   height: 3px;
   background: var(--primary);
   border-radius: 3px;
   margin: 5px 0;
   transition: var(--transition);
}

/* =====================================================================
   3. HERO
===================================================================== */
.hero {
   position: relative;
}

.hero-slide {
   position: relative;
   min-height: 88vh;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(0, 0, 0, 0.952) 0%, rgba(0, 0, 0, 0.801) 42%, rgba(0, 0, 0, 0) 100%);
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 620px;
   padding: 40px 0;
}

.hero-eyebrow {
   display: inline-block;
   font-family: var(--font-head);
   text-transform: uppercase;
   letter-spacing: 2.5px;
   font-size: .82rem;
   color: #fff;
   background: var(--accent);
   padding: 7px 16px;
   border-radius: 40px;
   margin-bottom: 22px;
}

.hero-title {
   color: #fff;
   font-size: clamp(2.2rem, 5.2vw, 4.1rem);
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1.05;
   margin-bottom: 20px;
}

.hero-text {
   color: #dbe3ea;
   font-size: 1.12rem;
   max-width: 520px;
   margin-bottom: 30px;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

/* Slide entrance animation */
.carousel-item.active .hero-eyebrow {
   animation: heroUp .6s .1s both;
}

.carousel-item.active .hero-title {
   animation: heroUp .6s .25s both;
}

.carousel-item.active .hero-text {
   animation: heroUp .6s .4s both;
}

.carousel-item.active .hero-actions {
   animation: heroUp .6s .55s both;
}

@keyframes heroUp {
   from {
      opacity: 0;
      transform: translateY(26px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

/* Controls + indicators */
.carousel-control-prev,
.carousel-control-next {
   width: auto;
   opacity: 1;
   z-index: 3;
}

.carousel-control-prev {
   left: 20px;
}

.carousel-control-next {
   right: 20px;
}

.hero-arrow {
   width: 50px;
   height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   color: #fff;
   font-size: 1.3rem;
   border: 2px solid rgba(255, 255, 255, .4);
   transition: all var(--transition);
}

.hero-arrow:hover {
   background: var(--accent);
   border-color: var(--accent);
}

.hero-indicators {
   bottom: 26px;
}

.hero-indicators [data-bs-target] {
   width: 34px;
   height: 5px;
   border-radius: 5px;
   background: rgba(255, 255, 255, .45);
   border: none;
   transition: all var(--transition);
}

.hero-indicators .active {
   background: var(--accent);
   width: 48px;
}

/* =====================================================================
   4. MARQUEE (rAF driven)
===================================================================== */
.marquee {
   background: var(--accent);
   color: #fff;
   overflow: hidden;
   white-space: nowrap;
   padding: 16px 0;
}

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

.marquee-item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-head);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 1rem;
   padding: 0 34px;
   border-right: 1px solid rgba(255, 255, 255, .3);
}

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

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

.about-media {
   position: relative;
   padding-bottom: 30px;
   padding-right: 30px;
}

.about-img-main {
   width: 100%;
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
}

.about-img-small {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 46%;
   border: 6px solid #fff;
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
}

.about-badge {
   position: absolute;
   top: 22px;
   left: -14px;
   background: var(--accent);
   color: #fff;
   border-radius: var(--radius-sm);
   padding: 16px 20px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 12px 26px rgba(255, 106, 0, .35);
}

.about-badge-num {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 2.1rem;
   line-height: 1;
}

.about-badge-num span {
   font-size: 1.3rem;
}

.about-badge-label {
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .5px;
   margin-top: 4px;
   line-height: 1.3;
}

.about-points {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin: 28px 0;
}

.about-point {
   display: flex;
   gap: 12px;
}

.ap-icon {
   color: var(--accent);
   font-size: 1.35rem;
   flex-shrink: 0;
   margin-top: 2px;
}

.about-point h4 {
   font-size: 1.05rem;
   margin-bottom: 2px;
}

.about-point p {
   font-size: .9rem;
   margin: 0;
}

/* Floating decorative icons */
.float-icon {
   position: absolute;
   width: 54px;
   height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   background: #fff;
   color: var(--accent);
   font-size: 1.4rem;
   box-shadow: var(--shadow-md);
   z-index: 3;
   animation: floaty 4s ease-in-out infinite;
}

.float-icon-1 {
   top: 40%;
   right: -18px;
}

.float-icon-2 {
   bottom: 40px;
   left: -20px;
   animation-delay: 1.2s;
}

.float-icon-3 {
   top: -20px;
   left: 30px;
   animation-delay: .6s;
}

.float-icon-4 {
   bottom: 10px;
   right: 10px;
   font-size: 1.6rem;
}

@keyframes floaty {

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

   50% {
      transform: translateY(-12px);
   }
}

/* =====================================================================
   STATS STRIP
===================================================================== */
.stats-strip {
   background: linear-gradient(120deg, var(--primary), var(--primary-dark));
   padding: 54px 0;
   position: relative;
}

.stats-strip::before {
   content: "";
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 60px);
}

.stat {
   position: relative;
}

.stat-num,
.stat-plus {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(2.2rem, 4vw, 3rem);
   color: #fff;
}

.stat-plus {
   color: var(--accent);
}

.stat p {
   color: #b9c4cf;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: .85rem;
   margin: 6px 0 0;
   font-family: var(--font-head);
}

/* =====================================================================
   6. SERVICES
===================================================================== */
.services-section {
   background: var(--light);
}

/* Service cards — 4 per row (image → name → content → Call Now) */
.svc-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: transform var(--transition), box-shadow var(--transition);
}

.svc-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.svc-media {
   height: 220px;
   overflow: hidden;
}

.svc-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.svc-card:hover .svc-media img {
   transform: scale(1.08);
}

.svc-body {
   padding: 18px 18px 20px;
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
}

.svc-body h3 {
   font-size: 1.05rem;
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 8px;
}

.svc-body p {
   font-size: .88rem;
   margin-bottom: 16px;
   flex: 1 1 auto;
}

.svc-call {
   align-self: flex-start;
   margin-top: auto;
   font-family: var(--font-head);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   font-size: .82rem;
   color: #fff;
   background: var(--primary);
   padding: 9px 18px;
   border-radius: 10px;
   transition: background var(--transition), transform var(--transition);
}

.svc-call i {
   margin-right: 6px;
}

.svc-call:hover {
   background: var(--accent);
   color: #fff;
   transform: translateY(-2px);
}

/* Other services */
.other-services {
   margin-top: 44px;
   background: #fff;
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
   padding: 30px 28px;
}

.other-title {
   font-size: 1.25rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   margin-bottom: 22px;
}

.other-title i {
   color: var(--accent);
   margin-right: 8px;
}

.other-list {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px 26px;
}

.other-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
   color: var(--dark);
   padding: 12px 16px;
   background: var(--light);
   border-radius: 10px;
   border-left: 3px solid transparent;
   transition: all var(--transition);
}

.other-list li i {
   color: var(--accent);
   font-size: 1.1rem;
}

.other-list li:hover {
   background: var(--light);
   border-left-color: var(--accent);
   box-shadow: var(--shadow-sm);
   transform: translateX(5px);
}

/* =====================================================================
   CTA BAND
===================================================================== */
.cta-band {
   background: linear-gradient(115deg, var(--dark), var(--primary));
   position: relative;
   overflow: hidden;
}

.cta-band::after {
   content: "";
   position: absolute;
   right: -60px;
   top: -60px;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: rgba(255, 106, 0, .14);
}

.cta-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 22px;
   padding: 46px 0;
   position: relative;
   z-index: 2;
}

.cta-text h2 {
   color: #fff;
   text-transform: uppercase;
   font-size: clamp(1.5rem, 3vw, 2.2rem);
   margin-bottom: 8px;
}

.cta-text p {
   color: #c8d2db;
   margin: 0;
}

/* =====================================================================
   7. WHY CHOOSE US
===================================================================== */
.why-section {
   background: var(--white);
}

.why-list {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-top: 26px;
}

.why-item {
   display: flex;
   gap: 16px;
   background: var(--light);
   padding: 18px 20px;
   border-radius: var(--radius-sm);
   transition: all var(--transition);
}

.why-item:hover {
   background: #fff;
   box-shadow: var(--shadow-md);
   transform: translateX(6px);
}

.why-icon {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: rgba(255, 106, 0, .12);
   color: var(--accent);
   font-size: 1.5rem;
   transition: all var(--transition);
}

.why-item:hover .why-icon {
   background: var(--accent);
   color: #fff;
}

.why-item h4 {
   font-size: 1.1rem;
   margin-bottom: 3px;
}

.why-item p {
   font-size: .92rem;
   margin: 0;
}

.why-media {
   position: relative;
}

.why-media img {
   width: 100%;
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
}

.why-overlay-card {
   position: absolute;
   bottom: 26px;
   left: -16px;
   background: #fff;
   border-radius: var(--radius-sm);
   padding: 18px 22px;
   display: flex;
   align-items: center;
   gap: 14px;
   box-shadow: var(--shadow-lg);
}

.why-overlay-card>i {
   font-size: 2rem;
   color: var(--accent);
}

.why-overlay-num {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 1.9rem;
   color: var(--primary);
}

.why-overlay-card p {
   font-size: .82rem;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: .5px;
}

/* =====================================================================
   8. HOW IT WORKS (timeline)
===================================================================== */
.how-section {
   background: var(--light-2);
   position: relative;
}

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

.steps::before {
   content: "";
   position: absolute;
   top: 46px;
   left: 12%;
   right: 12%;
   height: 2px;
   background: repeating-linear-gradient(90deg, var(--steel) 0 8px, transparent 8px 16px);
   z-index: 0;
}

.step {
   background: #fff;
   border-radius: var(--radius);
   padding: 40px 24px 28px;
   text-align: center;
   position: relative;
   z-index: 1;
   box-shadow: var(--shadow-sm);
   transition: all var(--transition);
}

.step:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.step-num {
   position: absolute;
   top: -18px;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 1rem;
   background: var(--accent);
   color: #fff;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 14px rgba(255, 106, 0, .35);
}

.step-icon {
   width: 66px;
   height: 66px;
   margin: 8px auto 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--light);
   color: var(--primary);
   font-size: 1.7rem;
   transition: all var(--transition);
}

.step:hover .step-icon {
   background: var(--primary);
   color: #fff;
}

.step h4 {
   font-size: 1.12rem;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.step p {
   font-size: .9rem;
   margin: 0;
}

/* =====================================================================
   10. GALLERY
===================================================================== */
.gallery-section {
   background: var(--white);
}

.gallery-filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-bottom: 34px;
}

.filter-btn {
   font-family: var(--font-head);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .5px;
   font-size: .88rem;
   padding: 9px 22px;
   border-radius: 40px;
   border: 2px solid var(--line);
   background: #fff;
   color: var(--primary);
   transition: all var(--transition);
}

.filter-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.filter-btn.active {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
}

.gallery-col {
   transition: opacity .4s ease, transform .4s ease;
}

.gallery-col.hide {
   display: none;
}

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

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.gallery-item:hover img {
   transform: scale(1.12);
}

.gallery-item::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(12, 37, 55, .65), transparent 60%);
   opacity: 0;
   transition: opacity var(--transition);
}

.gallery-item:hover::after {
   opacity: 1;
}

.gallery-zoom {
   position: absolute;
   inset: 0;
   margin: auto;
   width: 50px;
   height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   font-size: 1.2rem;
   opacity: 0;
   transform: scale(.5);
   transition: all var(--transition);
   z-index: 2;
}

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

/* Lightbox */
.lightbox {
   position: fixed;
   inset: 0;
   background: rgba(10, 15, 22, .92);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
   opacity: 0;
   visibility: hidden;
   transition: all var(--transition);
   padding: 20px;
}

.lightbox.open {
   opacity: 1;
   visibility: visible;
}

.lightbox img {
   max-width: 90%;
   max-height: 86vh;
   border-radius: 8px;
   box-shadow: var(--shadow-lg);
}

.lightbox-close {
   position: absolute;
   top: 24px;
   right: 28px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .14);
   color: #fff;
   font-size: 1.3rem;
   transition: all var(--transition);
}

.lightbox-close:hover {
   background: var(--accent);
   transform: rotate(90deg);
}

/* =====================================================================
   11. FAQs
===================================================================== */
.faq-section {
   background: var(--light);
   position: relative;
}

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

.faq-item {
   background: #fff;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   border-left: 4px solid transparent;
   transition: border-color var(--transition);
}

.faq-item.open {
   border-left-color: var(--accent);
}

.faq-q {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   padding: 20px 22px;
   font-family: var(--font-head);
   font-weight: 500;
   font-size: 1.06rem;
   color: var(--primary);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   cursor: pointer;
}

.faq-q i {
   flex-shrink: 0;
   color: var(--accent);
   transition: transform var(--transition);
}

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

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

.faq-a p {
   padding: 0 22px 20px;
   margin: 0;
   font-size: .96rem;
}

/* =====================================================================
   12. TESTIMONIALS
===================================================================== */
.testimonial-section {
   background: linear-gradient(125deg, var(--primary-dark), var(--primary));
   position: relative;
   overflow: hidden;
}

.testimonial-section::before {
   content: "\201C";
   position: absolute;
   top: -30px;
   left: 20px;
   font-family: var(--font-head);
   font-size: 16rem;
   color: rgba(255, 255, 255, .05);
   line-height: 1;
}

.testimonial-carousel {
   max-width: 800px;
   margin: 0 auto;
}

.testi-card {
   background: #fff;
   border-radius: var(--radius);
   padding: 44px 40px 36px;
   text-align: center;
   box-shadow: var(--shadow-lg);
   position: relative;
   margin-bottom: 20px;
}

.testi-quote {
   font-size: 2.4rem;
   color: var(--accent);
}

.testi-text {
   font-size: 1.14rem;
   color: var(--dark);
   font-style: italic;
   margin: 14px 0 18px;
   line-height: 1.7;
}

.testi-stars {
   color: #ffb400;
   font-size: 1.05rem;
   margin-bottom: 20px;
}

.testi-person {
   display: inline-flex;
   align-items: center;
   gap: 14px;
}

.testi-avatar {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: var(--light-2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   color: var(--steel);
}

.testi-person h5 {
   margin: 0;
   font-size: 1.05rem;
   color: var(--primary);
}

.testi-person span {
   font-size: .85rem;
   color: var(--muted);
}

.testi-indicators {
   position: static;
   margin-top: 6px;
}

.testi-indicators [data-bs-target] {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .4);
   border: none;
}

.testi-indicators .active {
   background: var(--accent);
}

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

.contact-info {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   border-radius: var(--radius);
   padding: 38px 32px;
   height: 100%;
}

.ci-item {
   display: flex;
   gap: 16px;
   margin-bottom: 26px;
}

.ci-icon {
   width: 50px;
   height: 50px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: rgba(255, 106, 0, .18);
   color: var(--accent);
   font-size: 1.35rem;
}

.ci-item h4 {
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 4px;
   text-transform: uppercase;
}

.ci-item p,
.ci-item a {
   color: #c5cfd8;
   font-size: .95rem;
   margin: 0;
   word-break: break-word;
}

.ci-item a:hover {
   color: var(--accent);
}

.ci-social {
   display: flex;
   gap: 12px;
   margin-top: 6px;
}

.ci-social a {
   width: 42px;
   height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   font-size: 1.1rem;
   transition: all var(--transition);
}

.ci-social a:hover {
   background: var(--accent);
   transform: translateY(-3px);
}

.contact-form {
   background: var(--light);
   border-radius: var(--radius);
   padding: 34px 30px;
   box-shadow: var(--shadow-sm);
}

.form-label {
   font-family: var(--font-head);
   font-weight: 500;
   font-size: .9rem;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--primary);
   margin-bottom: 6px;
}

.optional {
   color: var(--muted);
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
}

.form-control,
.form-select {
   border: 1.5px solid var(--line);
   border-radius: 8px;
   padding: 12px 14px;
   font-size: .96rem;
   background: #fff;
   transition: all var(--transition);
}

.form-control:focus,
.form-select:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(255, 106, 0, .15);
}

.form-note {
   margin: 12px 0 0;
   font-size: .92rem;
   font-weight: 600;
   color: var(--accent);
}

/* =====================================================================
   15. FOOTER
===================================================================== */
.site-footer {
   background: var(--dark);
   color: #b6c0ca;
   padding-top: 66px;
}

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

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

.footer-about {
   font-size: .94rem;
   color: #93a0ac;
   max-width: 320px;
}

.footer-social {
   display: flex;
   gap: 10px;
   margin-top: 16px;
}

.footer-social a {
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: rgba(255, 255, 255, .07);
   color: #fff;
   transition: all var(--transition);
}

.footer-social a:hover {
   background: var(--accent);
   transform: translateY(-3px);
}

.footer-title {
   color: #fff;
   font-size: 1.1rem;
   text-transform: uppercase;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 10px;
}

.footer-title::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 34px;
   height: 3px;
   background: var(--accent);
}

.footer-links,
.footer-contact {
   list-style: none;
}

.footer-links li {
   margin-bottom: 11px;
}

.footer-links a {
   color: #93a0ac;
   font-size: .94rem;
}

.footer-links a:hover {
   color: var(--accent);
   padding-left: 6px;
}

.footer-contact li {
   display: flex;
   gap: 10px;
   margin-bottom: 14px;
   font-size: .92rem;
   color: #93a0ac;
}

.footer-contact i {
   color: var(--accent);
   flex-shrink: 0;
   margin-top: 3px;
}

.footer-contact a {
   color: #93a0ac;
}

.footer-contact a:hover {
   color: var(--accent);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   margin-top: 46px;
   padding: 20px 0;
   font-size: .88rem;
   color: #7d8b98;
}

.footer-bottom p {
   color: #7d8b98;
}

/* =====================================================================
   13. FLOATING BUTTONS + BACK TO TOP
===================================================================== */
.float-btn {
   position: fixed;
   bottom: 26px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 1.55rem;
   z-index: 1500;
   box-shadow: var(--shadow-md);
   transition: transform var(--transition);
}

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

.float-whatsapp {
   left: 26px;
   background: #25d366;
}

.float-call {
   right: 26px;
   background: var(--accent);
}

.float-whatsapp::before,
.float-call::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   z-index: -1;
   animation: pulse 2s infinite;
}

.float-whatsapp::before {
   background: #25d366;
}

.float-call::before {
   background: var(--accent);
}

@keyframes pulse {
   0% {
      transform: scale(1);
      opacity: .6;
   }

   70% {
      transform: scale(1.5);
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}

.back-top {
   position: fixed;
   bottom: 26px;
   right: 26px;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   border: none;
   background: var(--primary);
   color: #fff;
   font-size: 1.1rem;
   opacity: 0;
   visibility: hidden;
   transform: translateY(14px);
   transition: all var(--transition);
   z-index: 1400;
}

.back-top.show {
   opacity: 1;
   visibility: visible;
   transform: none;
}

.back-top:hover {
   background: var(--accent);
}

/* keep back-top clear of the floating call button */
.back-top.show {
   bottom: 92px;
}

/* =====================================================================
   SCROLL REVEAL
===================================================================== */
.reveal {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity .7s ease, transform .7s ease;
}

.reveal.in-view {
   opacity: 1;
   transform: none;
}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 991.98px) {
   .navbar-collapse {
      background: #fff;
      margin-top: 12px;
      border-radius: var(--radius-sm);
      padding: 12px;
      box-shadow: var(--shadow-md);
   }

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

   .btn-quote {
      display: inline-block;
      margin-top: 8px;
   }

   .hero-overlay {
      background: linear-gradient(100deg, rgba(12, 37, 55, .94) 0%, rgba(12, 37, 55, .78) 100%);
   }

   .hero-slide {
      min-height: 78vh;
   }

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

   .steps::before {
      display: none;
   }

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

   .about-badge {
      left: 0;
   }

   .why-overlay-card {
      left: 0;
   }
}

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

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

   .about-points {
      grid-template-columns: 1fr;
   }

   .other-list {
      grid-template-columns: 1fr;
   }

   .cta-inner {
      flex-direction: column;
      text-align: center;
      align-items: center;
   }

   .float-icon {
      display: none;
   }

   .about-img-small {
      width: 50%;
   }

   .testi-card {
      padding: 34px 24px 30px;
   }
}

@media (max-width: 575.98px) {
   .steps {
      grid-template-columns: 1fr;
   }

   .hero-title {
      font-size: 2.1rem;
   }

   .float-btn {
      width: 50px;
      height: 50px;
      font-size: 1.35rem;
      bottom: 20px;
   }

   .float-whatsapp {
      left: 16px;
   }

   .float-call {
      right: 16px;
   }

   .back-top {
      right: 16px;
   }
}

/* =====================================================================
   REDUCED MOTION (respect user preference for non-essential motion)
   NOTE: the marquee is JS/rAF driven and keeps running by design.
===================================================================== */
@media (prefers-reduced-motion: reduce) {

   .float-icon,
   .float-whatsapp::before,
   .float-call::before {
      animation: none;
   }

   .reveal {
      transition: opacity .3s ease;
      transform: none;
   }
}