/*################################################### 
#START


RESPONSIVE DEVICE
=============================
=============================

1) 1400px devices
    1) home-1400-------------------]
        1.1-1400) hero area here
        1.2-1400) header area here
        1.3-1400) accommodations area here
        1.4-1400) dining section area here

2) 1200 xlarge devices
    1) home-1200-------------------]
        1.1-1200) header area here
        1.2-1200) hero section area here
        1.3-1200) about us area here
        1.4-1200) facility area here

    2) gallery-1200-------------------]
        2.1-1200) gallery area here

    3) contact-us-1200-------------------]
        3.1-1200) contact us area here

    4) book-form-1200-------------------]
        4.1-1200) book form area here

3) 991px large devices
    1) home-991-------------------]
        1.1-991) header area here
        1.2-991) hero section area here
        1.3-991) booknow area here
        1.4-991) google map area here

4) 768px medium devices
    1) home-768-------------------]
        1.1-768) header area here
        1.2-768) hero section area here
        1.3-768) booknow area here
        1.4-768) about us area here
        1.5-768) facility area here
        1.6-768) footer area here

    2) rooms-and-suites-768-------------------]
        2.1-768) inner banner area here
        2.2-768) rooms area here

    3) restaurant-768-------------------]
        3.1-768) restaurant area here

    4) meeting-and-event-768-------------------]
        4.1-768) meeting and event area here

    5) offer-768-------------------]
        5.1-768) offer area here

    6) gallery-768-------------------]
        6.1-768) gallery area here

    7) contact-us-768-------------------]
        7.1-768) contact us area here

5) 576px small devices
    1) home-576-------------------]
        1.1-576) header area here
        1.2-576) hero section area here
        1.3-576) booknow area here
        1.4-576) about us area here
        1.5-576) facility area here
        1.6-576) footer area here

    2) rooms-and-suites-576-------------------]
        2.1-576) rooms area here

    3) gallery-576-------------------]
        3.1-576) gallery area here

    4) book-form-576-------------------]
        4.1-576) book form area here


#theEND
###################################################*/



