/* =============================================================
   JASAARI — Passport Consultancy Landing Page
   Author: JASAARI
   NOTE: Change the theme by editing the CSS variables below only.
   ============================================================= */

/* -------------------------------------------------------------
   THEME VARIABLES  (edit colours here — nothing else needed)
------------------------------------------------------------- */
:root {
   /* Brand palette (passport navy + warm gold) */
   --brand: #12324f;
   /* primary deep navy       */
   --brand-dark: #0c2338;
   /* darker navy             */
   --brand-soft: #1c4870;
   /* lighter navy            */
   --accent: #d99b2b;
   /* warm gold accent        */
   --accent-dark: #bf841c;
   /* gold hover              */
   --accent-soft: #f6ead0;
   /* pale gold tint          */

   /* Neutrals / backgrounds */
   --bg: #ffffff;
   /* base white              */
   --bg-tint: #f6f8fb;
   /* soft cool tint          */
   --bg-warm: #faf7f1;
   /* soft warm tint          */
   --line: #e6ebf1;
   /* borders                 */

   /* Text */
   --ink: #12324f;
   /* headings                */
   --body: #4a5b6b;
   /* body text               */
   --muted: #7b8a99;
   /* muted / captions        */
   --white: #ffffff;

   /* Type */
   --font-display: 'Sora', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;

   /* Effects */
   --radius: 16px;
   --radius-sm: 10px;
   --shadow-sm: 0 4px 14px rgba(18, 50, 79, .06);
   --shadow: 0 14px 40px rgba(18, 50, 79, .10);
   --shadow-lg: 0 26px 60px rgba(18, 50, 79, .16);
   --ease: cubic-bezier(.22, .61, .36, 1);

   /* WhatsApp / Call button colours */
   --wa: #25d366;
   --wa-dark: #1da851;
}

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

html,
body {
   overflow-x: clip;
   /* prevent horizontal scroll   */
   scroll-behavior: smooth;
   /* smooth anchor scrolling     */
}

body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--body);
   background: var(--bg);
   font-size: 1rem;
   line-height: 1.7;
   letter-spacing: .1px;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   color: var(--ink);
   line-height: 1.18;
   letter-spacing: -.4px;
   margin: 0;
}

p {
   margin: 0 0 1rem;
}

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

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

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

/* Reusable eyebrow label */
.eyebrow {
   display: inline-block;
   font-family: var(--font-body);
   font-weight: 700;
   font-size: .78rem;
   letter-spacing: 2.4px;
   text-transform: uppercase;
   color: var(--accent-dark);
   margin-bottom: .85rem;
}

.eyebrow--light {
   color: var(--accent);
}

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

.section__head {
   max-width: 720px;
   margin: 0 auto 56px;
}

.section__title {
   font-size: clamp(1.7rem, 3.4vw, 2.2rem);
   font-weight: 800;
}

.section__lead {
   font-size: 1.08rem;
   color: var(--body);
}

.section__lead.mx-auto {
   max-width: 620px;
}

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

.btn-accent {
   background: var(--accent);
   color: #21160a;
   box-shadow: 0 10px 24px rgba(217, 155, 43, .34);
}

.btn-accent:hover {
   background: var(--accent-dark);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 16px 30px rgba(217, 155, 43, .42);
}

.btn-primary {
   background: var(--brand);
   color: #fff;
   border-color: var(--brand);
}

.btn-primary:hover {
   background: var(--brand-dark);
   border-color: var(--brand-dark);
   transform: translateY(-3px);
   box-shadow: var(--shadow);
}

.btn-outline {
   background: transparent;
   color: var(--brand);
   border-color: var(--line);
}

.btn-outline:hover {
   border-color: var(--brand);
   background: var(--brand);
   color: #fff;
}

.btn-ghost {
   background: rgba(255, 255, 255, .12);
   color: #fff;
   border-color: rgba(255, 255, 255, .5);
   backdrop-filter: blur(4px);
}

