/* =====================================================================
   ASTRO TAJINDER CHABRA — Landing Page Styles
   Theme: Celestial Vedic (midnight navy + gold, light base)
   All colours are CSS variables — change them here in one place.
===================================================================== */

:root {
   /* ---- COLOUR THEME (edit these) ---- */
   --c-bg: #ffffff;
   /* main light base            */
   --c-bg-soft: #ffffff;
   /* soft section bg (white)    */
   --c-bg-cream: #ffffff;
   /* section bg (white)         */
   --c-deep: #6a0d18;
   /* deep maroon (dark bg)     */
   --c-deep-2: #6a0d18;
   /* maroon partner            */
   --c-primary: #c20000;
   /* dark red (brand)          */
   --c-gold: #c20000;
   /* red accent                 */
   --c-gold-soft: #ffffff;
   /* light accent on colour bg  */
   --c-saffron: #c20000;
   /* red accent                 */
   --c-text: #2b2b33;
   /* body text                  */
   --c-muted: #6b6b75;
   /* muted text                 */
   --c-line: #e7e4f2;
   /* borders / hairlines        */
   --c-white: #ffffff;

   /* ---- TYPE ---- */
   --font-display: 'Cormorant Garamond', Georgia, serif;
   --font-body: 'Poppins', system-ui, sans-serif;

   /* ---- MISC ---- */
   --radius: 18px;
   --radius-sm: 12px;
   --shadow-sm: 0 6px 18px rgba(0, 0, 0, .07);
   --shadow-md: 0 14px 40px rgba(0, 0, 0, .10);
   --shadow-gold: 0 10px 30px rgba(194, 0, 0, .24);
   --ease: cubic-bezier(.22, .61, .36, 1);
   --maxw: 1200px;
}

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

html {
   scroll-behavior: smooth;
   scroll-padding-top: 96px;
   overflow-x: hidden;
}

body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--c-text);
   background: var(--c-bg);
   font-size: 16px;
   line-height: 1.7;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 700;
   line-height: 1.15;
   margin: 0 0 .5em;
   letter-spacing: .2px;
}

p {
   margin: 0 0 1rem;
}

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

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

.container {
   max-width: var(--maxw);
}

/* Reusable section rhythm */
.section {
   padding: 96px 0;
   position: relative;
}

.section-title {
   font-size: clamp(1.9rem, 3.6vw, 3rem);
   color: var(--c-deep);
}

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

.section-lead {
   color: var(--c-muted);
   max-width: 640px;
   font-size: 1.05rem;
}

.section-lead.light {
   color: rgba(255, 255, 255, .82);
}

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

.section-head.text-center .section-lead {
   margin-inline: auto;
}

.eyebrow {
   display: inline-block;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .78rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--c-saffron);
   margin-bottom: 14px;
   position: relative;
   padding-left: 30px;
}

.eyebrow::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 22px;
   height: 2px;
   background: var(--c-gold);
   transform: translateY(-50%);
}

.eyebrow.light {
   color: var(--c-gold-soft);
}

/* ---------------------------------------------------------------
   BUTTONS (varied hover effects)
--------------------------------------------------------------- */
.btn {
   font-family: var(--font-body);
   font-weight: 600;
   border-radius: 50px;
   padding: .78rem 1.9rem;
   font-size: .95rem;
   border: 2px solid transparent;
   transition: all .35s var(--ease);
   cursor: pointer;
}

.btn-solid {
   background: var(--c-primary);
   color: #ffffff;
   box-shadow: var(--shadow-gold);
}

.btn-solid:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 16px 38px rgba(194, 0, 0, .38);
   color: #ffffff;
}

.btn-ghost {
   background: transparent;
   color: var(--c-white);
   border-color: rgba(255, 255, 255, .55);
}

.btn-ghost:hover {
   background: var(--c-white);
   color: var(--c-deep);
   border-color: var(--c-white);
   letter-spacing: .04em;
}

/* ---------------------------------------------------------------
   1. TOP BAR
--------------------------------------------------------------- */
.topbar {
   background: var(--c-deep);
   color: rgba(255, 255, 255, .82);
   font-size: .82rem;
   padding: 8px 0;
}

.topbar a {
   color: rgba(255, 255, 255, .82);
}

.topbar a:hover {
   color: var(--c-gold-soft);
}

