/* =========================================================
   GLOBAL
========================================================= */

:root{
    --blue:#1a5aa1;
    --dark:#06101d;
    --dark2:#091827;
    --white:#ffffff;
    --muted:#9daaba;
    --line:rgba(255,255,255,.10);
    --glass:rgba(255,255,255,.07);
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:#06101d;
    color:#fff;
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden;
}

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

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

.container{
    width:min(1200px,92%);
    margin:auto;
}


/* =========================================================
   PRELOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#06101d;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.8s ease;
}

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

.loader-inner{
    text-align:center;
}

.loader-logo{
    font-family:"Manrope";
    font-size:28px;
    font-weight:800;
    letter-spacing:4px;
}

.loader-logo span{
    color:var(--blue);
}

.loader-line{
    width:180px;
    height:2px;
    background:rgba(255,255,255,.12);
    margin:20px auto;
    overflow:hidden;
}

.loader-line i{
    display:block;
    width:40%;
    height:100%;
    background:var(--blue);
    animation:loading 1.2s infinite;
}

@keyframes loading{
    from{transform:translateX(-120%)}
    to{transform:translateX(350%)}
}


/* =========================================================
   HEADER
========================================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background-color: #12223c;

    padding:2px 0;

    transition:.4s;
}

.header.scrolled{
    padding:13px 0;
    background: #12223c;
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
}

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

.logo{
    font-family:"Manrope";
    font-size:22px;
    font-weight:800;
    letter-spacing:2px;
}

.logo span{
    color:var(--blue);
}

.menu{
    display:flex;
    align-items:center;
    gap:35px;
}

.menu a{
    position:relative;
    color:#fff;
    font-size:17px !important;
    font-weight:500;
}

.menu a:after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    width:0;
    height:2px;
    background:var(--blue);
    transition:.3s;
}

.menu a:hover:after{
    width:100%;
}

.nav-btn{
    padding:13px 20px;
    background:var(--blue);
    border-radius:4px;
}

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

.menu-toggle{
    display:none;
    width:45px;
    height:45px;
    border:1px solid var(--line);
    background:var(--glass);
    color:#fff;
    font-size:20px;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:100vh;
    height:600px;
    position:relative;
    overflow:hidden;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:1.2s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
}

.hero-image{
    position:absolute;
    inset:-5%;
    background-size:cover;
    background-position:center;
    transform:scale(1.12);
    transition:7s ease;
    height: 730px !important;
}

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

.hero-overlay{
    position:absolute;
    inset:0;
}

.hero-content{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    align-items:center;
}

.hero-text{
    max-width:750px;
}

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

    color:#c5d8ed;
    font-size:12px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    transform:translateY(30px);
}

.active .eyebrow{
    animation:reveal .8s .2s forwards;
}

.eyebrow i{
    width:40px;
    height:2px;
    background:var(--blue);
}

.hero h1{
    font-family:"Manrope";
    font-size:clamp(55px,8vw,110px);
    line-height:.9;
    letter-spacing:-6px;
    margin:25px 0;
    transform:translateY(35px);
}

.active h1{
    animation:titleReveal 1s .35s forwards;
}

.hero h1 span{
    color:var(--blue);
}

.hero-description{
    max-width:570px;
    font-size:17px;
    line-height:1.8;
    color:#bdc8d4;
    transform:translateY(30px);
}

.active .hero-description{
    animation:reveal .8s .7s forwards;
}

.hero-buttons{
    display:flex;
    gap:14px;
    margin-top:35px;

    opacity:0;
    transform:translateY(30px);
}

.active .hero-buttons{
    animation:reveal .8s .85s forwards;
}

.btn{
    min-height:58px;
    padding:0 27px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    font-size:14px;
    font-weight:600;

    transition:.35s;
}

.btn-primary{
    background:var(--blue);
}

.btn-primary:hover{
    background:#fff;
    color:#111;
    transform:translateY(-5px);
}

.btn-outline{
    border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    background:#fff;
    color:#111;
    transform:translateY(-5px);
}


/* HERO SIDE */

.hero-side{
    position:absolute;
    right:6%;
    top:50%;
    transform:translateY(-50%);
    z-index:6;

    width:270px;
}

.hero-side-card{
    padding:25px;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(20px);

    animation:float 4s ease-in-out infinite;
}

.hero-side-card small{
    color:#8fa1b4;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.hero-side-card strong{
    display:block;
    font-size:17px;
    margin-top:8px;
}

@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-15px)}
}


/* HERO CONTROLS */

.hero-controls{
    position:absolute;
    z-index:10;
    bottom:55px;
    left:4%;
    display:flex;
    align-items:center;
    gap:12px;
}

.hero-arrow{
    width:50px;
    height:50px;

    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.05);
    color:#fff;

    cursor:pointer;
    transition:.3s;
}

.hero-arrow:hover{
    background:var(--blue);
    border-color:var(--blue);
}

.hero-dots{
    display:flex;
    gap:6px;
    margin:0 10px;
}

.dot{
    width:28px;
    height:3px;
    border:0;
    background:rgba(255,255,255,.3);
    cursor:pointer;
    transition:.4s;
}

.dot.active{
    width:55px;
    background:var(--blue);
}

.hero-number{
    position:absolute;
    right:5%;
    bottom:55px;
    z-index:10;

    font-family:"Manrope";
    font-size:18px;
    letter-spacing:3px;
}

.hero-number span{
    color:var(--blue);
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);

    overflow:hidden;
    background:#fff;
}

.marquee-track{
    width:max-content;
    display:flex;
    padding:25px 0;

    animation:marquee 25s linear infinite;
    background-color: #fff;
}

.marquee-item{
    display:flex;
    align-items:center;
    gap:35px;

    padding:0 35px;

    font-family:"Manrope";
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;
    color: #1a5aa1 !important;
}

.marquee-item i{
    color:var(--blue);
    font-size:10px;
}

@keyframes marquee{
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   SECTION
========================================================= */

.section{
    padding:130px 0;
}

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

.section-label{
    color:#000;
    font-size:18px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:700;
}

.section-title{
    font-family:"Manrope";
    font-size:clamp(40px,5vw,72px);
    line-height:1;
    letter-spacing:-4px;
    margin-top:15px;
    color: #000;
}

.section-title span{
    color:var(--blue);
}

.section-text{
    max-width:450px;
    color:#000;
    font-size: 17px !important; 
    line-height:1.8;
}


/* =========================================================
   FLEET
========================================================= */

.fleet{
    background:#fff;
}

.filter{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.filter button{
    border:1px solid var(--line);
    background:transparent;
    color:#9caabd;
    padding:11px 18px;
    cursor:pointer;
    transition:.3s;
}

.filter button.active,
.filter button:hover{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
}

.fleet-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.vehicle-card{
    position:relative;
    min-height:450px;

    background:#0a1827;
    border:1px solid var(--line);

    overflow:hidden;

    transform-style:preserve-3d;

    transition:
        transform .5s,
        border-color .4s;
}

.vehicle-card:hover{
    border-color:rgba(22,136,255,.6);
    transform:translateY(-12px);
}

.vehicle-image{
    height:300px;
    overflow:hidden;
}

.vehicle-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

.vehicle-card:hover .vehicle-image img{
    transform:scale(1.1);
}

.vehicle-info{
    padding:25px;
    position:relative;
}

.vehicle-category{
    font-size:15px;
    color:var(--blue);
    letter-spacing:2px;
    text-transform:uppercase;
}

.vehicle-info h3{
    font-family:"Manrope";
    font-size:25px;
    margin:7px 0;
}

.vehicle-info p{
    color:#8797aa;
    font-size:17px;
    color: #fff !important;
}

.vehicle-arrow{
    position:absolute;
    right:22px;
    bottom:25px;

    width:45px;
    height:45px;

    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

.vehicle-card:hover .vehicle-arrow{
    background:var(--blue);
    transform:rotate(-45deg);
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience{
    background:#fff;
}

.experience-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.experience-image{
    position:relative;
}

.experience-image img{
    width:100%;
    height:620px;
    object-fit:cover;
}

.experience-image:before{
    content:"";
    position:absolute;
    inset:20px -20px -20px 20px;
    border:2px solid var(--blue);
    z-index:0;
}

.experience-image img{
    position:relative;
    z-index:2;
    border-radius: 10px 10px 10px 10px !important;
}

.experience-badge{
    position:absolute;
    z-index:3;
    bottom:30px;
    right:-25px;

    padding:25px;

    background:var(--blue);
}

.experience-badge strong{
    font-family:"Manrope";
    font-size:35px;
    display:block;
}

.experience-content h2{
    font-family:"Manrope";
    font-size:clamp(40px,5vw,68px);
    line-height:1;
    letter-spacing:-4px;
    margin:15px 0 25px;
    color: #000 !important;
}

.experience-content h2 span{
    color:var(--blue);
}

.experience-content p{
    color:#12223c !important;
    line-height:1.9;
    font-size: 16px !important;
    margin-bottom:35px;
}

.features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.feature{
    padding:22px;
    border:2px solid #1a5aa1;
    background:rgba(255,255,255,.025);
    transition:.4s;
    border-radius: 10px 10px !important;
}

.feature:hover{
    transform:translateY(-7px);
    border-color:var(--blue);
}

.feature i{
    font-size:23px;
    color:#b01b2c;
    margin-bottom:15px;
}

.feature h4{
    margin-bottom:7px;
    color: #000 !important;
    font-size: 18px !important;
}

.feature p{
    margin:0;
    font-size:15px;
}


/* =========================================================
   NUMBERS
========================================================= */

.numbers{
    background:
    linear-gradient(rgba(6,16,29,.94),rgba(6,16,29,.94)),
    url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1800&q=80")
    center/cover fixed;
}

.number-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.number{
    padding:55px 25px;
    text-align:center;
    border-right:1px solid var(--line);
}

.number:last-child{
    border:0;
}

.number strong{
    font-family:"Manrope";
    font-size:55px;
    color:#fff;
}

.number strong span{
    color:var(--blue);
}

.number p{
    color:#8d9caf;
    margin-top:8px;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey{
    position:relative;
    overflow:hidden;
}

.journey-road{
    position:absolute;
    left:0;
    right:0;
    top:55%;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--blue),
        transparent
    );
    opacity:.5;
}

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

.journey-step{
    position:relative;
    padding:30px 20px;
}

.journey-dot{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 8px rgba(22,136,255,.1);
    margin-bottom:35px;
}

.journey-step span{
    font-size:12px;
    color:var(--blue);
    letter-spacing:2px;
}

.journey-step h3{
    font-family:"Manrope";
    font-size:24px;
    margin:10px 0;
}

.journey-step p{
    color:#8494a7;
    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery{
    background:#081522;
}

.gallery-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:15px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
}

.gallery-item:first-child{
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

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

.gallery-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:end;

    padding:25px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );

    opacity:0;
    transition:.4s;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay span{
    font-size:13px;
    letter-spacing:2px;
}


/* =========================================================
   REVIEWS
========================================================= */

.reviews{
    overflow:hidden;
}

.review-track{
    display:flex;
    gap:20px;

    width:max-content;

    animation:reviews 30s linear infinite;
}

.review-track:hover{
    animation-play-state:paused;
}

.review{
    width:380px;
    padding:35px;

    background:#0a1827;
    border:1px solid var(--line);
}

.stars{
    color:#1688ff;
    margin-bottom:25px;
}

.review p{
    color:#b5c1ce;
    line-height:1.8;
    font-size:15px;
}

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

.reviewer-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--blue);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;
}

.reviewer small{
    color:#718195;
}

@keyframes reviews{
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   CTA
========================================================= */

.cta{
    position:relative;
    min-height:550px;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        90deg,
        rgba(3,10,18,.95),
        rgba(3,10,18,.55)
    ),
    url("https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&fit=crop&w=1800&q=90")
    center/cover fixed;
}

.cta-content{
    max-width:850px;
}

.cta-content h2{
    font-family:"Manrope";
    font-size:clamp(45px,7vw,90px);
    line-height:.95;
    letter-spacing:-5px;
    margin:15px 0 30px;
}

.cta-content h2 span{
    color:var(--blue);
}

.cta-content p{
    max-width:600px;
    color:#bdc7d2;
    line-height:1.8;
    margin-bottom:30px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
    background:#030a12;
    padding:80px 0 25px;
}

.footer-grid{
        display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--line);
}

