*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

    background:

    radial-gradient(
        circle at top left,
        #dff3ff,
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        #cfe8ff,
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #ffffff,
        #eef7ff
    );


    min-height:100vh;

}

html{
    scroll-behavior: smooth;
}

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

header{
    position:sticky;
    top:0;
    width:100%;
    z-index:1000;
}


.navbar{

    width:100%;

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

    padding:14px 70px;

    background:#f4f4f6ed;

    backdrop-filter:blur(12px);

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}


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

.logo{

    flex-shrink:0;

}


.logo img{

    width:130px;

    height:auto;

    display:block;

    transition:.3s ease;

}


.logo img:hover{

    transform:scale(1.05);

}



/*========================================
              NAV LINKS
========================================*/


.nav-links{

    display:flex;

    align-items:center;

    gap:8px;

    list-style:none;

    margin:0;

    padding:7px;

    background:#f5f9ff;

    border-radius:50px;

}


.nav-links li{

    position:relative;

}


.nav-links a{


    display:flex;

    align-items:center;

    justify-content:center;


    padding:11px 18px;


    text-decoration:none;

    color:#1f2937;


    font-size:15px;

    font-weight:600;


    border-radius:30px;


    transition:.3s ease;


    white-space:nowrap;

}



.nav-links a:hover,
.nav-links a.active{


    color:white;


    background:linear-gradient(
        135deg,
        #0d6efd,
        #00b8d9
    );


    box-shadow:
    0 10px 25px rgba(13,110,253,.35);


    transform:translateY(-2px);


}



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


.nav-right{

    flex-shrink:0;

}


.book-btn{


    border:none;

    outline:none;


    cursor:pointer;


    padding:13px 30px;


    border-radius:50px;


    font-size:15px;

    font-weight:700;


    color:white;


    background: linear-gradient(
    135deg,
    #22c55e,
    #16a34a
);

box-shadow:
    0 12px 25px rgba(34,197,94,.35);

    transition:.35s ease;

}



.book-btn:hover{

background: linear-gradient(
    135deg,
    #16a34a,
    #15803d
);

box-shadow:
    0 15px 30px rgba(22,163,74,.45);

}



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


.menu-toggle{


    display:none;


    border:none;

    background:none;

    cursor:pointer;


    font-size:28px;

    color:#001b4d;


}



/*========================================
            LAPTOP
========================================*/


@media(max-width:1200px){


.navbar{

    padding:14px 40px;

}


.logo img{

    width:120px;

}



.nav-links a{

    padding:10px 14px;

    font-size:14px;

}



.book-btn{

    padding:12px 25px;

    font-size:14px;

}



}



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


@media(max-width:992px){


.navbar{

    padding:14px 25px;

}


.logo img{

    width:110px;

}


.nav-links{

    gap:4px;

}


.nav-links a{

    padding:9px 11px;

    font-size:13px;

}


.book-btn{

    padding:11px 20px;

}


}




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


@media(max-width:768px){


.navbar{

    padding:12px 20px;

}



.logo img{

    width:110px;

}




.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;


    width:42px;

    height:42px;


    border-radius:10px;


    background:#f5f9ff;

}





.nav-right{

    margin-left:auto;

    margin-right:15px;

}





.book-btn{


    padding:10px 18px;


    font-size:13px;


}




.nav-links{


    position:fixed;


    top:0;

    left:-100%;


    width:280px;


    height:100vh;


    background:white;


    padding:90px 25px;


    flex-direction:column;


    align-items:flex-start;


    gap:15px;


    border-radius:0;


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


    transition:.4s ease;


}



.nav-links.active{

    left:0;

}



.nav-links li{

    width:100%;

}



.nav-links a{


    width:100%;


    justify-content:flex-start;


    padding:13px 15px;


    border-radius:12px;


}


.nav-links a:hover,
.nav-links a.active{


    transform:none;

}



}




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


@media(max-width:480px){


.navbar{

    padding:10px 15px;

}



.logo img{

    width:95px;

}



.book-btn{

    padding:9px 14px;

    font-size:12px;

}



.menu-toggle{

    font-size:24px;

}



.nav-links{

    width:260px;

}



}





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


@media(max-width:360px){


.logo img{

    width:85px;

}


.book-btn{

    padding:8px 12px;

}



.menu-toggle{

    width:38px;

    height:38px;

}


}

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

.tripz-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:130px 8% 70px;

    position:relative;

    background:
    linear-gradient(
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.45)
    ),
    url("../images/hero-desktop.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}



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

.tripz-hero-content{

    width:100%;

    max-width:1200px;

    text-align:center;

    color:white;

}



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

.tripz-hero-tagline{

    display:inline-block;

    margin-bottom:14px;

    font-size:clamp(15px,2vw,19px);

    font-weight:700;

    letter-spacing:2px;

    line-height:1.3;

   background: linear-gradient(135deg, #fd8207, #f9a023);
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}



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

.tripz-hero-content h1{

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

    font-weight:800;

    line-height:1.15;

    margin:0 0 18px;

    letter-spacing:-0.5px;

}



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

.tripz-hero-content > p{

    width:100%;

    max-width:750px;

    margin:0 auto 30px;

    font-size:clamp(14px,2vw,18px);

    line-height:30px;

    color:#f5f5f5;

}



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

.tripz-hero-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}



.tripz-explore-btn,
.tripz-contact-btn{

    height:48px;

    padding:0 35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:all .3s ease;

    white-space:nowrap;

}



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

.tripz-explore-btn{

    color:white;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #00b8d9
    );

    box-shadow:
    0 8px 25px rgba(13,110,253,.25);

}



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

.tripz-contact-btn{

    color:white;

    border:2px solid rgba(255,255,255,.9);

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

    backdrop-filter:blur(5px);

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

}



/*==================================================*
* HERO BUTTON HOVER
*==================================================*/

.tripz-explore-btn:hover,
.tripz-contact-btn:hover{

    transform:translateY(-4px);

}



.tripz-explore-btn:hover{

    box-shadow:
    0 12px 30px rgba(13,110,253,.35);

}



.tripz-contact-btn:hover{

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

}



/*==================================================*
* INQUIRY BOX
*==================================================*/

.tripz-inquiry-box{

    width:100%;

    max-width:950px;

    margin:auto;

    padding:25px 30px;

    background:
    rgba(255,255,255,.14);
/* backdrop-filter: blur(5px); */
/* -webkit-backdrop-filter: blur(5px); */
    border-radius:22px;

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

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

    box-sizing:border-box;

}



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

.tripz-inquiry-box h2{

    font-size:clamp(20px,3vw,28px);

    font-weight:800;

    margin:0 0 8px;

}



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

.tripz-inquiry-box p{

    font-size:14px;

    line-height:24px;

    color:#f1f5f9;

    margin:0 0 20px;

}



