/* =========================================================================
   ASTHA TEMPLE TOUR — style.css
   Nepal pilgrimage & temple tour landing page
   Brand colours derived from the logo: crimson #d81848 + royal navy #243090
   A warm marigold accent (#f4a522) brings the devotional, temple-aarti warmth.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. EDITABLE THEME VARIABLES  (change colours / spacing here)
   ------------------------------------------------------------------------- */
:root {
   /* Brand */
   --crimson: #d81848;
   --crimson-dark: #b3123b;
   --navy: #243090;
   --navy-dark: #1a2470;
   --marigold: #f4a522;
   /* saffron / devotional accent */
   --marigold-soft: #fce5c4;

   /* Neutrals & surfaces */
   --ink: #21233a;
   /* body text */
   --muted: #5f6377;
   /* secondary text */
   --cream: #fdfaf3;
   /* warm page background */
   --cream-2: #f6f0e4;
   /* alt section background */
   --sky: #eef1fb;
   /* pale navy-tinted section */
   --white: #ffffff;
   --line: #ece5d6;
   /* hairline borders */

   /* Gradients */
   --grad-brand: linear-gradient(120deg, var(--crimson) 0%, var(--crimson-dark) 100%);
   --grad-navy: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
   --grad-topbar: linear-gradient(90deg, var(--navy) 0%, var(--crimson) 100%);

   /* Typography */
   --font-display: "Fraunces", Georgia, "Times New Roman", serif;
   --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

   /* Shape & depth */
   --radius: 14px;
   --radius-lg: 22px;
   --radius-pill: 999px;
   --shadow-sm: 0 4px 14px rgba(33, 35, 58, .06);
   --shadow-md: 0 14px 34px rgba(33, 35, 58, .10);
   --shadow-lg: 0 28px 60px rgba(33, 35, 58, .16);
   --shadow-brand: 0 14px 30px rgba(216, 24, 72, .28);

   /* Layout */
   --maxw: 1200px;
   --ease: cubic-bezier(.22, .61, .36, 1);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.container,
.container-fluid {
  overflow: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

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

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

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

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

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

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

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.18;
   color: var(--navy);
   margin: 0;
}

::selection {
   background: var(--crimson);
   color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
   width: 11px;
}

::-webkit-scrollbar-track {
   background: var(--cream-2);
}

::-webkit-scrollbar-thumb {
   background: var(--navy);
   border-radius: 10px;
   border: 2px solid var(--cream-2);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--crimson);
}

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

/* -------------------------------------------------------------------------
   3. SHARED COMPONENTS — eyebrow, headings, buttons
   ------------------------------------------------------------------------- */
.att-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-family: var(--font-body);
   font-weight: 700;
   font-size: .78rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--crimson);
   background: var(--marigold-soft);
   padding: .42rem .9rem;
   border-radius: var(--radius-pill);
   margin-bottom: 1.1rem;
}

.att-eyebrow i {
   color: var(--marigold);
   font-size: .9rem;
}

.att-eyebrow--center {
   margin-inline: auto;
}

.att-eyebrow--light {
   background: rgba(255, 255, 255, .14);
   color: #fff;
   backdrop-filter: blur(4px);
}

.att-eyebrow--light i {
   color: var(--marigold);
}

.att-heading {
   font-size: clamp(1.9rem, 4vw, 3rem);
   font-weight: 600;
   letter-spacing: -.01em;
   margin-bottom: 1rem;
}

.att-heading__accent {
   color: var(--crimson);
   font-style: italic;
   position: relative;
}

.att-lead {
   font-size: 1.12rem;
   color: var(--ink);
   font-weight: 500;
   margin-bottom: 1rem;
}

.att-body {
   color: var(--muted);
   margin-bottom: 1.2rem;
}

/* Buttons */
.att-btn {
   --btn-bg: var(--crimson);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .55rem;
   font-family: var(--font-body);
   font-weight: 700;
   font-size: .95rem;
   padding: .85rem 1.6rem;
   border-radius: var(--radius-pill);
   border: 2px solid transparent;
   cursor: pointer;
   transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
   white-space: nowrap;
}

.att-btn i {
   font-size: 1.05em;
}