.footer-brand .logo{
    font-size:28px;
}

.footer-brand p{
    color:#fff;
    line-height:1.8;
    max-width:262px;
    margin-top:20px;
    font-size: 17px !important;
}

.footer h4{
    margin-bottom:20px;
    font-size: 23px;
    color: #1a5aa1;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.footer-links a{
    color:#fff;
    font-size:17px;
    transition:.3s;
}

.footer-links a:hover{
    color:#1a5aa1;
    transform:translateX(5px);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:25px;
    color:#566579;
    font-size:13px;
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.whatsapp{
        position: fixed;
    right: 21px;
    bottom: 67px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    z-index: 999;
    box-shadow: 0 10px 35px rgba(37,211,102,.25);
    animation: pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }
    70%{
        box-shadow:0 0 0 15px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:1s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .menu{
        position:fixed;
        top:0;
        right:-100%;
        width:300px;

        background:#071321;
        flex-direction:column;
        justify-content:center;

        transition:.4s;
        border-left:1px solid var(--line);
    }

    .menu.open{
        right:0;
    }

    .menu-toggle{
        display:block;
    }

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

    .experience-wrap{
        grid-template-columns:1fr;
        gap:60px;
    }

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

    .number{
        border-bottom:1px solid var(--line);
    }

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

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

}


@media(max-width:767px){

    .header{
        padding:18px 0;
    }

    .hero{
        height:760px;
        min-height:760px;
    }

    .hero-content{
        align-items:center;
    }

    .hero-text{
        width:100%;
    }

    .hero h1{
        font-size:clamp(50px,15vw,75px);
        letter-spacing:-4px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-buttons{
        flex-wrap:wrap;
    }

    .btn{
        min-height:52px;
        padding:0 20px;
    }

    .hero-side{
        display:none;
    }

    .hero-controls{
        left:15px;
        bottom:35px;
    }

    .hero-number{
        right:15px;
        bottom:45px;
    }

    .section{
        padding:85px 0;
    }

    .section-head{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:40px;
    }

    .section-title{
        letter-spacing:-3px;
    }

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

    .vehicle-card{
        min-height:420px;
    }

    .experience-image img{
        height:430px;
    }

    .experience-badge{
        right:10px;
    }

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

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

    .number{
        padding:35px 10px;
    }

    .number strong{
        font-size:38px;
    }

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

    .journey-road{
        left:10px;
        top:0;
        bottom:0;
        width:2px;
        height:auto;
    }

    .journey-dot{
        margin-bottom:15px;
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:200px 200px 200px;
    }

    .gallery-item:first-child{
        grid-row:span 2;
    }

    .review{
        width:300px;
    }

    .cta{
        min-height:600px;
    }

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

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

}



/* =====================================================
   HERO SLIDER TEXT COLOR FIX
===================================================== */

.hero,
.hero * {
    color: #ffffff;
}

.hero .hero-text h1 {
    color: #000 !important;
}

.hero .hero-text h1 span {
    color: #1a5aa1 !important;
}

.hero .hero-text p,
.hero .hero-description {
    color: rgba(255,255,255,0.82) !important;
}

.hero .eyebrow {
    color: #ffffff !important;
    margin-top: 50px !important;
}

.hero .hero-side-card {
    color: #ffffff !important;
}

.hero .hero-side-card small {
    color: rgba(255,255,255,0.65) !important;
}

.hero .hero-side-card strong {
    color: #ffffff !important;
}

.hero .hero-buttons .btn-primary {
    color: #ffffff !important;
}

.hero .hero-buttons .btn-outline {
    color: #ffffff !important;
}

.hero .hero-buttons .btn-outline i,
.hero .hero-buttons .btn-primary i {
    color: inherit !important;
}

.hero .hero-arrow {
    color: #ffffff !important;
}

.hero .hero-number {
    color: #ffffff !important;
}

.hero .hero-number span {
    color: #1688ff !important;
}
.nav > a > img{
        width: 220px !important;
} 

/* =====================================================
   HEADER
===================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 99999;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}


/* =====================================================
   CONTAINER
===================================================== */

.header .container.nav {

    max-width: 1400px;

    min-height: 85px;

    margin: auto;

    padding: 0 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}


.logo img {

    display: block;

    width: 175px;

    height: auto;

    object-fit: contain;
}


/* =====================================================
   DESKTOP MENU
===================================================== */

.menu {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 32px;
}


/* =====================================================
   NORMAL LINKS
===================================================== */

.menu > a:not(.nav-btn),
.dropdown-toggle {

    position: relative;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 0;

    color: #ffffff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    white-space: nowrap;

    transition: all 0.3s ease;
}


.menu > a:not(.nav-btn):hover,
.dropdown-toggle:hover {

    color: #1a5aa1;
}


/* =====================================================
   LINK UNDERLINE
===================================================== */

.menu > a:not(.nav-btn)::after,
.dropdown-toggle::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0;

    height: 2px;

    background: #1a5aa1;

    transition: width 0.3s ease;
}


.menu > a:not(.nav-btn):hover::after,
.dropdown-toggle:hover::after {

    width: 100%;
}


/* =====================================================
   DROPDOWN
===================================================== */

.dropdown {

    position: relative;
}


/* ARROW */

.dropdown-arrow {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    transition: transform 0.3s ease;
    transform: translate(-2px, -7px);
}


/* =====================================================
   DROPDOWN MENU
===================================================== */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    width: 245px;
    padding: 10px;
    transform: translateX(-50%)
        translateY(12px);
    background: rgba(8, 12, 20, 0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
    z-index: 999999;
}


/* =====================================================
   DROPDOWN ARROW TOP
===================================================== */

.dropdown-menu::before {

    content: "";

    position: absolute;

    top: -6px;

    left: 50%;

    width: 11px;

    height: 11px;

    background: #080c14;

    border-left: 1px solid rgba(255,255,255,0.12);

    border-top: 1px solid rgba(255,255,255,0.12);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =====================================================
   DESKTOP DROPDOWN SHOW
===================================================== */

@media (min-width: 992px) {

    .dropdown:hover .dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(-50%)
            translateY(0);
    }


    .dropdown:hover .dropdown-arrow {

        transform: rotate(180deg);

        color: #1a5aa1;
    }

}


/* =====================================================
   DROPDOWN LINKS
===================================================== */

.dropdown-menu a {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 13px 14px;

    box-sizing: border-box;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    border-radius: 9px;

    transition: all 0.25s ease;
}


.dropdown-menu a span {

    width: 27px;

    height: 27px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(212,175,55,0.12);

    color: #1a5aa1;

    font-size: 10px;

    font-weight: 700;
}


.dropdown-menu a:hover {

    color: #111111;

    background: #1a5aa1;

    transform: translateX(4px);
}


.dropdown-menu a:hover span {

    background: rgba(0,0,0,0.15);

    color: #111111;
}


/* =====================================================
   BOOK YOUR RIDE
===================================================== */

.nav-btn {

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 21px !important;

    color: #fff !important;

    background: #b01b2c;

    border-radius: 8px;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.3s ease;
}


.nav-btn::after {

    display: none !important;
}


.nav-btn > span {

    font-size: 17px;

    transition: transform 0.3s ease;
}


.nav-btn:hover {

    color: #111111 !important;

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(255,255,255,0.12);
}


.nav-btn:hover > span {

    transform: translateX(5px);
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle {

    display: none;

    width: 45px;

    height: 45px;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 8px;

    background: rgba(255,255,255,0.05);

    color: #ffffff;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    transition: all 0.3s ease;

    z-index: 100001;
}


.menu-toggle:hover {

    background: rgba(212,175,55,0.15);

    border-color: #1a5aa1;

    color: #1a5aa1;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1150px) {

    .header .container.nav {

        padding: 0 25px;
    }


    .menu {

        gap: 20px;
    }


    .logo img {

        width: 155px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 991px) {

    .header .container.nav {

        min-height: 75px;

        padding: 0 20px;
    }


    .logo img {

        width: 145px;
    }


    /* SHOW HAMBURGER */

    .menu-toggle {

        display: flex;
    }


    /* =================================================
       MOBILE NAV
    ================================================= */

    .menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;


        overflow-y: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px 20px 20px;

        box-sizing: border-box;

        background: rgba(8,12,20,0.98);

        backdrop-filter: blur(18px);

        -webkit-backdrop-filter: blur(18px);

        border-top: 1px solid rgba(255,255,255,0.08);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-12px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }


    /* MENU OPEN */

    .menu.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


    /* =================================================
       MOBILE LINKS
    ================================================= */

    .menu > a:not(.nav-btn) {

        width: 100%;

        min-height: 52px;

        padding: 15px 5px;

        box-sizing: border-box;

        border-bottom:
            1px solid rgba(255,255,255,0.08);

        font-size: 15px;
    }


    .menu > a:not(.nav-btn)::after {

        display: none;
    }


    /* =================================================
       MOBILE DROPDOWN
    ================================================= */

    .dropdown {

        width: 100%;
    }


    .dropdown-toggle {

        width: 100%;

        min-height: 52px;

        padding: 15px 5px;

        box-sizing: border-box;

        justify-content: space-between;

        border-bottom:
            1px solid rgba(255,255,255,0.08);
    }


    .dropdown-toggle::after {

        display: none;
    }


    /* =================================================
       MOBILE DROPDOWN MENU
    ================================================= */

    .dropdown-menu {

        position: static;

        width: 100%;

        margin: 0;

        padding: 5px 0 5px 12px;

        box-sizing: border-box;

        background: transparent;

        border: none;

        border-radius: 0;

        box-shadow: none;

        transform: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        display: none;
    }


    /* REMOVE TOP ARROW */

    .dropdown-menu::before {

        display: none;
    }


    /* OPEN */

    .dropdown.active .dropdown-menu {

        display: block;
    }


    /* ROTATE ARROW */

    .dropdown.active .dropdown-arrow {

        transform: rotate(180deg);

        color: #1a5aa1;
    }


    /* =================================================
       MOBILE DROPDOWN LINKS
    ================================================= */

    .dropdown-menu a {

        min-height: 47px;

        padding: 10px 12px;

        border-left:
            2px solid rgba(212,175,55,0.45);

        border-radius: 0 8px 8px 0;

        font-size: 14px;
    }


    .dropdown-menu a:hover {

        transform: translateX(3px);
    }


    /* =================================================
       BOOK BUTTON
    ================================================= */

    .menu .nav-btn {

        width: 100%;

        min-height: 50px;

        margin-top: 18px;

        box-sizing: border-box;

        justify-content: center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .header .container.nav {

        min-height: 70px;

        padding: 0 15px;
    }


    .logo img {

        width: 135px;
    }


    .menu-toggle {

        width: 42px;

        height: 42px;

        font-size: 19px;
    }


    .menu {

        padding-left: 15px;

        padding-right: 15px;
    }

}

.about-btn{
        padding: 10px 10px;
    background-color: #fff;
    border-radius: 10px 10px;
    border: 2px solid #1a5aa1;
    width: 200px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.about-btn > a{
    color: #000;
    transition: all 500ms ease;
}
.about-btn > a:hover{
    color: #000;
}




/* =====================================================
   PREMIUM GALLERY
===================================================== */

.travel-gallery {

    position: relative;

    padding: 120px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(212,175,55,0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255,255,255,0.04),
            transparent 30%
        ),
        #080c14;
}


/* Decorative circles */

.travel-gallery::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border: 1px solid rgba(212,175,55,0.08);

    border-radius: 50%;

    left: -200px;
    top: 150px;

    animation: galleryFloat 8s ease-in-out infinite;
}


.travel-gallery::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border: 1px solid rgba(255,255,255,0.04);

    border-radius: 50%;

    right: -250px;
    bottom: 100px;

    animation: galleryFloat 10s ease-in-out infinite reverse;
}


@keyframes galleryFloat {

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

    50% {
        transform: translateY(-30px) rotate(10deg);
    }

}


/* =====================================================
   CONTAINER
===================================================== */

.gallery-container {

    position: relative;

    max-width: 1400px;

    margin: auto;

    z-index: 2;
}


/* =====================================================
   HEADING
===================================================== */

.gallery-heading {

    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;
}


.gallery-mini-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: #1a5aa1;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


.gallery-mini-title span {

    width: 35px;

    height: 1px;

    background: #1a5aa1;
}


.gallery-heading h2 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(35px, 5vw, 60px);

    line-height: 1.1;

    font-weight: 700;
}


