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

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


html,
body{

    width:100%;

    overflow-x:hidden;

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

    background:#f5f8fc;

    color:#222;

}


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}


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

.header{

    width:100%;

    height:80px;

    background:#003366;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

}


.logo{

    display:flex;

    align-items:center;

}


.logo a{

    display:block;

}


.logo img{

    width:170px;

    max-width:100%;

    height:auto;

    display:block;

}



/* Support Right */

.support{

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:flex-end;

}


.support a{

    color:#ffffff !important;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    white-space:nowrap;

}


.support a:hover{

    opacity:.85;

}



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


.hero{

    min-height:calc(100vh - 80px);

    background:

    linear-gradient(

        rgba(0,60,140,.25),

        rgba(0,60,140,.25)

    ),

    url('sky-bg.jpg');


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    display:flex;

    justify-content:center;

    align-items:center;


    padding:50px 20px;

}



.content{

    width:100%;

    max-width:1200px;

    text-align:center;

}



/* Main Heading */

.content h1{

    color:white;

    font-size:clamp(50px,8vw,110px);

    font-weight:800;

    margin-bottom:20px;

    text-shadow:

    0 5px 15px rgba(0,0,0,.35);

}



.content h1 span{

    color:#ffd43b;

}



/* Subtitle */


.content h2{

    color:white;

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

    font-weight:700;

    margin-bottom:40px;

    text-shadow:

    0 5px 15px rgba(0,0,0,.35);

}



/* Hero Offer Boxes */


.offer{

    width:min(850px,95%);

    margin:20px auto;

    padding:25px;


    border-radius:15px;


    color:white;


    font-size:clamp(20px,4vw,42px);


    font-weight:800;


    box-shadow:

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

}



/* Offer Colors */


.red{

    background:

    linear-gradient(

        135deg,

        #d60000,

        #ff3d00

    );

}



.blue{

    background:

    linear-gradient(

        135deg,

        #0055ff,

        #0099ff

    );

}



.orange{

    background:

    linear-gradient(

        135deg,

        #ff7700,

        #ffb300

    );

}



.terms{

    margin-top:25px;

    color:white;

    font-size:20px;

    font-weight:600;

}



/* ================= MAIN SECTIONS ================= */


.booking-services,
.destinations{

    padding:80px 20px;


    background:

    linear-gradient(

        135deg,

        #f5f9ff,

        #ffffff

    );

}




.booking-services h2,
.destinations h2{

    text-align:center;


    color:#003366;


    font-size:42px;


    margin-bottom:25px;

}



.section-text{

    max-width:900px;

    margin:0 auto 50px;


    text-align:center;


    color:#555;


    font-size:18px;


    line-height:1.8;

}



/* ================= SERVICE CARDS ================= */


.service-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:25px;

}



.service-card{


    background:white;


    padding:35px;


    border-radius:15px;


    box-shadow:

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



    border-top:

    6px solid #003b8e;


    transition:.3s;

}



.service-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 15px 35px rgba(0,51,102,.20);

}



.service-card h3{


    color:#003366;


    font-size:25px;


    margin-bottom:15px;

}



.service-card p{


    color:#555;


    line-height:1.7;

}



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


.destination-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));


    gap:20px;


    margin-top:50px;

}



.destination-card{


    background:

    linear-gradient(

        135deg,

        #003366,

        #0066cc

    );


    color:white;


    text-align:center;


    padding:30px 20px;


    border-radius:15px;


    font-size:22px;


    font-weight:700;


    box-shadow:

    0 10px 25px rgba(0,51,102,.20);


    transition:.3s;

}



.destination-card:hover{


    background:

    linear-gradient(

        135deg,

        #e31837,

        #ff6600

    );


    transform:translateY(-6px);

}

/* ================= LEGAL INFORMATION SECTION ================= */


.legal-section{


    padding:70px 20px;


    background:

    linear-gradient(

        135deg,

        #f5f9ff,

        #ffffff

    );

}



.legal-section h2{


    text-align:center;


    color:#003366;


    font-size:38px;


    margin-bottom:35px;

}



/* Legal Cards */


.legal-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}



.legal-card{


    background:white;


    padding:30px;


    border-radius:15px;


    text-align:center;


    box-shadow:

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


    border-top:

    5px solid #e31837;


    transition:.3s;


}



.legal-card:hover{


    transform:translateY(-8px);


    box-shadow:

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


}



.legal-card a{


    text-decoration:none;


    color:#003366;


    font-size:18px;


    font-weight:700;


    display:block;


}



.legal-card:hover a{


    color:#e31837;


}




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


.footer{


    background:

    linear-gradient(

        135deg,

        #002244,

        #003b8e

    );


    color:white;


    padding:

    60px 30px 25px;


}



.footer-container{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:40px;


}



.footer-column h3{


    font-size:22px;


    margin-bottom:20px;


    color:white;


}



.footer-column p{


    font-size:15px;


    line-height:1.8;


    margin-bottom:10px;


}



.footer-column ul{


    list-style:none;


    padding:0;


}



.footer-column ul li{


    margin-bottom:12px;


    font-size:15px;


}



.footer a{


    color:white;


    text-decoration:none;


}



.footer a:hover{


    color:#ffd43b;


}



/* Footer Bottom */


.footer-bottom{


    max-width:1200px;


    margin:

    35px auto 0;


    padding-top:20px;


    border-top:

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


    text-align:center;


    font-size:14px;


}





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


.service-card,
.destination-card,
.legal-card{


    animation:

    fadeUp .6s ease;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(20px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}





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


@media(max-width:992px){


    .header{


        padding:0 25px;


    }



    .logo img{


        width:150px;


    }



    .support a{


        font-size:16px;


    }



    .footer-container{


        grid-template-columns:

        repeat(2,1fr);


    }



    .legal-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



}




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


@media(max-width:768px){


    .header{


        height:70px;


        padding:

        0 15px;


    }



    .logo img{


        width:120px;


    }



    .support a{


        font-size:13px;


    }




    .content h1{


        font-size:48px;


    }



    .content h2{


        font-size:30px;


    }




    .offer{


        padding:18px;


    }



    .booking-services h2,
    .destinations h2,
    .legal-section h2{


        font-size:30px;


    }



    .footer-container{


        grid-template-columns:

        1fr;


        text-align:center;


    }



    .legal-grid{


        grid-template-columns:

        1fr;


    }



    .footer{


        padding:

        40px 20px 20px;


    }



}





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


@media(max-width:480px){


    .header{


        padding:

        0 10px;


    }



    .logo img{


        width:95px;


    }



    .support a{


        font-size:11px;


    }




    .offer{


        font-size:20px;


    }



    .destination-card{


        font-size:18px;


    }



}