/* ==========================================
   SHARING HOLIDAYS
   Premium Travel Agency Website
   Main Stylesheet
========================================== */


/* ===============================
   ROOT VARIABLES
================================ */

:root {

    --primary-blue: #06283D;
    --secondary-blue: #1363DF;
    --light-blue: #47B5FF;

    --gold: #D4AF37;
    --light-gold: #FFD700;

    --white: #ffffff;
    --black: #111111;

    --gray: #f5f5f5;

    --glass-bg: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.25);

    --shadow:
    0 10px 30px rgba(0,0,0,0.15);

    --transition:
    all .4s ease;

}


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


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


html{
    scroll-behavior:smooth;
}


body{

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

    background:#ffffff;

    color:#333;

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}


ul{

    list-style:none;

}


button{

    border:none;

    outline:none;

    cursor:pointer;

}



/* ===============================
   GLOBAL SECTION SETTINGS
================================ */


section{

    padding:90px 0;

}


.section-title{

    text-align:center;

    margin-bottom:60px;

}


.section-title h2{

    font-size:42px;

    font-weight:700;

    color:var(--primary-blue);

    position:relative;

    display:inline-block;

}


.section-title h2::after{

    content:"";

    width:70px;

    height:4px;

    background:var(--gold);

    position:absolute;

    bottom:-15px;

    left:50%;

    transform:translateX(-50%);

    border-radius:10px;

}



.section-title p{

    margin-top:25px;

    color:#666;

    max-width:650px;

    margin-left:auto;

    margin-right:auto;

    line-height:1.8;

}



/* ===============================
   PREMIUM BUTTONS
================================ */


.btn-gold{


    background:
    linear-gradient(
    45deg,
    var(--gold),
    var(--light-gold)
    );


    color:#000;


    padding:14px 35px;


    border-radius:50px;


    font-weight:600;


    transition:var(--transition);


    display:inline-block;


}



.btn-gold:hover{


    transform:translateY(-5px);


    box-shadow:
    0 10px 25px rgba(212,175,55,.4);


}



.btn-outline{


    padding:13px 35px;


    border-radius:50px;


    border:2px solid var(--gold);


    color:var(--gold);


    transition:var(--transition);


}



.btn-outline:hover{


    background:var(--gold);


    color:#000;


}



/* ===============================
   GLASS EFFECT
================================ */


.glass-card{


    background:
    var(--glass-bg);


    backdrop-filter:
    blur(15px);


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


    border:
    1px solid var(--glass-border);


    box-shadow:
    var(--shadow);


    border-radius:25px;


}


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


.overlay{


    position:absolute;

    inset:0;


    background:
    linear-gradient(
    rgba(6,40,61,.75),
    rgba(6,40,61,.55)
    );


}


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


.container{

    max-width:1320px;

}



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


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#eee;

}


::-webkit-scrollbar-thumb{

    background:
    var(--gold);

    border-radius:20px;

}


/* ===============================
   SELECTION
================================ */


::selection{

    background:var(--gold);

    color:#000;

}
/* ==========================================
   NAVBAR SECTION
   Premium Sticky Travel Navbar
========================================== */


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


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;


    padding:18px 0;


    background:

    rgba(6,40,61,0.75);


    backdrop-filter:

    blur(15px);


    -webkit-backdrop-filter:

    blur(15px);


    border-bottom:

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


    transition:

    all .4s ease;

}




/* Navbar after scrolling */

.navbar.scrolled{


    background:

    rgba(6,40,61,.95);


    box-shadow:

    0 10px 30px rgba(0,0,0,.25);


    padding:12px 0;


}




/* ===============================
   NAVBAR BRAND / LOGO
================================ */


.navbar-brand{


    display:flex;


    align-items:center;


    gap:12px;


    font-size:28px;


    font-weight:700;


    color:white !important;


    letter-spacing:.5px;


}



.navbar-brand img{


    width:55px;


    height:55px;


    object-fit:contain;


}




/* Brand Text */

.navbar-brand span{


    color:

    var(--gold);


}




/* ===============================
   NAVIGATION LINKS
================================ */


.navbar-nav{


    gap:15px;

}



.navbar-nav .nav-link{


    color:white !important;


    font-size:16px;


    font-weight:500;


    padding:10px 18px !important;


    position:relative;


    transition:var(--transition);


}




/* Hover Line */


.navbar-nav .nav-link::after{


    content:"";


    position:absolute;


    width:0;


    height:3px;


    background:

    var(--gold);


    bottom:0;


    left:50%;


    transform:translateX(-50%);


    transition:.4s;


    border-radius:10px;


}



.navbar-nav .nav-link:hover::after,


.navbar-nav .nav-link.active::after{


    width:70%;


}



.navbar-nav .nav-link:hover{


    color:

    var(--gold) !important;


}





/* ===============================
   LOGIN REGISTER BUTTONS
================================ */


.nav-auth-btn{


    display:flex;


    align-items:center;


    gap:12px;


}



.login-btn{


    padding:

    11px 25px;


    border-radius:50px;


    border:

    2px solid var(--gold);


    color:white;


    font-weight:600;


    transition:var(--transition);


}




.login-btn:hover{


    background:

    var(--gold);


    color:#000;


    transform:translateY(-3px);


}





.register-btn{


    padding:

    12px 28px;


    border-radius:50px;


    background:

    linear-gradient(
    45deg,
    var(--gold),
    var(--light-gold)
    );


    color:#000;


    font-weight:700;


    transition:var(--transition);


}




.register-btn:hover{


    transform:

    translateY(-4px);


    box-shadow:

    0 10px 25px rgba(212,175,55,.45);


}





/* ===============================
   NAVBAR TOGGLE BUTTON
================================ */


.navbar-toggler{


    border:

    2px solid var(--gold);


    padding:8px 12px;


}



.navbar-toggler:focus{


    box-shadow:none;


}



.navbar-toggler-icon{


    filter:

    brightness(0) invert(1);


}




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


.dropdown-menu{


    background:

    rgba(6,40,61,.95);


    backdrop-filter:

    blur(15px);


    border:none;


    border-radius:15px;


    padding:15px;


    box-shadow:

    var(--shadow);


}




.dropdown-item{


    color:white;


    padding:12px 18px;


    border-radius:10px;


    transition:.3s;


}




.dropdown-item:hover{


    background:

    var(--gold);


    color:#000;


}




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


@media(max-width:991px){


.navbar{


    padding:15px 20px;


}



.navbar-collapse{


    margin-top:20px;


    background:

    rgba(6,40,61,.96);


    padding:25px;


    border-radius:20px;


}



.navbar-nav{


    gap:5px;


    text-align:center;


}



.navbar-nav .nav-link{


    padding:12px !important;


}



.nav-auth-btn{


    justify-content:center;


    margin-top:20px;


    flex-direction:column;


}



.login-btn,
.register-btn{


    width:100%;


    text-align:center;


}



}




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


@media(max-width:576px){


.navbar-brand{


    font-size:22px;


}



.navbar-brand img{


    width:45px;


    height:45px;


}



.navbar-toggler{


    padding:6px 10px;


}



}