.gallery-heading h2 strong {

    color: #1a5aa1;
}


.gallery-heading p {

    max-width: 600px;

    margin: auto;

    color: rgba(255,255,255,0.65);

    font-size: 17px;

    line-height: 1.8;
}


/* =====================================================
   FILTER BUTTONS
===================================================== */

.gallery-filters {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 45px;
}


.filter-btn {

    position: relative;

    padding: 12px 20px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50px;

    background: rgba(255,255,255,0.04);

    color: rgba(255,255,255,0.75);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}


.filter-btn:hover {

    color: #111;

    background: #1a5aa1;

    border-color: #1a5aa1;

    transform: translateY(-3px);
}


.filter-btn.active {

    color: #111;


    background: #1a5aa1;

    border-color: #1a5aa1;

    box-shadow:
        0 10px 30px rgba(212,175,55,0.18);
}


/* =====================================================
   GALLERY GRID
===================================================== */

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-auto-rows: 260px;

    gap: 18px;
}


/* =====================================================
   GALLERY ITEM
===================================================== */

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 16px;

    cursor: pointer;

    background: #12223c;

    animation: galleryReveal 0.7s ease both;
}


/* FEATURED ITEMS */

.gallery-item:nth-child(1) {

    grid-column: span 2;

    grid-row: span 2;
}


.gallery-item:nth-child(4) {

    grid-column: span 2;
}


@keyframes galleryReveal {

    from {

        opacity: 0;

        transform:
            translateY(40px)
            scale(0.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
   IMAGE
===================================================== */

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1),
        filter 0.5s ease;
}


/* =====================================================
   DARK OVERLAY
===================================================== */

.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 25px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.88),
            rgba(0,0,0,0.1) 65%,
            transparent
        );

    opacity: 0;

    transition: opacity 0.4s ease;
}


/* =====================================================
   HOVER
===================================================== */

.gallery-item:hover img {

    transform: scale(1.1);

    filter: brightness(0.7);
}


.gallery-item:hover .gallery-overlay {

    opacity: 1;
}


/* =====================================================
   INFO
===================================================== */

.gallery-info {

    transform: translateY(20px);

    transition: transform 0.4s ease;
}


.gallery-item:hover .gallery-info {

    transform: translateY(0);
}


.gallery-info > span {

    color: #1a5aa1;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.gallery-info h3 {

    margin: 5px 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;
}


.gallery-info p {

    margin: 0;

    color: rgba(255,255,255,0.65);

    font-size: 12px;
}


/* =====================================================
   VIEW BUTTON
===================================================== */

.gallery-view {

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    background: rgba(255,255,255,0.1);

    backdrop-filter: blur(10px);

    color: #ffffff;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        scale(0.7)
        rotate(-20deg);

    opacity: 0;

    transition: all 0.4s ease;
}


.gallery-item:hover .gallery-view {

    opacity: 1;

    transform:
        scale(1)
        rotate(0);
}


.gallery-view:hover {

    background: #1a5aa1;

    color: #111;

    border-color: #1a5aa1;

    transform: scale(1.1) !important;
}


/* =====================================================
   LIGHTBOX
===================================================== */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background: rgba(0,0,0,0.94);

    backdrop-filter: blur(15px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: all 0.35s ease;
}


.gallery-lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.lightbox-content {

    max-width: 1000px;

    max-height: 85vh;

    position: relative;
}


.lightbox-content img {

    display: block;

    max-width: 100%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.6);

    transform: scale(0.85);

    transition: transform 0.4s ease;
}


.gallery-lightbox.active
.lightbox-content img {

    transform: scale(1);
}


/* =====================================================
   LIGHTBOX BUTTONS
===================================================== */

.lightbox-close,
.lightbox-prev,
.lightbox-next {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    cursor: pointer;

    transition: all 0.3s ease;

    z-index: 5;
}


.lightbox-close {

    top: 25px;

    right: 25px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    font-size: 18px;
}


.lightbox-prev,
.lightbox-next {

    top: 50%;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    transform: translateY(-50%);
}


.lightbox-prev {

    left: 25px;
}


.lightbox-next {

    right: 25px;
}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {

    color: #111;

    background: #1a5aa1;

    border-color: #1a5aa1;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .travel-gallery {

        padding: 90px 20px;
    }


    .gallery-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows: 260px;
    }


    .gallery-item:nth-child(1) {

        grid-column: span 2;

        grid-row: span 1;
    }


    .gallery-item:nth-child(4) {

        grid-column: span 1;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .travel-gallery {

        padding: 75px 15px;
    }


    .gallery-heading {

        margin-bottom: 30px;
    }


    .gallery-heading h2 {

        font-size: 36px;
    }


    .gallery-heading p {

        font-size: 14px;

        line-height: 1.7;
    }


    .gallery-mini-title {

        font-size: 10px;

        letter-spacing: 2px;
    }


    .gallery-filters {

        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

        margin-bottom: 30px;

        scrollbar-width: none;
    }


    .gallery-filters::-webkit-scrollbar {

        display: none;
    }


    .filter-btn {

        flex-shrink: 0;

        padding: 10px 16px;

        font-size: 12px;
    }


    .gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

        gap: 12px;
    }


    .gallery-item:nth-child(1),
    .gallery-item:nth-child(4) {

        grid-column: span 1;

        grid-row: span 1;
    }


    /* ALWAYS SHOW INFO ON MOBILE */

    .gallery-overlay {

        opacity: 1;

        padding: 18px;

    }


    .gallery-info {

        transform: translateY(0);
    }


    .gallery-view {

        width: 42px;

        height: 42px;

        opacity: 1;

        transform: scale(1);

    }


    .gallery-info h3 {

        font-size: 17px;
    }


    .gallery-info p {

        font-size: 11px;
    }


    /* LIGHTBOX */

    .gallery-lightbox {

        padding: 15px;
    }


    .lightbox-prev,
    .lightbox-next {

        width: 42px;

        height: 42px;
    }


    .lightbox-prev {

        left: 12px;
    }


    .lightbox-next {

        right: 12px;
    }


    .lightbox-close {

        top: 15px;

        right: 15px;

        width: 42px;

        height: 42px;
    }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .gallery-heading h2 {

        font-size: 31px;
    }


    .gallery-grid {

        grid-auto-rows: 250px;
    }

}



#gallery{
    background-color: #12223c !important;
}
.footer-bottom span{
    color: #fff;
    font-size: 16px !important;
}
.footer-credit > a{
    color: #1a5aa1 !important;
}


















































/*main footer*/

/* =========================================================
   PREMIUM FOOTER
========================================================= */

.footer {
    position: relative;
    overflow: hidden;
    background:#12223c;

    color: #fff;
    padding: 90px 0 25px;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.footer-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: .18;
}

.footer-glow-1 {
    width: 260px;
    height: 260px;
    background: #ffffff;
    left: -120px;
    top: 40px;
    animation: footerGlowOne 8s ease-in-out infinite alternate;
}

.footer-glow-2 {
    width: 220px;
    height: 220px;
    background: #ffffff;
    right: -100px;
    bottom: 20px;
    animation: footerGlowTwo 10s ease-in-out infinite alternate;
}

@keyframes footerGlowOne {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(100px, 60px) scale(1.25);
    }

}

@keyframes footerGlowTwo {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-80px, -50px) scale(1.2);
    }

}


/* =========================================================
   GRID
========================================================= */

.footer-grid {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.5fr;

    gap: 55px;

    align-items: start;

}


/* =========================================================
   BRAND
========================================================= */

.footer-brand .logo {

    width: 190px;
    margin-bottom: 22px;

}

.footer-brand .logo img {

    width: 100%;
    height: auto;
    display: block;

    transition: .5s ease;

}

.footer-brand .logo:hover img {

    transform: scale(1.06);

}


.footer-brand p {

    max-width: 360px;

    color: #fff !important;

    font-size: 16px !important;

    line-height: 1.8;

    margin: 0 0 28px;

}


/* =========================================================
   BOOK BUTTON
========================================================= */

.footer-book-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 13px 20px;

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

    border-radius: 50px;

    color: #fff;

    text-decoration: none;

    overflow: hidden;

    transition: .45s ease;
    font-size: 16px !important;

}


.footer-book-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #fff;

    transform: translateX(-105%);

    transition: .45s ease;

    z-index: -1;

}


.footer-book-btn span,
.footer-book-btn i {

    position: relative;

    z-index: 2;

}


.footer-book-btn:hover {

    color: #08090b;

    border-color: #fff;

    transform: translateY(-4px);

    box-shadow:
        0 12px 35px rgba(255,255,255,.12);

}


.footer-book-btn:hover::before {

    transform: translateX(0);

}


.footer-book-btn i {

    transition: .4s ease;

}


.footer-book-btn:hover i {

    transform: translateX(5px);

}


/* =========================================================
   HEADINGS
========================================================= */

.footer-column h4,
.footer-contact h4 {

    margin: 0;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .3px;

}


.footer-title-line {

    width: 45px;

    height: 2px;

    background: #fff;

    margin: 14px 0 22px;

    position: relative;

    overflow: hidden;

}


.footer-title-line::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: #777;

    left: -100%;

    animation: titleLine 3s ease-in-out infinite;

}


@keyframes titleLine {

    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }

}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.footer-links a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    color: #fff;

    text-decoration: none;

    font-size: 16px !important;

    transition: .4s ease;

}


.footer-links a span {

    font-size: 10px;

    color: rgba(255,255,255,.3);

    transition: .4s ease;

}


.footer-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 1px;

    background: #1a5aa1;

    transition: .4s ease;

}


.footer-links a:hover {

    color: #1a5aa1;

    transform: translateX(7px);

}


.footer-links a:hover span {

    color: #fff;

}


.footer-links a:hover::after {

    width: 100%;

}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-list {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    text-decoration: none;

    color: rgba(255,255,255,.7);

    transition: .4s ease;

}


.contact-icon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.16);

    border-radius: 50%;

    color: #fff;

    transition: .45s ease;

}


.contact-icon i {

    font-size: 18px;

    transition: .4s ease;

}


.contact-text {

    display: flex;

    flex-direction: column;

    font-size: 16px !important;
    color: #fff !important;

    line-height: 1.6;

}


.contact-text small {

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1.3px;

    color: #fff;

    margin-bottom: 2px;

}


.contact-item:hover {

    color: #fff;

    transform: translateX(6px);

}


.contact-item:hover .contact-icon {

    background: #fff;

    color: #08090b;

    transform:
        rotate(8deg)
        scale(1.08);

    box-shadow:
        0 0 25px rgba(255,255,255,.15);

}


.contact-item:hover .contact-icon i {

    transform: scale(1.15);

}


/* =========================================================
   FOOTER LINE
========================================================= */



/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-top: 23px;

    color: rgba(255,255,255,.42);

    font-size: 12px;

}


.footer-credit {

    margin-left: 4px;

}