/*==================================================*
* FORM
*==================================================*/

.tripz-travel-form{

    display:grid;

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

    gap:15px;

}



/*==================================================*
* FORM GROUP
*==================================================*/

.tripz-form-group{

    display:flex;

    flex-direction:column;

    text-align:left;

}



/*==================================================*
* FORM LABEL
*==================================================*/

.tripz-form-group label{

    font-size:13px;

    font-weight:600;

    margin-bottom:6px;

    color:white;

}



/*==================================================*
* FORM INPUT & SELECT
*==================================================*/

.tripz-form-group input,
.tripz-form-group select{

    width:100%;

    height:46px;

    padding:0 15px;

    border:none;

    outline:none;

    border-radius:10px;

    font-size:14px;

    background:white;

    color:#333;

    box-sizing:border-box;

    transition:all .25s ease;

}



/*==================================================*
* INPUT FOCUS
*==================================================*/

.tripz-form-group input:focus,
.tripz-form-group select:focus{

    box-shadow:
    0 0 0 3px rgba(13,110,253,.25);

    transform:translateY(-1px);

}



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

.tripz-inquiry-btn{

    grid-column:span 3;

    justify-self:center;

    margin-top:5px;

    height:48px;

    width:200px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #00b8d9
    );

    box-shadow:
    0 8px 25px rgba(13,110,253,.25);

    transition:all .3s ease;

}



/*==================================================*
* SUBMIT BUTTON HOVER
*==================================================*/

.tripz-inquiry-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(13,110,253,.35);

}



/*==================================================*
* LARGE LAPTOP
*==================================================*/

@media(max-width:1200px){

    .tripz-hero{

        padding:120px 5% 60px;

    }

}



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

@media(max-width:992px){

    .tripz-hero{

        min-height:auto;

        padding:120px 30px 60px;

    }



    .tripz-travel-form{

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

    }



    .tripz-inquiry-btn{

        grid-column:span 2;

    }

}



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

@media(max-width:768px){

    .tripz-hero{

        padding:100px 20px 45px;

        background-image: 
linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)
),
url("../images/hero--mobile.png");


       
        background-size:cover;

        background-position:center;

        background-repeat:no-repeat;

    }



    /* Hide desktop line break */

    .tripz-hero-content h1 br{

        display:none;

    }



    /* Mobile tagline */

    .tripz-hero-tagline{

        margin-bottom:11px;

        font-size:14px;

        letter-spacing:1.5px;

    }



    .tripz-hero-content > p{

        line-height:25px;

    }



    .tripz-hero-btn{

        flex-direction:column;

        gap:12px;

    }



    .tripz-explore-btn,
    .tripz-contact-btn{

        width:220px;

        padding:0;

    }



    .tripz-inquiry-box{

        padding:20px 15px;

        border-radius:16px;

    }



    .tripz-travel-form{

        grid-template-columns:1fr;

        gap:12px;

    }



    .tripz-inquiry-btn{

        grid-column:span 1;

        width:100%;

    }

}



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

@media(max-width:480px){

    .tripz-hero{

        padding:90px 15px 35px;

    }



    .tripz-hero-tagline{

        font-size:13px;

        letter-spacing:1.2px;

        margin-bottom:9px;

    }



    .tripz-inquiry-box{

        padding:18px 12px;

    }



    .tripz-explore-btn,
    .tripz-contact-btn{

        width:190px;

        height:45px;

        font-size:14px;

    }



    .tripz-form-group input,
    .tripz-form-group select{

        height:43px;

        font-size:13px;

    }



    .tripz-form-success{

        font-size:13px;

        padding:12px;

    }

}



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

@media(max-width:360px){

    .tripz-hero{

        padding-left:12px;

        padding-right:12px;

    }



    .tripz-inquiry-box h2{

        font-size:20px;

    }



    .tripz-hero-content > p{

        font-size:13px;

    }



    .tripz-hero-tagline{

        font-size:12px;

        letter-spacing:1px;

    }

}


/*==================================================
POPULAR DESTINATIONS
==================================================*/


.destinations{

    padding:80px 8%;
    background:#f7f9fc;
    overflow:hidden;

}


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


.section-title{

    text-align:center;
    max-width:700px;
    margin:0 auto 50px;

}


.section-title h2{

    font-size:42px;
    font-weight:800;
    color:#000a31;
    margin-bottom:12px;

}


.section-title p{

    font-size:18px;
    color:#666;
    line-height:28px;

}



/*==================================================
SWIPER
==================================================*/


.destinationSwiper{

    width:100%;
    padding:20px 5px 70px;

}



.swiper-slide{

    display:flex;
    height:auto;
    align-items:stretch;

}



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

.destination-card{

    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    transition:all .4s ease;

}



.destination-card:hover{

    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,0.18);

}



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


.destination-card img{

    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:.5s ease;

}



.destination-card:hover img{

    transform:scale(1.08);

}



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

.card-content{

    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;

}


.card-content h3{

    font-size:25px;
    font-weight:750;
    color:#000a31;
    margin-bottom:12px;

}


.card-content p{

    font-size:15px;
    color:#666;
    line-height:1.7;
    margin-bottom:18px;
    word-break:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;

}

.location{

    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
    font-size:15px;
    font-weight:600;
    color:#0d6efd;

}

/*==================================================*
*SWIPER BUTTON FINAL*
*==================================================*/

.swiper-button-next,
.swiper-button-prev{

    width:52px;
    height:52px;

    background:#ffffff;

    color:#052efa;

    border-radius:50%;

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

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

    transition:.3s ease;

    outline:none;

    -webkit-tap-highlight-color:transparent;

}



.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:22px;
    font-weight:900;

}



@media(hover:hover){

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#0240fc;

    color:#ffffff;

    transform:scale(1.08);

}

}



/* Mobile tap fix */

.swiper-button-next:focus,
.swiper-button-prev:focus,
.swiper-button-next:active,
.swiper-button-prev:active{

    background:#ffffff;

    color:#052efa;

    outline:none;

}




@media(max-width:768px){

.swiper-button-next,
.swiper-button-prev{

    width:45px;
    height:45px;

}


.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:19px;

}

}

.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:18px;
    font-weight:bold;

}




/*==================================================
PAGINATION
==================================================*/


.swiper-pagination-bullet{

    width:10px;
    height:10px;
    background:#0d6efd;
    opacity:.4;

}



.swiper-pagination-bullet-active{

    opacity:1;

}



/*==================================================
1200px LAPTOP
==================================================*/


@media(max-width:1200px){


.destinations{

    padding:70px 5%;

}


.section-title h2{

    font-size:38px;

}


.destination-card img{

    height:240px;

}


}



/*==================================================
992px TABLET
==================================================*/


