/**
* Template Name: Hoteligo - v1.0
* Template URL: https://hotelligo.themenix.com
* Author: Themenix.com
*/

@media (max-width: 1399.98px) {
    /*--------------------------------------------------------------
    # HERO
    --------------------------------------------------------------*/
    /* Hero Slider */
    .hero .hero-slider {
        margin-left: calc(75px + 0.75rem);
    }

    .hero .hero-caption {
        width: 45%;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # SPACE
    --------------------------------------------------------------*/
    .pd-left-right-95px {
        padding-left: 35px;
        padding-right: 35px;
    }

    .pd-left-95px {
        padding-left: 35px;
    }

    .pd-right-95px {
        padding-right: 35px;
    }
    /*--------------------------------------------------------------*/
}

@media (max-width: 1199.98px) {
    /*--------------------------------------------------------------
    # BUTTON
    --------------------------------------------------------------*/
    .btn.btn-expand:hover,
    .btn.btn-expand:focus {
        color: var(--ht-color-content);
    }

        .btn.btn-expand:hover i,
        .btn.btn-expand:focus i {
            color: var(--ht-color-content);
            border-color: var(--ht-color-content);
        }

        .btn.btn-expand:hover:before,
        .btn.btn-expand:focus:before {
            color: var(--ht-color-content);
            border-color: var(--ht-color-content);
        }

    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # BACHGROUND
    --------------------------------------------------------------*/
    .bg-image-wrapper {
        background-attachment: scroll !important;
        background-position: center !important;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADER
    --------------------------------------------------------------*/
    /* Mobile Nav */
    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 400px;
        bottom: 0;
        transition: 0.3s;
        z-index: 9997;
    }

        .navbar ul {
            position: absolute;
            inset: 0;
            padding: 64px 0 0 0;
            margin: 0;
            background: rgba(var(--ht-color-dark-rgb), 0.95);
            overflow-y: auto;
            transition: 0.3s ease-in-out;
            z-index: 9998;
        }

            .navbar ul ul {
                background: rgba(var(--ht-color-dark-rgb), 0);
            }

        /* Links */
        .navbar a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px;
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            transition: 0.3s;
            line-height: 24px;
        }

        .navbar .active,
        .navbar li.active > a {
            color: var(--ht-color-primary);
        }

        .navbar .has-icon a {
            justify-content: start;
        }

        .navbar ul ul a,
        .navbar ul ul a:focus {
            font-weight: normal;
            padding: 10px 30px !important;
        }

        /* Indicator icon */
        .navbar a i.dropdown-indicator {
            line-height: 0;
            display: inline-flex;
            height: 40px;
            width: 40px;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 1.25rem;
            margin-bottom: 0;
            font-size: 1.15rem;
        }

            .navbar a i.dropdown-indicator:before {
                content: "\F3DE";
            }

        .navbar a.active i.dropdown-indicator:before {
            content: "\F36C";
        }

        .navbar ul li.has-icon a i:not(.dropdown-indicator) {
            line-height: 0;
            margin-right: 0.4rem;
            margin-bottom: 0;
            font-size: 1.15rem;
        }

        /* Dropdown box */
        .navbar .dropdown ul,
        .navbar .dropdown .dropdown ul {
            position: static;
            display: none;
            padding: 0;
            margin-left: 30px;
        }

            .navbar .dropdown ul li a,
            .navbar .dropdown .dropdown ul li a {
                font-size: 1.25rem;
                padding: 12px 30px;
            }

        .navbar .dropdown > .dropdown-active,
        .navbar .dropdown .dropdown > .dropdown-active {
            display: block;
        }


    /* Show - Hide Mobile Nav*/
    .mobile-nav-toggle.mobile-nav-show {
        color: var(--ht-color-dark);
        font-size: 1.65rem;
        cursor: pointer;
        line-height: 1;
        transition: 0.5s;
        z-index: 9999;
        margin-left: 1.75rem;
    }

    .mobile-nav-toggle.mobile-nav-hide {
        color: #fff;
        font-size: 1.25rem;
        cursor: pointer;
        line-height: 0;
        transition: 0.5s;
        position: absolute;
        right: 2rem;
        top: 2rem;
        z-index: 9999;
    }

    /* Mobile menu active */
    .mobile-nav-active {
        overflow: hidden;
    }

        .mobile-nav-active .navbar {
            right: 0;
            padding: 0;
        }

            .mobile-nav-active .navbar:before {
                content: "";
                position: fixed;
                inset: 0;
                background: rgba(var(--ht-color-dark-rgb), 0.85);
                z-index: 9996;
            }

    /* Header Sticked */
    .header .logo-nav-box .logo img,
    .header.sticked.showed .logo-nav-box .logo img {
        height: unset;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .header.sticked.showed .contact-link a,
    .header.sticked.showed .reservation-link a {
        padding: 35px 0 35px 0;
    }

    .header.sticked.showed + main {
        padding-top: 90px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HERO
    --------------------------------------------------------------*/
    /* Hero Slider */
    .hero .hero-slider {
        margin-left: 0;
    }

        .hero .hero-slider .swiper .swiper-slide {
            height: calc(100vh - 180px);
        }

    /* Hero Caption */
    .hero .hero-caption {
        width: 45%;
        bottom: 195px;
    }

        .hero .hero-caption .hero-title {
            font-size: 3.25rem;
        }

    /* Hero Check Room */
    .hero .check-room {
        right: -1px;
    }

    /* Hero Fullwidth */
    .hero.hero-fullwidth .hero-caption {
        /* width: 50%;*/
        bottom: unset;
    }

    .hero.hero-fullwidth .check-room {
        right: 0;
    }

        .hero.hero-fullwidth .check-room .check-room-container {
            border: 0;
        }


    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADING
    --------------------------------------------------------------*/
    .heading .title.title-lg {
        font-size: 4.45rem !important;
    }

    .heading .title.title-md {
        font-size: 3.45rem !important;
    }

    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADING PAGE
    --------------------------------------------------------------*/
    .heading-page-swiper-box .heading-page-swiper .swiper-pagination {
        left: 50px;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # INFO BOX
    --------------------------------------------------------------*/
    .info-box .info-box-container .info-box-content.image-left .content,
    .info-box .info-box-container .info-box-content.image-right .content {
        width: 450px;
    }

    .info-box .info-box-container .info-box-content .image {
        max-width: calc(100% - 150px);
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ROOMS HOME BOX
    --------------------------------------------------------------*/
    .room-home-box .info-box-container .info-box-content.image-right .content {
        margin-right: -360px;
        margin-top: 300px;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ROOMS BOX
    --------------------------------------------------------------*/
    .room-box .room-list .room-item .info-box-container .info-box-content.image-right .content {
        margin-right: -360px;
        margin-top: 300px;
    }

    .room-box .room-list .room-item .info-box-container .info-box-content.image-left .content {
        margin-left: -360px;
        margin-top: 300px;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # DETAIL ROOM
    --------------------------------------------------------------*/
    .heading-page-box .title-page .info-box-content {
        max-width: 75%;
    }

    .detail-room-box .detail-room {
        align-items: unset;
        flex-direction: column;
    }

        .detail-room-box .detail-room .detail-room-info {
            width: unset;
            margin-right: auto;
            padding-right: 0;
        }

        .detail-room-box .detail-room .detail-room-book {
            width: auto;
            position: unset;
        }

            .detail-room-box .detail-room .detail-room-book .booking-room {
                margin-top: 4rem;
            }

                .detail-room-box .detail-room .detail-room-book .booking-room .button-check .btn {
                    width: auto;
                }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # RESERVATION
    --------------------------------------------------------------*/
    .reservation-box .reservation-main .reservation-main-container {
        display: block;
        align-self: unset;
    }

        .reservation-box .reservation-main .reservation-main-container .reservation-left,
        .reservation-box .reservation-main .reservation-main-container .reservation-right,
        .reservation-box.customer-information .reservation-main .reservation-main-container .reservation-left,
        .reservation-box.customer-information .reservation-main .reservation-main-container .reservation-right {
            width: auto;
            margin-bottom: 2rem;
        }

        .reservation-box .reservation-main .reservation-main-container .reservation-right {
            padding-left: 0;
        }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # TOURS
    --------------------------------------------------------------*/
    .tour-list .tour-item .tour-item-content .content {
        margin-top: -100px;
        position: relative;
        background: #ffff;
        margin-left: 25px;
        margin-right: 50px;
        border-radius: 0.55rem;
        padding: 35px;
        transition: 0.3s ease-in-out;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # SPA
    --------------------------------------------------------------*/

    .spa-wellnes-box .spa-wellnes .spa-wellnes-info {
        width: 70%;
    }

    .spa-wellnes-box .spa-wellnes .spa-wellnes-contact {
        width: 30%;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # RESTAURANT & BAR
    --------------------------------------------------------------*/

    .restaurant-box .restaurant-content .restaurant-info {
        width: 70%;
    }

    .restaurant-box .restaurant-content .restaurant-contact {
        width: 30%;
    }

    .restaurant-box .info-box-container .info-box-content .image {
        max-width: 100%;
    }

    .restaurant-box .info-box-container .info-box-content.image-left .image {
        padding-right: 0;
        margin-right: 50px;
    }

    .menu-content .info-box-container .info-box-content.image-right .image {
        padding-left: 50px;
    }

    .restaurant-box .info-box-container .info-box-content.image-left .content,
    .restaurant-box .info-box-container .info-box-content.image-right .content {
        width: auto;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # TESTIMONIAL
    --------------------------------------------------------------*/
    .testimonial-list .testimonial-list-container .testimonial-list-swiper:before {
        right: 35px;
    }
    /*--------------------------------------------------------------*/
}

@media (max-width: 991.98px) {

    /*--------------------------------------------------------------
    # MODAL
    --------------------------------------------------------------*/
    .modal-body {
        padding: 1.5rem;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADER
    --------------------------------------------------------------*/
    /* Top Bar */
    .header .top-bar .top-bar-left,
    .header .top-bar .top-bar-right .hotel-group .dropdown .icon-group span > span,
    .header .top-bar .top-bar-right .select-language .dropdown-toggle .lang-flag > span,
    .header .top-bar .top-bar-right .my-account span > span {
        display: none;
    }

    .header .top-bar .top-bar-right {
        margin-right: auto;
    }

    .header .top-bar .list-inline .list-inline-item:not(:last-child) {
        margin-right: 1rem;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # OUR STORY (ABOUT US)
    --------------------------------------------------------------*/
    .our-story-box .our-story {
        align-items: unset;
        flex-direction: column;
    }

        .our-story-box .our-story .our-story-content {
            width: auto;
            padding-right: unset;
        }

        .our-story-box .our-story .our-story-contact {
            width: auto;
            position: unset;
            top: 0;
        }

            .our-story-box .our-story .our-story-contact .contact-info {
                margin-top: 35px;
                padding: 1.5rem;
            }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HERO
    --------------------------------------------------------------*/
    .hero {
        height: auto;
    }

        .hero .hero-container .hero-caption {
            width: unset;
            padding: 0;
            position: unset;
            top: unset;
            bottom: unset;
            left: unset;
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .hero .hero-container .hero-slider {
            margin-left: 0;
        }

            .hero .hero-container .hero-slider .swiper .swiper-slide {
                height: 480px;
            }

        /* Check room */
        .hero .check-room {
            margin-left: 0;
            margin-right: -1px;
            right: unset;
            left: -1px;
            position: relative;
            bottom: unset;
            margin-top: 50px;
        }

        /* Check room */
        .hero.hero-fullwidth .check-room {
            margin-left: 0;
            margin-top: 0;
        }

            .hero.hero-fullwidth .check-room .check-room-container {
                border-radius: 0;
            }

        .hero .check-room .check-room-container {
            border-radius: 0.55rem;
        }

        /* Hero fullwidth */
        .hero.hero-fullwidth .hero-container .hero-slider {
            margin-left: 0;
        }

        .hero.hero-light-content .hero-caption {
            color: rgba(var(--ht-color-dark-rgb),0.85);
            transform: none;
            padding-left: 0;
            padding-right: 0;
        }

            .hero.hero-light-content .hero-caption .hero-title {
                color: var(--ht-color-dark-rgb);
            }

            .hero.hero-light-content .hero-caption .hero-sub-title {
                color: rgba(var(--ht-color-dark-rgb),0.65);
            }

        /* Hero video */
        .hero.hero-fullwidth.hero-video .video {
            height: auto;
        }

    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # INFO BOX
    --------------------------------------------------------------*/
    .info-box .info-box-container .info-box-content .image {
        max-width: 100%;
    }

    .info-box .info-box-container .info-box-content.image-left,
    .info-box .info-box-container .info-box-content.image-right {
        display: block;
    }

        .info-box .info-box-container .info-box-content.image-left .content,
        .info-box .info-box-container .info-box-content.image-right .content {
            width: auto;
        }

        .info-box .info-box-container .info-box-content.image-left .content {
            margin-left: 50px;
            margin-right: 100px;
            margin-top: -100px;
        }

        .info-box .info-box-container .info-box-content.image-right .content {
            margin-right: 50px;
            margin-left: 100px;
            margin-top: -150px;
        }

    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ROOM SLIDER
    /*--------------------------------------------------------------*/
    .room-home-box .room-box-slider .info-box-content.image-right .image {
        margin-right: 0;
        max-width: 100%;
    }

    .room-home-box .room-box-slider .info-box-content.image-right .content {
        margin-top: -100px;
        margin-right: 50px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ROOMS BOX
    --------------------------------------------------------------*/
    .room-box .room-list .room-item .info-box-container .info-box-content.image-left .content {
        margin-left: 50px;
        margin-top: -50px;
    }

    .room-box .room-list .room-item .info-box-container .info-box-content.image-right .content {
        margin-right: 50px;
        margin-top: -50px;
    }

    .room-home-box .room-box-slider .rooms-slider .swiper-pagination {
        background-color: transparent;
        padding: 0;
        top: 25px;
        right: 25px;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # DETAIL ROOM
    --------------------------------------------------------------*/
    .heading-page-box .title-page .info-box-content {
        max-width: 100%;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # RESERVATION
    --------------------------------------------------------------*/
    .reservation-box .reservation-main .room-item .room-box .room-image {
        margin-bottom: 1.5rem;
    }

    .reservation-box .reservation-main .room-item .room-box .room-book {
        padding-top: 1rem;
        text-align: left;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # FACILITIES
    --------------------------------------------------------------*/
    .facilities-box .facilities-box-list .facilities-box-list-container {
        padding-left: 100px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # TOURS
    --------------------------------------------------------------*/
    .tour-list .all-tour-link {
        margin-top: 25px;
    }

    .tour-list .tour-item .tour-item-content .content {
        margin-left: 50px;
        margin-right: 100px;
    }
    /* Other tours */
    .other-tours .other-tours-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .detail-tour-box .detail-tour-content {
        align-items: unset;
        flex-direction: column;
    }

        .detail-tour-box .detail-tour-content .detail-tour {
            width: auto;
            padding-right: unset;
        }

        .detail-tour-box .detail-tour-content .booking-tour {
            width: auto;
            position: unset;
            top: 0;
        }

            .detail-tour-box .detail-tour-content .booking-tour .booking-tour-container {
                margin-top: 35px;
            }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # NEWS
    --------------------------------------------------------------*/
    .news-list .news-item .news-item-content {
        display: block;
        align-items: unset;
    }

        .news-list .news-item .news-item-content .image {
            width: auto;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0.55rem;
        }

        .news-list .news-item .news-item-content .content {
            width: auto;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0.55rem;
        }

    .news-list .news-item.image-right .news-item-content .content {
        order: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0.55rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0.55rem;
    }

    .news-list .news-item.image-right .news-item-content .image {
        order: 1;
        border-top-left-radius: 0.55rem;
        border-top-right-radius: 0.55rem;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADING
    --------------------------------------------------------------*/
    .heading .title.title-lg {
        font-size: 3.90rem !important;
    }

    .heading .title.title-md {
        font-size: 2.90rem !important;
    }

    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # SPA
    --------------------------------------------------------------*/
    .spa-wellnes-box .spa-wellnes {
        align-items: unset;
        flex-direction: column;
    }

        .spa-wellnes-box .spa-wellnes .spa-wellnes-info {
            width: unset;
            margin-right: auto;
            padding-right: 0;
        }

        .spa-wellnes-box .spa-wellnes .spa-wellnes-contact {
            width: auto;
            position: unset;
        }

            .spa-wellnes-box .spa-wellnes .spa-wellnes-contact .contact-info {
                margin-top: 0;
            }

    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # RESTAURANT & BAR
    --------------------------------------------------------------*/
    .restaurant-box .restaurant-content {
        align-items: unset;
        flex-direction: column;
    }

        .restaurant-box .restaurant-content .restaurant-info {
            width: unset;
            margin-right: auto;
            padding-right: 0;
        }

        .restaurant-box .restaurant-content .restaurant-contact {
            width: auto;
            position: unset;
        }

            .restaurant-box .restaurant-content .restaurant-contact .contact-info {
                margin-top: 0;
            }

    .restaurant-box .info-box-container .info-box-content.image-left .image {
        margin-right: 0;
    }

    .menu-content .info-box-container .info-box-content.image-right .image {
        padding-left: 0;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADING PAGE
    --------------------------------------------------------------*/
    .heading-page-swiper-box .heading-page-swiper .heading-page-slide .zoom-photo {
        right: 35px;
        top: 35px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # OTHER SERVICES
    --------------------------------------------------------------*/
    .service-list .service-item .news-item-content {
        display: block;
        align-items: unset;
    }

        .service-list .service-item .news-item-content .image {
            width: auto;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0.55rem;
        }

        .service-list .service-item .news-item-content .content {
            width: auto;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0.55rem;
        }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # SPACE
    --------------------------------------------------------------*/
    .pd-right-30pc {
        padding-right: 0;
    }

    .pd-left-30pc {
        padding-left: 0;
    }
    /*--------------------------------------------------------------*/
}

@media (max-width: 767.98px) {

    /*--------------------------------------------------------------
    # ICON BOXS
    --------------------------------------------------------------*/
    .icon-box.icon-box-left .icon-box-img {
        margin-right: 1.25rem;
        padding-top: 0.45rem;
    }

    .icon-box .icon-box-info .icon-box-title {
        font-size: 1.55rem;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADING PAGE
    --------------------------------------------------------------*/
    .heading-page-swiper-box .heading-page-swiper .swiper-pagination {
        left: 0.75rem;
    }

    .heading-page-swiper-box .heading-page-swiper .heading-page-slide .zoom-photo {
        right: 0.75rem;
        top: 0.75rem;
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }
    /*--------------------------------------------------------------*/
    /*--------------------------------------------------------------
    # ROOMS BOX
    --------------------------------------------------------------*/
    .room-box .room-list .room-item .info-box-container .info-box-content.image-left .content {
        margin-left: 1.5rem;
        margin-right: 0;
    }

    .room-box .room-list .room-item .info-box-container .info-box-content.image-right .content {
        margin-right: 1.5rem;
        margin-left: 0;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # INFO BOX
    --------------------------------------------------------------*/
    .info-box .info-box-container .info-box-content.image-left .image,
    .info-box .info-box-container .info-box-content.image-right .image {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .info-box .info-box-container .info-box-content .image {
        max-width: calc(100% + 1.5rem);
    }

    .info-box .info-box-container .info-box-content.image-left .image img,
    .info-box .info-box-container .info-box-content.image-right .image img {
        border-radius: 0;
    }

    .info-box .info-box-container .info-box-content.image-left .content,
    .info-box .info-box-container .info-box-content.image-right .content {
        margin-top: -50px;
        padding: 50px 25px;
    }

    .info-box .info-box-container .info-box-content.image-left .content {
        margin-right: 0;
        margin-left: 1.5rem;
    }

    .info-box .info-box-container .info-box-content.image-right .content {
        margin-left: 0;
        margin-right: 1.5rem;
    }

    .info-box .info-box-container .info-box-content .content .info-box-desc.info-box-desc-big {
        font-size: 1.15rem;
    }

    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HERO
    --------------------------------------------------------------*/
    /* Caption */
    .hero .hero-container {
        margin-right: 0;
    }

        /* Hero slider */
        .hero .hero-container .hero-slider {
            margin-left: 0;
        }

            .hero .hero-container .hero-slider .swiper .swiper-slide {
                height: 40vh;
            }

    .hero .hero-slider .hero-button-play {
        top: calc(50% - 0.75rem);
    }

    .hero .hero-container .hero-slider .swiper-pagination {
        right: 25px;
        top: 25px;
    }

    /* Check rooms */
    .hero .check-room {
        margin-left: 0;
        margin-right: 0;
        left: unset;
        right: unset;
    }

        .hero .check-room .check-room-container {
            position: relative;
            margin-right: 0;
            border-top-right-radius: 0.55rem;
            border-bottom-right-radius: 0.55rem;
        }

        .hero .check-room .form-container {
            display: block;
            align-items: unset;
        }

        .hero .check-room .check-date-box {
            margin-bottom: 1.5rem;
        }

        .hero .check-room .check-date input,
        .hero .check-room .check-date label {
            padding-left: 0;
            padding-right: 0;
        }

        .hero .check-room .check-button {
            padding-left: 0;
        }

            .hero .check-room .check-button .btn {
                display: block;
            }

    /* Hero fullwidth*/
    .hero.hero-fullwidth {
        height: auto;
    }

        .hero.hero-fullwidth .hero-slider .swiper {
            border-radius: 0;
        }

        .hero.hero-fullwidth .bg-image-wrapper.bg-image-overlay:before {
            background-color: transparent;
        }

        .hero.hero-fullwidth .hero-slider .swiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
            background: var(--ht-color-dark);
            opacity: 0.55;
        }

    /* Hero video*/
    .bg-video-wrapper.bg-video-overlay:after {
        content: unset;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ROOMS 
    --------------------------------------------------------------*/
    .room-home-box .room-box-slider .room-box-slider-container {
        margin-left: -1.5rem;
    }

    /* Content */
    .room-home-box .room-box-slider .info-box-content.image-right .content {
        margin-left: 1.5rem;
        margin-top: -50px;
        margin-right: 2.25rem;
    }

    /* Pagination */
    .room-home-box .room-box-slider .rooms-slider .swiper-pagination {
        top: 0.75rem;
        font-size: 1.15rem;
    }

        .room-home-box .room-box-slider .rooms-slider .swiper-pagination .swiper-pagination-current {
            font-size: 2.25rem;
        }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # DETAIL ROOM
    --------------------------------------------------------------*/
    .detail-room-box .detail-room .detail-room-book .booking-room {
        padding: 25px;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # RESERVATION
    --------------------------------------------------------------*/
    .reservation-box .room-list .room-item .card-title {
        font-size: 1.55rem;
    }

    .reservation-box .room-list .room-item .card-body,
    .reservation-box .reservation-detail .card-body {
        padding: 0.75rem;
    }
    /* --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # OTHER ROOM
    --------------------------------------------------------------*/
    .other-roooms .other-roooms-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .other-roooms .other-room-slide .other-room-content .content {
        background: #ffffff;
        padding: 25px;
        margin-left: 0.75rem;
        margin-right: 1.5rem;
    }

    .other-roooms .other-room-slide .other-room-content .image {
        border-radius: 0;
    }

    .other-roooms .other-room-slide .other-room-content:hover .content {
        margin-top: -50px;
        margin-bottom: 0;
    }
    /* --------------------------------------------------------------*/
    /*--------------------------------------------------------------
    # FACILITIES
    --------------------------------------------------------------*/
    .facilities-box .facilities-box-list {
        height: 190vh;
    }

        .facilities-box .facilities-box-list .facilities-box-list-container {
            padding-left: 1.5rem;
            padding-right: 0;
        }

    .info-box .info-box-container .info-box-content .content.bg-content-white {
        background-color: #fff;
        padding: 50px 25px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # FACILITIES
    --------------------------------------------------------------*/
    .tour-list .all-tour-link {
        margin-top: 0;
    }

    .tour-home-box .tour-list-container {
        margin-right: -0.75rem;
        margin-left: -0.75rem;
    }

    .tour-list .tour-item .tour-item-content .image,
    .tour-list .tour-item .tour-item-content .image img {
        border-radius: 0;
    }

    .tour-list .tour-item .tour-item-content .content {
        margin-right: 35px;
        margin-left: 0.75rem;
    }

    .tour-list .tour-item:hover .tour-item-content {
        margin-bottom: 0;
    }

        .tour-list .tour-item:hover .tour-item-content .content {
            margin-top: -100px;
        }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # TESTIMONIAL
    --------------------------------------------------------------*/
    .testimonial-list .testimonial-item-container {
        padding-right: 0;
        display: block;
        text-align: center;
    }

    .testimonial-list .testimonial-content {
        padding-left: 0;
    }

    .testimonial-list .testimonial-item-container .testimonial-avatar {
        margin-bottom: 25px;
    }

    .testimonial-list .testimonial-swiper .swiper-pagination {
        text-align: center;
        margin-left: 0;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # NEWS & EVENTS
    --------------------------------------------------------------*/
    .news-list .news-list-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .news-list .news-item .news-item-content .image {
        border-radius: 0;
    }

    .news-list .news-item .news-item-content .content {
        padding: 50px 25px;
        border-radius: 0.55rem;
        margin-top: -50px;
        margin-left: 0.75rem;
        width: calc(100% - 2.25rem - 0.75rem);
    }
    /*--------------------------------------------------------------*/
    /*--------------------------------------------------------------
    # HEADING
    --------------------------------------------------------------*/
    .heading .title.title-lg {
        font-size: 3.25rem !important;
    }

    .heading .title.title-md {
        font-size: 2.45rem !important;
    }

    .heading .title {
        position: relative;
        font-size: 2.15rem;
    }

    .heading .sub-title.line-before:before {
        content: '';
        width: 50px;
        height: 1px;
        background-color: var(--ht-color-primary);
        display: inline-block;
        margin-right: 25px;
        vertical-align: middle;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ANIMATION
    --------------------------------------------------------------*/
    .service-list .service-list-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .service-list .service-item .news-item-content .image {
        border-radius: 0;
    }

    .service-list .service-item .news-item-content .content {
        padding: 50px 25px;
        border-radius: 0.55rem;
        margin-top: -50px;
        margin-left: 0.75rem;
        width: calc(100% - 2.25rem - 0.75rem);
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # ANIMATION
    --------------------------------------------------------------*/
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # SPACE
    --------------------------------------------------------------*/
    .pd-right-95px {
        padding-right: 0;
    }

    .pd-left-95px {
        padding-left: 0;
    }

    .pd-left-right-95px {
        padding-left: 0;
        padding-right: 0;
    }

    .pd-right-50px {
        padding-right: 0;
    }

    .pd-left-50px {
        padding-left: 0;
    }

    .pd-left-right-50px {
        padding-left: 0;
        padding-right: 0;
    }
    /*--------------------------------------------------------------*/
}

@media (max-width: 575.98px) {

    /*--------------------------------------------------------------
    # TABS
    --------------------------------------------------------------*/
    .nav.nav-tab-text,
    .nav.nav-tabs {
        display: block;
    }

        .nav.nav-tab-text .nav-item,
        .nav.nav-tabs .nav-item {
            margin-right: 0;
            margin-bottom: 0.5rem;
        }

            .nav.nav-tab-text .nav-item .nav-link,
            .nav.nav-tabs .nav-item .nav-link {
                width: 100%;
            }

    .nav.nav-tabs {
        border-bottom-color: transparent;
    }

        .nav.nav-tabs .nav-link {
            border-width: 0;
            border-radius: 0;
        }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HERO
    --------------------------------------------------------------*/
    .hero {
        height: unset;
    }

        .hero .hero-container .hero-slider .swiper .swiper-slide {
            height: 240px;
        }

        .hero .hero-caption .hero-title {
            font-size: 2.75rem;
        }
    /*--------------------------------------------------------------*/
}

@media (min-width: 576px) {

    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
    .g-small-sm, .gx-small-sm {
        --bs-gutter-x: 3rem
    }

    .g-small-sm, .gy-small-sm {
        --bs-gutter-y: 3rem
    }

    .g-standard-sm, .gx-standard-sm {
        --bs-gutter-x: 6rem
    }

    .g-standard-sm, .gy-standard-sm {
        --bs-gutter-y: 6rem
    }
    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
}

@media (min-width: 768px) {

    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
    .g-small-md, .gx-small-md {
        --bs-gutter-x: 3rem
    }

    .g-small-md, .gy-small-md {
        --bs-gutter-y: 3rem
    }

    .g-standard-md, .gx-standard-md {
        --bs-gutter-x: 6rem
    }

    .g-standard-md, .gy-standard-md {
        --bs-gutter-y: 6rem
    }
    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/

}

@media (min-width: 992px) {

    /* Hero fullwidth*/
    .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary i,
    .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary {
        color: var(--ht-color-white);
    }

        .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary:before {
            border-color: var(--ht-color-white);
        }

        .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary:hover:before {
            background-color: var(--ht-color-white);
            color: var(--ht-color-dark);
        }

        .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary:hover,
        .hero.hero-fullwidth .btn.btn-expand.btn-ht-primary:hover i {
            color: var(--ht-color-dark);
        }
    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
    .g-small-lg, .gx-small-lg {
        --bs-gutter-x: 3rem
    }

    .g-small-lg, .gy-small-lg {
        --bs-gutter-y: 3rem
    }

    .g-standard-lg, .gx-standard-lg {
        --bs-gutter-x: 6rem
    }

    .g-standard-lg, .gy-standard-lg {
        --bs-gutter-y: 6rem
    }
    /*--------------------------------------------------------------*/
}

@media (min-width: 1200px) {

    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
    .g-small-xl, .gx-small-xl {
        --bs-gutter-x: 3rem
    }

    .g-small-xl, .gy-small-xl {
        --bs-gutter-y: 3rem
    }

    .g-standard-xl, .gx-standard-xl {
        --bs-gutter-x: 6rem
    }

    .g-standard-xl, .gy-standard-xl {
        --bs-gutter-y: 6rem
    }
    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # CONTAINER
    --------------------------------------------------------------*/
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # BUTTON
    --------------------------------------------------------------*/

    .btn.btn-expand:hover,
    .btn.btn-expand:focus {
        color: #fff;
        padding-left: 2rem;
        padding-right: 3.35rem;
    }

    .btn.btn-lg.btn-expand:hover,
    .btn.btn-lg.btn-expand:focus {
        padding-left: 2rem;
        padding-right: 3.95rem;
    }

    .btn.btn-expand:hover:before,
    .btn.btn-expand:focus:before {
        right: -1px;
        width: calc(100% + 2px);
        padding-right: 2rem;
    }

    .btn.btn-expand:hover i,
    .btn.btn-expand:focus i {
        right: -1px;
        width: calc(100% + 2px);
        padding-right: 2rem;
    }

    .btn.btn-expand.btn-ht-primary:hover:before,
    .btn.btn-expand.btn-ht-primary:focus:before {
        background-color: var(--ht-color-primary);
        color: #fff;
    }

    .btn.btn-expand.btn-ht-dark:hover:before,
    .btn.btn-expand.btn-ht-dark:focus:before {
        background-color: var(--ht-color-dark);
        color: #fff;
    }

    .btn.btn-expand.btn-ht-white:hover,
    .btn.btn-expand.btn-ht-white:focus {
        color: var(--ht-color-dark);
    }

        .btn.btn-expand.btn-ht-white:hover:before,
        .btn.btn-expand.btn-ht-white:focus:before {
            background-color: #fff;
            color: var(--ht-color-dark);
        }

    .btn.btn-expand.btn-ht-primary:hover i,
    .btn.btn-expand.btn-ht-primary:focus i, {
        color: #fff;
    }
    /*--------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # HEADER
    --------------------------------------------------------------*/
    /* Desktop Nav */
    .navbar {
        padding: 0;
    }

        .navbar ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center;
        }

        .navbar > ul > li {
            margin-left: 30px;
        }

        .navbar ul li {
            position: relative;
        }

            .navbar ul li a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 35px 0 35px 0;
                color: var(--ht-color-dark);
                white-space: nowrap;
                line-height: 20px;
                font-weight: 500;
            }

                .navbar ul li a i:not(.dropdown-indicator) {
                    line-height: 0;
                    margin-right: 0.4rem;
                    margin-bottom: 0;
                    font-size: 1.15rem;
                }

                .navbar ul li a .dropdown-indicator {
                    line-height: 0;
                    font-size: 0.75rem;
                    margin-left: 0.25rem;
                    margin-bottom: -0.05rem;
                    font-weight: bold;
                }

                .navbar ul li a:hover,
                .navbar ul li.active,
                .navbar ul li:hover > a,
                .navbar ul li.active > a {
                    color: var(--ht-color-primary);
                }

            .navbar ul li.dropdown ul {
                display: block;
                position: absolute;
                left: 30px;
                top: calc(100% - 10px);
                margin: 0;
                padding: 10px 0;
                z-index: 99;
                opacity: 0;
                visibility: hidden;
                background: #fff;
                box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
                transition: 0.3s;
                border-radius: 0 0 0.55rem 0.55rem;
            }

                .navbar ul li.dropdown ul li {
                    min-width: 180px;
                }

                .navbar ul li.dropdown ul a {
                    padding: 10px 20px;
                    text-transform: none;
                    font-weight: 400;
                    color: var(--bs-gray-dark);
                }

        .navbar .dropdown ul li a:hover,
        .navbar .dropdown ul li.active,
        .navbar .dropdown ul li:hover > a,
        .navbar .dropdown ul li.active > a {
            color: var(--ht-color-primary);
        }

        .navbar .dropdown:hover > ul {
            opacity: 1;
            top: calc(100%);
            visibility: visible;
        }

        .navbar .dropdown .dropdown ul {
            top: -10px;
            left: calc(100% - 10px);
            visibility: hidden;
        }

        .navbar .dropdown .dropdown:hover > ul {
            opacity: 1;
            top: -10px;
            left: 100%;
            visibility: visible;
        }

    /* Top bar */
    .header .top-bar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        top: 65%;
    }

        .header .top-bar .dropdown-menu.show {
            transition: .3s;
            opacity: 1;
            visibility: visible;
            top: 100%;
            transform: rotateX(0deg);
        }

    /* Mobile toggle */
    .mobile-nav-show,
    .mobile-nav-hide {
        display: none;
    }

    /* Header Sticked */
    .header.sticked.showed .navbar > ul > li > a {
        padding: 24px 0 24px 0;
    }

    .header.sticked .navbar ul li a {
        color: var(--bs-body-color);
    }

    .header.sticked.showed .navbar ul li a:hover,
    .header.sticked.showed .navbar ul li.active,
    .header.sticked.showed .navbar ul li:hover > a,
    .header.sticked.showed .navbar ul li.active > a {
        color: var(--ht-color-primary);
    }
    /*--------------------------------------------------------------*/

}

@media (min-width: 1400px) {

    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/
    .g-small-xxl, .gx-small-xxl {
        --bs-gutter-x: 3rem
    }

    .g-small-xxl, .gy-small-xxl {
        --bs-gutter-y: 3rem
    }

    .g-standard-xxl, .gx-standard-xxl {
        --bs-gutter-x: 6rem
    }

    .g-standard-xxl, .gy-standard-xxl {
        --bs-gutter-y: 6rem
    }
    /*--------------------------------------------------------------
    # GUTTERS
    --------------------------------------------------------------*/

    /*--------------------------------------------------------------
    # CONTAINER
    --------------------------------------------------------------*/
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1380px;
    }
    /*--------------------------------------------------------------*/
}