.footer-credit a {

    color: rgba(255,255,255,.75);

    text-decoration: none;

    font-weight: 600;

    position: relative;

    transition: .35s ease;

}


.footer-credit a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -3px;

    width: 0;

    height: 1px;

    background: #fff;

    transition: .35s ease;

}


.footer-credit a:hover {

    color: #fff;

}


.footer-credit a:hover::after {

    width: 100%;

}


.separator {

    margin: 0 5px;

    color: rgba(255,255,255,.2);

}


/* =========================================================
   PREMIUM STATUS
========================================================= */

.footer-tagline {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    color: #fff;

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 0 rgba(255,255,255,.5);

    animation: statusPulse 2s infinite;

}


@keyframes statusPulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(255,255,255,.45);

    }

    70% {

        box-shadow:
            0 0 0 8px rgba(255,255,255,0);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(255,255,255,0);

    }

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.footer-reveal {

    opacity: 0;

    transform: translateY(35px);

    animation:
        footerReveal .9s cubic-bezier(.22,1,.36,1)
        forwards;

}


.footer-brand {

    animation-delay: .1s;

}


.footer-column:nth-child(2) {

    animation-delay: .2s;

}


.footer-column:nth-child(3) {

    animation-delay: .3s;

}


.footer-contact {

    animation-delay: .4s;

}


@keyframes footerReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .footer {

        padding: 75px 0 25px;

    }


    .footer-grid {

        grid-template-columns:
            1.3fr
            1fr
            1fr;

        gap: 45px;

    }


    .footer-contact {

        grid-column: 1 / -1;

        margin-top: 15px;

    }


    .footer-contact-list {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 20px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer {

        padding: 60px 0 20px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 38px;

    }


    .footer-brand .logo {

        width: 165px;

        margin-bottom: 18px;

    }


    .footer-brand p {

        font-size: 14px;

        line-height: 1.75;

        max-width: 100%;

    }


    .footer-column h4,
    .footer-contact h4 {

        font-size: 17px;

    }


    .footer-links {

        gap: 12px;

    }


    .footer-contact {

        grid-column: auto;

        margin-top: 0;

    }


    .footer-contact-list {

        display: flex;

        gap: 16px;

    }


    .contact-item {

        max-width: 100%;

    }


    .contact-text {

        font-size: 13px;

    }


    .footer-line {

        margin-top: 45px;

    }


    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 12px;

        line-height: 1.7;

    }


    .footer-copy {

        max-width: 100%;

    }


    .footer-tagline {

        justify-content: center;

    }


    .separator {

        display: inline-block;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .footer {

        padding: 50px 0 18px;

    }


    .footer-grid {

        gap: 34px;

    }


    .footer-brand .logo {

        width: 145px;

    }


    .footer-brand p {

        font-size: 13px;

    }


    .footer-book-btn {

        padding: 11px 17px;

        font-size: 13px;

    }


    .contact-icon {

        flex-basis: 38px;

        width: 38px;

        height: 38px;

    }


    .contact-text {

        font-size: 12.5px;

    }


    .footer-bottom {

        font-size: 11px;

    }


    .footer-credit {

        display: block;

        margin-top: 3px;

    }


    .footer-credit .separator {

        margin: 0 3px;

    }

}


/* =========================================================
   FLOATING CALL BUTTON
========================================================= */

.floating-contact {
        position: fixed;
    right: 19px;
    bottom: 140px;
    z-index: 9999;

}


/* CALL BUTTON */

.call-button {

    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #b0192c;

    color: #fff;

    text-decoration: none;

    font-size: 21px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}


/* PULSE RING */

.call-button::before {

    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(17,17,17,.35);

    border-radius: 50%;

    animation: callPulse 2s infinite;

}


/* SECOND RING */

.call-button::after {

    content: "";

    position: absolute;

    inset: -13px;

    border: 1px solid rgba(17,17,17,.15);

    border-radius: 50%;

    animation: callPulse 2s infinite .5s;

}


/* ICON */

.call-button i {

    position: relative;

    z-index: 2;

    animation: phoneRing 2.5s infinite;

}


/* HOVER */

.call-button:hover {

    background: #fff;

    color: #111;

    transform: scale(1.1);

    box-shadow:
        0 15px 40px rgba(0,0,0,.3);

}


/* PULSE */

@keyframes callPulse {

    0% {

        transform: scale(.8);

        opacity: 1;

    }

    70% {

        transform: scale(1.25);

        opacity: 0;

    }

    100% {

        transform: scale(1.25);

        opacity: 0;

    }

}


/* PHONE RING */

@keyframes phoneRing {

    0%,
    35%,
    100% {

        transform: rotate(0);

    }

    5% {

        transform: rotate(12deg);

    }

    10% {

        transform: rotate(-12deg);

    }

    15% {

        transform: rotate(9deg);

    }

    20% {

        transform: rotate(-9deg);

    }

    25% {

        transform: rotate(5deg);

    }

    30% {

        transform: rotate(0);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .floating-contact {

        right: 16px;

        bottom: 18px;

    }


    .call-button {

        width: 52px;

        height: 52px;

        font-size: 18px;

    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .floating-contact {

            right: 24px;
    bottom: 130px;

    }


    .call-button {

        width: 49px;

        height: 49px;

        font-size: 17px;

    }

}

/* =========================================================
   PREMIUM SCROLL TO TOP
========================================================= */

#scrollUp {

    position: fixed;

    right: 22px;
    bottom: 10px;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #111;

    color: #fff;

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

    border-radius: 50%;

    cursor: pointer;

    z-index: 9998;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(.8);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s cubic-bezier(.22,1,.36,1),
        background .4s ease,
        color .4s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.2);

}


/* SHOW BUTTON */

#scrollUp.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


/* ARROW */

#scrollUp i {

    font-size: 15px;

    transition:
        transform .4s ease;

}


/* HOVER */

#scrollUp:hover {

    background: #fff;

    color: #111;

    transform:
        translateY(-5px)
        scale(1.08);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);

}


#scrollUp:hover i {

    transform: translateY(-4px);

}


/* PULSE RING */

#scrollUp::before {

    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(0,0,0,.18);

    border-radius: 50%;

    opacity: 0;

    transition: .4s ease;

}


#scrollUp:hover::before {

    opacity: 1;

    animation: scrollPulse 1.5s infinite;

}


@keyframes scrollPulse {

    0% {
        transform: scale(.9);
        opacity: .7;
    }

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

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #scrollUp {

        right: 16px;

        bottom: 82px;

        width: 45px;

        height: 45px;

    }

    #scrollUp i {

        font-size: 13px;

    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    #scrollUp {
    right: 30px;
    bottom: 15px;
    width: 42px;
    height: 42px;

    }

}

.loader-logo > img{
    width: 250px !important;
}



@media(max-width: 575px){
    .nav > a > img{
        width: 175px !important;
    }
    .eyebrow{
        font-size: 15px !important;
    }
    .hero h1{
        color: #fff !important;
    }
    .hero-description{
        font-size: 17px !important;
    }
    .experience-content p{
        font-size: 17px !important;
    }
    .feature h4{
        font-size: 20px !important;
    }
    .feature p{
        font-size: 17px !important;
    }
    .gallery-mini-title{
        font-size: 16px !important;
    }
    .gallery-heading p{
        font-size: 17px !important;
    }
    .gallery-info > span{
        font-size: 15px !important;
    }
    .gallery-info h3{
        font-size: 20px !important;
    }
    .gallery-info p{
        font-size: 16px !important;
    }
    .section-text{
        font-size: 16px !important;
    }
    .contact-text{
        font-size: 16px !important;
    }
    .footer-copy{
        font-size: 16px !important;
    }
}


@media(max-width: 300px){
    .nav > a > img{
        width: 175px !important;
    }
    .eyebrow{
        font-size: 15px !important;
    }
    .hero h1{
        color: #fff !important;
    }
    .hero-description{
        font-size: 17px !important;
    }
    .experience-content p{
        font-size: 17px !important;
    }
    .feature h4{
        font-size: 20px !important;
    }
    .feature p{
        font-size: 17px !important;
    }
    .gallery-mini-title{
        font-size: 17px !important;
    }
    .gallery-heading p{
        font-size: 17px !important;
    }
    .gallery-info > span{
        font-size: 15px !important;
    }
    .gallery-info h3{
        font-size: 20px !important;
    }
    .gallery-info p{
        font-size: 17px !important;
    }
    .section-text{
        font-size: 17px !important;
    }
    .contact-text{
        font-size: 17px !important;
    }
    .footer-copy{
        font-size: 17px !important;
    }
}






/* =========================================
   AARADHYA TRAVELS PREMIUM HERO
========================================= */

:root {
    --brand-blue: #1A5AA1;
    --light-blue: #248BC6;
    --brand-navy: #102544;
    --brand-red: #B0192C;
    --white: #ffffff;
    --light-white: rgba(255,255,255,0.75);
}


/* HERO */

.premium-hero {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background: var(--brand-navy);
}


/* SLIDE */

.premium-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.premium-slide.active {
    visibility: visible;
    opacity: 1;
    z-index: 2;
}


/* BACKGROUND */

.premium-bg {
        position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* transform: scale(1.12); */
    /* transition: transform 8s ease; */
}
@media(max-width: 575px){
 .premium-bg {
        position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    /* transform: scale(1.12); */
    /* transition: transform 8s ease; */
    background-repeat: no-repeat;
    height: 355px !important;
}   
}
.premium-slide.active .premium-bg {
    transform: scale(1);
}


/* DARK OVERLAY */

.premium-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;
}


/* BLUE / RED LIGHT EFFECT */

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    z-index: 3;
    pointer-events: none;
}

.glow-one {
    width: 300px;
    height: 300px;
    background: var(--light-blue);
    top: -150px;
    right: 10%;
}

.glow-two {
    width: 250px;
    height: 250px;
    background: var(--brand-red);
    bottom: -150px;
    left: 25%;
}


/* CONTAINER */

.premium-container {
    position: relative;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
}


/* CONTENT */

.premium-content {
    width: 650px;
    padding-top: 20px;
}


/* EYEBROW */

.premium-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #b0192c;

    margin-bottom: 22px;

    opacity: 0;
    transform: translateY(30px);
}

.premium-eyebrow span {
    width: 42px;
    height: 2px;
    background: var(--brand-red);
    display: block;
}


/* HEADING */

.premium-content h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(52px, 6vw, 88px);

    line-height: .98;

    font-weight: 800;

    letter-spacing: -3px;

    opacity: 0;
    transform: translateY(50px);
    font-size: 50px !important;
}

.premium-content h1 strong {
    color: var(--light-blue);

    position: relative;
}

.premium-content h1 strong::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 5px;

    background: var(--brand-red);

    transform: scaleX(0);
    transform-origin: left;

    transition: .8s ease;
}

.premium-slide.active
.premium-content h1 strong::after {
    transform: scaleX(1);
}


/* DESCRIPTION */

.premium-content p {
    max-width: 355px;

    margin: 30px 0 35px;

    color: #12223c;

    font-size: 17px !important;
    line-height: 1.8;

    opacity: 0;
    transform: translateY(30px);
}


/* BUTTONS */

.premium-buttons {
    display: flex;
    align-items: center;
    gap: 15px;

    opacity: 0;
    transform: translateY(30px);
}


/* COMMON BUTTON */

.premium-btn {
    position: relative;

    min-height: 56px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .5px;

    transition: .35s ease;

    overflow: hidden;
}


/* PRIMARY BUTTON */

.primary-btn {
    color: #fff;

    background: var(--brand-blue);

    border: 1px solid var(--brand-blue);
    z-index: 0;

    box-shadow:
        0 12px 30px rgba(26,90,161,.35);
}



.primary-btn:hover::before {
    transform: translateX(0);
}

.primary-btn i,
.primary-btn {
    z-index: 1;
}

.primary-btn i {
    transition: .3s ease;
}

.primary-btn:hover i {
    transform: translateX(5px);
}