@media(max-width:375px){


.navbar-brand{


    font-size:20px;


}


.navbar-brand img{


    width:40px;


}



}




@media(max-width:320px){


.navbar-brand span{


    display:none;


}


.login-btn,
.register-btn{


    font-size:14px;


}


}
/* ==========================================
   HERO SLIDER SECTION
   Luxury Travel Landing Banner
========================================== */


/* ===============================
   HERO MAIN AREA
================================ */


.hero-section{


    position:relative;


    width:100%;


    height:100vh;


    min-height:700px;


    overflow:hidden;


}



/* Bootstrap Carousel Fix */

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item{


    height:100%;


}




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


.hero-section .carousel-item img{


    width:100%;


    height:100%;


    object-fit:cover;


    animation:

    heroZoom 15s infinite;


}





/* Image Zoom Animation */


@keyframes heroZoom{


    0%{


        transform:scale(1);


    }


    50%{


        transform:scale(1.12);


    }


    100%{


        transform:scale(1);


    }


}





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


.hero-section::before{


    content:"";


    position:absolute;


    inset:0;


    z-index:2;


    background:


    linear-gradient(

    90deg,

    rgba(6,40,61,.85),

    rgba(6,40,61,.45),

    rgba(6,40,61,.75)

    );


}





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


.hero-content{


    position:absolute;


    top:50%;


    left:50%;


    transform:


    translate(-50%,-50%);


    z-index:5;


    width:90%;


    max-width:900px;


    text-align:center;


    color:white;


}





.hero-content h1{


    font-size:70px;


    line-height:1.15;


    font-weight:800;


    text-transform:capitalize;


    margin-bottom:25px;


    animation:


    slideDown 1s ease;


}





.hero-content h1 span{


    color:

    var(--gold);


}




.hero-content p{


    font-size:20px;


    max-width:750px;


    margin:

    0 auto 35px;


    line-height:1.8;


    color:#eee;


    animation:


    fadeUp 1.2s ease;


}




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


.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    animation:


    fadeUp 1.5s ease;


}



.hero-buttons .btn-gold{


    padding:

    16px 45px;


}



.hero-buttons .btn-outline{


    color:white;


}





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


.hero-search{


    position:absolute;


    bottom:40px;


    left:50%;


    transform:

    translateX(-50%);


    z-index:6;


    width:90%;


    max-width:1100px;


}




.search-box{


    background:

    rgba(255,255,255,.15);


    backdrop-filter:

    blur(20px);


    -webkit-backdrop-filter:

    blur(20px);


    border:

    1px solid rgba(255,255,255,.25);


    border-radius:25px;


    padding:25px;


    display:flex;


    align-items:center;


    gap:20px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.25);


}




.search-item{


    flex:1;


}





.search-item label{


    display:block;


    color:white;


    font-size:14px;


    margin-bottom:8px;


}





.search-item input,
.search-item select{


    width:100%;


    padding:

    13px 18px;


    border-radius:50px;


    border:none;


    outline:none;


}





.search-btn{


    background:

    var(--gold);


    color:#000;


    padding:

    15px 35px;


    border-radius:50px;


    font-weight:700;


    transition:.3s;


}




.search-btn:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 10px 25px rgba(212,175,55,.4);


}




/* ===============================
   SLIDER CONTROLS
================================ */


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


    width:60px;


    height:60px;


    top:50%;


    transform:

    translateY(-50%);


    background:

    rgba(255,255,255,.15);


    backdrop-filter:

    blur(10px);


    border-radius:50%;


    margin:20px;


}





.carousel-control-prev:hover,
.carousel-control-next:hover{


    background:

    var(--gold);


}





/* ===============================
   SLIDER INDICATORS
================================ */


.carousel-indicators button{


    width:12px;


    height:12px;


    border-radius:50%;


    background:

    var(--gold);


}





/* ===============================
   ANIMATIONS
================================ */


@keyframes slideDown{


    from{


        opacity:0;


        transform:

        translateY(-50px);


    }


    to{


        opacity:1;


        transform:

        translateY(0);


    }


}




@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(50px);


    }


    to{


        opacity:1;


        transform:

        translateY(0);


    }


}





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



@media(max-width:1200px){


.hero-content h1{


    font-size:58px;


}


.hero-content p{


    font-size:18px;


}



}




@media(max-width:992px){


.hero-section{


    min-height:650px;


}



.hero-content h1{


    font-size:48px;


}



.search-box{


    flex-wrap:wrap;


}



.search-item{


    flex-basis:45%;


}



.search-btn{


    width:100%;


}



}




@media(max-width:768px){


.hero-section{


    height:90vh;


    min-height:600px;


}



.hero-content h1{


    font-size:38px;


}



.hero-content p{


    font-size:16px;


}



.hero-buttons{


    flex-direction:column;


    align-items:center;


}



.hero-buttons a{


    width:220px;


}



.hero-search{


    display:none;


}



}




@media(max-width:576px){


.hero-content h1{


    font-size:32px;


}



.hero-content p{


    font-size:15px;


}



.hero-section{


    height:85vh;


}



}




@media(max-width:425px){


.hero-content h1{


    font-size:28px;


}



.hero-buttons a{


    padding:

    12px 25px;


}



}




@media(max-width:375px){


.hero-content h1{


    font-size:25px;


}



.hero-content p{


    display:none;


}



}




@media(max-width:320px){


.hero-content h1{


    font-size:22px;


}



.hero-buttons{


    gap:10px;


}



}
/* ==========================================
   SERVICES SECTION
   Premium Travel Services Cards
========================================== */


/* ===============================
   SERVICES AREA
================================ */


.services-section{


    background:

    linear-gradient(

    180deg,

    #ffffff,

    #f7fbff

    );


}





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


.services-row{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}





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


.service-card{


    position:relative;


    padding:40px 30px;


    text-align:center;


    border-radius:30px;


    background:white;


    overflow:hidden;


    box-shadow:

    0 10px 35px rgba(0,0,0,.08);


    transition:

    all .5s ease;


}





/* Gold Background Effect */


.service-card::before{


    content:"";


    position:absolute;


    width:0;


    height:0;


    background:

    var(--gold);


    border-radius:50%;


    top:-50px;


    right:-50px;


    transition:.6s;


    opacity:.15;


}





.service-card:hover::before{


    width:250px;


    height:250px;


}





.service-card:hover{


    transform:

    translateY(-15px);


    box-shadow:

    0 20px 45px rgba(6,40,61,.18);


}





/* ===============================
   SERVICE ICON
================================ */


.service-icon{


    width:90px;


    height:90px;


    margin:

    0 auto 25px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    var(--primary-blue),

    var(--secondary-blue)

    );


    color:

    var(--gold);


    font-size:38px;


    transition:.5s;


    position:relative;


    z-index:2;


}





.service-card:hover .service-icon{


    transform:

    rotateY(360deg);


    background:

    var(--gold);


    color:

    var(--primary-blue);


}





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


