:root {
   --blue: #033A8E;
   --blue2: #026FCA;
   --sky: #06ADDB;
   --green: #90CA05;
   --gold: #D5B35A;
   --ink: #12213b;
   --muted: #6e7a8d;
   --soft: #f5f8fc;
   --white: #fff;
   --line: #e7edf4;
   --shadow: 0 20px 60px rgba(7, 42, 104, .12);
   --transparent: rgba(7, 42, 104, .12);
}

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

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

body {
   font-family: Poppins, sans-serif;
   color: var(--ink);
   background: #fff;
   overflow-x: hidden
}

a {
   text-decoration: none;
   color: inherit
}

button,
input,
select,
textarea {
   font: inherit
}

button {
   cursor: pointer
}

.container {
   width: min(1180px, calc(100% - 40px));
   margin: auto
}

.preloader {
   position: fixed;
   inset: 0;
   background: #fff;
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 20px;
   transition: .6s
}

.preloader.hide {
   opacity: 0;
   visibility: hidden
}

.loader-logo {
   width: 200px;
   height: 145;
   overflow: hidden
}

.loader-logo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center
}

.loader-line {
   width: 120px;
   height: 3px;
   background: #e8edf4;
   position: relative;
   overflow: hidden;
   border-radius: 5px
}

.loader-line:after {
   content: "";
   position: absolute;
   inset: 0;
   width: 45%;
   background: var(--green);
   animation: load 1s infinite
}

@keyframes load {
   from {
      transform: translateX(-120%)
   }

   to {
      transform: translateX(280%)
   }
}

/* nav */
.navbar {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   background: rgba(255, 255, 255, .78);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid transparent;
   transition: .3s
}

.navbar.scrolled {
   box-shadow: 0 8px 30px rgba(5, 36, 91, .08);
   border-color: rgba(7, 42, 104, .06)
}

.nav-wrap {
   height: 82px;
   width: min(1240px, calc(100% - 40px));
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px
}

/* .logo-name a{
   font-family: sans-serif;
}  */

.brand {
   display: block;
   max-width: 70px;
   max-height: 70px;
   overflow: none
}

.brand img {
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 10%;
}


.nav-links {
   display: flex;
   align-items: center;
   gap: 28px;
   margin-left: auto
}

.nav-links a {
   font-size: 15px;
   font-weight: 600;
   color: #445168;
   position: relative
}

.nav-links>a:not(.nav-mobile-cta):after {
   content: "";
   position: absolute;
   height: 2px;
   width: 0;
   left: 0;
   bottom: -7px;
   background: var(--green);
   transition: .3s
}

.nav-links>a.active:after,
.nav-links>a:hover:after {
   width: 100%
}

.nav-cta,
.nav-mobile-cta {
   padding: 12px 18px;
   background: var(--blue);
   color: #fff !important;
   border-radius: 10px;
   font-size: 11px !important;
   box-shadow: 0 8px 22px rgba(3, 58, 142, .18)
}

.nav-cta i,
.nav-mobile-cta i {
   margin-left: 6px
}

.nav-mobile-cta {
   display: none
}

.menu-toggle {
   display: none;
   background: none;
   border: 0;
   width: 42px;
   height: 42px
}

.menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--blue);
   margin: 5px auto;
   transition: .3s
}

/* hero */
.hero {
   min-height: 100vh;
   background: var(--blue);
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   color: #fff
}

.hero-image {
   position: absolute;
   inset: 0;
   background: url('https://images.unsplash.com/photo-1565552645632-d725f8bfc19a?auto=format&fit=crop&w=2200&q=90') center/cover;
   opacity: .2;
   animation: heroZoom 20s ease-in-out infinite alternate
}

.hero-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(3, 28, 83, 0.271) 0%, rgba(3, 59, 142, 0.222) 45%, rgba(2, 90, 162, 0.321) 100%)
}

.grid-overlay {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 55px 55px;
   mask-image: linear-gradient(to right, #000, transparent)
}

@keyframes heroZoom {
   to {
      transform: scale(1.08)
   }
}

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   opacity: .3
}

.orb-one {
   width: 450px;
   height: 450px;
   background: var(--sky);
   right: -80px;
   top: -120px
}

.orb-two {
   width: 380px;
   height: 380px;
   background: var(--green);
   left: -150px;
   bottom: -180px
}

.hero-world {
   position: absolute;
   right: 5%;
   top: 13%;
   font-size: 550px;
   color: #fff;
   opacity: .025;
   line-height: 1
}

.hero-content {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.08fr .92fr;
   gap: 70px;
   align-items: center;
   padding: 145px 0 155px
}

.eyebrow {
   font-size: 13px;
   letter-spacing: 2.1px;
   color: var(--green);
   font-weight: 700;
   margin-bottom: 18px
}

.eyebrow.light {
   color: #d8edff
}

.pulse-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--green);
   margin-right: 9px;
   box-shadow: 0 0 0 6px rgba(144, 202, 5, .15);
   animation: pulse 2s infinite
}

@keyframes pulse {
   50% {
      box-shadow: 0 0 0 11px rgba(144, 202, 5, 0)
   }
}

.hero h1,
.section-head h2,
.flight-copy h2,
.about-copy h2,
.reviews-top h2,
.contact-copy h2 {
   font-family: Montserrat, sans-serif;
   font-weight: 800;
   letter-spacing: -2.5px
}

.hero h1 {
   font-size: clamp(3.3rem, 6vw, 5.9rem);
   line-height: 1.02;
   max-width: 760px
}

.hero h1 em,
.section-head h2 em,
.flight-copy h2 em,
.about-copy h2 em,
.reviews-top h2 em,
.contact-copy h2 em {
   display: block;
   color: var(--green);
   font-style: normal
}

.hero-points {
   display: flex;
   align-items: center;
   gap: 11px;
   flex-wrap: wrap;
   margin: 25px 0 20px;
   color: #d8edff;
   font-size: 14px;
   font-weight: 600
}

.hero-points b {
   width: 4px;
   height: 4px;
   background: var(--green);
   border-radius: 50%
}

.hero-copy>p {
   font-size: 14px;
   line-height: 1.9;
   color: rgba(255, 255, 255, .82);
   max-width: 680px
}

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

.btn {
   min-height: 53px;
   padding: 0 21px;
   border-radius: 12px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-size: 14px;
   font-weight: 700;
   transition: .3s
}

.btn:hover {
   transform: translateY(-3px)
}

.btn-green {
   background: linear-gradient(135deg, var(--green), #73a900);
   color: #fff;
   box-shadow: 0 13px 30px rgba(100, 155, 0, .25)
}

.btn-green span {
   width: 27px;
   height: 27px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .15)
}

.btn-glass {
   color: #fff;
   background: rgba(255, 255, 255, .09);
   border: 1px solid rgba(255, 255, 255, .23);
   backdrop-filter: blur(12px)
}

.btn-glass:hover {
   background: #fff;
   color: var(--blue)
}

.btn-blue {
   background: var(--blue);
   color: #fff
}

.btn-white {
   background: #fff;
   color: var(--blue)
}

.btn-outline-blue {
   border: 1px solid rgba(3, 58, 142, .25);
   color: var(--blue);
   background: #fff
}

.wide {
   width: 100%
}

.hero-mini-trust {
   display: flex;
   gap: 32px;
   margin-top: 38px;
   flex-wrap: wrap
}

.hero-mini-trust>div {
   display: flex;
   align-items: center;
   gap: 10px
}

.hero-mini-trust i {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .12);
   color: var(--green)
}

.hero-mini-trust strong,
.hero-mini-trust small {
   display: block
}

.hero-mini-trust strong {
   font-size: 14px
}

.hero-mini-trust small {
   font-size: 9px;
   color: rgba(255, 255, 255, .62);
   margin-top: 2px
}

/* hero visual */
.hero-visual {
   min-height: 560px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
}

.destination-card {
   width: 440px;
   height: 520px;
   border-radius: 30px;
   overflow: hidden;
   position: relative;
   transform: rotate(2deg);
   box-shadow: 0 35px 85px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .16)
}

.destination-card img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.destination-gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(1, 20, 55, .88), transparent 58%)
}

.shine {
   position: absolute;
   inset: -20%;
   background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 48%, transparent 56%);
   transform: translateX(-120%);
   animation: shine 6s infinite
}

@keyframes shine {

   70%,
   100% {
      transform: translateX(120%)
   }
}

.destination-label {
   position: absolute;
   left: 20px;
   right: 20px;
   bottom: 20px;
   padding: 15px;
   display: flex;
   align-items: center;
   gap: 11px;
   background: rgba(5, 49, 125, .45);
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 15px;
   backdrop-filter: blur(15px)
}

.pin {
   width: 40px;
   height: 40px;
   border-radius: 11px;
   display: grid;
   place-items: center;
   background: var(--green)
}

.destination-label strong,
.destination-label small {
   display: block
}

.destination-label strong {
   font-size: 14px
}

.destination-label small {
   font-size: 12px;
   color: rgba(255, 255, 255, .7);
   margin-top: 3px
}

.orbit {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 50%;
   z-index: -1
}

.orbit-a {
   width: 560px;
   height: 560px;
   animation: rotate 28s linear infinite
}

.orbit-b {
   width: 650px;
   height: 650px;
   border-style: dashed;
   animation: rotate 45s linear infinite reverse
}

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

.float-card {
   position: absolute;
   z-index: 3;
   display: flex;
   gap: 11px;
   align-items: center;
   padding: 13px 15px;
   background: rgba(255, 255, 255, .13);
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 15px;
   backdrop-filter: blur(18px);
   box-shadow: 0 18px 35px rgba(0, 0, 0, .16)
}