/* CALL BUTTON */

.call-btn {
    color: #fff;

    border: 1px solid rgba(255,255,255,.35);

    background: #b0192c;

    backdrop-filter: blur(12px);
}

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


/* PHONE */

.call-icon {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    color: #b0192c;
}


/* SIDE INFO */

.premium-info {
    position: absolute;

    right: 50px;
    bottom: 105px;

    z-index: 6;

    min-width: 240px;

    padding: 20px 25px;

    border-left: 3px solid var(--brand-red);

    background: rgba(16,37,68,.42);

    backdrop-filter: blur(15px);

    opacity: 0;

    transform: translateX(40px);
}

.premium-info span {
    display: block;

    color: rgba(255,255,255,.55);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.premium-info strong {
    color: #fff;

    font-size: 15px;

    font-weight: 600;
}

.premium-info b {
    color: var(--brand-red);
    padding: 0 4px;
}


/* CONTROLS */

.premium-controls {
    position: absolute;

    left: 50%;

    bottom: 45px;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 22px;
}


/* ARROWS */

.premium-arrow {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.3);

    background: rgba(255,255,255,.08);

    color: #fff;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: .3s ease;
}

.premium-arrow:hover {
    background: var(--brand-blue);

    border-color: var(--brand-blue);

    transform: scale(1.08);
}


/* DOTS */

.premium-dots {
    display: flex;
    gap: 8px;
}

.premium-dot {
    width: 32px;
    height: 3px;

    padding: 0;

    border: 0;

    background: rgba(255,255,255,.35);

    cursor: pointer;

    transition: .4s ease;
}

.premium-dot.active {
    width: 55px;
    background: var(--brand-red);
}


/* NUMBER */

.premium-number {
    position: absolute;

    left: 50px;
    bottom: 55px;

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255,255,255,.45);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;
}

.premium-number span {
    color: #fff;

    font-size: 24px;

    font-weight: 700;
}

.premium-number i {
    width: 35px;
    height: 1px;

    background: var(--brand-red);
}


/* BOTTOM BRAND LINE */

.premium-bottom-line {
    position: absolute;

    left: 50px;
    right: 50px;

    bottom: 15px;

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 20px;

    color: rgba(255,255,255,.4);

    font-size: 9px;

    letter-spacing: 2px;
}

.premium-bottom-line div {
    height: 1px;

    flex: 1;

    background: rgba(255,255,255,.15);
}


/* =========================================
   SLIDE ANIMATION
========================================= */

.premium-slide.active
.premium-eyebrow {
    animation: heroUp .8s .2s forwards;
}

.premium-slide.active
.premium-content h1 {
    animation: heroUp .9s .35s forwards;
}

.premium-slide.active
.premium-content p {
    animation: heroUp .8s .55s forwards;
}

.premium-slide.active
.premium-buttons {
    animation: heroUp .8s .7s forwards;
}

.premium-slide.active
.premium-info {
    animation: heroRight .8s .8s forwards;
}


@keyframes heroUp {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

}


@keyframes heroRight {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .premium-hero {
        height: 620px;
    }

    .premium-content {
        width: 600px;
    }

    .premium-content h1 {
        font-size: 65px;
    }

    .premium-info {
        right: 25px;
        bottom: 105px;
    }

    .premium-number {
        left: 25px;
    }

    .premium-bottom-line {
        left: 25px;
        right: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .premium-hero {
        height: 650px;
    }

    .premium-bg {
        background-position: 62% center;
    }

    .premium-container {
        align-items: center;
    }

    .premium-content {
    width: 100%;
    padding: 191px 20px 80px;
    }

    .premium-eyebrow {
        font-size: 14px !important;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }

    .premium-eyebrow span {
        width: 30px;
    }

    .premium-content h1 {
        font-size: clamp(46px, 13vw, 65px);
        letter-spacing: -2px;
        line-height: 1;
    }

    .premium-content p {
        font-size: 14px;
        line-height: 1.7;

        margin: 22px 0 25px;

        max-width: 100%;
    }

    .premium-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .premium-btn {
        min-height: 50px;
        padding: 0 17px;

        font-size: 12px;
    }

    .call-icon {
        width: 30px;
        height: 30px;
    }


    /* INFO CARD */

    .premium-info {
        display: none;
    }


    /* CONTROLS */

    .premium-controls {
        bottom: 55px;
    }

    .premium-arrow {
        width: 40px;
        height: 40px;
    }

    .premium-dot {
        width: 22px;
    }

    .premium-dot.active {
        width: 40px;
    }


    /* NUMBER */

    .premium-number {
        left: 20px;
        bottom: 65px;
        font-size: 10px;
    }

    .premium-number span {
        font-size: 18px;
    }

    .premium-number i {
        width: 20px;
    }


    /* BOTTOM LINE */

    .premium-bottom-line {
        left: 20px;
        right: 20px;
        bottom: 15px;

        font-size: 7px;
        gap: 10px;
    }

    .premium-bottom-line span:last-child {
        display: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .premium-hero {
        height: 740px;
        background-color: #fff;
    }

    .premium-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .premium-content h1 {
            font-size: 30px !important;
    }

    .premium-content p {
        font-size: 13px;
    }

    .premium-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .premium-btn {
        width: auto;
        min-width: 170px;
    }

    .premium-controls {
        bottom: 52px;
    }

}





/* =====================================================
   VIHAT KRUPA TRAVELS
   PREMIUM ABOUT SECTION WITH ANIMATIONS
===================================================== */

:root {
    --vk-blue: #1A5AA1;
    --vk-light-blue: #248BC6;
    --vk-navy: #102544;
    --vk-red: #B0192C;
    --vk-white: #ffffff;
    --vk-gray: #667085;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.experience {
    position: relative;
    padding: 120px 0;
    background: #f8fafc;
    overflow: hidden;
}


/* Animated background circles */

.experience::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 80px;

    border: 1px solid rgba(26, 90, 161, .08);
    border-radius: 50%;

    animation: rotateCircle 20s linear infinite;
}


.experience::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    bottom: -250px;

    border: 1px solid rgba(176, 25, 44, .08);
    border-radius: 50%;

    animation: rotateCircleReverse 25s linear infinite;
}


@keyframes rotateCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes rotateCircleReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =====================================================
   WRAPPER
===================================================== */

.experience-wrap {
     position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42% 57%;
    align-items: center;
    gap: 70px;
}


/* =====================================================
   IMAGE AREA
===================================================== */

.experience-image {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================================
   IMAGE FRAME
===================================================== */

.image-frame {
    position: relative;

    width: 100%;
    max-width: 520px;

    height: 510px;

    padding: 10px;

    background: #ffffff;

    border-radius: 25px;

    box-shadow:
        0 30px 80px rgba(16, 37, 68, .15);

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .7s ease;
}


/* animated blue border */

.image-frame::before {
    content: "";

    position: absolute;

    inset: -10px;

    border: 2px solid var(--vk-blue);

    border-radius: 30px;

    opacity: .5;

    animation: borderPulse 3s ease-in-out infinite;
}


@keyframes borderPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .35;
    }

    50% {
        transform: scale(1.025);
        opacity: .75;
    }

}


/* Red corner */

.image-frame::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -22px;
    right: -22px;

    border-top: 5px solid var(--vk-red);
    border-right: 5px solid var(--vk-red);

    border-radius: 0 25px 0 0;

    animation: cornerMove 3s ease-in-out infinite;
}


@keyframes cornerMove {

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

    50% {
        transform: translate(8px, -8px);
    }

}


/* image */

.image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 18px;

    transform: scale(1.03);

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter 1s ease;
}


/* hover image */

.experience-image:hover .image-frame {
    transform: rotate(0deg) translateY(-8px);

    box-shadow:
        0 40px 100px rgba(16, 37, 68, .22);
}


.experience-image:hover .image-frame img {
    transform: scale(1.08);
}


/* =====================================================
   IMAGE SHINE
===================================================== */

.image-frame {
    overflow: visible;
}


.image-frame img {
    position: relative;
}


.image-frame {
    isolation: isolate;
}


.image-frame::marker {
    display: none;
}


/* =====================================================
   EXPERIENCE BADGE
===================================================== */

.experience-badge {
    position: absolute;

    left: -30px;
    bottom: 40px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--vk-blue),
            var(--vk-navy)
        );

    border: 7px solid #ffffff;

    color: #ffffff;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    z-index: 5;

    box-shadow:
        0 20px 50px rgba(16, 37, 68, .25);

    animation: badgeFloat 4s ease-in-out infinite;
}


@keyframes badgeFloat {

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

    50% {
        transform: translateY(-12px) rotate(3deg);
    }

}


/* badge inner ring */

.experience-badge::before {
    content: "";

    position: absolute;

    inset: 7px;

    border: 1px dashed rgba(255,255,255,.5);

    border-radius: 50%;

    animation: badgeRotate 12s linear infinite;
}


@keyframes badgeRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.experience-badge strong {
    position: relative;

    font-size: 43px;
    line-height: 1;

    font-weight: 800;
}


.experience-badge strong sup {
    color: #62c3f5;
    font-size: 23px;
}


.experience-badge span {
    position: relative;

    margin-top: 5px;

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.experience-badge small {
    position: relative;

    margin-top: 3px;

    color: rgba(255,255,255,.7);

    font-size: 13px;
}


/* =====================================================
   FLOATING TRAVEL LABEL
===================================================== */

.travel-label {
    position: absolute;

    right: -25px;
    top: 50px;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 18px;

    background: rgba(255,255,255,.92);

    border: 1px solid rgba(26,90,161,.12);

    border-radius: 12px;

    box-shadow:
        0 20px 50px rgba(16,37,68,.13);

    backdrop-filter: blur(15px);

    animation: labelFloat 4s ease-in-out infinite;
}


@keyframes labelFloat {

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

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

}


.travel-label > i {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--vk-red);

    background: rgba(176,25,44,.1);

    animation: locationPulse 2s infinite;
}


@keyframes locationPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(176,25,44,.35);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(176,25,44,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(176,25,44,0);
    }

}


.travel-label strong {
    display: block;

    color: #12223c;

    font-size: 18px;

    margin-bottom: 4px;
}


.travel-label small {
    display: block;
    color: #b0192c;
    font-size: 14px;
}


/* =====================================================
   CONTENT
===================================================== */

.experience-content {
    padding-right: 20px;
}


/* =====================================================
   SECTION LABEL
===================================================== */

.section-label {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--vk-red);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 18px;
}


.section-label span {
    position: relative;

    width: 40px;
    height: 2px;

    background: var(--vk-red);

    overflow: visible;
}


.section-label span::after {
    content: "";

    position: absolute;

    right: -2px;
    top: -3px;

    width: 8px;
    height: 8px;

    background: var(--vk-blue);

    border-radius: 50%;

    animation: labelDot 1.5s ease-in-out infinite;
}


@keyframes labelDot {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.8);
    }

}


/* =====================================================
   HEADING
===================================================== */

.experience-content h2 {
    position: relative;

    margin: 0;

    color: #12223c !important;

    font-size: clamp(48px, 5vw, 70px);

    line-height: 1;

    font-weight: 800;
    font-size: 45px !important;

    letter-spacing: -3px;
}


.experience-content h2 span {
    position: relative;

    color: #b0192c;

    display: inline-block;
}


/* red underline animation */

.experience-content h2 span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 100%;
    height: 4px;

    border-radius: 10px;

    background: var(--vk-red);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .9s cubic-bezier(.77,0,.18,1);
}


.experience-content.show h2 span::after {
    transform: scaleX(1);
}


/* =====================================================
   DESCRIPTION
===================================================== */

.experience-intro {
    max-width: 650px;

    margin: 30px 0 35px;

    color: var(--vk-gray);

    font-size: 16px;

    line-height: 1.85;
}


/* =====================================================
   FEATURES
===================================================== */

.features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}


/* feature card */