.topbar .ico {
   color: var(--c-gold);
   margin-right: 4px;
}

.topbar .divider {
   margin: 0 12px;
   opacity: .35;
}

.topbar-right {
   display: flex;
   align-items: center;
   gap: 14px;
}

.topbar-tag {
   opacity: .7;
}

.topbar .social {
   font-size: .72rem;
   font-weight: 600;
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 20px;
   padding: 2px 10px;
   transition: all .3s var(--ease);
}

.topbar .social:hover {
   background: var(--c-gold);
   color: var(--c-deep);
   border-color: var(--c-gold);
}

@media (max-width: 767px) {
   .topbar {
      display: none;
   }
}

/* ---------------------------------------------------------------
   2. STICKY HEADER
--------------------------------------------------------------- */
.site-header {
   position: sticky;
   top: 0;
   z-index: 900;
   background: rgba(255, 255, 255, .97);
   border-bottom: 1px solid var(--c-line);
   padding: 14px 0;
   transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}

.site-header.scrolled {
   box-shadow: var(--shadow-sm);
   padding: 8px 0;
}

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

.brand-mark {
   font-size: 1.7rem;
   color: var(--c-gold);
   background: var(--c-deep);
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
}

.brand-text strong {
   display: block;
   font-family: var(--font-display);
   font-size: 1.35rem;
   color: var(--c-deep);
   line-height: 1;
}

.brand-text small {
   font-size: .68rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--c-muted);
}

.nav-list {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0;
   padding: 0;
}

.nav-list a {
   font-weight: 500;
   font-size: .93rem;
   padding: 8px 14px;
   border-radius: 30px;
   color: var(--c-text);
   position: relative;
}

.nav-list a:not(.nav-cta)::after {
   content: "";
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 4px;
   height: 2px;
   background: var(--c-gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s var(--ease);
}

.nav-list a:not(.nav-cta):hover::after {
   transform: scaleX(1);
}

.nav-list a:not(.nav-cta):hover {
   color: var(--c-primary);
}

.nav-cta {
   background: var(--c-primary);
   color: #ffffff !important;
   font-weight: 600;
   margin-left: 6px;
}

.nav-cta:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-gold);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
}

.nav-toggle span {
   width: 26px;
   height: 3px;
   background: var(--c-deep);
   border-radius: 3px;
   transition: all .3s var(--ease);
}

.nav-toggle.open span:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
   opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 991px) {
   .nav-toggle {
      display: flex;
      z-index: 20;
   }

   .nav-list {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(78vw, 320px);
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      background: var(--c-deep);
      padding: 100px 26px 40px;
      transform: translateX(100%);
      transition: transform .4s var(--ease);
   }

   .nav-list.open {
      transform: translateX(0);
      box-shadow: -20px 0 60px rgba(0, 0, 0, .3);
   }

   .nav-list a {
      color: rgba(255, 255, 255, .9);
      width: 100%;
      font-size: 1.05rem;
   }

   .nav-list a:not(.nav-cta):hover {
      color: var(--c-gold-soft);
   }

   .nav-cta {
      width: 100%;
      text-align: center;
      margin-top: 10px;
   }
}

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

.hero-slide::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
         rgba(0, 0, 0, 0) 45%,
         rgba(0, 0, 0, .18) 72%,
         rgba(0, 0, 0, .42) 100%);
   z-index: 1;
}

.hero-carousel .carousel-item,
.hero-slide {
   min-height: min(88vh, 720px);
}

.hero-slide {
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
   background-color: var(--c-deep);
   /* fallback when image missing */
   background-image: none;
   position: relative;
}

/* subtle star texture overlay */
.hero-slide::after {
   content: "";
   position: absolute;
   inset: 0;
   background: none;
   opacity: .7;
   pointer-events: none;
}

.hero-content {
   max-width: 620px;
   color: var(--c-white);
   position: relative;
   z-index: 2;
   padding-bottom: 74px;
}

.hero-eyebrow {
   display: inline-block;
   font-size: .78rem;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--c-gold-soft);
   border: 1px solid rgba(255, 255, 255, .4);
   border-radius: 30px;
   padding: 6px 16px;
   margin-bottom: 22px;
}

.hero-title {
   font-size: clamp(2.2rem, 5vw, 4rem);
   color: var(--c-white);
   margin-bottom: 18px;
}