.att-btn--primary {
   background: var(--grad-brand);
   color: #fff;
   box-shadow: var(--shadow-brand);
}

.att-btn--primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 38px rgba(216, 24, 72, .38);
   color: #fff;
}

.att-btn--outline {
   background: transparent;
   color: var(--navy);
   border-color: var(--navy);
}

.att-btn--outline:hover {
   background: var(--navy);
   color: #fff;
   transform: translateY(-3px);
}

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

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

.att-btn--lg {
   padding: 1rem 2rem;
   font-size: 1.02rem;
}

.att-btn--sm {
   padding: .55rem 1.15rem;
   font-size: .85rem;
}

/* -------------------------------------------------------------------------
   4. TOP BAR
   ------------------------------------------------------------------------- */
.att-topbar {
   background: var(--grad-topbar);
   color: #fff;
   font-size: .85rem;
}

.att-topbar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: .5rem 0;
   flex-wrap: wrap;
}

.att-topbar__contacts {
   display: flex;
   align-items: center;
   gap: 1.4rem;
   flex-wrap: wrap;
}

.att-topbar__link {
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   color: rgba(255, 255, 255, .92);
   font-weight: 500;
}

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

.att-topbar__link:hover {
   color: #fff;
}

.att-topbar__link--muted i {
   color: rgba(255, 255, 255, .7);
}

.att-topbar__socials {
   display: flex;
   align-items: center;
   gap: .85rem;
}

.att-topbar__note {
   color: rgba(255, 255, 255, .85);
   font-style: italic;
   font-size: .8rem;
   margin-right: .3rem;
}

.att-topbar__socials a {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   color: #fff;
   transition: .3s var(--ease);
}

.att-topbar__socials a:hover {
   background: #fff;
   color: var(--crimson);
   transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   5. STICKY HEADER / NAV
   ------------------------------------------------------------------------- */
.att-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: rgba(253, 250, 243, .92);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--line);
   transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}

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

.att-navbar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.att-brand {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   padding: 0;
}

.att-brand__img {
   height: 60px;
   width: auto;
   transition: transform .3s var(--ease);
}

.att-brand:hover .att-brand__img {
   transform: scale(1.04);
}

/* Fallback text wordmark — shows if logo image is missing */
.att-brand__fallback {
   display: none;
   line-height: 1;
}

.att-brand__name {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.5rem;
   color: var(--navy);
}

.att-brand__sub {
   display: block;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--crimson);
   letter-spacing: .02em;
}

.att-nav {
   align-items: center;
}

.att-nav__list {
   display: flex;
   gap: .2rem;
   margin-left: auto;
}

.att-nav__link {
   position: relative;
   font-weight: 600;
   font-size: .96rem;
   color: var(--ink);
   padding: .55rem .95rem;
   border-radius: var(--radius-pill);
}

.att-nav__link::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: .35rem;
   width: 0;
   height: 2px;
   background: var(--crimson);
   transition: width .3s var(--ease), left .3s var(--ease);
}

.att-nav__link:hover,
.att-nav__link.active {
   color: var(--crimson);
}

.att-nav__link:hover::after,
.att-nav__link.active::after {
   width: 40%;
   left: 30%;
}

.att-nav__cta {
   margin-left: 1rem;
}

/* Custom hamburger */
.att-toggler {
   border: none;
   background: var(--navy);
   width: 46px;
   height: 42px;
   border-radius: 12px;
   display: grid;
   gap: 5px;
   place-content: center;
   padding: 0;
}

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

.att-toggler__bar {
   width: 22px;
   height: 2.5px;
   background: #fff;
   border-radius: 4px;
   transition: .3s var(--ease);
}

.att-toggler[aria-expanded="true"] .att-toggler__bar:nth-child(1) {
   transform: translateY(7.5px) rotate(45deg);
}

.att-toggler[aria-expanded="true"] .att-toggler__bar:nth-child(2) {
   opacity: 0;
}