.service-card h3{


    font-size:24px;


    font-weight:700;


    color:

    var(--primary-blue);


    margin-bottom:15px;


}





.service-card p{


    color:#666;


    font-size:15px;


    line-height:1.8;


}





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


.service-link{


    display:inline-block;


    margin-top:20px;


    color:

    var(--primary-blue);


    font-weight:600;


    transition:.3s;


}





.service-link i{


    margin-left:8px;


}





.service-link:hover{


    color:

    var(--gold);


    transform:

    translateX(5px);


}





/* ===============================
   GLASS SERVICE VARIANT
================================ */


.service-glass{


    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.8),

    rgba(255,255,255,.45)

    );


    backdrop-filter:

    blur(15px);


    border:

    1px solid rgba(255,255,255,.5);


}





/* ===============================
   SERVICE BADGE
================================ */


.service-badge{


    position:absolute;


    top:20px;


    right:20px;


    background:

    var(--gold);


    color:#000;


    padding:

    6px 15px;


    border-radius:30px;


    font-size:12px;


    font-weight:700;


}





/* =================================
   SERVICE RESPONSIVENESS
================================ */



@media(max-width:1200px){


.services-row{


    grid-template-columns:

    repeat(3,1fr);


}



}





@media(max-width:992px){


.services-row{


    grid-template-columns:

    repeat(2,1fr);


}



.service-card{


    padding:35px 25px;


}



}





@media(max-width:768px){


.services-row{


    grid-template-columns:

    repeat(1,1fr);


    gap:25px;


}



.service-card{


    max-width:420px;


    margin:auto;


}



.service-icon{


    width:80px;


    height:80px;


    font-size:32px;


}



}





@media(max-width:576px){


.services-section{


    padding:70px 15px;


}



.service-card h3{


    font-size:21px;


}



.service-card p{


    font-size:14px;


}



}





@media(max-width:425px){


.service-card{


    padding:30px 20px;


    border-radius:25px;


}



.service-icon{


    width:70px;


    height:70px;


    font-size:28px;


}



}





@media(max-width:375px){


.service-card h3{


    font-size:19px;


}



.service-card p{


    font-size:13px;


}



}





@media(max-width:320px){


.service-card{


    padding:25px 15px;


}



.service-icon{


    width:65px;


    height:65px;


    font-size:25px;


}



}
/* ==========================================
   DESTINATIONS SECTION
   Luxury Travel Destination Cards
========================================== */


/* ===============================
   DESTINATION SECTION BACKGROUND
================================ */


.destinations-section{


    background:

    linear-gradient(

    180deg,

    #f7fbff,

    #ffffff

    );


}





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


.destination-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





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


.destination-card{


    position:relative;


    height:430px;


    border-radius:30px;


    overflow:hidden;


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


    cursor:pointer;


}





/* Destination Image */


.destination-card img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:

    transform .7s ease;


}





.destination-card:hover img{


    transform:

    scale(1.15);


}





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


.destination-card::before{


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    transparent,

    rgba(6,40,61,.85)

    );


    z-index:1;


    transition:.4s;


}





.destination-card:hover::before{


    background:


    linear-gradient(

    transparent,

    rgba(6,40,61,.95)

    );


}





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


.destination-content{


    position:absolute;


    bottom:30px;


    left:30px;


    right:30px;


    z-index:2;


    color:white;


}





.destination-content h3{


    font-size:32px;


    font-weight:800;


    margin-bottom:10px;


}





.destination-content p{


    font-size:15px;


    color:#eee;


    line-height:1.6;


}





/* ===============================
   COUNTRY TAG
================================ */


.destination-tag{


    position:absolute;


    top:25px;


    left:25px;


    z-index:3;


    background:

    rgba(212,175,55,.95);


    color:#000;


    padding:

    8px 20px;


    border-radius:50px;


    font-size:13px;


    font-weight:700;


}





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


.destination-price{


    position:absolute;


    top:25px;


    right:25px;


    z-index:3;


    background:

    rgba(255,255,255,.15);


    backdrop-filter:

    blur(10px);


    color:white;


    padding:

    8px 18px;


    border-radius:50px;


    border:

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


    font-weight:600;


}





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


.destination-btn{


    margin-top:15px;


    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:

    10px 25px;


    border-radius:50px;


    background:

    var(--gold);


    color:#000;


    font-weight:700;


    font-size:14px;


    transition:.3s;


}





.destination-btn:hover{


    transform:

    translateX(8px);


}





/* ===============================
   GLASS DESTINATION CARD
================================ */


.destination-glass{


    background:

    rgba(255,255,255,.15);


    backdrop-filter:

    blur(15px);


}





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


.destination-filter{


    display:flex;


    justify-content:center;


    gap:15px;


    margin-bottom:50px;


    flex-wrap:wrap;


}




.destination-filter button{


    padding:

    12px 30px;


    border-radius:50px;


    background:white;


    border:

    1px solid #ddd;


    font-weight:600;


    transition:.3s;


}





.destination-filter button:hover,
.destination-filter button.active{


    background:

    var(--gold);


    border-color:

    var(--gold);


    color:#000;


}





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



@media(max-width:1200px){


.destination-grid{


    grid-template-columns:

    repeat(3,1fr);


}



.destination-card{


    height:400px;


}



}





@media(max-width:992px){


.destination-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.destination-content h3{


    font-size:28px;


}



}





@media(max-width:768px){


.destination-grid{


    grid-template-columns:

    repeat(1,1fr);


}



.destination-card{


    max-width:450px;


    margin:auto;


    height:420px;


}



}





@media(max-width:576px){


.destinations-section{


    padding:70px 15px;


}



.destination-card{


    height:380px;


    border-radius:25px;


}



.destination-content{


    left:20px;


    bottom:20px;


}



.destination-content h3{


    font-size:25px;


}



.destination-tag,
.destination-price{


    padding:

    7px 14px;


    font-size:12px;


}



}





@media(max-width:425px){


.destination-card{


    height:350px;


}



.destination-content h3{


    font-size:23px;


}



.destination-content p{


    font-size:13px;


}



.destination-btn{


    padding:

    8px 18px;


    font-size:13px;


}



}





@media(max-width:375px){


.destination-card{


    height:320px;


}



.destination-content h3{


    font-size:21px;


}



.destination-price{


    display:none;


}



}





@media(max-width:320px){


.destination-card{


    height:300px;


}



.destination-tag{


    top:15px;


    left:15px;


}



.destination-content{


    left:15px;


    right:15px;


}



.destination-content h3{


    font-size:19px;


}



}
/* ==========================================
   PACKAGES SECTION
   Luxury Travel Package Cards
========================================== */


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


.packages-section{


    background:

    linear-gradient(

    180deg,

    #ffffff,

    #f7fbff

    );


}





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


.package-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





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


.package-card{


    background:white;


    border-radius:30px;


    overflow:hidden;


    position:relative;


    box-shadow:


    0 15px 40px rgba(0,0,0,.10);


    transition:.5s;


}





.package-card:hover{


    transform:


    translateY(-15px);


    box-shadow:


    0 25px 55px rgba(6,40,61,.20);


}





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


