/* === 01. Tablet Responsive === */

@media screen and (max-width: 991.98px) {
    h1{
        font-size: 2.25rem;
    }
    h2{
        font-size: 1.75rem;
    }
    h3{
        font-size: 1.5rem;
    }
    h6{
        font-size: 0.938rem;
    }
    .nav-btn{
        display: block;
    }
    .navbar .nav-link-container{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .navbar .logo-container{
        width: 25%;
    }
    .navbar .logo-container img{
        width: 100%;
    }
    .banner-home-content{
        flex-direction: column;
    }
    .banner-home-title-container{
        width: 100%;
    }
    .banner-home-title{
        font-size: 3.5rem;
    }
    .banner-home-subtitle{
        font-size: 2.25rem;
    }
    .banner-home-cta-container{
        width: 100%;
    }
    .about-title-container.brand-story-content{
        width: 100%;
        padding: 0px;
        height: 100%;
    }
    .about-quote-container.brand-story-quote{
        width: 100%;
        padding: 0px;
        height: auto;
    }
    .about-philosophy-container{
        grid-template-columns: 1fr;
    }
    .about-philosophy-content{
        padding: 2em 0em 0em 0em;
    }
    .rooms-tab-container{
        max-width: 240px;
        min-width: 240px;
    }
    .room-detail-container{
        padding: 1em 0em 0em 0em;
    }
    .room-image img{
        height: 400px;
    }
    .room-info-container{
        width: 100%;
    }
    .room-detail-info-container{
        width: 100%;
        padding: 2em 0em 0em 0em;
    }
    .booking-cta-container{
        max-width: 80%;
    }
    .offering--featured{
        background-size: 220% auto;
    }
    .offering--featured:hover{
        background-size: 230% auto;
    }
    .offering-discount-title{
        font-size: 2.25rem;
    }
    .rating-counter,
    .rating-suffix,
    .rating-detail{
        font-size: 3.5rem;
    }
    .gallery-container.gallery-container__wide-container{
        width: 100%;
    }
    .gallery-container.gallery-container__narrow-container{
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
    .faq-content-container{
        padding: 0em 0em 0em 1em;
    }
    .faq-info-content-container{
        width: 100%;
        padding: 0em 0em 2em 0em;
    }
    .card-faq-info{
        width: 100%;
    }
    .single-post-container{
        width: 100%;
    }
    .notfound-content-description{
        width: 70%;
    }
    .footer-content-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-content-grid > :first-child {
        grid-column: 1 / -1;
    }
    .footer-title-container{
        padding: 0px;
    }
    .footer-quick-links-container{
        padding: 0px;
    }
    .footer-information-container{
        padding: 0px;
    }
}

/* === 02. Mobile Responsive === */

@media screen and (max-width: 767.98px) {
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.75rem;
    }
    h3{
        font-size: 1.5rem;
    }
    h6{
        font-size: 0.938rem;
    }
    .navbar .logo-container{
        width: 45%;
    }
    .banner-home-title{
        font-size: 2.5rem;
    }
    .banner-home-subtitle{
        font-size: 2rem;
    }
    .banner-inner-container{
        width: 100%;
    }
    .banner-inner-title{
        width: 100%;
    }
    .banner-inner-subtitle{
        width: 100%;
    }
    .tab-nav .room-tab-arrow{
        display: none;
    }
    .about-value-container{
        grid-template-columns: 1fr;
    }
    .about-value-content{
        padding: 0em 0em 2em 0em;
    }
    .rooms-tab-container{
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding: 0px 0px 20px 0px;
    }
    .room-image img{
        height: 200px;
    }
    .booking-cta-container{
        max-width: 100%;
    }
    .offering-container,
    .offering-container:hover,
    .offering--featured,
    .offering--featured:hover {
        background-size: 200% auto;
    }
    .offering-discount-title{
        font-size: 2rem;
    }
    .rating-counter,
    .rating-suffix,
    .rating-detail{
        font-size: 2.5rem;
    }
    .gallery-grid-container{
        grid-template-columns: 1fr
    }
    .gallery-container.gallery-container__narrow-container{
        grid-template-columns: 1fr
    }
    .gallery-image.gallery-image-tall img,
    .gallery-image.gallery-image-half-tall img,
    .gallery-image.gallery-image-short img {
        height: 300px;
    }
    .gallery-image.gallery-image-short-wide img{
        width: 100%;
    }
    .faq-content-container{
        padding: 0em 0em 2em 0em;
    }
    .testimonial-content{
        padding: 0px;
    }
    .footer-content-grid {
        grid-template-columns: 1fr;
    }
    .footer-content-grid > :first-child {
        grid-column: auto;
    }
    #newsletter-form{
        flex-direction: column;
    }
    #newsletter-form .input-wrapper{
        width: 100%;
    }
    #newsletter-form .btn{
        width: 100%;
    }
    .notfound-content-description{
        width: 100%;
    }
    .contact-form-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .footer-copyright-container{
        flex-direction: column;
        justify-content: center;
    }
}