/*##############################
Extra large: ---------
1) 1400px devices
##############################*/
@media screen and (max-width: 1400px) {

    /* common css area here */
    .container {
        max-width: 1140px;
        width: 100%;
    }

    a.main_button {
        padding: 6px 16px;
        font-size: 16px;
        line-height: 26px;
    }

    /* common css area ends here */

    /* 
    1) home-1400-------------------]
    */
    /*********************** 
    1.2-1400) header area here
    ***********************/
    .header_body .header_inner {
        padding: 16px 0px;
    }

    .header .header_body .header_wrap .container-fluid {
        margin: 0px 77px;
    }

    .header .navbar {
        margin: 0px 60px;
    }

    .header .desktop_menu ul {
        gap: 10px;
    }

    .header .desktop_menu ul li a {
        font-size: 14px !important;
        line-height: 22px;
    }

    .header_body .open_menu {
        font-size: 16px;
    }

    .header_logo .header_logo_initial img {
        max-width: 100px;
    }

    .header_logo .header_logo_sticky img {
        padding: 16px;
    }

    .header_body .header_left_menu ul {
        gap: 20px;
    }

    .header_body .header_left_menu ul li a {
        font-size: 14px;
    }

    .header_body .header_left_menu ul li a span {
        margin-right: 4px;
    }

    .header_overlay .hoi_first .close_menu {
        margin: 30px 0px 0px 0px;
        font-size: 20px;
    }

    .header_overlay .hoi_first ul {
        margin-top: 50px;
    }

    .header_overlay .hoi_first ul li:not(:last-child) {
        margin-bottom: 10px;
    }

    .header_overlay .hoi_first ul li a {
        font-size: 16px;
    }

    .header_overlay .hoi_second .content {
        padding: 0px 30px;
    }

    .header_overlay .hoi_second .hoi_second_logo {
        margin-top: 30px;
        text-align: end;
    }

    .header_overlay .hoi_second .hoi_second_logo a img {
        max-width: 65px;
        margin-right: 30px;
    }

    .header_overlay .hoi_second .content .title {
        font-size: 18px;
        line-height: 22px;
        margin: 20px 0px 16px;
    }

    .header_overlay .hoi_second .content ul li a {
        font-size: 14px;
        padding: 10px 0px 11px;
    }

    .header_overlay .hoit_content {
        margin: 101px 0px 0px 0px;
    }

    .header_overlay .hoit_content li:not(:last-child) {
        margin-bottom: 14px;
    }

    .header_overlay .hoit_content .hoit_title {
        font-size: 24px;
        line-height: 100%;
        margin-bottom: 6px;
    }
    .header_overlay .hoit_content .hoit_address {
        font-size: 14px;
        line-height: 21px;
    }
    .header_overlay .hoit_content .hoit_call {
        font-size: 14px;
        line-height: 16px;
    }

    .header_overlay .hoit_content .hoit_wpcall {
        font-size: 14px;
        line-height: 16px;
    }

    .header_overlay .hoit_content .hoit_email {
        font-size: 14px;
        line-height: 16px;
    }

    .header_sticky_logo {
        width: 100px;
    }

    /*********************** 
    1.1-1400) hero area here
    ***********************/
    .hero_sec .slide-text h1 span {
        font-size: 50px;
        line-height: 70px;
    }

    .hero_sec .slide-text {
        bottom: 60px;
        right: 92px;
        max-width: fit-content;
    }

    .hero_sec .slide-text h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .hero_sec .slide-text h1 span {
        font-size: 36px;
        line-height: 49px;
    }


    .booking-widget-wrapper h1 {
        font-size: 36px;
        line-height: 46px;
        margin-bottom: 20px;
    }
    .booking-widget-wrapper .guests-dropdown {
        border-radius: 10px;
        padding: 0px 15px 15px;
    }
    .booking-widget-wrapper .dropdown-btn {
        padding: 10px 6px;
        border-radius: 6px;
        font-size: 14px;
    }
    .booking-widget-wrapper .guest-btn {    
        width: 26px;
        height: 26px;
        border: 1px solid #d1d5db;
        font-size: 16px;
    }
    .booking-widget-wrapper .guest-label {
        font-size: 14px;
    }
    .booking-widget-wrapper .guest-controls {
        gap: 10px;
    }
    .booking-widget-wrapper .guest-row {        
        padding: 8px 0px;
    }
    .booking-widget-wrapper .dropdown-actions {
        gap: 10px;
        margin-top: 14px;
    }
    .hero_sec .hero_scrolldown_button {
        font-size: 13px;
        line-height: 100%;
        padding: 11px 20px 9px;
        bottom: 30px;
    }


    /*********************** 
    1.5-1400) about section area here
    ***********************/
    .about_sec {
        padding: 60px 0px;
    }

    .about_sec .about_inner .cards-grid {
        margin: 30px 0px 0px;
    }

    .about_sec .about_inner .heading h2 {
        padding-bottom: 8px;
        font-size: 36px;
        line-height: 46px;
    }

    .about_sec .about_inner .heading p {
        font-size: 18px;
        line-height: 26px;
    }

    .about_sec .about_inner .card-icon {
        font-size: 24px;
        border-right: 2px solid rgba(131, 116, 83, 0.2);
        height: 60px;
        min-height: 60px;
    }

    .about_sec .about_inner .card-header {
        height: 60px;
    }
    .about_sec .about_inner .card-title {
        font-size: 18px;
        line-height: 28px;
        padding: 0;
    }
    .about_sec .about_inner .card-body {
        padding: 10px 13px;
    }

    .about_sec .about_inner .card-description {
        font-size: 14px;
        line-height: 24px;
    }

    /*********************** 
    1.3-1400) accommodations area here
    ***********************/
    .accommodations_sec {
        padding: 60px 0px 90px;
    }

    .accommodations_sec .top_content h4 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 10px;
    }
    .accommodations_sec .top_content h2 {
        font-size: 36px;
        line-height: 46px;
    }
    .accommodations_sec .accommodations_button {
        margin-top: 20px;
    }

    .accommodations_sec .acc_items .content {
        padding-right: 60px;
    }

    .accommodations_sec .acc_items .content h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .accommodations_sec .nav-tabs li a {
        font-size: 20px;
        line-height: 24px;
        padding: 9px 0px;
    }

    .accommodations_sec .item_content .thumb img {
        height: 360px;
    }

    .accommodations_sec .item_content .overlay h2 {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 8px;
    }

    .accommodations_sec .item_content .overlay p {
        font-size: 16px;
        line-height: 24px;
    }

    .accommodations_sec .item_content .overlay .close_btn {
        padding: 8px 20px;
        font-size: 16px;
        line-height: 24px;
        bottom: 30px;
        right: 30px;
    }

    .accommodations_sec .item_content .overlay {
        top: 30px;
        left: 30px;
        padding: 30px 32px 74px 32px;
    }

    .accommodations_sec .item_content .thumb .open_btn {
        bottom: -25px;
        right: 0;
        font-size: 11px;
        padding: 4px 20px;
    }

    /*********************** 
    1.4-1400) services area here
    ***********************/
    .services_sec .service_item .thumb {
        height: 400px;
    }
    .services_sec .service_item .content h2 {
        font-size: 36px;
        margin-bottom: 16px;
    }
    
    .testimonial_section .section_header h2, 
    .offers_sec .offers_inner .offers_header h2, 
    .blog_sec .blog_inner .blog_header h2, 
    .location_sec .location_inner h2 {
        font-size: 36px;
        line-height: 46px;
    }

    /*********************** 
    1.4-1400) dining section area here
    ***********************/
    .dining_sec {
        padding: 60px 0px 90px;
    }

    .dining_sec .din_items .content {
        padding-right: 60px;
    }

    .dining_sec .top_content h4 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 10px;
    }
    .dining_sec .top_content h2 {
        font-size: 36px;
        line-height: 46px;
    }
    .dining_sec .din_items .content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .dining_sec .dining_button {
        margin-top: 20px;
    }

    .dining_sec .din_items .content {
        padding-right: 60px;
    }

    .dining_sec .din_items .content h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .dining_sec .nav-tabs li a {
        font-size: 20px;
        line-height: 24px;
        padding: 9px 0px;
    }

    .dining_sec .item_content .thumb img {
        height: 360px;
    }

    .dining_sec .item_content .overlay h2 {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 8px;
    }

    .dining_sec .item_content .overlay p {
        font-size: 16px;
        line-height: 24px;
    }

    .dining_sec .item_content .overlay .close_btn {
        padding: 8px 20px;
        font-size: 16px;
        line-height: 24px;
        bottom: 30px;
        right: 30px;
    }

    .dining_sec .item_content .overlay {
        top: 30px;
        left: 30px;
        padding: 30px 32px 74px 32px;
    }

    .dining_sec .item_content .thumb .open_btn {
        bottom: -25px;
        right: 0;
        font-size: 11px;
        padding: 4px 20px;
    }

    /*********************** 
    1.5-1400) rejuvenate section area here
    ***********************/
    .rejuvenate_sec {
        padding: 60px 0px 90px;
    }

    .rejuvenate_sec .rej_items .content {
        padding-left: 60px;
    }

    .rejuvenate_sec .top_content h4 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 10px;
    }

    .rejuvenate_sec .top_content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .rejuvenate_sec .rej_items .content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .rejuvenate_sec .rejuvenate_button {
        margin-top: 20px;
    }

    .rejuvenate_sec .rej_items .content h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .rejuvenate_sec .nav-tabs li a {
        font-size: 20px;
        line-height: 24px;
        padding: 9px 0px;
    }

    .rejuvenate_sec .item_content .thumb img {
        height: 360px;
    }

    .rejuvenate_sec .item_content .overlay h2 {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 8px;
    }

    .rejuvenate_sec .item_content .overlay p {
        font-size: 16px;
        line-height: 24px;
    }

    .rejuvenate_sec .item_content .overlay .close_btn {
        padding: 8px 20px;
        font-size: 16px;
        line-height: 24px;
        bottom: 30px;
        left: 30px;
    }

    .rejuvenate_sec .item_content .overlay {
        top: 30px;
        right: 30px;
        padding: 30px 32px 74px 32px;
    }
    .rejuvenate_sec .item_content .thumb .open_btn {
        bottom: -25px;
        font-size: 11px;
        padding: 4px 20px;
    }

    /*********************** 
    1.4-1400) meeting section area here
    ***********************/
    .meeting_sec {
        padding: 60px 0px 90px;
    }

    .meeting_sec .meet_items .content {
        padding-right: 60px;
    }

    .meeting_sec .top_content h4 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 10px;
    }

    .meeting_sec .top_content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .meeting_sec .meet_items .content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .meeting_sec .meeting_button {
        margin-top: 20px;
    }

    .meeting_sec .meet_items .content {
        padding-right: 60px;
    }

    .meeting_sec .meet_items .content h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .meeting_sec .nav-tabs li a {
        font-size: 20px;
        line-height: 24px;
        padding: 9px 0px;
    }

    .meeting_sec .item_content .thumb img {
        height: 360px;
    }

    .meeting_sec .item_content .overlay h2 {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 8px;
    }

    .meeting_sec .item_content .overlay p {
        font-size: 16px;
        line-height: 24px;
    }

    .meeting_sec .item_content .overlay .close_btn {
        padding: 8px 20px;
        font-size: 16px;
        line-height: 24px;
        bottom: 30px;
        right: 30px;
    }

    .meeting_sec .item_content .overlay {
        top: 30px;
        left: 30px;
        padding: 30px 32px 74px 32px;
    }

    .meeting_sec .item_content .thumb .open_btn {
        bottom: -25px;
        right: 0;
        font-size: 11px;
        padding: 4px 20px;
    }

    /*********************** 
    1.4-1400) additional service section area here
    ***********************/
    .add_services_sec {
        padding: 40px 0px;
    }

    .add_services_sec .add_services_inner .services_header {
        margin-bottom: 20px;
    }

    .add_services_sec .add_services_inner .services_header h2 {
        font-size: 28px;
        line-height: 38px;
        margin-bottom: 10px;
    }

    .add_services_sec .add_services_inner .services_header p {
        font-size: 36px;
        line-height: 46px;
    }
    .add_services_sec .add_services_inner .services_grid {
        gap: 18px;
    }

    .add_services_sec .add_services_inner .service_icon {
        font-size: 36px;
    }

    .add_services_sec .add_services_inner .service_name {
        color: var(--fonts);
        font-size: 18px;
        line-height: 24px;
    }

    .add_services_sec .add_services_inner .service_item {
        padding: 18px 8px;
    }

    /* 
    2) rooms-1400-------------------]
    */
    /*********************** 
    2.1-1400) room hero area here
    ***********************/
    .room_hero .room_hero_items {
        bottom: 40px;
    }

    .room_hero .room_hero_items h2 {
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 20px;
    }

    .room_hero .room_hero_items ul li {
        padding: 10px 6px;
        width: 120px;
    }

    .room_hero .room_hero_items ul li span svg {
        width: auto;
        height: 16px;
    }

    .room_hero .room_hero_items ul li h4 {
        font-size: 12px;
        line-height: 16px;
    }

    /*********************** 
    2.1-1400) rooms area here
    ***********************/
    .rooms {
        padding: 60px 0px;
    }

    .rooms .rooms_inner_header ul li:not(:last-child) {
        margin-right: 6px;
    }

    .rooms .rooms_inner_header ul li a {
        padding: 6px 14px;
        font-size: 14px;
        line-height: 20px;
    }

    .rooms .item_content .content h2 {
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 10px;
    }

    .rooms .item_content .content p {
        font-size: 18px;
        line-height: 26px;
    }

    .rooms .item_content .content ul {
        margin-top: 30px;
    }

    .rooms .item_content .content ul li span {
        font-size: 16px;
    }

    .rooms .item_content .content ul li h4 {
        font-size: 16px;
    }

    .rooms .item_content .content ul li {
        gap: 6px;
    }

    .rooms .item_content .content ul li:last-child {
        padding-left: 10px;
    }

    .rooms .item_content .content ul li:not(:last-child) {
        padding-right: 10px;
    }

    .rooms .item_content .content form button {
        padding: 6px 14px;
        font-size: 16px;
        line-height: 23px;
    }

    .rooms .rooms_inner_header {
        margin-bottom: 30px;
    }
    .rooms .item_content .item_thumb img {
        height: 350px;
    }

    /* 
    2) restaurant-1400-------------------]
    */
    /*********************** 
    2.1-1400) restaurant hero area here
    ***********************/
    .restaurant_hero_items h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }

    .restaurant_hero_items p {
        font-size: 20px;
        line-height: 30px;
    }

    .restaurant_hero_inner a {
        font-size: 18px;
        line-height: 24px;
        padding: 10px 30px;
        bottom: 60px;
    }

    /*********************** 
    2.1-1400) restaurant data area here
    ***********************/
    .restaurant_data {
        padding: 60px 0px;
    }

    .restaurant_data .resdata_content .content h4 {
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .restaurant_data .resdata_content .content h3 {
        font-size: 24px;
        line-height: 32px;
    }

    .restaurant_data .resdata_content .content {
        margin: 0 auto 30px;
    }

    .restaurant_data .resdata_content .content2 {
        margin: 30px auto 0px;
    }

    .restaurant_data .resdata_content .content2 h3 {
        font-size: 24px;
        line-height: 32px;
        margin: 0px 0px 20px 0px;
    }

    .restaurant_data .resdata_content .content2 p {
        font-size: 16px;
        line-height: 24px;
    }

    /*********************** 
    2.1-1400) restaurant area here
    ***********************/
    .restaurant {
        padding: 60px 0px;
    }

    .restaurant .numbering .number {
        width: 36px;
        height: 46px;
        font-size: 20px;
    }

    .restaurant .numbering .number::after {
        width: 56px;
        height: 66px;
    }

    .restaurant .numbering h4 {
        letter-spacing: 4px;
        font-size: 12px;
        line-height: 26px;
    }

    .restaurant .numbering {
        gap: 30px;
        margin-bottom: 30px;
    }

    .restaurant .section_title h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 40px;
    }
    .restaurant .card {
        padding: 40px 0px 0px;
    }

    .restaurant .card .content .top h3,
    .restaurant .card .content .bottom h3 {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 10px;
    }

    .restaurant .card .content .top p,
    .restaurant .card .content .bottom p {
        font-size: 16px;
        line-height: 24px;
    }

    .restaurant .card .content .middle {
        width: 40px;
        margin: 20px auto;
    }

    .restaurant .card .content {
        top: 40px;
        padding: 0px 30px 0px;
    }

    .restaurant .card .content a {
        font-size: 16px;
        line-height: 20px;
        padding: 14px 40px;
        margin-top: 30px;
    }

    /*********************** 
    2.1-1400) top up button area here
    ***********************/
    .topUp-btn {
        bottom: 30px;
        right: 30px;
        width: 40px;
        height: 40px;
    }
    .topUp-btn i {
        font-size: 21px;
    }

}