@media(max-width:992px){


.destinations{

    padding:60px 30px;

}


.section-title{

    margin-bottom:35px;

}


.section-title h2{

    font-size:34px;

}


.section-title p{

    font-size:16px;

}



.destination-card{

    border-radius:18px;

}



.destination-card img{

    height:230px;

}



.card-content{

    padding:20px;

}



.card-content h3{

    font-size:22px;

}



.card-content p{

    font-size:14px;
    line-height:23px;

}



.swiper-button-next,
.swiper-button-prev{

    display:none;

}


}




/*==================================================
768px MOBILE
==================================================*/


@media(max-width:768px){


.destinations{

    padding:50px 20px;

}



.section-title h2{

    font-size:30px;

}



.section-title p{

    font-size:15px;
    line-height:24px;

}



.destinationSwiper{

    padding-bottom:60px;

}



.destination-card img{

    height:210px;

}



.card-content{

    padding:16px;

}


.card-content h3{

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

}


.card-content p{

    font-size:13px;
    line-height:1.6;

}



.location{

    font-size:14px;

}



.destination-card:hover{

    transform:none;

}



}





/*==================================================
480px SMALL MOBILE
==================================================*/


@media(max-width:480px){


.destinations{

    padding:45px 15px;

}



.section-title h2{

    font-size:26px;

}



.section-title p{

    font-size:14px;

}



.destination-card img{

    height:190px;

}



.card-content h3{

    font-size:18px;

}


.card-content p{

    font-size:13px;
    line-height:1.5;

}


}





/*==================================================
360px EXTRA SMALL
==================================================*/


@media(max-width:360px){


.section-title h2{

    font-size:24px;

}



.destination-card img{

    height:180px;

}



.card-content{

    padding:15px;

}



.card-content h3{

    font-size:18px;

}



}


/* ==================================================
DOMESTIC TOUR PACKAGES
================================================== */

.packages{

    padding:80px 8%;

    background:
    linear-gradient(
        180deg,
        #f8fbff,
        #eef5ff
    );

    box-sizing:border-box;

}


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

.section-title{

    text-align:center;

    margin-bottom:50px;

}


.section-title h2{

    font-size:42px;

    font-weight:800;

    color:#000a31;

    margin:0 0 12px;

    line-height:1.2;

}


.section-title p{

    color:#666;

    font-size:16px;

    max-width:650px;

    margin:auto;

    line-height:25px;

}



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

.package-container{

    width:100%;

    display:grid;

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

    gap:30px;

    box-sizing:border-box;

}



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

.package-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #edf1f7;

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

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

    display:flex;

    flex-direction:column;

    min-width:0;

}


.package-card:hover{

    transform:translateY(-8px);

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

}



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

.package-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;

}


.package-card:hover img{

    transform:scale(1.05);

}



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

.package-content{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex:1;

    box-sizing:border-box;

}


/* ==================================================
DAYS
================================================== */

.days{

    width:max-content;

    max-width:100%;

    background:#e8f1ff;

    color:#0d6efd;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    box-sizing:border-box;

}



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

.package-content h3{

    font-size:23px;

    color:#000a31;

    font-weight:750;

    margin:14px 0 8px;

    line-height:1.3;

}



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

.package-content p{

    color:#666;

    font-size:14px;

    line-height:22px;

    min-height:44px;

    margin:0 0 18px;

}



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

.package-features{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:8px;

    padding:12px 0;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

}


.package-features span{

    font-size:12px;

    font-weight:600;

    color:#444;

    white-space:nowrap;

}

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

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin:20px 0;

}


.starting-text{

    display:block;

    font-size:13px;

    color:#555;

    font-weight:600;

}


.price-row h4{

    margin:5px 0 0;

    color:#0d6efd;

    font-size:26px;

    font-weight:800;

    line-height:1.2;

}


.price-row h4 small{

    font-size:13px;

    color:#333;

    font-weight:600;

}


.rating{

    color:#ffb400;

    font-size:16px;

    letter-spacing:2px;

    white-space:nowrap;

}



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

.package-btn{

    display:flex;

    gap:12px;

    margin-top:auto;

}



/* ==================================================
ALL PACKAGE BUTTONS
================================================== */

.details-btn,
.book-btn-package{

    flex:1;

    min-height:46px;

    padding:12px;

    border-radius:10px;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .15s ease;

    outline:none;

    appearance:none;

    -webkit-appearance:none;

    -webkit-tap-highlight-color:transparent;

}



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

.details-btn{

    background:#fff;

    color:#0d6efd;

    border:2px solid #0d6efd;

}


/* Desktop hover */

@media (hover:hover){

    .details-btn:hover{

        background:#0d6efd;

        color:#fff;

    }

}


/* Click active color */

.details-btn.clicked{

    background:#0d6efd;

    color:#fff;

    border-color:#0d6efd;

}


/* Tap effect */

.details-btn:active{

    transform:scale(.97);

}



/* Remove mobile focus */

.details-btn:focus{

    outline:none;

}



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

.book-btn-package{

    background:#0d6efd;

    color:#fff;

    border:2px solid #0d6efd;

}



@media (hover:hover){

    .book-btn-package:hover{

        background:#004ecb;

        border-color:#004ecb;

    }

}


.book-btn-package:active{

    background:#004ecb;

    border-color:#004ecb;

    transform:scale(.97);

}


.book-btn-package:focus{

    outline:none;

}



/* ==================================================
MOBILE TAP FIX
================================================== */

@media (hover:none){

    .details-btn:hover{

        background:#fff;

        color:#0d6efd;

    }


    .book-btn-package:hover{

        background:#0d6efd;

        color:#fff;

        border-color:#0d6efd;

    }

}

/* ==================================================
SAFE CARD ANIMATION
================================================== */

.reveal-card{

    animation:
    cardShow .6s ease forwards;

}