.card-global {
   left: -20px;
   top: 75px;
   animation: float 5s ease-in-out infinite
}

.card-visa {
   right: -20px;
   bottom: 90px;
   animation: float 6s ease-in-out infinite reverse
}

@keyframes float {
   50% {
      transform: translateY(-12px)
   }
}

.float-icon {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   background: rgba(144, 202, 5, .17);
   color: var(--green)
}

.float-card strong,
.float-card small {
   display: block
}

.float-card strong {
   font-size: 14px
}

.float-card small {
   font-size: 12px;
   color: rgba(255, 255, 255, .65);
   margin-top: 3px
}

.hero-bottom {
   position: absolute;
   bottom: 0;
   width: 100%;
   z-index: 3;
   background: rgba(1, 25, 75, .42);
   border-top: 1px solid rgba(255, 255, 255, .11);
   backdrop-filter: blur(18px)
}

.hero-bottom-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
   padding: 18px 0
}

.hero-bottom-grid>div {
   display: flex;
   align-items: center;
   gap: 11px
}

.hero-bottom-grid>div>span {
   width: 39px;
   height: 39px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   background: rgba(255, 255, 255, .08);
   color: var(--green)
}

.hero-bottom p strong,
.hero-bottom p small {
   display: block
}

.hero-bottom p strong {
   font-size: 14px
}

.hero-bottom p small {
   font-size: 11px;
   color: rgba(255, 255, 255, .57);
   margin-top: 2px
}

/* common */
.section {
   padding: 50px 0
}

.services-strip {
   background: #fff;
   border-bottom: 1px solid var(--line)
}

.strip-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 19px 0;
   gap: 20px
}

.strip-grid div {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 600;
   color: #526076
}

.strip-grid i {
   color: var(--green)
}

.section-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 60px;
   margin-bottom: 50px
}

.section-head>div {
   max-width: 620px
}

.section-head h2,
.flight-copy h2,
.about-copy h2,
.reviews-top h2,
.contact-copy h2 {
   font-size: clamp(2.3rem, 4.2vw, 4rem);
   line-height: 1.1
}

.section-head>p {
   max-width: 430px;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.8
}

.centered {
   align-items: center;
   text-align: center;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto
}

.centered>p {
   max-width: 620px
}

.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .7s ease, transform .7s ease
}

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

.reveal-right {
   transform: translateX(40px)
}

/* packages */
.package-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.package-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 30px;
   position: relative;
   transition: .35s;
   box-shadow: 0 10px 30px rgba(3, 58, 142, .04)
}

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

.package-card.featured {
   border: 2px solid rgba(144, 202, 5, .55);
   box-shadow: 0 20px 50px rgba(80, 130, 0, .09)
}

.featured-line {
   position: absolute;
   top: -3px;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
   background: var(--green);
   color: #fff;
   padding: 6px 13px;
   border-radius: 20px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px
}

.package-top {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.package-icon {
   width: 57px;
   height: 57px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: #eff6ff;
   color: var(--blue);
   font-size: 21px
}

.tag {
   font-size: 12px;
   font-weight: 700;
   color: var(--green);
   padding: 7px 10px;
   background: #f2f8e6;
   border-radius: 20px
}

.tag.gold {
   color: #9b7112;
   background: #fff6df
}

.package-card h3 {
   font: 700 21px Montserrat, sans-serif;
   color: var(--blue);
   margin: 25px 0 10px
}

.package-intro {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.75;
   min-height: 63px
}

.package-card ul {
   list-style: none;
   margin: 23px 0
}

.package-card li {
   font-size: 14px;
   padding: 10px 0;
   border-bottom: 1px solid #edf1f5;
   color: #526076
}

.package-card li i {
   color: var(--green);
   margin-right: 8px
}

.text-btn {
   border: 0;
   background: none;
   color: var(--blue);
   font-size: 13px;
   font-weight: 700;
   padding: 0
}

.text-btn i {
   margin-left: 5px;
   transition: .25s
}

.text-btn:hover i {
   margin-left: 10px
}

.spiritual-banner {
   padding: 95px 0;
   background: linear-gradient(110deg, rgba(3, 40, 108, .94), rgba(2, 111, 202, .78)), url('https://images.unsplash.com/photo-1513072064285-240f87fa81e8?auto=format&fit=crop&w=1800&q=85') center/cover;
   color: #fff
}

.spiritual-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
}

.spiritual-inner h2 {
   font: 800 clamp(2.3rem, 4vw, 4rem) Montserrat, sans-serif;
   line-height: 1.1;
   letter-spacing: -2px
}

.spiritual-inner h2 em {
   font-style: normal;
   color: var(--green)
}

/* visa */
.visa-section {
   background: var(--soft)
}

.visa-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 25px
}

.visa-panel {
   padding: 38px;
   border-radius: 22px;
   background: #fff;
   border: 1px solid var(--line)
}

.dark-panel {
   background: linear-gradient(135deg, #033a8e, #026fca);
   color: #fff;
   border-color: transparent
}

.panel-icon {
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   border-radius: 16px;
   background: #edf5ff;
   color: var(--blue);
   font-size: 22px
}

.dark-panel .panel-icon {
   background: rgba(255, 255, 255, .12);
   color: var(--green)
}

.visa-panel h3 {
   font: 700 23px Montserrat, sans-serif;
   margin: 20px 0 9px
}

.visa-panel>p {
   font-size: 14px;
   line-height: 1.8;
   color: var(--muted);
   max-width: 470px
}

.dark-panel>p {
   color: rgba(255, 255, 255, .75)
}

.countries {
   display: flex;
   gap: 9px;
   flex-wrap: wrap;
   margin: 25px 0
}

.countries span {
   font-size: 13px;
   padding: 8px 12px;
   border: 1px solid #e5ebf2;
   border-radius: 30px;
   font-weight: 600
}

.dark-panel .countries span {
   border-color: rgba(255, 255, 255, .18);
   background: rgba(255, 255, 255, .06)
}

.light-link {
   color: #fff
}

.process-wrap {
   margin-top: 70px
}

.process-heading {
   text-align: center;
   margin-bottom: 42px
}

.process-heading h3 {
   font: 700 27px Montserrat, sans-serif
}

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

.process-grid>div {
   text-align: center;
   position: relative
}

.process-grid b {
   font-size: 14px;
   color: #b4bdca
}

.process-dot {
   display: grid;
   place-items: center;
   width: 55px;
   height: 55px;
   margin: 10px auto 15px;
   border-radius: 50%;
   background: #fff;
   color: var(--blue);
   box-shadow: 0 10px 30px rgba(3, 58, 142, .08);
   position: relative
}

.process-grid>div:not(:last-child):after {
   content: "";
   position: absolute;
   height: 1px;
   background: #dbe4ee;
   width: 70%;
   left: 65%;
   top: 48px
}

.process-grid h4 {
   font-size: 16px
}

.process-grid p {
   font-size: 14px;
   color: var(--muted);
   margin-top: 5px
}

/* flights */
.flight-layout {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 70px;
   align-items: center
}

.flight-copy>p {
   font-size: 15px;
   color: var(--muted);
   line-height: 1.85;
   margin: 22px 0
}

.airline-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 9px
}

.airline-pills span {
   font-size: 12px;
   padding: 8px 12px;
   background: #f0f6fd;
   color: var(--blue);
   border-radius: 20px;
   font-weight: 600
}

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

.form-title {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-bottom: 25px
}

.form-title>span {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: #eff6ff;
   color: var(--blue);
   display: grid;
   place-items: center
}

.form-title h3 {
   font: 700 19px Montserrat, sans-serif
}

.form-title p {
   font-size: 12px;
   color: var(--muted);
   margin-top: 3px
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-bottom: 20px
}

label {
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-size: 13px;
   font-weight: 600;
   color: #526076
}

input,
select,
textarea {
   width: 100%;
   border: 1px solid #e1e8f0;
   border-radius: 10px;
   padding: 13px;
   background: #fbfcfe;
   color: var(--ink);
   outline: none;
   transition: .25s;
   font-size: 13px
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--sky);
   box-shadow: 0 0 0 4px rgba(6, 173, 219, .08)
}

/* about */
.about-section {
   background: #fff
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border: 1px solid var(--line);
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 100px
}

.stats-grid>div {
   padding: 30px;
   border-right: 1px solid var(--line)
}

.stats-grid>div:last-child {
   border: 0
}

.stats-grid strong {
   display: block;
   font: 800 34px Montserrat, sans-serif;
   color: var(--blue)
}

.stats-grid span {
   font-size: 13px;
   color: var(--muted);
   display: block;
   margin-top: 6px
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center
}

.about-photo {
   height: 500px;
   border-radius: 25px;
   overflow: hidden;
   position: relative
}

.about-photo>img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.about-photo:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(3, 58, 142, .5), transparent 50%)
}

.about-badge {
   position: absolute;
   z-index: 1;
   left: 20px;
   bottom: 20px;
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 14px;
   background: rgba(255, 255, 255, .15);
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 14px;
   color: #fff;
   backdrop-filter: blur(15px)
}

.about-badge i {
   font-size: 25px;
   color: var(--green)
}

.about-badge strong,
.about-badge small {
   display: block
}

.about-badge strong {
   font-size: 16px
}

.about-badge small {
   font-size: 11px;
   margin-top: 2px;
   color: rgba(255, 255, 255, .75)
}

.about-copy p {
   font-size: 14px;
   line-height: 1.9;
   color: var(--muted);
   margin: 17px 0
}

.about-copy .btn {
   margin-top: 15px
}