/*############################## 
Extra large: ---------
2) 1200 xlarge devices
##############################*/
@media screen and (max-width: 1200px) {

    /* common css area here */
    .container {
        max-width: 1100px;
        width: 100%;
    }

    /* common css area ends here */
    /* 
    1) home-1200-------------------]
    */
    /*********************** 
    1.1-1200) header area here
    ***********************/
    .header .navbar {
        margin: 0px 15px;
    }

    .header .desktop_menu ul li a {
        font-size: 14px !important;
        line-height: 20px;
    }

    .header .nav ul li {
        text-align: center !important;
    }

    .header .nav ul li a {
        font-size: 20px !important;
    }

    .header .header_body .header_wrap .container-fluid {
        margin: 0px 60px;
    }

    .header_body .header_inner {
        padding: 14px 0px;
    }

    .header_sticky_logo {
        width: 90px;
    }

    .header_overlay .hoi_first ul li a {
        font-size: 12px;
    }

    .header_overlay .hoi_second .content .title {
        font-size: 16px;
    }

    .header_overlay .hoi_second .content ul li a {
        font-size: 12px;
        padding: 9px 0px 10px;
    }

    .header_overlay .hoit_content .hoit_title {
        font-size: 16px;
    }

    .header_overlay .hoit_content .hoit_address {
        font-size: 12px;
    }

    .header_overlay .hoit_content .hoit_call {
        font-size: 12px;
    }

    .header_overlay .hoit_content .hoit_email {
        font-size: 12px;
    }

    .header_overlay .hoit_content .hoit_wpcall {
        font-size: 12px;
    }

    .booking-widget-wrapper .booking-widget {
        border-radius: 24px;
    }
    .booking-widget-wrapper .widget-section {
        min-width: 150px;
    }
    .booking-widget-wrapper .search-button {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    /*********************** 
    1.3-1200) accommodations area here
    ***********************/
    .accommodations_sec .item_content .overlay {
        left: inherit;
        right: 30px;
    }

    .accommodations_sec .item_content .thumb .open_btn {
        right: inherit;
        left: 0px;
    }

    /*********************** 
    1.3-1200) dining section area here
    ***********************/
    .dining_sec .item_content .overlay {
        left: inherit;
        right: 30px;
    }

    .dining_sec .item_content .thumb .open_btn {
        right: inherit;
        left: 0px;
    }

    /*********************** 
    1.3-1200) rejuvenate section area here
    ***********************/
    .rejuvenate_sec .item_content .overlay {
        right: inherit;
        left: 30px;
    }

    .rejuvenate_sec .item_content .thumb .open_btn {
        left: inherit;
        right: 0px;
    }

    /*********************** 
    1.3-1200) meeting section area here
    ***********************/
    .meeting_sec .item_content .overlay {
        left: inherit;
        right: 30px;
    }

    .meeting_sec .item_content .thumb .open_btn {
        right: inherit;
        left: 0px;
    }

    /*********************** 
    1.4-1200) facility area here
    ***********************/
    .facility .facility-items {
        grid-template-columns: repeat(3, 1fr);
    }

    /*********************** 
    1.4-1200) footer section area here
    ***********************/
    .footer_sec {
        padding: 40px 0px 30px;
    }

    .footer_sec .newsletter h3 {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 16px;
    }

    .footer_sec .footer_logo a img {
        max-width: 80px;
    }

    .footer_sec .footer_menu_lists li a {
        font-size: 14px;
        line-height: 16px;
    }

    .footer_sec .footer_menu_lists2 li a {
        font-size: 14px;
        line-height: 16px;
    }

    .footer_sec .footer_contact .fc_button a {
        font-size: 14px;
        line-height: 22px;
    }

    .footer_sec .footer_contact .address {
        font-size: 16px;
        line-height: 24px;
    }

    .footer_sec .footer_contact .map_direction {
        font-size: 16px;
        line-height: 24px;
    }

    .footer_sec .footer_contact .map_direction i {
        font-size: 16px;
        line-height: 23px;
    }

    .footer_sec .footer_contact .social ul {
        gap: 16px;
    }

    .footer_sec .footer_contact .social ul li a {
        font-size: 16px;
    }

    /*
    2) rooms-1200-------------------]
    */
    /*********************** 
    2.1-1200) room hero area here
    ***********************/
    .room_hero .room_hero_items ul li {
        width: 100%;
    }

    .room_hero .room_hero_items ul {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 14px;
    }

    /*********************** 
    2.1-1200) rooms area here
    ***********************/
    .rooms .rooms_inner_header ul {
        gap: 10px;
    }

    .rooms .rooms_inner_header ul::after,
    .rooms .rooms_inner_header ul::before {
        display: none;
    }

    .rooms .rooms_inner_header ul li:not(:last-child) {
        margin-right: 0px;
    }

    /* 
    2) gallery-1200-------------------]
    */
    /*********************** 
    2.1-1200) gallery area here
    ***********************/
    .gallery {
        padding: 60px 0px;
    }

    .gallery .inner ul {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 30px;
    }

    /* 
    3) contact-us-1200-------------------]
    */
    /*********************** 
    3.1-1200) contact us area here
    ***********************/
    .contact_us {
        padding: 60px 0px;
    }

    .contact_left .submit-button button {
        padding: 10px 20px !important;
        font-size: 18px;
        line-height: 28px;
    }

    /* 
    4) book-form-1200-------------------]
    */
    /*********************** 
    4.1-1200) book form area here
    ***********************/
    .book_form {
        padding: 60px 0px;
    }

    .book_inner .heading h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 14px;
    }

    .book_inner .heading p {
        font-size: 18px;
        line-height: 28px;
    }

    .header_overlay .hoi_first .close_menu {
        margin: 24px 0px 0px 0px;
        font-size: 16px;
    }

}