@keyframes cardShow{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==================================================
1200px LAPTOP
================================================== */

@media(max-width:1200px){


    .packages{

        padding:70px 5%;

    }


    .package-container{

        gap:25px;

    }


    .package-card img{

        height:210px;

    }

}



/* ==================================================
992px TABLET
================================================== */

@media(max-width:992px){


    .packages{

        padding:65px 30px;

    }


    .package-container{

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

        gap:25px;

    }


    .package-content{

        padding:20px;

    }


    .package-content h3{

        font-size:21px;

    }


    .price-row h4{

        font-size:23px;

    }


    .package-card img{

        height:215px;

    }

}



/* ==================================================
768px MOBILE
================================================== */

@media(max-width:768px){


    .packages{

        padding:60px 20px;

    }


    .section-title{

        margin-bottom:35px;

    }


    .section-title h2{

        font-size:32px;

        line-height:1.25;

    }


    .section-title p{

        font-size:15px;

        line-height:24px;

    }


    .package-container{

        grid-template-columns:1fr;

        gap:25px;

    }


    .package-card{

        border-radius:18px;

    }


    .package-card img{

        height:240px;

    }


    .package-content{

        padding:20px;

    }


    .package-content h3{

        font-size:22px;

    }


    .package-content p{

        min-height:auto;

    }


    .package-features{

        gap:6px;

    }


    .package-features span{

        font-size:12px;

    }


    .price-row{

        margin:18px 0;

    }


    .price-row h4{

        font-size:24px;

    }


    .package-btn{

        gap:10px;

    }


    .details-btn,
    .book-btn-package{

        min-height:46px;

        font-size:14px;

    }

}



/* ==================================================
480px SMALL MOBILE
================================================== */

@media(max-width:480px){


    .packages{

        padding:50px 15px;

    }


    .section-title{

        margin-bottom:30px;

    }


    .section-title h2{

        font-size:28px;

    }


    .section-title p{

        font-size:14px;

        line-height:22px;

    }


    .package-container{

        gap:22px;

    }


    .package-card img{

        height:210px;

    }


    .package-content{

        padding:18px;

    }


    .days{

        font-size:11px;

        padding:6px 12px;

    }


    .package-content h3{

        font-size:20px;

        margin:12px 0 7px;

    }


    .package-content p{

        font-size:13px;

        line-height:21px;

        margin-bottom:15px;

    }


    .package-features{

        padding:11px 0;

    }


    .package-features span{

        font-size:11px;

    }


    .price-row{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        margin:17px 0;

    }


    .price-row h4{

        font-size:23px;

    }


    .rating{

        font-size:14px;

    }


    .package-btn{

        flex-direction:column;

        gap:10px;

    }


    .details-btn,
    .book-btn-package{

        width:100%;

        min-height:45px;

    }

}



/* ==================================================
360px EXTRA SMALL
================================================== */

@media(max-width:360px){


    .packages{

        padding-left:12px;

        padding-right:12px;

    }


    .package-card img{

        height:180px;

    }


    .package-content{

        padding:16px;

    }


    .package-content h3{

        font-size:19px;

    }


    .package-content p{

        font-size:12px;

        line-height:20px;

    }


    .days{

        font-size:11px;

    }


    .package-features span{

        font-size:10px;

    }


    .price-row h4{

        font-size:21px;

    }


    .details-btn,
    .book-btn-package{

        font-size:13px;

    }

}



/* ==================================================
PACKAGE DETAILS MODAL
================================================== */


.package-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:9999;

}


.package-modal.active{

    display:flex;

}



.modal-box{

    width:100%;

    max-width:380px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    position:relative;

    text-align:center;

    animation:modalShow .3s ease;

}



@keyframes modalShow{

    from{

        opacity:0;

        transform:scale(.9);

    }


    to{

        opacity:1;

        transform:scale(1);

    }

}



.modal-close{

    position:absolute;

    right:15px;

    top:10px;

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

    color:#333;

}



.modal-box h3{

    color:#000a31;

    font-size:22px;

    margin-bottom:20px;

}



.modal-info p{

    background:#f5f8ff;

    padding:10px;

    border-radius:10px;

    margin:8px 0;

    font-size:14px;

}



.modal-text{

    color:#666;

    font-size:14px;

    line-height:22px;

    margin:20px 0;

}



.modal-btn{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#0d6efd;

    color:#fff;

    font-weight:700;

    cursor:pointer;

}



@media(max-width:480px){


    .modal-box{

        padding:20px;

    }


    .modal-box h3{

        font-size:20px;

    }

}


/*=========================================
INTERNATIONAL TOUR PACKAGES
=========================================*/


.international-packages{

    padding:80px 8%;

    background:
    linear-gradient(
    135deg,
    #f4f9ff 0%,
    #ffffff 45%,
    #eef6ff 100%
    );

}




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


.international-packages .section-title{

    text-align:center;

    max-width:750px;

    margin:0 auto;

}



.international-packages .section-title h2{

    font-size:38px;

    font-weight:800;

    color:#000a31;

    margin-bottom:15px;

}



.international-packages .section-title p{

    color:#666;

    font-size:16px;

    line-height:28px;

}







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


.international-container{

    display:grid;

    grid-template-columns:40% 60%;

    gap:45px;

    margin-top:55px;

    align-items:start;

}





/*=========================================
LEFT WORLD CARD
=========================================*/


.world-map{

    background:
    linear-gradient(
    145deg,
    #ffffff,
    #f3f8ff
    );


    padding:35px;

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08);


    border:1px solid #e6eefb;

}




.world-map img{

    width:100%;

    max-width:430px;

    display:block;

    margin:auto;

}





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


.map-content{

    text-align:center;

    margin-top:25px;

}




.map-content h3{

    font-size:30px;

    font-weight:800;

    color:#000a31;

    margin-bottom:15px;

}




.map-content p{

    color:#666;

    line-height:28px;

    font-size:15px;

    margin-bottom:25px;

}





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


.explore-world-btn{

    padding:14px 35px;

    background:#0d6efd;

    color:white;

    border:none;

    border-radius:50px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}




.explore-world-btn:hover{

    background:#004ecb;

    transform:translateY(-4px);

}

/*=========================================
RIGHT COUNTRY LIST
=========================================*/


.country-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}







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


.country-card{

    display:flex;

    gap:25px;

    padding:20px;

    background:white;

    border-radius:22px;

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

    border:1px solid #edf2f7;

    transition:.35s ease;

    overflow:hidden;

}





.country-card:hover{

    transform:translateY(-7px);

    box-shadow:
    0 22px 45px rgba(0,0,0,.14);

}








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


.country-card img{

    width:210px;

    height:150px;

    border-radius:18px;

    object-fit:cover;

    flex-shrink:0;

    transition:.4s ease;

}





.country-card:hover img{

    transform:scale(1.05);

}








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


.country-content{

    flex:1;

}





.country-content h3{

    font-size:24px;

    font-weight:700;

    color:#000a31;

    margin-bottom:8px;

    line-height:1.3;

}





.country-content p{

    color:#777;

    font-size:14px;

    margin-bottom:15px;

}








/*=========================================
PACKAGE HIGHLIGHTS
=========================================*/


.package-highlights{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:15px;

}





.package-highlights span{

    background:#fff4e8;

    color:#ff7a00;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}








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


.country-features{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:18px;

}





.country-features span{

    background:#eef5ff;

    color:#0d6efd;

    padding:7px 13px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}








/*=========================================
PRICE + BUTTON
=========================================*/


.country-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}





.country-bottom h4{

    color:#0d6efd;

    font-size:25px;

    margin:0;

}





.starting-text{

    display:block;

    color:#222;

    font-size:14px;

    font-weight:600;

}