.feature {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 19px;

    background: rgba(255,255,255,.85);

    border: 1px solid #e5ebf2;

    border-radius: 14px;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* animated red line */

.feature::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--vk-blue),
            var(--vk-red)
        );

    transition: width .5s ease;
}


.feature:hover::before {
    width: 100%;
}


.feature:hover {
    transform: translateY(-8px);

    border-color: rgba(26,90,161,.18);

    box-shadow:
        0 20px 40px rgba(16,37,68,.10);
}


/* =====================================================
   FEATURE ICON
===================================================== */

.feature-icon {
    position: relative;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(26,90,161,.12),
            rgba(36,139,198,.08)
        );

    color: var(--vk-blue);

    font-size: 19px;

    overflow: hidden;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.feature:hover .feature-icon {
    transform:
        rotate(-8deg)
        scale(1.08);

    color: #ffffff;

    background: var(--vk-blue);
}


/* icon shine */

.feature-icon::after {
    content: "";

    position: absolute;

    width: 50px;
    height: 100px;

    background: rgba(255,255,255,.3);

    transform: rotate(25deg) translateX(-80px);

    transition: transform .6s ease;
}


.feature:hover .feature-icon::after {
    transform: rotate(25deg) translateX(80px);
}


/* red second card */

.feature:nth-child(2) .feature-icon {
    color: var(--vk-red);

    background: rgba(176,25,44,.08);
}


.feature:nth-child(2):hover .feature-icon {
    color: #ffffff;

    background: var(--vk-red);
}


/* =====================================================
   FEATURE TEXT
===================================================== */

.feature-text h4 {
    margin: 0 0 6px;

    color: var(--vk-navy);

    font-size: 19px !important;

    font-weight: 750;

    transition: color .3s ease;
}


.feature:hover .feature-text h4 {
    color: var(--vk-blue);
}


.feature:nth-child(2):hover .feature-text h4 {
    color: var(--vk-red);
}


.feature-text p {
    margin: 0;

    color: #7b8797;

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   BUTTON
===================================================== */

.about-btn {
    margin-top: 32px;
}


.about-btn a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 15px 25px;

    color: #ffffff;

    background: var(--vk-blue);

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    overflow: hidden;

    box-shadow:
        0 12px 30px rgba(26,90,161,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}



.about-btn a:hover::before {
    transform: translateX(0);
}


.about-btn a span,
.about-btn a i,
.about-btn a {
    z-index: 1;
}


.about-btn a i {
    transition: transform .3s ease;
}


.about-btn a:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(176,25,44,.22);
}


.about-btn a:hover i {
    transform: translateX(6px);
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {
    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 1s cubic-bezier(.2,.8,.2,1),
        transform 1s cubic-bezier(.2,.8,.2,1);
}


.reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* Image comes from left */

.experience-image.reveal {
    transform: translateX(-80px) scale(.96);
}


.experience-image.reveal.show {
    transform: translateX(0) scale(1);
}


/* Content comes from right */

.experience-content.reveal {
    transform: translateX(80px);
}


.experience-content.reveal.show {
    transform: translateX(0);
}


/* =====================================================
   STAGGER FEATURE ANIMATION
===================================================== */

.experience-content .feature {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.experience-content.show .feature:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
}


.experience-content.show .feature:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s;
}


.experience-content.show .feature:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .45s;
}


.experience-content.show .feature:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .6s;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .experience {
        padding: 90px 0;
    }


    .experience-wrap {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .experience-image {
        width: 100%;

        max-width: 650px;

        margin: auto;
    }


    .experience-content {
        padding: 0;
    }


    .experience-content h2 {
        font-size: 60px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .experience {
        padding: 70px 0;
    }


    .experience-wrap {
        gap: 55px;
    }


    .experience-image {
        min-height: 390px;

        padding: 0 12px;
    }


    .image-frame {
        height: 370px;

        border-radius: 20px;
    }


    .image-frame::before {
        inset: -7px;

        border-radius: 24px;
    }


    .image-frame::after {
        width: 65px;
        height: 65px;

        right: -10px;
        top: -10px;

        border-width: 3px;
    }


    /* badge */

    .experience-badge {
        width: 115px;
        height: 115px;

        left: -2px;
        bottom: 10px;

        border-width: 5px;
    }


    .experience-badge strong {
        font-size: 32px;
    }


    .experience-badge strong sup {
        font-size: 17px;
    }


    .experience-badge span {
        font-size: 17px !important;

        letter-spacing: 1px;
    }


    .experience-badge small {
        font-size: 12px !important;
    }


    /* floating card */

    .travel-label {
        right: -2px;
        top: 20px;

        padding: 10px 12px;

        gap: 9px;
    }


    .travel-label > i {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }


    .travel-label strong {
        font-size: 15px !important;
    }


    .travel-label small {
        font-size: 12px !important;
    }


    /* content */

    .experience-content {
        padding: 0 15px;
    }


    .section-label {
        font-size: 14px !important;

        letter-spacing: 2px;
    }


    .section-label span {
        width: 28px;
    }


    .experience-content h2 {
        font-size: 48px;

        letter-spacing: -2px;
    }


    .experience-intro {
        font-size: 14px;

        line-height: 1.75;

        margin: 24px 0 28px;
    }


    /* features */

    .features {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .feature {
        padding: 16px;
    }


    .feature-icon {
        flex: 0 0 43px;

        width: 43px;
        height: 43px;

        font-size: 16px;
    }


    .feature-text h4 {
        font-size: 14px;
    }


    .feature-text p {
        font-size: 11px;
    }


    .about-btn {
        margin-top: 25px;
    }


    /* reveal mobile */

    .experience-image.reveal {
        transform: translateY(50px) scale(.96);
    }


    .experience-image.reveal.show {
        transform: translateY(0) scale(1);
    }


    .experience-content.reveal {
        transform: translateY(50px);
    }


    .experience-content.reveal.show {
        transform: translateY(0);
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .experience {
        padding: 60px 0;
    }


    .experience-image {
        min-height: 350px;
    }


    .image-frame {
        height: 330px;
    }


    .experience-content h2 {
        font-size: 42px;
    }


    .travel-label {
        right: -5px;

        max-width: 190px;
    }

}




/* =========================================
   VIHAT KRUPA TRAVELS
   PREMIUM GALLERY
========================================= */

.travel-gallery {
    position: relative;
    padding: 120px 0;
    background: #f6f8fb;
    overflow: hidden;
}


/* BACKGROUND DECORATION */

.travel-gallery::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -250px;
    top: 100px;
    border-radius: 50%;
    background: rgba(9, 83, 149, 0.05);
    filter: blur(5px);
}

.travel-gallery::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -200px;
    bottom: 50px;
    border-radius: 50%;
    background: rgba(9, 83, 149, 0.04);
}


.gallery-container {
    width: min(1240px, 92%);
    margin: auto;
    position: relative;
    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.gallery-heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}

.gallery-mini-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: 3px;

    color: #fff;
    margin-bottom: 17px;
}

.gallery-mini-title span {
    width: 35px;
    height: 2px;
    background: #095395;
    display: block;
}

.gallery-heading h2 {
    margin: 0;

    font-size: 45px !important;
    line-height: 1.05;

    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -2px;
}

.gallery-heading h2 strong {
    color: #095395;
    font-weight: 800;
}

.gallery-heading p {
    margin: 20px auto 0;
    max-width: 570px;
    font-size: 17px;
    line-height: 1.8;
    color: #fff !important;
}


/* =========================================
   FILTER
========================================= */

.gallery-filter-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 42px;
}

.gallery-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 7px;

    background: #ffffff;
    border: 1px solid rgba(9, 83, 149, 0.08);

    border-radius: 100px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.07);
}

.filter-btn {
    border: 0;
    outline: none;

    background: transparent;

    color: #12223c !important;
    font-size: 15px !important;

    padding: 13px 20px;

    border-radius: 100px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: .35s ease;
}

.filter-btn i {
    font-size: 13px;
}

.filter-btn:hover {
    color: #095395;
}

.filter-btn.active {
    background: #b0192c !important;
    color: #fff !important;
    font-size: 15px !important;

    box-shadow:
        0 8px 20px rgba(9, 83, 149, .25);
}


/* =========================================
   GRID
========================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


/* =========================================
   GALLERY ITEM
========================================= */

.gallery-item {
    position: relative;

    min-width: 0;

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

.gallery-item.hide {
    display: none;
}


/* Different card heights */

.gallery-item:nth-child(1),
.gallery-item:nth-child(6) {
    transform: translateY(22px);
}

.gallery-item:nth-child(3),
.gallery-item:nth-child(8) {
    transform: translateY(-15px);
}


/* =========================================
   IMAGE
========================================= */

.gallery-image {

    height: 400px;

    border-radius: 24px;
}
.tempo-one {
    height: 700px !important;
}

.gallery-image::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 30%,
            rgba(0,0,0,.82) 100%
        );
}
.gallery-image img {
    width: 100%;
    height: 100% !important;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter .7s ease;
}


/* =========================================
   HOVER IMAGE
========================================= */

.gallery-item:hover .gallery-image img {
    transform: scale(1.09);
    filter: saturate(1.15);
}


/* =========================================
   NUMBER
========================================= */

.gallery-number {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 3;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.14);

    border: 1px solid rgba(255,255,255,.3);

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    transition: .4s ease;
}

.gallery-item:hover .gallery-number {
    background: #b0192c;
    border-color: #fff;

    transform: rotate(360deg);
}


/* =========================================
   OVERLAY
========================================= */

.gallery-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    padding: 28px 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    transform: translateY(8px);

    transition: .5s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}


/* =========================================
   INFO
========================================= */

.gallery-info {
    min-width: 0;
}

.gallery-info > span {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.7);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.gallery-info h3 {
    margin: 0;

    color: #fff;

    font-size: 19px;
    line-height: 1.25;

    font-weight: 400;
}

.gallery-info h3 strong {
    display: block;

    font-weight: 800;
}

.gallery-info p {
    margin: 8px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 11px;
}


/* =========================================
   VIEW BUTTON
========================================= */

.gallery-view {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.35);

    background: rgba(255,255,255,.12);

    backdrop-filter: blur(12px);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: .4s ease;
}

.gallery-view i {
    font-size: 14px;
}

.gallery-view:hover {
    background: #fff;
    color: #095395;

    transform: rotate(45deg) scale(1.08);
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 1050px) {

    .gallery-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .gallery-image {
        height: 380px;
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(6),
    .gallery-item:nth-child(3),
    .gallery-item:nth-child(8) {
        transform: none;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 800px) {

    .travel-gallery {
        padding: 90px 0;
    }

    .gallery-filters {
        width: 100%;

        border-radius: 18px;

        display: grid;
        grid-template-columns:
            repeat(2, 1fr);

        padding: 7px;
    }

    .filter-btn {
        justify-content: center;
        padding: 12px 10px;
    }

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

        gap: 14px;
    }

    .gallery-image {
        height: 350px;
        border-radius: 19px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 550px) {

    .travel-gallery {
        padding: 70px 0;
    }

    .gallery-container {
        width: calc(100% - 28px);
    }

    .gallery-heading {
        margin-bottom: 30px;
    }

    .gallery-mini-title {
        font-size: 9px;
        letter-spacing: 2px;
        gap: 8px;
    }

    .gallery-mini-title span {
        width: 20px;
    }

    .gallery-heading h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .gallery-heading p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* FILTER */

    .gallery-filter-wrap {
        margin-bottom: 25px;
    }

    .gallery-filters {
        display: flex;

        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        border-radius: 16px;

        scrollbar-width: none;
    }

    .gallery-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;

        white-space: nowrap;

        padding: 11px 15px;

        font-size: 11px;
    }


    /* GRID */

    .gallery-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* IMAGE */

    .gallery-image {
        height: 390px;

        border-radius: 20px;
    }


    /* NUMBER */

    .gallery-number {
        width: 40px;
        height: 40px;

        top: 14px;
        left: 14px;

        font-size: 11px;
    }


    /* OVERLAY */

    .gallery-overlay {
        padding: 22px 18px;
    }

    .gallery-info h3 {
        font-size: 18px;
    }

    .gallery-info p {
        font-size: 10px;
    }

    .gallery-view {
        width: 44px;
        height: 44px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .gallery-heading h2 {
        font-size: 33px;
    }

    .gallery-image {
        height: 100% !important;
    }

}



/* =====================================================
   VIHAT KRUPA TRAVELS
   PREMIUM FLEET SECTION
===================================================== */

.fleet {
    position: relative;
    padding: 120px 0;

    background: #ffffff;

    overflow: hidden;
}


/* BACKGROUND SHAPE */

.fleet::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -300px;
    right: -250px;

    border-radius: 50%;

    background: rgba(9, 83, 149, 0.045);

    pointer-events: none;
}

.fleet::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -180px;
    left: -160px;

    border-radius: 50%;

    background: rgba(9, 83, 149, 0.035);

    pointer-events: none;
}


