/* ==========================================
   DESKTOP LARGE
   1400px trở lên
========================================== */

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

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

}

/* ==========================================
   DESKTOP
   1200px - 1399px
========================================== */

@media (max-width:1399px){

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

}

/* ==========================================
   LAPTOP
   992px - 1199px
========================================== */

@media (max-width:1199px){

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

    .section-title h2{
        font-size:38px;
    }

    #why-us h2{
        font-size:40px;
    }

    #cta h2{
        font-size:42px;
    }

    .destination-card img{
        height:360px;
    }

}

/* ==========================================
   TABLET LANDSCAPE
   <= 991px
========================================== */

@media (max-width:991px){

    /* Header */

    .navbar{
        background:#fff;
        padding:15px 0;
    }

    .navbar-brand{
        color:#023047 !important;
    }

    .nav-link{
        color:#222 !important;
        margin-left:0;
        padding:10px 0;
    }

    /* Hero */

    #hero{
        height:85vh;
    }

    .hero-slide{
        height:85vh;
    }

    .hero-content{
        padding-top:180px;
        text-align:center;
        margin:auto;
    }

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

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

    /* Search */

    .search-box{
        margin-top:-50px;
    }

    .search-wrapper{
        padding:25px;
    }

    .search-wrapper .row > div{
        margin-bottom:15px;
    }

    /* Services */

    #services{
        padding:90px 0;
    }

    .service-card{
        margin-bottom:25px;
    }

    /* Destinations */

    #destinations{
        padding:90px 0;
    }

    .destination-card{
        margin-bottom:25px;
    }

    /* Why Us */

    #why-us{
        padding:90px 0;
        text-align:center;
    }

    #why-us img{
        margin-bottom:40px;
    }

    /* Stats */

    #stats .col-lg-3{
        margin-bottom:30px;
    }

    /* News */

    .news-card{
        margin-bottom:25px;
    }

}

/* ==========================================
   TABLET PORTRAIT
   <= 768px
========================================== */

@media (max-width:768px){

    .section-title{
        margin-bottom:40px;
    }

    .section-title h2{
        font-size:32px;
    }

    .hero-content{
        padding-top:160px;
    }

    .hero-content h1{
        font-size:46px;
        line-height:1.3;
    }

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

    .search-wrapper{
        padding:20px;
        border-radius:16px;
    }

    .service-card{
        padding:30px;
    }

    .service-card i{
        font-size:42px;
    }

    .destination-card img{
        height:320px;
    }

    #why-us h2{
        font-size:34px;
    }

    #stats h2{
        font-size:44px;
    }

    .testimonial-card{
        padding:35px;
    }

    .testimonial-card p{
        font-size:18px;
    }

    #cta h2{
        font-size:38px;
    }

}

/* ==========================================
   MOBILE LARGE
   <= 576px
========================================== */

@media (max-width:576px){

    body{
        font-size:15px;
    }

    .section-title h2{
        font-size:28px;
    }

    .section-title p{
        font-size:14px;
    }

    /* Hero */

    #hero{
        height:75vh;
    }

    .hero-slide{
        height:75vh;
    }

    .hero-content{
        padding-top:140px;
    }

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

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

    /* Search */

    .search-box{
        margin-top:-40px;
    }

    .search-wrapper{
        padding:15px;
    }

    .search-wrapper input,
    .search-wrapper select,
    .search-wrapper button{
        height:50px;
    }

    /* Services */

    .service-card{
        padding:25px;
    }

    .service-card h4{
        font-size:18px;
    }

    /* Destination */

    .destination-card img{
        height:260px;
    }

    .destination-card h4{
        font-size:22px;
        left:15px;
        bottom:15px;
    }

    /* Why Us */

    #why-us h2{
        font-size:30px;
    }

    #why-us ul li{
        font-size:16px;
    }

    /* Stats */

    #stats{
        padding:70px 0;
    }

    #stats h2{
        font-size:38px;
    }

    /* Testimonials */

    .testimonial-card{
        padding:25px;
    }

    /* News */

    .news-card img{
        height:220px;
    }

    .news-card h4{
        font-size:18px;
        padding:20px;
    }

    /* CTA */

    #cta{
        padding:80px 0;
    }

    #cta h2{
        font-size:30px;
    }

    /* Footer */

    footer{
        text-align:center;
        padding:60px 0;
    }

    footer .col-lg-4{
        margin-bottom:30px;
    }

}

/* ==========================================
   MOBILE SMALL
   <= 420px
========================================== */

@media (max-width:420px){

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

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

    .section-title h2{
        font-size:24px;
    }

    .destination-card img{
        height:220px;
    }

    .service-card{
        padding:20px;
    }

    .service-card i{
        font-size:36px;
    }

    #stats h2{
        font-size:32px;
    }

    #cta h2{
        font-size:26px;
    }

}

/* ==========================================
   UTILITIES RESPONSIVE
========================================== */

@media (max-width:991px){

    .text-center-md{
        text-align:center;
    }

    .mb-md-30{
        margin-bottom:30px;
    }

}

@media (max-width:576px){

    .hide-mobile{
        display:none !important;
    }

    .w-mobile-100{
        width:100% !important;
    }

}
@media(max-width:768px){

    .banner-content h1{

        font-size:40px;

    }

    .page-banner{

        height:320px;

    }

}
@media(max-width:768px){

    .place-card img{

        height:240px;

    }

    .place-content h4{

        font-size:20px;

    }

}

@media(max-width:576px){

    .place-card img{

        height:220px;

    }

}
@media(max-width:768px){

    .hours-box{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .map-wrapper iframe{

        min-height:350px;

    }

}
@media(max-width:991px){

    .contact-form{

        margin-bottom:30px;

    }

    .contact-cta h2{

        font-size:42px;

    }

}

@media(max-width:768px){

    .contact-banner{

        height:320px;
    }

    .contact-banner h1{

        font-size:42px;
    }

    .contact-form{

        padding:25px;
    }

    .info-card{

        padding:30px 20px;
    }

}

@media(max-width:576px){

    .contact-banner h1{

        font-size:34px;
    }

    .contact-cta h2{

        font-size:30px;
    }

    .contact-social{

        justify-content:center;
    }

    .faq-question{

        padding:20px;
        font-size:16px;
    }

}
@media(max-width:768px){

    .hotel-footer{

        flex-direction:column;

        gap:15px;

    }

    .resort-card img{

        height:280px;

    }

}

@media(max-width:576px){

    .search-box-hotel{

        padding:20px;

    }

    .category-card,
    .benefit-box{

        padding:25px;

    }

}
@media(max-width:768px){

    .article-title{

        font-size:34px;
    }

    .article-meta{

        gap:15px;
    }

    .author-wrapper{

        flex-direction:column;

        text-align:center;
    }

    #article-gallery img{

        height:220px;
    }

}

@media(max-width:576px){

    .article-title{

        font-size:28px;
    }

    .article-content{

        font-size:16px;
    }

}
@media(max-width:991px){

    .footer-bottom-info{

        flex-direction:column;

    }

    .footer-awards{

        flex-direction:column;
    }

}

@media(max-width:768px){

    .footer-app .app-area{

        flex-direction:column;

        align-items:flex-start;
    }

    .hotline{

        font-size:30px;
    }

}