/* ============================================================
   SHREE RAM FURNISHING — style.css
   Change the colour theme from the variables below.
============================================================ */

/* ---------- 1. THEME VARIABLES (edit these later) ---------- */
:root {
   /* Brand colours */
   --navy: #111111;
   /* near-black (dark role: big section bg + heading text) */
   --blue: #FD6A05;
   /* bhagwa saffron (primary) */
   --blue-soft: #FFEEDC;
   /* light saffron tint */
   --accent: #FD6A05;
   /* bright saffron accent */

   /* Neutrals */
   --white: #ffffff;
   --ink: #10233f;
   /* main text */
   --muted: #5b6b82;
   /* secondary text */
   --line: #e4e9f2;
   /* borders */
   --bg-tint: #f5f8fd;
   /* very light section background */

   /* Type */
   --font-head: 'Sora', sans-serif;
   --font-body: 'Inter', sans-serif;

   /* Effects */
   --radius: 16px;
   --radius-sm: 10px;
   --shadow: 0 18px 45px rgba(0, 0, 0, .10);
   --shadow-sm: 0 8px 22px rgba(0, 0, 0, .08);
   --shadow-lg: 0 30px 70px rgba(0, 0, 0, .18);
   --transition: .35s cubic-bezier(.2, .7, .2, 1);
   --gradient: var(--blue);  /* SOLID bhagwa saffron — no gradient */
}

/* ---------- 2. BASE ---------- */
* {
   box-sizing: border-box;
}

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

body {
   font-family: var(--font-body);
   color: var(--ink);
   background: var(--white);
   line-height: 1.7;
   overflow-x: hidden;
   /* no horizontal scroll */
   margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-head);
   font-weight: 700;
   line-height: 1.2;
   color: var(--navy);
}

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

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

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

/* ---------- 3. REUSABLE PIECES ---------- */
.section {
   padding: 92px 0;
   position: relative;
}

.section-head {
   max-width: 720px;
   margin: 0 auto 54px;
}

.eyebrow {
   display: inline-block;
   font-family: var(--font-head);
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--accent);
   padding: 6px 16px;
   border: 1px solid rgba(253, 106, 5, .35);
   border-radius: 30px;
   margin-bottom: 18px;
}

.eyebrow-dark {
   color: var(--blue);
   border-color: rgba(253, 106, 5, .25);
   background: var(--blue-soft);
}

.section-title {
   font-size: clamp(1.7rem, 3.4vw, 2.7rem);
   margin-bottom: 16px;
}

.section-title strong {
   color: inherit;
}

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

.section-title.text-white strong {
   color: #fff;
}