.att-toggler[aria-expanded="true"] .att-toggler__bar:nth-child(3) {
   transform: translateY(-7.5px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   6. HERO CAROUSEL
   ------------------------------------------------------------------------- */
.att-hero {
   position: relative;
}

.att-hero__carousel {
   position: relative;
   height: clamp(560px, 88vh, 820px);
   overflow: hidden;
}

.att-hero__slide {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: scale(1.08);
   transition: opacity 1.1s var(--ease), transform 6s ease-out;
   pointer-events: none;
}

.att-hero__slide.is-active {
   opacity: 1;
   transform: scale(1);
   pointer-events: auto;
}

/* Slide background images — replace these paths with your photos */
.att-hero__slide--1 {
   background-image: url("../images/b1.jpg");
   background-color: #2a2f55;
}

.att-hero__slide--2 {
   background-image: url("../images/b2.png");
   background-color: #3a2030;
}

.att-hero__slide--3 {
   background-image: url("../images/b3.jpg");
   background-color: #1e3050;
}

.att-hero__veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(0, 0, 0, 0.86) 0%, rgba(13, 19, 61, 0.55) 45%, rgba(49, 5, 16, 0.35) 100%);
}

.att-hero__content {
   position: relative;
   z-index: 2;
   color: #fff;
   padding-block: 2rem;
}

.att-hero__title {
   font-size: clamp(2.2rem, 5.4vw, 4rem);
   font-weight: 600;
   color: #fff;
   letter-spacing: -.015em;
   margin-bottom: 1.1rem;
   max-width: 660px;
}

.att-hero__title em {
   color: var(--marigold);
   font-style: italic;
}

.att-hero__text {
   font-size: clamp(1rem, 1.8vw, 1.18rem);
   color: rgba(255, 255, 255, .92);
   max-width: 560px;
   margin-bottom: 1.8rem;
}

.att-hero__actions {
   display: flex;
   gap: .9rem;
   flex-wrap: wrap;
}

/* Carousel nav arrows */
.att-hero__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 4;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .5);
   background: rgba(255, 255, 255, .12);
   color: #fff;
   font-size: 1.3rem;
   display: grid;
   place-items: center;
   cursor: pointer;
   backdrop-filter: blur(6px);
   transition: .3s var(--ease);
}

.att-hero__nav:hover {
   background: #fff;
   color: var(--navy);
   border-color: #fff;
}

.att-hero__nav--prev {
   left: 22px;
}

.att-hero__nav--next {
   right: 22px;
}

/* Dots */
.att-hero__dots {
   position: absolute;
   bottom: 92px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 4;
   display: flex;
   gap: .55rem;
}

.att-hero__dot {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .45);
   cursor: pointer;
   transition: .3s var(--ease);
}

.att-hero__dot.is-active {
   background: var(--marigold);
   width: 30px;
   border-radius: 6px;
}

/* Floating trust chip */
.att-hero__chip {
   position: absolute;
   bottom: -42px;
   left: 0;
   right: 0;
   margin-inline: auto;
   width: fit-content;
   max-width: calc(100% - 2rem);
   z-index: 6;
   display: flex;
   align-items: center;
   gap: 1.4rem;
   background: #fff;
   padding: 1.1rem 1.8rem;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--line);
}

.att-hero__chip-item {
   text-align: center;
}

.att-hero__chip-item strong {
   display: block;
   font-family: var(--font-display);
   font-size: 1.7rem;
   color: var(--navy);
   line-height: 1;
}

.att-hero__chip-item span {
   font-size: .78rem;
   color: var(--muted);
   font-weight: 500;
}

.att-hero__chip-line {
   width: 1px;
   height: 38px;
   background: var(--line);
}

/* Himalayan ridge divider (signature) */
.att-ridge {
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 90px;
   z-index: 3;
   display: block;
}

/* -------------------------------------------------------------------------
   7. MARQUEE
   ------------------------------------------------------------------------- */
.att-marquee {
   background: var(--grad-navy);
   padding: .95rem 0;
   overflow: hidden;
   position: relative;
}

.att-marquee::before,
.att-marquee::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 90px;
   z-index: 2;
}

.att-marquee::before {
   left: 0;
   background: linear-gradient(90deg, var(--navy), transparent);
}

.att-marquee::after {
   right: 0;
   background: linear-gradient(270deg, var(--navy-dark), transparent);
}

.att-marquee__track {
   display: flex;
   align-items: center;
   gap: 1.4rem;
   white-space: nowrap;
   will-change: transform;
}

