:root{

    --gold:#C9A227;
    --gold-light:#F5E6C8;

    --maroon:#4A0D1E;

    --black:#121212;

    --white:#F8F6F2;

    --gray:#B5B5B5;

    --dark:#1B1B1B;

}

.custom-navbar{
    background:linear-gradient(
        135deg,
        #121212,
        #1B1B1B,
        #2B2B2B
    );

    border-bottom:1px solid rgba(201,162,39,.35);
}

.hero-btn,
.gold-btn,
.cta-btn{

    background:linear-gradient(
        135deg,
        #C9A227,
        #E6C65A
    );

    color:#121212;

    border:none;

    transition:.4s;
}

.hero-btn:hover,
.gold-btn:hover,
.cta-btn:hover{

    background:linear-gradient(
        135deg,
        #A67C00,
        #C9A227
    );

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(201,162,39,.35);

}

.carousel-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(18,18,18,.65),
        rgba(18,18,18,.45)
    );

}

.travel-card,
.blog-card,
.testimonial-card{

    background:#1B1B1B;

    border:1px solid rgba(201,162,39,.25);

}

.travel-card h3,
.blog-content h3,
.client-info h5{

    color:#F5E6C8;

}

.travel-card p,
.blog-content p,
.testimonial-card p{

    color:#d5d5d5;

}

.footer-section{

    background:#0B0B0B;

}

.footer-section h5,
.footer-logo{

    color:#C9A227;

}

.footer-section a{

    color:#d8d8d8;

}

.footer-section a:hover{

    color:#F5E6C8;

}

.luxury-travel{

    background:linear-gradient(
        135deg,
        #121212,
        #1B1B1B,
        #222
    );

}

.section-title,
.hero-title,
.cta-title{

    color:#F5E6C8;

}

.section-subtitle,
.hero-subtitle{

    color:#C9A227;

}

::-webkit-scrollbar-thumb{

    background:#C9A227;

}

::-webkit-scrollbar-thumb:hover{

    background:#A67C00;

}

/*=========================================
        GOOGLE FONTS
=========================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@400;600;700&display=swap');

/*=========================================
        RESET
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

}

/*=========================================
        COLORS
=========================================*/

:root{

    --gold:#D4AF37;
    --gold-light:#F4E2A1;

    --maroon:#5B0F1B;

    --black:#111111;

    --white:#ffffff;

    --gray:#666666;

}

/*=========================================
        COMMON
=========================================*/

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

section{

    padding:90px 0;

}

.container{

    max-width:1200px;

}

/*=========================================
        NAVBAR
=========================================*/

.custom-navbar{

    background:linear-gradient(
        135deg,
        #D4AF37,
        #F5E6A3
    );

    padding:12px 0;

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

.logo{

    width:78px;

    height:78px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--maroon);

    transition:.4s;

}

.logo:hover{

    transform:rotate(5deg) scale(1.05);

}

.navbar-nav{

    gap:10px;

}

.nav-link{

    color:var(--maroon)!important;

    font-weight:600;

    padding:10px 18px!important;

    border-radius:30px;

    transition:.3s;

}

.nav-link:hover{

    background:var(--maroon);

    color:#fff!important;

}

.nav-link.active{

    background:var(--maroon);

    color:#fff!important;

}

/*=========================================
        SEARCH BOX
=========================================*/

.search-box{

    display:flex;

}

.search-input{

    width:180px;

    height:45px;

    border:none;

    padding:0 15px;

    border-radius:30px 0 0 30px;

    outline:none;

    background:#D3D3D3;

}

.search-btn{

    width:50px;

    border:none;

    background:var(--maroon);

    color:#fff;

    border-radius:0 30px 30px 0;

    transition:.3s;

}

.search-btn:hover{

    background:#111;

}

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

.hero-img{

    width:100%;

    height:100vh;

    object-fit:cover;

    filter:brightness(.45);

}

.carousel-caption{

    top:50%;

    transform:translateY(-50%);

    bottom:auto;

}

.hero-subtitle{

    display:inline-block;

    color:var(--gold);

    font-size:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.hero-title{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.hero-text{

    color:#fff;

    font-size:18px;

    max-width:700px;

    margin:0 auto 30px;

    line-height:1.8;

}

.hero-btn{

    display:inline-block;

    padding:15px 40px;

    border-radius:50px;

    background:var(--gold);

    color:var(--maroon);

    font-weight:700;

    transition:.4s;

}

.hero-btn:hover{

    background:var(--maroon);

    color:#fff;

    transform:translateY(-5px);

}

.carousel-control-next-icon,
.carousel-control-prev-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    background-color:rgba(255,255,255,.25);

}

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

@media(max-width:991px){

.logo{

width:65px;

height:65px;

}

.navbar-nav{

text-align:center;

margin-top:20px;

}

.search-box{

justify-content:center;

margin-top:20px;

}

.hero-title{

font-size:48px;

}

}

@media(max-width:768px){

.hero-title{

font-size:36px;

}

.hero-text{

font-size:16px;

padding:0 20px;

}

.hero-img{

height:80vh;

}

.search-input{

width:160px;

}

}

/*=========================================
        LUXURY TRAVEL SECTION
=========================================*/

.luxury-travel{
    background:linear-gradient(
        135deg,
        #D4AF37 0%,
        #F8E7B5 50%,
        #D4AF37 100%
    );
    position:relative;
    overflow:hidden;
}

.luxury-travel::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.15);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(100px);
}

.luxury-travel::after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(91,15,27,.08);
    border-radius:50%;
    bottom:-120px;
    right:-120px;
    filter:blur(100px);
}

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

.section-subtitle{
    display:inline-block;
    font-size:20px;
    font-family:'Cormorant Garamond',serif;
    color:#5B0F1B;
    letter-spacing:3px;
    margin-bottom:15px;
}

.section-title{
    font-size:54px;
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    color:#5B0F1B;
    margin-bottom:20px;
}

.section-desc{
    max-width:700px;
    margin:auto;
    color:#333;
    line-height:1.8;
    font-size:17px;
}

/*=========================================
        TRAVEL CARD
=========================================*/

.travel-card{
    position:relative;
    overflow:hidden;
    border-radius:25px;
    height:460px;
    cursor:pointer;
    transition:.5s;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.travel-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.travel-card:hover img{
    transform:scale(1.12);
}

.travel-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(17,17,17,.95),
        rgba(17,17,17,.15)
    );
    z-index:1;
}

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

.card-overlay{
    position:absolute;
    left:30px;
    right:30px;
    bottom:30px;
    z-index:2;
}

.card-tag{
    display:inline-block;
    background:#D4AF37;
    color:#5B0F1B;
    font-weight:700;
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:18px;
    font-size:13px;
}

.card-overlay h3{
    color:#fff;
    font-size:34px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:12px;
}

.card-overlay p{
    color:#f3f3f3;
    line-height:1.8;
    margin-bottom:22px;
}

.card-price{
    color:#ffffff;
    margin-bottom:20px;
    font-size:16px;
}

.card-price span{
    display:block;
    color:#D4AF37;
    font-size:30px;
    font-weight:700;
    margin-top:5px;
}

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

.gold-btn{
    display:inline-block;
    padding:14px 34px;
    background:#D4AF37;
    color:#5B0F1B;
    border-radius:50px;
    font-weight:700;
    transition:.4s;
}

.gold-btn:hover{
    background:#5B0F1B;
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.25);
}

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

.travel-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 45px rgba(0,0,0,.25);
}

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

@media(max-width:991px){

.travel-card{
height:420px;
}

.section-title{
font-size:42px;
}

}

@media(max-width:768px){

.travel-card{
height:380px;
}

.card-overlay h3{
font-size:28px;
}

.section-title{
font-size:34px;
}

.section-desc{
font-size:15px;
}

.card-overlay{
left:20px;
right:20px;
bottom:20px;
}

.gold-btn{
padding:12px 28px;
}

}

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

.testimonial-section{
    padding:100px 0;
    background:#ffffff;
    position:relative;
}

.testimonial-section::before{
    content:'';
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(212,175,55,.10);
    border-radius:50%;
    top:-100px;
    left:-100px;
    filter:blur(120px);
}

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

/*=========================================
        TESTIMONIAL CARD
=========================================*/

.testimonial-card{

    background:#ffffff;

    border-radius:25px;

    padding:40px 35px;

    text-align:center;

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

    transition:.4s;

    height:100%;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.stars{

    color:#D4AF37;

    font-size:26px;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#555;

    line-height:1.9;

    font-size:15px;

    margin-bottom:30px;

}

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

.client-info{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}

.client-info img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #D4AF37;

}

.client-info h5{

    color:#5B0F1B;

    font-size:20px;

    margin-bottom:5px;

    font-weight:700;

}

.client-info span{

    color:#888;

    font-size:14px;

}

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

.cta-section{

    padding:120px 0;

    background:linear-gradient(
        135deg,
        #5B0F1B,
        #7B1626
    );

    text-align:center;

    position:relative;

    overflow:hidden;

}

.cta-section::before{

    content:'';

    position:absolute;

    width:450px;

    height:450px;

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

    border-radius:50%;

    top:-200px;

    left:-150px;

    filter:blur(120px);

}

.cta-section::after{

    content:'';

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(212,175,55,.18);

    border-radius:50%;

    bottom:-220px;

    right:-180px;

    filter:blur(120px);

}

.cta-section .container{

    position:relative;

    z-index:2;

}

.cta-subtitle{

    color:#D4AF37;

    font-size:22px;

    font-family:'Cormorant Garamond',serif;

    letter-spacing:3px;

}

.cta-title{

    color:#ffffff;

    font-size:58px;

    font-family:'Cormorant Garamond',serif;

    margin:20px 0;

    font-weight:700;

}

.cta-text{

    max-width:800px;

    margin:auto;

    color:#f5f5f5;

    line-height:1.9;

    font-size:17px;

}

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

.cta-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-btn{

    display:inline-block;

    padding:16px 42px;

    border-radius:50px;

    background:#D4AF37;

    color:#5B0F1B;

    font-weight:700;

    transition:.4s;

}

.cta-btn:hover{

    background:#ffffff;

    color:#5B0F1B;

    transform:translateY(-5px);

}

.cta-outline-btn{

    display:inline-block;

    padding:16px 42px;

    border-radius:50px;

    border:2px solid #D4AF37;

    color:#ffffff;

    font-weight:700;

    transition:.4s;

}

