@media only screen and (max-width: 1200px) {
    header {
        .primary-menu {
            gap: 10px;
        }
        .primary-btn a{
            padding: 12px 22px;
            font-size: 16px;
        }
    }

    .hero-section {
        .banner-title {
            font-size: 75px;
        }
    }
    .hero-section {
        padding: 400px 0px 100px;
    }
    .cta-section {
        h3 {
            font-size: 60px;
        }
    }
}

@media only screen and (max-width: 992px) {
    header {

        .logo {
            width: 50%;
            img{
                width: 180px;
            }
        }

        .primary-menu {
            display: block;
            flex-direction: column;
            padding: 150px 20px;
            position: fixed;
            background: #0a0a0a;
            width: 100%;
            max-width: 300px;
            right: -100%;
            top: 0;
            transition: all .4s ease-in;
            z-index: 1;
            height: 100vh;
            transition: .5s;

            ul {
                flex-direction: column;
                gap: 5px
            }

            nav {
                text-align: center;

                a {
                    display: block;
                    padding: 10px 0;
                    font-size: 18px
                }

                ul a {
                    color: #f7f7f7
                }
            }
        }

        .primary-menu.active {
            right: 0%;
            z-index: 8;
            text-align: center
        }

        .menu-icon {
            display: block;
            border: none;
            background: #fff0;
            width: 40px;
            z-index: 9;
            font-size: 32px;
            color: #fff;
        }

        .fa-bars {
            color: #ffffff
        }

        .primary-btn {
            text-align: center;
            margin-top: 20px
        }

        .social-icon {
            margin-top: 30px;

            ul {
                display: flex;
                flex-direction: row;
                justify-content: center;
                font-size: 22px;
                gap: 20px
            }

            li a {
                color: #fff
            }
        }
    }

    .hero-section {
        padding: 290px 0px 75px;

        .banner-title {
            font-size: 66px;
        }
        .hero-content {
            p {
                margin-top: 30px;
                width: 50%;
            }
        }
    }

    .about-section {
        .main-about {
            flex-direction: column;
            .about-content {
                width: 100%;
            }
        }
    }

    .book-page {
        .book-form {
            width: 100%;
            margin: 0px auto;
        }
    }

    .contact-page {
         .contact {
            .container {
                gap: 40px;
            }
            .contact-form{
                padding: 25px;
            }
        }
    }
}

@media only screen and (max-width: 768px) {

    h1 {
        font-size: 42px;
    }

    h2{
        font-size: 32px;
    }
    h3 {
        font-size: 36px;
    }
    .section-padding {
        padding: 40px 0;
    }

    .premium-services {
        .main-services {
            margin-top: 20px;
        }
    }

    .about-section {
         .main-about {
            .about-img {
                display: none;
            }
        }
    }

    .cta-section {
        h3 {
            font-size: 44px;
        }
    }
    .contact-page {
        .contact {
            .container {
                flex-direction: column;
            }
            .contact-content{
                width: 100%;
                gap: 0;
            }
            .contact-form{
                width: 100%;
            }
        }
    }
    .room-page {
        .room-details {
            .main-room {
                flex-direction: column;
            }
            .content-box{
                width: 100%;
            }
        }
        .room-details:nth-child(2n) {
            .main-room {
                flex-direction: column;
            }
    }

}
}

@media only screen and (max-width: 600px) {
    h1 {
        font-size: 36px;
    }
    h3 {
        font-size: 28px;
    }
    .inner-banner{
        padding: 160px 0 70px;
    }
    .hero-section {
        padding: 240px 0px 75px;
        .social-media {
            display: none;
        }
        .hero-content {
            .box {
                flex-direction: column;
                align-items: self-start;
                gap: 20px;
            }
            p {
                width: 100%;
            }
        }
        .banner-title {
            font-size: 50px;
        }
    }
    .cta-section {
        h3 {
            font-size: 30px;
        }
        .primary-btn {
            margin-top: 25px;
        }
    }
    .about-section {
         .main-about {
            .about-img {
                width: 100%;
                display: block;
            }
        }
    }
    .rooms-section {
        .scondary-btn {
            text-align: center;
            margin-top: 25px;
        }
    }

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

    .room-page {
         .room-details {
            .img-box {
                width: 100%;
            }
        }
    }
}

@media only screen and (max-width: 355px) {
    p{
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 28px;
    }
    header {
        .logo {
            img {
                width: 120px;
            }
        }
    }
    .hero-section {
        padding: 150px 0px 50px;
        .banner-title {
            font-size: 42px;
        }
    }
    .about-section {
        .main-about {
            gap: 20px;
        }
    }
    .cta-section {
        h3 {
            font-size: 26px;
        }
    }
}