.att-marquee__item {
   font-family: var(--font-display);
   font-weight: 500;
   font-style: italic;
   font-size: 1.35rem;
   color: #fff;
}

.att-marquee__diya {
   color: var(--marigold);
   font-size: .9rem;
   display: inline-flex;
}

/* -------------------------------------------------------------------------
   8. SECTION SCAFFOLD
   ------------------------------------------------------------------------- */
.att-section {
   padding: 5.5rem 0;
   position: relative;
}

.att-section__head {
   max-width: 720px;
   margin-bottom: 3rem;
}

.att-section__head.text-center {
   margin-inline: auto;
}

.att-section__sub {
   color: var(--muted);
   font-size: 1.05rem;
   margin: 0;
}

/* -------------------------------------------------------------------------
   9. ABOUT
   ------------------------------------------------------------------------- */
.att-about {
   background: var(--cream);
}

.att-about__media {
   position: relative;
   padding-bottom: 2rem;
   padding-right: 2rem;
}

.att-about__img {
   border-radius: var(--radius-lg);
   object-fit: cover;
}

.att-about__img--main {
   width: 100%;
   height: 460px;
   box-shadow: var(--shadow-md);
}

.att-about__img--float {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 52%;
   height: 230px;
   border: 6px solid #fff;
   box-shadow: var(--shadow-lg);
}

.att-about__badge {
   position: absolute;
   top: 22px;
   left: -14px;
   background: var(--grad-brand);
   color: #fff;
   display: flex;
   align-items: center;
   gap: .65rem;
   padding: .8rem 1.1rem;
   border-radius: 14px;
   box-shadow: var(--shadow-brand);
}

.att-about__badge i {
   font-size: 1.7rem;
   color: var(--marigold);
}

.att-about__badge strong {
   display: block;
   font-family: var(--font-body);
   font-size: .95rem;
}

.att-about__badge span {
   font-size: .76rem;
   opacity: .9;
}

.att-about__points {
   margin: 1.3rem 0 1.8rem;
   display: grid;
   gap: .7rem;
}

.att-about__points li {
   display: flex;
   align-items: flex-start;
   gap: .65rem;
   font-weight: 500;
   color: var(--ink);
}

.att-about__points i {
   color: var(--crimson);
   font-size: 1.15rem;
   margin-top: .15rem;
}

.att-about__cta {
   display: flex;
   gap: .8rem;
   flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   10. TOURS / SERVICES
   ------------------------------------------------------------------------- */
.att-tours {
   background: var(--sky);
}

.att-tour {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--line);
   box-shadow: var(--shadow-sm);
   transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

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

.att-tour__media {
   position: relative;
   height: 215px;
   overflow: hidden;
   background: var(--cream-2);
}

.att-tour__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .7s var(--ease);
}

.att-tour:hover .att-tour__img {
   transform: scale(1.09);
}

.att-tour__duration {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(26, 36, 112, .9);
   color: #fff;
   font-size: .78rem;
   font-weight: 700;
   padding: .35rem .75rem;
   border-radius: var(--radius-pill);
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   backdrop-filter: blur(4px);
}

.att-tour__value {
   position: absolute;
   top: 14px;
   right: 14px;
   background: var(--marigold);
   color: var(--navy-dark);
   font-size: .72rem;
   font-weight: 800;
   padding: .35rem .7rem;
   border-radius: var(--radius-pill);
   text-transform: uppercase;
   letter-spacing: .04em;
}

.att-tour__value--lux {
   background: var(--grad-brand);
   color: #fff;
   display: inline-flex;
   align-items: center;
   gap: .3rem;
}

.att-tour__body {
   padding: 1.4rem 1.5rem 1.5rem;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.att-tour__route {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   font-size: .8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--crimson);
   margin-bottom: .5rem;
}

.att-tour__title {
   font-size: 1.28rem;
   line-height: 1.3;
   margin-bottom: .9rem;
   color: var(--navy);
}

.att-tour__highlights {
   display: grid;
   gap: .35rem;
   margin-bottom: 1.2rem;
}

.att-tour__highlights li {
   display: flex;
   align-items: flex-start;
   gap: .35rem;
   font-size: .92rem;
   color: var(--muted);
}

