@media only screen and (max-width:1200px) {
    header {
        li {
            a {
                font-size: 16px;
                padding: 5px 12px
            }
        }
    }

    .hero-section {
        .banner-title {
            font-size: 90px
        }
    }
}

@media only screen and (max-width:1200px) {
    header {
         .logo {
            img {
                width: 230px;
            }
        }
    }
}
@media only screen and (max-width:992px) {

    .main-blog-detail {
        flex-direction: column;
        .blog-detail-content {
            width: 100%;
        }
    }
    .blog-sidebar {
        width: 100%;
    }

    h3 {
        font-size: 50px
    }

    header {
        nav ul {
            display: none
        }
    }

    .side-nav {
        display: block
    }

    .side-details {
        display: none
    }

    .hero-section {
        .banner-title {
            font-size: 60px
        }
    }

    .popular-view {
        .section-title {
            width: 50%;
            font-size: 50px
        }

        .popular-content {
            p {
                width: 45%
            }
        }

        .main-popular {
            margin-top: 70px;
            gap: 30px;

            .content-box {
                width: 78%;
                padding: 10px;
                margin: 10px 24px
            }
        }
    }

    .about-section {
        .about-content {
            margin-top: 30px;
            flex-direction: column;
            gap: 20px;
            align-items: self-start;

            .box-content {
                width: 100%
            }
        }

        .about-content:nth-last-child(1) {
            .img-box {
                display: none
            }
        }
    }

    .room-section {
        .rooms-content {
            p {
                width: 45%
            }
        }

        .main-rooms {
            .img-box {
                img {
                    height: 450px
                }
            }
        }
    }

    .contact {
        .contact-details {
            .main-details {
                width: 100%
            }
        }
    }

}

@media only screen and (max-width:768px) {
    .hero-section {
        padding: 200px 0 150px;

        .banner-tagline {
            font-size: 44px
        }

        .banner-title {
            font-size: 48px
        }
    }

    .popular-view {
        .main-popular {
            flex-wrap: wrap;

            .box {
                width: 46%
            }
        }
    }

    .about-section {
        .about-content {
            .img-box {
                width: 100%
            }
        }
    }

    .room-section {
        .rooms-content {
            .section-title {
                width: 50%;
                font-size: 48px
            }
        }
    }

    .why-choose {
        .main-choose {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
        }
    }

    .contact {
        .main-contact {
            flex-direction: column-reverse
        }

        .contact-form {
            width: 100%
        }

        .contact-details {
            width: 100%
        }
    }
}

@media only screen and (max-width:600px) {
    .blog-page {
        .blog-grid {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            grid-gap: 20px;
        }
        .blog-item{
            padding: 10px;
        }
    }
    .main-blog-detail {
         .blog-detail-content {
            .blog-title {
                font-size: 26px;
            }
        }
    }
    .blog-sidebar {
        .item {
            background-color: #fff;
            padding: 10px 10px 10px;
            box-shadow: 0 0 7px #34343436;
            flex-direction: column;
            align-items: self-start;
        }
    }
    h3 {
        font-size: 36px
    }

    .hero-section {
        .banner-tagline {
            font-size: 32px
        }
    }

    .hero-section {
        .banner-title {
            font-size: 36px
        }
    }

    .popular-view {
        .popular-content {
            flex-direction: column
        }
    }

    .popular-view {
        .section-title {
            width: 100%;
            font-size: 36px
        }

        .popular-content {
            p {
                margin-top: 10px;
                width: 100%
            }
        }

        .main-popular {
            .box {
                width: 100%
            }

            .box:nth-child(2) {
                transform: translateY(0)
            }
        }
    }

    .room-section {
        .rooms-content {
            flex-direction: column;

            .section-title {
                width: 100%;
                font-size: 36px
            }

            p {
                width: 100%
            }
        }

        .main-rooms {
            .content-box {
                right: 0;

                .prt-featured-content {
                    width: 90%;
                    padding: 50px 20px 15px
                }
            }
        }
    }
}

@media only screen and (max-width:450px) {
    .section-padding {
        padding: 30px 0
    }

    h1 {
        font-size: 28px
    }

    h2 {
        font-size: 26px
    }

    .inner-banner {
        padding: 120px 0 50px
    }

    header {
        .logo {
            img {
                width: 200px
            }
        }
    }

    h3 {
        font-size: 28px
    }

    h4 {
        font-size: 20px
    }

    .hero-section {
        .banner-title {
            font-size: 28px
        }

        .banner-tagline {
            font-size: 28px
        }
    }

    .popular-view {
        padding: 30px 0;

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

        .main-popular {
            margin-top: 30px
        }
    }

    .about-section {
        padding: 30px 0
    }

    .room-section {
        padding: 30px 0;

        .rooms-content {
            .section-title {
                font-size: 28px
            }
        }

        .main-rooms {
            .content-box {
                .prt-featured-content {
                    p {
                        font-size: 14px
                    }
                }
            }
        }
    }

    .why-choose {
        padding: 30px 0;

        .main-choose {
            margin-top: 30px
        }
    }

    .testimonial-section {
        padding: 30px 0;

        .main-testimonial {
            .item {
                padding: 20px 15px;
                padding-right: 15px;

                p {
                    font-size: 15px
                }

                .author {
                    font-size: 16px
                }
            }
        }
    }

    footer {
        .footer-main {
            justify-content: flex-start
        }
    }

    form {
        gap: 10px;

        .box {
            gap: 10px;
            flex-direction: column
        }
    }
}