.hero-title em {
   font-style: italic;
   color: var(--c-gold-soft);
}

.hero-sub {
   font-size: 1.1rem;
   color: rgba(255, 255, 255, .85);
   margin-bottom: 30px;
   max-width: 540px;
}

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

/* Slide name — the only content on each hero slide */
.hero-name {
   display: inline-block;
   font-family: var(--font-display);
   font-size: clamp(1.5rem, 3.6vw, 2.6rem);
   font-weight: 700;
   color: var(--c-white);
   margin: 0;
   line-height: 1.15;
   letter-spacing: .5px;
   background: rgba(106, 13, 24, .5);
   padding: .42em .9em;
   border-radius: 10px;
   backdrop-filter: blur(3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* name slides in from the side on the active slide */
.hero-carousel .carousel-item .hero-name {
   opacity: 0;
   transform: translateX(-70px);
}

.hero-carousel .carousel-item.active .hero-name {
   animation: heroNameIn .9s var(--ease) .15s both;
}

@keyframes heroNameIn {
   from {
      opacity: 0;
      transform: translateX(-70px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* carousel controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
   width: 6%;
   opacity: 1;
}

.hero-ctrl,
.testi-ctrl {
   font-size: 2rem;
   color: var(--c-white);
   background: rgba(255, 255, 255, .12);
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .3);
   transition: all .3s var(--ease);
   backdrop-filter: blur(4px);
}

.hero-ctrl:hover,
.testi-ctrl:hover {
   background: var(--c-gold);
   color: var(--c-deep);
   border-color: var(--c-gold);
}

.hero-dots {
   bottom: 26px;
}

.hero-dots [data-bs-target],
.testi-dots [data-bs-target] {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .6);
   background: transparent;
   opacity: 1;
   transition: all .3s var(--ease);
}

.hero-dots .active,
.testi-dots .active {
   background: var(--c-gold);
   border-color: var(--c-gold);
   width: 30px;
   border-radius: 8px;
}

/* floating icons */
.float-icon {
   position: absolute;
   z-index: 2;
   color: rgba(236, 194, 90, .55);
   pointer-events: none;
}

.fi-1 {
   top: 18%;
   right: 12%;
   font-size: 2.4rem;
   animation: floaty 6s ease-in-out infinite;
}

.fi-2 {
   bottom: 22%;
   right: 26%;
   font-size: 3rem;
   color: rgba(255, 255, 255, .35);
   animation: floaty 8s ease-in-out infinite .8s;
}

.fi-3 {
   top: 30%;
   right: 40%;
   font-size: 1.8rem;
   animation: floaty 7s ease-in-out infinite .4s;
}

@keyframes floaty {

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

   50% {
      transform: translateY(-18px) rotate(8deg);
   }
}

@media (max-width: 991px) {
   .float-icon {
      display: none;
   }

   .hero-slide {
      text-align: right;
   }
}

/* ---------------------------------------------------------------
   4. MARQUEE (JS driven)
--------------------------------------------------------------- */
.marquee {
   background: var(--c-primary);
   overflow: hidden;
   white-space: nowrap;
   padding: 16px 0;
   border-top: 2px solid var(--c-gold);
   border-bottom: 2px solid var(--c-gold);
}

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

.marquee-item {
   color: var(--c-white);
   font-family: var(--font-display);
   font-size: 1.35rem;
   font-weight: 600;
   padding: 0 40px;
   display: inline-flex;
   align-items: center;
}

.marquee-item::first-letter {
   color: var(--c-gold-soft);
}

/* ---------------------------------------------------------------
   5. ABOUT
--------------------------------------------------------------- */
.about {
   background: var(--c-bg);
}

.about .section-title {
   font-size: clamp(1.6rem, 2.8vw, 2.3rem);
   line-height: 1.2;
   margin-bottom: 18px;
}

.about-portrait {
   position: relative;
   max-width: 420px;
   margin-inline: auto;
}

.portrait-frame {
   border-radius: 26px 26px 120px 26px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   border: 6px solid var(--c-white);
   position: relative;
   z-index: 2;
   background: var(--c-primary);
   aspect-ratio: 4/5;
}

.portrait-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.portrait-badge {
   position: absolute;
   bottom: -18px;
   right: -10px;
   z-index: 3;
   background: var(--c-primary);
   color: #ffffff;
   width: 128px;
   height: 128px;
   border-radius: 50%;
   display: grid;
   place-content: center;
   text-align: center;
   box-shadow: var(--shadow-gold);
   border: 5px solid var(--c-white);
}

.portrait-badge .pb-num {
   font-family: var(--font-display);
   font-size: 2.6rem;
   font-weight: 700;
   line-height: .9;
}

.portrait-badge .pb-plus {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 700;
}

.portrait-badge small {
   font-size: .62rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .08em;
   line-height: 1.2;
   margin-top: 2px;
}

.orbit-ring {
   position: absolute;
   inset: -22px;
   border: 2px dashed rgba(194, 0, 0, .5);
   border-radius: 30px 30px 130px 30px;
   z-index: 1;
   animation: spinSlow 18s linear infinite;
}

@keyframes spinSlow {
   to {
      transform: rotate(360deg);
   }
}

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

.ap-item {
   font-size: .92rem;
   font-weight: 500;
   color: var(--c-text);
}

.ap-ico {
   color: var(--c-gold);
   margin-right: 8px;
}

@media (max-width: 575px) {
   .about-points {
      grid-template-columns: 1fr;
   }
}

/* ---------------------------------------------------------------
   6. SERVICES
--------------------------------------------------------------- */
.services {
   background: var(--c-bg-soft);
}

/* ---- Services: tabbed category layout ---- */
.services-tabs {
   margin-top: 8px;
}

.service-tabnav {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   border: 0;
   margin-bottom: 44px;
}

.svc-tabbtn {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .95rem;
   color: var(--c-deep);
   background: var(--c-white);
   border: 1.5px solid var(--c-line);
   border-radius: 50px;
   padding: .7rem 1.6rem;
   cursor: pointer;
   transition: all .3s var(--ease);
}

.svc-tabbtn:hover {
   border-color: var(--c-primary);
   color: var(--c-primary);
}

.svc-tabbtn.active {
   background: var(--c-primary);
   border-color: var(--c-primary);
   color: #fff;
   box-shadow: var(--shadow-gold);
}

.svc-item {
   display: flex;
   align-items: center;
   gap: 16px;
   height: 100%;
   background: var(--c-white);
   border: 1px solid var(--c-line);
   border-left: 4px solid var(--c-primary);
   border-radius: var(--radius-sm);
   padding: 18px 20px;
   box-shadow: var(--shadow-sm);
   transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.svc-item:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
}

.svc-ico {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font-size: 1.4rem;
   color: #fff;
   background: var(--c-primary);
   box-shadow: var(--shadow-gold);
}

.svc-txt {
   min-width: 0;
}

.svc-txt h3 {
   font-size: 1.08rem;
   line-height: 1.25;
   color: var(--c-deep);
   margin: 0;
}

.svc-sub {
   display: block;
   font-size: .8rem;
   color: var(--c-muted);
   margin-top: 3px;
}

.svc-fee {
   display: inline-block;
   font-family: var(--font-body);
   font-size: .78rem;
   font-weight: 600;
   color: var(--c-primary);
   background: rgba(194, 0, 0, .08);
   border-radius: 30px;
   padding: 2px 12px;
   margin-top: 6px;
}

@media (max-width: 480px) {
   .svc-tabbtn {
      font-size: .82rem;
      padding: .6rem 1rem;
   }

   .svc-item {
      gap: 12px;
      padding: 14px 14px;
   }

   .svc-ico {
      width: 42px;
      height: 42px;
      font-size: 1.2rem;
   }

   .svc-txt h3 {
      font-size: .98rem;
   }
}

.service-card {
   background: var(--c-white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(106, 13, 24, .05);
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: transform .4s var(--ease), box-shadow .4s var(--ease);
   border: 1px solid rgba(106, 13, 24, .04);
}

.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 26px rgba(106, 13, 24, .1);
}

.service-img {
   aspect-ratio: 14/10;
   overflow: hidden;
   background: var(--c-primary);
   position: relative;
}

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

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

.service-body {
   padding: 34px 24px 26px;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   flex: 1;
}

.service-body p {
   flex: 1;
}

.service-call {
   align-self: center;
   margin-top: 16px;
   padding: .55rem 1.5rem;
   font-size: .9rem;
}

.service-body .svc-fee {
   align-self: center;
}

.service-body::before {
   content: "\2726";
   position: absolute;
   top: -24px;
   left: 50%;
   transform: translateX(-50%);
   width: 48px;
   height: 48px;
   background: var(--c-primary);
   color: #ffffff;
   display: grid;
   place-items: center;
   border-radius: 12px;
   font-size: 1.3rem;
   box-shadow: var(--shadow-gold);
}

.service-body h3 {
   font-size: 1.5rem;
   color: var(--c-deep);
   margin-top: 10px;
}

.service-body p {
   color: var(--c-muted);
   font-size: .95rem;
   margin: 0;
}

/* ---------------------------------------------------------------
   7. WHY CHOOSE US (dark, sequential blink cards)
--------------------------------------------------------------- */
.why {
   background: var(--c-deep);
   color: var(--c-white);
   overflow: hidden;
}

.why::before {
   content: "";
   position: absolute;
   inset: 0;
   background: none;
   pointer-events: none;
}

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

.why-card {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius);
   padding: 30px 22px;
   height: 100%;
   text-align: center;
   transition: transform .4s var(--ease);
}

.why-card:hover {
   transform: translateY(-8px);
}

.why-ico {
   font-size: 2.2rem;
   color: var(--c-gold-soft);
   display: block;
   margin-bottom: 14px;
}

.why-card h3 {
   font-size: 1.35rem;
   color: var(--c-white);
}

.why-card p {
   font-size: .88rem;
   color: rgba(255, 255, 255, .72);
   margin: 0;
}

/* Sequential colour/border/shadow blink — one card lights after another (left to right) */
.blink-card {
   animation: cardBlink 4s ease-in-out infinite;
}

.blink-row>div:nth-child(1) .blink-card {
   animation-delay: 0s;
}

.blink-row>div:nth-child(2) .blink-card {
   animation-delay: .5s;
}

.blink-row>div:nth-child(3) .blink-card {
   animation-delay: 1s;
}

.blink-row>div:nth-child(4) .blink-card {
   animation-delay: 1.5s;
}

@keyframes cardBlink {

   0%,
   45%,
   100% {
      border-color: rgba(255, 255, 255, .12);
      box-shadow: none;
      background: rgba(255, 255, 255, .05);
   }

   15%,
   30% {
      border-color: #fff;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 12px 34px rgba(255, 255, 255, .28);
      background: rgba(255, 255, 255, .12);
   }
}

.why-stats {
   margin-top: 60px;
   gap: 24px 0;
}

.why-stats>div {
   padding: 10px;
}

.stat-num,
.stat-suffix {
   font-family: var(--font-display);
   font-size: clamp(2.2rem, 4vw, 3.2rem);
   font-weight: 700;
   color: var(--c-gold-soft);
}

.why-stats small {
   display: block;
   font-size: .8rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .6);
   margin-top: 4px;
}