/*##############################
large layout:  --------- 
3) 991px large devices
##############################*/
@media screen and (max-width: 991px) {

    /* common css area here */
    .container {
        max-width: 970px;
        width: 100%;
    }

    /* common css area ends here */

    /* 
    1) home-991-------------------]
    */
    /*********************** 
    1.1-991) header area here
    ***********************/
    .header .navbar {
        padding: 20px 0px;
    }

    .company_logo .logo {
        transform: translate(-30px, 0px);
        -webkit-transform: translate(-30px, 0px);
        -moz-transform: translate(-30px, 0px);
        -ms-transform: translate(-30px, 0px);
        -o-transform: translate(-30px, 0px);
    }

    .company_logo .logo a img {
        width: 60px;
    }

    .header .navbar .social ul {
        gap: 10px;
    }

    .header .navbar .social ul li a {
        font-size: 12px !important;
    }

    .header .desktop_menu {
        display: none;
    }

    .header .navbar .menu-icon {
        display: block;
    }

    .header .header_body .header_wrap .container-fluid {
        margin: 0px 45px;
    }

    .header_body .header_inner {
        padding: 15px 0px;
    }

    .header_sticky_logo {
        width: 80px;
    }

    .header_overlay .hoi_first ul li a {
        font-size: 12px;
    }

    .header_overlay .hoi_second .content .title {
        font-size: 16px;
    }

    .header_overlay .hoi_second .content ul li a {
        font-size: 12px;
    }

    .header_overlay .hoit_content .hoit_address .hoit_call .hoit_email {
        font-size: 10px;
    }

    .header_overlay .hoit_content .hoit_wpcall {
        font-size: 10px;
    }

    /*********************** 
    1.2-991) hero section area here
    ***********************/
    .hero-section {
        height: 600px;
    }

    .hero-section .slide-image {
        max-height: 100vh !important;
    }

    .hero-section .slide-text {
        left: 0px;
        right: 0px;
        bottom: 65px;
    }

    .hero-section .slide-text .title1,
    .hero-section .slide-text .title2 {
        margin-bottom: 10px;
    }

    .hero-section .slide-text .title3 {
        margin-bottom: 16px;
    }

    .hero-section .slide-text .sub-title {
        font-size: 14px;
    }

    .hero_sec .slide-text {
        bottom: 60px;
        right: 60px;
    }

    .hero_sec .slide-text h1 {
        font-size: 28px;
        line-height: 38px;
    }

    .hero_sec .slide-text h1 span {
        font-size: 38px;
        line-height: 48px;
    }

    .hero_sec .hero_wrap .slide-image {
        max-height: 100vh !important;
    }

    /*********************** 
    1.3-991) about section area here
    ***********************/
    .about_sec .about_inner .cards-grid {
        margin: 30px 0px 0px;
        grid-template-columns: repeat(2, 1fr);
    }

    /*********************** 
    1.3-991) booknow area here
    ***********************/
    .booknow {
        margin-top: -118px;
    }

    .booknow .checkin_form_container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /*********************** 
    1.4-991) google map area here
    ***********************/
    .google-map-section .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .google-map-section .row> :last-child {
        height: auto;
        padding: 40px 30px;
    }

    .google-map-section .text-holder {
        text-align: center;
    }

    .google-map-section .text-holder h3 {
        width: 100%;
        padding-bottom: 30px;
    }

    .google-map-section .text-holder ul {
        justify-content: center;
        margin-top: 10px;
    }

    /*********************** 
    1.4-991) Find us section
    ***********************/
    .find-us-content-wrapper {
        grid-template-columns: 1fr;
    }

    .find-us-heading {
        font-size: 2.8rem;
        margin-bottom: 40px;
    }

    .find-us-content {
        padding: 40px 30px;
    }

    .content-title {
        font-size: 2rem;
    }

    .map-container {
        height: 400px;
        border-left: none;
        border-top: 3px solid rgba(131, 116, 83, 0.2);
    }

    /*********************** 
    1.4-991) blog section area here
    ***********************/
    .blog-heading {
        font-size: 2.8rem;
        margin-bottom: 15px;
    }

    .blog-subheading {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }

    .carousel-container {
        padding: 30px 15px;
    }

    .blog-card {
        min-width: 300px;
    }

    .blog-content {
        padding: 25px 20px;
    }

    /*********************** 
    1.4-991) location section area here
    ***********************/
    .location_sec {
        padding: 30px 0 60px;
    }

    .location_sec .location_inner .find-us-content-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
        min-height: auto;
    }

    .location_sec .location_inner .map-container {
        height: 420px;
        border-left: none;
        border-top: 3px solid rgba(131, 116, 83, 0.2);
    }

    .location_sec .location_inner .content-title {
        font-size: 22px;
        line-height: 28px;
    }

    .location_sec .location_inner .content-description {
        font-size: 15px;
        line-height: 22px;
    }

    .location_sec .location_inner .locations-table td,
    .location_sec .location_inner .locations-table th {
        font-size: 13px;
        padding: 6px 4px;
    }

    /*********************** 
    1.4-991) additional section area here
    ***********************/
    .add_services_sec .add_services_inner .services_header h2 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 8px;
    }

    .add_services_sec .add_services_inner .services_header p {
        font-size: 26px;
        line-height: 36px;
    }

    .add_services_sec .add_services_inner .services_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .add_services_sec .add_services_inner .service_item {
        padding: 10px 8px;
    }

    .add_services_sec .add_services_inner .service_icon {
        font-size: 32px;
    }

    .add_services_sec .add_services_inner .service_name {
        font-size: 16px;
        line-height: 22px;
    }

    .header_overlay .hoi_first .close_menu {
        margin: 24px 0px 0px 0px;
        font-size: 12px;
    }

}