.fleet-container {
    width: min(1240px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


/* =====================================================
   HEADER
===================================================== */

.fleet-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}


.fleet-heading {
    flex: 1;
}


.fleet-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    color: #b0192c;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 3px;
}


.fleet-label span {
    width: 32px;
    height: 2px;

    background: #095395;

    display: block;
}


.fleet-title {
    margin: 0;

    color: #12223c !important;

    font-size: 45px !important;

    line-height: .98;

    font-weight: 800 !important;

    letter-spacing: -3px;
}


.fleet-title strong {
    display: block;

    color: #b0192c !important;

    font-weight: 800;
}


.fleet-description {
    width: 430px;

    margin: 0;

    color: #12223c;

    font-size: 17px !important;

    line-height: 1.9;
}


/* =====================================================
   GRID
===================================================== */

.fleet-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}


/* =====================================================
   VEHICLE CARD
===================================================== */

.vehicle-card {
    position: relative;

    min-width: 0;

    border-radius: 25px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(9, 83, 149, .10);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .07);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease;
}


.vehicle-card:hover {
    transform: translateY(-12px);

    box-shadow:
        0 30px 70px rgba(9, 83, 149, .16);
}


/* =====================================================
   IMAGE
===================================================== */

.vehicle-image {
    height: 350px;

    position: relative;

    overflow: hidden;

    background: #101820;
}


.vehicle-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter .7s ease;
}


.vehicle-card:hover .vehicle-image img {
    transform: scale(1.10);

    filter: saturate(1.1);
}


/* =====================================================
   IMAGE GRADIENT
===================================================== */

.vehicle-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15) 0%,
            transparent 40%,
            rgba(0,0,0,.72) 100%
        );

    pointer-events: none;
}


/* =====================================================
   NUMBER
===================================================== */

.vehicle-number {
    position: absolute;

    top: 17px;
    left: 17px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.35);

    backdrop-filter: blur(12px);

    z-index: 3;

    transition: .5s ease;
}


.vehicle-card:hover .vehicle-number {
    background: #b0192c;

    border-color: #fff;

    transform: rotate(360deg);
}


/* =====================================================
   VEHICLE TAG
===================================================== */

.vehicle-tag {
    position: absolute;

    top: 17px;
    right: 17px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 13px;

    border-radius: 100px;

    color: #ffffff;

    background: #b0192c;

    backdrop-filter: blur(10px);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.vehicle-tag i {
    font-size: 10px;
}


/* =====================================================
   INFO
===================================================== */

.vehicle-info {
    min-height: 190px;

    padding: 24px 22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 20px;

    background: #ffffff;

    position: relative;
}


.vehicle-category {
    display: block;

    color: #b0192c;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 9px;
}


.vehicle-info h3 {
    margin: 0;

    color: #12223c;
    font-size: 21px !important;

    line-height: 1.15;

    font-weight: 700 !important;

    letter-spacing: -.5px;
}


.vehicle-info h3 strong {
    display: block;

    color: #095395;
    margin-top: 3px !important;

    font-weight: 800;
}


.vehicle-info p {
    margin: 11px 0 0;

    color: #7a838c;

    font-size: 11px;

    line-height: 1.7;
}


/* =====================================================
   ARROW
===================================================== */

.vehicle-arrow {
    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    color: #095395;

    background: #edf5fb;

    transition:
        .4s cubic-bezier(.2,.8,.2,1);
}


.vehicle-arrow i {
    font-size: 13px;

    transition: .4s ease;
}


.vehicle-arrow:hover {
    color: #ffffff;

    background: #095395;

    transform: scale(1.08);
}


.vehicle-arrow:hover i {
    transform: rotate(45deg);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

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

    .vehicle-image {
        height: 390px;
    }

}


/* =====================================================
   TABLET SMALL
===================================================== */

@media (max-width: 800px) {

    .fleet {
        padding: 90px 0;
    }

    .fleet-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 40px;
    }

    .fleet-description {
        width: 100%;

        max-width: 600px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .fleet {
        padding: 75px 0;
    }

    .fleet-container {
        width: calc(100% - 28px);
    }


    .fleet-label {
        font-size: 14px !important;

        letter-spacing: 2px;

        gap: 8px;
    }

    .fleet-label span {
        width: 22px;
    }


    .fleet-title {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .fleet-description {
        font-size: 13px;

        line-height: 1.8;
    }


    .fleet-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .vehicle-card {
        border-radius: 21px;
    }


    .vehicle-image {
        height: 390px;
    }


    .vehicle-info {
        min-height: 175px;

        padding: 21px 19px;
    }


    .vehicle-info h3 {
        font-size: 20px;
    }


    .vehicle-number {
        width: 40px;
        height: 40px;

        top: 14px;
        left: 14px;
    }


    .vehicle-tag {
        top: 14px;
        right: 14px;

        padding: 8px 11px;

        font-size: 14px !important;
    }


    .vehicle-arrow {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .fleet-title {
        font-size: 37px;
    }

    .vehicle-image {
        height: 350px;
    }

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

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   VEHICLE ARROW - PURE CSS
========================================= */

.vehicle-arrow {
    position: absolute !important;

    right: 20px !important;
    bottom: 20px !important;

    width: 50px !important;
    height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #edf5fb !important;

    border: 1px solid rgba(9, 83, 149, 0.12) !important;

    text-decoration: none !important;

    z-index: 20 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition: all .4s ease !important;
}
.vehicle-arrow span{
    font-weight: 800 !important;
}

/* DIAGONAL ARROW */

.arrow-line {
    position: relative;

    width: 17px;
    height: 17px;

    display: block;

    border-top: 2px solid #095395;
    border-right: 2px solid #095395;

    transform: rotate(45deg);

    transition: all .4s ease;
}


/* ARROW TAIL */

.arrow-line::after {
    content: "";

    position: absolute;

    width: 22px;
    height: 2px;

    background: #095395;

    top: 7px;
    right: -4px;

    transform: rotate(-45deg);

    transform-origin: right center;

    transition: all .4s ease;
}


/* HOVER */

.vehicle-arrow:hover {
    background: #b0192c !important;

    border-color: #fff !important;

    transform: translateY(-4px) !important;

    box-shadow:
        0 10px 25px rgba(9, 83, 149, .25);
}


.vehicle-arrow:hover .arrow-line {
    border-color: #ffffff;

    transform:
        rotate(45deg)
        translate(3px, -3px);
}


.vehicle-arrow:hover .arrow-line::after {
    background: #ffffff;
}


/* MOBILE */

@media (max-width: 600px) {

    .vehicle-arrow {
        right: 17px !important;
        bottom: 17px !important;

        width: 45px !important;
        height: 45px !important;
    }

    .arrow-line {
        width: 15px;
        height: 15px;
    }

}



/*contact us*/
/* =====================================================
   PREMIUM BREADCRUMB BANNER
===================================================== */

.breadcrumb-banner {
    position: relative;
    width: 100%;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

/* Background Image */
.breadcrumb-bg {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image: url("assets/img/breadcrumb-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.05);
    animation: breadcrumbZoom 10s ease-in-out infinite alternate;
}

/* Dark Premium Overlay */
.breadcrumb-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(5, 12, 22, 0.92) 0%,
            rgba(5, 12, 22, 0.72) 45%,
            rgba(5, 12, 22, 0.42) 100%
        );
}

/* Content */
.breadcrumb-content {
    width: 100%;
    max-width: 1200px;
    padding: 90px 25px 80px;

    text-align: center;
    color: #fff;

    animation: breadcrumbContent 0.9s ease forwards;
}

/* Small Tag */
.breadcrumb-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 16px;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #ffffff;
}

.breadcrumb-tag i {
    color: #1a5aa1;
    font-size: 14px;
}

/* Heading */
.breadcrumb-content h1 {
    margin: 0 0 22px;

    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;

    font-weight: 800;
    letter-spacing: -2px;

    color: #fff;
}

.breadcrumb-content h1 span {
    color: #1a5aa1;
}

/* Breadcrumb */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: 18px;
    font-weight: 600;
}

.breadcrumb-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #fff;
    text-decoration: none;

    transition: all 0.3s ease;
}

.breadcrumb-nav a:hover {
    color: #1a5aa1;
}

.breadcrumb-nav a i {
    font-size: 13px;
}

/* Arrow */
.breadcrumb-arrow {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;

    color: rgba(255,255,255,0.65);

    font-size: 10px;
}

/* Current Page */
.current-page {
    color: #1a5aa1;
}

/* Bottom Shape */
.breadcrumb-shape {
    position: absolute;
    bottom: -1px;
    left: 0;

    width: 100%;
    height: 45px;

    background: #fff;

    clip-path: ellipse(55% 100% at 50% 100%);
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes breadcrumbZoom {

    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.13);
    }

}

@keyframes breadcrumbContent {

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

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

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .breadcrumb-banner {
        min-height: 350px;
    }

    .breadcrumb-content {
        padding: 80px 20px 70px;
    }

    .breadcrumb-content h1 {
        font-size: clamp(40px, 8vw, 60px);
    }

    .breadcrumb-shape {
        height: 35px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .breadcrumb-banner {
        min-height: 300px;
    }

    .breadcrumb-bg {
        background-position: center center;
    }

    .breadcrumb-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 12, 22, 0.78),
                rgba(5, 12, 22, 0.88)
            );
    }

    .breadcrumb-content {
        padding: 70px 18px 60px;
    }

    .breadcrumb-tag {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 13px;
    }

    .breadcrumb-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .breadcrumb-nav {
        gap: 9px;
        font-size: 12px;
    }

    .breadcrumb-arrow {
        width: 23px;
        height: 23px;
        font-size: 9px;
    }

    .breadcrumb-shape {
        height: 25px;
        clip-path: ellipse(65% 100% at 50% 100%);
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .breadcrumb-banner {
        min-height: 270px;
    }

    .breadcrumb-content {
        padding: 60px 15px 55px;
    }

    .breadcrumb-content h1 {
        font-size: 36px;
    }

    .breadcrumb-tag {
        font-size: 13px;
    }

    .breadcrumb-nav {
        font-size: 15px;
    }

}
.breadcrumb-banner {
    position: relative;
    width: 100%;
    min-height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   PREMIUM CONTACT SECTION
========================================================= */

.travel-contact {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    overflow: hidden;
    background: #f6f8fb;
}


/* BACKGROUND DECORATION */

.travel-contact::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    left: -250px;
    top: 100px;

    border-radius: 50%;

    background: rgba(245, 180, 0, 0.08);

    filter: blur(10px);

    pointer-events: none;
}


.travel-contact::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -200px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(9, 83, 149, 0.07);

    filter: blur(20px);

    pointer-events: none;
}


/* ORBS */

.contact-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: .6;
}

.contact-orb-1 {
    width: 12px;
    height: 12px;
    background: #1a5aa1;
    top: 18%;
    left: 8%;

    animation: contactFloat 4s ease-in-out infinite;
}