/* ---------------------------------------------------------------
   8. HOW IT WORKS — timeline
--------------------------------------------------------------- */
.process {
   background: var(--c-bg-cream);
}

.timeline {
   position: relative;
   max-width: 820px;
   margin: 0 auto;
}

.timeline::before {
   content: "";
   position: absolute;
   left: 27px;
   top: 10px;
   bottom: 10px;
   width: 2px;
   background: var(--c-primary);
}

.tl-step {
   display: flex;
   gap: 24px;
   margin-bottom: 26px;
   position: relative;
}

.tl-step:last-child {
   margin-bottom: 0;
}

.tl-num {
   flex: 0 0 auto;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--c-deep);
   color: var(--c-gold-soft);
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 700;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-sm);
   z-index: 2;
   border: 3px solid var(--c-bg-cream);
   transition: all .4s var(--ease);
}

.tl-step:hover .tl-num {
   background: var(--c-primary);
   color: #ffffff;
   transform: scale(1.08);
}

.tl-card {
   background: var(--c-white);
   border-radius: var(--radius-sm);
   padding: 20px 26px;
   box-shadow: var(--shadow-sm);
   flex: 1;
   border-left: 4px solid var(--c-gold);
   transition: transform .4s var(--ease);
}

.tl-step:hover .tl-card {
   transform: translateX(6px);
}

