/*====================================================
    SKYWINGS TRAVEL WEBSITE
    PREMIUM TRAVEL DESIGN
====================================================*/


/*==================== GOOGLE VARIABLES ====================*/

:root {

    --primary: #0F4C81;
    --secondary: #6EC1E4;
    --gold: #F4B400;
    --light: #F6FAFD;
    --white: #ffffff;
    --dark: #16202A;
    --text: #53606d;

    --gradient:
    linear-gradient(
        135deg,
        #0F4C81,
        #6EC1E4
    );


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


    --glass:
    rgba(255,255,255,0.15);


    --radius: 25px;

}



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


* {

    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    list-style:none;
    scroll-behavior:smooth;

}



body {

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--dark);
    overflow-x:hidden;

}



img {

    max-width:100%;
    display:block;

}



section {

    padding:100px 8%;

}




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


.preloader {

    position:fixed;
    inset:0;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;

}



.loader {

    text-align:center;
    color:var(--primary);

}



.loader i {

    font-size:60px;
    animation:planeLoader 2s infinite;

}



.loader span {

    display:block;
    margin-top:20px;
    font-size:18px;

}




@keyframes planeLoader {


    0%{

        transform:translateX(-40px);

    }


    50%{

        transform:translateX(40px);

    }


    100%{

        transform:translateX(-40px);

    }


}




/*==================== SCROLL BAR ====================*/


.progress-bar {

    position:fixed;
    top:0;
    left:0;

    height:5px;
    width:0%;

    background:var(--gold);

    z-index:9999;

}





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


header {

    position:absolute;
    top:0;
    width:100%;
    z-index:1000;

}



.navbar {

    width:90%;
    margin:25px auto;

    padding:18px 35px;

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


    background:

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


    backdrop-filter:blur(20px);


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


    border-radius:50px;


}




.logo {

    color:white;
    font-size:28px;
    font-weight:700;

    font-family:'Playfair Display',serif;

}



.logo i {

    color:var(--gold);
    margin-right:8px;

}





.navbar ul {

    display:flex;
    gap:35px;

}



.navbar ul a {

    color:white;
    font-size:15px;
    transition:.3s;

}



.navbar ul a:hover {

    color:var(--gold);

}





.nav-btns {

    display:flex;
    gap:15px;

}




.login-btn {

    color:white;
    padding:10px 25px;

}



.book-btn {

    background:var(--gold);

    color:white;

    padding:12px 28px;

    border-radius:30px;

    transition:.3s;

}



.book-btn:hover {

    transform:translateY(-5px);

}





.menu-btn {

    display:none;
    color:white;
    font-size:25px;

}







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


.hero {

    height:1100px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

}



.hero-bg {

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    inset:0;

}




.overlay {

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(0,20,40,.8),

    rgba(0,0,0,.3)

    );

}





.hero-content {

    position:relative;

    z-index:20;

    color:white;

     max-width:650px;
/* 
    padding-top:80px; */
    margin-top: -15em;

}





.tag {


    display:inline-block;

    padding:10px 25px;

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

    backdrop-filter:blur(10px);

    border-radius:30px;

    margin-bottom:25px;


}





.hero h1 {

    font-family:'Playfair Display',serif;

    font-size:75px;

    line-height:1.1;
     margin-top:40px;

    margin-bottom:25px;


}



.hero h1 span {

    color:var(--gold);

}




.hero p {

    margin:25px 0;

    font-size:18px;

    line-height:1.8;

    color:#eee;

}




.hero-buttons {

    display:flex;

    gap:20px;

}





.primary-btn,
.secondary-btn {


    padding:15px 35px;

    border-radius:40px;

    transition:.4s;

}




.primary-btn {

    background:var(--gold);

    color:white;

}



.secondary-btn {

    border:1px solid white;

    color:white;

}



.primary-btn:hover,
.secondary-btn:hover {


    transform:translateY(-8px);

}