.country-bottom small{

    color:#333;

    font-size:14px;

    font-weight:500;

}





.explore-btn{

    padding:11px 28px;

    background:#0d6efd;

    color:#fff;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

    transition:.3s ease;

}





.explore-btn:hover{

    background:#004ecb;

    transform:translateY(-3px);

}

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


.reveal-card{

    opacity:0;

    transform:translateY(40px);

    transition:0.7s ease;

}



.reveal-card.show{

    opacity:1;

    transform:translateY(0);

}

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





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


@media(max-width:1400px){


.international-packages{

    padding:75px 6%;

}



.international-container{

    gap:35px;

}



.country-card{

    gap:20px;

}



.country-card img{

    width:190px;

    height:145px;

}



.country-content h3{

    font-size:21px;

}



}




/*=========================================
1200px LAPTOP
=========================================*/


@media(max-width:1200px){


.international-packages{

    padding:70px 5%;

}



.international-container{

    grid-template-columns:38% 62%;

    gap:25px;

}



.world-map{

    padding:30px;

}



.map-content h3{

    font-size:26px;

}



.country-card{

    padding:18px;

}



.country-card img{

    width:170px;

    height:130px;

}



.country-content h3{

    font-size:19px;

}



.country-bottom h4{

    font-size:22px;

}



.explore-btn{

    padding:10px 22px;

}



}





/*=========================================
992px TABLET
=========================================*/


@media(max-width:992px){


.international-packages{

    padding:60px 30px;

}




.international-container{

    grid-template-columns:1fr;

}



.world-map{

    max-width:600px;

    margin:auto;

}



.country-card img{

    width:200px;

    height:150px;

}



.country-content h3{

    font-size:22px;

}



}





/*=========================================
768px MOBILE
=========================================*/


@media(max-width:768px){


.international-packages{

    padding:50px 20px;

}



.international-packages .section-title h2{

    font-size:30px;

}



.international-packages .section-title p{

    font-size:15px;

    line-height:24px;

}





.world-map{

    padding:25px 20px;

    border-radius:22px;

}



.map-content h3{

    font-size:24px;

}



.map-content p{

    font-size:14px;

    line-height:24px;

}





.country-card{

    flex-direction:column;

    gap:15px;

}



.country-card img{

    width:100%;

    height:220px;

}





.country-content h3{

    font-size:21px;

}





.country-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



.explore-btn{

    width:100%;

}



}







/*=========================================
480px SMALL MOBILE
=========================================*/


@media(max-width:480px){


.international-packages{

    padding:45px 15px;

}



.section-title h2{

    font-size:26px;

}




.world-map{

    padding:20px 15px;

}



.map-content h3{

    font-size:21px;

}



.explore-world-btn{

    width:100%;

}





.country-card{

    padding:15px;

    border-radius:18px;

}



.country-card img{

    height:190px;

}



.country-content h3{

    font-size:19px;

}



.package-highlights span,
.country-features span{

    font-size:11px;

    padding:6px 10px;

}



.country-bottom h4{

    font-size:21px;

}



}





/*=========================================
360px EXTRA SMALL MOBILE
=========================================*/


@media(max-width:360px){



.international-packages{

    padding:40px 12px;

}



.country-card img{

    height:170px;

}



.country-content h3{

    font-size:18px;

}



.package-highlights span,
.country-features span{

    font-size:10px;

}



}

/*=========================================
WHY CHOOSE TRIPZGEO
=========================================*/


.why-choose{

padding:90px 8%;

background:
linear-gradient(
120deg,
#c9e8ff,
#f4fbff,
#d7efff
);

overflow:hidden;

}




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


.choose-container{

display:grid;

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

gap:30px;

margin-top:55px;

}






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


.choose-card{

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

padding:40px 30px;

border-radius:24px;

text-align:center;

border:1px solid rgba(13,110,253,0.15);

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

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

position:relative;

overflow:hidden;

}




/* TOP BLUE LINE */


.choose-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#0d6efd;

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}



.choose-card:hover::before{

transform:scaleX(1);

}





/* HOVER */


.choose-card:hover{

transform:translateY(-8px);

border-color:#0d6efd;

box-shadow:

0 22px 45px rgba(13,110,253,.20);

}





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


.icon{

width:85px;

height:85px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

font-size:45px;

background:#eef6ff;

border-radius:50%;

border:1px solid rgba(13,110,253,.15);

transition:.4s;

}




.choose-card:hover .icon{

transform:scale(1.1);

background:#0d6efd;

box-shadow:

0 10px 25px rgba(13,110,253,.3);

}





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


.choose-card h3{

font-size:24px;

color:#000a31;

margin-bottom:15px;

font-weight:700;

}



.choose-card p{

font-size:15px;

line-height:28px;

color:#666;

margin:0;

}





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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .7s ease,

transform .7s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}







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


@media(max-width:1200px){


.why-choose{

padding:80px 5%;

}



.choose-container{

gap:25px;

}



.choose-card{

padding:35px 25px;

}



.choose-card h3{

font-size:22px;

}



.choose-card p{

font-size:14px;

line-height:25px;

}


}








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


@media(max-width:992px){


.choose-container{

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

}



.choose-card{

padding:35px 22px;

}



.icon{

width:80px;

height:80px;

font-size:40px;

}


.choose-card h3{

font-size:21px;

}


}








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


@media(max-width:768px){


.why-choose{

padding:60px 20px;

}



.choose-container{

grid-template-columns:1fr;

gap:20px;

margin-top:35px;

}



.choose-card{

padding:35px 20px;

border-radius:20px;

}




.icon{

width:75px;

height:75px;

font-size:38px;

margin-bottom:20px;

}




.choose-card h3{

font-size:20px;

}



.choose-card p{

font-size:14px;

line-height:24px;

}


/* mobile hover remove */

.choose-card:hover{

transform:none;

}



}







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


@media(max-width:480px){


.why-choose{

padding:45px 15px;

}



.choose-card{

padding:30px 18px;

}



.icon{

width:70px;

height:70px;

font-size:35px;

}



.choose-card h3{

font-size:18px;

}



.choose-card p{

font-size:13px;

line-height:22px;

}


}


/*=========================================
OUR SERVICES
=========================================*/


.services{

padding:90px 8%;

background:
linear-gradient(
120deg,
#dff2ff,
#f4fbff,
#d8edff
);

overflow:hidden;

}





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


.services-container{

display:grid;

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

gap:30px;

margin-top:50px;

}





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


.service-card{

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

padding:35px 25px;

border-radius:24px;

text-align:center;

border:1px solid rgba(13,110,253,.15);

box-shadow:

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

transition:

transform .4s ease,
box-shadow .4s ease,
border .4s ease;

cursor:pointer;

position:relative;

overflow:hidden;

}





/* TOP LINE */