.tl-card h3 {
   font-size: 1.4rem;
   color: var(--c-deep);
   margin-bottom: 4px;
}

.tl-card p {
   color: var(--c-muted);
   font-size: .94rem;
   margin: 0;
}

/* ---------------------------------------------------------------
   9. GALLERY
--------------------------------------------------------------- */
.gallery {
   background: var(--c-bg);
}

.gal-item {
   margin: 0;
   border-radius: var(--radius-sm);
   overflow: hidden;
   position: relative;
   box-shadow: var(--shadow-sm);
   aspect-ratio: 1/1;
   background: var(--c-primary);
}

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

.gal-item figcaption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 26px 16px 14px;
   color: var(--c-white);
   font-weight: 600;
   font-size: .9rem;
   background: rgba(106, 13, 24, .92);
   transform: translateY(8px);
   opacity: 0;
   transition: all .4s var(--ease);
}

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

.gal-item:hover figcaption {
   transform: translateY(0);
   opacity: 1;
}

.gal-item::after {
   content: "";
   position: absolute;
   inset: 0;
   border: 2px solid transparent;
   border-radius: var(--radius-sm);
   transition: border-color .4s var(--ease);
}

.gal-item:hover::after {
   border-color: var(--c-gold);
}

.gal-item {
   cursor: pointer;
}