.package-image{


    height:260px;


    overflow:hidden;


    position:relative;


}





.package-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.7s;


}





.package-card:hover .package-image img{


    transform:


    scale(1.12);


}





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


.package-image::after{


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    transparent,

    rgba(0,0,0,.35)

    );


}





/* ===============================
   PACKAGE BADGE
================================ */


.package-badge{


    position:absolute;


    top:20px;


    left:20px;


    z-index:2;


    background:

    var(--gold);


    color:#000;


    padding:


    8px 18px;


    border-radius:50px;


    font-size:13px;


    font-weight:700;


}





.package-duration{


    position:absolute;


    right:20px;


    top:20px;


    z-index:2;


    background:


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


    backdrop-filter:


    blur(10px);


    color:white;


    border:


    1px solid rgba(255,255,255,.4);


    padding:


    8px 15px;


    border-radius:50px;


    font-size:13px;


}





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


.package-content{


    padding:30px;


}





.package-content h3{


    font-size:25px;


    font-weight:750;


    color:


    var(--primary-blue);


    margin-bottom:12px;


}





.package-content p{


    color:#666;


    font-size:15px;


    line-height:1.7;


}





/* ===============================
   PACKAGE RATING
================================ */


.package-rating{


    display:flex;


    align-items:center;


    gap:5px;


    margin:15px 0;


}





.package-rating i{


    color:

    var(--gold);


    font-size:17px;


}





.package-rating span{


    color:#777;


    font-size:14px;


    margin-left:8px;


}





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


.package-features{


    margin:20px 0;


    padding-top:20px;


    border-top:


    1px solid #eee;


}





.package-features li{


    display:flex;


    align-items:center;


    gap:10px;


    margin-bottom:12px;


    color:#555;


    font-size:14px;


}





.package-features i{


    color:

    var(--gold);


}





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


.package-price{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-top:20px;


}





.package-price h4{


    font-size:30px;


    color:

    var(--primary-blue);


    font-weight:800;


}





.package-price span{


    font-size:14px;


    color:#777;


}





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


.package-btn{


    width:100%;


    text-align:center;


    padding:


    14px;


    border-radius:50px;


    background:


    var(--primary-blue);


    color:white;


    font-weight:700;


    margin-top:20px;


    transition:.4s;


}





.package-btn:hover{


    background:


    var(--gold);


    color:#000;


}





/* ===============================
   FEATURED PACKAGE
================================ */


.package-card.featured{


    border:


    3px solid var(--gold);


}





.package-card.featured::before{


    content:"POPULAR";


    position:absolute;


    top:20px;


    right:-35px;


    background:

    var(--gold);


    color:#000;


    padding:


    8px 45px;


    transform:


    rotate(45deg);


    font-size:12px;


    font-weight:800;


    z-index:5;


}





/* ===============================
   GLASS PACKAGE STYLE
================================ */


.package-glass{


    background:


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


    backdrop-filter:


    blur(15px);


}





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



@media(max-width:1200px){


.package-grid{


    grid-template-columns:


    repeat(3,1fr);


}



.package-content{


    padding:25px;


}



}





@media(max-width:992px){


.package-grid{


    grid-template-columns:


    repeat(2,1fr);


}



}





@media(max-width:768px){


.package-grid{


    grid-template-columns:


    repeat(1,1fr);


}



.package-card{


    max-width:430px;


    margin:auto;


}



.package-image{


    height:240px;


}



}





@media(max-width:576px){


.packages-section{


    padding:70px 15px;


}



.package-content h3{


    font-size:22px;


}



.package-price h4{


    font-size:26px;


}



}





@media(max-width:425px){


.package-image{


    height:220px;


}



.package-content{


    padding:22px;


}



.package-content p{


    font-size:14px;


}



.package-features li{


    font-size:13px;


}



}





@media(max-width:375px){


.package-content h3{


    font-size:20px;


}



.package-price{


    flex-direction:column;


    align-items:flex-start;


    gap:10px;


}



}





@media(max-width:320px){


.package-card{


    border-radius:20px;


}



.package-image{


    height:200px;


}



.package-badge,
.package-duration{


    font-size:11px;


    padding:6px 12px;


}



.package-content{


    padding:18px;


}



.package-btn{


    padding:12px;


}



}
/* ==========================================
   TESTIMONIAL SECTION
   Premium Customer Reviews
========================================== */


/* ===============================
   TESTIMONIAL BACKGROUND
================================ */


.testimonial-section{


    position:relative;


    background:


    linear-gradient(

    135deg,

    var(--primary-blue),

    #0a4d68

    );


    overflow:hidden;


}



/* Background Decoration */


.testimonial-section::before{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    background:

    var(--gold);


    opacity:.12;


    border-radius:50%;


    top:-150px;


    right:-150px;


}





.testimonial-section::after{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:

    var(--light-blue);


    opacity:.12;


    border-radius:50%;


    bottom:-150px;


    left:-100px;


}





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


.testimonial-section .section-title h2{


    color:white;


}



.testimonial-section .section-title p{


    color:#ddd;


}




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


.testimonial-grid{


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


    position:relative;


    z-index:2;


}





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


.testimonial-card{


    background:


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


    backdrop-filter:


    blur(15px);


    -webkit-backdrop-filter:


    blur(15px);


    border:


    1px solid rgba(255,255,255,.2);


    border-radius:30px;


    padding:35px;


    color:white;


    transition:.5s;


}





.testimonial-card:hover{


    transform:


    translateY(-12px);


    background:


    rgba(255,255,255,.18);


}





/* ===============================
   QUOTE ICON
================================ */


.quote-icon{


    font-size:45px;


    color:

    var(--gold);


    margin-bottom:20px;


}





/* ===============================
   REVIEW TEXT
================================ */


.testimonial-card p{


    font-size:15px;


    line-height:1.8;


    color:#eee;


    font-style:italic;


}





/* ===============================
   USER PROFILE
================================ */


.client-profile{


    display:flex;


    align-items:center;


    gap:15px;


    margin-top:30px;


}





.client-profile img{


    width:70px;


    height:70px;


    border-radius:50%;


    object-fit:cover;


    border:


    3px solid var(--gold);


}





.client-info h4{


    margin:0;


    font-size:20px;


    color:white;


}





.client-info span{


    font-size:14px;


    color:#ddd;


}





/* ===============================
   STAR RATING
================================ */


.client-rating{


    margin-top:12px;


}



.client-rating i{


    color:

    var(--gold);


    font-size:16px;


}





/* ===============================
   TESTIMONIAL SLIDER
================================ */


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


    width:55px;


    height:55px;


    top:50%;


    background:


    rgba(255,255,255,.15);


    backdrop-filter:


    blur(10px);


    border-radius:50%;


}





.testimonial-carousel .carousel-control-prev:hover,
.testimonial-carousel .carousel-control-next:hover{


    background:

    var(--gold);


}





/* ===============================
   TESTIMONIAL DOTS
================================ */


.testimonial-carousel .carousel-indicators button{


    width:12px;


    height:12px;


    border-radius:50%;


}