.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#0d6efd;

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}



.service-card:hover::before{

transform:scaleX(1);

}





/* HOVER */


.service-card:hover{

transform:translateY(-8px);

border-color:#0d6efd;

box-shadow:

0 22px 45px rgba(13,110,253,.20);

}





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


.service-icon{

width:90px;

height:90px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

font-size:50px;

background:#eef6ff;

border-radius:50%;

border:1px solid rgba(13,110,253,.15);

transition:.4s;

}





.service-card:hover .service-icon{

background:#0d6efd;

transform:scale(1.1);

box-shadow:

0 10px 25px rgba(13,110,253,.3);

}





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


.service-card h3{

font-size:23px;

margin-bottom:15px;

color:#000a31;

font-weight:700;

}



.service-card p{

color:#666;

line-height:28px;

font-size:15px;

margin:0;

}





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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .7s ease,

transform .7s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}







/*==================================================
1200px LAPTOP
==================================================*/


@media(max-width:1200px){


.services{

padding:80px 5%;

}



.services-container{

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

gap:25px;

}



.service-card{

padding:32px 22px;

}



.service-card h3{

font-size:21px;

}


}








/*==================================================
992px TABLET
==================================================*/


@media(max-width:992px){


.services{

padding:70px 30px;

}



.services-container{

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

gap:25px;

}



.service-icon{

width:80px;

height:80px;

font-size:42px;

}



.service-card p{

font-size:14px;

line-height:25px;

}


}








/*==================================================
768px MOBILE
==================================================*/


@media(max-width:768px){


.services{

padding:55px 20px;

}



.services-container{

grid-template-columns:1fr;

gap:20px;

margin-top:35px;

}



.service-card{

padding:35px 20px;

border-radius:20px;

}



.service-icon{

width:75px;

height:75px;

font-size:38px;

margin-bottom:20px;

}



.service-card h3{

font-size:20px;

}



.service-card p{

font-size:14px;

line-height:24px;

}



/* remove hover on mobile */

.service-card:hover{

transform:none;

}


}








/*==================================================
480px SMALL MOBILE
==================================================*/


@media(max-width:480px){


.services{

padding:45px 15px;

}



.service-card{

padding:30px 18px;

border-radius:18px;

}



.service-icon{

width:70px;

height:70px;

font-size:35px;

}



.service-card h3{

font-size:18px;

}



.service-card p{

font-size:13px;

line-height:22px;

}


}


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


.testimonials{

padding:90px 8%;

background:
linear-gradient(
120deg,
#dff3ff,
#f5fbff,
#d8edff
);

overflow:hidden;

}






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


.testimonial-container{

display:grid;

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

gap:30px;

margin-top:50px;

}






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


.testimonial-card{

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

padding:35px 30px;

text-align:center;

border-radius:24px;

border:1px solid rgba(13,110,253,.15);

box-shadow:

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

transition:

transform .4s ease,
box-shadow .4s ease,
border .4s ease;

position:relative;

overflow:hidden;

}






/* TOP LINE */


.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#0d6efd;

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}



.testimonial-card:hover::before{

transform:scaleX(1);

}







/* HOVER */


.testimonial-card:hover{

transform:translateY(-8px);

border-color:#0d6efd;

box-shadow:

0 22px 45px rgba(13,110,253,.20);

}








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


.testimonial-card img{

width:105px;

height:105px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

border:5px solid #0d6efd;

padding:3px;

background:#fff;

transition:.4s;

}





.testimonial-card:hover img{

transform:scale(1.05);

}








/*==========================
NAME
==========================*/


.testimonial-card h3{

font-size:24px;

margin-bottom:8px;

color:#000a31;

font-weight:700;

}








/* TOUR NAME */


.testimonial-card span{

color:#666;

font-size:15px;

font-weight:600;

}








/*==========================
STARS
==========================*/


.stars{

color:#f5b301;

font-size:22px;

margin:18px 0;

letter-spacing:2px;

}








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


.testimonial-card p{

line-height:28px;

color:#555;

font-size:15px;

margin:0;

}








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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .7s ease,

transform .7s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}









/*==================================================
1200px LAPTOP
==================================================*/


@media(max-width:1200px){


.testimonials{

padding:80px 5%;

}



.testimonial-container{

gap:25px;

}



.testimonial-card{

padding:32px 25px;

}



.testimonial-card h3{

font-size:22px;

}


}









/*==================================================
992px TABLET
==================================================*/


@media(max-width:992px){


.testimonial-container{

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

gap:25px;

}



.testimonial-card img{

width:95px;

height:95px;

}



.testimonial-card p{

font-size:14px;

line-height:25px;

}


}









/*==================================================
768px MOBILE
==================================================*/


@media(max-width:768px){


.testimonials{

padding:55px 20px;

}



.testimonial-container{

grid-template-columns:1fr;

gap:20px;

margin-top:35px;

}



.testimonial-card{

padding:35px 20px;

border-radius:20px;

}



.testimonial-card:hover{

transform:none;

}



.testimonial-card img{

width:85px;

height:85px;

}



.testimonial-card h3{

font-size:20px;

}



.testimonial-card span{

font-size:14px;

}



.stars{

font-size:20px;

margin:15px 0;

}



.testimonial-card p{

font-size:14px;

line-height:24px;

}


}









/*==================================================
480px SMALL MOBILE
==================================================*/


@media(max-width:480px){


.testimonials{

padding:45px 15px;

}



.testimonial-card{

padding:30px 18px;

}



.testimonial-card img{

width:75px;

height:75px;

border-width:4px;

}



.testimonial-card h3{

font-size:18px;

}



.testimonial-card p{

font-size:13px;

line-height:22px;

}



.stars{

font-size:18px;

}


}


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


.faq{

padding:90px 8%;

background:
linear-gradient(
135deg,
#f3e8ff,
#ede9fe,
#f5f3ff
);

overflow:hidden;

}







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


.faq-container{

max-width:900px;

margin:50px auto 0;

}







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


.faq-container details{

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

margin-bottom:18px;

padding:22px 28px;

border-radius:18px;

border:1px solid rgba(124,58,237,.15);

box-shadow:

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

cursor:pointer;

transition:

transform .35s ease,
box-shadow .35s ease,
border .35s ease;

position:relative;

overflow:hidden;

}








/* TOP LINE */


.faq-container details::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:#7c3aed;

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}



.faq-container details:hover::before,

.faq-container details[open]::before{

transform:scaleX(1);

}








/* HOVER */


.faq-container details:hover{

transform:translateY(-4px);

border-color:#7c3aed;

box-shadow:

0 18px 40px rgba(124,58,237,.18);

}




.faq-container details[open]{

border-color:#7c3aed;

box-shadow:

0 20px 45px rgba(124,58,237,.20);

}








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


