header .mobile-menu,
header .monile--btn {
    display: none;
}

@media (max-width: 991px) {

    header.main-header nav.navbar .top--bar ul.desktop-menu-main,
    header.main-header nav.navbar .top--bar ul.desktop-menu-measure,
    header.main-header nav.navbar .top--bar ul.desktop-menu-main > li.nav-menu-more,
    header.main-header nav.navbar .top--bar .desk-right {
        display: none !important;
    }

    header .mobile-menu,
    header .monile--btn {
        display: block;
    }

    header .mobile-menu {
        position: fixed;
        top: 0;
        right: -350px;
        left: auto;
        width: 350px;
        height: 100vh;
        background: var(--text-color);
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        z-index: 9999;
        display: block;
        border: none;
        border-radius: 0;
        padding: 0;
    }

    header .mobile-menu.open {
        display: block;
        right: 0;
    }

    header .mobile-menu .mobile--cl {
        padding: 10px;
        text-align: end;
        border-bottom: 1px solid var(--tertiary-text);
        position: sticky;
        width: calc(350px - 40px);
        background: var(--text-color);
        margin: 20px 20px 0 20px;

    }

    header .mobile-menu .mobile--cl button.close-btn {
        background: var(--content-color);
        padding: 5px;
    }

    header .mobile-menu .mobile--cl button.close-btn svg path {
        stroke: var(--tertiary-text);
    }


    header .mobile-menu ul.nav-links-mobile {
        display: flex;
        flex-direction: column;

        overflow-y: auto;
        height: calc(100vh - 110px);
        padding: 20px;
    }

    header .mobile-menu ul.nav-links-mobile li {
        position: relative;
        font-size: 16px;
        color: var(--tertiary-text);
        font-weight: 400;
        padding: 10px;

    }

    header .mobile-menu ul.nav-links-mobile li a {
        color: var(--tertiary-text);

    }

    header .mobile-menu .mob-btn {
        width: 350px;
        text-align: center;
        background: var(--tertiary-text);
        position: sticky;
        bottom: 0;
        left: 0;
    }

    section.accommodation .accommodation-wrapper .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    section.accommodation .accommodation-wrapper .services-grid .service-card:hover .service-image .service-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    section.accommodation-details .acco-offer ul.facilities-list,
    section.content-wrapper section.facilities-list-item ul.facilities-list {
        grid-template-columns: repeat(2, 1fr);
    }

    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+1),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+2),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+3),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+1),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+2),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+3) {
        background: inherit;
    }

    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(4n+1),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(4n+2),

    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(4n+1),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(4n+2) {
        background: var(--light-bg);
    }

    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-card,
    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-card:nth-child(even) {
        flex-direction: column;
    }

    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-card .wedding-image,
    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-card .wedding-content.main-caption-text {
        width: 100%
    }

    section.content-wrapper section.offer-container.offer-sub .offer-container .offer-carousel .owl-stage-outer .owl-stage .item {
        flex-direction: column;
    }

    section.content-wrapper section.offer-container.offer-sub .offer-container .offer-carousel .owl-stage-outer .owl-stage .item .offer-card-image {
        width: 100%;
    }

    section.content-wrapper section.offer-container.offer-sub .offer-container .offer-carousel .owl-stage-outer .owl-stage .item .caption {
        width: 90%;
        margin: auto;
        margin-top: -5%;
        position: relative;
        transform: inherit;
    }

    section.content-wrapper section.wedding-section .wedding-container {
        flex-direction: column;
    }

    section.content-wrapper section.wedding-section .wedding-container .wedding-content {
        padding: 20px;
    }

    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-content {
        padding: 20px 0 0 0;
    }

    section.content-wrapper section.wedding-section .wedding-container .wedding-image,
    section.content-wrapper section.wedding-section .wedding-container .wedding-content {
        width: 100%;
        margin: 0;
    }

    section.content-wrapper section.dining-section .dining-container {
        flex-direction: column;
    }

    section.content-wrapper section.dining-section .dining-container .dining-image,
    section.content-wrapper section.dining-section .dining-container .dining-content {
        width: 100%;
    }

    section.content-wrapper section.dining-section .dining-container .dining-content {
        padding: 20px 0 0 0;
    }

    section.content-wrapper section.offer-section .offer-container {
        flex-direction: column;
    }

    section.content-wrapper section.offer-section .offer-container .offer-content {
        padding: 20px;
    }

    section.content-wrapper section.offer-section .offer-container .offer-image,
    section.content-wrapper section.offer-section .offer-container .offer-content {
        width: 100%;
        margin: 0;
    }

    section.content-wrapper section.offer-container.offer-sub .offer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    section.room-details-section .sub--all .main-slider,
    section.room-details-section .sub--all .sub--content {
        width: 100%;
    }

    section.room-details-section .sub--all .main-slider {
        padding: 0 0 20px 0;
    }
}

@media (max-width: 767px) {

    section.accommodation.acc-pg .accommodation-wrapper .services-grid .service-card .service-image .main-card a img.card-image,
    section.content-wrapper section.dining-section .dining-container .dining-image .main-slider .slider-home .slider-carousel .owl-item .item img,
    section.accommodation-details .a-room-dec .main-slider.slider-all-page .slider-carousel .owl-item .item img,
    section.gallery-container .gallery-wrapper #lg-gallery .gallery-col img.img-fluid,
    section.content-wrapper section.wedding-section.wedding-sub .wedding-container .wedding-card .wedding-image img.card-image,
    section.content-wrapper section.wedding-section .wedding-container .wedding-image img.card-image,
    section.content-wrapper section.dining-section .dining-container .dining-image img.card-image,
    section.content-wrapper section.dining-section .dining-container .dining-image img.card-image,
    section.content-wrapper section.offer-section .offer-container .offer-image img.card-image,
    section.content-wrapper section.offer-container.offer-sub .offer-container .offer-card .offer-card-image a img.card-image,
    section.room-details-section .sub--all .main-slider .slider-home .slider-carousel .owl-item .item img {
        height: 250px;
        min-height: 250px;
    }

    section.accommodation-details .acco-offer ul.facilities-list,
    section.content-wrapper section.facilities-list-item ul.facilities-list {
        grid-template-columns: repeat(1, 1fr);
    }

    section.content-wrapper section.offer-container.offer-sub .offer-container {
        grid-template-columns: repeat(1, 1fr);
    }

    section.accommodation .accommodation-wrapper .services-grid,
    section.accommodation.acc-pg .accommodation-wrapper .services-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+1),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+2),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(6n+3),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+1),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+2),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(6n+3),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(4n+1),
    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(4n+2),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(4n+1),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(4n+2) {
        background-color: inherit;
    }

    section.accommodation-details .acco-offer ul.facilities-list li.facility-item:nth-child(odd),
    section.content-wrapper section.facilities-list-item ul.facilities-list li.facility-item:nth-child(odd) {
        background: var(--light-bg);
    }



    .main-slider .slider-home .slider-carousel .owl-item .item img {
        height: 350px;
    }

}

@media (max-width: 375px) {
    header .mobile-menu {
        right: -100%;
        width: 100%;
    }

    header .mobile-menu .mobile--cl {
        width: calc(100% - 40px);
    }

    header .mobile-menu .mob-btn {
        width: 100%;
    }
}