.gal-item:focus-visible {
   outline: 3px solid var(--c-primary);
   outline-offset: 3px;
}

/* Zoom hint icon on hover */
.gal-item::before {
   content: "\2315";
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 50%;
   width: 52px;
   height: 52px;
   transform: translate(-50%, -50%) scale(.6);
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(106, 13, 24, .85);
   color: #fff;
   font-size: 1.5rem;
   opacity: 0;
   transition: all .4s var(--ease);
   pointer-events: none;
}

.gal-item:hover::before {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}

/* ---------------------------------------------------------------
   GALLERY LIGHTBOX
--------------------------------------------------------------- */
.lightbox {
   position: fixed;
   inset: 0;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 24px;
   background: rgba(38, 5, 10, .93);
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

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

.lb-stage {
   margin: 0;
   max-width: min(92vw, 1100px);
   max-height: 88vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   transform: scale(.94);
   transition: transform .35s var(--ease);
}

.lightbox.open .lb-stage {
   transform: scale(1);
}

.lb-img {
   max-width: 100%;
   max-height: 82vh;
   width: auto;
   height: auto;
   border-radius: var(--radius-sm);
   box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
   background: #fff;
}

.lb-cap {
   color: rgba(255, 255, 255, .85);
   font-size: .92rem;
   margin-top: 14px;
   text-align: center;
   max-width: 640px;
}

.lb-close,
.lb-nav {
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .35);
   color: #fff;
   border-radius: 50%;
   cursor: pointer;
   display: grid;
   place-items: center;
   transition: all .3s var(--ease);
   backdrop-filter: blur(4px);
}

.lb-close {
   position: absolute;
   top: 20px;
   right: 24px;
   width: 48px;
   height: 48px;
   font-size: 1.9rem;
   line-height: 1;
}

.lb-nav {
   width: 54px;
   height: 54px;
   font-size: 2rem;
   flex: 0 0 auto;
}

.lb-close:hover,
.lb-nav:hover {
   background: #fff;
   color: var(--c-primary);
   border-color: #fff;
}

@media (max-width: 640px) {

   .lb-nav {
      width: 44px;
      height: 44px;
      font-size: 1.6rem;
   }

   .lb-close {
      top: 14px;
      right: 14px;
      width: 42px;
      height: 42px;
      font-size: 1.6rem;
   }
}

/*--------------------------------------------------------------
VIDEO SECTION
--------------------------------------------------------------*/

.videos {
   background: var(--c-bg);
}

.video-card {
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid var(--c-line);
   box-shadow: var(--shadow-sm);
   transition: .35s;
   height: 100%;
}

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

.video-box {
   width: 100%;
   aspect-ratio: 12/9;
   overflow: hidden;
   background: #000000;
}

.video-box video {
   width: 100%;
   height: 100%;
   display: block;
}

.video-cap {
   padding: 20px;
}

.video-cap h3 {
   margin: 0;
   font-size: 22px;
   color: var(--c-deep);
}

/* ---------------------------------------------------------------
   10. FAQ
--------------------------------------------------------------- */
.faq {
   background: var(--c-bg-soft);
}

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

.faq-accordion .accordion-button {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--c-deep);
   padding: 20px 24px;
   background: var(--c-white);
}

