/*==================================================
GOOGLE FONT
==================================================*/

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

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

:root{

    --primary:#7B2FF7;
    --primary-dark:#5E17EB;

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

    --text:#555555;

    --bg:#fafafa;

    --border:#ececec;

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

    --shadow-md:0 15px 45px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#fff;

    color:#111;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

    outline:none;

}

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

.container{

    width:min(1320px,92%);

    margin:auto;

}

section{

    padding:110px 0;

}

.section-tag{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:15px;

}

.section-header{

    text-align:center;

    max-width:720px;

    margin:0 auto 70px;

}

.section-header h2{

    font-size:46px;

    margin-bottom:20px;

}

.section-header p{

    color:var(--text);

    line-height:1.9;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    background:transparent;

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

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader img{

    width:80px;

}

/*==================================================
SCROLL PROGRESS
==================================================*/

.progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:transparent;

    z-index:9999;

}

.progress-bar{

    width:0;

    height:100%;

    background:var(--primary);

}

/*==================================================
TOP BAR
==================================================*/

.top-bar{

    background:#111;

    color:#fff;

    font-size:14px;

    padding:12px 0;

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-left a,
.top-right a{

    color:#fff;

    transition:var(--transition);

}

.top-left a:hover,
.top-right a:hover{

    color:var(--primary);

}

.top-left i{

    margin-right:8px;

}

.top-right i{

    font-size:15px;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    z-index:999;

    transition:all .35s ease;

}

.header .container{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.header.sticky{

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

    backdrop-filter:blur(14px);

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

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

.logo img{

    width:190px;

    display:block;

}

/*==================================================
NAVIGATION
==================================================*/
.navbar{

    display:flex;

    align-items:center;

}

.navbar ul{

    display:flex;

    align-items:center;

    gap:35px;

}

.navbar a{

    position:relative;

    font-size:16px;

    font-weight:500;

    transition:var(--transition);

}

.navbar a:hover{

    color:var(--primary);

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.navbar a:hover::after{

    width:100%;

}


.navbar.active ul{

    flex-direction:column;

    gap:30px;

}

.navbar.active a{

    font-size:20px;

    font-weight:600;

}
/*==================================================
HEADER BUTTON
==================================================*/

.header-btn{

    padding:14px 28px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.header-btn:hover{

    background:var(--primary-dark);

}

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

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    cursor:pointer;

}

.menu-toggle span{

    width:100%;

    height:3px;

    background:#111;

    border-radius:50px;

    transition:var(--transition);

}

.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg) translate(7px,7px);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg) translate(6px,-6px);

}

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

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.hero{

    position:relative;

    padding:190px 0 120px;

    background:#f8f8fc;

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.hero-content h1{

    font-size:60px;

    line-height:1.2;

    margin:25px 0;

    font-weight:700;

    color:#111;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-content p{

    font-size:18px;

    line-height:1.9;

    color:var(--text);

    margin-bottom:40px;

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    background:rgba(123,47,247,.12);

    color:var(--primary);

    border-radius:50px;

    font-size:14px;

    font-weight:600;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:45px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    display:block;

}

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

.hero-features{

    display:grid;

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

    gap:18px;

}

.feature-box{

    background:#fff;

    border-radius:18px;

    padding:22px 15px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.feature-box:hover{

    transform:translateY(-8px);

}

.feature-box i{

    font-size:30px;

    color:var(--primary);

    margin-bottom:12px;

}

.feature-box span{

    display:block;

    font-size:15px;

    font-weight:600;

}

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

.hero-features{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.feature-box{

    background:#fff;

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

    border-radius:20px;

    padding:25px 15px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.feature-box:hover{

    transform:translateY(-6px);

}

.feature-box i{

    font-size:30px;

    color:var(--primary);

    margin-bottom:12px;

}

.feature-box h4{

    font-size:17px;

    color:var(--dark);

}
/*==================================================
ABOUT
==================================================*/

.about{

    background:#fff;

}

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow-md);

}

.about-content h2{

    font-size:46px;

    margin:20px 0 30px;

    color:#111;

}

.about-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:20px;

}

.about-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.about-feature{

    display:flex;

    align-items:center;

    gap:12px;

}

.about-feature i{

    color:var(--primary);

    font-size:18px;

}

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

.services{

    background:#f8f8fc;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:22px;

}

.service-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.service-card p{

    color:var(--text);

    line-height:1.8;

}

/*==================================================
FEATURED DESTINATIONS
==================================================*/

.destinations{

    background:#ffffff;

}

.destination-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

.destination-card{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    height:100%;

}

.destination-card:hover{

    transform:translateY(-10px);

}

.destination-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.destination-content{

    padding:25px;

}

.destination-content h3{

    margin-bottom:12px;

    font-size:24px;

}

.destination-content p{

    color:var(--text);

    line-height:1.8;

}

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

.fleet{

    background:#f8f8fc;

}

.fleet-grid{

    display:grid;

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

    gap:30px;

}

.fleet-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.fleet-card:hover{

    transform:translateY(-10px);

}

.fleet-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.fleet-card h3{

    padding:25px;

    font-size:24px;

}

/*==================================================
WHY PURPLE TOUR
==================================================*/

.why-us{

    background:#ffffff;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card i{

    font-size:44px;

    color:var(--primary);

    margin-bottom:20px;

}

.why-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.why-card p{

    color:var(--text);

    line-height:1.8;

}

/*==================================================
STATISTICS
==================================================*/

.statistics{

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

}

.statistics-grid{

    display:grid;

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

    gap:30px;

    text-align:center;

}

.stat-item h2{

    font-size:54px;

    margin-bottom:12px;

}

.stat-item p{

    font-size:18px;

    opacity:.9;

}

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

.testimonials{

    background:#ffffff;

}

.testimonials-grid{

    display:grid;

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

    gap:30px;

}

.testimonial-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.testimonial-stars{

    color:#f7b500;

    margin-bottom:20px;

}

.testimonial-card p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:30px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-author img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-author h4{

    margin-bottom:5px;

}

.testimonial-author span{

    color:var(--text);

    font-size:14px;

}

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

.contact{

    background:#f8f8fc;

}

.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}

.contact-info h2{

    margin:20px 0 25px;

    font-size:44px;

}

.contact-info p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.contact-item i{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

}

.contact-form{

    display:grid;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

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

    border-radius:12px;

    resize:none;

}

.contact-form button{

    width:fit-content;

}

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

.footer{

    background:#111;

    color:#fff;

    padding:80px 0 25px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

    margin-bottom:50px;

}

.footer-logo{

    width:190px;

    margin-bottom:25px;

}

.footer-item p{

    color:#cfcfcf;

    line-height:1.9;

}

.footer-item h3{

    margin-bottom:20px;

}

.footer-item ul li{

    margin-bottom:14px;

}

.footer-item ul li a{

    color:#cfcfcf;

    transition:var(--transition);

}

.footer-item ul li a:hover{

    color:#fff;

}

.footer-bottom{

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

    padding-top:25px;

    text-align:center;

    color:#bdbdbd;

}

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

.whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    font-size:28px;

    box-shadow:var(--shadow-md);

    z-index:999;

}