.btn-ghost:hover {
   background: #fff;
   color: var(--brand);
   border-color: #fff;
}

/* =============================================================
   1. TOP BAR
============================================================= */
.topbar {
   background: var(--brand-dark);
   color: #cdd8e3;
   font-size: .85rem;
}

.topbar__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 9px 0;
   flex-wrap: wrap;
}

.topbar__contacts {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
}

.topbar__link {
   color: #cdd8e3;
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

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

.topbar__link:hover {
   color: #fff;
}

.topbar__social {
   display: flex;
   gap: 14px;
}

.topbar__social a {
   color: #cdd8e3;
   font-size: 1rem;
   transition: transform .3s var(--ease), color .3s;
}

.topbar__social a:hover {
   color: var(--accent);
   transform: translateY(-2px);
}

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

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

.navbar {
   padding: .55rem 0;
}

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

.brand__mark {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--brand), var(--brand-soft));
   color: var(--accent);
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.4rem;
   box-shadow: var(--shadow-sm);
}

.brand__text {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.28rem;
   color: var(--ink);
   line-height: 1;
   letter-spacing: .5px;
   display: flex;
   flex-direction: column;
}

.brand__text small {
   font-family: var(--font-body);
   font-weight: 500;
   font-size: .66rem;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   color: var(--muted);
   margin-top: 4px;
}

/* Nav links */
.navbar-nav .nav-link {
   font-weight: 600;
   color: var(--ink);
   padding: .5rem .95rem;
   position: relative;
}

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

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

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

.nav-cta {
   color: #21160a !important;
   padding: .6rem 1.35rem !important;
}

.nav-cta::after {
   display: none;
}

/* =============================================================
   3. HERO CAROUSEL (content on the side)
============================================================= */
.hero {
   position: relative;
   min-height: 660px;
   display: flex;
   align-items: center;
   overflow: hidden;
}

.hero__slides {
   position: absolute;
   inset: 0;
}

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

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

/* Gradient overlay — darker on the left so side content stays readable */
.hero__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(0, 0, 0, 0.562) 0%, rgba(0, 0, 0, 0.473) 40%, rgba(0, 0, 0, 0.144) 75%, rgba(9, 26, 44, .15) 100%);
}

.hero__container {
   position: relative;
   z-index: 2;
}

.hero__content {
   max-width: 620px;
   color: #eaf1f8;
   padding: 40px 14px;
}

.hero__title {
   font-size: clamp(2.1rem, 5vw, 3.5rem);
   font-weight: 800;
   color: #fff;
   margin-bottom: 1.1rem;
}

.hero__lead {
   font-size: 1.15rem;
   color: #d3deea;
   margin-bottom: 1.8rem;
   max-width: 540px;
}

.hero__cta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 1.8rem;
}

.hero__points {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
}

.hero__points li {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 500;
   color: #e7eef6;
   font-size: .95rem;
}

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

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

.float-icon--1 {
   top: 18%;
   right: 12%;
   font-size: 4.5rem;
}

.float-icon--2 {
   bottom: 20%;
   right: 26%;
   font-size: 3rem;
   animation-delay: 1.2s;
}

.float-icon--3 {
   top: 30%;
   right: 34%;
   font-size: 2.4rem;
   animation-delay: 2.4s;
}

@keyframes floaty {

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

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

/* Dots */
.hero__dots {
   position: absolute;
   bottom: 26px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   gap: 10px;
}

.hero__dots button {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, .4);
   cursor: pointer;
   transition: all .3s var(--ease);
   padding: 0;
}

.hero__dots button.is-active {
   background: var(--accent);
   width: 30px;
   border-radius: 6px;
}

/* =============================================================
   3b. IMPORTANT DISCLAIMER (below hero)
============================================================= */
.disclaimer {
   background: var(--bg);
   padding: 44px 0 8px;
}

.disclaimer__box {
   background: var(--accent-soft);
   border: 1px solid #ecd9ac;
   border-left: 5px solid var(--accent);
   border-radius: var(--radius);
   padding: 24px 30px;
   box-shadow: var(--shadow-sm);
}