.faq-accordion .accordion-button:not(.collapsed) {
   color: var(--c-primary);
   background: rgba(194, 0, 0, .06);
   box-shadow: none;
}

.faq-accordion .accordion-button:focus {
   box-shadow: 0 0 0 3px rgba(194, 0, 0, .3);
   border-color: transparent;
}

.faq-accordion .accordion-button::after {
   background-image: none;
   content: "\002B";
   font-family: var(--font-body);
   font-size: 1.5rem;
   font-weight: 300;
   width: auto;
   height: auto;
   transition: transform .3s var(--ease);
   color: var(--c-gold);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
   transform: rotate(45deg);
}

.faq-accordion .accordion-body {
   color: var(--c-muted);
   padding: 4px 24px 22px;
   font-size: .96rem;
}

/* ---------------------------------------------------------------
   11. TESTIMONIALS (dark)
--------------------------------------------------------------- */
.testimonials {
   background: var(--c-primary);
   color: var(--c-white);
}

.testimonials .carousel {
   max-width: 780px;
   margin: 0 auto;
}

.testi-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 48px 44px 38px;
   text-align: center;
   margin: 0 auto;
   position: relative;
}

.quote-mark {
   font-family: var(--font-display);
   font-size: 5rem;
   line-height: 0;
   color: var(--c-gold);
   position: absolute;
   top: 36px;
   left: 30px;
   opacity: .5;
}

.testi-card p {
   font-family: var(--font-display);
   font-size: 1.55rem;
   font-style: italic;
   color: rgba(255, 255, 255, .92);
   line-height: 1.5;
   margin-bottom: 22px;
}

.testi-card footer strong {
   display: block;
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--c-gold-soft);
}

.testi-card footer span {
   font-size: .85rem;
   color: rgba(255, 255, 255, .6);
}

.testimonials .carousel-control-prev,
.testimonials .carousel-control-next {
   width: 8%;
   opacity: 1;
}

.testi-dots {
   position: static;
   margin-top: 26px;
}

/* ---------------------------------------------------------------
   13. CONTACT
--------------------------------------------------------------- */
.contact {
   background: var(--c-bg);
}

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

.contact-list li {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   margin-bottom: 20px;
}

.cl-ico {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--c-deep);
   color: var(--c-gold);
   display: grid;
   place-items: center;
   font-size: 1.3rem;
   box-shadow: var(--shadow-sm);
}

.contact-list small {
   display: block;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .7rem;
   color: var(--c-muted);
   margin-bottom: 2px;
}

.contact-list a {
   color: var(--c-text);
   font-weight: 500;
}

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

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

.contact-form label {
   font-size: .82rem;
   font-weight: 600;
   color: var(--c-text);
   margin-bottom: 6px;
   display: block;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
   width: 100%;
   border: 1.5px solid var(--c-line);
   border-radius: 10px;
   padding: 12px 14px;
   font-family: var(--font-body);
   font-size: .95rem;
   color: var(--c-text);
   background: var(--c-bg-soft);
   transition: all .3s var(--ease);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
   outline: none;
   border-color: var(--c-gold);
   background: var(--c-white);
   box-shadow: 0 0 0 3px rgba(194, 0, 0, .15);
}

.contact-form input.invalid,
.contact-form select.invalid {
   border-color: var(--c-saffron);
}

.form-note {
   font-size: .9rem;
   margin: 12px 0 0;
   text-align: center;
   font-weight: 500;
   min-height: 1.2em;
}

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

.form-note.err {
   color: var(--c-saffron);
}

/* ---------------------------------------------------------------
   15. FOOTER
--------------------------------------------------------------- */
.site-footer {
   background: #000000;
   color: rgba(255, 255, 255, .7);
   padding: 70px 0 26px;
}

.footer-brand .brand-text strong {
   color: var(--c-white);
}

.footer-brand .brand-text small {
   color: rgba(255, 255, 255, .55);
}

.footer-about {
   margin-top: 16px;
   font-size: .9rem;
   max-width: 320px;
}

.site-footer h4 {
   font-family: var(--font-body);
   font-size: .8rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--c-gold-soft);
   margin-bottom: 18px;
}

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

.footer-links li,
.footer-contact li {
   margin-bottom: 10px;
   font-size: .92rem;
}

.footer-links a:hover,
.footer-contact a:hover {
   color: var(--c-gold-soft);
   padding-left: 4px;
}

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