.faq-container summary{

font-size:18px;

font-weight:700;

color:#000a31;

list-style:none;

cursor:pointer;

position:relative;

padding-right:45px;

line-height:28px;

}




.faq-container summary::-webkit-details-marker{

display:none;

}








/* PLUS ICON */


.faq-container summary::after{

content:"+";

position:absolute;

right:0;

top:0;

font-size:28px;

color:#7c3aed;

font-weight:700;

transition:.3s;

}




.faq-container details[open] summary::after{

content:"−";

}








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


.faq-container p{

margin-top:18px;

padding-top:15px;

border-top:1px solid #eee;

line-height:28px;

color:#666;

font-size:15px;

margin-bottom:0;

}








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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .7s ease,

transform .7s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}









/*==================================================
1200px LAPTOP
==================================================*/


@media(max-width:1200px){


.faq{

padding:80px 5%;

}



.faq-container{

max-width:850px;

}


}









/*==================================================
992px TABLET
==================================================*/


@media(max-width:992px){


.faq{

padding:70px 30px;

}



.faq-container{

margin-top:40px;

}



.faq-container details{

padding:20px 24px;

}



.faq-container summary{

font-size:17px;

}


}









/*==================================================
768px MOBILE
==================================================*/


@media(max-width:768px){


.faq{

padding:55px 20px;

}



.faq-container{

margin-top:35px;

}



.faq-container details{

padding:18px 20px;

border-radius:16px;

margin-bottom:15px;

}



/* remove hover on mobile */


.faq-container details:hover{

transform:none;

}



.faq-container summary{

font-size:16px;

line-height:25px;

padding-right:35px;

}



.faq-container summary::after{

font-size:24px;

}



.faq-container p{

font-size:14px;

line-height:24px;

margin-top:15px;

padding-top:12px;

}


}









/*==================================================
480px SMALL MOBILE
==================================================*/


@media(max-width:480px){


.faq{

padding:45px 15px;

}



.faq-container details{

padding:16px 15px;

}



.faq-container summary{

font-size:15px;

line-height:23px;

}



.faq-container p{

font-size:13px;

line-height:22px;

}


}

/*==========================
CALL TO ACTION
==========================*/


.cta{

padding:120px 8%;

background:

linear-gradient(
rgba(0,10,40,.70),
rgba(0,10,40,.70)
),

url("../images/cta-bg.png");

background-size:cover;

background-position:center;

background-attachment:fixed;

text-align:center;

position:relative;

overflow:hidden;

}






/* LIGHT EFFECT */


.cta::before{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(13,110,253,.35);

border-radius:50%;

top:-160px;

right:-120px;

filter:blur(90px);

}



.cta::after{

content:"";

position:absolute;

width:300px;

height:300px;

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

border-radius:50%;

bottom:-150px;

left:-100px;

filter:blur(80px);

}








/* CONTENT */


.cta-content{

max-width:850px;

margin:auto;

color:#fff;

position:relative;

z-index:1;

}








/* TAG */


.cta-tag{

display:inline-block;

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

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

padding:10px 22px;

border-radius:30px;

font-size:15px;

font-weight:600;

margin-bottom:25px;

backdrop-filter:blur(10px);

}








/* HEADING */


.cta-content h2{

font-size:52px;

line-height:1.2;

margin-bottom:20px;

font-weight:800;

}








/* DESCRIPTION */


.cta-content p{

font-size:19px;

line-height:34px;

margin-bottom:40px;

color:#f1f5ff;

}








/* BUTTONS */


.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

}








/* COMMON BUTTON */


.cta-btn{

padding:16px 38px;

text-decoration:none;

font-size:17px;

font-weight:700;

border-radius:50px;

transition:

transform .35s ease,
box-shadow .35s ease;

display:inline-block;

}








/* PRIMARY */


.primary-btn{

background:#0d6efd;

color:#fff;

box-shadow:

0 10px 25px rgba(13,110,253,.35);

}



.primary-btn:hover{

background:#004ecb;

transform:translateY(-5px);

box-shadow:

0 15px 35px rgba(13,110,253,.45);

}








/* SECONDARY */


.secondary-btn{

background:#fff;

color:#0d6efd;

box-shadow:

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

}



.secondary-btn:hover{

background:#eaf3ff;

transform:translateY(-5px);

}








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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}









/*================================
1200px LAPTOP
================================*/


@media(max-width:1200px){


.cta{

padding:100px 5%;

}



.cta-content h2{

font-size:46px;

}



.cta-content p{

font-size:17px;

}


}









/*================================
992px TABLET
================================*/


@media(max-width:992px){


.cta{

padding:90px 30px;

background-attachment:scroll;

}



.cta-content h2{

font-size:40px;

}



.cta-content p{

font-size:16px;

line-height:28px;

}



.cta-btn{

font-size:16px;

padding:14px 32px;

}


}









/*================================
768px MOBILE
================================*/


@media(max-width:768px){


.cta{

padding:70px 20px;

}



.cta-tag{

font-size:14px;

padding:9px 18px;

}



.cta-content h2{

font-size:32px;

line-height:1.25;

}



.cta-content p{

font-size:15px;

line-height:26px;

margin-bottom:30px;

}



.cta-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}



.cta-btn{

width:220px;

text-align:center;

padding:14px 20px;

font-size:15px;

}



}









/*================================
480px SMALL MOBILE
================================*/


@media(max-width:480px){


.cta{

padding:55px 15px;

}



.cta::before{

width:220px;

height:220px;

}



.cta::after{

width:180px;

height:180px;

}



.cta-tag{

font-size:13px;

}



.cta-content h2{

font-size:26px;

}



.cta-content p{

font-size:14px;

line-height:23px;

}



.cta-btn{

width:100%;

max-width:250px;

}


}


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


.contact{

padding:90px 8%;

background:
linear-gradient(
135deg,
#eef8ff,
#ffffff,
#dff2ff
);

overflow:hidden;

}







/* MAIN WRAPPER */


.contact-wrapper{

max-width:1200px;

margin:50px auto 0;

}







/* MAIN CARD */


.contact-container{

display:grid;

grid-template-columns:45% 55%;

background:#fff;

border-radius:30px;

overflow:hidden;

border:1px solid rgba(13,110,253,.15);

box-shadow:

0 20px 50px rgba(0,0,0,.10);

}







/* LEFT SIDE */


.contact-info{

padding:50px;

background:

linear-gradient(
145deg,
#eaf5ff,
#dbeeff
);

}



.contact-info h3{

font-size:34px;

color:#000a31;

margin-bottom:20px;

}



.contact-info > p{

line-height:30px;

color:#555;

margin-bottom:35px;

}








/* INFO BOX */


.info-box{

margin-bottom:25px;

padding-bottom:18px;

border-bottom:1px solid rgba(13,110,253,.15);

}