/* reviews */
.reviews-section {
   padding: 105px 0;
   background: linear-gradient(130deg, #031e5b, #033a8e);
   color: #fff
}

.reviews-top {
   display: flex;
   align-items: end;
   justify-content: space-between;
   margin-bottom: 50px
}

.reviews-top h2 em {
   color: var(--green)
}

.review-controls {
   display: flex;
   gap: 9px
}

.review-controls button {
   width: 43px;
   height: 43px;
   border-radius: 50%;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .25);
   color: #fff
}

.review-controls button:hover {
   background: #fff;
   color: var(--blue)
}

.review-stage {
   min-height: 245px;
   position: relative
}

.review {
   display: none;
   max-width: 900px
}

.review.active {
   display: block;
   animation: fade .45s ease
}

.stars {
   color: var(--gold);
   font-size: 14px;
   letter-spacing: 4px
}

.review blockquote {
   font: 600 clamp(1.35rem, 2.4vw, 2rem) Montserrat, sans-serif;
   line-height: 1.55;
   margin: 23px 0 30px;
   color: #f4f8ff
}

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

.reviewer>span {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .12);
   color: var(--green);
   font-size: 14px
}

.reviewer strong,
.reviewer small {
   display: block
}

.reviewer strong {
   font-size: 14px
}

.reviewer small {
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   margin-top: 3px
}

@keyframes fade {
   from {
      opacity: 0;
      transform: translateY(10px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

/* contact */
.contact-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 75px;
   align-items: start
}

.contact-copy>p {
   font-size: 14px;
   line-height: 1.85;
   color: var(--muted);
   margin: 22px 0 30px
}

.contact-list {
   display: grid;
   gap: 16px
}

.contact-list>a,
.contact-list>div {
   display: flex;
   gap: 12px;
   align-items: center
}

.contact-list>*>i {
   width: 43px;
   height: 43px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #eff6ff;
   color: var(--blue)
}

.contact-list small,
.contact-list strong {
   display: block
}

.contact-list small {
   font-size: 14px;
   color: var(--muted)
}

.contact-list strong {
   font-size: 13px;
   margin-top: 2px
}

.socials {
   display: flex;
   gap: 9px;
   margin-top: 30px
}

.socials a {
   width: 37px;
   height: 37px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   color: var(--blue);
   font-size: 18px
}

.socials a:hover {
   background: var(--blue);
   color: #fff
}

.contact-form {
   display: grid;
   gap: 15px
}

.contact-form textarea {
   height: 105px;
   resize: vertical
}

/* footer */
.footer {
   background: #071936;
   color: #fff;
   padding: 65px 0 20px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr;
   gap: 60px
}

.footer-brand img {
   width: 180px;
   height: 180px;
   object-fit: cover;
   object-position: center;
   background: transparent;
   /* border-radius: 4px */
}

.footer p,
.footer a {
   display: block;
   font-size: 12px;
   color: #aab7c9;
   line-height: 1.9;
   margin-bottom: 7px
}

.footer-brand p {
   max-width: 340px;
   margin-top: 15px
}

.footer h4 {
   font-size: 14px;
   margin-bottom: 16px
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 40px;
   padding-top: 18px;
   display: flex;
   justify-content: space-between;
   color: #8290a5;
   font-size: 12px
}

.whatsapp-float {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 900;
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 15px 7px 7px;
   border-radius: 50px;
   background: #25D366;
   color: #fff;
   box-shadow: 0 15px 35px rgba(37, 211, 102, .3);
   font-size: 10px;
   font-weight: 700
}

.whatsapp-float i {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #fff;
   color: #25D366;
   font-size: 20px
}

.modal {
   position: fixed;
   inset: 0;
   background: rgba(2, 13, 36, .68);
   z-index: 2000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px;
   backdrop-filter: blur(8px)
}

.modal.show {
   display: flex
}

.modal-box {
   max-width: 470px;
   width: 100%;
   background: #fff;
   border-radius: 22px;
   padding: 38px;
   text-align: center;
   position: relative;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
   animation: fade .3s
}

.modal-close {
   position: absolute;
   right: 14px;
   top: 10px;
   border: 0;
   background: none;
   font-size: 27px;
   color: #7a8797
}

.modal-icon {
   width: 65px;
   height: 65px;
   margin: 0 auto 18px;
   border-radius: 20px;
   display: grid;
   place-items: center;
   background: #eff7e8;
   color: var(--green);
   font-size: 26px
}

.modal-box h3 {
   font: 700 24px Montserrat, sans-serif;
   color: var(--blue)
}

.modal-box p {
   font-size: 12px;
   line-height: 1.8;
   color: var(--muted);
   margin: 13px 0 23px
}

@media(max-width:1000px) {
   .nav-links {
      gap: 18px
   }

   .nav-cta {
      display: none
   }

   .hero-content {
      grid-template-columns: 1fr;
      padding-bottom: 180px;
      text-align: center
   }

   .hero-copy {
      max-width: 760px;
      margin: auto
   }

   .hero-points,
   .hero-actions,
   .hero-mini-trust {
      justify-content: center
   }

   .hero-visual {
      max-width: 650px;
      width: 100%;
      margin: auto
   }

   .hero-bottom-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .hero-bottom {
      position: relative;
      margin-top: -1px
   }

   .hero {
      display: block
   }

   .hero-content {
      padding-top: 135px
   }

   .section-head {
      gap: 30px
   }

   .flight-layout,
   .about-grid,
   .contact-grid {
      grid-template-columns: 1fr;
      gap: 45px
   }

   .about-copy {
      max-width: 750px
   }

   .stats-grid {
      margin-bottom: 70px
   }

   .contact-copy {
      max-width: 650px
   }
}

@media(max-width:760px) {
   .nav-wrap {
      height: 72px
   }

   .brand {
      width: 142px;
      height: 51px
   }

   .menu-toggle {
      display: block
   }

   .nav-links {
      position: fixed;
      top: 72px;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, .98);
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 24px 25px 28px;
      gap: 20px;
      box-shadow: 0 20px 40px rgba(4, 32, 80, .12);
      transform: translateY(-130%);
      opacity: 0;
      pointer-events: none;
      transition: .35s
   }

   .nav-links.open {
      transform: none;
      opacity: 1;
      pointer-events: auto
   }

   .nav-mobile-cta {
      display: inline-flex !important;
      width: 100%;
      justify-content: center
   }

   .menu-toggle.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
   }

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

   .menu-toggle.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
   }

   .hero h1 {
      font-size: clamp(2.9rem, 13vw, 4.5rem)
   }

   .hero-content {
      padding: 115px 0 60px
   }

   .hero-visual {
      min-height: 440px
   }

   .destination-card {
      width: min(83vw, 410px);
      height: 420px
   }

   .orbit-a {
      width: 430px;
      height: 430px
   }

   .orbit-b {
      width: 500px;
      height: 500px
   }

   .card-global {
      left: 0;
      top: 35px
   }

   .card-visa {
      right: 0;
      bottom: 45px
   }

   .hero-bottom-grid {
      grid-template-columns: 1fr 1fr;
      padding: 18px 0
   }

   .hero-bottom p small {
      display: none
   }

   .strip-grid {
      grid-template-columns: 1fr 1fr;
      padding: 15px 0
   }

   .strip-grid div {
      justify-content: flex-start;
      font-size: 9px
   }

   .section {
      padding: 75px 0
   }

   .section-head,
   .spiritual-inner,
   .reviews-top {
      align-items: flex-start;
      flex-direction: column
   }

   .section-head h2,
   .flight-copy h2,
   .about-copy h2,
   .reviews-top h2,
   .contact-copy h2 {
      letter-spacing: -1.6px
   }

   .package-grid,
   .visa-grid {
      grid-template-columns: 1fr
   }

   .process-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px
   }

   .process-grid>div:after {
      display: none
   }

   .flight-form,
   .contact-form {
      padding: 24px
   }

   .stats-grid {
      grid-template-columns: 1fr 1fr
   }

   .stats-grid>div:nth-child(2) {
      border-right: 0
   }

   .stats-grid>div:nth-child(-n+2) {
      border-bottom: 1px solid var(--line)
   }

   .about-photo {
      height: 390px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 35px
   }

   .footer-brand {
      grid-column: 1/-1
   }

   .footer-bottom {
      gap: 10px;
      flex-direction: column
   }

   .whatsapp-float span {
      display: none
   }

   .whatsapp-float {
      padding: 7px
   }

   .modal-box {
      padding: 32px 22px
   }
}

@media(max-width:430px) {

   .container,
   .nav-wrap {
      width: min(100% - 28px, 1180px)
   }

   .hero-mini-trust {
      gap: 16px
   }

   .hero-bottom-grid {
      gap: 14px
   }

   .hero-bottom-grid>div>span {
      width: 34px;
      height: 34px
   }

   .hero-bottom p strong {
      font-size: 8.5px
   }

   .strip-grid {
      grid-template-columns: 1fr
   }

   .hero-actions .btn {
      width: 100%
   }

   .form-grid {
      grid-template-columns: 1fr
   }

   .stats-grid {
      grid-template-columns: 1fr
   }

   .stats-grid>div {
      border-right: 0 !important;
      border-bottom: 1px solid var(--line) !important
   }

   .stats-grid>div:last-child {
      border-bottom: 0 !important
   }

   .process-grid {
      grid-template-columns: 1fr
   }

   .footer-grid {
      grid-template-columns: 1fr
   }

   .footer-brand {
      grid-column: auto
   }

   .review-stage {
      min-height: 300px
   }
}


/* =========================================
   LAUNCH DAY UPGRADES — HERO SLIDER
========================================= */
.hero-slider {
   position: absolute;
   inset: 0;
   overflow: hidden
}