/*==================== AIRPLANE ====================*/
/* 

.airplane {


    position:absolute;

    width:130px;

    right:-150px;

    top:25%;

    z-index:4;


    animation:

    flyPlane 18s linear infinite;


}




@keyframes flyPlane {


    0%{

        right:-150px;

        transform:rotate(-10deg);

    }


    50%{

        top:20%;

    }


    100%{

        right:110%;

        transform:rotate(-5deg);

    }


}



 */


 .airplane {
    position: absolute;
    width: 130px;
    top: 25%;
    right: -150px;
    z-index: 4;

    animation: flyPlane 18s linear infinite;
}

@keyframes flyPlane {

    0% {
        transform: translateX(0) rotate(-10deg);
        top: 25%;
    }

    50% {
        top: 20%;
    }

    100% {
        transform: translateX(-1800px) rotate(-5deg);
        top: 25%;
    }
}
/*==================== CLOUDS ====================*/


.cloud {


    position:absolute;

    opacity:.5;

    z-index:1;

    pointer-events:none;

}



.cloud1 {


    width:180px;

    top:15%;

    animation:cloudMove 25s infinite linear;


}



.cloud2 {


    width:250px;

    top:45%;

    animation:cloudMove 35s infinite linear;


}



.cloud3 {


    width:150px;

    top:70%;

    animation:cloudMove 20s infinite linear;


}





@keyframes cloudMove {


    from{

        left:-300px;

    }


    to{

        left:110%;

    }


}
/*====================================================
    PART 2B
    BOOKING + DESTINATIONS + AIRLINES
====================================================*/





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


.booking-card {

    position:absolute;

    bottom:25px;

    left:8%;

    width:84%;

    padding:30px;


    background:

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


    backdrop-filter:blur(20px);


    border:

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


    border-radius:30px;


    z-index:50;


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


}





.booking-title {

    display:flex;

    align-items:center;

    gap:15px;

    color:white;

    margin-bottom:25px;


}



.booking-title i {

    color:var(--gold);

    font-size:28px;

}




.booking-title h3 {

    font-size:22px;

}





.booking-form {


    display:grid;

    grid-template-columns:

    repeat(5,1fr);


    gap:15px;


}





.input-box label {


    display:block;

    color:white;

    font-size:14px;

    margin-bottom:8px;


}




.input-field {


    display:flex;

    align-items:center;

    gap:10px;


    background:white;


    padding:14px 18px;


    border-radius:15px;


}



.input-field i {


    color:var(--primary);


}




.input-field input,
.input-field select {


    width:100%;

    border:none;

    outline:none;

    font-family:inherit;

    font-size:14px;

}




.search-btn {


    border:none;

    background:var(--gold);

    color:white;

    border-radius:15px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.4s;


}



.search-btn:hover {


    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(244,180,0,.4);


}







/*==================== FLOATING DESTINATION CARDS ====================*/


.floating-card {


    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;


    background:

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


    backdrop-filter:blur(15px);


    padding:12px;


    border-radius:20px;


    color:white;


    z-index:6;


    animation:floating 4s infinite ease-in-out;


}





.floating-card img {


    width:60px;

    height:60px;

    object-fit:cover;

    border-radius:15px;


}



.floating-card h4 {


    font-size:17px;

}



.floating-card span {


    font-size:12px;

    color:#eee;


}




.card1 {


    right:4%;

    top:35%;


}



.card2 {


    right:3%;

    bottom:28%;


}



.card3 {


    left:3%;

    top:38%;


}






@keyframes floating {


    0%,
    100% {


        transform:translateY(0);


    }


    50% {


        transform:translateY(-20px);


    }


}








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


.hero-stats {


    position:absolute;

    bottom:15em;

    left:8%;


    display:flex;

    gap:50px;


    color:white;

    z-index:15;


}




.stat h2 {


    font-size:35px;

    color:var(--gold);


}



.stat p {


    font-size:14px;

}









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


.section-heading {


    text-align:center;

    max-width:700px;

    margin:auto;

    margin-bottom:60px;


}



.section-heading span {


    color:var(--gold);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;


}