.info-box:last-child{

border-bottom:none;

}



.info-box h4{

margin-bottom:8px;

color:#0d6efd;

font-size:17px;

}



.info-box p{

color:#555;

margin:0;

line-height:26px;

}








/* RIGHT FORM */


.contact-form{

padding:50px;

background:#fff;

}



.contact-form h3{

font-size:32px;

color:#000a31;

margin-bottom:10px;

}



.contact-form > p{

color:#666;

margin-bottom:30px;

}








.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}








/* INPUT */


.contact-form input,

.contact-form textarea{

width:100%;

padding:16px 18px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

outline:none;



    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;


background:#fafcff;

font-family:inherit;

resize:none;

}

.contact-form textarea{

min-height:140px;

}



.contact-form input:focus,

.contact-form textarea:focus{

border-color:#0d6efd;

background:#fff;

box-shadow:

0 0 0 4px rgba(13,110,253,.12);

}








/* BUTTON */

.contact-form button{

width:100%;

height:52px;

border:none;

border-radius:50px;

background:#0d6efd;

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:all .3s ease;

display:flex;

align-items:center;

justify-content:center;

}

.contact-form button:hover{

background:#0048c9;

transform:translateY(-2px);

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

}

.contact-form button:active{

transform:scale(.98);

}

.contact-form button:disabled{

opacity:.7;

cursor:not-allowed;

transform:none;

box-shadow:none;

}






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


.reveal-card{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}



.reveal-card.active{

opacity:1;

transform:translateY(0);

}









/*================================
1200px LAPTOP
================================*/


@media(max-width:1200px){


.contact{

padding:80px 5%;

}



.contact-container{

grid-template-columns:1fr 1fr;

}



.contact-info,

.contact-form{

padding:40px;

}


}









/*================================
992px TABLET
================================*/


@media(max-width:992px){


.contact{

padding:70px 30px;

}



.contact-container{

grid-template-columns:1fr;

}



.contact-info h3{

font-size:30px;

}



.contact-form h3{

font-size:30px;

}


}









/*================================
768px MOBILE
================================*/


@media(max-width:768px){


.contact{

padding:55px 20px;

}



.contact-wrapper{

margin-top:35px;

}



.contact-container{

border-radius:22px;

}



.contact-info,

.contact-form{

padding:30px 22px;

}



.contact-info h3,

.contact-form h3{

font-size:26px;

}



.contact-info > p{

line-height:26px;

font-size:15px;

}



.info-box{

margin-bottom:20px;

}



.contact-form input,

.contact-form textarea{

padding:14px;

font-size:14px;

}


.contact-form button{

height:48px;

font-size:15px;

}

}









/*================================
480px SMALL MOBILE
================================*/


@media(max-width:480px){


.contact{

padding:45px 15px;

}



.contact-info,

.contact-form{

padding:25px 18px;

}



.contact-info h3,

.contact-form h3{

font-size:23px;

}



.contact-form > p{

font-size:14px;

line-height:22px;

}



.contact-form form{

gap:14px;

}



.contact-form input,

.contact-form textarea{

border-radius:10px;

}


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


.footer{

    background:#08111f;

    color:#fff;

    padding:30px 6% 12px;

    border-top:4px solid #0d6efd;

}



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


.footer.reveal-card{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}


.footer.reveal-card.active{

    opacity:1;

    transform:translateY(0);

}



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


.footer-logo{

    width:105px;

    height:auto;

    padding:6px;

    background:#ffffff;

    border-radius:10px;

    display:block;

    margin-bottom:10px;

}



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


.footer-container{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:20px;

    margin-bottom:15px;

}



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


.footer-box h3{

    font-size:17px;

    color:#ffffff;

    margin-bottom:10px;

}


.footer-box p{

    color:#bcc8d8;

    line-height:21px;

    font-size:13px;

}



/*==========================
LIST
==========================*/


.footer-box ul{

    list-style:none;

    padding:0;

    margin:0;

}



.footer-box ul li{

    margin-bottom:6px;

    color:#bcc8d8;

    font-size:13px;

}



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


.footer-box ul li a{

    text-decoration:none;

    color:#bcc8d8;

    transition:.3s;

    display:inline-block;

}



.footer-box ul li a:hover{

    color:#0d6efd;

    transform:translateX(5px);

}



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


.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#bcc8d8;

    line-height:22px;

    margin-bottom:10px;

}



.contact-list li i{

    color:#0d6efd;

    min-width:18px;

    margin-top:3px;

}



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


.footer hr{

    border:none;

    height:1px;

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

    margin-bottom:18px;

}



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


.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}



.footer-bottom p{

    color:#9fb0c6;

    font-size:13px;

}


.footer-bottom strong{

    color:#fff;

}



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


.social-links{

    display:flex;

    gap:12px;

}



.social-links a{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

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

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

    border-radius:50%;

    font-size:14px;

    transition:.3s;

}



.social-links a:hover{

    transform:translateY(-4px);

}



/* Instagram */

.social-links a:nth-child(1):hover{

    background:linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
    );

}



/* Facebook */

.social-links a:nth-child(2):hover{

    background:#1877f2;

}



/* WhatsApp */

.social-links a:nth-child(3):hover{

    background:#25d366;

}



/* LinkedIn */

.social-links a:nth-child(4):hover{

    background:#0a66c2;

}





/*==========================
1200px LAPTOP
==========================*/


@media(max-width:1200px){


.footer{

    padding:40px 5% 18px;

}


.footer-container{

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

}



}





/*==========================
992px TABLET
==========================*/


@media(max-width:992px){


.footer-container{

    gap:25px;

}


}





/*==========================
768px MOBILE
==========================*/


@media(max-width:768px){


.footer{

    padding:40px 20px 18px;

}



.footer-container{

    grid-template-columns:1fr;

    gap:25px;

}



.footer-box{

    text-align:center;

}



.footer-logo{

    width:125px;

    margin:0 auto 15px;

}



.footer-box h3{

    font-size:18px;

}



.footer-box p{

    font-size:13px;

    line-height:22px;

}



.footer-box ul li a:hover{

    transform:none;

}



.contact-list li{

    justify-content:center;

    align-items:center;

}



.footer-bottom{

    flex-direction:column;

    text-align:center;

}



.social-links{

    justify-content:center;

}



}





/*==========================
480px SMALL MOBILE
==========================*/


@media(max-width:480px){


.footer{

    padding:35px 15px 15px;

}



.footer-logo{

    width:115px;

}



.footer-box h3{

    font-size:17px;

}



.footer-box p,
.footer-box ul li,
.contact-list li{

    font-size:12.5px;

}



.social-links a{

    width:38px;

    height:38px;

    font-size:15px;

}



.footer-bottom p{

    font-size:12px;

}


}