.hero-slide {
   position: absolute;
   inset: 0;
   background-position: center;
   background-size: cover;
   opacity: 0;
   transform: scale(1.08);
   transition: opacity 1.6s ease, transform 8s ease
}

.hero-slide.active {
   opacity: .36;
   transform: scale(1)
}

.hero-slider:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(3, 28, 83, .35), rgba(2, 111, 202, .08))
}

.hero-slider-ui {
   position: absolute;
   z-index: 8;
   right: 34px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 9px
}

.hero-slider-btn {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, .35);
   padding: 0;
   transition: .3s
}

.hero-slider-btn.active {
   height: 30px;
   border-radius: 8px;
   background: var(--green)
}

/* package prices */
.package-price {
   display: flex;
   align-items: baseline;
   gap: 7px;
   flex-wrap: wrap;
   margin: 13px 0 8px
}

.package-price span {
   font-size: 10px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .8px;
   width: 100%
}

.package-price strong {
   font: 800 25px Montserrat, sans-serif;
   color: var(--blue)
}

.package-price small {
   font-size: 10px;
   color: var(--green);
   font-weight: 700
}

/* visa & study package upgrades */
.visa-package-head {
   margin-top: 75px;
   margin-bottom: 25px;
   display: flex;
   align-items: end;
   justify-content: space-between
}

.visa-package-head h3 {
   font: 800 28px Montserrat, sans-serif;
   color: var(--blue);
   margin-top: 8px
}

.visa-package-head p {
   color: var(--muted);
   font-size: 13px;
   max-width: 650px;
   line-height: 1.8;
   margin-top: 8px
}

.visa-package-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.visa-package-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 25px;
   box-shadow: 0 12px 35px rgba(3, 58, 142, .06);
   transition: .3s
}

.visa-package-card:hover,
.study-card:hover {
   transform: translateY(-7px);
   box-shadow: var(--shadow)
}

.country-flag {
   width: 58px;
   height: 44px;
   display: grid;
   place-items: center;
   font-size: 34px;
   margin-bottom: 15px;
   border-radius: 13px;
   background: linear-gradient(145deg, #f7fbff, #eef7ff);
   border: 1px solid rgba(3, 58, 142, .08);
   box-shadow: 0 8px 20px rgba(3, 58, 142, .08)
}

.visa-type {
   font-size: 9px;
   font-weight: 800;
   color: var(--green);
   letter-spacing: 1.2px;
   background: #f1f8e3;
   padding: 6px 9px;
   border-radius: 20px
}

.visa-package-card h3 {
   font: 700 20px Montserrat, sans-serif;
   color: var(--blue);
   margin: 15px 0 9px
}

.visa-package-card p {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.7;
   min-height: 42px
}

.visa-price {
   font: 800 25px Montserrat, sans-serif;
   color: var(--blue);
   margin: 18px 0
}

.visa-price small {
   font: 500 10px Poppins, sans-serif;
   color: var(--muted)
}

.package-wa-btn {
   border: 0;
   cursor: pointer
}

.visa-package-card .package-wa-btn {
   width: 100%;
   min-height: 45px;
   border-radius: 10px;
   font-weight: 700;
   font-size: 12px
}

.study-head {
   margin-top: 85px
}

.study-package-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px
}

.study-card {
   background: linear-gradient(145deg, #071f58, #033A8E);
   color: #fff;
   border-radius: 20px;
   padding: 25px;
   box-shadow: 0 15px 40px rgba(3, 58, 142, .14);
   transition: .3s;
   position: relative;
   overflow: hidden
}

.study-card:before {
   content: "";
   position: absolute;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   right: -60px;
   top: -60px;
   background: rgba(144, 202, 5, .1);
   filter: blur(10px)
}

.study-card-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 30px;
   position: relative;
   z-index: 1
}

.study-card-top i {
   font-size: 19px;
   color: var(--green)
}

.study-card h3 {
   font: 700 19px Montserrat, sans-serif;
   margin: 23px 0 9px;
   position: relative
}

.study-card p {
   font-size: 12px;
   color: rgba(255, 255, 255, .7);
   line-height: 1.7;
   min-height: 42px;
   position: relative
}

.study-price {
   font: 800 22px Montserrat, sans-serif;
   color: var(--green);
   margin: 18px 0;
   position: relative
}

.study-price small {
   display: block;
   font: 500 9px Poppins, sans-serif;
   color: rgba(255, 255, 255, .55);
   margin-top: 4px
}

.study-card .package-wa-btn {
   position: relative;
   width: 100%;
   min-height: 44px;
   border-radius: 10px;
   background: #fff;
   color: var(--blue);
   font-weight: 800;
   font-size: 11px
}

/* advanced ticketing dashboard */
.advanced-flight-form {
   max-width: 680px
}

.trip-type-tabs {
   display: flex;
   background: #f4f7fb;
   border-radius: 12px;
   padding: 4px;
   margin: 22px 0 18px;
   gap: 4px
}

.trip-type {
   flex: 1;
   border: 0;
   background: transparent;
   padding: 10px 8px;
   border-radius: 9px;
   font-size: 11px;
   font-weight: 700;
   color: var(--muted)
}

.trip-type.active {
   background: #fff;
   color: var(--blue);
   box-shadow: 0 5px 15px rgba(3, 58, 142, .08)
}

.flight-legs {
   display: grid;
   gap: 12px
}

.flight-leg {
   background: #f9fbfd;
   border: 1px solid #e9eef5;
   padding: 12px;
   border-radius: 13px
}

.flight-leg .form-grid {
   grid-template-columns: 1.15fr 1.15fr 1fr 1fr
}

.add-leg-btn {
   display: none;
   width: 100%;
   margin: 12px 0 3px;
   border: 1px dashed rgba(3, 58, 142, .35);
   background: #f7faff;
   color: var(--blue);
   min-height: 43px;
   border-radius: 10px;
   font-size: 12px;
   font-weight: 700
}

.flight-bottom-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin: 14px 0
}

.flight-bottom-fields label {
   font-size: 11px;
   color: var(--muted);
   font-weight: 600;
   display: grid;
   gap: 7px
}

.flight-bottom-fields select {
   border: 1px solid #e1e7ef;
   padding: 13px;
   border-radius: 9px;
   background: #fff;
   outline: none
}

.flight-note {
   display: block;
   text-align: center;
   font-size: 10px;
   color: var(--muted);
   margin-top: 11px
}

.flight-note i {
   color: var(--green);
   margin-right: 4px
}

.flight-form input[list] {
   text-transform: none
}

.remove-leg-btn {
   margin-top: 10px;
   border: 0;
   background: #fff1f1;
   color: #b33;
   border-radius: 8px;
   padding: 7px 10px;
   font-size: 10px;
   font-weight: 700
}

/* Mobile */
@media(max-width:1000px) {
   .visa-package-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .study-package-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .flight-leg .form-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:650px) {
   .hero-slider-ui {
      right: 18px;
      top: auto;
      bottom: 145px;
      transform: none;
      flex-direction: row
   }

   .hero-slider-btn.active {
      height: 8px;
      width: 28px
   }

   .visa-package-grid,
   .study-package-grid {
      grid-template-columns: 1fr
   }

   .visa-package-head {
      margin-top: 55px
   }

   .visa-package-head h3 {
      font-size: 24px
   }

   .trip-type-tabs {
      overflow: auto
   }

   .trip-type {
      white-space: nowrap
   }

   .flight-leg .form-grid,
   .flight-bottom-fields {
      grid-template-columns: 1fr
   }

   .advanced-flight-form {
      padding: 22px !important
   }
}

/* =========================================================
   AAJ TRAVEL DESK — FINAL LAUNCH UPGRADE
========================================================= */
.travel-desk-section {
   background: linear-gradient(180deg, #f7faff 0%, #eef5fb 100%);
   position: relative;
   overflow: hidden
}

.travel-desk-section:before {
   content: "";
   position: absolute;
   width: 650px;
   height: 650px;
   border-radius: 50%;
   right: -300px;
   top: 80px;
   background: rgba(6, 173, 219, .08);
   filter: blur(20px);
   pointer-events: none
}

.travel-desk-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px;
   margin-bottom: 42px;
   position: relative;
   z-index: 2
}

.travel-desk-heading h2 {
   font-family: Montserrat, sans-serif;
   color: var(--royal-blue);
   font-size: clamp(34px, 4vw, 55px);
   line-height: 1.08;
   margin: 8px 0 14px
}

.travel-desk-heading h2 em {
   font-style: normal;
   color: var(--emerald)
}

.travel-desk-heading p {
   max-width: 760px;
   color: #66758a;
   line-height: 1.8;
   font-size: 14px
}

.desk-badge {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 18px;
   border: 1px solid rgba(3, 58, 142, .1);
   background: rgba(255, 255, 255, .82);
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(3, 58, 142, .08);
   min-width: 190px
}

.desk-badge i {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #eef8df;
   color: var(--emerald)
}

.desk-badge strong,
.desk-badge small {
   display: block
}

.desk-badge strong {
   font-size: 12px;
   color: var(--royal-blue)
}

.desk-badge small {
   font-size: 10px;
   color: #7b8798;
   margin-top: 3px
}

.travel-desk-grid {
   display: grid;
   grid-template-columns: 1.18fr .82fr;
   gap: 24px;
   position: relative;
   z-index: 2
}

.desk-card {
   background: rgba(255, 255, 255, .94);
   border: 1px solid rgba(3, 58, 142, .09);
   border-radius: 26px;
   box-shadow: 0 22px 60px rgba(3, 58, 142, .1);
   padding: 28px;
   backdrop-filter: blur(10px)
}

.desk-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   margin-bottom: 22px
}