.cta-outline-btn:hover{

    background:#D4AF37;

    color:#5B0F1B;

}

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

@media(max-width:991px){

.cta-title{

font-size:42px;

}

}

@media(max-width:768px){

.cta-title{

font-size:34px;

}

.cta-text{

font-size:15px;

padding:0 15px;

}

.testimonial-card{

padding:25px;

}

.client-info{

flex-direction:column;

}

}

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

.blog-section{
    padding:100px 0;
    background:#ffffff;
}

.blog-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    transition:.4s;
    height:100%;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border:1px solid rgba(212,175,55,.20);
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.18);
}

.blog-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.6s;
}

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

.blog-content{
    padding:30px;
}

.blog-tag{
    display:inline-block;
    background:#D4AF37;
    color:#5B0F1B;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
}

.blog-content h3{
    color:#5B0F1B;
    font-size:30px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:15px;
}

.blog-content p{
    color:#555;
    line-height:1.8;
    margin-bottom:20px;
}

.blog-btn{
    display:inline-block;
    color:#5B0F1B;
    font-weight:700;
    transition:.3s;
}

.blog-btn:hover{
    color:#D4AF37;
}





/*=========================================
            LUXURY GOLD FOOTER
=========================================*/

.footer-section{
    background:linear-gradient(
        135deg,
        #FFF8E1 0%,
        #F4D35E 25%,
        #D4AF37 60%,
        #B8860B 100%
    );
    padding:90px 0 30px;
    border-top:4px solid #5B0F1B;
}

.footer-logo{
    color:#5B0F1B;
    font-size:34px;
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    margin-bottom:20px;
}

.footer-text{
    color:#222;
    line-height:1.8;
}

.footer-section h5{
    color:#5B0F1B;
    margin-bottom:20px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

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

.footer-section ul li{
    margin-bottom:12px;
}

.footer-section a{
    color:#222;
    text-decoration:none;
    transition:.3s;
}

.footer-section a:hover{
    color:#5B0F1B;
    padding-left:5px;
}

.footer-section p{
    color:#222;
    margin-bottom:12px;
}

.footer-section i{
    color:#5B0F1B;
    margin-right:10px;
}

.social-icons{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.social-icons a{
    width:50px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#D4AF37,#F4D35E);
    color:#D4AF37;
    border:2px solid #D4AF37;
    text-decoration:none;
    transition:.4s ease;
    box-shadow:0 8px 20px rgba(91,15,27,.30);
}

.social-icons a:hover{
    background:linear-gradient(135deg,#D4AF37,#F4D35E);
    color:#5B0F1B;
    border-color:#D4AF37;
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 12px 30px rgba(212,175,55,.45);
}






/*=========================
        DIVIDER
=========================*/

.footer-section hr{
    border:none;
    height:1px;
    background:rgba(91,15,27,.25);
    margin:45px 0 20px;
}

/*=========================
       COPYRIGHT
=========================*/

.copyright{
    text-align:center;
    color:#333;
    font-size:15px;
    letter-spacing:.5px;
}

.copyright strong{
    color:#5B0F1B;
}

/*=========================
     REMOVE EXTRA SPACE
=========================*/

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

.footer-section{
    margin:0;
}




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

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

.whatsapp-btn:hover{
    color:#fff;
    transform:scale(1.08);
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

/*=========================================
            SCROLLBAR
=========================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f4f4f4;
}

::-webkit-scrollbar-thumb{
    background:#D4AF37;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#5B0F1B;
}

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

@media(max-width:991px){

.blog-content h3{
font-size:24px;
}

.footer-section{
text-align:center;
}

.social-icons{
justify-content:center;
}

}

@media(max-width:768px){

.section-title{
font-size:34px;
}

.blog-card img{
height:220px;
}

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

.whatsapp-btn{
width:55px;
height:55px;
font-size:26px;
}

}

@media(max-width:576px){

.hero-title{
font-size:30px;
}

.hero-btn,
.cta-btn,
.cta-outline-btn,
.gold-btn{
width:100%;
text-align:center;
}

.search-box{
width:100%;
}

.search-input{
width:100%;
}

}


/* ===== Part 1 CSS ===== */
/* Navbar */
/* Hero */
/* ... */

/* ===== Part 2 CSS ===== */
/* Travel Cards */
/* ... */

/* ===== Part 3 CSS ===== */
/* Testimonial */
/* CTA */
/* ... */

/* ===== Part 4 CSS ===== */
/* Footer */
/* Blog */
/* ... */

/* ===========================
   JavaScript Animation CSS
=========================== */

.hidden{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

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

.top-btn{
    position:fixed;
    right:25px;
    bottom:100px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#5B0F1B;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    transition:.3s;
}

.top-btn:hover{
    background:#D4AF37;
    color:#111;
}

.hero-title.animate{
    animation:fadeUp 1.2s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}



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

#preloader {
    position: fixed;
    inset: 0; /* top, right, bottom, left = 0 */
    width: 100%;
    height: 100vh;

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

    background: linear-gradient(135deg,#5B0F1B,#7A0022,#5B0F1B);

    z-index: 999999;

    opacity: 1;
    visibility: visible;

    transition: opacity .8s ease, visibility .8s ease;
}

#preloader.hide-preloader{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-content{

    text-align:center;

}

/* Round Logo */

.logo-circle{

    width:180px;
    height:180px;

    border-radius:50%;

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

    background:#ffffff;

    margin:auto;

    overflow:hidden;

    border:4px solid #D4AF37;

    box-shadow:
        0 0 10px rgba(91,15,27,.35),
        0 0 20px rgba(91,15,27,.25),
        0 0 30px rgba(91,15,27,.18);

    animation:logoZoom .8s ease;

}

.loader-logo{

    width:145px;
    height:145px;

    border-radius:50%;

    object-fit:cover;

}

/* Company Name */

.loader-title{

    margin-top:25px;

    color:#D4AF37;

    font-size:52px;

    font-family:'Cormorant Garamond',serif;

    letter-spacing:2px;

}

/* Caption */

.loader-caption{

    color:#ffffff;

    margin-top:12px;

    font-size:17px;

    letter-spacing:5px;

    font-weight:600;

}

/* Loading Line */

.loader-line{

    width:240px;

    height:4px;

    background:#333;

    border-radius:50px;

    margin:35px auto;

    overflow:hidden;

}

.loader-line span{

    display:block;

    width:0;

    height:100%;

    background:linear-gradient(
    90deg,
    #5B0F1B,
    #D4AF37,
    #5B0F1B);

    animation:loading 1s linear forwards;

}

@keyframes loading{

from{

width:0;

}

to{

width:100%;

}

}

@keyframes logoZoom{

0%{

opacity:0;

transform:scale(.4);

}

70%{

transform:scale(1.08);

}

100%{

opacity:1;

transform:scale(1);

}

}   













/* ==========================================
        CITY TOUR HERO SECTION
========================================== */



.city-hero{
    position:relative;
    width:100%;
    height:100vh;

    background:url("../images/city\ tour\ image.png") center center/cover no-repeat;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.city-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        rgba(0,0,0,.10)
    );

}

.city-content{

    position:relative;
    z-index:5;

    max-width:700px;

    color:#fff;

}

.hero-subtitle{

    display:inline-block;

    font-size:18px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#d4af37;

    margin-bottom:18px;

    font-weight:600;

}

.city-content h1{

    font-size:72px;

    font-weight:800;

    margin-bottom:20px;

    line-height:1.1;

    text-transform:uppercase;

}

.city-content p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:35px;

    color:#f5f5f5;

    max-width:600px;

}

.hero-btn{

    display:inline-block;

    padding:16px 40px;

    background:#d4af37;

    color:#000;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.hero-btn:hover{

    background:#fff;

    color:#000;

    transform:translateY(-4px);

}

/* Responsive */

@media(max-width:991px){

.city-content h1{

font-size:54px;

}

}

@media(max-width:768px){

.city-hero{

height:90vh;

text-align:center;

}

.city-content{

margin:auto;

}

.city-content h1{

font-size:42px;

}

.city-content p{

font-size:17px;

}

}

@media(max-width:480px){

.city-content h1{

font-size:34px;

}

.hero-btn{

padding:14px 30px;

}

}


 .package-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.package-img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.package-body{
    padding:25px;
    text-align:center;
}

.package-title{
    font-size:36px;
    font-weight:700;
    color:#5B0F1B;
    margin-bottom:25px;
}

.package-btn{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.learn-btn,
.whatsapp-btn{
    flex:1;
    padding:14px 0;
    border-radius:10px;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    color:#000;
    transition:.3s;
}

.learn-btn{
    background:#D4AF37;
}

.learn-btn:hover{
    background:#5B0F1B;
    color:#fff;
}

.whatsapp-btn{
    background:#138808;
}

.whatsapp-btn:hover{
    background:#0f6f06;
    color:#fff;
}





/*==================================
        UAE VISA HERO SECTION
===================================*/
/* =========================================
   VISA HERO
========================================= */

.visa-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;

    background: url("../images/visa\ \ tourist\ image.png")
                center center / cover no-repeat;

    display: flex;
    align-items: center;

    overflow: hidden;
}


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

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

    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0.35)
    );

    z-index: 1;
}


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

.visa-content {
    position: relative;
    z-index: 2;

    max-width: 700px;
    color: #fff;
}


/* =========================================
   VISA SUBTITLE
========================================= */

.visa-content .hero-subtitle {
    display: inline-block;

    color: var(--maroon);

    font-size: 18px;
    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 20px;

    font-weight: 600;
}


/* =========================================
   VISA TITLE
========================================= */

.visa-content h1 {
    font-size: 70px;
    font-weight: 800;

    margin: 0 0 25px;

    color: #fff;
}


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

.visa-content p {
    font-size: 20px;
    line-height: 1.8;

    margin-bottom: 35px;

    color: #f5f5f5;
}


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

.visa-content .hero-buttons {
    display: flex;

    gap: 20px;
    flex-wrap: wrap;
}


/* GOLD BUTTON */

.visa-content .btn-gold {
    background: #D4AF37;
    color: #111;

    padding: 15px 35px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s;
}

.visa-content .btn-gold:hover {
    background: #B8860B;
    color: #fff;
}


/* GREEN BUTTON */

.visa-content .btn-green {
    background: #25D366;
    color: #fff;

    padding: 15px 35px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s;
}

.visa-content .btn-green:hover {
    background: #1EBE5D;
    color: #fff;
}

.visa-content .btn-green i {
    margin-right: 8px;
}


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