.disclaimer__title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.05rem;
   font-weight: 800;
   color: #7a5f1e;
   margin-bottom: 10px;
   font-family: var(--font-display);
   letter-spacing: -.2px;
}

.disclaimer__title i {
   color: var(--accent-dark);
   font-size: 1.2rem;
}

.disclaimer__box p {
   margin: 0;
   font-size: .92rem;
   line-height: 1.7;
   color: #6a5a34;
}

.disclaimer__box strong {
   color: #4d4021;
}

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

.marquee__track {
   display: inline-flex;
   align-items: center;
   gap: 26px;
   will-change: transform;
}

.marquee__item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.02rem;
   letter-spacing: .3px;
}

.marquee__item i {
   color: var(--accent);
   font-size: 1.15rem;
}

.marquee__sep {
   color: var(--accent);
   font-size: 1.2rem;
}

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

.about__media {
   position: relative;
   padding: 0 20px 40px 0;
}

.about__img {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

.about__img--main {
   width: 100%;
   aspect-ratio: 4/3.4;
   object-fit: cover;
}

.about__img--sub {
   position: absolute;
   right: -10px;
   bottom: -10px;
   width: 46%;
   aspect-ratio: 4/3;
   object-fit: cover;
   border: 6px solid #fff;
}

.about__badge {
   position: absolute;
   top: 20px;
   left: -14px;
   background: var(--accent);
   color: #21160a;
   border-radius: var(--radius-sm);
   padding: 16px 20px;
   box-shadow: var(--shadow);
   display: flex;
   align-items: center;
   gap: 12px;
}

.about__badge-num {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 2.1rem;
   line-height: 1;
}

.about__badge-num span {
   font-size: 1.1rem;
   vertical-align: super;
}

.about__badge-label {
   font-size: .8rem;
   font-weight: 600;
   line-height: 1.25;
}

.about__stats {
   display: flex;
   gap: 34px;
   flex-wrap: wrap;
   margin-top: 30px;
   padding-top: 26px;
   border-top: 1px solid var(--line);
}

.stat__num {
   display: block;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 2.1rem;
   color: var(--brand);
}

.stat__label {
   font-size: .88rem;
   color: var(--muted);
   font-weight: 500;
}

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

.services__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}

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

/* top accent bar used by the sweep animation */
.service-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease);
}

.service-card.sweep-on::before {
   transform: scaleX(1);
}

.service-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
   border-color: var(--accent-soft);
}

.service-card:hover::before {
   transform: scaleX(1);
}

.service-card__img {
   position: relative;
   aspect-ratio: 16/10;
   overflow: hidden;
}

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

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

.service-card__icon {
   position: absolute;
   bottom: 10px;
   right: 22px;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--brand);
   color: var(--accent);
   display: grid;
   place-items: center;
   font-size: 1.3rem;
   box-shadow: var(--shadow);
}

.service-card__name {
   font-size: 1.18rem;
   font-weight: 700;
   padding: 30px 24px 0;
}

.service-card__text {
   padding: 10px 24px 0;
   color: var(--body);
   font-size: .95rem;
}

.service-card__cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin: 16px 24px 26px;
   font-weight: 700;
   color: var(--brand);
   font-family: var(--font-display);
}

.service-card__cta i {
   transition: transform .3s var(--ease);
}

.service-card__cta:hover {
   color: var(--accent-dark);
}

.service-card__cta:hover i {
   transform: translateX(5px);
}

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

.why__list {
   list-style: none;
   padding: 0;
   margin: 30px 0 0;
   display: grid;
   gap: 22px;
}

.why__item {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   padding: 18px;
   border-radius: var(--radius-sm);
   transition: background .35s var(--ease), transform .35s var(--ease);
}

.why__item:hover {
   background: #fff;
   box-shadow: var(--shadow-sm);
   transform: translateX(6px);
}