.desk-card-head>div {
   display: flex;
   align-items: center;
   gap: 13px
}

.desk-card-head h3 {
   font-family: Montserrat;
   color: var(--royal-blue);
   font-size: 21px
}

.desk-card-head p {
   font-size: 11px;
   color: #7a8797;
   margin-top: 4px
}

.desk-icon {
   width: 48px;
   height: 48px;
   border-radius: 15px;
   background: #eaf4ff;
   color: var(--bright-blue);
   display: grid;
   place-items: center;
   font-size: 19px
}

.desk-icon.green {
   background: #eff8df;
   color: #6e9d00
}

.live-pill,
.currency-pill {
   font-size: 9px;
   font-weight: 700;
   border-radius: 30px;
   padding: 8px 11px;
   white-space: nowrap
}

.live-pill {
   background: #eef8df;
   color: #608900
}

.live-pill i {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--emerald);
   margin-right: 5px
}

.currency-pill {
   background: #eaf4ff;
   color: var(--royal-blue)
}

.trip-type-tabs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   background: #f2f6fb;
   padding: 5px;
   border-radius: 12px;
   margin-bottom: 18px
}

.trip-type {
   border: 0;
   background: transparent;
   border-radius: 9px;
   padding: 11px 8px;
   color: #6d7b8d;
   font-size: 11px;
   font-weight: 700;
   cursor: pointer;
   transition: .25s
}

.trip-type.active {
   background: #fff;
   color: var(--royal-blue);
   box-shadow: 0 5px 15px rgba(3, 58, 142, .1)
}

.flight-leg {
   background: #f9fbfe;
   border: 1px solid #e6edf5;
   border-radius: 17px;
   padding: 18px;
   margin-bottom: 12px;
   position: relative
}

.leg-label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.3px;
   font-weight: 800;
   color: #7a8797;
   margin-bottom: 13px
}

.leg-label span {
   display: inline-grid;
   place-items: center;
   width: 23px;
   height: 23px;
   border-radius: 7px;
   background: var(--royal-blue);
   color: #fff;
   margin-right: 7px;
   font-size: 9px
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px
}

.form-grid label,
.flight-bottom-fields label,
.customer-mini-grid label {
   font-size: 10px;
   font-weight: 700;
   color: #657286;
   display: block
}

.airport-field {
   position: relative
}

.airport-field>i {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 11px;
   color: var(--bright-blue);
   z-index: 2
}

.airport-input {
   padding-left: 34px !important
}

.form-grid input,
.flight-bottom-fields select,
.customer-mini-grid input {
   width: 100%;
   margin-top: 7px;
   padding: 12px 13px;
   border: 1px solid #dde6f0;
   border-radius: 10px;
   outline: 0;
   background: #fff;
   color: #1e2a3a;
   font-size: 12px;
   transition: .2s
}

.form-grid input:focus,
.flight-bottom-fields select:focus,
.customer-mini-grid input:focus {
   border-color: #68b9df;
   box-shadow: 0 0 0 3px rgba(6, 173, 219, .09)
}

.return-field {
   display: none
}

.airport-suggestions {
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid #dfe8f1;
   border-radius: 12px;
   box-shadow: 0 18px 35px rgba(3, 58, 142, .14);
   z-index: 50;
   overflow: hidden;
   display: none
}

.airport-suggestions.show {
   display: block
}

.airport-suggestion {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   padding: 11px 12px;
   cursor: pointer;
   border-bottom: 1px solid #f0f3f7
}

.airport-suggestion:last-child {
   border-bottom: 0
}

.airport-suggestion:hover {
   background: #f3f8fd
}

.airport-suggestion strong {
   display: block;
   font-size: 11px;
   color: #203149
}

.airport-suggestion small {
   display: block;
   font-size: 9px;
   color: #8390a0;
   margin-top: 2px
}

.airport-code {
   font-weight: 800;
   color: var(--bright-blue);
   font-size: 10px;
   align-self: center
}

.add-leg-btn {
   display: none;
   border: 1px dashed #9ec4df;
   background: #f4faff;
   color: var(--royal-blue);
   padding: 11px 14px;
   border-radius: 10px;
   font-size: 10px;
   font-weight: 700;
   cursor: pointer;
   margin: 10px 0 16px
}

.remove-leg-btn {
   border: 0;
   background: transparent;
   color: #c24c4c;
   font-size: 9px;
   font-weight: 700;
   cursor: pointer;
   margin-top: 8px
}

.flight-bottom-fields,
.customer-mini-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px;
   margin-top: 15px
}

.flight-bottom-fields select {
   appearance: auto
}

.customer-mini-grid {
   margin-top: 14px
}

.airport-help {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   background: #f1f8fc;
   border-radius: 11px;
   padding: 10px 12px;
   margin: 14px 0;
   color: #6d7c8e;
   font-size: 9px;
   line-height: 1.5
}

.airport-help i {
   color: var(--bright-blue);
   margin-top: 2px
}

.flight-note {
   display: block;
   color: #8995a4;
   font-size: 9px;
   line-height: 1.6;
   margin-top: 11px
}

.flight-note i {
   color: var(--emerald);
   margin-right: 4px
}

.expense-form {
   max-height: 405px;
   overflow: auto;
   padding-right: 5px
}

.expense-form::-webkit-scrollbar {
   width: 4px
}

.expense-form::-webkit-scrollbar-thumb {
   background: #d5e0ea;
   border-radius: 10px
}

.expense-row {
   padding: 9px 0;
   border-bottom: 1px solid #edf1f5
}

.expense-row label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

.expense-row label>span {
   font-size: 10px;
   font-weight: 700;
   color: #667487
}

.expense-row label>span i {
   width: 20px;
   color: var(--bright-blue);
   margin-right: 4px
}

.money-input {
   display: flex;
   align-items: center;
   border: 1px solid #dde6f0;
   background: #fff;
   border-radius: 9px;
   overflow: hidden;
   width: 145px
}

.money-input b {
   font-size: 8px;
   padding-left: 9px;
   color: #8a96a5
}

.money-input input {
   width: 100%;
   border: 0;
   outline: 0;
   padding: 9px 8px;
   text-align: right;
   font-size: 11px;
   background: transparent
}

.expense-row.discount .money-input {
   border-color: #dfead0
}

.expense-row.discount label>span i {
   color: #79a500
}

.expense-summary {
   margin-top: 18px;
   border-radius: 16px;
   background: #f5f9fc;
   padding: 14px
}

.expense-summary>div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 6px 0;
   font-size: 10px;
   color: #7a8796
}

.expense-summary strong {
   color: #26374c
}

.expense-summary .grand-total {
   border-top: 1px solid #dce6ef;
   margin-top: 7px;
   padding-top: 13px;
   font-weight: 800;
   color: var(--royal-blue)
}

.expense-summary .grand-total strong {
   font-family: Montserrat;
   color: var(--royal-blue);
   font-size: 20px
}

.desk-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 15px
}

.desk-actions .btn {
   font-size: 10px;
   padding: 12px 9px
}

.save-note {
   display: block;
   color: #98a3b0;
   font-size: 8px;
   margin-top: 9px
}

.save-note i {
   margin-right: 4px
}