/*##############################
Medium Layout: ---------
4) 768px medium devices
##############################*/
@media screen and (max-width: 768px) {

    /* common css area here */
    /* .container {
        max-width: 750px;
        width: 100%;
    } */

    .header_overlay .header_overlay_wrap .container {
        max-width: 100%;
        padding: 0;
    }

    /* common css area ends here */

    /* 
    1) home-768-------------------]
    */
    /*********************** 
    1.1-768) header area here
    ***********************/
    .header .navbar {
        padding: 20px 0px;
        margin: 0px;
    }

    .header .header_body .header_wrap .container-fluid {
        margin: 0px 15px;
    }

    .header_body .header_inner {
        padding: 10px 0px;
    }

    .header_logo .header_logo_initial img {
        max-width: 90px;
    }

    .header_logo .header_logo_sticky img {
        display: none;
    }

    .header_overlay .hoit_content {
        margin: 10px 0px 0px 0px;
        text-align: start;
    }

    .header_overlay .header_overlay_items {
        display: flex;
        flex-direction: column;
        height: 100vh;
        padding-bottom: 80px;
        overflow-y: scroll;
    }

    .header_overlay .header_overlay_inner::after {
        display: none;
    }

    .header_overlay .hoi_second .content {
        padding: 0px 15px;
    }

    .header_overlay .hoi_second .hoi_second_logo {
        display: none;
    }

    .header_overlay .hoi_second .content .title {
        margin: 0 0px 10px;
    }

    .header_overlay .hoi_first {
        padding: 0px 15px 30px 15px;
    }

    .header_overlay .hoi_first ul {
        margin-top: 30px;
    }

    .header_overlay .hoi_third {
        padding: 0px 15px;
        text-align: start;
    }

    /*********************** 
    1.2-768) hero section area here
    ***********************/
    .hero-section {
        height: 500px;
    }

    .hero_sec .slide-text {
        bottom: 30px;
        right: 30px;
    }
    .booking-widget-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0px 15px;
    }
    .booking-widget-wrapper .booking-widget {
        flex-direction: column;
        padding: 0px 15px;
        border-radius: 10px;
        gap: 6px;
    }
    .booking-widget-wrapper .section-label {
        font-size: 10px;
    }
    .booking-widget-wrapper .section-value {
        font-size: 13px;
    }
    .booking-widget-wrapper .search-button {
        margin-bottom: 10px;
        padding: 6px 20px;
        font-size: 14px;
    }
    .booking-widget-wrapper .search-button i {
        font-size: 14px;
    }
    .booking-widget-wrapper .flatpickr-input {
        font-size: 13px;
    }
    .booking-widget-wrapper .widget-section.guests-section {
        padding-left: 15px;
        width: 100%;
        flex: 1;
    }
    .booking-widget-wrapper .widget-section {
        width: 100%;
        border-bottom: 1px solid #e5e7eb;
        border-right: none;
        padding: 6px 15px;
    }
    .booking-widget-wrapper .guests-dropdown {
        width: calc(100vw - 40px);
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /*********************** 
    1.4-768) about us area here
    ***********************/
    .about-us {
        padding: 0px 0px 60px;
    }

    .about-us .about-us-inner {
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
    }

    .about-us .content .heading h3 {
        font-size: 40px;
        line-height: 48px;
        text-align: right;
    }

    /*********************** 
    1.3-768) accommodations area here
    ***********************/
    .accommodations_sec .acc_items .content {
        padding-right: 0;
    }

    .accommodations_sec .top_content h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .accommodations_sec .acc_items {
        grid-template-columns: auto;
        gap: 30px;
    }

    .accommodations_sec .image_box {
        margin-left: 30px;
    }

    .accommodations_sec .item_content .overlay h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .accommodations_sec .item_content .overlay p {
        font-size: 10px;
        line-height: 16px;
    }

    /*********************** 
    1.3-768) dining section area here
    ***********************/
    .dining_sec .din_items .content {
        padding-right: 0;
    }

    .dining_sec .top_content h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .dining_sec .din_items {
        grid-template-columns: auto;
        gap: 30px;
    }

    .dining_sec .image_box {
        margin-left: 30px;
    }

    .dining_sec .item_content .overlay h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .dining_sec .item_content .overlay p {
        font-size: 10px;
        line-height: 16px;
    }

    /*********************** 
    1.3-768) rejuvenate section area here
    ***********************/
    .rejuvenate_sec .rej_items .content {
        padding-left: 0;
    }

    .rejuvenate_sec .top_content h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .rejuvenate_sec .rej_items {
        display: flex;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .rejuvenate_sec .image_box {
        margin-right: 30px;
    }

    .rejuvenate_sec .item_content .overlay h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .rejuvenate_sec .item_content .overlay p {
        font-size: 10px;
        line-height: 16px;
    }

    /*********************** 
    1.3-768) dining section area here
    ***********************/
    .meeting_sec .meet_items .content {
        padding-right: 0;
    }

    .meeting_sec .top_content h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .meeting_sec .meet_items {
        grid-template-columns: auto;
        gap: 30px;
    }

    .meeting_sec .image_box {
        margin-left: 30px;
    }

    .meeting_sec .item_content .overlay h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .meeting_sec .item_content .overlay p {
        font-size: 10px;
        line-height: 16px;
    }

    /*********************** 
    1.3-768) booknow area here
    ***********************/
    .booknow {
        margin-top: 0;
        padding: 40px 0px;
    }

    .booknow .checkin_form_container {
        gap: 20px;
    }

    /*********************** 
    1.4-768) services area here
    ***********************/
    .services_sec .service_items {
        grid-template-columns: auto;
    }

    .services_sec .service_item .content {
        padding: 0;
    }

    .services_sec .service_item .content h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .services_sec .service_item .thumb {
        height: 200px;
    }

    /*********************** 
    1.5-768) facility area here
    ***********************/
    .facility .facility-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .facility .heading h2 {
        font-size: 40px;
        line-height: 48px;
        padding-top: 6px;
    }

    /*********************** 
    1.6-768) footer area here
    ***********************/
    .footer_sec .footer_logo {
        text-align: start;
    }

    .footer_sec .footer_items {
        grid-template-columns: auto;
    }

    .footer_sec .footer_menu {
        align-items: start;
        text-align: start;
    }

    .footer_sec .footer_menu_lists2 {
        align-items: start;
        justify-content: start;
    }

    .footer_sec .footer_menu_lists2 li a {
        padding: 0px 6px 0px 6px;
    }

    .footer_sec .footer_menu_lists2 li:first-child a {
        padding-left: 0;
    }

    .footer_sec .footer_contact .fc_button {
        text-align: start;
    }

    .footer_sec .footer_contact .address {
        text-align: start;
    }

    .footer_sec .footer_contact .map_direction {
        justify-content: start;
    }

    .footer_sec .footer_contact .social ul {
        justify-content: start;
    }

    .footer_sec .newsletter form {
        max-width: 350px;
    }

    .footer_sec .copy_right_inner {
        align-items: start;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
    }

    /* 
    2) rooms-768-------------------]
    */
    /*********************** 
    2.1-768) room hero area here
    ***********************/
    .room_hero .room_hero_items h2 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .room_hero .room_hero_items ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .room_hero .room_hero_items ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: inherit;
        box-shadow: none;
        padding: 6px;
    }

    .room_hero .room_hero_items ul li h4 {
        font-size: 10px;
        line-height: 14px;
    }

    .room_hero .room_hero_items ul li h4 br {
        display: none;
    }

    .room_hero .room_hero_items ul li span {
        display: none;
    }

    /*********************** 
    2.2-768) rooms area here
    ***********************/
    .rooms .item_content .col-sm-6 {
        padding: 0;
    }

    .rooms .item_content .thumb {
        margin-top: 30px;
    }

    /* 
    3) restaurant-768-------------------]
    */
    /*********************** 
    3.1-768) restaurant area here
    ***********************/
    .restaurant_hero_items {
        width: 90%;
        padding: 0px;
    }

    .restaurant_hero_items h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .restaurant_hero_items p {
        font-size: 18px;
        line-height: 26px;
    }

    .restaurant_hero_inner a {
        bottom: 40px;
    }

    /*********************** 
    3.1-768) restaurant data area here
    ***********************/
    .restaurant_data {
        padding: 60px 0px 0px;
    }

    .restaurant_data .resdata_content .content h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .restaurant_data .resdata_content .thumb1 img {
        max-width: 94%;
    }

    .restaurant_data .resdata_content .thumb3 img {
        max-width: 94%;
    }

    .restaurant_data .resdata_content .content2 h3 {
        font-size: 20px;
        line-height: 27px;
    }

    .restaurant_data .resdata_content .content2 p {
        font-size: 14px;
        line-height: 20px;
    }
    .restaurant_data .resdata_content .thumbs .thumb2 {
        height: 300px;
    }
    .restaurant_data .resdata_content .thumb3 {
        height: 250px;
    }
    .restaurant_data .resdata_content .thumbs .thumb1 {
        height: 250px;
    }

    /*********************** 
    3.1-768) restaurant area here
    ***********************/
    .restaurant .restaurant_item:not(:last-child) {
        padding-bottom: 80px;
    }

    .restaurant .card .content {
        top: 60px;
        padding: 60px 0px 0px;
    }

    .restaurant .card {
        gap: 10px;
    }
    .restaurant_data .resdata_content .thumbs {
        gap: 40px;
        flex-direction: column;
    }

    /* 
    4) meeting-and-event-768-------------------]
    */
    /*********************** 
    4.1-768) meeting and event area here
    ***********************/
    .meeting {
        padding: 60px 0px;
    }

    .meeting .inner {
        gap: 30px;
    }

    .meeting .inner .items {
        grid-template-columns: repeat(1, 1fr);
        padding: 30px 20px;
    }

    .meeting .inner .items .thumb img {
        height: 250px;
    }

    .meeting .inner .items .content h2 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 10px;
    }

    .meeting .inner .items .content p {
        font-size: 16px;
        line-height: 26px;
    }

    /* 
    5) offer-768-------------------]
    */
    /*********************** 
    5.1-768) offer area here
    ***********************/
    .offer {
        padding: 60px 0px;
    }

    .offer .offer-div h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 30px;
    }

    .offer .offer-div img {
        max-width: 100%;
        border: 10px solid #fff;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
    }

    /* 
    6) gallery-768-------------------]
    */
    /*********************** 
    6.1-768) gallery area here
    ***********************/
    .gallery .inner ul {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 
    7) contact-us-768-------------------]
    */
    /*********************** 
    7.1-768) contact us area here
    ***********************/
    .contact_us .contact_wrap {
        grid-template-columns: auto;
        gap: 40px;
    }

    .contact_wrap .contact_left {
        text-align: center;
    }

    .contact_left h2 {
        padding-bottom: 16px !important;
    }

    .contact_left p {
        font-size: 16px;
        line-height: 26px;
    }

    .contact_left .form_input_sub {
        flex-direction: column;
    }

    .contact_left .form-group {
        text-align: start;
    }

    .contact_wrap .contact_right {
        text-align: center;
    }

    .contact_right .social-links {
        justify-content: center;
    }

    /* ###############################
    Additional Service Section
    ################################## */
    .add_services_sec {
        padding: 24px 0px;
    }

    .add_services_sec .add_services_inner .services_header h2 {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 6px;
    }

    .add_services_sec .add_services_inner .services_header p {
        font-size: 22px;
        line-height: 32px;
    }

    .add_services_sec .add_services_inner .services_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .add_services_sec .add_services_inner .service_icon {
        font-size: 28px;
    }

    .add_services_sec .add_services_inner .service_name {
        font-size: 14px;
        line-height: 20px;
    }

    /* =====================
    Follow Us
    ====================== */
    .follow_us .follow_us_items {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .guest-details-panel {
        width: 100%;
        left: -100%;
    }
    
    .toggle-panel-btn {
        padding: 15px 10px;
        font-size: 12px;
    }
}