.section-subtitle {
   font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.section-text {
   color: var(--muted);
   font-size: 1.02rem;
   max-width: 640px;
}

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

.text-link {
   color: var(--blue);
   font-weight: 600;
}

.text-link:hover {
   color: var(--navy);
}

/* Buttons */
.btn {
   font-family: var(--font-head);
   font-weight: 600;
   border-radius: 40px;
   padding: 12px 26px;
   transition: var(--transition);
   border: 2px solid transparent;
}

.btn-brand {
   background: var(--gradient);
   color: var(--white);
   box-shadow: 0 10px 24px rgba(253, 106, 5, .32);
}

.btn-brand:hover {
   color: var(--white);
   transform: translateY(-3px);
   box-shadow: 0 16px 34px rgba(253, 106, 5, .42);
   filter: brightness(1.05);
}

.btn-ghost {
   background: rgba(255, 255, 255, .12);
   color: var(--white);
   border-color: rgba(255, 255, 255, .55);
   backdrop-filter: blur(4px);
}

.btn-ghost:hover {
   background: var(--white);
   color: var(--navy);
   transform: translateY(-3px);
}

/* Arrow link hover */
.link-arrow {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: .92rem;
   color: var(--blue);
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.link-arrow i {
   transition: transform var(--transition);
}

.link-arrow:hover {
   color: var(--navy);
}

.link-arrow:hover i {
   transform: translateX(6px);
}

/* ---------- 4. SCROLL REVEAL ---------- */
.reveal {
   opacity: 0;
   transform: translateY(38px);
   transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
   opacity: 1;
   transform: none;
}

/* ---------- 5. FLOATING IMAGE ANIMATIONS ---------- */
@keyframes floatY {

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

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

.float-anim {
   animation: floatY 5s ease-in-out infinite;
}

.float-anim-slow {
   animation: floatY 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

   .float-anim,
   .float-anim-slow {
      animation: none;
   }

   .reveal {
      transition: none;
      opacity: 1;
      transform: none;
   }
}

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

.topbar-link {
   color: rgba(255, 255, 255, .85);
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

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

.topbar-note {
   color: rgba(255, 255, 255, .55);
   font-size: .82rem;
}

.social-dot {
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   transition: var(--transition);
}

.social-dot:hover {
   background: var(--accent);
   color: var(--navy);
   transform: translateY(-3px) rotate(8deg);
}

/* ============================================================
   2. STICKY HEADER
============================================================ */
.site-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--line);
   transition: box-shadow var(--transition), padding var(--transition);
}

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

/* Brand */
.navbar-brand {
   display: flex;
   align-items: center;
   gap: 12px;
}

.brand-mark {
   display: inline-flex;
   flex-direction: column;
   gap: 3px;
   width: 26px;
}

.brand-mark span {
   height: 4px;
   border-radius: 4px;
   background: var(--blue);
   display: block;
}

.brand-mark span:nth-child(1) {
   width: 100%;
}

.brand-mark span:nth-child(2) {
   width: 70%;
   background: var(--accent);
}

.brand-mark span:nth-child(3) {
   width: 88%;
   background: var(--navy);
}

.brand-text {
   display: flex;
   flex-direction: column;
   line-height: 1;
}

.brand-text strong {
   font-family: var(--font-head);
   font-size: 1.18rem;
   color: var(--navy);
   font-weight: 800;
}

.brand-text em {
   font-style: normal;
   font-size: .72rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--blue);
}

/* Nav links */
.navbar-nav .nav-link {
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--ink);
   font-size: .96rem;
   margin: 0 4px;
   position: relative;
   padding: 6px 8px;
}

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

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

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

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

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

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

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.877) 0%, rgba(0, 0, 0, 0.651) 45%, rgba(0, 0, 0, 0.048) 100%);
}

.hero .container {
   position: relative;
   z-index: 2;
}

/* content on the SIDE (left-aligned), not centered */
.hero-content {
   max-width: 620px;
   color: #fff;
   padding: 40px 0;
}

.hero-content .eyebrow {
   color: var(--accent);
   border-color: rgba(253, 106, 5, .5);
   background: rgba(253, 106, 5, .12);
}

.hero-title {
   font-size: clamp(2.1rem, 5.5vw, 4rem);
   font-weight: 800;
   color: #fff;
   margin-bottom: 20px;
}

.hero-lead {
   font-size: clamp(1rem, 1.6vw, 1.18rem);
   color: rgba(255, 255, 255, .9);
   margin-bottom: 30px;
   max-width: 540px;
}

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

/* Carousel controls / indicators */
.carousel-control-prev,
.carousel-control-next {
   width: 6%;
   opacity: .85;
}

.carousel-indicators [data-bs-target] {
   width: 34px;
   height: 5px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .55);
}

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

/* ============================================================
   4. MARQUEE (JS / rAF powered — no CSS animation on the loop)
============================================================ */
.marquee {
   background: var(--navy);
   overflow: hidden;
   white-space: nowrap;
   padding: 16px 0;
}

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

.marquee-item {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 1.05rem;
   color: #fff;
   letter-spacing: .04em;
   padding: 0 36px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.marquee-item i {
   color: var(--accent);
   font-size: .9rem;
}

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

.about-visual {
   position: relative;
   padding: 10px 30px 30px 10px;
}

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

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

.about-badge {
   position: absolute;
   top: 18px;
   left: -6px;
   background: var(--gradient);
   color: #fff;
   border-radius: var(--radius-sm);
   padding: 14px 20px;
   text-align: center;
   box-shadow: var(--shadow);
}

.about-badge-num {
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 1.7rem;
   display: block;
}

.about-badge-label {
   font-size: .74rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   opacity: .9;
}

.about-points {
   list-style: none;
   padding: 0;
   margin: 22px 0;
}

.about-points li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 12px;
   font-weight: 500;
   color: var(--ink);
}