/*==================================================
BACK TO TOP
==================================================*/
.back-to-top{

    position:fixed;

    right:30px;

    bottom:95px;

    width:55px;

    height:55px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:20px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:999;

}

.back-to-top:hover{

    transform:translateY(-5px);

    background:var(--secondary);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top i{

    pointer-events:none;

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

@media (max-width:992px){

    .hero-container,
    .about-container,
    .contact-container{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

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

    .header-btn{
        display:none;
    }

    .menu-toggle{
        display:flex;
        position:relative;
        z-index:10001;
    }

    .logo{
        position:relative;
        z-index:10001;
    }

    .navbar{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        max-width:85%;

        height:100vh;

        background:#ffffff;

        display:flex;

        justify-content:center;

        align-items:center;

        transition:.35s ease;

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

        z-index:9999;

    }

    .navbar.active{

        right:0;

    }

    .navbar ul{

        display:flex;

        flex-direction:column;

        width:100%;

        gap:28px;

        align-items:center;

    }

    .navbar li{

        width:100%;

        text-align:center;

    }

    .navbar a{

        display:block;

        width:100%;

        padding:12px 20px;

        font-size:20px;

        font-weight:600;

    }

    .menu-overlay{

        position:fixed;

        inset:0;

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

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:9998;

    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

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

}

@media (max-width:768px){

    .services-grid,
    .destination-grid,
    .fleet-grid,
    .why-grid,
    .testimonials-grid,
    .statistics-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        width:100%;

        max-width:320px;

    }
	.back-to-top{

    width:50px;

    height:50px;

    right:20px;

    bottom:85px;

}