.why__ic {
   flex: 0 0 auto;
   width: 52px;
   height: 52px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-size: 1.4rem;
   background: var(--accent-soft);
   color: var(--accent-dark);
   transition: all .35s var(--ease);
}

.why__item:hover .why__ic {
   background: var(--brand);
   color: var(--accent);
   transform: rotate(-6deg);
}

.why__name {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 4px;
}

.why__item p {
   margin: 0;
   font-size: .93rem;
}

.why__media {
   position: relative;
}

.why__media img {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   width: 100%;
   aspect-ratio: 4/4.2;
   object-fit: cover;
}

.why__chip {
   position: absolute;
   background: #fff;
   border-radius: 50px;
   padding: 10px 18px;
   font-weight: 600;
   font-size: .88rem;
   color: var(--brand);
   box-shadow: var(--shadow);
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

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

.why__chip--top {
   top: 26px;
   left: -14px;
   animation: floaty 5s ease-in-out infinite;
}

.why__chip--bottom {
   bottom: 34px;
   right: -14px;
   animation: floaty 5s ease-in-out infinite 1.5s;
}

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

.timeline {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
   position: relative;
}

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

.timeline__step {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 0 6px;
}

.timeline__num {
   width: 68px;
   height: 68px;
   margin: 0 auto 20px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.3rem;
   color: #fff;
   background: var(--brand);
   box-shadow: 0 10px 24px rgba(18, 50, 79, .22);
   border: 4px solid #fff;
   transition: all .4s var(--ease);
}

.timeline__step:hover .timeline__num {
   background: var(--accent);
   color: #21160a;
   transform: translateY(-6px) scale(1.05);
}

.timeline__title {
   font-size: 1.12rem;
   font-weight: 700;
   margin-bottom: 8px;
}

.timeline__body p {
   font-size: .93rem;
   margin: 0;
}

/* =============================================================
   9. SERVICE FEES
============================================================= */
.fees {
   background: var(--bg-tint);
}

.fees .section__head {
   max-width: 700px;
   margin-left: 0;
   margin-right: auto;
}

.fee-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 34px 30px;
   height: 100%;
   box-shadow: var(--shadow-sm);
   transition: transform .4s var(--ease), box-shadow .4s var(--ease);
   position: relative;
}

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

.fee-card__name {
   font-size: 1.4rem;
   font-weight: 800;
   margin-bottom: 6px;
}

.fee-card__for {
   color: var(--muted);
   font-size: .92rem;
   margin-bottom: 22px;
}

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

.fee-card__list li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 0;
   border-bottom: 1px solid var(--line);
   font-size: .96rem;
   color: var(--body);
}

.fee-card__list li:last-child {
   border-bottom: 0;
}

.fee-card__list i {
   color: var(--accent-dark);
   font-size: .8rem;
}

/* Featured tier */
.fee-card--featured {
   border: 2px solid var(--accent);
   box-shadow: var(--shadow-lg);
   transform: translateY(-8px);
}

.fee-card--featured:hover {
   transform: translateY(-14px);
}

.fee-card__badge {
   position: absolute;
   top: 18px;
   right: 18px;
   background: var(--accent);
   color: #21160a;
   font-weight: 700;
   font-size: .74rem;
   letter-spacing: .6px;
   text-transform: uppercase;
   padding: 6px 14px;
   border-radius: 50px;
}