/*##############################
Small Layout: ---------
5) 576px small devices
##############################*/
@media screen and (max-width: 576px) {

    /*
    1) home-576-------------------]
    */
    .container {
        max-width: 550px;
        width: 100%;
    }

    /***********************
    1.1-576) header area here
    ***********************/
    .company_logo .logo {
        display: none !important;
    }

    .header .navbar .social ul li a {
        font-size: 10px !important;
    }

    .header_body .header_left_menu ul li a {
        font-size: 0px;
    }

    .header_body .header_left_menu ul li a span {
        font-size: 20px;
        margin: 0;
    }

    .header_body .open_menu {
        font-size: 20px;
    }

    .header_logo .header_logo_initial img {
        max-width: 85px;
    }

    /***********************
    1.2-576) hero section area here
    ***********************/
    .hero-section .slide-text {
        top: 40%;
    }

    .hero-section .carousel-control-prev {
        border: none;
        left: 10px;
    }

    .hero-section .carousel-control-next {
        border: none;
        right: 10px;
    }

    .hero-section .slide-text .title1,
    .hero-section .slide-text .title2 {
        margin-bottom: 4px;
        font-size: 30px;
        line-height: 35px;
    }

    .hero-section .slide-text .title3 {
        margin-bottom: 10px;
        font-size: 30px;
        line-height: 35px;
    }

    .hero-section .slide-text .sub-title {
        font-size: 12px;
    }

    .hero_sec .slide-text {
        bottom: inherit;
        top: 50%;
        left: 50%;
        right: inherit;
        transform: translate(-50%, -50%) !important;
        text-align: center;
        max-width: 100%;
    }

    /***********************
    1.3-576) booknow area here
    ***********************/
    .about_sec .about_inner .cards-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .about_sec .about_inner .heading p {
        text-align: center;
    }

    /***********************
    1.3-576) booknow area here
    ***********************/
    .booknow .checkin_form_container {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .booknow .checkin_form_box button {
        min-height: 44px;
        height: 40px !important;
    }

    .booknow .checkin_form_box button h2 {
        font-size: 20px;
    }

    /*********************** 
    1.5-576) facility area here
    ***********************/
    .facility .facility-items {
        grid-template-columns: repeat(1, 1fr);
    }

    .facility .heading h2 {
        font-size: 30px;
        line-height: 36px;
    }

    /***********************
    1.6-576) footer area here
    ***********************/
    .footer .footer-items {
        grid-template-columns: auto;
        gap: 0px;
    }

    .footer .footer-items .footer-address {
        margin-bottom: 20px;
    }

    .footer .footer-items .footer-address h3 {
        text-align: center;
    }

    .footer .footer-items .footer-address p {
        text-align: center;
    }

    .footer .footer-items .footer-menu ul li {
        text-align: center;
    }

    .footer .footer-items .footer-menu ul li:first-child a {
        padding-top: 10px;
    }

    .footer .footer-items .footer-menu:nth-child(2) ul li:last-child {
        border-bottom: 2px solid #2b2b2b !important;
    }

    .footer .footer-bottom {
        flex-direction: column-reverse;
        gap: 10px;
    }

    /*
    2) rooms-and-suites-576-------------------]
    */
    /***********************
    2.1-576) rooms area here
    ***********************/
    .rooms .desc-features ul {
        width: 100%;
    }

    .rooms .desc-features ul li {
        width: 100% !important;
        float: none !important;
    }

    /*
    3) gallery-576-------------------]
    */
    /***********************
    3.1-576) gallery area here
    ***********************/
    .gallery .inner ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery .inner h4 {
        font-size: 26px;
        line-height: 36px;
        padding: 15px 20px;
    }

    /*
    4) book-form-576-------------------]
    */
    /***********************
    4.1-576) book form area here
    ***********************/
    .book_inner .book_group_sub {
        flex-direction: column;
    }

    .book_inner .form-group button {
        max-width: 100%;
    }

    /* Info Cards HOME */
    .info-cards-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 15px;
    }

    .info-card {
        padding: 20px;
    }

    .info-card-icon {
        font-size: 2.5rem;
    }

    .info-card-heading {
        font-size: 2.3rem;
    }

    .info-card-description {
        font-size: 2rem;
    }

    /********************************** 
        Find us section : (Nahian)
    ***********************************/
    .find-us-heading {
        font-size: 1.8rem;
    }

    .content-title {
        font-size: 1.5rem;
    }

    .find-us-content {
        padding: 0px;
    }

    .map-container {
        height: 300px;
    }

    .contact-info li {
        font-size: 0.95rem;
    }

    /********************************** 
        Blogs & Article section : (Nahian)
    ***********************************/
    .blog-heading {
        font-size: 1.8rem;
    }

    .blog-card {
        min-width: 250px;
    }

    .blog-content {
        padding: 20px 15px;
    }

    .blog-title {
        font-size: 1.2rem;
    }

    .blog-excerpt {
        font-size: 0.9rem;
    }

    /********************************** 
        location section : (Nahian)
    ***********************************/
    .location_sec {
        padding: 20px 0 40px;
    }

    .location_sec .location_inner .find-us-container {
        padding: 20px 12px;
        border-radius: 15px;
    }

    .location_sec .location_inner .map-container {
        height: 280px;
    }

    .location_sec .location_inner .content-title {
        font-size: 18px;
        line-height: 24px;
    }

    .location_sec .location_inner .content-description {
        font-size: 13px;
        line-height: 20px;
    }

    .location_sec .location_inner .locations-table {
        display: block;
        overflow-x: auto;
        font-size: 12px;
    }

    .location_sec .location_inner .locations-table td,
    .location_sec .location_inner .locations-table th {
        padding: 6px 3px;
    }

    .location_sec .location_inner .home_card_button a {
        font-size: 12px;
        padding: 6px 10px;
    }

    /********************************** 
        additional section : (Nahian)
    ***********************************/
    .add_services_sec .add_services_inner .services_header h2 {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 2px;
    }
    .add_services_sec .add_services_inner .services_header p {
        font-size: 18px;
        line-height: 28px;
    }
    .add_services_sec .add_services_inner .services_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .add_services_sec .add_services_inner .service_icon {
        font-size: 26px;
    }
    .add_services_sec .add_services_inner .service_name {
        font-size: 12px;
        line-height: 18px;
    }

    /********************************** 
        follow_us section : (Nahian)
    ***********************************/
    .follow_us .follow_us_items {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    /* =============================
        Guest detail side panel
    ================================*/
    .guest-details-panel {
        width: 100%;
    }
    .toggle-panel-btn {
        left: 100% !important;
    }
    .guest-details-panel .px-2 {
        display: inline-block;
    }



}

/*########################
#theEndRESPONSIVE########################
########################*/