.desk-summary {
   margin-top: 24px;
   background: linear-gradient(135deg, #033a8e, #026fca);
   border-radius: 22px;
   padding: 19px 23px;
   color: #fff;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 15px;
   box-shadow: 0 18px 45px rgba(3, 58, 142, .2)
}

.summary-icon {
   width: 46px;
   height: 46px;
   border-radius: 13px;
   background: rgba(255, 255, 255, .13);
   display: grid;
   place-items: center;
   color: #90ca05
}

.desk-summary span,
.desk-summary strong,
.desk-summary small {
   display: block
}

.desk-summary span {
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: 1.4px;
   opacity: .65
}

.desk-summary strong {
   font-size: 13px;
   margin-top: 4px
}

.desk-summary small {
   font-size: 9px;
   opacity: .7;
   margin-top: 4px
}

.summary-total {
   text-align: right
}

.summary-total strong {
   font-family: Montserrat;
   font-size: 22px;
   color: #fff
}

.summary-total small {
   opacity: .6
}

@media(max-width:1000px) {
   .travel-desk-grid {
      grid-template-columns: 1fr
   }

   .travel-desk-heading {
      align-items: flex-start
   }

   .expense-form {
      max-height: none
   }

   .travel-desk-heading p {
      max-width: none
   }
}

@media(max-width:620px) {
   .travel-desk-heading {
      display: block
   }

   .desk-badge {
      margin-top: 18px
   }

   .desk-card {
      padding: 20px;
      border-radius: 20px
   }

   .desk-card-head {
      align-items: flex-start
   }

   .desk-card-head h3 {
      font-size: 17px
   }

   .live-pill {
      display: none
   }

   .form-grid,
   .flight-bottom-fields,
   .customer-mini-grid {
      grid-template-columns: 1fr
   }

   .desk-actions {
      grid-template-columns: 1fr
   }

   .desk-summary {
      grid-template-columns: auto 1fr
   }

   .summary-total {
      grid-column: 1 / -1;
      text-align: left;
      border-top: 1px solid rgba(255, 255, 255, .15);
      padding-top: 12px
   }

   .expense-row label {
      align-items: flex-start
   }

   .money-input {
      width: 135px
   }

   .trip-type {
      font-size: 10px;
      padding: 10px 5px
   }
}

/* =========================================
   V2 — PUBLIC TRAVEL DESK / ADMIN ENTRY
========================================= */
.agent-help-grid {
   display: grid;
   gap: 12px
}

.agent-help-grid>div {
   display: grid;
   grid-template-columns: 44px 1fr;
   column-gap: 12px;
   align-items: center;
   padding: 14px;
   border: 1px solid #e5ebf2;
   border-radius: 14px;
   background: #fbfdff
}

.agent-help-grid>div>span {
   grid-row: span 2;
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: #eef7df;
   color: #6c9600;
   display: grid;
   place-items: center
}

.agent-help-grid strong {
   font-size: 11px;
   color: #24344d
}

.agent-help-grid small {
   font-size: 9px;
   color: #8793a5
}

.desk-private-note {
   margin-top: 15px;
   padding: 13px;
   border-radius: 13px;
   background: #f7f9fc;
   display: flex;
   gap: 10px;
   color: #77849a
}

.desk-private-note>i {
   color: #033A8E;
   margin-top: 2px
}

.desk-private-note strong {
   display: block;
   font-size: 10px;
   color: #3d4c63
}

.desk-private-note small {
   display: block;
   font-size: 9px;
   line-height: 1.5
}

.summary-status {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #5c8200;
   font-size: 10px;
   font-weight: 800;
   background: #f1f8e4;
   padding: 9px 12px;
   border-radius: 20px
}

.summary-status i {
   font-size: 14px
}

.admin-footer-link {
   font-size: 10px !important;
   color: #8392a9 !important;
   text-decoration: none !important
}

.admin-footer-link:hover {
   color: #033A8E !important
}

@media(max-width:700px) {
   .summary-status {
      display: none
   }
}

/* =========================================
   MULTI-PAGE NAV + PAGE SYSTEM
========================================= */
.nav-dropdown {
   position: relative;
   display: flex;
   align-items: center
}

.nav-dropdown-toggle {
   border: 0;
   background: transparent;
   color: #445168;
   font: 600 15px Poppins, sans-serif;
   cursor: pointer;
   padding: 4px 0;
   display: flex;
   align-items: center;
   gap: 7px;
   position: relative
}

.nav-dropdown-toggle i {
   font-size: 9px;
   transition: transform .25s
}

.nav-dropdown-toggle:after {
   content: "";
   position: absolute;
   height: 2px;
   width: 0;
   left: 0;
   bottom: -7px;
   background: var(--green);
   transition: .3s
}

.nav-dropdown:hover .nav-dropdown-toggle:after,
.nav-dropdown-toggle.active:after {
   width: 100%
}

.nav-dropdown:hover .nav-dropdown-toggle i,
.nav-dropdown.open .nav-dropdown-toggle i {
   transform: rotate(180deg)
}

.nav-dropdown-menu {
   position: absolute;
   top: calc(100% + 17px);
   left: 50%;
   transform: translateX(-50%) translateY(8px);
   width: 245px;
   padding: 9px;
   background: rgba(255, 255, 255, .97);
   border: 1px solid rgba(3, 58, 142, .09);
   border-radius: 16px;
   box-shadow: 0 22px 55px rgba(3, 58, 142, .16);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: .25s;
   backdrop-filter: blur(18px)
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0)
}

.nav-dropdown-menu a {
   display: flex !important;
   align-items: center;
   gap: 12px;
   padding: 12px 11px;
   border-radius: 11px;
   color: #33445c !important;
   text-decoration: none !important
}

.nav-dropdown-menu a:after {
   display: none !important
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
   background: #f2f8fd
}

.nav-dropdown-menu a>i {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   background: #edf7df;
   color: #6b9500;
   font-size: 13px
}

.nav-dropdown-menu a:nth-child(2)>i {
   background: #eaf4ff;
   color: var(--bright-blue)
}

.nav-dropdown-menu span {
   font-size: 11px;
   font-weight: 800
}

.nav-dropdown-menu small {
   display: block;
   font-size: 8px;
   color: #8995a5;
   font-weight: 500;
   margin-top: 3px
}

.page-hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(120deg, #033a8e 0%, #026fca 58%, #06addb 100%);
   color: #fff;
   padding: 145px 0 85px
}

.page-hero:before {
   content: "";
   position: absolute;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   right: -190px;
   top: -240px;
   background: rgba(255, 255, 255, .08);
   filter: blur(10px)
}

.page-hero:after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 55px 55px;
   mask-image: linear-gradient(to right, #000, transparent)
}

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

.back-home {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff !important;
   font-size: 11px;
   font-weight: 700;
   padding: 10px 14px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .08);
   border-radius: 10px;
   margin-bottom: 32px;
   transition: .25s
}

.back-home:hover {
   background: rgba(255, 255, 255, .15);
   transform: translateX(-2px)
}

.page-hero h1 {
   font: 800 clamp(40px, 5.6vw, 72px)/1.04 Montserrat, sans-serif;
   letter-spacing: -2.5px;
   max-width: 900px;
   margin: 0 0 18px
}

.page-hero h1 em {
   font-style: normal;
   color: #90ca05
}

.page-hero p {
   max-width: 720px;
   color: rgba(255, 255, 255, .78);
   font-size: 14px;
   line-height: 1.8
}

.inner-page main>.section:first-of-type {
   padding-top: 80px
}

.inner-page .footer {
   margin-top: 0
}

.home-page .hero {
   min-height: calc(100vh - 0px)
}

.home-page .hero-bottom {
   display: none
}

.home-page .services-strip {
   display: none
}

/* Sliding hero image + content transitions */
.hero-slide {
   opacity: 0 !important;
   transform: translateX(100%) scale(1.06) !important;
   transition: transform 1.15s cubic-bezier(.2, .75, .25, 1), opacity .8s ease !important
}

.hero-slide.active {
   opacity: .38 !important;
   transform: translateX(0) scale(1) !important
}

.hero-slide.prev {
   opacity: 0 !important;
   transform: translateX(-100%) scale(1.04) !important
}

.hero-copy.slide-changing {
   animation: heroCopyIn .65s ease both
}

.hero-visual.slide-changing {
   animation: heroVisualIn .75s ease both
}

@keyframes heroCopyIn {
   from {
      opacity: .15;
      transform: translateX(36px)
   }

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

@keyframes heroVisualIn {
   from {
      opacity: .2;
      transform: translateX(-28px) scale(.98)
   }

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

.hero-slide-text {
   transition: opacity .3s ease
}

@media(max-width:900px) {
   .nav-dropdown-menu {
      left: 0;
      transform: translateY(8px);
      top: calc(100% + 10px)
   }

   .nav-dropdown:hover .nav-dropdown-menu,
   .nav-dropdown.open .nav-dropdown-menu {
      transform: translateY(0);
      transform : translateX(100px)
   }

   .nav-dropdown {
      width: 100%
   }

   .nav-dropdown-toggle {
      width: 100%;
      justify-content: space-between;
      padding: 10px 0
   }

   .nav-dropdown-toggle:after {
      bottom: 2px
   }

   .page-hero {
      padding: 125px 0 65px
   }
}

@media(max-width:700px) {
   .page-hero h1 {
      letter-spacing: -1.7px
   }

   .page-hero p {
      font-size: 12px
   }

   .back-home {
      margin-bottom: 24px
   }

   .home-page .hero-content {
      padding-top: 125px
   }

   .home-page .hero-visual {
      display: none
   }

   .home-page .hero h1 {
      font-size: clamp(2.7rem, 12vw, 4.5rem)
   }

   .home-page .hero-slider-ui {
      bottom: 35px;
      top: auto;
      right: 22px;
      flex-direction: row;
      transform: none
   }

   .home-page .hero-slider-btn.active {
      height: 8px;
      width: 28px
   }
}

/* V2.1 polish — international phone selector + destination flags */
.phone-input-wrap {
   display: grid;
   grid-template-columns: minmax(145px, .9fr) 1fr;
   gap: 8px
}

.phone-input-wrap select,
.phone-input-wrap input {
   width: 100%;
   min-width: 0;
   height: 46px;
   border: 1px solid var(--line);
   border-radius: 11px;
   background: #fff;
   padding: 0 12px;
   font: 600 12px Poppins, sans-serif;
   color: var(--ink);
   outline: none
}

.phone-input-wrap select:focus,
.phone-input-wrap input:focus {
   border-color: var(--sky);
   box-shadow: 0 0 0 3px rgba(6, 173, 219, .1)
}

.study-flag {
   font-size: 42px;
   line-height: 1;
   filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .18))
}

.study-badge {
   background: rgba(144, 202, 5, .14);
   color: #bde86c;
   border: 1px solid rgba(144, 202, 5, .18);
   display: inline-flex;
   margin-top: 20px
}

.study-card .package-wa-btn {
   width: 100%;
   min-height: 45px;
   border: 0;
   cursor: pointer
}

@media(max-width:600px) {
   .phone-input-wrap {
      grid-template-columns: 1fr
   }

   .phone-input-wrap select {
      height: 44px
   }

   .phone-input-wrap input {
      height: 44px
   }
}

/* V2.2 launch polish */
.country-flag img,
.study-flag img {
   width: 64px;
   height: 42px;
   object-fit: cover;
   border-radius: 7px;
   display: block;
   box-shadow: 0 8px 18px rgba(3, 58, 142, .16)
}

.country-flag,
.study-flag {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 48px
}

.package-card,
.visa-package-card,
.study-card {
   contain: layout paint
}

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