@media (max-width: 991px) {

    .visa-hero {
        min-height: 80vh;
    }

    .visa-content h1 {
        font-size: 55px;
    }

    .visa-content p {
        font-size: 18px;
    }

}


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

@media (max-width: 768px) {

    .visa-hero {
        min-height: 80vh;

        background-position: center center;
    }

    .visa-content {
        width: 100%;
        max-width: 100%;

        padding: 0 20px;

        text-align: center;
    }

    .visa-content .hero-subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .visa-content h1 {
        font-size: 42px;
    }

    .visa-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .visa-content .hero-buttons {
        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .visa-hero {
        min-height: 700px;
    }

    .visa-content h1 {
        font-size: 34px;
    }

    .visa-content p {
        font-size: 15px;
    }

    .visa-content .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .visa-content .btn-gold,
    .visa-content .btn-green {
        width: 100%;
        max-width: 250px;

        text-align: center;
    }

}


/*====================================
        UAE VISA INTRO
=====================================*/

.visa-intro{

    padding:80px 0;

    background:#fff;

}

.visa-tag{

    display:inline-block;

    background:#d4af37;

    color:#000;

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

}

.visa-title{
.visa-title{
    font-size: 38px;
    font-weight: 700;
    color: #8B4513;
    line-height: 1.2;
    margin-bottom: 15px;
}

}

.visa-subtitle{

    color:#5B0F1B;

    font-weight:600;

    margin:20px 0;

}

.visa-text{

    font-size:17px;

    line-height:32px;

    color:#555;

    text-align:justify;

}

.visa-feature{

    display:grid;

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

    gap:15px;

    margin-top:30px;

    font-weight:600;

    color:#444;

}

.visa-feature div{

    background:#fafafa;

    padding:15px;

    border-radius:10px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.visa-btn{

    display:flex;

    gap:15px;

}

.apply-btn{

    background:#5B0F1B;

    color:#fff;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.apply-btn:hover{

    background:#5B0F1B;

    color:#fff;

}

.whatsapp-btn{

    background:#25D366;

    color:#fff;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.whatsapp-btn:hover{

    background:#1aa94f;

    color:#fff;

}

.visa-image{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.18);

    transform:translateY(-30px);
    
}


/* Responsive */

@media(max-width:991px){

.visa-image{

margin-top:40px;

height:auto;


}

.visa-title{

font-size:38px;

}

.visa-feature{

grid-template-columns:1fr;

}

.visa-btn{

flex-direction:column;

}

}

.visa-text{
    font-size:15px;
    line-height:28px;
    color:#555;
    text-align:justify;
    margin-top:15px;
    margin-bottom:20px;
    font-weight:400;
    
}

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

.cta-section{
    background:#1f1f1f;
    padding:50px 20px;
    text-align:center;
}

.cta-content{

    max-width:900px;

    margin:auto;

}

.cta-title{

    font-size:46px;

    font-weight:700;

    color:#ffffff;

    line-height:1.4;

    margin-bottom:20px;

}

.cta-text{

    font-size:18px;

    color:#d5d5d5;

    line-height:30px;

    margin-bottom:35px;

}

.cta-btn{

    display:inline-block;

    background:#1fcc2d;

    color:#111;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.cta-btn:hover{

    background:#b8860b;

    color:#fff;

    transform:translateY(-4px);

}

.cta-btn i{

    margin-right:8px;

}

@media(max-width:768px){

.cta-title{

font-size:32px;

}

.cta-text{

font-size:16px;

}

.cta-btn{

padding:14px 30px;

font-size:16px;

}

}

.visa-box{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.visa-box.show{

    opacity:1;

    transform:translateY(0);

}



/*==============================
      VISA ROUNDED CARD
==============================*/

.visa-header{

    max-width:1000px;
    margin:0 auto 50px;
}

.visa-heading{
    font-size:46px;
    font-weight:700;
    color:#8B4513;
    margin-bottom:18px;
    text-align:center;
}

.visa-description{
    font-size:17px;
    line-height:30px;
    color:#666;
    text-align:center;
    max-width:950px;
    margin:0 auto;
}

@media (max-width:768px){

    .visa-heading{
        font-size:34px;
    }

    .visa-description{
        font-size:15px;
        line-height:28px;
    }

}

/*==============================
      VISA CARD
==============================*/

.visa-card{
    background:#ffffff;
    border-radius:25px;
    padding:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    border:1px solid #f1f1f1;
    max-width:1000px;
    margin:30px auto;
    transition:all .3s ease;
}

.visa-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.18);
}

.card-title{
    font-size:24px;
    font-weight:700;
    color:#8B4513;
    margin-bottom:18px;
    text-transform:uppercase;
}

.card-text{
    font-size:16px;
    line-height:30px;
    color:#666;
    margin:0;
    text-align:left;
}

/* Mobile */

@media (max-width:768px){

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

    .card-title{
        font-size:20px;
    }

    .card-text{
        font-size:15px;
        line-height:28px;
    }

}

/*=================================
      UAE VISA CARDS
==================================*/

.visa-package{

    padding:80px 0;

    background:#fff;

}

.visa-main-title{

    font-size:30px;

    font-weight:700;

    color:#111;

    margin-bottom:18px;

}

.visa-main-text{

    max-width:980px;

    margin:auto;

    font-size:17px;

    line-height:30px;

    color:#666;

}

.visa-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;

    height:100%;

}

.visa-card:hover{

    transform:translateY(-8px);

}

.visa-img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.visa-body{

    padding:25px;

}

.visa-card-title{

    font-size:20px;

    font-weight:700;

    color:#8B4513;

    margin-bottom:15px;

}

.visa-card-text{

    font-size:16px;

    color:#666;

    line-height:28px;

}

@media(max-width:768px){

.visa-main-title{

font-size:30px;

}

.visa-card-title{

font-size:22px;

}

.visa-img{

height:220px;

}

}






/*==============================
      VISA FEATURES TICK POINTS 
==============================*/

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:15px;
}

.feature-item i{
    color:#28a745;
    font-size:18px;
    margin-top:3px;
    flex-shrink:0;
}

.feature-item span{
    font-size:16px;
    color:#666;
    line-height:28px;
}

.feature-item strong{
    color:#8B4513;
    font-weight:700;
}

.visa-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    height:100%;
    transition:.3s;
}

.visa-card:hover{
    transform:translateY(-5px);
}

.visa-img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.visa-body{
    padding:20px;
}

.visa-card-title{
    font-size:18px;
    font-weight:700;
    color:#8B4513;
    margin-bottom:10px;
}

.visa-card-text{
    font-size:15px;
    color:#666;
    line-height:26px;
    margin-bottom:18px;
}

.visa-features{
    margin-top:10px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
}

.feature-item i{
    color:#d68a2f;
    font-size:16px;
    margin-top:4px;
    flex-shrink:0;
}

.feature-item span{
    font-size:15px;
    color:#555;
    line-height:24px;
}

.feature-item strong{
    color:#5B0F1B;
}



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