.section-heading h2 {


    font-family:'Playfair Display',serif;

    font-size:45px;

    margin:15px 0;


}



.section-heading strong {


    color:var(--primary);


}



.section-heading p {


    color:var(--text);

    line-height:1.8;


}







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


.destination-grid {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}




.destination-card {


    height:420px;

    position:relative;

    overflow:hidden;


    border-radius:30px;


    box-shadow:var(--shadow);


}





.destination-card img {


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;


}



.destination-card:hover img {


    transform:scale(1.15);


}






.destination-overlay {


    position:absolute;


    inset:0;


    padding:30px;


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    color:white;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.8)

    );


}





.destination-overlay h3 {


    font-size:30px;


    font-family:'Playfair Display',serif;


}




.destination-overlay p {


    margin:8px 0;

}





.destination-overlay span {


    color:var(--gold);


}





.destination-overlay a {


    margin-top:20px;


    background:white;


    color:var(--primary);


    width:max-content;


    padding:10px 25px;


    border-radius:30px;


    font-weight:600;


    transition:.3s;


}



.destination-overlay a:hover {


    background:var(--gold);

    color:white;


}









/*==================== AIRLINE PARTNERS ====================*/


.airline-section {


    background:white;


}





.airline-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}





.partner-card {


    padding:35px;


    text-align:center;


    background:white;


    border-radius:25px;


    box-shadow:var(--shadow);


    transition:.4s;


}



.partner-card:hover {


    transform:translateY(-15px);


}



.partner-card img {


    height:60px;

    width:150px;

    object-fit:contain;


    margin:auto;


}


.partner-card h3 {


    margin-top:25px;


    font-size:22px;


}



.partner-card p {


    color:var(--text);


    margin-top:10px;


}

/*====================================================
    PART 2C
    FEATURES + ROUTE MAP + FAQ
====================================================*/





/*==================== WHY CHOOSE US ====================*/


.features-grid {


    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;


}





.feature-card {


    background:white;

    padding:35px 25px;

    border-radius:25px;


    text-align:center;


    box-shadow:var(--shadow);


    transition:.4s;


}




.feature-card:hover {


    transform:translateY(-15px);


}





.feature-icon {


    width:80px;

    height:80px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin:auto;


    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );


    color:white;


    border-radius:50%;


    font-size:32px;


}




.feature-card h3 {


    margin:25px 0 15px;


    font-size:22px;


}




.feature-card p {


    color:var(--text);

    line-height:1.7;


}









/*==================== COUNTER ====================*/


.counter-section {


    background:


    linear-gradient(

    135deg,

    #0F4C81,

    #6EC1E4

    );


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


    padding:70px 8%;


    color:white;


}




.counter-box {


    text-align:center;


}





.counter-box i {


    font-size:40px;


    color:var(--gold);


    margin-bottom:20px;


}





.counter-box h2 {


    font-size:45px;


    font-family:'Playfair Display',serif;


}





.counter-box p {


    margin-top:10px;


}









/*==================== FLIGHT ROUTE MAP ====================*/


.map-container {


    position:relative;


    max-width:1000px;


    margin:auto;


    height:550px;


}





.world-map {


    width:100%;


    height:100%;


    object-fit:contain;


    opacity:.25;


}





.location {


    position:absolute;


    display:flex;


    flex-direction:column;


    align-items:center;


    color:var(--primary);


    font-weight:600;


}





.location i {


    color:#e63946;


    font-size:30px;


    animation:pulse 2s infinite;


}





.location span {


    background:white;


    padding:5px 15px;


    border-radius:20px;


    box-shadow:var(--shadow);


    margin-top:5px;


}




.dubai {


    top:45%;

    left:60%;


}




.london {


    top:30%;

    left:43%;


}




.paris {


    top:40%;

    left:48%;


}




.newyork {


    top:35%;

    left:25%;


}






@keyframes pulse {


    0% {


        transform:scale(1);


    }


    50% {


        transform:scale(1.3);


    }


    100% {


        transform:scale(1);


    }


}








/*==================== ROUTE LINES ====================*/