/* ===============================
   VERIFIED BADGE
================================ */


.verified-badge{


    display:inline-flex;


    align-items:center;


    gap:5px;


    margin-top:15px;


    padding:


    5px 15px;


    border-radius:50px;


    background:


    rgba(212,175,55,.2);


    color:

    var(--gold);


    font-size:12px;


    font-weight:600;


}





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



@media(max-width:1200px){


.testimonial-grid{


    grid-template-columns:


    repeat(3,1fr);


}



}





@media(max-width:992px){


.testimonial-grid{


    grid-template-columns:


    repeat(2,1fr);


}



}





@media(max-width:768px){


.testimonial-grid{


    grid-template-columns:


    repeat(1,1fr);


}



.testimonial-card{


    max-width:430px;


    margin:auto;


}



}





@media(max-width:576px){


.testimonial-section{


    padding:70px 15px;


}



.testimonial-card{


    padding:30px 25px;


}



.testimonial-card p{


    font-size:14px;


}



.client-profile img{


    width:60px;


    height:60px;


}



}





@media(max-width:425px){


.testimonial-card{


    border-radius:25px;


    padding:25px 20px;


}



.quote-icon{


    font-size:35px;


}



.client-info h4{


    font-size:18px;


}



}





@media(max-width:375px){


.client-profile{


    flex-direction:column;


    text-align:center;


}



}





@media(max-width:320px){


.testimonial-card{


    padding:20px 15px;


}



.testimonial-card p{


    font-size:13px;


}



.client-info h4{


    font-size:16px;


}



}
/* ==========================================
   GALLERY SECTION
   Luxury Travel Image Gallery
========================================== */


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


.gallery-section{


    background:


    #ffffff;


}





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


.gallery-grid{


    display:grid;


    grid-template-columns:


    repeat(4,1fr);


    grid-auto-rows:250px;


    gap:20px;


}





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


.gallery-item{


    position:relative;


    overflow:hidden;


    border-radius:25px;


    cursor:pointer;


    box-shadow:


    0 10px 30px rgba(0,0,0,.12);


}





.gallery-item img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.7s ease;


}





.gallery-item:hover img{


    transform:


    scale(1.15);


}





/* ===============================
   DIFFERENT IMAGE SIZES
================================ */


.gallery-item.large{


    grid-column:


    span 2;


    grid-row:


    span 2;


}




.gallery-item.wide{


    grid-column:


    span 2;


}





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


.gallery-overlay{


    position:absolute;


    inset:0;


    display:flex;


    justify-content:center;


    align-items:center;


    background:


    rgba(6,40,61,.65);


    opacity:0;


    transition:.4s;


}





.gallery-item:hover .gallery-overlay{


    opacity:1;


}





/* ===============================
   VIEW ICON
================================ */


.gallery-overlay i{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    var(--gold);


    color:#000;


    font-size:28px;


    transform:


    scale(.5);


    transition:.4s;


}





.gallery-item:hover .gallery-overlay i{


    transform:


    scale(1);


}





/* ===============================
   IMAGE CATEGORY TAG
================================ */


.gallery-tag{


    position:absolute;


    left:20px;


    bottom:20px;


    z-index:2;


    background:


    rgba(255,255,255,.18);


    backdrop-filter:


    blur(10px);


    color:white;


    padding:


    8px 18px;


    border-radius:50px;


    border:


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


    font-size:13px;


    font-weight:600;


}





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


.gallery-filter{


    display:flex;


    justify-content:center;


    gap:15px;


    margin-bottom:45px;


    flex-wrap:wrap;


}





.gallery-filter button{


    padding:


    12px 30px;


    border-radius:50px;


    background:white;


    border:


    1px solid #ddd;


    font-weight:600;


    transition:.3s;


}





.gallery-filter button:hover,
.gallery-filter button.active{


    background:


    var(--gold);


    color:#000;


    border-color:


    var(--gold);


}





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


.gallery-lightbox{


    position:fixed;


    inset:0;


    background:


    rgba(0,0,0,.9);


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:99999;


    opacity:0;


    visibility:hidden;


    transition:.4s;


}





.gallery-lightbox.active{


    opacity:1;


    visibility:visible;


}





.gallery-lightbox img{


    max-width:90%;


    max-height:85%;


    border-radius:20px;


}





.gallery-close{


    position:absolute;


    top:30px;


    right:40px;


    font-size:45px;


    color:white;


    cursor:pointer;


}





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



@media(max-width:1200px){


.gallery-grid{


    grid-template-columns:


    repeat(4,1fr);


}



}





@media(max-width:992px){


.gallery-grid{


    grid-template-columns:


    repeat(3,1fr);


}



.gallery-item.large{


    grid-column:


    span 2;


}



}





@media(max-width:768px){


.gallery-grid{


    grid-template-columns:


    repeat(2,1fr);


    grid-auto-rows:200px;


}



.gallery-item.large,
.gallery-item.wide{


    grid-column:


    span 2;


}



}





@media(max-width:576px){


.gallery-section{


    padding:70px 15px;


}



.gallery-grid{


    grid-template-columns:


    repeat(2,1fr);


    gap:15px;


    grid-auto-rows:160px;


}



.gallery-item{


    border-radius:20px;


}



.gallery-overlay i{


    width:55px;


    height:55px;


    font-size:22px;


}



.gallery-tag{


    left:12px;


    bottom:12px;


    padding:


    6px 12px;


    font-size:11px;


}



}





@media(max-width:425px){


.gallery-grid{


    grid-template-columns:


    repeat(1,1fr);


    grid-auto-rows:230px;


}



.gallery-item.large,
.gallery-item.wide{


    grid-column:


    span 1;


}



}





@media(max-width:375px){


.gallery-grid{


    grid-auto-rows:200px;


}



.gallery-close{


    right:20px;


    top:15px;


    font-size:35px;


}



}





@media(max-width:320px){


.gallery-grid{


    grid-auto-rows:180px;


}



.gallery-tag{


    display:none;


}



}/* ==========================================
   FAQ SECTION
   Premium Travel FAQ Accordion
========================================== */


/* ===============================
   FAQ BACKGROUND
================================ */


.faq-section{


    background:


    linear-gradient(

    180deg,

    #f7fbff,

    #ffffff

    );


}





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


.faq-wrapper{


    max-width:900px;


    margin:auto;


}





/* ===============================
   FAQ ITEM
================================ */


.faq-item{


    margin-bottom:20px;


    border-radius:25px;


    overflow:hidden;


    background:white;


    box-shadow:


    0 10px 30px rgba(0,0,0,.08);


    transition:.4s;


}





.faq-item:hover{


    transform:


    translateY(-5px);


    box-shadow:


    0 15px 40px rgba(6,40,61,.15);


}





/* ===============================
   FAQ QUESTION
================================ */


.faq-question{


    width:100%;


    padding:25px 30px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:white;


    border:none;


    color:


    var(--primary-blue);


    font-size:18px;


    font-weight:700;


    text-align:left;


    transition:.3s;


}





.faq-question:hover{


    color:


    var(--gold);


}