.cta-section{
    background:linear-gradient(135deg,#5B0F1B,#7A0022);
    padding:80px 20px;
    text-align:center;
    color:#fff;
}

.cta-title{
    font-size:48px;
    font-weight:700;
    margin-bottom:20px;
}

.cta-text{
    max-width:750px;
    margin:0 auto 35px;
    font-size:18px;
    line-height:1.8;
}

.cta-features{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.cta-feature{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    font-weight:500;
}

.cta-feature i{
    color:#D4AF37;
    font-size:22px;
}

.cta-btn{
    display:inline-block;
    padding:15px 45px;
    background:#D4AF37;
    color:#5B0F1B;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    border-radius:50px;
    transition:.3s;
}

.cta-btn:hover{
    background:#fff;
    color:#5B0F1B;
    transform:translateY(-3px);
}

@media(max-width:768px){

    .cta-title{
        font-size:34px;
    }

    .cta-text{
        font-size:16px;
    }

    .cta-features{
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

}








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

.processing-section{

    padding:80px 0;
    background:#fff;

}


/* PROCESS BOX SMALL */

.process-box{

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border-radius:14px;

    padding:12px 15px;

    margin-bottom:15px;

    height:auto;

    border:1px solid #eee;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.3s ease;

}


.process-box:hover{

    transform:translateY(-4px);

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

}



/* ICON SMALL */

.icon{

    width:48px;

    height:48px;

    background:#5B0F1B;

    color:#D4AF37;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}



/* TEXT */

.text h3{

    color:#5B0F1B;

    font-size:17px;

    font-weight:700;

    margin:0 0 5px;

}


.text p{

    color:#666;

    font-size:13px;

    line-height:1.5;

    margin:0;

}



/* RIGHT SIDE IMAGE SMALL */

.processing-image{

    display:flex;

    justify-content:center;

    align-items:center;

}


.processing-image img{

    width:100%;

    max-width:380px;

    height:380px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}



/* MOBILE */

@media(max-width:991px){

    .process-box{

        padding:12px;

    }


    .processing-image{

        margin-top:35px;

    }


    .processing-image img{

        height:320px;

    }

}


@media(max-width:576px){

    .icon{

        width:42px;

        height:42px;

        font-size:16px;

    }


    .text h3{

        font-size:16px;

    }


    .processing-image img{

        height:280px;

    }

}







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

body{
    font-family:'Poppins',sans-serif;
    background:#f3f3f3;
}

.visa-section{
    max-width:1300px;
    margin:50px auto;
    display:flex;
    gap:25px;
    padding:0 20px;
    align-items:stretch;
}

.visa-card{
    flex:1;
    background:#fff;
    padding:28px 30px;
    border-radius:16px;
    border:1px solid #ddd;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.visa-card h2{
    color:#5B0F1B;
    font-size:26px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:10px;
}

.intro{
    font-size:14px;
    color:#555;
    line-height:1.6;
    margin-bottom:18px;
}

.item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
}

.icon{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    background:#5B0F1B;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:12px;
    margin-top:2px;
}

.content h4{
    font-size:15px;
    font-weight:700;
    color:#222;
    margin-bottom:3px;
}

.content p{
    font-size:13px;
    color:#555;
    line-height:1.5;
}

.bottom-text{
    margin-top:10px;
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* Tablet */
@media(max-width:992px){

    .visa-section{
        flex-direction:column;
    }

    .visa-card{
        padding:25px;
    }

    .visa-card h2{
        font-size:28px;
    }
}

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

    .visa-section{
        padding:0 15px;
    }

    .visa-card{
        padding:20px;
    }

    .visa-card h2{
        font-size:22px;
    }

    .intro,
    .content p,
    .bottom-text{
        font-size:13px;
    }

    .content h4{
        font-size:14px;
    }

    .icon{
        width:28px;
        height:28px;
        min-width:28px;
        font-size:11px;
    }
}

.process-section{
    max-width:1300px;
    margin:60px auto;
    padding:0 20px;

    display:flex;
    gap:45px;
    align-items:flex-start;
}

.process-image{
    flex:1;
}

.process-image img{
    width:100%;
    height:100%;
    border-radius:4px;
    object-fit:cover;
    display:block;
}

.process-content{
    flex:1;
}

.process-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:35px;
}

.process-icon{
    width:32px;
    height:32px;
    min-width:32px;

    background:#5B0F1B;
    color:#fff;

    border-radius:50%;

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

    font-size:13px;

    margin-top:4px;
}

.process-text h3{
    font-size:20px;
    font-weight:700;
    color:#2c2c2c;
    margin-bottom:5px;
}

.process-text h4{
    font-size:15px;
    font-weight:600;
    color:#444;
    margin-bottom:6px;
}

.process-text p{
    font-size:15px;
    color:#555;
    line-height:1.7;
}

.process-text ul{
    margin-top:5px;
    padding-left:28px;
}

.process-text ul li{
    font-size:15px;
    color:#555;
    line-height:1.8;
}

/* Responsive */

@media(max-width:992px){

.process-section{
    flex-direction:column;
}

.process-image,
.process-content{
    width:100%;
}

.process-text h3{
    font-size:18px;
}

.process-text p,
.process-text ul li{
    font-size:14px;
}

}

@media(max-width:576px){
    

.process-section{
    padding:0 15px;
}

.process-item{
    gap:12px;
    margin-bottom:25px;
}

.process-icon{
    width:28px;
    height:28px;
    min-width:28px;
    font-size:11px;
}

.process-text h3{
    font-size:17px;
}

.process-text h4,
.process-text p,
.process-text ul li{
    font-size:13px;
}

}

.process-bottom-text{
    width:100%;
    margin-top:30px;
    font-size:16px;
    line-height:1.8;
    color:#555;
    font-weight:400;
    text-align:left;
}

.processing-section{
    max-width:1300px;
    margin:60px auto;
    padding:0 15px;

    display:flex;
    align-items:stretch;
    gap:25px;
}

.processing-content{
    width:50%;
    padding:20px 10px;
}

.processing-image{
    width:50%;
}

.processing-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:4px;
}

.processing-content h2{
    font-size:42px;
    font-weight:700;
    color:#5B0F1B;
    margin-bottom:15px;
    line-height:1.2;
}

.intro-text{
    font-size:16px;
    color:#555;
    line-height:1.8;
    margin-bottom:28px;
}

.process-box{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:22px;
}

.process-box .icon{
    width:34px;
    height:34px;
    min-width:34px;

    background:#5B0F1B;
    color:#fff;

    border-radius:50%;

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

    font-size:15px;
    margin-top:3px;
}

.process-box h3{
    font-size:18px;
    font-weight:700;
    color:#333;
    margin-bottom:5px;
}

.process-box p{
    font-size:16px;
    color:#555;
    line-height:1.7;
}

.bottom-text{
    margin-top:15px;
    font-size:16px;
    color:#555;
    line-height:1.8;
}

/* Responsive */

@media(max-width:992px){

.processing-section{
    flex-direction:column-reverse;
}

.processing-content,
.processing-image{
    width:100%;
}

.processing-content h2{
    font-size:32px;
}

}

@media(max-width:576px){

.processing-content{
    padding:10px 0;
}

.processing-content h2{
    font-size:26px;
}

.intro-text,
.process-box p,
.bottom-text{
    font-size:14px;
}

.process-box h3{
    font-size:17px;
}

.process-box{
    gap:12px;
}

.process-box .icon{
    width:30px;
    height:30px;
    min-width:30px;
    font-size:13px;
}

}


.visa-cost-section{
    background:#F8F5F2;
    padding:60px 20px;
}

.visa-cost-section .container{
    max-width:1300px;
    margin:auto;
}

.cost-title{
    text-align:center;
    font-size:48px;
    font-weight:700;
    color:#5B0F1B;
    margin-bottom:12px;
}

.cost-description{
    max-width:1280px;
    margin:0 auto 35px;
    font-size:17px;
    color:#555555;
    line-height:1.8;
}

.visa-cost-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.cost-card{
    background:#FFFFFF;
    padding:25px 30px;
    border-radius:2px;
    border:1px solid rgba(201,162,39,.35);
    box-shadow:0 8px 25px rgba(91,15,27,.12);
    text-align:center;
    transition:.3s;
}

.cost-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(91,15,27,.18);
}

.cost-card h3{
    color:#5B0F1B;
    font-size:24px;
    font-weight:700;
    margin-bottom:12px;
}

.price-row{
    display:flex;
    justify-content:center;
    align-items:center;
}

.price-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:17px;
    font-weight:600;
    color:#C9A227;
}

.price-item i{
    color:#5B0F1B;
    font-size:14px;
}

.divider{
    width:1px;
    height:25px;
    background:#C9A227;
    margin:0 18px;
}

.cost-bottom-text{
    margin-top:45px;
    text-align:center;
    color:#555555;
    font-size:16px;
    line-height:1.8;
}

/* Tablet */

@media(max-width:992px){

.visa-cost-grid{
    grid-template-columns:1fr;
}

.cost-title{
    font-size:38px;
}

}

/* Mobile */

@media(max-width:576px){

.visa-cost-section{
    padding:40px 15px;
}

.cost-title{
    font-size:30px;
}

.cost-description,
.cost-bottom-text{
    font-size:14px;
}

.cost-card{
    padding:20px;
}

.cost-card h3{
    font-size:20px;
}

.price-row{
    flex-direction:column;
    gap:12px;
}

.divider{
    display:none;
}

.price-item{
    font-size:15px;
}

}





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

.cta-section{

    background:#5B0F1B;

    padding:70px 20px;

    text-align:center;

}

.cta-title{

    color:#ffffff;

    font-size:24px;

    font-weight:700;

    line-height:1.6;

    max-width:1000px;

    margin:0 auto 35px;

}

.cta-btn{

    display:inline-block;

    background:#C9A227;

    color:#222;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    padding:14px 38px;

    border-radius:8px;

    transition:.3s;

}

.cta-btn:hover{

    background:#F4D35E;

    color:#111;

    transform:translateY(-3px);

}

/* Mobile */

@media (max-width:768px){

    .cta-section{

        padding:50px 15px;

    }

    .cta-title{

        font-size:18px;

        line-height:1.5;

    }

    .cta-btn{

        padding:12px 30px;

        font-size:15px;

    }

}

.visa-extension{
    padding:70px 0;
    background:#ffffff;
}

.container{
    max-width:1500px;
    margin:auto;
    padding:0 20px;
}

/* Top */

.extension-top{
    margin-bottom:70px;
}

.extension-top h2{
    font-size:48px;
    color:#5B0F1B;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.2;
}

.extension-top p{
    font-size:17px;
    color:#555;
    line-height:1.9;
}

/* Bottom */

.extension-content{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
}

.extension-text{
    flex:1;
}

.extension-image{
    flex:1;
}

.extension-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
}

/* Left */

.extension-text h2{
    font-size:52px;
    color:#5B0F1B;
    line-height:1.15;
    margin-bottom:25px;
    font-weight:700;
}

.extension-text ul{
    padding-left:28px;
}

.extension-text ul li{
    margin-bottom:12px;
    font-size:17px;
    color:#555;
    line-height:1.7;
}

.extension-text strong{
    color:#C9A227;
    font-weight:700;
}

/* Tablet */

@media(max-width:991px){

.extension-content{
    flex-direction:column;
}

.extension-top{
    margin-bottom:50px;
}

.extension-top h2{
    font-size:38px;
}

.extension-text h2{
    font-size:38px;
}

.extension-image img{
    height:350px;
}

}

/* Mobile */

@media(max-width:576px){

.visa-extension{
    padding:50px 0;
}

.container{
    padding:0 15px;
}

.extension-top h2{
    font-size:30px;
}

.extension-text h2{
    font-size:30px;
}

.extension-top p,
.extension-text ul li{
    font-size:15px;
}

.extension-image img{
    height:250px;
}

}

.why-section{
    padding:70px 20px;
    background:#F8F5F2;
}