.att-tour__highlights i {
   color: var(--marigold);
   font-size: 1.3rem;
   line-height: 1;
   margin-top: -.1rem;
}

.att-tour__foot {
   margin-top: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 1rem;
   border-top: 1px dashed var(--line);
}

.att-tour__price {
   display: flex;
   flex-direction: column;
   line-height: 1.1;
}

.att-tour__price span {
   font-size: .72rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--muted);
}

.att-tour__price strong {
   font-family: var(--font-display);
   font-size: 1.5rem;
   color: var(--crimson);
}

.att-tour__price small {
   font-size: .72rem;
   color: var(--muted);
}

.att-tour--premium {
   border-color: var(--marigold);
   box-shadow: 0 10px 30px rgba(244, 165, 34, .18);
}

.att-tours__note {
   margin-top: 2.2rem;
   color: var(--muted);
   font-size: 1rem;
}

.att-tours__note a {
   color: var(--crimson);
   font-weight: 700;
}

.att-tours__note a:hover {
   color: var(--navy);
}

/* Inclusions strip */
.att-inclusions {
   margin-top: 3rem;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 2rem;
   box-shadow: var(--shadow-sm);
}

.att-inclusions__title {
   text-align: center;
   font-size: 1.3rem;
   margin-bottom: 1.5rem;
   color: var(--navy);
}

.att-inclusion {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: .5rem;
   padding: .8rem .5rem;
   border-radius: var(--radius);
   transition: background .3s var(--ease);
}

.att-inclusion:hover {
   background: var(--sky);
}

.att-inclusion i {
   font-size: 1.7rem;
   color: var(--navy);
}

.att-inclusion span {
   font-size: .85rem;
   font-weight: 600;
   color: var(--ink);
}

/* -------------------------------------------------------------------------
   11. WHY CHOOSE US
   ------------------------------------------------------------------------- */
.att-why {
   background: var(--cream);
}

.att-feature {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 2rem 1.7rem;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.att-feature::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--grad-brand);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s var(--ease);
}

.att-feature:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
   border-color: transparent;
}

.att-feature:hover::before {
   transform: scaleX(1);
}

.att-feature__icon {
   width: 62px;
   height: 62px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   font-size: 1.6rem;
   color: #fff;
   background: var(--grad-navy);
   margin-bottom: 1.1rem;
   transition: transform .4s var(--ease);
}

.att-feature:hover .att-feature__icon {
   transform: rotate(-6deg) scale(1.05);
   background: var(--grad-brand);
}

.att-feature__title {
   font-size: 1.2rem;
   margin-bottom: .55rem;
   color: var(--navy);
}

.att-feature p {
   color: var(--muted);
   font-size: .94rem;
   margin: 0;
}

/* -------------------------------------------------------------------------
   12. HOW IT WORKS
   ------------------------------------------------------------------------- */
.att-steps {
   background: var(--grad-navy);
   color: #fff;
}

.att-steps .att-heading,
.att-steps .att-heading__accent {
   color: #fff;
}

.att-steps .att-heading__accent {
   color: var(--marigold);
}

.att-steps .att-eyebrow {
   background: rgba(255, 255, 255, .12);
   color: #fff;
}

.att-steps .att-eyebrow i {
   color: var(--marigold);
}

.att-steps__track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   position: relative;
}

.att-step {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius-lg);
   padding: 2.2rem 1.5rem 1.8rem;
   position: relative;
   text-align: center;
   transition: transform .4s var(--ease), background .4s var(--ease);
}

.att-step:hover {
   transform: translateY(-6px);
   background: rgba(255, 255, 255, .1);
}

.att-step__num {
   position: absolute;
   top: 1rem;
   right: 1.2rem;
   font-family: var(--font-display);
   font-size: 2.6rem;
   font-weight: 700;
   color: rgba(255, 255, 255, .12);
}

.att-step__icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 1.7rem;
   background: var(--grad-brand);
   color: #fff;
   margin: 0 auto 1.1rem;
   box-shadow: var(--shadow-brand);
}

.att-step__title {
   color: #fff;
   font-size: 1.18rem;
   margin-bottom: .5rem;
}