.faq-question i{


    width:35px;


    height:35px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(212,175,55,.15);


    color:


    var(--gold);


    transition:.4s;


}





/* Active Icon Rotation */


.faq-item.active .faq-question i{


    transform:


    rotate(180deg);


    background:


    var(--gold);


    color:#000;


}





/* ===============================
   FAQ ANSWER
================================ */


.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:


    max-height .5s ease;


}





.faq-answer p{


    padding:


    0 30px 25px;


    color:#666;


    line-height:1.8;


    font-size:15px;


}





/* ===============================
   GLASS FAQ STYLE
================================ */


.faq-glass{


    background:


    rgba(255,255,255,.65);


    backdrop-filter:


    blur(15px);


    border:


    1px solid rgba(255,255,255,.4);


}





/* ===============================
   FAQ ICON BOX
================================ */


.faq-icon{


    width:80px;


    height:80px;


    margin:


    0 auto 30px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    linear-gradient(

    135deg,

    var(--primary-blue),

    var(--secondary-blue)

    );


    color:


    var(--gold);


    font-size:35px;


}





/* ===============================
   FAQ SIDE IMAGE AREA
================================ */


.faq-content{


    display:grid;


    grid-template-columns:


    1fr 1.5fr;


    gap:50px;


    align-items:center;


}





.faq-image{


    position:relative;


}





.faq-image img{


    width:100%;


    border-radius:30px;


    box-shadow:


    0 15px 40px rgba(0,0,0,.15);


}





.faq-image::after{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    background:


    var(--gold);


    opacity:.25;


    border-radius:50%;


    bottom:-30px;


    left:-30px;


    z-index:-1;


}





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



@media(max-width:1200px){


.faq-content{


    gap:35px;


}



}





@media(max-width:992px){


.faq-content{


    grid-template-columns:


    1fr;


}



.faq-image{


    max-width:600px;


    margin:auto;


}



}





@media(max-width:768px){


.faq-question{


    padding:


    20px;


    font-size:16px;


}



.faq-answer p{


    padding:


    0 20px 20px;


    font-size:14px;


}



.faq-wrapper{


    padding:0 15px;


}



}





@media(max-width:576px){


.faq-section{


    padding:


    70px 15px;


}



.faq-item{


    border-radius:20px;


}



.faq-question{


    font-size:15px;


}



.faq-question i{


    width:30px;


    height:30px;


}



}





@media(max-width:425px){


.faq-question{


    padding:


    18px;


    gap:10px;


}



.faq-question i{


    flex-shrink:0;


}



.faq-answer p{


    font-size:13px;


}



}





@media(max-width:375px){


.faq-question{


    font-size:14px;


}



.faq-icon{


    width:65px;


    height:65px;


    font-size:28px;


}



}





@media(max-width:320px){


.faq-question{


    padding:


    15px;


    font-size:13px;


}



.faq-answer p{


    padding:


    0 15px 15px;


}



}
/* ==========================================
   FOOTER SECTION
   Luxury Travel Agency Footer
========================================== */


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


.footer-section{


    position:relative;


    background:


    linear-gradient(

    135deg,

    var(--primary-blue),

    #041c2c

    );


    color:white;


    padding-top:80px;


    overflow:hidden;


}





/* Footer Decorative Circle */


.footer-section::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:


    var(--gold);


    opacity:.08;


    border-radius:50%;


    top:-150px;


    right:-100px;


}





.footer-section::after{


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    background:


    var(--light-blue);


    opacity:.08;


    border-radius:50%;


    bottom:-120px;


    left:-100px;


}





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


.footer-grid{


    display:grid;


    grid-template-columns:


    1.5fr 1fr 1fr 1.2fr;


    gap:40px;


    position:relative;


    z-index:2;


}





/* ===============================
   FOOTER LOGO AREA
================================ */


.footer-logo{


    display:flex;


    align-items:center;


    gap:12px;


    margin-bottom:25px;


}





.footer-logo img{


    width:65px;


    height:65px;


}





.footer-logo h2{


    color:white;


    font-size:30px;


    font-weight:800;


}





.footer-logo span{


    color:

    var(--gold);


}





.footer-about p{


    color:#ddd;


    line-height:1.8;


    font-size:15px;


    max-width:350px;


}





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


.footer-title{


    font-size:22px;


    font-weight:700;


    margin-bottom:25px;


    position:relative;


}





.footer-title::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-10px;


    width:50px;


    height:3px;


    background:


    var(--gold);


    border-radius:10px;


}





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


.footer-links li{


    margin-bottom:14px;


}




.footer-links a{


    color:#ddd;


    display:flex;


    align-items:center;


    gap:10px;


    transition:.3s;


}





.footer-links a i{


    color:


    var(--gold);


    font-size:14px;


}





.footer-links a:hover{


    color:


    var(--gold);


    transform:


    translateX(8px);


}





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


.footer-contact li{


    display:flex;


    gap:15px;


    align-items:flex-start;


    margin-bottom:18px;


    color:#ddd;


}





.footer-contact i{


    color:


    var(--gold);


    font-size:20px;


}





/* ===============================
   NEWSLETTER
================================ */


.newsletter-box{


    display:flex;


    background:


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


    backdrop-filter:


    blur(10px);


    border-radius:50px;


    padding:5px;


    border:


    1px solid rgba(255,255,255,.2);


}





.newsletter-box input{


    flex:1;


    background:transparent;


    border:none;


    outline:none;


    color:white;


    padding:


    15px 20px;


}





.newsletter-box input::placeholder{


    color:#ddd;


}





.newsletter-box button{


    width:50px;


    height:50px;


    border-radius:50%;


    background:


    var(--gold);


    color:#000;


    transition:.3s;


}





.newsletter-box button:hover{


    transform:


    rotate(45deg);


}





/* ===============================
   SOCIAL ICONS
================================ */


.footer-social{


    display:flex;


    gap:12px;


    margin-top:25px;


}





.footer-social a{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


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


    color:white;


    transition:.4s;


}





.footer-social a:hover{


    background:


    var(--gold);


    color:#000;


    transform:


    translateY(-5px);


}





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


.footer-bottom{


    margin-top:60px;


    padding:


    25px 0;


    border-top:


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


    display:flex;


    justify-content:space-between;


    align-items:center;


    position:relative;


    z-index:2;


}





.footer-bottom p{


    margin:0;


    color:#ccc;


    font-size:14px;


}





.footer-bottom a{


    color:


    var(--gold);


}





/* ===============================
   PAYMENT ICONS
================================ */


.payment-icons{


    display:flex;


    gap:12px;


}





.payment-icons i{


    font-size:28px;


    color:white;


}





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



@media(max-width:1200px){


.footer-grid{


    grid-template-columns:


    repeat(3,1fr);


}



.footer-about{


    grid-column:


    span 3;


}



}





@media(max-width:992px){


.footer-grid{


    grid-template-columns:


    repeat(2,1fr);


}



.footer-about{


    grid-column:


    span 2;


}



}