.route-line {


    position:absolute;


    height:2px;


    background:

    repeating-linear-gradient(

    90deg,

    var(--primary),

    var(--primary) 10px,

    transparent 10px,

    transparent 20px

    );


    transform-origin:left;


}




.route-one {


    width:220px;


    top:42%;

    left:48%;


    transform:rotate(15deg);


}



.route-two {


    width:250px;


    top:38%;

    left:28%;


    transform:rotate(-10deg);


}



.route-three {


    width:180px;


    top:45%;

    left:45%;


    transform:rotate(5deg);


}





.route-plane {


    position:absolute;


    top:40%;


    left:50%;


    color:var(--gold);


    font-size:35px;


    animation:routeMove 8s infinite linear;


}





@keyframes routeMove {


    0% {


        transform:translate(0,0) rotate(-10deg);


    }



    50% {


        transform:translate(180px,-50px) rotate(-10deg);


    }



    100% {


        transform:translate(350px,0) rotate(-10deg);


    }


}









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


.newsletter {


    margin:100px 8%;


    border-radius:40px;


    padding:80px 50px;


    text-align:center;


    color:white;


    background:


    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );


}





.newsletter h2 {


    font-family:'Playfair Display',serif;


    font-size:45px;


}





.newsletter p {


    margin:20px 0 35px;


}





.newsletter form {


    display:flex;


    justify-content:center;


    max-width:600px;


    margin:auto;


}




.newsletter input {


    flex:1;


    padding:18px;


    border:none;


    outline:none;


    border-radius:40px 0 0 40px;


}




.newsletter button {


    border:none;


    padding:18px 35px;


    background:var(--gold);


    color:white;


    border-radius:0 40px 40px 0;


    cursor:pointer;


}









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


.faq-container {


    max-width:900px;


    margin:auto;


}





.faq-item {


    background:white;


    padding:30px;


    border-radius:20px;


    margin-bottom:20px;


    box-shadow:var(--shadow);


    transition:.3s;


}




.faq-item:hover {


    transform:translateX(10px);


}




.faq-item h3 {


    margin-bottom:15px;


    color:var(--primary);


}




.faq-item p {


    color:var(--text);


    line-height:1.7;


}

/*====================================================
    PART 2D
    HOTELS + PACKAGES + FOOTER + RESPONSIVE
====================================================*/





/*==================== HOTELS ====================*/


.hotel-grid {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}




.hotel-card {


    background:white;


    border-radius:30px;


    overflow:hidden;


    box-shadow:var(--shadow);


    transition:.4s;


}



.hotel-card:hover {


    transform:translateY(-15px);


}





.hotel-card img {


    width:100%;


    height:260px;


    object-fit:cover;


}





.hotel-content {


    padding:25px;


}




.hotel-content h3 {


    font-size:24px;


    font-family:'Playfair Display',serif;


}





.hotel-content p {


    color:var(--text);


    margin:10px 0;


}





.rating {


    color:var(--gold);


    margin:15px 0;


}





.hotel-content button {


    border:none;


    padding:12px 30px;


    background:var(--primary);


    color:white;


    border-radius:30px;


    cursor:pointer;


    transition:.3s;


}




.hotel-content button:hover {


    background:var(--gold);


}









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


.package-grid {


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}





.package-card {


    position:relative;


    overflow:hidden;


    border-radius:30px;


    height:450px;


    box-shadow:var(--shadow);


}





.package-card img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.6s;


}





.package-card:hover img {


    transform:scale(1.15);


}




.package-content {


    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    padding:30px;


    color:white;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.85)

    );


}





.package-content h3 {


    font-size:28px;


    font-family:'Playfair Display',serif;


}




.package-content h4 {


    color:var(--gold);


    font-size:28px;


    margin:10px 0;


}





.package-content a {


    background:white;


    color:var(--primary);


    width:max-content;


    padding:12px 30px;


    border-radius:30px;


    font-weight:600;


}









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


.review-grid {


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}