.about-points i {
   color: var(--blue);
   font-size: 1.15rem;
   margin-top: 2px;
}

/* ============================================================
   6. SERVICES + sequential BLINK
============================================================ */
.services {
   background: var(--bg-tint);
}

.service-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   height: 100%;
   transition: transform var(--transition), box-shadow var(--transition);
   border: 1px solid var(--line);
   position: relative;
}

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

.service-img {
   position: relative;
   aspect-ratio: 4/3;
   overflow: hidden;
}

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

.service-card:hover .service-img img {
   transform: scale(1.09);
}

.service-index {
   position: absolute;
   top: 12px;
   left: 12px;
   font-family: var(--font-head);
   font-weight: 800;
   font-size: .9rem;
   color: #fff;
   background: var(--gradient);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-sm);
}

.service-body {
   padding: 22px 22px 26px;
}

.service-title {
   font-size: 1.42rem;
   color: var(--blue);
   /* bhagwa #FD6A05 — service names only */
   margin-bottom: 10px;
}

.service-body p {
   color: var(--muted);
   font-size: .95rem;
   margin-bottom: 14px;
}

/* Sequential left-to-right blink: colour + border + shadow travel card by card.
   --i sets each card's start offset so the highlight sweeps across the row. */
@keyframes blinkSweep {

   0%,
   100% {
      border-color: var(--line);
      box-shadow: var(--shadow-sm);
   }

   8% {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(253, 106, 5, .25), 0 18px 40px rgba(253, 106, 5, .28);
   }

   16% {
      border-color: var(--line);
      box-shadow: var(--shadow-sm);
   }
}

.blink-card {
   animation: blinkSweep 6s ease-in-out infinite;
   animation-delay: calc(var(--i) * .6s);
}

.blink-card:hover {
   animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
   .blink-card {
      animation: none;
   }
}

/* ============================================================
   7. WHY CHOOSE US (navy band)
============================================================ */
.why {
   background: var(--navy);
   color: #fff;
   overflow: hidden;
}

.why .eyebrow {
   color: var(--accent);
   border-color: rgba(253, 106, 5, .5);
   background: rgba(255, 255, 255, .06);
}

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

.why-item {
   display: flex;
   gap: 18px;
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 26px;
   transition: var(--transition);
}

.why-item:hover {
   background: rgba(255, 255, 255, .13);
   transform: translateX(6px);
}

.why-icon {
   flex: 0 0 56px;
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--white);
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 1.5rem;
   box-shadow: var(--shadow-sm);
}

.why-item h3 {
   color: #fff;
   font-size: 1.15rem;
   margin-bottom: 6px;
}

.why-item p {
   color: rgba(255, 255, 255, .8);
   margin: 0;
   font-size: .95rem;
}

/* Stats / counters */
.stats-row {
   text-align: center;
}

.stat {
   padding: 10px;
}

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

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

.stat p {
   color: rgba(255, 255, 255, .8);
   margin: 4px 0 0;
   font-size: .92rem;
   letter-spacing: .03em;
}

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

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

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

.step {
   text-align: center;
   position: relative;
   z-index: 1;
   background: #fff;
   padding: 0 8px;
}

.step-num {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   margin: 0 auto 18px;
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 1.5rem;
   color: #fff;
   background: var(--gradient);
   box-shadow: 0 12px 26px rgba(253, 106, 5, .3);
   transition: var(--transition);
}

.step:hover .step-num {
   transform: translateY(-6px) scale(1.06);
}

.step h3 {
   font-size: 1.15rem;
   margin-bottom: 8px;
}

.step p {
   color: var(--muted);
   font-size: .93rem;
   margin: 0;
}

/* ============================================================
   10. GALLERY + VIDEO
============================================================ */
.gallery {
   background: var(--bg-tint);
}

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

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