.att-step p {
   color: rgba(255, 255, 255, .78);
   font-size: .92rem;
   margin: 0;
}

/* -------------------------------------------------------------------------
   13. GALLERY
   ------------------------------------------------------------------------- */
.att-gallery {
   background: var(--cream);
}

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

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

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

.att-gallery__item::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(26, 36, 112, .55), transparent 55%);
   opacity: 0;
   transition: opacity .4s var(--ease);
}

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

.att-gallery__item:hover::after {
   opacity: 1;
}

.att-gallery__zoom {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(.6);
   z-index: 2;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: var(--crimson);
   display: grid;
   place-items: center;
   font-size: 1.2rem;
   opacity: 0;
   transition: .4s var(--ease);
}

.att-gallery__item:hover .att-gallery__zoom {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}

/* Lightbox */
.att-lightbox {
   position: fixed;
   inset: 0;
   z-index: 2000;
   background: rgba(15, 18, 40, .92);
   display: none;
   align-items: center;
   justify-content: center;
   padding: 2rem;
}

.att-lightbox.is-open {
   display: flex;
   animation: fadeIn .3s var(--ease);
}

.att-lightbox__img {
   max-width: 90vw;
   max-height: 85vh;
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
}

.att-lightbox__close {
   position: absolute;
   top: 24px;
   right: 30px;
   background: none;
   border: none;
   color: #fff;
   font-size: 2.6rem;
   line-height: 1;
   cursor: pointer;
   transition: transform .3s var(--ease);
}

.att-lightbox__close:hover {
   transform: rotate(90deg);
   color: var(--marigold);
}

/* -------------------------------------------------------------------------
   14. TESTIMONIALS SLIDER
   ------------------------------------------------------------------------- */
.att-testi {
   background: var(--cream-2);
}

.att-testi__slider {
   overflow: hidden;
}

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

.att-testi__card {
   flex: 0 0 100%;
   max-width: 100%;
   padding: 2.5rem 2.2rem;
   margin: 0;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--line);
   box-shadow: var(--shadow-sm);
   text-align: center;
}

.att-testi__stars {
   color: var(--marigold);
   font-size: 1rem;
   margin-bottom: 1rem;
   display: flex;
   gap: .2rem;
   justify-content: center;
}

.att-testi__card blockquote {
   font-family: var(--font-display);
   font-size: clamp(1.2rem, 2.4vw, 1.6rem);
   font-style: italic;
   color: var(--navy);
   line-height: 1.5;
   margin: 0 auto 1.5rem;
   max-width: 760px;
}

.att-testi__card figcaption {
   display: inline-flex;
   align-items: center;
   gap: .8rem;
}

.att-testi__avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--grad-brand);
   color: #fff;
   font-family: var(--font-display);
   font-size: 1.3rem;
   display: grid;
   place-items: center;
}

.att-testi__card figcaption strong {
   display: block;
   color: var(--navy);
   font-family: var(--font-body);
}

.att-testi__card figcaption small {
   color: var(--muted);
}

.att-testi__controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.2rem;
   margin-top: 1.8rem;
}

.att-testi__btn {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 2px solid var(--navy);
   background: transparent;
   color: var(--navy);
   font-size: 1.1rem;
   cursor: pointer;
   display: grid;
   place-items: center;
   transition: .3s var(--ease);
}

.att-testi__btn:hover {
   background: var(--navy);
   color: #fff;
}

.att-testi__dots {
   display: flex;
   gap: .5rem;
}

.att-testi__dots button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   background: rgba(36, 48, 144, .25);
   cursor: pointer;
   transition: .3s var(--ease);
}

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

/* -------------------------------------------------------------------------
   15. FAQ
   ------------------------------------------------------------------------- */
.att-faq {
   background: var(--cream);
}

.att-faq__help {
   display: flex;
   align-items: center;
   gap: 1rem;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 1.1rem 1.3rem;
   margin-top: 1.5rem;
   box-shadow: var(--shadow-sm);
}

.att-faq__help i {
   font-size: 1.8rem;
   color: var(--crimson);
}

.att-faq__help strong {
   display: block;
   color: var(--navy);
}