.review-card {


    background:white;


    padding:35px;


    text-align:center;


    border-radius:30px;


    box-shadow:var(--shadow);


}





.review-card img {


    width:90px;


    height:90px;


    border-radius:50%;


    margin:auto;


    object-fit:cover;


}





.review-card h3 {


    margin:20px 0 10px;


}





.stars {


    color:var(--gold);


    font-size:20px;


}





.review-card p {


    color:var(--text);


    margin-top:20px;


    line-height:1.7;


}









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


.contact-box {


    background:


    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );


    color:white;


    padding:80px;


    text-align:center;


    border-radius:40px;


}





.contact-box h2 {


    font-family:'Playfair Display',serif;


    font-size:45px;


}





.contact-box p {


    margin:20px;


}





.contact-box a {


    display:inline-block;


    background:var(--gold);


    color:white;


    padding:15px 40px;


    border-radius:40px;


}









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


footer {


    background:#071827;


    color:white;


    padding:70px 8% 20px;


}





.footer-container {


    display:grid;


    grid-template-columns:


    2fr 1fr 1fr 1fr;


    gap:40px;


}




.footer-about h2 {


    font-family:'Playfair Display',serif;


    font-size:35px;


}





.footer-about i {


    color:var(--gold);


}





.footer-about p {


    color:#bbb;


    margin-top:20px;


    line-height:1.8;


}





.footer-links {


    display:flex;


    flex-direction:column;


    gap:15px;


}





.footer-links h3,
.footer-social h3 {


    margin-bottom:15px;


    color:var(--gold);


}





.footer-links a {


    color:#ccc;


    transition:.3s;


}



.footer-links a:hover {


    color:white;


    transform:translateX(8px);


}





.footer-social i {


    width:45px;


    height:45px;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    background:white;


    color:var(--primary);


    border-radius:50%;


    margin-right:10px;


    transition:.3s;


}





.footer-social i:hover {


    background:var(--gold);


    color:white;


}






.copyright {


    text-align:center;


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


    margin-top:50px;


    padding-top:20px;


    color:#aaa;


}









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





@media(max-width:1200px){


    .hero h1{

        font-size:60px;

    }


    .booking-form{

        grid-template-columns:

        repeat(3,1fr);

    }


    .features-grid,
    .airline-grid{

        grid-template-columns:

        repeat(2,1fr);

    }


}





@media(max-width:900px){


    section{

        padding:70px 5%;

    }



    .navbar ul,
    .nav-btns{

        display:none;

    }



    .menu-btn{

        display:block;

    }



    .hero{

        height:auto;

        padding:180px 5% 500px;

    }




    .hero h1{

        font-size:45px;

    }



    .booking-card{

        left:5%;

        width:90%;

        bottom:50px;

    }



    .booking-form{

        grid-template-columns:1fr;

    }




    .destination-grid,
    .hotel-grid,
    .package-grid,
    .review-grid{

        grid-template-columns:1fr;

    }




    .counter-section{

        grid-template-columns:

        repeat(2,1fr);

    }



    .footer-container{

        grid-template-columns:1fr;

    }


}





@media(max-width:600px){



    .hero-buttons{

        flex-direction:column;

    }



    .floating-card{

        display:none;

    }



    .hero-stats{

        bottom:300px;

        gap:20px;

        flex-wrap:wrap;

    }



    .stat h2{

        font-size:25px;

    }



    .counter-section{

        grid-template-columns:1fr;

    }



    .newsletter{

        margin:50px 5%;

        padding:50px 20px;

    }



    .newsletter form{

        flex-direction:column;

    }



    .newsletter input,
    .newsletter button{

        border-radius:40px;

        margin:5px;

    }



    .contact-box{

        padding:40px 20px;

    }



    .contact-box h2{

        font-size:30px;

    }



}


.cursor-glow{

    position:fixed;

    width:25px;

    height:25px;

    background:#F4B400;

    border-radius:50%;

    pointer-events:none;

    transform:translate(-50%,-50%);

    opacity:.5;

    filter:blur(10px);

    z-index:9999;

}