.why-container{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.why-box{
    text-align:center;
    padding:15px;
}

.icon-bg{
    width:120px;
    height:120px;
    margin:0 auto 25px;

    background:#F8F1DC;
    border-radius:45% 55% 50% 50% / 45% 45% 55% 55%;

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

.icon-bg i{
    font-size:52px;
    color:#5B0F1B;
}

.why-box h3{
    font-size:24px;
    font-weight:700;
    color:#5B0F1B;
    line-height:1.4;
    margin-bottom:15px;
}

.why-box p{
    font-size:16px;
    line-height:1.8;
    color:#555;
}

/* Tablet */

@media(max-width:992px){

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

}

/* Mobile */

@media(max-width:576px){

    .why-container{
        grid-template-columns:1fr;
    }

    .why-box h3{
        font-size:20px;
    }

    .why-box p{
        font-size:15px;
    }

    .icon-bg{
        width:100px;
        height:100px;
    }

    .icon-bg i{
        font-size:42px;
    }

}

.faq-section{
    padding:70px 20px;
    background:#F8F5F2;
}

.faq-section .container{
    max-width:1100px;
    margin:auto;
}

.faq-heading{
    text-align:center;
    margin-bottom:40px;
}

.faq-heading h2{
    font-size:42px;
    color:#5B0F1B;
    font-weight:700;
    margin-bottom:10px;
}

.faq-heading p{
    font-size:17px;
    color:#555;
    line-height:1.8;
}

.faq-item{
    background:#ffffff;
    border-radius:8px;
    margin-bottom:15px;
    overflow:hidden;
    border:1px solid rgba(201,162,39,.30);
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.faq-question{
    width:100%;
    padding:20px 25px;
    border:none;
    background:#ffffff;
    cursor:pointer;

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

    font-size:18px;
    font-weight:600;
    color:#222;
}

.faq-question span{
    font-size:28px;
    color:#C9A227;
}

.faq-answer{
    display:none;
    padding:0 25px 20px;
}

.faq-answer p{
    color:#555;
    line-height:1.8;
    font-size:16px;
}

.faq-item.active .faq-answer{
    display:block;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

@media(max-width:768px){

.faq-heading h2{
    font-size:30px;
}

.faq-question{
    font-size:16px;
    padding:18px;
}

.faq-answer{
    padding:0 18px 18px;
}

.faq-answer p{
    font-size:15px;
}

}









/*=====================================
        BLOG HERO
   Luxury Maroon & Gold Theme
======================================*/

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8f5f2;
    color:#222;
}

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


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

.blog-page{
    padding:100px 0;
    background:linear-gradient(180deg,#fdfaf7,#f5efe7);
}

/*=====================================
        BLOG CARD
======================================*/

.blog-box{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(201,162,39,.35);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s ease;
    height:100%;
    position:relative;
}

.blog-box::before{
    content:"";
    display:block;
    height:4px;
    background:linear-gradient(
        90deg,
        #5B0F1B,
        #C9A227,
        #5B0F1B
    );
}

.blog-box:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(91,15,27,.18);
}

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

.blog-box{
    overflow:hidden;
}

.blog-box img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:.6s;
}

.blog-box:hover img{
    transform:scale(1.08);
}

/*=====================================
        DETAILS
======================================*/

.blog-details{
    padding:30px;
}

.blog-date{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#f8f1dc;
    color:#C9A227;
    border:1px solid rgba(201,162,39,.35);
    padding:8px 18px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
}

.blog-date i{
    color:#5B0F1B;
}

.blog-details h3{
    margin:22px 0 16px;
    font-size:30px;
    color:#5B0F1B;
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    line-height:1.3;
}

.blog-details p{
    color:#555;
    font-size:16px;
    line-height:1.9;
}

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

.read-btn{
    display:inline-block;
    margin-top:22px;
    padding:13px 30px;
    border-radius:40px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    background:linear-gradient(
        135deg,
        #5B0F1B,
        #7A0022
    );
    transition:.35s;
    border:2px solid transparent;
}

.read-btn:hover{
    background:#C9A227;
    color:#3b2500;
    border-color:#b98f13;
    transform:translateY(-3px);
}

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

@media(max-width:992px){

.blog-content h1{
    font-size:56px;
}

.blog-box img{
    height:230px;
}

.blog-details h3{
    font-size:27px;
}

}

@media(max-width:768px){

.blog-hero{
    height:50vh;
}

.blog-content h1{
    font-size:42px;
}

.blog-content p{
    font-size:16px;
    padding:0 20px;
}

.blog-page{
    padding:70px 0;
}

.blog-box img{
    height:220px;
}

.blog-details{
    padding:24px;
}

.blog-details h3{
    font-size:24px;
}

.blog-details p{
    font-size:15px;
}

}

@media(max-width:576px){

.blog-hero{
    height:45vh;
}

.blog-content h1{
    font-size:34px;
}

.blog-content span{
    font-size:14px;
}

.blog-box img{
    height:200px;
}

.blog-details h3{
    font-size:22px;
}

.read-btn{
    width:100%;
    text-align:center;
}

}


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




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

.contact-section{

padding:100px 0;

background:#f7f7f7;

}

.contact-info,
.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

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

height:100%;

}

.contact-info h3,
.contact-form h3{

color:#5B0F1B;

font-size:34px;

font-weight:700;

margin-bottom:35px;

}

.contact-item{

display:flex;

gap:20px;

margin-bottom:30px;

}

.contact-item i{

width:60px;

height:60px;

background:#D4AF37;

color:#5B0F1B;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

flex-shrink:0;

}

.contact-item h5{

font-weight:700;

margin-bottom:5px;

}

.contact-item p{

margin:0;

color:#666;

line-height:1.7;

}

.form-control{

height:55px;

border-radius:10px;

}

textarea.form-control{

height:auto;

}

.contact-btn{

width:100%;

padding:15px;

background:#5B0F1B;

color:#fff;

border:none;

border-radius:40px;

font-size:18px;

font-weight:600;

transition:.3s;

}

.contact-btn:hover{

background:#D4AF37;

color:#111;

}

.map-area{

margin-top:70px;

border-radius:20px;

overflow:hidden;

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

}

.map-area iframe{

width:100%;

height:450px;

border:0;

}

@media(max-width:768px){

.contact-hero{

height:60vh;

}

.contact-content h1{

font-size:38px;

}

.contact-content p{

font-size:16px;

}

.contact-info,
.contact-form{

padding:25px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-gold,
.btn-white{

width:220px;

text-align:center;

}

}

/*=========================
      RENT A CAR
   Luxury Maroon Theme
==========================*/

body{
    background:#f5f7fb;
    font-family:'Poppins',sans-serif;
}

.cars{
    padding:80px 0;
}

.car-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.car-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.image-box{
    position:relative;
}

.image-box img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

.driver-icon{
    position:absolute;
    top:15px;
    left:15px;
    width:45px;
    height:45px;
    background:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#7A0022;
    font-size:18px;
}

.seat-tag{
    position:absolute;
    bottom:15px;
    right:15px;
    background:#D4AF37;
    color:#0B0B0B;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

.card-body{
    padding:25px;
    text-align:center;
}

.card-body h3{
    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
}

.card-body p{
    color:#666;
    margin-bottom:8px;
}

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

.enquire-btn{
    display:inline-block;
    padding:12px 35px;
    background:#7A0022;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.enquire-btn:hover{
    background:#d4af37;
    color:#000;
}

hr{
    margin:20px 0;
}

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

@media(max-width:991px){

    .bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .enquire-btn{
        width:100%;
        text-align:center;
    }

    .card-body h3{
        font-size:28px;
    }

    .bottom h2{
        font-size:32px;
    }
}

@media(max-width:768px){

    .image-box img{
        height:220px;
    }

    .card-body{
        padding:30px 20px 20px;
    }

    .card-body h3{
        font-size:26px;
    }

    .bottom h2{
        font-size:30px;
    }
}

@media(max-width:576px){

    .image-box img{
        height:200px;
    }

    .card-body h3{
        font-size:24px;
    }

    .bottom h2{
        font-size:28px;
    }

    .enquire-btn{
        width:100%;
    }
}









/*=========================
      RENT A BUS
   Luxury Maroon Theme
==========================*/

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8f5f2;
    color:#222;
}

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

.bus-section{
    padding:90px 0;
    background:linear-gradient(180deg,#fdfaf7,#f5efe8);
}

/*=========================
      TITLE
==========================*/

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:44px;
    font-weight:700;
    color:#5B0F1B;
    margin-bottom:15px;
    letter-spacing:1px;
}

.section-title h2 span{
    color:#C9A227;
}

.section-title p{
    max-width:720px;
    margin:auto;
    font-size:17px;
    color:#555;
    line-height:30px;
}

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

.bus-card{
    background:#ffffff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(201,162,39,.35);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s ease;
}

.bus-card:hover{
    transform:translateY(-12px);
    box-shadow:0 22px 50px rgba(91,15,27,.18);
}

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

.bus-image{
    position:relative;
    overflow:hidden;
}

.bus-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.6s;
}

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

/* Dark Overlay */

.bus-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.08));
}

/*=========================
      SEAT BADGE
==========================*/