@media(max-width:768px){


.footer-grid{


    grid-template-columns:


    1fr;


    gap:35px;


}



.footer-about{


    grid-column:


    span 1;


}



.footer-bottom{


    flex-direction:column;


    gap:20px;


    text-align:center;


}



}





@media(max-width:576px){


.footer-section{


    padding-top:


    60px;


}



.footer-logo h2{


    font-size:25px;


}



.footer-title{


    font-size:20px;


}



.newsletter-box{


    max-width:350px;


}



}





@media(max-width:425px){


.footer-logo img{


    width:50px;


    height:50px;


}



.footer-logo h2{


    font-size:22px;


}



.footer-about p{


    font-size:14px;


}



.footer-social a{


    width:40px;


    height:40px;


}



}





@media(max-width:375px){


.footer-bottom p{


    font-size:12px;


}



.payment-icons i{


    font-size:22px;


}



}





@media(max-width:320px){


.footer-logo h2{


    font-size:20px;


}



.newsletter-box input{


    padding:


    12px;


    font-size:13px;


}



.newsletter-box button{


    width:45px;


    height:45px;


}



}
/* ==========================================
   FLOATING UTILITIES
   WhatsApp + Back To Top Buttons
========================================== */


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


.whatsapp-btn{


    position:fixed;


    bottom:90px;


    right:30px;


    width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#25D366;


    color:white;


    border-radius:50%;


    font-size:35px;


    z-index:9999;


    box-shadow:


    0 10px 30px rgba(37,211,102,.4);


    transition:.4s;


    animation:


    whatsappPulse 2s infinite;


}





.whatsapp-btn:hover{


    transform:


    translateY(-8px);


    background:#128C7E;


    color:white;


}





/* WhatsApp Pulse Animation */


@keyframes whatsappPulse{


    0%{


        box-shadow:


        0 0 0 0 rgba(37,211,102,.6);


    }


    70%{


        box-shadow:


        0 0 0 20px rgba(37,211,102,0);


    }


    100%{


        box-shadow:


        0 0 0 0 rgba(37,211,102,0);


    }


}





/* ===============================
   WHATSAPP TOOLTIP
================================ */


.whatsapp-btn::before{


    content:"Chat With Us";


    position:absolute;


    right:75px;


    top:50%;


    transform:


    translateY(-50%);


    background:


    var(--primary-blue);


    color:white;


    padding:


    8px 18px;


    border-radius:50px;


    font-size:13px;


    white-space:nowrap;


    opacity:0;


    visibility:hidden;


    transition:.3s;


}





.whatsapp-btn:hover::before{


    opacity:1;


    visibility:visible;


}





/* ===============================
   BACK TO TOP BUTTON
================================ */


.back-to-top{


    position:fixed;


    bottom:30px;


    right:30px;


    width:55px;


    height:55px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:


    var(--gold);


    color:#000;


    border-radius:50%;


    font-size:22px;


    z-index:9999;


    opacity:0;


    visibility:hidden;


    transform:


    translateY(20px);


    transition:.4s;


    box-shadow:


    0 10px 25px rgba(212,175,55,.4);


}





/* Active State By JS */


.back-to-top.show{


    opacity:1;


    visibility:visible;


    transform:


    translateY(0);


}





.back-to-top:hover{


    background:


    var(--primary-blue);


    color:white;


    transform:


    translateY(-8px);


}





/* ===============================
   FLOATING BUTTON GLASS EFFECT
================================ */


.floating-glass{


    backdrop-filter:


    blur(15px);


    -webkit-backdrop-filter:


    blur(15px);


}





/* ===============================
   BUTTON CLICK EFFECT
================================ */


.whatsapp-btn:active,
.back-to-top:active{


    transform:


    scale(.9);


}





/* =================================
   RESPONSIVE FLOATING BUTTONS
================================ */



@media(max-width:768px){


.whatsapp-btn{


    width:60px;


    height:60px;


    right:20px;


    bottom:85px;


    font-size:32px;


}



.back-to-top{


    width:50px;


    height:50px;


    right:20px;


    bottom:25px;


    font-size:20px;


}



.whatsapp-btn::before{


    display:none;


}



}





@media(max-width:576px){


.whatsapp-btn{


    width:55px;


    height:55px;


    font-size:28px;


}



.back-to-top{


    width:45px;


    height:45px;


}



}





@media(max-width:425px){


.whatsapp-btn{


    right:15px;


    bottom:80px;


}



.back-to-top{


    right:15px;


    bottom:20px;


}



}





@media(max-width:375px){


.whatsapp-btn{


    width:50px;


    height:50px;


    font-size:25px;


}



.back-to-top{


    width:42px;


    height:42px;


    font-size:18px;


}



}





@media(max-width:320px){


.whatsapp-btn{


    width:45px;


    height:45px;


    font-size:22px;


}



.back-to-top{


    width:38px;


    height:38px;


    font-size:16px;


}



}
/* ==========================================
   GLOBAL ANIMATIONS
   Premium Travel Website Effects
========================================== */


/* ===============================
   FADE IN ANIMATION
================================ */


.fade-in{


    animation:


    fadeIn 1s ease forwards;


}





@keyframes fadeIn{


    from{


        opacity:0;


    }


    to{


        opacity:1;


    }


}





/* ===============================
   FADE UP
================================ */


.fade-up{


    animation:


    fadeUp 1s ease forwards;


}





@keyframes fadeUp{


    from{


        opacity:0;


        transform:


        translateY(50px);


    }


    to{


        opacity:1;


        transform:


        translateY(0);


    }


}





/* ===============================
   FADE DOWN
================================ */


.fade-down{


    animation:


    fadeDown 1s ease forwards;


}





@keyframes fadeDown{


    from{


        opacity:0;


        transform:


        translateY(-50px);


    }


    to{


        opacity:1;


        transform:


        translateY(0);


    }


}





/* ===============================
   SLIDE LEFT
================================ */


.slide-left{


    animation:


    slideLeft 1s ease forwards;


}





@keyframes slideLeft{


    from{


        opacity:0;


        transform:


        translateX(-80px);


    }


    to{


        opacity:1;


        transform:


        translateX(0);


    }


}





/* ===============================
   SLIDE RIGHT
================================ */


.slide-right{


    animation:


    slideRight 1s ease forwards;


}





@keyframes slideRight{


    from{


        opacity:0;


        transform:


        translateX(80px);


    }


    to{


        opacity:1;


        transform:


        translateX(0);


    }


}





/* ===============================
   ZOOM IN EFFECT
================================ */


.zoom-in{


    animation:


    zoomIn 1s ease forwards;


}





@keyframes zoomIn{


    from{


        opacity:0;


        transform:


        scale(.8);


    }


    to{


        opacity:1;


        transform:


        scale(1);


    }


}





/* ===============================
   FLOATING EFFECT
================================ */


.float-animation{


    animation:


    floating 4s ease-in-out infinite;


}





@keyframes floating{


    0%{


        transform:


        translateY(0);


    }


    50%{


        transform:


        translateY(-15px);


    }


    100%{


        transform:


        translateY(0);


    }


}





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


.image-hover{


    overflow:hidden;


}