.footer-note {
   color: var(--c-gold-soft);
}

/* ---------------------------------------------------------------
   12. FLOATING BUTTONS + BACK TO TOP
--------------------------------------------------------------- */
.float-btn {
   position: fixed;
   bottom: 24px;
   z-index: 950;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 1.6rem;
   color: var(--c-white);
   box-shadow: var(--shadow-md);
   transition: transform .3s var(--ease);
}

.float-btn:hover {
   transform: scale(1.1);
   color: var(--c-white);
}

.float-whatsapp {
   left: 24px;
   background: #25D366;
   animation: pulseGreen 2s infinite;
}

.float-call {
   right: 24px;
   background: var(--c-saffron);
   animation: pulseOrange 2s infinite;
}

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

   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 pulseOrange {
   0% {
      box-shadow: 0 0 0 0 rgba(194, 0, 0, .6);
   }

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

   100% {
      box-shadow: 0 0 0 0 rgba(194, 0, 0, 0);
   }
}

.to-top {
   position: fixed;
   bottom: 92px;
   right: 24px;
   z-index: 940;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: var(--c-deep);
   color: var(--c-gold);
   font-size: 1.2rem;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all .35s var(--ease);
   box-shadow: var(--shadow-sm);
}

.to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.to-top:hover {
   background: var(--c-gold);
   color: var(--c-deep);
}

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

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

/* ---------------------------------------------------------------
   RESPONSIVE TWEAKS
--------------------------------------------------------------- */
@media (max-width: 991px) {
   .section {
      padding: 72px 0;
   }

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

   .portrait-badge {
      width: 104px;
      height: 104px;
   }

   .portrait-badge .pb-num {
      font-size: 2.1rem;
   }
}

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

   .hero-carousel .carousel-item,
   .hero-slide {
      min-height: 58vh;
   }

   .hero-content {
      padding-bottom: 6px;
   }

   .hero-name {
      font-size: 1.2rem;
      padding: .38em .8em;
      border-radius: 8px;
   }

   .marquee-item {
      font-size: 1.15rem;
      padding: 0 28px;
   }

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

   .testi-card p {
      font-size: 1.25rem;
   }

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

   .float-btn {
      width: 50px;
      height: 50px;
      font-size: 1.4rem;
   }
}

@media (max-width: 575px) {
   .brand-text small {
      display: none;
   }

   .hero-carousel .carousel-item,
   .hero-slide {
      min-height: 32vh;
   }

   .hero-name {
      font-size: 1.08rem;
   }

   .hero-actions .btn {
      flex: 1 1 100%;
      text-align: center;
   }
}

/* ---------------------------------------------------------------
   REDUCED MOTION
   Targeted (not a blanket kill): we disable page-load entrance
   animation and the pulsing float buttons, but keep the gentle,
   non-strobing brand motion (marquee scroll, orbit ring, slow card
   glow) since these are core to the requested design.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

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

   .float-whatsapp,
   .float-call {
      animation: none !important;
   }

   .float-icon {
      animation: none !important;
   }
}

/* =====================================================================
   TWO-COLOUR THEME ADJUSTMENTS
   Brand dark red #c20000 + deep maroon #6a0d18 on a white base.
   Accents sitting on solid red / indigo sections are switched to white
   so they stay readable.
===================================================================== */

/* white accents on red / indigo backgrounds */
.brand-mark {
   color: #fff;
}

.topbar .ico {
   color: #fff;
}

.topbar .social:hover {
   background: #fff;
   color: var(--c-primary);
   border-color: #fff;
}

.hero-ctrl:hover,
.testi-ctrl:hover {
   background: #fff;
   color: var(--c-primary);
   border-color: #fff;
}

.hero-dots .active,
.testi-dots .active {
   background: #fff;
   border-color: #fff;
}

.marquee-item::first-letter {
   color: #fff;
}

.marquee {
   border-top-color: rgba(255, 255, 255, .4);
   border-bottom-color: rgba(255, 255, 255, .4);
}

.quote-mark {
   color: rgba(255, 255, 255, .5);
}

.cl-ico {
   color: #fff;
}

.to-top {
   color: #fff;
}

.to-top:hover {
   background: #fff;
   color: var(--c-primary);
}

.eyebrow.light::before {
   background: #fff;
}