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


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

1) 1400px devices
    1) home-1400-------------------]
        1.1-1400) header area here
        1.2-1400) top up button area here

    2) rooms-1400-------------------]
        2.1-1400) inner banner area here
        2.2-1400) rooms area here

    3) reservation-1400-------------------]
        3.1-1400) reservation area here

2) 1200 xlarge devices
    1) home-1200-------------------]
        1.1-1200) header 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

    2) reservation-991-------------------]
        2.1-991) reservation area here

4) 768px medium devices
    1) home-768-------------------]
        1.1-768) header area here

    2) rooms-768-------------------]
        2.1-768) inner banner 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) reservation-768-------------------]
        7.1-768) reservation area here

5) 576px small devices
    1) home-576-------------------]
        1.1-576) hero area here

    2) rooms-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

    5) reservation-576-------------------]
        5.1-576) reservation area here


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



/*##############################
Extra large: ---------
1) 1400px devices
##############################*/
@media screen and (max-width: 1400px){
    /* common css area here */
    .container {
        max-width: 1140px;
        width: 100%;
    }
    .main_btn {
        padding: 10px 24px;
        font-size: 14px;
        line-height: 20px;
    }
    /* common css area ends here */

    /*
    1) first-home-1400-------------------]
    */
    /*********************** 
    1.1-1400) first header area here
    ***********************/
    .first_header .inner .left p {
        font-size: 14px;
    }
    .first_header .inner .right ul {
        gap: 10px;
    }
    .first_header .inner .right ul li a {
        font-size: 14px;
    }

    /*********************** 
    1.2-1400) first banner area here
    ***********************/
    .first_banner .content_wrap .content {
        margin: 55px auto 0px;
    }
    .first_banner .content_wrap .content h2 {
        font-size: 38px;
        margin-bottom: 10px;
    }
    .first_banner .content_wrap .content p {
        font-size: 14px;
        line-height: 24px;
    }
    .first_banner .location_link {
        gap: 30px;
        margin-top: 30px;
    }
    .first_banner .location_link .location_btn img {
        max-width: 100px;
    }
    @keyframes rippleEffect {
    0% {
        opacity: 0.3;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
        100% {
            opacity: 0;
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
}
    }
    .first_banner .content_wrap .content .rectangle_thumb_left {
        top: 0;
        left: 0;
        max-width: 5%;
    }
    .first_banner .content_wrap .content .rectangle_thumb_right {
        top: 0;
        right: 0;
        max-width: 5%;
    }


    /* 
    2) home-1400-------------------]
    */
    /*********************** 
    2.1-1400) header area here
    ***********************/
    .header.sticky {
        padding: 9px 0;
    }
    .header .desktop_menu ul {
        gap: 16px;
    }
    .header .desktop_menu ul li a {
        font-size: 14px;
        line-height: 22px;
    }
    .header .header_cart_dropdown {
        width: 280px;
    }


    /*********************** 
    2.2-1400) top up button area here
    ***********************/
    .topUp-btn {
        bottom: 24px;
        right: 24px;
        width: 40px;
        height: 40px;
    }

    /*********************** 
    2.3-1400) hero section area here
    ***********************/
    .hero_sec .hero_inner {
        margin-top: 60px;
    }
    .hero_sec .hero_inner .left h1 {
        font-size: 38px;
        line-height: 44px;
    }
    .hero_sec .hero_inner .left p {
        font-size: 14px;
        line-height: 23px;
        margin: 6px 0px 0px;
    }
    .hero_sec .hero_inner .video_popup .expand_video {
        gap: 10px;
    }
    .hero_sec .hero_inner .video_popup .video_icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .hero_sec .hero_inner .video_popup .video_text {
        font-size: 14px;
        line-height: 24px;
        font-weight: 600;
    }
    .hero_sec .hero_inner .rectangle_thumb {
        top: -17px;
        left: -30px;
        max-width: 18%;
    }
    .hero_sec .scroll_down {
        bottom: 30px;
    }
    .hero_sec .scroll_down a {
        max-width: 60px;
    }
    @keyframes bounce {
    0%, 100% {
            transform: translate(-50%, 0);
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
        }
        50% {
            transform: translate(-50%, -15px);
            -webkit-transform: translate(-50%, -15px);
            -moz-transform: translate(-50%, -15px);
            -ms-transform: translate(-50%, -15px);
            -o-transform: translate(-50%, -15px);
        }
    }
    .hero_sec .hero_inner .right .book_button {
        bottom: -80px;
    }
    .hero_sec .hero_inner .right .book_button .main_btn {
        width: 160px;
        height: 160px;
        font-size: 16px;
        line-height: 26px;
        padding: 10px 20px;
    }
    .hero_sec .hero_inner .right .book_button .main_btn::after {
        width: 170px;
        height: 170px;
    }
    .hero_sec .hero_inner .left {
        max-width: 600px;
    }
    .hero_sec .hero_search_form {
        margin-top: 20px;
    }
    .hero_sec .hero_search_row {
        gap: 10px;
        padding: 8px 15px;
    }
    .hero_sec .hero_search_group {
        padding: 4px 14px;
        min-width: 160px;
    }
    .hero_sec .hero_search_group label {
        font-size: 12px;
        gap: 4px;
    }
    .hero_sec .hero_search_group input {
        font-size: 12px;
        line-height: 16px;
    }
    .hero_sec .hero_search_group_button .main_btn {
        padding: 9px 15px;
        font-size: 14px;
    }


    /*********************** 
    2.4-1400) about section area here
    ***********************/
    .about_sec {
        padding: 60px 0px;
    }
    .about_sec .about_inner {
        grid-template-columns: 1fr 1.5fr;
    }
    .about_sec .about_content {
        padding: 30px 40px 30px 40px;
    }
    .about_sec .about_content h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .about_sec .about_content p {
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0px 24px;
    }

    /*********************** 
    2.5-1400) room section area here
    ***********************/
    .room_sec {
        padding: 0px 0px 60px;
    }
    .room_sec .room_sec_header {
        margin-bottom: 30px;
    }
    .room_sec .room_sec_header .left h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .room_sec .room_sec_header .left p {
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0px 0px;
    }
    .room_sec .room_items .room_item .thumb img {
        height: 160px;
    }
    .room_sec .room_items .room_item .content {
        padding: 20px;
    }
    .room_sec .room_items .room_item .amenity-item {
        gap: 4px;
        font-size: 10px;
    }
    .room_sec .room_items .room_item .amenity-item i {
        font-size: 10px;
    }
    .room_sec .room_items .room_item .content h3 a {
        font-size: 20px;
        line-height: 24px;
    }
    .room_sec .room_items .room_item .content p {
        font-size: 14px;
        line-height: 22px;
    }
    .room_sec .room_info {
        gap: 14px;
        margin-top: 7px;
        padding-top: 8px;
    }
    .room_sec .room_info .info .left {
        gap: 4px;
    }
    .room_sec .room_info .info .left .reguler_price {
        font-size: 10px;
    }
    .room_sec .room_info .info .left .offer_price {
        font-size: 12px;
    }
    .room_sec .room_info .info .right {
        font-size: 10px;
    }
    .room_sec .room_info .room_rating {
        gap: 6px;
    }
    .room_sec .room_info .room_rating ul {
        gap: 2px;
    }
    .room_sec .room_info .room_rating ul li {
        font-size: 10px;
    }
    .room_sec .room_info .room_rating .number_count {
        font-size: 12px;
    }

    /*********************** 
    2.6-1400) services section here
    ***********************/
    .services_sec {
        padding: 60px 0px 40px;
    }
    .services_sec .services_header {
        margin-bottom: 24px;
    }
    .services_sec .services_header h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .services_sec .owl-theme .owl-nav {
        top: -60px;
    }

    /*********************** 
    2.6-1400) activities section here
    ***********************/
    .activities_sec {
        padding: 60px 0px 60px;
    }
    .activities_sec .activities_item img {
        height: 350px;
    }
    .activities_sec .activities_header h2 {
        font-size: 32px;
        line-height: 36px;
    }

    /*********************** 
    2.6-1400) activities section here
    ***********************/
    .blog_sec {
        padding: 60px 0px 60px;
    }
    .blog_sec .blog_item img {
        height: 200px;
    }
    .blog_sec .blog_header h2 {
        font-size: 32px;
        line-height: 36px;
    }

    /*********************** 
    2.6-1400) gallery section here
    ***********************/
    .gallery_sec {
        padding: 60px 0px 60px;
    }
    .gallery_sec .gallery_header h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .gallery_sec .gallery_grid {
        gap: 15px;
    }
    .gallery_sec .gallery_lightbox .lb_box {
        max-width: 600px;
    }
    .gallery_sec .gallery_lightbox .lb_box img {
        max-height: 300px;
    }


    /*********************** 
    2.6-1400) specials area here
    ***********************/
    .specials_section {
        padding: 0px 0px 60px;
    }
    .specials_section .specials_content h4 {
        font-size: 16px;
        line-height: 20px;
    }
    .specials_section .specials_content h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .specials_section .specials_content p {
        font-size: 20px;
        line-height: 24px;
        margin: 6px 0px 24px;
    }

    /*********************** 
    2.6-1400) inrest area here
    ***********************/
    .inrest_sec {
        padding: 60px 0px;
    }
    .inrest_sec .inrest_items {
        gap: 20px;
    }
    .inrest_sec .inrest_item .content {
        padding: 30px 15% 30px 20px;
    }
    .inrest_sec .inrest_heading h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .inrest_sec .inrest_item .content h3 {
        font-size: 24px;
        line-height: 30px;
    }
    .inrest_sec .inrest_item .content p {
        font-size: 14px;
        line-height: 22px;
        margin: 6px 0px 60px;
    }




    /*********************** 
    2.6-1400) facilities section here
    ***********************/
    .facilities {
        padding: 60px 0px;
    }
    .facilities .facilities_left h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .facilities .facilities_left p {
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0px 24px;
    }
    .facilities .facilities_items {
        gap: 20px;
    }
    .facilities .facilities_item {
        padding: 30px 15px;
        gap: 20px;
    }
    .facilities .facilities_item .facilities_icon {
        font-size: 30px;
    }
    .facilities .facilities_item .facilities_text {
        font-size: 14px;
    }

    /*********************** 
    2.7-1400) special section area here
    ***********************/
    .special_sec {
        padding: 76px 0px;
    }
    .special_sec .special_thumb img {
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }
    .special_sec .special_content {
        padding: 30px 40px 30px 40px;
    }
    .special_sec .special_content h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .special_sec .special_content p {
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0px 24px;
    }
    .special_sec .special_items {
        grid-template-columns: 1fr 2fr;
    }
    .special_sec .special_vector {
        left: 30px;
        max-width: 30%;
    }

    /*********************** 
    2.8-1400) restaurant section area here
    ***********************/
    .restaurant_sec {
        padding: 60px 0;
    }
    .restaurant_sec .restaurant_heading {
        margin-bottom: 30px;
    }
    .restaurant_sec .restaurant_heading h2 {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .restaurant_sec .restaurant_heading p {
        font-size: 14px;
        line-height: 24px;
        max-width: 600px;
    }
    .restaurant_sec .restaurant_items {
        gap: 20px;
    }
    .restaurant_sec .restaurant_item .thumb {
        height: 350px;
    }
    .restaurant_sec .restaurant_item .content {
        left: 20px;
        bottom: 20px;
        width: calc(100% - 40px);        
    }
    .restaurant_sec .restaurant_item .content h4 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .restaurant_sec .restaurant_item .content p {
        font-size: 13px;
    }


    /*********************** 
    2.9-1400) testimonial section area here
    ***********************/
    .testimonial_sec {
        padding: 60px 0;
    }
    .testimonial_sec .testimonial_heading h2 {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .testimonial_sec .testimonial_heading p {
        font-size: 14px;
        line-height: 24px;
        max-width: 600px;
    }
    .testimonial_sec .testimonial_item {
        padding: 30px 20px 20px;
    }
    .testimonial_sec .testimonial_item .thumb {
        width: 80px;
        height: 80px;
        top: -60px;
    }
    .testimonial_sec .testimonial_item .content > p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    .testimonial_sec .testimonial_item .content span {
        margin-bottom: 6px;
    }
    .testimonial_sec .testimonial_item .content span i {
        font-size: 20px;
    }
    .testimonial_sec .testimonial_item .info {
        padding-top: 15px;
    }
    .testimonial_sec .testimonial_item .left h4 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .testimonial_sec .testimonial_item .left p {
        font-size: 12px;
    }

    /*********************** 
    2.10-1400) contact section area here
    ***********************/
    .distance_sec {
        padding: 80px 0;
    }
    .distance_sec::before {
        width: 160px;
        height: 160px;
    }
    .distance_sec::after {
        width: 160px;
        height: 160px;
    }
    .distance_sec .distance_header {
        margin: 0px auto 30px;
    }
    .distance_sec .distance_header h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .distance_sec .distance_header p {
        font-size: 14px;
        line-height: 20px;
    }




    .distance_sec .contact_vector {
        left: 30px;
        max-width: 30%;
    }

    /*********************** 
    1.13-1400) main footer area here
    ***********************/
    .main-footer {
        padding: 40px 0 18px;
    }
    .main-footer .footer-logo {
        margin-bottom: 16px;
    }
    .main-footer .footer-logo a {
        max-width: 100px;
    }
    .main-footer .footer-section p {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 16px;
    }
    .main-footer .footer-social {
        gap: 10px;
    }
    .main-footer .footer-social a {
        font-size: 16px;
    }
    .main-footer .footer-content {
        gap: 30px;
        margin-bottom: 30px;
    }
    .main-footer .footer_contact li .logo {
        width: 30px;
        height: 30px;
        margin: 0px !important;
        font-size: 12px;
    }
    .main-footer .footer-section h4 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 16px;
    }
    .main-footer .footer-links a {
        font-size: 13px;
        line-height: 17px;
    }
    .main-footer .footer-bottom {
        padding-top: 18px;
    }
    .main-footer .footer-bottom-content p {
        font-size: 12px;
        line-height: 14px;
    }
    .main-footer .footer-bottom-content ul {
        gap: 10px;
    }
    .main-footer .footer-bottom-content ul li {
        font-size: 12px;
        line-height: 14px;
    }
    .main-footer .footer_contact li .desc {
        font-size: 13px;
    }
    .main-footer .footer-bottom-content .left p {
        font-size: 13px;
    }
    .main-footer .footer-bottom-content .right p {
        font-size: 13px;
    }
    .main-footer .footer-bottom-content .right p img {
        max-width: 20px;
    }
    .main-footer .footer-bottom-content .right p a {
        font-size: 13px;
    }

    /* floating button area here */
    .floating_book_button .main_btn {
        width: 70px;
        height: 70px;
        font-size: 10px;
        line-height: 16px;
    }
    .floating_book_button .main_btn::after {
        width: 64px;
        height: 64px;
    }
    .floating_book_button2 .main_btn {
        width: 70px;
        height: 70px;
        font-size: 10px;
        line-height: 16px;
    }
    .floating_book_button2 .main_btn::after {
        width: 64px;
        height: 64px;
    }


    /*
    3) about-1400-------------------]
    */
    /***********************
    2.1-1400) inner banner area here
    ***********************/
    .inner_banner {
        height: 400px;
    }
    .inner_banner .inner_banner_inner {
        margin-top: 62px;
    }
    .inner_banner .inner_banner_inner h2 {
        font-size: 36px;
        margin-bottom: 10px;
    }
    .inner_banner .inner_banner_inner ul {
        gap: 6px;
    }
    .inner_banner .inner_banner_inner ul li a {
        font-size: 14px;
    }
    .inner_banner .inner_banner_inner ul li span {
        font-size: 12px;
    }
    .header .desktop_menu .header_user_profile button {
        padding: 6px 20px;
    }
    .inner_banner .inner_banner_inner .rectangle_thumb {
        left: -30px;
        max-width: 4%;
    }
    .inner_banner2 {
        height: 350px;
    }


    /***********************
    2.2-1400) about welcome area here
    ***********************/
    .about_welcome {
        padding: 60px 0px;
    }
    .about_welcome .left {
        padding: 30px 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .about_welcome .left p {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .about_welcome .about_welcome_inner .about_welcome_vector {
        left: 2%;
        max-width: 12%;
    }
    .about_welcome .right {
        margin-left: -80px;
    }
    .about_welcome .right img {
        height: 400px;
    }

    /***********************
    2.3-1400) about details area here
    ***********************/
    .about_details {
        padding: 60px 0px;
    }
    .about_details .about_details_header {
        margin-bottom: 30px;
    }
    .about_details .about_details_header span {
        margin-bottom: 6px;
    }
    .about_details .about_details_header h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .about_details .about_details_item {
        gap: 30px;
        margin-bottom: 40px;
    }
    .about_details .about_details_item .left h3 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .about_details .about_details_item .left p {
        font-size: 14px;
        line-height: 24px;
    }
    .about_details .about_details_item .right .thumb::after {
        width: 20px;
    }
    .about_details .about_details_item .right .thumb::before {
        width: 20px;
    }
    .about_details .about_details_item .right .thumb img {
        height: 350px;
    }


    /***********************
    2.3-1400) faq area here
    ***********************/
    .faq {
        padding: 60px 0px;
    }
    .faq .faq_inner {
        gap: 30px;
    }
    .faq .left h2 {
        font-size: 32px;
        line-height: 42px;
        margin-bottom: 14px;
    }
    .faq .left p {
        font-size: 14px;
        line-height: 24px;
    }
    .faq .faq_question {
        padding: 15px 15px;
    }
    .faq .faq_question h3 {
        font-size: 16px;
        line-height: 26px;
    }
    .faq .faq_icon {
        width: 24px;
        height: 24px;
    }
    .faq .faq_icon i {
        font-size: 10px;
    }
    .faq .faq_answer {
        padding: 0 15px;
    }
    .faq .faq_answer p {
        padding: 8px 0px 14px;
        font-size: 14px;
        line-height: 24px;
    }


    /*
    3) gallery-1400-------------------]
    */
    /***********************
    3.1-1400) gallery area here
    ***********************/
    .gallery {
        padding: 60px 0px;
    }
    .gallery .inner {
        gap: 40px;
    }
    .gallery .inner h4 {
        font-size: 24px;
        line-height: 30px;
        padding: 10px 15px;
    }
    .gallery .inner ul {
        margin-top: 30px;
    }


    /*
    4) room-details-1400-------------------]
    */
    /***********************
    4.1-1400) room details area here
    ***********************/
    .room_details_page .rdg_item img {
        height: 280px !important;
    }
    .room_details_page .vedio_sec {
        height: 280px !important;
    }
    .room_details_page .policy_item {
        gap: 10px;
    }
    .room_details_page .policy_item:not(:last-child)::before {
        left: 13px;
        top: 26px;
        width: 1px;
    }
    .room_details_page .policy_number {
        width: 26px;
        height: 26px;
        border: 1px solid var(--primary);
    }


    /*
    5) restaurant-1400-------------------]
    */
    /***********************
    5.1-1400) restaurant section area here
    ***********************/
    .res_hero .res_items {
        height: 300px;
    }
    .res_hero .res_item {
        padding: 30px 15px;
    }
    .res_hero .res_item h4 {
        font-size: 20px;
        line-height: 26px;
    }
    .res_hero .res_item p {
        font-size: 12px;
        line-height: 14px;
    }
    .res_hero .res_item p span {
        margin-right: 2px;
    }

    /***********************
    5.2-1400) restaurant about area here
    ***********************/
    .res_about .res_inner {
        gap: 20px;
    }
    .res_about .res_inner .content h2 {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 10px;
    }
    .res_about .res_inner .content p {
        font-size: 14px;
        line-height: 21px;
        margin: 0px 0px 10px;
    }
    .res_about .res_inner .content h4 {
        font-size: 18px;
        line-height: 20px;
        margin: 18px 0px 4px;
    }

    /***********************
    5.3-1400) restaurant card area here
    ***********************/
    .res_card .res_items {
        gap: 20px;
    }
    .res_card .res_item h2 {
        font-size: 26px;
        line-height: 32px;
    }
    .res_card .res_item:first-child h2 {
        margin-bottom: 16px;
    }
    .res_card .res_item img {
        height: 200px;
        border-radius: 14px;
    }
    .res_card .res_item h4 {
        font-size: 20px;
        margin-top: 16px;
    }
    .res_card .res_item:nth-child(2) img {
        height: 400px;
    }
    .res_card .res_item:nth-child(3) img {
        height: 300px;
    }

    /***********************
    5.4-1400) restaurant menu area here
    ***********************/
    .res_menu .res_wrap .res_inner h2 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 24px;
    }
    .res_menu .res_wrap .res_item img {
        width: 150px;
        height: 150px;
    }
    .res_menu .res_wrap .res_item h4 {
        font-size: 20px;
        line-height: 24px;
        margin: 18px 0px 2px;
    }
    .res_menu .res_wrap .res_item p {
        font-size: 14px;
        line-height: 18px;
    }


    /*
    5) restaurant-1400-------------------]
    */
    /***********************
    5.1-1400) restaurant area here
    ***********************/
    .first_rest .wrap .section-header {
        padding: 30px 20px;
    }
    .first_rest .wrap .section-header .border-right,
    .first_rest .wrap .section-header .border-left {
        width: 2px;
    }
    .first_rest .wrap .section-header::before,
    .first_rest .wrap .section-header::after {
        height: 2px;
    }
    .first_rest .wrap .section-header h2 {
        margin-bottom: 8px;
        font-size: 32px;
        line-height: 40px;
    }
    .first_rest .wrap .section-header p {
        font-size: 14px;
        line-height: 23px;
        font-weight: 400;
        color: var(--para);
        position: relative;
        z-index: 3;
    }

    .first_rest .our_menu_wrap { 
        gap: 30px;
        margin: 40px 0px 0px;
    }
    .first_rest .our_menu_wrap .content > h4 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .first_rest .our_menu_wrap .content > h2 {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 8px;
    }
    .first_rest .our_menu_wrap .content > p {
        font-size: 14px;
        line-height: 22px;
        margin: 0 0 20px;
    }
    .first_rest .our_menu_wrap .item span {
        font-size: 16px;
    }
    .first_rest .our_menu_wrap .item {
        gap: 8px;
    }
    .first_rest .our_menu_wrap .item_content h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .first_rest .thumb_wrap {
        padding: 40px 0px 60px;
    }
    .first_rest .thumb_wrap .inner .item .thumb img {
        height: 300px;
    }
    .first_rest .thumb_wrap .inner .item .content h4 {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .first_rest {
        padding: 60px 0px 0px;
    }
    .first_rest .menu_wrap {
        padding: 60px 0px 36px;
    }
    .first_rest .menu_wrap .section-header h2 {
        margin-bottom: 6px;
        font-size: 32px;
        line-height: 40px;
    }
    .first_rest .menu_wrap .section-header p {
        font-size: 14px;
        line-height: 23px;
    }
    .first_rest .menu_wrap .section-header {
        margin-bottom: 60px;
    }
    .first_rest .menu_wrap .items {
        gap: 20px;
    }
    .first_rest .menu_wrap .item {
        padding: 0px 20px 30px;
        margin-bottom: 20px;
    }
    .first_rest .menu_wrap .item h3 {
        font-size: 24px;
        margin: -20px auto 0px;
    }
    .first_rest .menu_wrap .item ul {
        margin: 30px 0px 0px;
    }
    .first_rest .menu_wrap .item ul li {
        gap: 6px;
    }
    .first_rest .menu_wrap .item ul li:not(:last-child) {
        margin-bottom: 20px;
    }

    .first_rest .menu_wrap .item ul li span {
        font-size: 19px;
    }
    .first_rest .menu_wrap .item ul li .content .left h4 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .first_rest .menu_wrap .item ul li .content .left p {
        line-height: 22px;
    }
    .first_rest .menu_wrap .item ul li .content .right p {
        font-size: 13px;
        line-height: 19px;
    }

    .first_rest .open_hours {
        padding: 60px 0px;
    }
    .first_rest .open_hours .section-header {
        margin-bottom: 30px;
    }
    .first_rest .open_hours .section-header h2 {
        margin-bottom: 6px;
        font-size: 32px;
        line-height: 40px;
    }
    .first_rest .open_hours .section-header p {
        max-width: 500px;
        font-size: 14px;
        line-height: 22px;
    }
    .first_rest .open_hours .hours_grid {
        gap: 20px;
    }
    .first_rest .open_hours .hours_card {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .first_rest .open_hours .card_header {
        padding: 24px 20px;
    }
    .first_rest .open_hours .day_icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .first_rest .open_hours .card_header h3 {
        font-size: 20px;
    }
    .first_rest .open_hours .card_body {
        padding: 20px;
    }
    .first_rest .open_hours .timing_item .meal_type {
        font-size: 14px;
        line-height: 22px;
    }
    .first_rest .open_hours .timing_item .time {
        font-size: 14px;
        line-height: 22px;
    }
    .first_rest .open_hours .timing_item {
        padding: 8px 0;
    }


    /*
    2) rooms-1400-------------------]
    */
    /***********************
    2.2-1400) rooms area here
    ***********************/
    .rooms {
        padding: 60px 0px;
    }
    .rooms .widget-rooms-list {
        gap: 20px;
    }
    .rooms .item-desc {
        text-align: start !important;
    }
    .rooms .item-desc h2 {
        line-height: 26px;
    }
    .rooms .item-desc p {
        margin-bottom: 16px !important;
        font-size: 14px !important;
        line-height: 22px !important;
    }
    .rooms .desc-features li {
        height: 30px !important;
    }
    .rooms .price-inner h3 {
        font-size: 24px !important;
    }
    .rooms .price-inner h5 {
        padding: 8px 0px 14px !important;
        font-size: 14px !important;
    }
    .rooms .price-inner ul li button {
        padding: 9px 20px !important;
        font-size: 12px;
        line-height: 100%;
    }

    /*
    3) reservation-1400-------------------]
    */
    /***********************
    3.1-1400) reservation area here
    ***********************/
    .reservation_sec {
        padding: 50px 0px 50px;
    }
    .reservation_sec .search-box {
        padding: 20px 15px;
    }
    .reservation_sec .search-form label {
        font-size: 12px;
        margin-bottom: 4px;
        gap: 4px;
    }
    .reservation_sec .search-form label i {
        font-size: 12px;
    }
    .reservation_sec .search-box .border-left {
        width: 2px;
    }
    .reservation_sec .search-box .border-right {
        width: 2px;
    }
    .reservation_sec .search-box::after {
        height: 2px;
    }
    .reservation_sec .search-box::before {
        height: 2px;
    }
    .reservation_sec .search-title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 24px;
    }
    .reservation_sec .search-form input, .reservation_sec .search-form select {
        padding: 10px 15px;
        font-size: 12px;
        line-height: 14px;
    }
    .reservation_sec .number-input-wrapper input[type="number"] {
        padding: 10px 12px;
        font-size: 12px;
    }
    .reservation_sec .number-btn {
        height: 46px;
        font-size: 12px;
    }
    .reservation_sec .main_btn {
        padding: 13px 15px;
    }
    .reservation_sec .reservation-grid {
        grid-template-columns: 1fr 350px;
        gap: 20px;
        margin-top: 40px;
    }
    .reservation_sec .section-title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 30px;
    }
    .reservation_sec .rooms-container {
        display: grid;
        gap: 15px;
    }
    .reservation_sec .room-card {
        grid-template-columns: 200px 1fr;
    }
    .reservation_sec .room-details {
        padding: 0px 20px 20px 20px;
    }
    .reservation_sec .room-header h3 {
        font-size: 18px;
        padding: 8px 20px;
        margin: 0px -20px;
    }
    .reservation_sec .room-info-grid {
        gap: 10px;
        margin-bottom: 10px;
    }
    .reservation_sec .info-value {
        font-size: 12px;
    }
    .reservation_sec .select-room-btn {
        padding: 8px 15px;
        font-size: 14px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }
    .reservation_sec .available-badge {
        top: 10px;
        right: 10px;
        padding: 10px 12px;
    }
    .reservation_sec .available-badge small {
        font-size: 12px;
    }
    .reservation_sec .available-badge span {
        font-size: 18px;
    }
    .reservation_sec .sidebar-header h3 {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .reservation_modal .modal-content {
        padding: 30px 15px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .reservation_modal .modal-icon {
        font-size: 60px;
    }
    .reservation_modal .modal-btn {
        padding: 10px 40px;
        font-size: 14px;
    }
    .reservation_sec .selected-rooms {
        padding: 24px 15px;
        border-bottom: 1px solid var(--primary);
    }
    .reservation_sec .tab-content {
        padding: 20px 15px;
    }
    .reservation_sec .tab-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    .reservation_sec .guest-form label {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .reservation_sec .guest-form input, .reservation_sec .guest-form select, .reservation_sec .guest-form textarea {
        padding: 8px 15px;
        font-size: 14px;
    }
    .reservation_sec .guest-form .form-field {
        margin-bottom: 10px;
    }
    .reservation_sec .room-image img {
        height: 210px;
    }


    /*
    4) user-login-1400-------------------]
    */
    /***********************
    4.1-1400) user login area here
    ***********************/
    .lr_section .register_card {
        padding: 40px 30px;
    }
    .lr_section .left_section::before,
    .lr_section .left_section::after {
        width: 60px;
        height: 60px;
    }
    .lr_section .left_content h2 {
        font-size: 32px;
        margin-bottom: 14px;
    }
    .lr_section .left_content p {
        font-size: 14px;
        line-height: 20px;
    }
    .lr_section .register_card h2 {
        font-size: 26px;
    }
    .lr_section .register_card > p {
        margin-bottom: 16px;
    }
    .lr_section .divider {
        margin: 12px 0;
        font-size: 12px;
    }
    .lr_section .login-link {
        margin-top: 14px;
    }


    /*
    5) spa-1400-------------------]
    */
    /***********************
    5.1-1400) spa area here
    ***********************/
    .spa_sec {
        padding: 60px 0px;
    }
    .spa_sec .spa_inner {
        gap: 20px;
    }
    .spa_sec .spa_items {
        gap: 20px;
    }
    .spa_sec .spa_item .content {
        padding: 20px 15px 24px;
    }
    .spa_sec .spa_item .content h2 {
        font-size: 20px;
        line-height: 26px;
        margin: 4px 0px 5px;
    }
    .spa_sec .spa_item .content p {
        font-size: 14px;
        line-height: 21px;
        margin: 0px 0px 8px;
    }
    .spa_sec .spa_item .content span {
        font-size: 14px;
        line-height: 21px;
    }
    .spa_sec .spa_item .thumb {
        height: 280px;
    }
    .spa_sec .left .spa_item:first-child .thumb {
        height: 230px;
    }
    .spa_sec .spa_item .content .main_btn {
        margin-top: 12px;
    }


    /*
    6) activities-1400-------------------]
    */
    /***********************
    6.1-1400) activities hero area here
    ***********************/
    .activities_hero {
        padding: 60px 0px;
    }
    .activities_hero .activities_items {
        gap: 20px;
    }
    .activities_hero .activities_item h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .activities_hero .activities_item p {
        font-size: 14px;
        line-height: 22px;
        margin: 0px 0px 8px;
    }

    /***********************
    6.2-1400) activities gallery area here
    ***********************/
    .activities_gallery {
        padding: 60px 0px;
    }
    .activities_gallery .activities_heading h2 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 28px;
    }
    .activities_gallery .activities_thumbs {
        gap: 15px;
    }

    /*
    7) meeting-1400-------------------]
    */
    /***********************
    7.1-1400) meeting hero area here
    ***********************/
    .meeting_hero {
        padding: 60px 0px;
    }
    .meeting_hero .meeting_inner .thumb img {
        height: 350px;
    }
    .meeting_hero .meeting_items {
        gap: 20px;
    }
    .meeting_hero .meeting_item h4 {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 3px;
    }
    .meeting_hero .meeting_item h2 {
        font-size: 28px;
        line-height: 34px;
    }
    .meeting_hero .meeting_item p {
        font-size: 14px;
        line-height: 20px;
    }
    .meeting_hero .meeting_item:last-child p:first-child {
        margin-bottom: 15px;
    }
    .meeting_hero .meeting_item:last-child p {
        padding: 10px 15px;
    }
    .meeting_hero .phone_group h4 {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 7px;
    }
    .meeting_hero .phone_items li {
        font-size: 12px;
        line-height: 20px;
    }





    /***********************
    7.2-1400) meeting card area here
    ***********************/
    .meeting_card {
        padding: 60px 0px;
    }
    .meeting_card .meeting_inner {
        gap: 40px;
    }
    .meeting_card .meeting_item {
        gap: 20px;
    }
    .meeting_card .meeting_item .right .content h2 {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 10px;
    }
    .meeting_card .meeting_item .right .content p {
        font-size: 14px;
        line-height: 22px;
        margin: 0px 0px 10px;
    }
    .meeting_card .meeting_item .right ul {
        margin: 16px 0px 22px;
    }
    .meeting_card .meeting_item .right ul li {
        font-size: 14px;
    }
    .meeting_card .meeting_item .left .list p {
        font-size: 14px;
        line-height: 20px;
        gap: 4px;
    }
    .meeting_card .meeting_item .left .list p span {
        font-size: 20px;
    }
    .meeting_card .meeting_item .left .thumb img {
        height: 330px;
    }
    .meeting_card .meeting_item .left .lists {
        padding: 12px 15px;
    }
    .meeting_card .meeting_item .left .thumb::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 14%, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0) 46%);
    }

    /*
    7) director-1400-------------------]
    */
    /***********************
    7.1-1400) director area here
    ***********************/
    .director {
        padding: 60px 0px;
    }
    .director .director_items {
        gap: 20px;
    }
    .director .director_item .thumb img {
        height: 300px;
    }
    .director .director_item .content {
        padding: 14px 15px;
    }
    .director .director_item .content h4 {
        font-size: 20px;
        line-height: 24px;
        margin: 0px 0px 6px;
    }
    .director .director_item .content p {
        font-size: 16px;
        line-height: 20px;
    }

    /***********************
    7.2-1400) director descripton area here
    ***********************/
    .director_des {
        padding: 60px 0px;
    }
    .director_des .director_des_items {
        gap: 30px;
    }
    .director_des .director_des_item {
        gap: 20px;
    }
    .director_des .director_des_item_border {
        height: 1px;
    }
    .director_des .director_des_item .content h2 {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .director_des .director_des_item .content p {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 6px;
    }
    .director_des .director_des_item .content h4 {
        font-size: 15px;
        line-height: 18px;
        margin-bottom: 4px;
    }

}

/*############################## 
Extra large: ---------
2) 1200 xlarge devices
##############################*/
@media screen and (max-width: 1200px){
    /* common css area here */
    .container {
        max-width: 1100px;
        width: 100%;
        padding: 0px 15px;
    }
    /* common css area ends here */

    /* 
    1) home-1200-------------------]
    */
    /*********************** 
    1.1-1200) header area here
    ***********************/
    /* .header .container-fluid {
        padding: 0px 15px;
    } */

    /*********************** 
    1.2-1200) hero area here
    ***********************/
    .hero_sec .slide-image {
        max-height: 100vh !important;
    }

        
    /*********************** 
    1.2-1200) gallery section area here
    ***********************/
    .gallery_sec .gallery_lightbox .lb_box {
        max-width: 500px;
    }

    /*********************** 
    1.3-1200) about us area here
    ***********************/
    /* .about-us .about-us-inner {
        gap: 20px;
    }
    .about-us .about-us-content h2 {
        font-size: 60px;
    }
    .about-us .content p {
        font-size: 16px;
        line-height: 26px;
    } */

    /*********************** 
    1.4-1200) welcome popup area here
    ***********************/
    /* .welcome_overlay .welcome_popup {
        overflow-y: scroll;
        padding: 40px 0px;
    }
    .contact-section .contact-grid {
        grid-template-columns: 1fr 1fr;
    } */

    /* 
    2) about-1200-------------------]
    */
    /*********************** 
    2.1-1200) about welcome area here
    ***********************/
    .about_welcome .about_welcome_inner {
        gap: 20px;
    }
    .about_welcome .left p {
        font-size: 16px;
        line-height: 24px;
    }
    .about_welcome .right {
        margin-left: 0;
    }
    .about_welcome .right img {
        height: 320px;
    }

    /*********************** 
    2.2-1200) about details area here
    ***********************/
    .about_details .about_details_header span {
        margin-bottom: 4px;
        font-size: 12px;
    }
    .about_details .about_details_header h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .about_details .about_details_item .left h3 {
        margin-bottom: 6px;
    }
    .about_details .about_details_item .right .thumb img {
        height: 300px;
    }

    /*********************** 
    2.2-1200) faq ara here
    ***********************/
    .faq .left h2 {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 10px;
    }
    .faq .faq_question {
        padding: 10px 15px;
    }

    /* 
    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;
    } */

    
    /* 
    4) restaurant-1200-------------------]
    */
    /*********************** 
    4.1-1200) restaurant area here
    ***********************/
    .first_rest .wrap .section-header {
        padding: 20px 15px;
    }
    .first_rest .wrap .section-header h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .first_rest .wrap .section-header p {
        line-height: 22px;
    }
    .first_rest .our_menu_wrap .content > h4 {
        font-size: 12px;
        margin-bottom: 2px;
    }
    .first_rest .our_menu_wrap .content > h2 {
        font-size: 24px;
        line-height: 32px;
    }
    .first_rest .our_menu_wrap .item_content h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .first_rest .menu_wrap .section-header {
        margin-bottom: 50px;
    }
    .first_rest .menu_wrap .section-header h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .first_rest .menu_wrap .item h3 {
        font-size: 20px;
    }
    .first_rest .menu_wrap .item ul {
        margin: 20px 0px 0px;
    }
    .first_rest .menu_wrap .item ul li .content .left h4 {
        font-size: 16px;
    }
    .first_rest .menu_wrap .item ul li span {
        font-size: 16px;
    }
    .first_rest .menu_wrap .item ul li .content .right p {
        font-size: 12px;
        line-height: 18px;
    }
    .first_rest .open_hours .section-header h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .first_rest .open_hours .timing_item .time {
        font-size: 12px;
        line-height: 20px;
    }

    /* 
    4) room-1200-------------------]
    */
    /*********************** 
    4.1-1200) room area here
    ***********************/
    .room_sec .room_text_thumb {
        display: none;
    }
    .room_sec .room_items button:first-child {
        left: 10px;
    }
    .room_sec .room_items button:last-child {
        right: 10px !important;
    }


}

/*##############################
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
    ***********************/
    /* mobile device area here */
    .header .desktop_menu {
        display: none;
    }
    .header .menu-icon {
        position: inherit;
        display: block;
    }
    .header #menu .header_user_profile button {
        width: 100%;
        margin-top: 40px;
        padding: 12px 20px;
        font-size: 20px;
        line-height: 100%;
    }
    .header #mobileMenu .header_user_profile {
        text-align: center;
    }
    .header #mobileMenu .header_user_profile button {
        max-width: calc(100% - 20px);
        width: 100%;
        margin: 40px auto 0px;
        background: var(--dark);
    }
    .header #mobileMenu .header_user_profile button:hover {
        background: var(--primary-hover);
    }
    .header .menu-open .header_user_profile a {
        display: none !important;
    }
    .header .menu_cart_grp {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /*********************** 
    1.1-991) hero area here
    ***********************/
    .hero_sec .hero_inner .rectangle_thumb {
        display: none;
    }
    .hero_sec .hero_search_group {
        min-width: 110px;
    }
    .hero_sec .hero_inner .right .book_button {
        bottom: -40px;
    }
    .hero_sec .hero_inner .right .book_button .main_btn {
        width: 100px;
        height: 100px;
        font-size: 14px;
        line-height: 20px;
        padding: 8px 10px;
    }
    .hero_sec .hero_inner .right .book_button .main_btn::after {
        width: 110px;
        height: 110px;
    }


    /*********************** 
    1.1-991) about section area here
    ***********************/
    .about_sec .about_content {
        padding: 30px 20px 30px 20px;
    }
    .about_sec .about_text_thumb {
        max-width: 52%;
    }
    @keyframes slideLeftRight {
        0%, 100% {
            left: 0;
        }
        50% {
            left: calc(100% - 52%);
        }
    }
    @-webkit-keyframes slideLeftRight {
        0%, 100% {
            left: 0;
        }
        50% {
            left: calc(100% - 52%);
        }
    }

    /*********************** 
    1.1-991) room section area here
    ***********************/
    .room_sec .room_items {}
    .room_sec .room_items .room_item .content {
        padding: 20px 15px;
    }
    .room_sec .room_items .sold-out-text {
        font-size: 14px;
        padding: 6px 20px;
    }
    .room_sec .room_items .room_item .content h3 a {
        font-size: 18px;
        line-height: 22px;
    }
    .room_sec .room_text_thumb {
        display: none;
    }

    /*********************** 
    1.1-991) facilities section area here
    ***********************/
    .facilities .facilities_inner {
        grid-template-columns: 1fr 1.5fr;
        gap: 30px;
    }
    .facilities .facilities_items {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .facilities .facilities_item {
        padding: 20px 15px;
        gap: 14px;
    }
    .facilities .facilities_item .facilities_icon {
        font-size: 20px;
    }

    /*********************** 
    1.1-991) special section area here
    ***********************/
    .special_sec .special_items {
        grid-template-columns: 1fr 1.5fr;
    }
    .special_sec .special_content {
        padding: 30px 20px 30px 20px;
    }
    .special_sec .special_vector {
        display: none;
    }



    /*********************** 
    1.1-991) restaurant section area here
    ***********************/
    .restaurant_sec .restaurant_items {
        gap: 15px;
    }
    .restaurant_sec .restaurant_item .thumb {
        height: 300px;
    }

    /*********************** 
    1.1-991) contact section area here
    ***********************/
    .distance_sec .contact_items {
        grid-template-columns: 1.5fr 1fr;
    }

    /*
    2) about-991-------------------]
    */
    /*********************** 
    2.1-991) inner banner area here
    ***********************/
    .inner_banner .inner_banner_inner .rectangle_thumb {
        display: none;
    }

    /*********************** 
    2.1-991) about welcome area here
    ***********************/
    .about_welcome .about_welcome_inner .about_welcome_vector {
        display: none;
    }


    /*
    2) restaurant-991-------------------]
    */
    /*********************** 
    2.1-991) restaurant hero area here
    ***********************/
    .res_hero .res_separator {
        display: none;
    }

    /*********************** 
    2.2-991) restaurant about area here
    ***********************/
    .res_about .res_inner {
        grid-template-columns: 1fr 1fr;
    }


    /*********************** 
    2.3-991) restaurant menu area here
    ***********************/
    .res_menu .res_wrap .res_items {
        grid-template-columns: repeat(3, 1fr);
    }


    /*
    2) reservation-991-------------------]
    */
    /*********************** 
    2.1-991) reservation area here
    ***********************/
    .reservation_sec .reservation-grid {
        grid-template-columns: auto;
        gap: 40px;
    }
    .reservation_sec .room-details {
        padding: 0px 15px 20px 15px;
    }


    /*
    4) room details-991-------------------]
    */
    /***********************
    4.1-991) room details area here
    ***********************/
    .room_details .type_items {
        grid-template-columns: repeat(2, 1fr);
    }
    .room_details .feature_items ul {
        grid-template-columns: repeat(2, 1fr);
    }


    /*
    5) meeting-991-------------------]
    */
    /***********************
    5.1-991) meeting card area here
    ***********************/
    .meeting_card .meeting_item .right ul {
        grid-template-columns: repeat(2, 1fr);
    }


}

/*##############################
Medium Layout: ---------
4) 768px medium devices
##############################*/
@media screen and (max-width: 768px){
    /* common css area here */
    .container {
        max-width: 750px;
        width: 100%;
    }
    /* common css area ends here */

    /* 
    1) home-768-------------------]
    */
    /*********************** 
    1.2-768) hero area here
    ***********************/
    .hero_sec .scroll_down {
        display: none;
    }
    .hero_sec .hero_search_row {
        grid-template-columns: 1fr;
        padding: 20px 10px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
    .hero_sec .hero_search_group {
        padding: 8px 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
    .hero_sec .hero_search_group_button .main_btn {
        padding: 8px 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .hero_sec .hero_inner .left h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .hero_sec .hero_inner .left p {
        font-size: 13px;
        line-height: 20px;
        margin: 4px 0px 0px;
    }
    .hero_sec .hero_search_form {
        margin-top: 14px;
    }
    .hero_sec .hero_search_group {
        padding: 4px 15px;
    }


    /*********************** 
    1.4-768) about section area here
    ***********************/
    .about_sec .about_inner {
        grid-template-columns: auto;
    }
    .about_sec .about_thumb img {
        height: 300px;
    }

    /*********************** 
    1.5-768) room section area here
    ***********************/
    .room_sec .room_items {}
    .room_sec .room_sec_header {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }
    .room_sec .room_items button {
        margin: 0px 5px !important;
        position: inherit;
        top: inherit;
        left: inherit;
        transform: inherit;
        -webkit-transform: inherit;
        -moz-transform: inherit;
        -ms-transform: inherit;
        -o-transform: inherit;
    }


    /*********************** 
    1.5-768) services area here
    ***********************/
    .services_sec .services_header {
        margin-right: 0px;
    }
    .services_sec .services_item p {
        margin: 4px 0px 20px;
    }
    .services_sec .owl-theme .owl-nav {
        position: inherit;
        right: inherit;
        top: inherit !important;
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .services_sec .owl-theme .owl-nav button {
        position: inherit !important;
        right: inherit !important;
        top: inherit !important;
    }



    /*********************** 
    1.6-768) activities area here
    ***********************/
    .activities_sec .activities_header h2 {
        margin-right: 0;
    }
    .activities_sec .owl-theme .owl-nav {
        position: inherit;
        right: inherit;
        top: inherit !important;
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .activities_sec .owl-theme .owl-nav button {
        position: inherit !important;
        right: inherit !important;
        top: inherit !important;
    }


    /*********************** 
    1.6-768) blog area here
    ***********************/
    .blog_sec .blog_header {
        margin-right: 0px;
    }
    .blog_sec .owl-theme .owl-nav {
        position: inherit;
        right: inherit;
        top: inherit !important;
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .blog_sec .owl-theme .owl-nav button {
        position: inherit !important;
        right: inherit !important;
        top: inherit !important;
    }




    /*********************** 
    1.5-768) inrest area here
    ***********************/
    .inrest_sec .inrest_item .content {
        padding: 30px 15px;
    }
    .inrest_sec .inrest_items {
        grid-template-columns: inherit;
        gap: 20px;
    }


    /*********************** 
    1.6-768) gallery section here
    ***********************/
    .gallery_sec .gallery_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery_sec .gallery_lightbox .lb_box {
        max-width: 250px;
    }
    .gallery_sec .gallery_lightbox .lb_box img {
        max-height: 250px;
    }
    .gallery_sec1 .gallery_header {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
    }



    /*********************** 
    1.5-768) facilities section area here
    ***********************/
    .facilities .facilities_inner {
        grid-template-columns: auto;
        gap: 30px;
    }

    /*********************** 
    1.5-768) special section area here
    ***********************/
    .special_sec .special_items {
        grid-template-columns: auto;
    }
    .special_sec .special_content {
        padding: 30px 15px 30px 15px;
    }
    .special_sec .special_thumb img {
        min-height: 250px;
        height: 250px;
    }

    
    /*********************** 
    1.5-768) insert section area here
    ***********************/
    .inrest_sec .owl-nav {
        position: inherit;
        right: inherit;
        top: inherit !important;
        margin-top: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .inrest_sec .owl-nav button {
        position: inherit !important;
        right: inherit !important;
        top: inherit !important;
    }

    /*********************** 
    1.5-768) restaurant section area here
    ***********************/
    .restaurant_sec .restaurant_items {
        grid-template-columns: repeat(2, 1fr);
    }

    /*********************** 
    1.5-768) facility area here
    ***********************/
    .distance_sec {
        padding: 76px 0 60px;
    }
    .distance_sec .contact_items {
        grid-template-columns: auto;
    }
    .distance_sec .contact_map iframe {
        height: 370px;
    }
    .distance_sec .distance_row.t_head {
        font-size: 18px;
        line-height: 22px;
    }
    .distance_sec .distance_row {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 18px;
    }











    /*********************** 
    1.12-768) main footer area here
    ***********************/
    .main-footer .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
    }


    /*********************** 
    2.2-768) rooms area here
    ***********************/
    .rooms .widget-rooms-list {
        gap: 20px;
    }
    .rooms .rooms-item {
        grid-template-columns: auto;
    }
    .rooms .item-photo {
        height: 200px !important;
    }
    .rooms .item-photo a {
        background-position: center !important;
    }
    .rooms .item-desc {
        padding: 20px 15px !important;
    }
    .rooms .item-desc p {
        font-size: 14px !important;
    }
    .rooms .desc-features ul li {
        height: auto !important;
        padding-bottom: 12px;
        width: 50% !important;
        float: left !important;
    }
    .rooms .price-inner {
        padding: 20px 15px !important;
    }
    .rooms .item-price::after {
        width: 100% !important;
        background: -moz-linear-gradient(
            left,
            rgba(0, 0, 0, 0.03) -100%,
            rgba(0, 0, 0, 0.03) 100%
        ) !important;
        background: -webkit-linear-gradient(
            left,
            rgba(0, 0, 0, 0.03) -100%,
            rgba(0, 0, 0, 0.03) 100%
        ) !important;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.03) -100%,
            rgba(0, 0, 0, 0.03) 100%
        ) !important;
    }
    .rooms .price-inner h3 {
        font-size: 24px !important;
    }
    .rooms .price-inner h5 {
        padding: 6px 0px 10px !important;
        font-size: 14px !important;
    }
    .rooms .price-inner ul li button h2 {
        font-size: 14px;
    }

    /*
    3) restaurant-768-------------------]
    */
    /*********************** 
    3.1-768) restaurant hero area here
    ***********************/
    .res_hero .res_items {
        height: auto;
    }
    .res_hero .res_item {
        padding: 0px 15px 24px;
    }
    .res_hero .res_item:last-child {
        padding-bottom: 0px;
    }
    .res_hero .res_items .content {
        flex-direction: column;
        padding: 30px 0px;
    }
    .res_hero .res_item p {
        line-height: 16px;
    }

    /*********************** 
    3.1-768) restaurant about area here
    ***********************/
    .res_about .res_inner {
        grid-template-columns: auto;
        gap: 30px;
    }
    .res_about .res_inner .thumb img {
        height: 250px;
        object-fit: contain;
    }
    .res_about .res_inner .content {
        text-align: center;
    }

    /*********************** 
    3.1-768) restaurant card area here
    ***********************/
    .res_card .res_items {
        gap: 30px;
        flex-direction: column;
    }
    .res_card .res_item {
        display: block;
        width: 100%;
        text-align: center;
    }
    .res_card .res_item h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .res_card .res_item img {
        height: 250px;
        border-radius: 14px;
    }
    .res_card .res_item h4 {
        font-size: 24px;
    }
    .res_card .res_item:nth-child(2) img {
        height: 250px;
    }
    .res_card .res_item:nth-child(3) img {
        height: 250px;
    }

    /*********************** 
    3.1-768) restaurant menu area here
    ***********************/
    .res_menu .res_wrap .res_items {
        grid-template-columns: auto auto;
    }

    /*********************** 
    3.1-768) restaurant gallery area here
    ***********************/
    .gallery_sec .gallery_header h2 {
        text-align: center;
    }


    /* 
    3) restaurant-768-------------------]
    */
    /*********************** 
    3.1-768) restaurant area here
    ***********************/
    .first_rest .thumb_wrap .inner .items {
        grid-template-columns: repeat(2, 1fr);
    }
    .first_rest .menu_wrap .items {
        grid-template-columns: auto;
    }
    .first_rest .open_hours .hours_grid {
        grid-template-columns: repeat(2, 1fr);
    }


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


    /*
    8) user-login-768-------------------]
    */
    /***********************
    8.1-768) user login area here
    ***********************/
    .lr_section .lr_section_wrap {
        display: grid;
        grid-template-columns: auto;
        height: 100%;
    }
    .lr_section .left_section {
        padding: 40px 15px;
    }
    .lr_section .right_section {
        padding: 30px 15px;
        min-height: 100vh;
        display: flex;
        align-items: start;
    }
    .lr_section .register_card {
        padding: 30px 15px;
    }
    .lr_section .left_section::before,
    .lr_section .left_section::after {
        width: 30px;
        height: 30px;
    }

    /*
    9) user-profile-768-------------------]
    */
    /***********************
    9.1-768) user profile area here
    ***********************/
    .user_profile .profile_avatar_area {
        gap: 14px;
    }
    .user_profile .profile_avatar_circle {
        width: 60px;
        height: 60px;
        border: 2px solid var(--rgba-secondary);
        font-size: 20px;
    }
    .user_profile .avatar_camera_btn {
        bottom: -2px;
        right: -2px;
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
    .user_profile .profile_name_block h1 {
        font-size: 18px;
    }
    .user_profile .profile_email_pill {
        line-height: 16px;
    }
    .user_profile .profile_meta .member_badge {
        gap: 4px;
        font-size: 12px;
        line-height: 16px;
    }
    .user_profile .card_header h3 {
        font-size: 14px;
    }
    .user_profile .info_row_label {
        font-size: 12px;
    }
    .user_profile .info_row_value {
        font-size: 11px;
    }
    .user_profile .form_group label {
        font-size: 12px;
        margin-bottom: 6px;
    }
    .user_profile .form_group input {
        padding: 8px 14px;
        font-size: 12px;
        line-height: 16px;
    }
    .user_profile .save_btn {
        padding: 10px 15px;
        font-size: 12px;
        line-height: 16px;
        gap: 4px;
    }

    /*
    10) activities-768-------------------]
    */
    /***********************
    10.1-768) activities hero area here
    ***********************/
    .activities_hero .activities_items {
        grid-template-columns: repeat(2, 1fr);
    }


    /***********************
    10.2-768) activities gallery area here
    ***********************/
    .activities_gallery .activities_thumbs {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: inherit;
    }
    .activities_gallery .activities_thumb img {
        height: 250px;
    }
    .activities_gallery .activities_thumb.thumb_top_left {
        aspect-ratio: inherit;
    }
    .activities_gallery .activities_thumb.thumb_center {
        grid-column: inherit;
        grid-row: inherit;
        aspect-ratio: inherit;
    }
    .activities_gallery .activities_thumb.thumb_top_right {
        aspect-ratio: inherit;
    }
    .activities_gallery .activities_thumb.thumb_bottom_left {
        aspect-ratio: inherit;
    }
    .activities_gallery .activities_thumb.thumb_bottom_right {
        aspect-ratio: inherit;
    }



    /*
    10) meeting-768-------------------]
    */
    /***********************
    10.1-768) meeting hero area here
    ***********************/
    .meeting_hero .meeting_items {
        grid-template-columns: repeat(2, 1fr);
    }

    /***********************
    10.2-768) meeting card area here
    ***********************/
    .meeting_card .meeting_item {
        display: flex;
        flex-direction: column;
        align-items: inherit;
    }
    .meeting_card .meeting_item:last-child {
        flex-direction: column-reverse;
    }


    /*
    11) director-768-------------------]
    */
    /***********************
    11.1-768) director area here
    ***********************/
    .director .director_items {
        grid-template-columns: repeat(2, 1fr);
    }

    /***********************
    11.2-768) director description area here
    ***********************/
    .director_des .director_des_item .thumb {
        height: 300px;
    }

    /*
    12) contact-768-------------------]
    */
    /***********************
    12.1-768) contact us area here
    ***********************/
    .contactus .cont_address .address {
        grid-template-columns: repeat(2, 1fr);
    }


}

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

    /*
    1) first-home-576-------------------]
    */
    /*********************** 
    1.2-576) first banner area here
    ***********************/
    /* .first_banner .content_wrap .content h2 br {
        display: none;
    } */

    /*
    1) home-576-------------------]
    */
    /***********************
    1.1-576) header arae here
    ***********************/
    .header #menu li a {
        padding: 10px 15px;
        font-size: 14px;
        line-height: 18px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    /***********************
    1.2-576) hero area here
    ***********************/
    .hero_sec .hero_inner {
        /* grid-template-columns: auto;
        gap: 0; */
        margin-top: 40px;
    }
    .hero_sec .hero_inner .right .book_button {
        bottom: -100px;
    }

    /***********************
    1.2-576) about section area here
    ***********************/
    .about_sec .about_text_thumb {
        display: none;
    }

    /***********************
    1.2-576) room section area here
    ***********************/
    .room_sec .room_items {}



    /*********************** 
    1.3-576) gallery section here
    ***********************/
    .gallery_sec .gallery_grid {
        grid-template-columns: auto;
    }



    /***********************
    1.2-576) facilities section area here
    ***********************/
    .facilities .facilities_items {
        grid-template-columns: auto;
    }

    /***********************
    1.2-576) restaurant section area here
    ***********************/
    .restaurant_sec .restaurant_items {
        grid-template-columns: auto;
    }
    .restaurant_sec .restaurant_item .thumb {
        height: 250px;
    }

    /***********************
    1.10-576) main footer area here
    ***********************/
    .main-footer .footer-content {
        grid-template-columns: auto;
        gap: 30px;
    }
    .main-footer .footer-logo a {
        margin: auto;
    }
    .main-footer .footer-section {
        text-align: center;
    }
    .main-footer .footer-section p {
        text-align: center;
    }
    .main-footer .footer-social {
        justify-content: center;
    }
    .main-footer .footer-section h4 {
        margin-bottom: 10px;
    }
    .main-footer .footer_contact li {
        grid-template-columns: auto;
        gap: 0;
    }
    .main-footer .footer_contact li .logo {
        display: none;
    }
    .main-footer .footer-bottom-content {
        flex-direction: column;
        gap: 16px;
    }
    .main-footer .footer-bottom-content p {
        line-height: 20px;
    }
    .main-footer .footer-bottom-content ul {
        flex-wrap: wrap;
        justify-content: center;
    }


    /***********************
    1.11-576) floating book now area here
    ***********************/
    .floating_book_button .main_btn {
        width: 60px;
        height: 60px;
    }
    .floating_book_button .main_btn::after {
        width: 54px;
        height: 54px;
    }
    .floating_book_button2 .main_btn {
        width: 60px;
        height: 60px;
    }
    .floating_book_button2 .main_btn::after {
        width: 54px;
        height: 54px;
    }



    /*
    2) about-576-------------------]
    */
    /***********************
    2.1-576) about area here
    ***********************/
    .about_welcome .about_welcome_inner {
        display: flex;
        flex-direction: column-reverse;
    }

    /***********************
    2.1-576) about details area here
    ***********************/
    .about_details .about_details_item {
        display: flex;
        flex-direction: column-reverse;
    }
    .about_details .about_details_item:nth-child(2) {
        flex-direction: column;
    }
    .about_details .about_details_item .left {
        text-align: center;
    }

    /***********************
    2.1-576) faq area here
    ***********************/
    .faq .faq_inner {
        grid-template-columns: auto;
        gap: 30px;
    }


    /*
    3) restaurant-576-------------------]
    */
    /*********************** 
    3.1-576) restaurant menu area here
    ***********************/
    .res_menu .res_wrap .res_items {
        grid-template-columns: auto;
    }

    /*
    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;
    }
    .rooms .desc-features ul li:last-child {
        padding-bottom: 0px;
    }

    /*
    3) gallery-576-------------------]
    */
    /***********************
    3.1-576) gallery area here
    ***********************/
    .gallery .inner ul {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 20px;
    }
    .gallery .inner h4 {
        font-size: 20px;
        line-height: 30px;
        padding: 10px 15px;
    }

    /*
    4) about-576-------------------]
    */
    /***********************
    4.1-576) about us area here
    ***********************/
    .inner_banner {
        height: 350px;
    }
    .inner_banner .inner_banner_inner h2 {
        font-size: 30px;
        margin-bottom: 8px;
    }
    .inner_banner .inner_banner_inner {
        margin-top: 70px;
    }

    /*
    5) reservation-576-------------------]
    */
    /***********************
    5.1-576) reservation area here
    ***********************/
    .reservation_sec .room-card {
        grid-template-columns: auto;
    }
    .reservation_sec .search-title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 20px;
    }
    .reservation_sec .section-title {
        margin-bottom: 24px;
    }
    .reservation_sec .room-info-grid {
        grid-template-columns: auto;
    }
    .reservation_sec .room-header h3 {
        padding: 8px 15px;
        margin: 0px -15px;
    }
    .room-selection-modal .room-selection-header {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .room-selection-modal .room-selection-header h3 {
        font-size: 20px;
    }
    .room-selection-modal .room-selection-content {
        padding: 30px 15px;
    }
    .room-selection-modal .guest-inputs {
        gap: 10px;
    }
    .room-selection-modal .room-guest-item {
        padding: 20px 15px;
    }
    .room-selection-modal .guest-number-input button {
        font-size: 14px;
    }
    .room-selection-modal .guest-number-input input {
        width: 50px;
        font-size: 14px;
    }
    .room-selection-modal .modal-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    /*
    4) room details-576-------------------]
    */
    /***********************
    4.1-576) room details area here
    ***********************/
    .room_details .type_items {
        grid-template-columns: auto;
    }
    .room_details .feature_items ul {
        grid-template-columns: auto;
    }


    /*
    4) restaurant-576-------------------]
    */
    /***********************
    4.1-576) restaurant area here
    ***********************/
    .first_rest .our_menu_wrap {
        display: flex;
        flex-direction: column-reverse;
    }
    .first_rest .our_menu_wrap .thumb img {
        height: 250px;
    }
    .first_rest .menu_wrap .item ul li .content {
        gap: 15px;
    }
    .first_rest .thumb_wrap .inner .items {
        grid-template-columns: auto;
    }
    .first_rest .thumb_wrap .inner .item .content p {
        line-height: 22px;
    }
    .first_rest .menu_wrap .item {
        padding: 0px 15px 30px;
    }
    .first_rest .thumb_wrap .container-fluid {
        padding: 0px 15px;
    }
    .first_rest .open_hours .hours_grid {
        grid-template-columns: auto;
    }
    .first_rest .open_hours .card_body {
        padding: 20px 15px;
    }


    /*
    5) user-profile-576-------------------]
    */
    /***********************
    5.1-576) user profile area here
    ***********************/
    .user_profile .profile_hero_cover {
        height: 80px;
    }
    .user_profile .profile_hero_cover::before, 
    .user_profile .profile_hero_cover::after {
        width: 40px;
        height: 40px;
    }
    .user_profile .profile_hero_cover::before {
        left: 10px;
    }
    .user_profile .profile_hero_cover::after {
        right: 10px;
    }
    .user_profile .profile_hero_body {
        padding: 20px 15px;
        flex-direction: column;
        gap: 10px;
    }
    .user_profile .profile_avatar_area {
        flex-direction: column;
    }
    .user_profile .profile_columns {
        grid-template-columns: auto;
    }
    .user_profile .delete_account_btn {
        padding: 8px 15px;
        font-size: 12px;
        line-height: 16px;
    }


    /*
    6) spa-576-------------------]
    */
    /***********************
    6.1-576) spa area here
    ***********************/
    .spa_sec .spa_inner {
        grid-template-columns: auto;
    }
    .spa_sec .spa_item .thumb {
        height: 200px;
    }
    .spa_sec .left .spa_item:first-child .thumb {
        height: 200px;
    }

    /*
    7) activities-576-------------------]
    */
    /***********************
    7.1-576) activities hero area here
    ***********************/
    .activities_hero .activities_items {
        grid-template-columns: auto;
    }
    .activities_hero .activities_item .thumb img {
        height: 250px;
    }

    /***********************
    7.1-576) activities gallery area here
    ***********************/
    .activities_gallery .activities_thumbs {
        grid-template-columns: auto;
    }


    /*
    8) meeting-576-------------------]
    */
    /***********************
    8.1-576) meeting hero area here
    ***********************/
    .meeting_hero .meeting_items {
        grid-template-columns: auto;
        gap: 14px;
    }

    /***********************
    8.1-576) meeting card area here
    ***********************/
    .meeting_card .meeting_item .left .list p {
        font-size: 10px;
        line-height: 16px;
    }
    .meeting_card .meeting_item .left .list p span {
        font-size: 14px;
    }
    .meeting_card .meeting_item .left .list.s_border {
        width: 1px;
        height: 12px;
    }
    .meeting_card .meeting_item .right ul {
        gap: 10px;
    }
    .meeting_card .meeting_item .right ul li {
        font-size: 12px;
    }

    /*
    9) director-576-------------------]
    */
    /***********************
    9.1-576) director area here
    ***********************/
    .director .director_items {
        grid-template-columns: auto;
    }

    /***********************
    9.2-576) director description area here
    ***********************/
    .director_des .director_des_item {
        display: flex;
        flex-direction: column;
    }

    .director_des .director_des_item:nth-child(3) {
        display: flex;
        flex-direction: column-reverse;
    }


    /*
    10) contact-576-------------------]
    */
    /***********************
    10.1-576) contact us area here
    ***********************/
    .contactus .cont_inner {
        display: flex;
        flex-direction: column;
    }
    .contactus .cont_left iframe {
        height: 350px;
    }
    .contactus .cont_address .address {
        grid-template-columns: auto;
    }
    .contactus .cont_address .social-links a {
        font-size: 20px;
    }


}

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