.contact-orb-2 {
    width: 8px;
    height: 8px;
    background: #095395;
    right: 12%;
    top: 25%;

    animation: contactFloat 5s ease-in-out infinite reverse;
}


/* CONTAINER */

.contact-container {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.contact-info {
    position: relative;
}


.contact-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #095395;
    font-size: 15px;
    font-weight: 800;

    letter-spacing: 2px;
}


.contact-label span {
    width: 30px;
    height: 2px;

    background: #1a5aa1;
}


.contact-info h2 {
    margin: 0;

    max-width: 550px;

    font-size: 45px !important;

    line-height: 1.05;

    letter-spacing: -2px;

    color: #12223c;
}


.contact-info h2 strong {
    display: block;

    color: #b01b2c;
}


.contact-intro {
    max-width: 520px;

    margin: 25px 0 35px;

    color: #12223c;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-card {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 17px 18px;

    margin-bottom: 13px;

    background: #ffffff;

    border: 1px solid #e9edf2;

    border-radius: 16px;

    text-decoration: none;

    box-shadow: 0 10px 35px rgba(0,0,0,.035);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


.contact-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #1a5aa1;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .4s ease;
}


.contact-card:hover {
    transform: translateX(10px);

    border-color: rgba(9,83,149,.15);

    box-shadow: 0 18px 45px rgba(9,83,149,.10);
}


.contact-card:hover::before {
    transform: scaleY(1);
}


.contact-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 15px;

    border-radius: 14px;

    background: #edf5fb;

    color: #095395;

    font-size: 19px;

    transition: .4s ease;
}


.contact-card:hover .contact-icon {
    background: #095395;
    color: #fff;

    transform: rotate(-6deg) scale(1.08);
}


.whatsapp-icon {
    background: #edf9f2;
    color: #20b968;
}


.contact-card-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.contact-card-text span {
    margin-bottom: 3px;

    color: #b01b2c;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-card-text strong {
    color: #12223c;

    font-size: 18px;
    font-weight: 750;
}


.contact-card-text small {
    margin-top: 3px;

    color: #095395;

    font-size: 14px;
}


.contact-card-arrow {
    margin-left: auto;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #9aa4ad;

    transition: .4s ease;
}


.contact-card:hover .contact-card-arrow {
    color: #095395;

    transform: translate(3px,-3px);
}


/* =========================================================
   FEATURES
========================================================= */

.contact-features {
    display: flex;

    gap: 22px;

    margin-top: 28px;
}


.contact-features div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #12223c;
    font-size: 15px;
    font-weight: 700;
}


.contact-features i {
    color: #1a5aa1;

    font-size: 14px;
}


/* =========================================================
   FORM BOX
========================================================= */

.contact-form-box {
    position: relative;

    padding: 42px;

    background: #ffffff;

    border: 1px solid #e8edf2;

    border-radius: 26px;

    box-shadow:
        0 30px 80px rgba(14,39,63,.09);

    overflow: hidden;
}


.contact-form-box::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(9,83,149,.08);
}


.contact-form-box::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -50px;
    top: -50px;

    border-radius: 50%;

    background: rgba(245,180,0,.07);
}


/* FORM TOP */

.form-top {
    position: relative;

    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 30px;
}


.form-small-title {
    color: #b01b2c;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
}


.form-top h3 {
    margin: 7px 0 0;
    font-size: 30px;
    line-height: 1.2;
    color: #12223c;
}


.form-top h3 span {
    color: #b01b2c;
}


.form-number {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1a5aa1;

    color: #111;

    font-size: 13px;
    font-weight: 800;

    box-shadow: 0 8px 20px rgba(245,180,0,.25);
}


/* =========================================================
   FORM
========================================================= */

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


.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-bottom: 18px;
}


.form-group {
    width: 100%;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #12223c;

    font-size: 16px;

    font-weight: 750;
}


.input-box {
    position: relative;

    display: flex;
    align-items: center;

    height: 53px;

    border: 1px solid #e1e7ec;

    border-radius: 12px;

    background: #fafbfd;

    transition: .35s ease;
}


.input-box i {
    width: 48px;

    text-align: center;

    color: #8b98a3;

    font-size: 14px;

    transition: .35s ease;
}


.input-box input,
.input-box select,
.input-box textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1d2933;
    font-family: inherit;
    font-size: 15px;
}


.input-box input,
.input-box select {
    height: 100%;
}


.input-box input::placeholder,
.input-box textarea::placeholder {
    color: #a7afb7;
}


.input-box select {
    cursor: pointer;
}


.input-box:focus-within {
    border-color: #095395;

    background: #fff;

    box-shadow: 0 0 0 4px rgba(9,83,149,.07);
}


.input-box:focus-within i {
    color: #095395;
}


.full-width {
    margin-bottom: 20px;
}


/* TEXTAREA */

.textarea-box {
    height: auto;

    align-items: flex-start;

    padding-top: 15px;
}


.textarea-box i {
    padding-top: 2px;
}


.input-box textarea {
    resize: vertical;

    min-height: 85px;

    line-height: 1.6;

    padding: 0 15px 12px 0;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;

    height: 58px;

    border: 0;

    border-radius: 13px;

    background: #095395;

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    overflow: hidden;

    box-shadow: 0 12px 30px rgba(9,83,149,.22);

    transition: .4s ease;
}


.contact-submit::before {
    content: "";

    position: absolute;

    width: 0;
    height: 100%;

    left: 0;
    top: 0;

    background: #1a5aa1;

    transition: width .45s ease;
}


.contact-submit span,
.contact-submit i {
    position: relative;
    font-size: 15px !important;
    z-index: 2;
}


.contact-submit i {
    transition: .4s ease;
}


.contact-submit:hover {
    color: #101820;

    transform: translateY(-3px);

    box-shadow: 0 18px 35px rgba(9,83,149,.20);
}


.contact-submit:hover::before {
    width: 100%;
}


.contact-submit:hover i {
    transform: translate(4px,-4px);
}


/* =========================================================
   FORM BOTTOM
========================================================= */

.form-bottom {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 22px;

    color: #12223c;

    font-size: 14px;
}


.form-bottom i {
    color: #20a967;
}


.form-line {
    flex: 1;

    height: 1px;

    background: #e8edf1;
}


.form-bottom strong {
    color: #12223c;

    font-size: 16px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

.reveal-contact {
    opacity: 0;

    transform: translateY(45px);

    animation: contactReveal .9s cubic-bezier(.2,.8,.2,1) forwards;
}


.contact-info {
    animation-delay: .15s;
}


.contact-form-box {
    animation-delay: .3s;
}


@keyframes contactReveal {

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

}


@keyframes contactFloat {

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

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

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contact-container {
        grid-template-columns: 1fr;

        max-width: 750px;

        gap: 55px;
    }

    .contact-info h2 {
        max-width: 700px;
    }

    .contact-intro {
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .travel-contact {
        padding: 75px 15px;
    }


    .contact-container {
        gap: 40px;
    }


    .contact-label {
        font-size: 14px;

        letter-spacing: 1.5px;
    }


    .contact-label span {
        width: 20px;
    }


    .contact-info h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .contact-intro {
        font-size: 15px;

        line-height: 1.7;

        margin: 20px 0 28px;
    }


    .contact-card {
        padding: 13px;

        border-radius: 14px;
    }


    .contact-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        margin-right: 12px;
    }


    .contact-card-text strong {
        font-size: 16px;
    }


    .contact-card-text small {
        font-size: 14px;
    }


    .contact-features {
        flex-wrap: wrap;

        gap: 13px 20px;
    }


    .contact-form-box {
        padding: 25px 18px;

        border-radius: 20px;
    }


    .form-top {
        margin-bottom: 24px;
    }


    .form-top h3 {
        font-size: 25px;
    }


    .form-number {
        width: 40px;
        height: 40px;

        font-size: 11px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-bottom: 16px;
    }


    .input-box {
        height: 67px;
    }


    .contact-submit {
        height: 55px;
    }


    .form-bottom {
        flex-wrap: wrap;

        font-size: 15px;
    }


    .form-line {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .contact-info h2 {
            font-size: 30px !important;
    }


    .contact-card-arrow {
        width: 28px;
        height: 28px;
    }


    .contact-form-box {
        padding: 22px 15px;
    }


    .form-top h3 {
        font-size: 22px;
    }

}

.tempo-details-section {
    padding: 100px 0;
    background: #f7f9fc;
    overflow: hidden;
}

.tempo-details-section .container {
    max-width: 1200px;
    margin: auto;
}


/* Heading */

.tempo-section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.tempo-section-heading span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #095395;
    margin-bottom: 12px;
}

.tempo-section-heading h2 {
    margin: 0 0 15px;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    color: #172033;
}

.tempo-section-heading h2 strong {
    color: #095395;
}

.tempo-section-heading p {
    margin: 0;
    color: #687386;
    font-size: 16px;
    line-height: 1.8;
}


/* Card */

.tempo-detail-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
    transition: all 0.4s ease;
}

.tempo-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.11);
}


/* Image */

.tempo-detail-image {
    width: 100%;
    overflow: hidden;
}

.tempo-detail-image img {
    width: 100%;
    height: 500px !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    margin-bottom:25px;
}
@media(max-width:575px){
    .tempo-detail-image img {
            width: 100%;
    object-fit: contain;
    height: 300px !important;
    margin-bottom: 0px !important;
        
    }
}

.tempo-detail-card:hover .tempo-detail-image img {
    transform: scale(1.04);
}


/* Content */

.tempo-detail-content {
    position: relative;
    padding: 35px 40px 40px;
    text-align: center;
}

.tempo-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #095395;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.tempo-detail-content h3 {
    margin: 0 0 15px;
    font-size: 28px;
    font-weight: 700;
    color: #172033;
}

.tempo-detail-content p {
    max-width: 850px;
    margin: 0 auto 25px;
    color: #687386;
    font-size: 16px;
    line-height: 1.8;
}


/* Features */

.tempo-features {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tempo-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 30px;
    background: #f2f6fa;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

.tempo-features i {
    color: #095395;
    font-size: 14px;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {

    .tempo-details-section {
        padding: 80px 20px;
    }

    .tempo-section-heading h2 {
        font-size: 38px;
    }

    .tempo-detail-image {
        height: 350px;
    }

    .tempo-detail-content {
        padding: 30px;
    }

}


@media (max-width: 767px) {

    .tempo-details-section {
        padding: 65px 15px;
    }

    .tempo-section-heading {
        margin-bottom: 40px;
    }

    .tempo-section-heading h2 {
        font-size: 32px;
    }

    .tempo-section-heading p {
        font-size: 15px;
    }

    .tempo-detail-card {
        margin-bottom: 25px;
        border-radius: 15px;
    }

    .tempo-detail-image {
        height: 100% !important;
    }

    .tempo-detail-content {
        padding: 25px 18px 30px;
    }

    .tempo-detail-content h3 {
        font-size: 23px;
    }

    .tempo-detail-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .tempo-features {
        gap: 8px;
    }

    .tempo-features span {
        padding: 8px 12px;
        font-size: 12px;
    }

}


@media (max-width: 480px) {

    .tempo-section-heading h2 {
        font-size: 28px;
    }

    .tempo-detail-image {
        height: 220px;
    }

    .tempo-detail-content h3 {
        font-size: 21px;
    }

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

    .tempo-features span {
        justify-content: center;
    }

}
.tempo-detail-image > h3{
        font-size: 33px !important;
    font-weight: 700;
    color: #12223c !important;
    margin-bottom: 10px !important;
}
@media(max-width:575px){
    .tempo-detail-image > h3{
        font-size: 24px !important;
    }
}
.tempo-detail-image > p{
            color: #12223c !important;
    line-height: 1.9;
    font-size: 17px !important;
    margin-bottom: 35px;
}
.premium-hero{
    background-color: #fff !important;
}