/* Government fee disclaimer */
.fees__note {
   margin-top: 34px;
   background: var(--accent-soft);
   border: 1px solid #ecd9ac;
   border-radius: var(--radius);
   padding: 22px 26px;
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.fees__note i {
   color: var(--accent-dark);
   font-size: 1.4rem;
   flex: 0 0 auto;
   margin-top: 2px;
}

.fees__note p {
   margin: 0;
   font-size: .93rem;
   color: #6a5a34;
}

.fees__note strong {
   color: #4d4021;
}

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

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

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

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

.gallery__item figcaption {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: flex-end;
   padding: 16px;
   color: #fff;
   font-weight: 600;
   font-size: .92rem;
   background: linear-gradient(to top, rgba(9, 26, 44, .82), transparent 60%);
   opacity: 0;
   transform: translateY(10px);
   transition: all .4s var(--ease);
}

.gallery__item:hover img {
   transform: scale(1.1);
}

.gallery__item:hover figcaption {
   opacity: 1;
   transform: translateY(0);
}

/* =============================================================
   11. FAQs
============================================================= */
.faqs {
   background: var(--bg-warm);
}

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

.faq-accordion .accordion-button {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.02rem;
   color: var(--ink);
   padding: 20px 22px;
   background: #fff;
   box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
   color: var(--accent-dark);
   background: var(--accent-soft);
}

.faq-accordion .accordion-button:focus {
   box-shadow: none;
   border-color: transparent;
}

.faq-accordion .accordion-button::after {
   background-size: 1rem;
}

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

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

.testimonials::before {
   content: "\F6B0";
   font-family: "bootstrap-icons";
   position: absolute;
   top: -40px;
   right: 30px;
   font-size: 16rem;
   color: rgba(255, 255, 255, .04);
}

.testi {
   max-width: 860px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
}

.testi__viewport {
   overflow: hidden;
}

.testi__track {
   display: flex;
   transition: transform .6s var(--ease);
}

.testi__card {
   flex: 0 0 100%;
   padding: 40px;
   margin: 0;
   text-align: center;
}

.testi__quote {
   font-size: 2.6rem;
   color: var(--accent);
}

.testi__card blockquote {
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.35rem;
   line-height: 1.55;
   color: #fff;
   margin: 14px auto 26px;
   max-width: 680px;
}

.testi__card figcaption {
   display: inline-flex;
   align-items: center;
   gap: 14px;
}

.testi__card figcaption img {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--accent);
}

.testi__card figcaption span {
   display: flex;
   flex-direction: column;
   text-align: left;
   color: #cdd8e3;
   font-size: .88rem;
}

.testi__card figcaption strong {
   color: #fff;
   font-size: 1rem;
}

.testi__controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-top: 14px;
}

.testi__btn {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .3);
   background: transparent;
   color: #fff;
   cursor: pointer;
   transition: all .3s var(--ease);
   display: grid;
   place-items: center;
}

.testi__btn:hover {
   background: var(--accent);
   border-color: var(--accent);
   color: #21160a;
}

.testi__dots {
   display: flex;
   gap: 8px;
}

.testi__dots button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, .35);
   cursor: pointer;
   padding: 0;
   transition: all .3s var(--ease);
}

.testi__dots button.is-active {
   background: var(--accent);
   width: 26px;
   border-radius: 6px;
}

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

.contact__info {
   list-style: none;
   padding: 0;
   margin: 28px 0;
   display: grid;
   gap: 20px;
}

.contact__info li {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.contact__ic {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--accent-soft);
   color: var(--accent-dark);
   display: grid;
   place-items: center;
   font-size: 1.2rem;
}

.contact__info strong {
   display: block;
   color: var(--ink);
   font-family: var(--font-display);
   margin-bottom: 2px;
}

.contact__info a {
   color: var(--body);
}

.contact__info a:hover {
   color: var(--accent-dark);
}

.contact__map {
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   margin-top: 10px;
}

.contact__map iframe {
   width: 100%;
   height: 220px;
   border: 0;
   display: block;
}

.contact__form {
   background: var(--bg-tint);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 34px;
   box-shadow: var(--shadow-sm);
   height: 100%;
}

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

.contact__form .form-control,
.contact__form .form-select {
   border-radius: var(--radius-sm);
   border: 1px solid var(--line);
   padding: .72rem .9rem;
   font-size: .95rem;
   transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.contact__form .form-control:focus,
.contact__form .form-select:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(217, 155, 43, .16);
}

.contact__feedback {
   margin: 16px 0 0;
   font-weight: 600;
   font-size: .92rem;
}

.contact__feedback.is-success {
   color: #1f8a4c;
}