.att-faq__help a {
   color: var(--crimson);
   font-weight: 700;
   font-size: 1.1rem;
}

.att-accordion__item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   margin-bottom: .8rem;
   overflow: hidden;
   transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.att-accordion__item.is-open {
   box-shadow: var(--shadow-md);
   border-color: var(--crimson);
}

.att-accordion__head {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   padding: 1.15rem 1.3rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 1.02rem;
   color: var(--navy);
   cursor: pointer;
}

.att-accordion__head i {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--sky);
   color: var(--crimson);
   display: grid;
   place-items: center;
   font-size: .9rem;
   transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.att-accordion__item.is-open .att-accordion__head i {
   transform: rotate(135deg);
   background: var(--crimson);
   color: #fff;
}

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

.att-accordion__body p {
   padding: 0 1.3rem 1.2rem;
   margin: 0;
   color: var(--muted);
}

/* -------------------------------------------------------------------------
   16. CONTACT
   ------------------------------------------------------------------------- */
.att-contact {
   background: var(--sky);
}

.att-contact__info {
   background: var(--grad-navy);
   color: #fff;
   border-radius: var(--radius-lg);
   padding: 2.4rem 2rem;
   height: 100%;
   box-shadow: var(--shadow-md);
}

.att-contact__title {
   color: #fff;
   font-size: 1.6rem;
   margin-bottom: .4rem;
}

.att-contact__lead {
   color: rgba(255, 255, 255, .85);
   margin-bottom: 1.6rem;
}

.att-contact__row {
   display: flex;
   align-items: flex-start;
   gap: .9rem;
   padding: .8rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
   color: #fff;
}

.att-contact__row:last-of-type {
   border-bottom: none;
}

.att-contact__ico {
   flex: 0 0 auto;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .12);
   display: grid;
   place-items: center;
   font-size: 1.2rem;
   color: var(--marigold);
   transition: .3s var(--ease);
}

.att-contact__row:hover .att-contact__ico {
   background: var(--crimson);
   color: #fff;
}

.att-contact__row span:last-child {
   display: flex;
   flex-direction: column;
   font-size: .95rem;
}

.att-contact__row strong {
   font-family: var(--font-body);
   font-size: .8rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: rgba(255, 255, 255, .6);
   font-weight: 700;
}

.att-contact__socials {
   display: flex;
   gap: .7rem;
   margin-top: 1.5rem;
}

.att-contact__socials a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   display: grid;
   place-items: center;
   color: #fff;
   transition: .3s var(--ease);
}

.att-contact__socials a:hover {
   background: var(--marigold);
   color: var(--navy-dark);
   transform: translateY(-3px);
}

.att-form {
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 2.2rem;
   box-shadow: var(--shadow-md);
   border: 1px solid var(--line);
   height: 100%;
}

.att-form__label {
   font-size: .85rem;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: .35rem;
   display: block;
}

.att-form__input {
   width: 100%;
   padding: .8rem 1rem;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   font-family: var(--font-body);
   font-size: .95rem;
   color: var(--ink);
   background: var(--cream);
   transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.att-form__input:focus {
   outline: none;
   border-color: var(--crimson);
   background: #fff;
   box-shadow: 0 0 0 4px rgba(216, 24, 72, .1);
}

.att-form__input::placeholder {
   color: #a7a9b8;
}

textarea.att-form__input {
   resize: vertical;
}

.att-form__submit {
   width: 100%;
   margin-top: .4rem;
}

.att-form__note {
   margin: .9rem 0 0;
   font-size: .9rem;
   font-weight: 600;
   text-align: center;
   min-height: 1.2rem;
}

.att-form__note.is-ok {
   color: #1a8f4a;
}

.att-form__note.is-err {
   color: var(--crimson);
}

.att-form__input.is-invalid {
   border-color: var(--crimson);
}

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.att-footer {
   background: #15173a;
   color: rgba(255, 255, 255, .7);
   padding: 3.5rem 0 1.5rem;
}

.att-footer__brand {
   display: inline-flex;
   align-items: center;
   margin-bottom: 1rem;
}

.att-footer__logo {
   height: 50px;
   width: auto;
}

.att-footer__brand-wordmark {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   color: #fff;
}

.att-footer__brand-wordmark em {
   color: var(--crimson);
   font-style: italic;
}

.att-footer__about {
   font-size: .92rem;
   line-height: 1.7;
   max-width: 330px;
}

.att-footer__socials {
   display: flex;
   gap: .65rem;
   margin-top: 1.2rem;
}

.att-footer__socials a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: .3s var(--ease);
}