@media(max-width:700px) {
   .nav-wrap {
      width: min(100% - 28px, 1240px);
      height: 74px
   }

   .container {
      width: min(100% - 28px, 1180px)
   }

   .hero-content {
      padding-top: 110px
   }

   .hero-copy p {
      font-size: 13px;
      line-height: 1.7
   }

   .hero-actions {
      flex-wrap: wrap
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center
   }

   .footer-grid {
      grid-template-columns: 1fr !important;
      gap: 28px
   }

   .footer-bottom {
      flex-direction: column;
      gap: 8px;
      text-align: center
   }

   .visa-package-grid,
   .study-package-grid,
   .package-grid {
      grid-template-columns: 1fr !important
   }

   .country-flag img,
   .study-flag img {
      width: 58px;
      height: 38px
   }

   .phone-input-wrap {
      grid-template-columns: 1fr
   }

   .phone-input-wrap select,
   .phone-input-wrap input {
      font-size: 11px
   }
}

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

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      transition-duration: .01ms !important
   }
}

\n\n
/* =========================================================\n   V2.3 FINAL POLISH — HERO / VISA DROPDOWN\n========================================================= */
\n\n

/* Keep the hero photography bright and natural. */
.hero-slider:after {
   background: transparent !important;
   pointer-events: none;
}

.hero-shade {
   background: transparent !important;
   pointer-events: none;
}

.hero-slide.active {
   opacity: .88 !important;
   transform: translateX(0) scale(1) !important;
}

.hero-slide {
   transition: transform 1.15s cubic-bezier(.2, .75, .25, 1), opacity .8s ease !important;
}

\n\n

/* A tiny darkening only at the bottom of the destination card so its\n   glass label remains readable; the main hero image stays untouched. */
.destination-gradient {
   background: linear-gradient(\n to top, \n rgba(1, 20, 55, .72) 0%, \n rgba(1, 20, 55, .20) 28%, \n transparent 58%\n) !important;
}

/* Fix the Visa hover bridge: there is no dead gap to cross. */
.nav-dropdown-menu {
   top: calc(100% + 5px) !important;
}

.nav-dropdown-menu::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -8px;
   height: 9px;
   background: transparent;

}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
   pointer-events: auto;

}

@media (max-width: 900px) {
   .nav-dropdown-menu {
      top: calc(100% + 4px) !important;

   }

   .nav-dropdown-menu::before {
      top: -7px;
      height: 8px;
   }

}

/* Reduce expensive effects on small screens for smoother scrolling. */
@media (max-width: 700px) {
   .hero-slide.active {
      opacity: .74 !important;

   }

   .hero-orb {
      filter: blur(70px);
      opacity: .08;

   }

}

/* =========================================================
   AAJ INTERNATIONAL — HOMEPAGE EXPANSION
   V2.3 ADDITIONAL STYLES
========================================================= */

.home-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #026FCA;
}

.section-kicker::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 99px;
    background: #90CA05;
}

.section-kicker.light {
    color: #06ADDB;
}

.section-heading h2,
.final-cta h2,
.holy-feature-content h2,
.travel-desk-copy h2 {
    margin: 0 0 18px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    color: #033A8E;
}

.section-heading h2 em,
.final-cta h2 em,
.holy-feature-content h2 em,
.travel-desk-copy h2 em {
    font-style: normal;
    color: #026FCA;
}

.section-heading p {
    margin: 0 auto;
    max-width: 680px;
    color: #607089;
    line-height: 1.8;
    font-size: 15px;
}


/* -------------------------
   WHY AAJ
------------------------- */

.why-aaj-section {
    background:
        radial-gradient(circle at 10% 20%, rgba(6,173,219,.08), transparent 28%),
        #fff;
}

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

.trust-card {
    position: relative;
    padding: 32px 27px;
    min-height: 275px;
    border: 1px solid rgba(3,58,142,.08);
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 55px rgba(3,58,142,.07);
    transition: .35s ease;
}

.trust-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 25px 65px rgba(3,58,142,.14);
    border-color: rgba(6,173,219,.35);
}

.service-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg,#033A8E,#026FCA);
    color: #fff;
    font-size: 21px;
    margin-bottom: 23px;
    box-shadow: 0 12px 25px rgba(3,58,142,.2);
}

.trust-card h3 {
    margin: 0 0 12px;
    color: #033A8E;
    font-size: 18px;
}

.trust-card p {
    margin: 0 0 20px;
    color: #68778e;
    line-height: 1.7;
    font-size: 13.5px;
}

.trust-card a,
.service-link {
    color: #026FCA;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.trust-card a i,
.service-link i {
    margin-left: 7px;
    transition: transform .25s ease;
}

.trust-card:hover a i,
.service-tile:hover .service-link i {
    transform: translateX(5px);
}


/* -------------------------
   SERVICES
------------------------- */

.services-home-section {
    background: #f5f9fd;
}

.service-showcase {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
}

.service-tile {
    position: relative;
    min-height: 245px;
    padding: 32px;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(3,58,142,.08);
    box-shadow: 0 18px 50px rgba(3,58,142,.06);
    transition: .4s ease;
}

.service-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 65px rgba(3,58,142,.15);
}

.service-tile-large {
    grid-row: span 2;
    min-height: 512px;
    color: #fff;
}

.service-tile-bg,
.service-tile-overlay {
    position: absolute;
    inset: 0;
}

.service-tile-bg {
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}

.service-tile:hover .service-tile-bg {
    transform: scale(1.06);
}

.service-tile-overlay {
    background: linear-gradient(180deg,rgba(3,58,142,.1),rgba(3,58,142,.94));
}

.service-tile-content {
    position: absolute;
    z-index: 2;
    inset: auto 32px 32px;
}

.service-tile-content > i {
    font-size: 30px;
    margin-bottom: 18px;
}

.service-tile-content h3 {
    margin: 0 0 10px;
    font-size: 29px;
}

.service-tile-content p {
    max-width: 450px;
    margin: 0 0 20px;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
}

.service-number {
    position: absolute;
    top: 25px;
    right: 28px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(3,58,142,.38);
}

.service-tile-large .service-number {
    color: rgba(255,255,255,.55);
}

.service-tile:not(.service-tile-large) h3 {
    margin: 20px 0 10px;
    color: #033A8E;
    font-size: 21px;
}

.service-tile:not(.service-tile-large) p {
    margin: 0 0 22px;
    color: #718096;
    font-size: 13.5px;
    line-height: 1.7;
}

.service-tile-icon {
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg,#026FCA,#06ADDB);
    font-size: 20px;
}

.service-tile:not(.service-tile-large) .service-link {
    display: inline-block;
}


/* -------------------------
   DESTINATIONS
------------------------- */

.destinations-home-section {
    background: #fff;
}

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

.destination-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px;
    min-height: 84px;
    border-radius: 17px;
    border: 1px solid rgba(3,58,142,.09);
    background: #fff;
    text-decoration: none;
    color: #033A8E;
    box-shadow: 0 12px 35px rgba(3,58,142,.05);
    transition: .3s ease;
}

.destination-box:hover {
    transform: translateY(-5px);
    border-color: rgba(6,173,219,.4);
    box-shadow: 0 18px 42px rgba(3,58,142,.11);
}

.destination-box img {
    width: 43px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.destination-box div {
    flex: 1;
}

.destination-box strong,
.destination-box small {
    display: block;
}

.destination-box strong {
    font-size: 14px;
}

.destination-box small {
    margin-top: 4px;
    color: #8290a4;
    font-size: 11px;
}

.destination-box > i {
    color: #026FCA;
    font-size: 12px;
    transition: transform .25s ease;
}

.destination-box:hover > i {
    transform: translateX(4px);
}

.section-action {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.btn-blue {
    background: #026FCA;
    color: #fff;
}


/* -------------------------
   HOLY JOURNEY
------------------------- */

.holy-feature-section {
    background: linear-gradient(135deg,#f4f9fd,#fff);
}

.holy-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.holy-feature-image {
    position: relative;
    min-height: 530px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(3,58,142,.16);
}

.holy-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 530px;
    object-fit: cover;
    display: block;
}

.holy-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 40%,rgba(3,58,142,.72));
}

.holy-floating-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0,0,0,.16);
}

.holy-floating-badge > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #90CA05;
    color: #fff;
}

.holy-floating-badge strong,
.holy-floating-badge small {
    display: block;
}

.holy-floating-badge strong {
    color: #033A8E;
    font-size: 13px;
}

.holy-floating-badge small {
    color: #77869b;
    margin-top: 4px;
    font-size: 10px;
}

.holy-feature-content h2 {
    font-size: clamp(32px,4vw,48px);
}

.holy-feature-content > p {
    color: #65748a;
    line-height: 1.9;
    font-size: 15px;
    max-width: 600px;
}

.feature-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin: 25px 0 32px;
}

.feature-checks span {
    color: #3c506a;
    font-size: 13px;
}

.feature-checks i {
    color: #90CA05;
    margin-right: 8px;
}


/* -------------------------
   TRAVEL DESK
------------------------- */

.travel-desk-home-section {
    background: #fff;
}

.travel-desk-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 60px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%,rgba(6,173,219,.24),transparent 25%),
        linear-gradient(135deg,#033A8E,#026FCA);
    box-shadow: 0 30px 80px rgba(3,58,142,.2);
}

.travel-desk-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    right: -130px;
    top: -170px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.018);
}

.travel-desk-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 30px;
    transform: rotate(-8deg);
}

.travel-desk-copy {
    position: relative;
    z-index: 2;
}

.travel-desk-copy h2 {
    color: #fff;
    font-size: clamp(30px,3.7vw,47px);
}

.travel-desk-copy h2 em {
    color: #90CA05;
}

.travel-desk-copy p {
    max-width: 650px;
    color: rgba(255,255,255,.78);
    line-height: 1.8;
    margin: 0 0 20px;
    font-size: 14px;
}

.route-animation {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255,255,255,.75);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.route-animation i {
    color: #90CA05;
    animation: routePlane 2.5s infinite ease-in-out;
}