/* === 03. Mobile Spacing Responsive === */

@media screen and (min-width: 767px){

    /* Flex spacing (gap) */

    .gspace-md-0 { 
        gap: 0px 0px; 
    }
    .gspace-md-1 { 
        gap: 10px 10px; 
    }
    .gspace-md-2 { 
        gap: 20px 20px; 
    }
    .gspace-md-3 { 
        gap: 30px 30px; 
    }
    .gspace-md-4 { 
        gap: 40px 40px; 
    }
    .gspace-md-5 { 
        gap: 50px 50px; 
    }
    .gspace-md-100 { 
        gap: 100px 100px; 
    }

    /* Grid spacing (column-gap) */

    .gspace-x-md-0 { 
        column-gap: 0px; 
    }
    .gspace-x-md-0 { 
        column-gap: 0px; 
    }
    .gspace-x-md-1 { 
        column-gap: 10px; 
    }
    .gspace-x-md-2 { 
        column-gap: 20px; 
    }
    .gspace-x-md-3 { 
        column-gap: 30px; 
    }
    .gspace-x-md-4 { 
        column-gap: 40px; 
    }
    .gspace-x-md-5 { 
        column-gap: 50px; 
    }
    .gspace-x-md-100 { 
        column-gap: 100px; 
    }

    /* Grid spacing (row-gap) */

    .gspace-y-md-0 { 
        row-gap: 0px; 
    }
    .gspace-y-md-1 { 
        row-gap: 10px; 
    }
    .gspace-y-md-2 { 
        row-gap: 20px; 
    }
    .gspace-y-md-3 { 
        row-gap: 30px; 
    }
    .gspace-y-md-4 { 
        row-gap: 40px; 
    }
    .gspace-y-md-5 { 
        row-gap: 50px; 
    }
    .gspace-y-md-100 { 
        row-gap: 100px; 
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-md-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-md-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-md-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-md-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-md-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-md-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-md-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-md-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-md-2 { 
        --bs-gutter-x: 20px; 
    }
    .grid-spacer-x-md-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-md-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-spacer-x-md-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-spacer-x-md-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-md-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-md-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-md-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-md-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-md-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-md-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-y-md-100 { 
        --bs-gutter-y: 100px; 
    }
}

/* === 04. Tablet Spacing Responsive === */

@media screen and (min-width: 1025px){
    /* Flex spacing (gap) */
    .gspace-lg-0 { 
        gap: 0px 0px; 
    }
    .gspace-lg-1 { 
        gap: 10px 10px; 
    }
    .gspace-lg-2 { 
        gap: 20px 20px; 
    }
    .gspace-lg-3 { 
        gap: 30px 30px; 
    }
    .gspace-lg-4 { 
        gap: 40px 40px; 
    }
    .gspace-lg-5 { 
        gap: 50px 50px; 
    }
    .gspace-lg-100{
        gap: 100px 100px;
    }

    /* Grid spacing (column-gap) */

    .gspace-x-lg-0 { 
        column-gap: 0px;
    }
    .gspace-x-lg-1 { 
        column-gap: 10px; 
    }
    .gspace-x-lg-2 {
         column-gap: 20px; 
    }
    .gspace-x-lg-3 { 
        column-gap: 30px; 
    }
    .gspace-x-lg-4 { 
        column-gap: 40px; 
    }
    .gspace-x-lg-5 { 
        column-gap: 50px; 
    }
    .gspace-x-lg-100{
        column-gap: 100px;
    }

    /* Grid spacing (row-gap) */

    .gspace-y-lg-0 { 
        row-gap: 0px; 
    }
    .gspace-y-lg-1 { 
        row-gap: 10px; 
    }
    .gspace-y-lg-2 { 
        row-gap: 20px; 
    }
    .gspace-y-lg-3 { 
        row-gap: 30px; 
    }
    .gspace-y-lg-4 { 
        row-gap: 40px; 
    }
    .gspace-y-lg-5 { 
        row-gap: 50px; 
    }
    .gspace-y-lg-100 {
        row-gap: 100px;
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-lg-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-lg-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-lg-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-lg-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-lg-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-lg-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-lg-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-lg-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-lg-2 { 
        --bs-gutter-x: 20px;
    }
    .grid-spacer-x-lg-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-lg-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-spacer-x-lg-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-spacer-x-lg-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-lg-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-lg-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-lg-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-lg-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-lg-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-y-lg-100 { 
        --bs-gutter-y: 100px; 
    }
}