.seat-badge{
    position:absolute;
    top:20px;
    right:20px;
    background:linear-gradient(135deg,#C9A227,#F4D35E);
    color:#3b2200;
    padding:8px 18px;
    border-radius:40px;
    font-weight:700;
    font-size:14px;
    z-index:5;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

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

.bus-content{
    padding:28px;
}

.bus-content h3{
    font-size:28px;
    color:#5B0F1B;
    margin-bottom:18px;
    font-weight:700;
}

.bus-content p{
    font-size:16px;
    color:#555;
    margin-bottom:13px;
    line-height:28px;
}

.bus-content i{
    color:#C9A227;
    margin-right:10px;
    width:22px;
}

.bus-content hr{
    border:none;
    height:1px;
    background:#e7d6a8;
    margin:22px 0;
}

/*=========================
      PRICE
==========================*/

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

.price-box h4{
    font-size:34px;
    font-weight:700;
    color:#5B0F1B;
}

.price-box span{
    color:#777;
    font-size:15px;
}

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

.btn-enquiry{
    display:inline-block;
    padding:13px 28px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,#5B0F1B,#7A0022);
    transition:.35s;
    border:2px solid transparent;
}

.btn-enquiry:hover{
    background:#C9A227;
    color:#3d2500;
    border-color:#b98f13;
    transform:translateY(-3px);
}

/*=========================
      EXTRA TAG
==========================*/

.bus-tag{
    display:inline-block;
    background:#f8f1dc;
    color:#8c6b00;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
    border:1px solid rgba(201,162,39,.35);
}

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

.feature-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.feature-list span{
    background:#faf5ec;
    color:#5B0F1B;
    border:1px solid #e6d49f;
    padding:8px 15px;
    border-radius:30px;
    font-size:13px;
    font-weight:500;
}

.feature-list span i{
    color:#C9A227;
    margin-right:6px;
}

/*=========================
      CARD BORDER EFFECT
==========================*/

.bus-card::before{
    content:"";
    display:block;
    height:4px;
    background:linear-gradient(90deg,
    #5B0F1B,
    #C9A227,
    #5B0F1B);
}

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

@media(max-width:992px){

.section-title h2{
    font-size:38px;
}

.bus-image img{
    height:230px;
}

}

@media(max-width:768px){

.bus-section{
    padding:70px 0;
}

.section-title{
    margin-bottom:45px;
}

.section-title h2{
    font-size:32px;
}

.section-title p{
    font-size:15px;
    line-height:28px;
}

.price-box{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

.btn-enquiry{
    width:100%;
    text-align:center;
}

.bus-image img{
    height:220px;
}

.bus-content{
    padding:22px;
}

}

@media(max-width:576px){

.section-title h2{
    font-size:28px;
}

.bus-content h3{
    font-size:24px;
}

.price-box h4{
    font-size:28px;
}

.bus-image img{
    height:200px;
}

}
















/* ===========================
   RENT A CAR HERO SECTION
=========================== */

/* ===========================
   RENT A CAR HERO SECTION
=========================== */

/* ===========================
   RENT A CAR HERO SECTION
=========================== */

/* ===========================
   RENT A CAR HERO SECTION
=========================== */
/* ===========================
   RENT A CAR HERO SECTION
=========================== */

/* =========================================================
   RENT A CAR HERO
========================================================= */

/* =========================================================
   RENT A CAR HERO
========================================================= */

.rent-car-hero {
    position: relative;
    width: 100%;
    min-height: 500px;

    background-image: url("../images/rent\ car\ banner.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: center;
    overflow: hidden;
}

.rent-bus-hero {
    position: relative;
    width: 100%;
    min-height: 500px;

    background-image: url("../images/rent\ bus\ banner.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: center;
    overflow: hidden;
}





/* =========================================================
   LARGE DESKTOP
   1200px+
========================================================= */

@media (min-width: 1200px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 500px;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 48px;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 13px;
    }
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 460px;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 44px;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 12px;
    }
}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 400px;
        background-position: center center;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 38px;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 350px;
        background-position: center center;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 32px;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 11px;
        letter-spacing: 1.5px;
        margin-bottom: 5px;
    }
}


/* =========================================================
   SMALL MOBILE
   375px - 575px
========================================================= */

@media (min-width: 375px) and (max-width: 575px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 300px;
        background-position: center center;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 28px;
        line-height: 1.15;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 10px;
        letter-spacing: 1.2px;
        margin-bottom: 5px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   Below 375px
========================================================= */

@media (max-width: 374px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 270px;
        background-position: center center;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 24px;
        line-height: 1.15;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .rent-car-hero,
    .rent-bus-hero {
        min-height: 250px;
    }

    .rent-car-content h1,
    .rent-bus-content h1 {
        font-size: 22px;
    }

    .rent-car-content .hero-subtitle,
    .rent-bus-content .hero-subtitle {
        font-size: 8px;
        letter-spacing: 0.8px;
    }
}







/*=================================
      PASSENGER TRANSPORT
==================================*/

.passenger-section{
    padding:100px 0;
    background:#fffaf5;
}

.section-subtitle{
    display:inline-block;
    color:#D4AF37;
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.section-title{
    font-size:42px;
    font-weight:700;
    color:#6A1024;
    margin-bottom:20px;
}

.section-text{
    color:#555;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
}

.feature-list{
    margin-top:30px;
}

.feature-item{
    display:flex;
    align-items:center;
    margin-bottom:16px;
}

.feature-item i{
    width:35px;
    height:35px;
    background:#D4AF37;
    color:#6A1024;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:15px;
    font-size:15px;
}

.feature-item span{
    color:#333;
    font-size:17px;
    font-weight:500;
}

.transport-btn{
    display:inline-block;
    margin-top:35px;
    padding:15px 38px;
    background:#6A1024;
    color:#D4AF37;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.4s ease;
    border:2px solid #D4AF37;
}

.transport-btn:hover{
    background:#D4AF37;
    color:#6A1024;
}

.transport-image{
    width:100%;
    border-radius:20px;
    border:5px solid #D4AF37;
    box-shadow:0 15px 35px rgba(106,16,36,.25);
}

/* Responsive */

@media(max-width:991px){

.section-title{
    font-size:34px;
}

.transport-image{
    margin-top:40px;
}

}

@media(max-width:576px){

.passenger-section{
    padding:70px 0;
}

.section-title{
    font-size:28px;
}

.section-text{
    font-size:16px;
}

.transport-btn{
    width:100%;
    text-align:center;
}

}



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

.dropdown-menu{
    background:#D4AF37;
    border:none;
    border-radius:12px;
    padding:10px 0;
    min-width:240px;
    margin-top:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.dropdown-item{
    padding:12px 22px;
    font-size:15px;
    font-weight:600;
    color:#5B0F1B;
    background:transparent;
    transition:.3s;
}

.dropdown-item:hover,
.dropdown-item:focus{
    background:#5B0F1B;
    color:#fff;
}

.navbar .dropdown-toggle::after{
    margin-left:8px;
    vertical-align:middle;
}

@media (min-width:992px){

    .dropdown:hover .dropdown-menu{
        display:block;
    }

}

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

.package-section{

    background:#f5f5f5;

    padding:80px 0;

}

.package-title{

    font-size:48px;

    color:#5B0F1B;

    font-weight:700;

    margin-bottom:20px;

}

.package-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    transition:.4s;

}

.package-card:hover{

    transform:translateY(-8px);

}

.package-card img{

    width:100%;

    height:270px;

    object-fit:cover;

}

.package-content{

    padding:25px;

    text-align:center;

}

.package-content h3{

    font-size:20px;

    font-weight:700;

    color:#5B0F1B;

    margin-bottom:25px;

}

.package-buttons{

    display:flex;

    justify-content:space-between;

    gap:15px;

}

.learn-btn{

    flex:1;

    background:#D4AF37;

    color: #000;;

    text-decoration:none;

    padding:14px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.learn-btn:hover{

    background:#5B0F1B;

    color:#fff;

}

.whatsapp-card-btn{

    flex:1;

    background:#128C07;

    color:#fff;

    text-decoration:none;

    padding:14px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.whatsapp-card-btn:hover{

    background:#0d6e05;

    color:#fff;

}

.whatsapp-card-btn i{

    margin-right:8px;

}

@media(max-width:768px){

.package-title{

    font-size:36px;

}

.package-content h3{

    font-size:28px;

}

.package-buttons{

    flex-direction:column;

}

}




.pagination .page-link{
    color:#7A0022;
    border:1px solid #7A0022;
    padding:10px 18px;
    margin:0 5px;
    border-radius:8px;
}

.pagination .active .page-link{
    background:#7A0022;
    color:#fff;
    border-color:#7A0022;
}

.pagination .page-link:hover{
    background:#7A0022;
    color:#fff;
}



.city-hero{
    position:relative;
    height:80vh;
    background:url("images/dubai-city-tour.jpg") center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.city-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
}

.city-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.city-content h1{
    color:#fff;
    font-size:60px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin:0;
}

@media (max-width:768px){
    .city-content h1{
        font-size:36px;
    }
}

/*=========================
      ABUDUBAI PACKAGE SECTION
=========================*/

.package-card{
    height:100%;
}

.package-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.package-content{
    text-align:center;
}

/*=========================
  SHARJAH BOOKING 
=========================*/


.tour-details{
    padding:70px 0;
    background: linear-gradient(135deg, #D4AF37 0%, #F8E7B5 50%, #D4AF37 100%);
}

.booking-card{
    background:#fff;
    border-radius:15px;
    padding:30px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.booking-card h3{
    font-size:20px;
    font-weight:700;
    color:#555;
    line-height:1.4;
    margin-bottom:25px;
}

.price{
    font-size:28px;
    color:#555;
    margin-bottom:25px;
}

.price span{
    font-size:42px;
    font-weight:700;
}

.book-btn{
    display:inline-block;
    padding:14px 35px;
    background:#D4AF37;
    color:#000;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
}

.book-btn:hover{
    background:#5B0F1B;
    color:#fff;
}

.tour-details p{
    font-size:20px;
    line-height:1.9;
    color:#555;
    text-align:justify;

}


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

.booking-info-section{
    padding:60px 0;
    display:flex;
    justify-content:center;
}

.booking-info-card{

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

    background:#fff;

    border-radius:18px;

    padding:40px;

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

    border-top:6px solid #D4AF37;

    text-align:center;

}

.booking-title{

    font-size:32px;

    font-weight:700;

    color:#5B0F1B;

    margin-bottom:30px;

}

.booking-list{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.booking-list li{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    font-size:20px;

    color:#333;

    margin-bottom:20px;

    font-weight:600;

}

.booking-list li i{

    color:#D4AF37;

    font-size:24px;

}

.booking-whatsapp{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 35px;

    background:linear-gradient(135deg,#25D366,#128C7E);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.4s;

}

.booking-whatsapp:hover{

    transform:translateY(-5px);

    color:#fff;

    box-shadow:0 10px 25px rgba(37,211,102,.35);

}

.booking-whatsapp i{

    font-size:24px;

}

@media(max-width:768px){

.booking-info-card{

padding:25px;

}

.booking-title{

font-size:24px;

}

.booking-list li{

font-size:17px;

justify-content:flex-start;

}

.booking-whatsapp{

width:100%;

justify-content:center;

}

}

.booking-info-card{

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

    background:#fff;

    border-radius:18px;

    padding:40px;

    border-top:6px solid #D4AF37;

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

    transition:all .4s ease;

    cursor:pointer;
    

}

/* Premium Hover Effect */

.booking-info-card:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:
        0 20px 45px rgba(0,0,0,.20),
        0 0 18px rgba(212,175,55,.55),
        0 0 35px rgba(212,175,55,.25);

    border-top:6px solid #F4D35E;

}

/*=========================
      TOUR TABLE
=========================*/

.tour-table-section{
    padding:40px 0;
    
}

.tour-table{

    background:#fff;

    border-radius:12px;

    padding:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    overflow:hidden;

}

.tour-table table{

    width:100%;

    border-collapse:collapse;

}

.tour-table thead{

    background:linear-gradient(90deg,#d4af37);

}

.tour-table thead th{

    color:#000;

    font-size:18px;

    font-weight:700;

    text-align:center;

    padding:12px;

}

.tour-table tbody td{

    text-align:center;

    font-size:17px;

    color:#555;

    padding:20px 10px;

    border-top:1px solid #eee;

}

.tour-table tbody tr:hover{

    background:#d5d5d5;

}

@media(max-width:768px){

.tour-table{

overflow-x:auto;

}

.tour-table table{

min-width:600px;

}

.tour-table thead th{

font-size:15px;

padding:10px;

}

.tour-table tbody td{

font-size:14px;

padding:15px 8px;

}

}

.vehicle-info{
    font-size:30px;
    font-weight:900;
    color:#5B0F1B;
    text-align:center;
    margin:20px 0;
    letter-spacing:0.5px;
}

/*=========================
    TOUR INCLUSIONS
==========================*/

.tour-inclusions{
    padding:40px 0;
    background-color:#f8f9fb;
}

.inclusion-box{

    max-width:850px;      /* Makes the box smaller */
    width:100%;

    margin:0 auto;        /* Centers the box */

    background:#fff;

    border-radius:15px;

    padding:20px 25px;

    box-shadow:0 8px 20px rgba(212,175,55,.35);

    transition:.3s ease;

}

.inclusion-box:hover{

    transform:translateY(-5px);

    box-shadow:
    0 12px 30px rgba(212,175,55,.45),
    0 0 18px rgba(212,175,55,.30);

}

.inclusion-box h2{

    text-align:center;

    font-size:26px;

    font-weight:700;

    color:#000;

    margin-bottom:18px;

}

.inclusion-box ul{

    list-style:none;

    padding:0;

    margin:0;

}

.inclusion-box ul li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:16px;

    color:#23386d;

    margin-bottom:10px;

    line-height:1.5;

}

.inclusion-box ul li i{

    color:#f28c28;

    font-size:13px;

    margin-top:5px;

    min-width:14px;

}

@media(max-width:768px){

    .inclusion-box{

        max-width:95%;

        padding:18px;

    }

    .inclusion-box h2{

        font-size:22px;

    }

    .inclusion-box ul li{

        font-size:14px;

    }

}

/*=========================
    TOUR INCLUSIONS
==========================*/

.tour-inclusions{
    padding:50px 0;
    background:#f8f9fb;
}

.inclusion-box{

    max-width:850px;

    margin:auto;

    background:#fff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(212,175,55,.35);

    transition:.3s;

}

.inclusion-box:hover{

    transform:translateY(-5px);

    box-shadow:
    0 12px 30px rgba(212,175,55,.45),
    0 0 18px rgba(212,175,55,.30);

}

.inclusion-box h2{

    text-align:center;

    font-size:26px;

    font-weight:700;

    color:#5B0F1B;

    margin-bottom:25px;

}

.inclusion-content{

    display:flex;

    justify-content:space-between;

    gap:40px;

}

.inclusion-column{

    width:50%;

}

.inclusion-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.inclusion-column li{

    display:flex;

    align-items:flex-start;

    gap:8px;

    margin-bottom:12px;

    font-size:15px;

    color:#23386d;

    line-height:1.5;

}

.inclusion-column li i{

    color:#D4AF37;

    font-size:13px;

    margin-top:4px;

}

@media(max-width:768px){

.inclusion-content{

flex-direction:column;

gap:0;

}

.inclusion-column{

width:100%;

}

.inclusion-box{

padding:20px;

}

.inclusion-box h2{

font-size:22px;

}

.inclusion-column li{

font-size:14px;

}

}





/*=========================
     TOUR HIGHLIGHTS
==========================*/

.tour-highlights{
    padding:60px 0;
    background:#f8f9fb;
}

.highlight-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.highlight-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.35),
    0 0 18px rgba(212,175,55,.25);

}

.highlight-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.highlight-content{

    padding:25px;

}

.highlight-content h3{

    text-align:center;

    font-size:28px;

    font-weight:700;

    color:#5B0F1B;

    margin-bottom:20px;

}

.highlight-content ul{

    list-style:none;

    padding:0;

    margin:0;

}

.highlight-content ul li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:16px;

    color:#444;

    margin-bottom:12px;

    line-height:1.6;

}

.highlight-content ul li i{

    color:#D4AF37;

    margin-top:4px;

}

@media(max-width:768px){

.highlight-card img{

height:220px;

}

.highlight-content{

padding:20px;

}

.highlight-content h3{

font-size:22px;

}

.highlight-content ul li{

font-size:15px;

}

}





.pagination .page-link{

    color:#5B0F1B;
    border:1px solid #D4AF37;
    padding:10px 18px;
    margin:0 5px;
    border-radius:8px;
    font-weight:600;

}

.pagination .active .page-link{

    background:#5B0F1B;
    color:#fff;
    border-color:#5B0F1B;

}

.pagination .page-link:hover{

    background:#D4AF37;
    color:#fff;

}







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

.dubai-hero{
    position: relative;
    width: 100%;
    height: 70vh;
    background: url("../images/dubai-city-tour-banner.png") center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.city-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55));
}

.city-content{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.hero-subtitle{
    display: inline-block;
    padding: 8px 18px;
    background: #D4AF37;
    color: #fff;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.city-content h1{
    font-size: 58px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    text-shadow: 0 4px 15px rgba(0,0,0,.4);
}

.hero-btn{
    display: inline-block;
    padding: 14px 34px;
    background: #D4AF37;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

.hero-btn:hover{
    background: #b88d16;
    color: #fff;
    transform: translateY(-3px);
}

@media (max-width:768px){
    .dubai-hero{
        height: 55vh;
    }

    .city-content h1{
        font-size: 36px;
    }
}




/*=========================
    ABU DHABI HERO
==========================*/

.abu-hero{
    position: relative;
    width: 100%;
    height: 70vh;
    background: url("../images/abu_dhabi_banner.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.abu-hero .city-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
}

.abu-hero .city-content{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.abu-hero .hero-subtitle{
    display: inline-block;
    padding: 8px 18px;
    background: #D4AF37;
    color: #fff;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.abu-hero h1{
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,.4);
}

.abu-hero .hero-btn{
    display: inline-block;
    padding: 14px 34px;
    background: #D4AF37;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s ease;
}

.abu-hero .hero-btn:hover{
    background: #b68d1d;
    color: #fff;
    transform: translateY(-3px);
}

@media (max-width:768px){

    .abu-hero{
        height: 55vh;
    }

    .abu-hero h1{
        font-size: 36px;
    }

}





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

.sharjah-hero{
    position: relative;
    width: 100%;
    height: 70vh;
    background: url("../images/sharjah_banner.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sharjah-hero .city-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
}

.sharjah-hero .city-content{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.sharjah-hero .hero-subtitle{
    display: inline-block;
    padding: 8px 18px;
    background: #D4AF37;
    color: #fff;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.sharjah-hero h1{
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,.4);
}

.sharjah-hero .hero-btn{
    display: inline-block;
    padding: 14px 34px;
    background: #D4AF37;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s ease;
}

.sharjah-hero .hero-btn:hover{
    background: #b68d1d;
    color: #fff;
    transform: translateY(-3px);
}

@media (max-width:768px){

    .sharjah-hero{
        height: 55vh;
    }

    .sharjah-hero h1{
        font-size: 36px;
    }

}










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

.city-hero{

    position: relative;

    width: 100%;

    height: 85vh;

    background: url("../images/dubai-city-tour-banner.png") center center/cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

}

.city-overlay{

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

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

}

.city-content{

    position: relative;

    z-index: 2;

    text-align: center;

    color: #fff;

}

.hero-subtitle{

    display: inline-block;

    padding: 10px 24px;

    background: #D4AF37;

    color: #5B0F1B;

    border-radius: 30px;

    font-size: 16px;

    font-weight: 600;

}

.city-content h1{

    font-size: 65px;

    font-weight: 700;

    margin: 20px 0;

    text-shadow: 2px 2px 10px rgba(0,0,0,.4);

}

.hero-btn{

    display: inline-block;

    margin-top: 15px;

    padding: 14px 35px;

    background: #D4AF37;

    color: #5B0F1B;

    border-radius: 50px;

    font-weight: 600;

    transition: .3s;

}

.hero-btn:hover{

    background: #5B0F1B;

    color: #fff;


}




.tour-container{

    margin:60px auto;

    max-width:900px;

}

.tour-page{

    display:none;

}

.tour-page.active{

    display:block;

}

.tour-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

}

.tour-card img{

    width:100%;

    height:450px;

    object-fit:cover;

}

.tour-content{

    padding:30px;

}

.tour-content h2{

    color:#5B0F1B;

    margin-bottom:15px;

}

.tour-content p{

    color:#555;

    line-height:1.8;

}

.tour-pagination{

    display:flex;

    justify-content:center;

    gap:12px;

    margin:50px 0;

}

.page-btn{

    border:none;

    background:#5B0F1B;

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

.page-btn:hover{

    background:#D4AF37;

    color:#000;

}

.page-btn.active{

    background:#D4AF37;

    color:#000;

}






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

/* Remove default spacing */

html,
body{
    margin:0;
    padding:0;
}

/* Hero */

.passenger-hero{

    width:100%;

    height:600px;

    margin:0;

    padding:0;

    overflow:hidden;

    position:relative;

    line-height:0;

}

.passenger-hero img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

/* Remove space from previous section */

.passenger-hero,
.passenger-hero *{

    margin-top:0;

}

/* Responsive */

@media (max-width:992px){

    .passenger-hero{

        height:450px;

    }

}

@media (max-width:576px){

    .passenger-hero{

        height:300px;

    }

}



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

.blog-hero{

    width:100%;

    height:600px;

    overflow:hidden;

    margin:0;

    padding:0;

    line-height:0;

}

.blog-hero img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}

/* Tablet */

@media(max-width:992px){

.blog-hero{

    height:450px;

}

}

/* Mobile */

@media(max-width:576px){

.blog-hero{

    height:300px;

}

}







.more-content{
    display:none;
    margin-top:15px;
    color:#555;
    line-height:1.8;
}

.more-content.show{
    display:block;
}

.read-btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 25px;
    background:#D4AF37;
    color:#fff;
    border:none;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
}

.read-btn:hover{
    background:#b88d16;
}












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

.contact-hero{

    min-height:75vh;

    background-image:url("../images/contact-banner.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    position:relative;

}

.contact-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

}

.contact-hero .container{

    position:relative;

    z-index:2;

}

.contact-content{

    color:#fff;

    max-width:650px;

}

.hero-badge{

    display:inline-block;

    background:#D4AF37;

    color:#5B0F1B;

    padding:8px 20px;

    border-radius:30px;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

.contact-content h1{

    font-size:58px;

    font-weight:700;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-gold{

    background:#D4AF37;

    color:#5B0F1B;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.btn-white{

    background:#fff;

    color:#5B0F1B;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.btn-white i{

    margin-right:8px;

}

@media(max-width:992px){

    .contact-hero{

        height:500px;

    }

    .contact-content h1{

        font-size:42px;

    }

}

@media(max-width:576px){

    .contact-hero{

        height:350px;

    }

    .contact-content h1{

        font-size:30px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

}



/* ================================
   MDK TOURISM PRELOADER
   ================================ */

/* =========================================
   MDK TOURISM - PREMIUM PRELOADER
   ========================================= */

/* =========================================
   MDK TOURISM PRELOADER
   ========================================= */


/* =========================================
   MDK TOURISM - SEQUENTIAL PRELOADER
   ========================================= */

#preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;

    background: #fffaf0;

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

    z-index: 999999;

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


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

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


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

.loader-content {
    width: 100%;
    max-width: 1000px;

    padding: 30px 20px;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    /*
       Everything starts transparent.
       Logo is separately animated.
    */
    animation: loaderFade 0.5s ease forwards;
}


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

.logo-circle {
    width: 380px;
    height: 380px;

    margin: 0 auto 38px;

    border-radius: 50%;

    background: #ffffff;

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

    border: 5px solid #B8860B;

    position: relative;

    flex-shrink: 0;

    /*
       LOGO IS THE FIRST THING TO APPEAR
    */

    opacity: 0;

    animation:
        logoFirst
        1.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0s;

    box-shadow:
        0 0 20px rgba(184, 134, 11, 0.35),
        0 0 45px rgba(184, 134, 11, 0.25),
        0 0 80px rgba(184, 134, 11, 0.15);
}


/* =========================================
   FIRST GOLD RING
   ========================================= */

.logo-circle::before {
    content: "";

    position: absolute;

    inset: -14px;

    border-radius: 50%;

    border: 1px solid rgba(184, 134, 11, 0.45);

    animation:
        ringRotate
        20s
        linear
        infinite;
}


/* =========================================
   SECOND GOLD RING
   ========================================= */

.logo-circle::after {
    content: "";

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    border: 1px solid rgba(184, 134, 11, 0.20);

    animation:
        ringRotateReverse
        10s
        linear
        infinite;
}


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

.loader-logo {
    width: 345px;
    height: 345px;

    max-width: 92%;
    max-height: 92%;

    object-fit: contain;

    display: block;

    position: relative;

    z-index: 2;

    opacity: 0;

    animation:
        logoImageFirst
        1.5s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.25s;
}


/* =========================================
   MDK TOURISM TITLE
   ========================================= */

.loader-title {
    margin: 5px 0 10px;

    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 700;

    letter-spacing: 3px;

    color: #4b0b0b;

    text-transform: uppercase;

    line-height: 1.2;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    overflow: visible;

    /*
       TITLE IS INVISIBLE FIRST
    */
    opacity: 1;
}


/* =========================================
   EACH LETTER
   ========================================= */

.loader-title span {

    display: inline-block;

    /*
       Initially invisible
    */
    opacity: 0;

    transform:
        translateY(50px)
        scale(0.75);

    filter: blur(8px);

    /*
       Starts AFTER LOGO
    */
    animation:
        letterSequential
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================
   LETTER 1 - M
   ========================================= */

.loader-title span:nth-child(1) {
    animation-delay: 2.00s;
}


/* =========================================
   LETTER 2 - D
   ========================================= */

.loader-title span:nth-child(2) {
    animation-delay: 2.18s;
}


/* =========================================
   LETTER 3 - K
   ========================================= */

.loader-title span:nth-child(3) {
    animation-delay: 2.36s;
}


/* =========================================
   LETTER 4
   ========================================= */

.loader-title span:nth-child(4) {
    animation-delay: 2.54s;
}


/* =========================================
   LETTER 5
   ========================================= */

.loader-title span:nth-child(5) {
    animation-delay: 2.72s;
}


/* =========================================
   LETTER 6
   ========================================= */

.loader-title span:nth-child(6) {
    animation-delay: 2.90s;
}


/* =========================================
   LETTER 7
   ========================================= */

.loader-title span:nth-child(7) {
    animation-delay: 3.08s;
}


/* =========================================
   LETTER 8
   ========================================= */

.loader-title span:nth-child(8) {
    animation-delay: 3.26s;
}


/* =========================================
   LETTER 9
   ========================================= */

.loader-title span:nth-child(9) {
    animation-delay: 3.44s;
}


/* =========================================
   LETTER 10
   ========================================= */

.loader-title span:nth-child(10) {
    animation-delay: 3.62s;
}


/* =========================================
   LETTER 11
   ========================================= */

.loader-title span:nth-child(11) {
    animation-delay: 3.80s;
}


/* =========================================
   LETTER ANIMATION
   ========================================= */

@keyframes letterSequential {

    0% {

        opacity: 0;

        transform:
            translateY(50px)
            scale(0.75);

        filter: blur(8px);
    }


    45% {

        opacity: 1;

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

        filter: blur(0);
    }


    65% {

        transform:
            translateY(6px)
            scale(0.98);
    }


    82% {

        transform:
            translateY(-3px)
            scale(1.02);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


/* =========================================
   CAPTION
   ========================================= */

.loader-caption {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(10px, 1.5vw, 14px);

    font-weight: 600;

    letter-spacing: 5px;

    color: #B8860B;

    text-transform: uppercase;

    opacity: 0;

    /*
       Caption comes AFTER letters
    */

    animation:
        captionSequential
        1s
        ease
        forwards;

    animation-delay: 4.60s;
}


/* =========================================
   CAPTION ANIMATION
   ========================================= */

@keyframes captionSequential {

    0% {

        opacity: 0;

        transform:
            translateY(15px);

        letter-spacing: 1px;
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

        letter-spacing: 5px;
    }
}


/* =========================================
   LOADING LINE
   ========================================= */

.loader-line {

    width: 240px;

    max-width: 70vw;

    height: 3px;

    margin: 28px auto 0;

    background:
        rgba(184, 134, 11, 0.18);

    overflow: hidden;

    border-radius: 20px;

    opacity: 0;

    /*
       Loading line appears at the end
    */

    animation:
        lineAppear
        0.8s
        ease
        forwards;

    animation-delay: 4.90s;
}


/* =========================================
   LOADING BAR
   ========================================= */

.loader-line span {

    display: block;

    width: 0%;

    height: 100%;

    background: #B8860B;

    border-radius: 20px;

    box-shadow:
        0 0 8px rgba(184, 134, 11, 0.7);

    /*
       20 second loading
    */

    animation:
        loadingLine
        20s
        linear
        forwards;

    animation-delay: 5s;
}


/* =========================================
   LINE APPEAR
   ========================================= */

@keyframes lineAppear {

    0% {

        opacity: 0;

        transform:
            scaleX(0.5);
    }

    100% {

        opacity: 1;

        transform:
            scaleX(1);
    }
}


/* =========================================
   LOGO FIRST APPEAR
   ========================================= */

@keyframes logoFirst {

    0% {

        opacity: 0;

        transform:
            scale(0.65);
    }


    60% {

        opacity: 1;

        transform:
            scale(1.08);
    }


    80% {

        transform:
            scale(0.98);
    }


    100% {

        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================
   LOGO IMAGE FIRST APPEAR
   ========================================= */

@keyframes logoImageFirst {

    0% {

        opacity: 0;

        transform:
            scale(0.40);
    }


    65% {

        opacity: 1;

        transform:
            scale(1.08);
    }


    85% {

        transform:
            scale(0.98);
    }


    100% {

        opacity: 1;

        transform:
            scale(1);
    }
}


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

@keyframes logoPulse {

    0% {

        box-shadow:
            0 0 20px rgba(184, 134, 11, 0.30),
            0 0 45px rgba(184, 134, 11, 0.20),
            0 0 80px rgba(184, 134, 11, 0.12);
    }


    50% {

        box-shadow:
            0 0 30px rgba(184, 134, 11, 0.50),
            0 0 60px rgba(184, 134, 11, 0.30),
            0 0 100px rgba(184, 134, 11, 0.18);
    }


    100% {

        box-shadow:
            0 0 20px rgba(184, 134, 11, 0.30),
            0 0 45px rgba(184, 134, 11, 0.20),
            0 0 80px rgba(184, 134, 11, 0.12);
    }
}


/* =========================================
   LOADING LINE
   ========================================= */

@keyframes loadingLine {

    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


/* =========================================
   RING ROTATION
   ========================================= */

@keyframes ringRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes ringRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }
}


/* =========================================
   LOADER FADE
   ========================================= */

@keyframes loaderFade {

    0% {

        opacity: 1;

        transform:
            translateY(0);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 768px) {

    .loader-content {
        padding: 25px 15px;
    }


    .logo-circle {

        width: 320px;

        height: 320px;

        margin-bottom: 30px;

        border-width: 4px;
    }


    .loader-logo {

        width: 290px;

        height: 290px;
    }


    .logo-circle::before {
        inset: -12px;
    }


    .logo-circle::after {
        inset: -21px;
    }


    .loader-title {

        font-size: 38px;

        letter-spacing: 2px;
    }


    .loader-caption {

        font-size: 11px;

        letter-spacing: 3px;
    }


    .loader-line {

        width: 220px;
    }
}


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

@media (max-width: 600px) {

    #preloader {
        padding: 10px;
    }


    .loader-content {
        padding: 15px;
    }


    .logo-circle {

        width: 290px;

        height: 290px;

        margin-bottom: 28px;

        border-width: 4px;
    }


    .loader-logo {

        width: 260px;

        height: 260px;
    }


    .logo-circle::before {
        inset: -10px;
    }


    .logo-circle::after {
        inset: -18px;
    }


    .loader-title {

        font-size: 30px;

        letter-spacing: 1.5px;

        line-height: 1.3;
    }


    .loader-caption {

        font-size: 9px;

        letter-spacing: 2.5px;

        line-height: 1.6;

        max-width: 90%;
    }


    .loader-line {

        width: 180px;

        height: 3px;

        margin-top: 22px;
    }
}


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

@media (max-width: 380px) {

    .logo-circle {

        width: 245px;

        height: 245px;

        margin-bottom: 24px;
    }


    .loader-logo {

        width: 220px;

        height: 220px;
    }


    .logo-circle::before {
        inset: -9px;
    }


    .logo-circle::after {
        inset: -16px;
    }


    .loader-title {

        font-size: 25px;

        letter-spacing: 1px;
    }


    .loader-caption {

        font-size: 8px;

        letter-spacing: 2px;
    }


    .loader-line {

        width: 160px;
    }
}


/* =========================================
   VERY SMALL DEVICES
   ========================================= */

@media (max-width: 320px) {

    .logo-circle {

        width: 210px;

        height: 210px;
    }


    .loader-logo {

        width: 188px;

        height: 188px;
    }


    .loader-title {

        font-size: 22px;
    }


    .loader-caption {

        font-size: 7px;

        letter-spacing: 1.5px;
    }
}


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

@media (max-height: 600px)
and (orientation: landscape) {

    .loader-content {

        transform:
            scale(0.70);
    }


    .logo-circle {

        margin-bottom: 15px;
    }


    .loader-line {

        margin-top: 15px;
    }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

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

    #preloader,
    .loader-content,
    .logo-circle,
    .loader-logo,
    .loader-title span,
    .loader-caption,
    .loader-line span,
    .logo-circle::before,
    .logo-circle::after {

        animation: none !important;

        transition: none !important;
    }


    .loader-title span,
    .loader-caption,
    .loader-line {

        opacity: 1;

        transform: none;

        filter: none;
    }
}