@keyframes routePlane {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.travel-desk-action {
    position: relative;
    z-index: 2;
    min-width: 180px;
    text-align: center;
}

.travel-desk-action small {
    display: block;
    margin-top: 14px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
}

.travel-desk-action small i {
    color: #90CA05;
    margin-right: 4px;
}


/* -------------------------
   PROCESS
------------------------- */

.trust-process-section {
    background:
        radial-gradient(circle at 90% 20%,rgba(2,111,202,.07),transparent 25%),
        #f7fafc;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.process-card {
    padding: 35px 25px;
    text-align: center;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(3,58,142,.07);
    box-shadow: 0 15px 40px rgba(3,58,142,.06);
    transition: .3s ease;
}

.process-card:hover {
    transform: translateY(-7px);
}

.process-card > span {
    display: block;
    margin-bottom: 15px;
    color: #90CA05;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 11px;
}

.process-card > i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 17px;
    background: #eef7fc;
    color: #026FCA;
    font-size: 21px;
}

.process-card h3 {
    margin: 0 0 9px;
    color: #033A8E;
}

.process-card p {
    margin: 0;
    color: #77869b;
    font-size: 13px;
    line-height: 1.7;
}

.process-line {
    width: 45px;
    height: 2px;
    background: linear-gradient(90deg,#06ADDB,#90CA05);
}


/* -------------------------
   FINAL CTA
------------------------- */

.final-cta-section {
    background: linear-gradient(135deg,#022d70,#033A8E 50%,#026FCA);
    color: #fff;
}

.final-cta-world {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 310px;
    color: rgba(255,255,255,.035);
}

.final-cta {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: auto;
    text-align: center;
}

.final-cta h2 {
    color: #fff;
    font-size: clamp(38px,5vw,62px);
}

.final-cta h2 em {
    color: #90CA05;
}

.final-cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.76);
    line-height: 1.8;
}

.final-cta-actions {
    display: flex;
    justify-content: center;
    gap: 13px;
    flex-wrap: wrap;
}

.final-contact-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17px;
    margin-top: 27px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

.final-contact-line b {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #90CA05;
}

.final-contact-line i {
    color: #90CA05;
    margin-right: 5px;
}


/* -------------------------
   MOBILE
------------------------- */

@media (max-width: 1000px) {

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

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

    .service-showcase {
        grid-template-columns: 1fr 1fr;
    }

    .service-tile-large {
        grid-column: span 2;
        grid-row: auto;
        min-height: 430px;
    }

    .holy-feature {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .travel-desk-banner {
        grid-template-columns: auto 1fr;
    }

    .travel-desk-action {
        grid-column: 2;
        text-align: left;
    }

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

    .process-line {
        width: 2px;
        height: 28px;
        margin: auto;
    }
}

@media (max-width: 650px) {

    .home-section {
        padding: 75px 0;
    }

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

    .section-heading h2,
    .holy-feature-content h2 {
        font-size: 31px;
    }

    .trust-grid,
    .destination-grid,
    .service-showcase {
        grid-template-columns: 1fr;
    }

    .service-tile-large {
        grid-column: auto;
        min-height: 400px;
    }

    .holy-feature-image,
    .holy-feature-image img {
        min-height: 380px;
    }

    .feature-checks {
        grid-template-columns: 1fr;
    }

    .travel-desk-banner {
        grid-template-columns: 1fr;
        padding: 38px 25px;
    }

    .travel-desk-action {
        grid-column: auto;
        text-align: left;
    }

    .travel-desk-icon {
        width: 65px;
        height: 65px;
    }

    .final-cta-world {
        font-size: 190px;
        right: -35px;
    }

    .final-contact-line {
        flex-direction: column;
        gap: 9px;
    }

    .final-contact-line b {
        display: none;
    }
}

/* =========================================================
   AAJ INTERNATIONAL — BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 92px;
    z-index: 998;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #033A8E,
        #026FCA
    );

    color: #fff;
    font-size: 15px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    box-shadow: 0 12px 30px rgba(3,58,142,.25);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

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

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(3,58,142,.35);
}

.back-to-top i {
    transition: transform .25s ease;
}

.back-to-top:hover i {
    transform: translateY(-3px);
}


/* Mobile */
@media (max-width: 650px) {

    .back-to-top {
        right: 17px;
        bottom: 82px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 14px;
    }

}

/* =========================================================
   AAJ INTERNATIONAL — HERO FINAL PREMIUM POLISH
   V2.3 FINAL
========================================================= */

/* ---------- HERO DEPTH ---------- */

.hero {
    isolation: isolate;
}

.hero-slider {
    transform: translateZ(0);
}

.hero-slide {
    filter: saturate(1.04) contrast(1.02);
}

/* Very subtle readability layer.
   Keeps photography visible instead of putting a blue wash over it. */
.hero-content::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 18%;
    width: 720px;
    height: 470px;
    background: radial-gradient(
        ellipse,
        rgba(3,58,142,.16),
        transparent 68%
    );
    pointer-events: none;
    z-index: -1;
}


/* ---------- HERO HEADING ---------- */

.hero h1 {
    text-shadow:
        0 3px 20px rgba(0,0,0,.18);
}

.hero h1 em {
    text-shadow:
        0 4px 22px rgba(0,0,0,.18);
}


/* ---------- HERO COPY ---------- */

.hero-copy > p {
    text-shadow: 0 2px 14px rgba(0,0,0,.18);
}

.hero-points {
    text-shadow: 0 2px 12px rgba(0,0,0,.14);
}


/* ---------- PREMIUM CTA ---------- */

.hero-actions .btn {
    position: relative;
    overflow: hidden;
}

.hero-actions .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );
    transform: skewX(-18deg);
    transition: left .7s ease;
    pointer-events: none;
}

.hero-actions .btn:hover::after {
    left: 140%;
}


/* ---------- DESTINATION CARD ---------- */

.destination-card {
    box-shadow:
        0 38px 90px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.18);
}

.destination-card img {
    filter: saturate(1.05) contrast(1.03);
    transition:
        transform 1.1s cubic-bezier(.2,.75,.25,1),
        filter .6s ease;
}

.destination-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.1) contrast(1.04);
}

.destination-label {
    box-shadow:
        0 10px 35px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* ---------- FLOATING CARDS ---------- */

.float-card {
    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.float-card:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.32);
    box-shadow:
        0 22px 45px rgba(0,0,0,.22);
}

.card-global {
    animation:
        float 5s ease-in-out infinite,
        heroFloatGlow 4s ease-in-out infinite;
}

.card-visa {
    animation:
        float 6s ease-in-out infinite reverse,
        heroFloatGlow 5s ease-in-out infinite reverse;
}

@keyframes heroFloatGlow {
    50% {
        filter: brightness(1.08);
    }
}


/* ---------- HERO BOTTOM STRIP ---------- */

.hero-bottom {
    background: rgba(1,25,75,.48);
    box-shadow:
        0 -15px 45px rgba(0,0,0,.08);
}

.hero-bottom-grid > div {
    position: relative;
    transition: transform .3s ease;
}

.hero-bottom-grid > div:hover {
    transform: translateY(-2px);
}

.hero-bottom-grid > div > span {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 8px 20px rgba(0,0,0,.08);
}


/* ---------- SCROLL INDICATOR ---------- */

.hero-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    z-index: 8;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    color: rgba(255,255,255,.65);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;

    cursor: pointer;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.hero-scroll-indicator i {
    color: var(--green);
    font-size: 12px;
    animation: heroScrollArrow 1.7s ease-in-out infinite;
}

.hero-scroll-indicator:hover {
    color: #fff;
    transform: translateX(-50%) translateY(-3px);
}

.hero-scroll-indicator.hide {
    opacity: 0;
    pointer-events: none;
}

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

    50% {
        transform: translateY(6px);
    }
}


/* ---------- SLIDE CONTENT TRANSITION ---------- */

.hero-copy.slide-changing,
.hero-visual.slide-changing {
    animation:
        heroContentRefresh .65s cubic-bezier(.2,.75,.25,1);
}

@keyframes heroContentRefresh {

    0% {
        opacity: .35;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .hero-content {
        gap: 45px;
    }

    .hero h1 {
        font-size: clamp(
            2.8rem,
            7vw,
            4.5rem
        );
    }

    .hero-scroll-indicator {
        bottom: 105px;
    }
}


@media (max-width: 700px) {

    .hero-content::before {
        width: 100%;
        height: 400px;
        left: -20%;
        top: 10%;
        background: radial-gradient(
            ellipse,
            rgba(3,58,142,.13),
            transparent 68%
        );
    }

    .hero h1 {
        font-size: clamp(
            2.45rem,
            11vw,
            3.4rem
        );

        letter-spacing: -1.8px;
    }

    .hero-copy > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .hero-points {
        font-size: 12px;
        gap: 8px;
    }

    .hero-actions {
        margin-top: 25px;
    }

    .hero-mini-trust {
        margin-top: 25px;
        gap: 15px;
    }

    .destination-card {
        box-shadow:
            0 25px 60px rgba(0,0,0,.32),
            0 0 0 1px rgba(255,255,255,.14);
    }

    .hero-scroll-indicator {
        display: none;
    }

    .hero-bottom-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 10px 15px;
        padding: 13px 0;
    }

    .hero-bottom-grid > div {
        gap: 8px;
    }

    .hero-bottom-grid > div > span {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .hero-bottom p strong {
        font-size: 11px;
    }

    .hero-bottom p small {
        font-size: 9px;
    }

}


/* ---------- REDUCED MOTION ---------- */

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

    .hero-scroll-indicator i,
    .card-global,
    .card-visa {
        animation: none !important;
    }

    .hero-actions .btn::after {
        display: none;
    }

}