.att-footer__socials a:hover {
   background: var(--crimson);
   transform: translateY(-3px);
}

.att-footer__head {
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 1.1rem;
   font-family: var(--font-body);
   font-weight: 700;
}

.att-footer__links li,
.att-footer__contact li {
   margin-bottom: .6rem;
   font-size: .92rem;
}

.att-footer__links a:hover {
   color: var(--marigold);
   padding-left: 4px;
}

.att-footer__contact li {
   display: flex;
   align-items: flex-start;
   gap: .55rem;
}

.att-footer__contact i {
   color: var(--marigold);
   margin-top: .2rem;
}

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

.att-footer__bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
   margin-top: 2.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid rgba(255, 255, 255, .1);
   font-size: .85rem;
}

.att-footer__bottom p {
   margin: 0;
}

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

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

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

.att-float--call {
   right: 24px;
   background: var(--grad-brand);
}

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

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

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

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

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

   100% {
      opacity: 0;
   }
}

.att-top {
   position: fixed;
   right: 24px;
   bottom: 92px;
   z-index: 1400;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   border: none;
   background: var(--navy);
   color: #fff;
   font-size: 1.1rem;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: .35s var(--ease);
}

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

.att-top:hover {
   background: var(--crimson);
}

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

.reveal[data-reveal="left"],
.reveal[data-reveal="right"] {
   transform: translateY(34px);
}

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

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* -------------------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------------------- */
/* Desktop: ensure the mobile menu button never shows (also a fallback if the
   Bootstrap navbar-expand class is unavailable for any reason) */
@media (min-width: 992px) {
   .att-navbar .att-toggler {
      display: none !important;
   }
}

@media (max-width: 991.98px) {
   .att-nav {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      margin-top: .8rem;
      padding: 1rem;
      box-shadow: var(--shadow-md);
   }

   .att-nav__list {
      flex-direction: column;
      gap: .15rem;
      margin-left: 0;
   }

   .att-nav__link {
      padding: .7rem .9rem;
   }

   .att-nav__link::after {
      display: none;
   }

   .att-nav__cta {
      margin-left: 0;
      margin-top: .8rem;
      width: 100%;
   }

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

   .att-about__media {
      padding-right: 0;
   }

   .att-hero__chip {
      gap: .9rem;
      padding: .9rem 1.2rem;
      width: 92%;
      justify-content: center;
   }
}

@media (max-width: 767.98px) {
   .cu-ds-nn{
	   display:none!important
   }
   .cu-jf-cntr{
	   justify-content:center!important
   }
   .att-section {
      padding: 4rem 0;
   }

   .att-topbar__contacts {
      gap: .9rem;
      font-size: .78rem;
   }

   .att-topbar__note {
      display: none;
   }

   .att-hero__carousel {
      height: 78vh;
      min-height: 540px;
   }

   .att-hero__nav {
      width: 42px;
      height: 42px;
      font-size: 1.1rem;
   }

   .att-hero__nav--prev {
      left: 10px;
   }

   .att-hero__nav--next {
      right: 10px;
   }

   .att-hero__chip-item strong {
      font-size: 1.35rem;
   }

   .att-hero__chip-item span {
      font-size: .68rem;
   }

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

   /* mobile: 2 per row */
   .att-about__img--main {
      height: 360px;
   }

   .att-footer__bottom {
      flex-direction: column;
      text-align: center;
   }

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

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

   .att-hero__title {
      font-size: 2rem;
   }

   .att-marquee__item {
      font-size: 1.1rem;
   }
}

/* -------------------------------------------------------------------------
   21. ACCESSIBILITY — reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }

   .att-hero__slide {
      transition: opacity .3s;
      transform: none;
   }
}

/* Visible keyboard focus */
:focus-visible {
   outline: 3px solid var(--marigold);
   outline-offset: 2px;
   border-radius: 4px;
}