.contact__feedback.is-error {
   color: #c0392b;
}

/* =============================================================
   15. FOOTER
============================================================= */
.footer {
   background: var(--brand-dark);
   color: #a9b8c7;
   padding: 70px 0 26px;
}

.footer__top {
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
}

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

.brand--footer .brand__text small {
   color: #8ea1b4;
}

.footer__about {
   margin: 20px 0;
   font-size: .92rem;
}

.footer__social {
   display: flex;
   gap: 12px;
}

.footer__social a {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .07);
   color: #cdd8e3;
   display: grid;
   place-items: center;
   transition: all .3s var(--ease);
}

.footer__social a:hover {
   background: var(--accent);
   color: #21160a;
   transform: translateY(-3px);
}

.footer__title {
   color: #fff;
   font-size: 1.05rem;
   font-weight: 700;
   margin-bottom: 18px;
}

.footer__links,
.footer__contact {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer__links li {
   margin-bottom: 11px;
}

.footer__links a {
   color: #a9b8c7;
   font-size: .93rem;
}

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

.footer__contact li {
   display: flex;
   gap: 10px;
   margin-bottom: 14px;
   font-size: .9rem;
}

.footer__contact i {
   color: var(--accent);
   margin-top: 3px;
}

.footer__contact a {
   color: #a9b8c7;
}

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

.footer__bottom {
   padding-top: 22px;
   text-align: center;
}

.footer__bottom p {
   margin: 0 0 6px;
   font-size: .86rem;
}

.footer__disclaimer {
   color: #6f8194;
   font-size: .8rem;
}

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

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

.floating-btn--whatsapp {
   left: 26px;
   background: var(--wa);
   animation: pulse-wa 2s infinite;
}

.floating-btn--call {
   right: 26px;
   background: var(--brand);
   animation: pulse-call 2s infinite;
}

@keyframes pulse-wa {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
   }

   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 pulse-call {
   0% {
      box-shadow: 0 0 0 0 rgba(18, 50, 79, .5);
   }

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

   100% {
      box-shadow: 0 0 0 0 rgba(18, 50, 79, 0);
   }
}

.to-top {
   position: fixed;
   bottom: 92px;
   right: 26px;
   z-index: 1040;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 0;
   background: var(--accent);
   color: #21160a;
   font-size: 1.1rem;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: all .35s var(--ease);
   box-shadow: var(--shadow);
}

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

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

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

[data-reveal].is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991.98px) {
   .section {
      padding: 70px 0;
   }

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

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

   .nav-cta {
      display: inline-block;
      margin-top: 8px;
   }

   .hero {
      min-height: 560px;
   }

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

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

   .timeline::before {
      display: none;
   }

   .about__media {
      padding-bottom: 30px;
      margin-bottom: 20px;
   }

   .fee-card--featured {
      transform: none;
   }

   .why__media {
      margin-top: 20px;
      max-width: 480px;
   }
}

@media (max-width: 767.98px) {
	.cu-ds-nn{
		display:none!IMPORTANT
	}
   .topbar__contacts {
      gap: 14px;
      font-size: .8rem;
   }

   .topbar__inner {
      justify-content: center;
   }

   .hero__cta {
      flex-direction: column;
      align-items: stretch;
   }

   .hero__points {
      gap: 12px;
   }

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

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

   /* 2 per row on mobile */
   .testi__card {
      padding: 24px 6px;
   }

   .testi__card blockquote {
      font-size: 1.12rem;
   }

   .about__stats {
      gap: 22px;
   }

   .float-icon {
      display: none;
   }

   .floating-btn {
      width: 50px;
      height: 50px;
      font-size: 1.3rem;
   }
}

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

   .about__img--sub {
      width: 42%;
   }

   .brand__text {
      font-size: 1.1rem;
   }
}

/* =============================================================
   ACCESSIBILITY — visible keyboard focus
============================================================= */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 2px;
}
@media(max-width:374px)
{
	.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
}