/* ===============================
   Tablets (992px and below)
================================= */

@media (max-width:992px){

.navbar{
    padding:18px 30px;
}

.navbar ul{
    gap:20px;
}

.hero-content h1{
    font-size:55px;
}

.hero-content p{
    font-size:18px;
}

.explorer-content h2{
    font-size:42px;
}

}

/* ===============================
   Mobile (768px and below)
================================= */

@media (max-width: 900px){

    .nav-links{
        display:none !important;
    }

    .book-btn{
        display:none !important;
    }

    .hamburger{
        display:flex !important;
    }

    .navbar{
        padding:18px 20px;
    }

    .logo{
        font-size:28px;
    }

}

/* ===============================
   Small Phones (480px and below)
================================= */

@media (max-width:480px){

.hero-content h1{
    font-size:34px;
}

.hero-content p{
    font-size:15px;
}

#beginJourney{
    width:100%;
}

.logo{
    font-size:22px;
}

.destination-card{
    padding:25px;
}

}

@media(max-width:768px){

.package-content{

grid-template-columns:1fr;

}

.package-image{

height:260px;

}

.package-info{

padding:30px;

}

.package-panel{

height:100vh;

border-radius:25px 25px 0 0;

}

}

@media(max-width:768px){

.review-card{

width:300px;

}

.review-track{

gap:20px;

}

}

@media(max-width:768px){

.blog-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.offers-overlay h2{

font-size:36px;

}

.offer-cards{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-container{

grid-template-columns:1fr;

}

.contact-map iframe{

min-height:300px;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.socials{

justify-content:center;

}

.footer-container a:hover{

padding-left:0;

}

}

@media(max-width:768px){

.contact-container{

grid-template-columns:1fr;

}

.contact-card img{

height:220px;

}

.contact-info,

.contact-card{

padding:30px;

}

.socials{

justify-content:center;

}

}

@media(max-width:768px){

.about-story{

grid-template-columns:1fr;

gap:45px;

}

.story-text{

text-align:center;

}

.story-text h2{

font-size:34px;

}

.about-banner img{

height:300px;

}

.story-points{

margin-top:10px;

}

}