.image-hover img{


    transition:


    transform .6s ease;


}





.image-hover:hover img{


    transform:


    scale(1.1);


}





/* ===============================
   GOLD SHINE EFFECT
================================ */


.gold-shine{


    position:relative;


    overflow:hidden;


}





.gold-shine::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:60%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.7),

    transparent

    );


    transition:.7s;


}





.gold-shine:hover::after{


    left:150%;


}





/* ===============================
   BUTTON HOVER SCALE
================================ */


.hover-scale{


    transition:.4s;


}





.hover-scale:hover{


    transform:


    scale(1.08);


}





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


.card-reveal{


    opacity:0;


    transform:


    translateY(40px);


    transition:


    all .8s ease;


}





.card-reveal.active{


    opacity:1;


    transform:


    translateY(0);


}





/* ===============================
   ROTATE ICON ANIMATION
================================ */


.rotate-hover{


    transition:.5s;


}





.rotate-hover:hover{


    transform:


    rotate(360deg);


}





/* ===============================
   BORDER GLOW EFFECT
================================ */


.border-glow{


    transition:.4s;


}





.border-glow:hover{


    border-color:


    var(--gold);


    box-shadow:


    0 0 25px rgba(212,175,55,.5);


}





/* ===============================
   SMOOTH SECTION APPEAR
================================ */


.section-animate{


    animation:


    sectionAppear 1s ease;


}





@keyframes sectionAppear{


    from{


        opacity:0;


        transform:


        translateY(60px);


    }


    to{


        opacity:1;


        transform:


        translateY(0);


    }


}





/* ===============================
   LOADING ANIMATION
================================ */


.loading-spinner{


    width:50px;


    height:50px;


    border-radius:50%;


    border:


    5px solid rgba(212,175,55,.3);


    border-top-color:


    var(--gold);


    animation:


    spin 1s linear infinite;


}





@keyframes spin{


    to{


        transform:


        rotate(360deg);


    }


}





/* ===============================
   SMOOTH TRANSITIONS GLOBAL
================================ */


.card,
.btn,
a,
img,
button{


    transition:


    all .4s ease;


}





/* ===============================
   REDUCE MOTION SUPPORT
================================ */


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


*{


    animation:none!important;


    transition:none!important;


}



}
/* ==========================================
   FINAL RESPONSIVE OPTIMIZATION
   Sharing Holidays Website
========================================== */


/* ==========================================
   LARGE DESKTOP
   1400px+
========================================== */


@media(min-width:1400px){


.container{

    max-width:1320px;

}



.hero-content h1{


    font-size:75px;


}



.section-title h2{


    font-size:45px;


}



.service-card,
.package-card,
.testimonial-card{


    border-radius:35px;


}



}



/* ==========================================
   DESKTOP
   1200px - 1399px
========================================== */


@media(max-width:1399px){


.hero-content h1{


    font-size:65px;


}



section{


    padding:80px 0;


}



}



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


@media(max-width:1199px){



.navbar-brand{


    font-size:25px;


}



.hero-section{


    height:90vh;


}



.hero-content h1{


    font-size:55px;


}



.hero-content p{


    max-width:650px;


}



.destination-card{


    height:380px;


}



.package-content{


    padding:25px;


}



.footer-grid{


    gap:30px;


}



}



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


@media(max-width:991px){



section{


    padding:70px 0;


}



/* Navbar */


.navbar{


    padding:15px;


}




/* Hero */


.hero-section{


    min-height:650px;


}



.hero-content{


    width:95%;


}



.hero-content h1{


    font-size:45px;


}



.hero-content p{


    font-size:17px;


}



/* Buttons */


.btn-gold,
.btn-outline{


    padding:


    12px 28px;


}



/* Titles */


.section-title h2{


    font-size:36px;


}



/* Cards */


.service-card,
.package-card,
.testimonial-card{


    margin-bottom:20px;


}



}



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


@media(max-width:767px){



body{


    overflow-x:hidden;


}



section{


    padding:60px 15px;


}



/* Hero */


.hero-section{


    height:85vh;


}



.hero-content h1{


    font-size:36px;


}



.hero-content p{


    font-size:15px;


}



/* Section Titles */


.section-title{


    margin-bottom:40px;


}



.section-title h2{


    font-size:30px;


}



.section-title p{


    font-size:14px;


}



/* Buttons */


.hero-buttons a{


    width:200px;


}



/* Images */


.destination-card,
.package-image{


    border-radius:20px;


}



/* Footer */


.footer-title{


    margin-top:15px;


}



}



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


@media(max-width:575px){



.container{


    width:100%;


    padding-left:15px;


    padding-right:15px;


}



/* Navbar */


.navbar-brand{


    font-size:21px;


}



.navbar-brand img{


    width:45px;


}



/* Hero */


.hero-section{


    min-height:580px;


}



.hero-content h1{


    font-size:30px;


}



.hero-content p{


    display:block;


    font-size:14px;


}



.hero-buttons{


    gap:12px;


}



/* Cards */


.service-card,
.package-card,
.testimonial-card{


    border-radius:22px;


}



/* Gallery */


.gallery-item{


    border-radius:18px;


}



/* FAQ */


.faq-question{


    line-height:1.5;


}



}



/* ==========================================
   MOBILE
   375px - 424px
========================================== */


@media(max-width:424px){



.hero-content h1{


    font-size:27px;


}



.hero-content p{


    display:none;


}



.section-title h2{


    font-size:27px;


}



.section-title p{


    font-size:13px;


}



.btn-gold,
.btn-outline{


    padding:


    11px 22px;


    font-size:14px;


}



.service-card{


    padding:25px 18px;


}



.package-content{


    padding:20px;


}



.footer-about p{


    font-size:13px;


}



}



/* ==========================================
   EXTRA SMALL MOBILE
   320px - 374px
========================================== */


@media(max-width:374px){



.navbar{


    padding-left:10px;


    padding-right:10px;


}



.navbar-brand{


    font-size:18px;


}



.hero-section{


    min-height:520px;


}



.hero-content h1{


    font-size:23px;


}



.hero-buttons a{


    width:180px;


    font-size:13px;


}



.section-title h2{


    font-size:24px;


}



.service-icon{


    width:60px;


    height:60px;


}



.destination-card{


    height:280px;


}



.package-image{


    height:190px;


}



.testimonial-card{


    padding:20px 15px;


}



}



/* ==========================================
   ULTRA SMALL
   320px
========================================== */


@media(max-width:320px){



body{


    font-size:13px;


}



.hero-content h1{


    font-size:21px;


}



.hero-buttons{


    gap:8px;


}



.hero-buttons a{


    width:160px;


}



.section-title h2{


    font-size:22px;


}



.service-card h3{


    font-size:18px;


}



.destination-content h3{


    font-size:18px;


}



.package-content h3{


    font-size:18px;


}



.footer-logo h2{


    font-size:18px;


}



}



/* ==========================================
   PRINT FIX
========================================== */


@media print{


.navbar,
.whatsapp-btn,
.back-to-top{


    display:none;


}



}