.gallery-fig figcaption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 14px;
   color: #fff;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: .95rem;
   background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
   transform: translateY(8px);
   opacity: 0;
   transition: var(--transition);
}

.gallery-fig:hover img {
   transform: scale(1.1);
}

.gallery-fig:hover figcaption {
   transform: none;
   opacity: 1;
}

/* Video section */
.video-head {
   margin: 64px 0 30px;
}

.video-tile {
   border-radius: var(--radius-sm);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   background: #000;
   aspect-ratio: 10/10;
   transition: transform var(--transition), box-shadow var(--transition);
}

.video-tile:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
}

/* Tile look = cover; JS switches to contain in fullscreen so video isn't cropped */
.video-tile video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   background: #000;
}

.video-tile video.is-fullscreen {
   object-fit: contain;
}

/* ============================================================
   11. FAQ
============================================================ */
.faqs {
   background: var(--white);
}

.faq-img {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   margin-top: 26px;
   width: 100%;
   object-fit: cover;
}

.custom-accordion .accordion-item {
   border: 1px solid var(--line);
   border-radius: var(--radius-sm) !important;
   margin-bottom: 14px;
   overflow: hidden;
   box-shadow: var(--shadow-sm);
}

.custom-accordion .accordion-button {
   font-family: var(--font-head);
   font-weight: 600;
   color: var(--navy);
   font-size: 1.02rem;
   padding: 20px 22px;
   background: #fff;
}

.custom-accordion .accordion-button:not(.collapsed) {
   color: #fff;
   background: var(--gradient);
   box-shadow: none;
}

.custom-accordion .accordion-button:focus {
   box-shadow: none;
}

.custom-accordion .accordion-button::after {
   filter: none;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
   filter: brightness(0) invert(1);
}

.custom-accordion .accordion-body {
   color: var(--muted);
   font-size: .96rem;
   padding: 18px 22px;
}

/* ============================================================
   12. TESTIMONIALS
============================================================ */
.testimonials {
   background: var(--navy);
   position: relative;
   overflow: hidden;
}

.testimonials .eyebrow {
   color: var(--accent);
   border-color: rgba(253, 106, 5, .5);
   background: rgba(255, 255, 255, .06);
}

#testiCarousel {
   max-width: 780px;
   margin: 0 auto;
}

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

.testi-quote {
   font-size: 3rem;
   color: var(--blue-soft);
   position: absolute;
   top: 14px;
   left: 24px;
}

.testi-text {
   font-size: 1.12rem;
   color: var(--ink);
   font-style: italic;
   position: relative;
   z-index: 1;
   margin-bottom: 24px;
}

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

.testi-person img {
   width: 58px;
   height: 58px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--blue-soft);
}

.testi-person strong {
   display: block;
   color: var(--navy);
   font-family: var(--font-head);
}

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

.testi-stars {
   color: #ffb400;
   margin-top: 14px;
   font-size: 1rem;
   letter-spacing: 3px;
}

.testimonials .carousel-control-prev,
.testimonials .carousel-control-next {
   width: 44px;
   height: 44px;
   background: var(--blue);
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 1;
}

.testimonials .carousel-control-prev {
   left: -8px;
}

.testimonials .carousel-control-next {
   right: -8px;
}

.testimonials .carousel-indicators {
   bottom: -46px;
}

.testimonials .carousel-indicators [data-bs-target] {
   background: rgba(255, 255, 255, .5);
}

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

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

.contact-list {
   list-style: none;
   padding: 0;
   margin: 28px 0 0;
}

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

.contact-ic {
   flex: 0 0 50px;
   width: 50px;
   height: 50px;
   border-radius: 14px;
   background: var(--gradient);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 1.25rem;
   box-shadow: var(--shadow-sm);
}

.contact-list strong {
   font-family: var(--font-head);
   color: var(--navy);
   display: block;
}

.contact-list p {
   color: var(--muted);
   margin: 2px 0 0;
}

.contact-list a {
   color: var(--muted);
}

.contact-list a:hover {
   color: var(--blue);
}

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

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

.form-control,
.form-select {
   border: 1.5px solid var(--line);
   border-radius: var(--radius-sm);
   padding: 12px 14px;
   font-size: .95rem;
   transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
   border-color: var(--blue);
   box-shadow: 0 0 0 3px rgba(253, 106, 5, .12);
}

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

.form-note.ok {
   color: #1a8a4a;
}

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

/* ============================================================
   15. FOOTER
============================================================ */
.site-footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .78);
   padding: 64px 0 24px;
}

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

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

.footer-brand .brand-text em {
   color: var(--accent);
}

.footer-brand .brand-mark span:nth-child(1) {
   background: #fff;
}

.footer-about {
   font-size: .94rem;
   max-width: 340px;
}

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

.footer-social a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   display: grid;
   place-items: center;
   transition: var(--transition);
}

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

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

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

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

.footer-links a {
   color: rgba(255, 255, 255, .75);
   font-size: .94rem;
}

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

.footer-contact li {
   display: flex;
   gap: 10px;
   margin-bottom: 14px;
   font-size: .92rem;
   align-items: flex-start;
}

.footer-contact i {
   color: var(--accent);
   margin-top: 4px;
}

.footer-contact a {
   color: rgba(255, 255, 255, .78);
}

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

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .12);
   margin-top: 44px;
   padding-top: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 8px;
   font-size: .86rem;
   color: rgba(255, 255, 255, .55);
}

/* ============================================================
   13.5 SERVICE AREAS
============================================================ */
.areas {
   background: var(--white);
}
.areas-wrap {
   display: grid;
   grid-template-columns: 1fr 1.15fr;
   gap: 40px;
   align-items: center;
   background: var(--bg-tint);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 44px;
   box-shadow: var(--shadow-sm);
}
.areas-intro .section-title {
   margin-bottom: 12px;
}
.areas-list {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   align-content: center;
}
.area-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 1rem;
   color: var(--navy);
   background: #fff;
   border: 1.5px solid var(--line);
   border-radius: 40px;
   padding: 12px 22px;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   cursor: default;
}
.area-pill i {
   color: var(--blue);
   transition: var(--transition);
}
.area-pill:hover {
   background: var(--blue);
   border-color: var(--blue);
   color: #fff;
   transform: translateY(-4px);
}
.area-pill:hover i {
   color: #fff;
}

/* ============================================================
   13. FLOATING BUTTONS + BACK TO TOP
============================================================ */
.float-btn {
   position: fixed;
   bottom: 26px;
   z-index: 1040;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #fff;
   font-size: 1.5rem;
   box-shadow: var(--shadow);
   transition: transform var(--transition);
}

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

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

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

/* Pulse rings */
.float-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: inherit;
   z-index: -1;
   animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
   0% {
      transform: scale(1);
      opacity: .7;
   }

   100% {
      transform: scale(1.9);
      opacity: 0;
   }
}

.to-top {
   position: fixed;
   bottom: 26px;
   right: 26px;
   z-index: 1035;
   width: 46px;
   height: 46px;
   border: none;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   font-size: 1.1rem;
   opacity: 0;
   pointer-events: none;
   transform: translateY(14px);
   transition: var(--transition);
   box-shadow: var(--shadow-sm);
}

.to-top.show {
   opacity: 1;
   pointer-events: auto;
   transform: none;
   bottom: 92px;
}

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

   .navbar-nav .nav-link {
      padding: 10px 8px;
   }

   .navbar-nav .btn-brand {
      margin-top: 8px;
      display: inline-block;
   }

   .hero-overlay {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.582) 0%, rgba(0, 0, 0, 0.623) 100%);
   }

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

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

   .steps::before {
      display: none;
   }

   .about-visual {
      padding: 10px 0 40px;
   }

   .areas-wrap {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 30px;
   }
}

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

   .topbar {
      font-size: .78rem;
   }

   .topbar-info {
      gap: 12px !important;
   }

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

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

   .footer-bottom {
      flex-direction: column;
      text-align: center;
      justify-content: center;
   }

   .float-btn {
      width: 52px;
      height: 52px;
      font-size: 1.35rem;
   }

   .contact-form {
      padding: 22px;
   }

   .testi-card {
      padding: 36px 24px;
   }
}