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


--------#####--------
Template Name: Sapphire
Template URI: 
Description: This is HTML5 template
Author: Md Ridoy Khan
Author URI: https://github.com/mdridoykhan138
Support: ridoykhan.cse.web@gmail.com
Version: 1.0.0
--------#####--------

===========================
CSS INDEX
===========================

1) home
    1.1) others css area here
    1.2) header area here
    1.3) hero section area here
    1.4) about section area here
    1.5) room section area here
    1.6) facilities area here
    1.7) special section area here
    1.8) restaurant area here
    1.9) testimonial section area here
    1.10) contact section area here
    1.11) main footer area here
    1.12) top up button area here
    1.13) welcome popup area here

2) rooms
    2.1) inner banner area here
    2.2) rooms area here

3) restaurant
    3.1) restaurant area here

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

5) offer
    5.1) offer area here

6) gallery
    6.1) gallery area here

7) contact-us
    7.1) contact us area here
    7.2) google map area here

8) book-form
    8.1) book form area here


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

/*########################
1) home ---------------[########################]
########################*/


/*===========================
1.1) others css area here
===========================*/
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 10px;
}
.row {
    margin-right: 0px;
    margin-left: 0px;
}
/* main button area here */
.main_btn {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(180deg, #87CEEB 0%, #4169E1 100%);
    color: var(--white);
    font-size: 16px;
    line-height: 23px;
    font-family: var(--font-onest) !important;
    font-weight: 600 !important;
    border: none;
    text-transform: capitalize;
    text-decoration: none;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.25);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.main_btn:hover {
    color: var(--white) !important;
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.main_btn:active {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(65, 105, 225, 0.3);
}
/*---------------------------
1.1) others css area ends here
---------------------------*/


/*===========================
1.2) header area here
===========================*/
.header {
    position: fixed !important;
    top: 0;
    left: 0;
    background: var(--rgba-black);
    backdrop-filter: blur(10px);
    width: 100%;
    padding: 30px 0px;
    z-index: 999;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}
.header.sticky {
    padding: 15px 0;
    background: var(--dark);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease-in-out;
    -webkit-animation: slideDown 0.4s ease-in-out;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.header .header_wrap {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header .logo {
    margin: 0px !important;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header .logo a {
    display: inline-block;
}
.header .logo a img {
    max-height: 40px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header.sticky .logo a img {
    max-height: 36px;

}
.header .navbar {
    position: inherit;
    min-height: inherit;
    margin-bottom: inherit;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header .desktop_menu {
    display: flex;
    align-items: center;
    gap: 30px;
}
.header .desktop_menu ul {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header .desktop_menu ul li {
    position: relative;
}
.header .desktop_menu ul li a {
    color: var(--white);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--font-onest);
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header .desktop_menu ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px;
    left: 0;
    background: var(--white);
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
}
.header .desktop_menu ul li a:hover::after {
    width: 100%;
}
.header .desktop_menu ul li a:hover {
    color: var(--white);
    text-decoration: none;
}
.header .desktop_menu .user_profile {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header .desktop_menu .user_profile button {
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 30px;
    padding: 10px 32px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header.sticky .desktop_menu .user_profile button {
    padding: 8px 28px;
}
/* Menu icon */
.header .menu-icon {
    display: none;
    width: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.header.sticky .menu-icon {
    width: 25px;
}
/* Mobile menu */
.header .nav {
    display: none;
}
.header.sticky .desktop_menu ul li {
    animation: fadeInUp 0.5s ease-in-out backwards;
    -webkit-animation: fadeInUp 0.5s ease-in-out backwards;
}
.header.sticky .desktop_menu ul li:nth-child(1) {
    animation-delay: 0.1s;
}
.header.sticky .desktop_menu ul li:nth-child(2) {
    animation-delay: 0.15s;
}
.header.sticky .desktop_menu ul li:nth-child(3) {
    animation-delay: 0.2s;
}
.header.sticky .desktop_menu ul li:nth-child(4) {
    animation-delay: 0.25s;
}
.header.sticky .desktop_menu ul li:nth-child(5) {
    animation-delay: 0.3s;
}
.header.sticky .desktop_menu ul li:nth-child(6) {
    animation-delay: 0.35s;
}
.header.sticky .desktop_menu ul li:nth-child(7) {
    animation-delay: 0.4s;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
/* header mobile device */
.header .menu-icon {
    left: inherit;
    top: inherit;
    position: inherit;
    display: none;
}
.header #menu {
    position: absolute;
    width: 350px;
    width: calc(100% - 30%);
    height: 100vh;
    padding: 40px 20px;
    background: var(--primary);
    z-index: 10;
    top: -400vh;
    left: 0;
    display: block;
    align-items: inherit;
    justify-content: inherit;
}
.header .close-icon {
    width: 25px;
    position: absolute;
    left: calc(100% - 55px);
    top: 40px;
    cursor: pointer;
}
.header #menu .right {
    margin-top: 60px;
    width: 100%;
}
.header #menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header #menu ul li {
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.header #menu li a {
    display: block;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.header #menu ul li:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 1);
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
}
.header #menu ul li:hover a {
    color: var(--white);
}
.header #menu ul li:active {
    transform: scale(0.97);
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -ms-transform: scale(0.97);
    -o-transform: scale(0.97);
}
.header #menu .user_profile {
    width: calc(100% - 40px);
    position: absolute;
    bottom: 40px;
    left: 20px;
}
.header #menu .user_profile .main_btn {
    width: 100%;
    font-size: 20px;
    line-height: 28px;
    padding: 8px 32px;
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 30px;
}
/*---------------------------
1.2) header area ends here
---------------------------*/


/*===========================
1.3) hero section area here
===========================*/
.hero_sec {
    background: var(--rgba-black);
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero_sec .carousel-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}
.hero_sec .bs-slider-overlay {
    background-color: var(--rgba-black-bg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero_sec .hero_wrap {
    width: 100%;
}
.hero_sec .hero_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.hero_sec .hero_inner .rectangle_thumb {
    position: absolute;
    top: -40px;
    left: -50px;
    max-width: 32%;
    z-index: -1;
    animation: floatUpDown10px 3s ease-in-out infinite;
    -webkit-animation: floatUpDown10px 3s ease-in-out infinite;
}
@keyframes floatUpDown10px {
    0%, 100% {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
}
    50% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
}
}
@-webkit-keyframes floatUpDown10px {
    0%, 100% {
        -webkit-transform: translateY(10px);
    }
    50% {
        -webkit-transform: translateY(-10px);
    }
}
.hero_sec .hero_inner .left {
    position: relative;
    z-index: 0;
}
.hero_sec .hero_inner .left h1 {
    font-size: 64px;
    line-height: 80px;
    font-weight: bold;
    color: var(--white);
}
.hero_sec .hero_inner .left p {
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    color: var(--white);
    margin: 14px 0px 30px;
}
.hero_sec .hero_inner .video_popup .expand_video {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.hero_sec .hero_inner .video_popup .video_icon {
    background: var(--white);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 100%;
    color: var(--primary);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.hero_sec .hero_inner .video_popup .video_icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: -1;
    opacity: 0.3;
    animation: rippleEffect 2s infinite;
    -webkit-animation: rippleEffect 2s infinite;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.hero_sec .hero_inner .video_popup:hover .video_icon::before {
    animation-play-state: paused;
    opacity: 0;
}
@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(2);
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
    }
}
.hero_sec .hero_inner .video_popup .video_text {
    font-size: 20px;
    line-height: 30px;
    color: var(--white);
    font-weight: 600;
}
.hero_sec .hero_inner .video_popup a:hover .video_text {
    text-decoration: underline;
}
.hero_sec_mfp_fade .mfp-iframe-scaler iframe {
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    background: var(--dark);
    max-width: 100%;
    padding: 0px;
}
.hero_sec .hero_inner .right {
    position: relative;
    z-index: 0;
}
.hero_sec .hero_inner .right .book_button {
    position: absolute;
    bottom: -100px;
    right: 0;
    z-index: 1;
}
.hero_sec .hero_inner .right .book_button .main_btn {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400 !important;
    font-family: var(--font-paprika) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.hero_sec .hero_inner .right .book_button .main_btn:active,
.hero_sec .hero_inner .right .book_button .main_btn:focus {
    color: var(--white) !important;
}
.hero_sec .hero_inner .right .book_button .main_btn::after {
    content: '';
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    border: 2px dashed var(--white);
    animation: rotateBorder 20s linear infinite;
    -webkit-animation: rotateBorder 20s linear infinite;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.hero_sec .hero_inner .right .book_button .main_btn:hover::after {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
}
@keyframes rotateBorder {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.hero_sec .scroll_down {
    position: absolute;
    bottom: 60px;
    left: 50%;
    z-index: 1;
    animation: bounce 2s infinite ease-in-out;
    -webkit-animation: bounce 2s infinite ease-in-out;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
}
.hero_sec .scroll_down a {
    display: inline-block;
}
.hero_sec .scroll_down:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    cursor: pointer;
}
@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -30px);
    }
}
/*---------------------------
1.3) hero section area ends here
---------------------------*/


/*===========================
1.4) about section area here
===========================*/
.about_sec {
    position: relative;
    background: var(--white);
    padding: 80px 0px;
    overflow: hidden;
    z-index: 0;
}
.about_sec .about_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--rgba-primary);
    border-radius: 16px;
    overflow: hidden;
}
.about_sec .about_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about_sec .about_content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 20px 70px 20px 70px;
}
.about_sec .about_content h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.about_sec .about_content p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    margin: 20px 0px 40px;
    color: var(--para);
}
.about_sec .about_text_thumb {
    position: absolute;
    top: 5px;
    left: 75%;
    max-width: 25%;
    z-index: -1;
    animation: slideLeftRight 8s ease-in-out infinite;
    -webkit-animation: slideLeftRight 8s ease-in-out infinite;
}
@keyframes slideLeftRight {
    0%, 100% {
        left: 75%;
    }
    50% {
        left: 0%;
    }
}
@-webkit-keyframes slideLeftRight {
    0%, 100% {
        -webkit-left: 75%;
    }
    50% {
        -webkit-left: 0%;
    }
}

/*---------------------------
1.4) about section area ends here
---------------------------*/


/*===========================
1.5) room section area here
===========================*/
.room_sec {
    padding: 0px 0px 80px;
    position: relative;
    background: var(--white);
    overflow: hidden;
    z-index: 0;
}
.room_sec .room_sec_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}
.room_sec .room_sec_header .left h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.room_sec .room_sec_header .left h2 span {
    color: var(--primary);
}
.room_sec .room_sec_header .left p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    margin: 20px 0px 0px;
    color: var(--para);
}
.room_sec .room_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
}
.room_sec .room_items .room_item {
    background: var(--rgba-primary);
    outline: 2px solid transparent;
    overflow: hidden;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.room_sec .room_items .room_item:hover {
    outline: 2px solid var(--primary);
}
.room_sec .room_items .room_item .thumb {
    position: relative;
    overflow: hidden;
}
.room_sec .room_items .room_item .thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}
.room_sec .room_items .room_details_button {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transform: translate(-50%, -40%);
    -webkit-transform: translate(-50%, -40%);
    -moz-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
    -o-transform: translate(-50%, -40%);
}
.room_sec .room_items .room_item:hover .room_details_button {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.room_sec .room_items .room_item .thumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rgba-black-bg);
    opacity: 0;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
.room_sec .room_items .room_item:hover .thumb::after {
    opacity: 1;
}
.room_sec .room_items .room_item:hover .thumb img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.room_sec .room_items .room_item .content {
    padding: 24px;
}
.room_sec .room_items .room_item .room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.room_sec .room_items .room_item .amenity-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 100%;
    color: var(--primary);
    font-weight: 500;
}
.room_sec .room_items .room_item .content h3 a {
    display: block;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    color: var(--dark);
    font-family: var(--font-onest);
    margin: 20px 0px 4px;
}
.room_sec .room_items .room_item .content p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--para);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room_sec .room_info {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 9px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.room_sec .room_info .info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.room_sec .room_info .info .left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.room_sec .room_info .info .left .reguler_price {
    font-size: 16px;
    line-height: 100%;
    font-weight: 600;
    color: var(--dark);
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.room_sec .room_info .info .left .reguler_price::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--delete);
    top: 50%;
    left: 0;
    transform-origin: center;
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}
.room_sec .room_info .info .left .offer_price {
    font-size: 16px;
    line-height: 100%;
    font-weight: 600;
    color: var(--dark);
}
.room_sec .room_info .info .right {
    font-size: 12px;
    line-height: 100%;
    color: var(--para);
    font-family: var(--font-open);
}
.room_sec .room_info .room_rating {
    display: flex;
    align-items: center;
    gap: 10px;
}
.room_sec .room_info .room_rating ul {
    display: flex;
    align-items: center;
    gap: 4px;
}
.room_sec .room_info .room_rating ul li {
    line-height: 100%;
    color: var(--star-color);
    font-size: 12px;
}
.room_sec .room_info .room_rating ul li:last-child {
    color: #E5E5E5;
}
.room_sec .room_info .room_rating .number_count {
    font-size: 14px;
    line-height: 100%;
    font-family: var(--font-open);
}
.room_sec .room_text_thumb {
    position: absolute;
    bottom: 100px;
    left: 5px;
    max-width: 4%;
    z-index: -1;
}
/*---------------------------
1.5) room section area ends here
---------------------------*/


/*===========================
1.6) facilities area here
===========================*/
.facilities {
    position: relative;
    padding: 80px 0px;
    background: var(--rgba-primary);
    z-index: 0;
}
.facilities .facilities_inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
}
.facilities .facilities_left h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.facilities .facilities_left h2 span {
    color: var(--primary);
    display: block;
    line-height: 100%;
}
.facilities .facilities_left p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    margin: 14px 0px 30px;
    color: var(--para);
}
.facilities .facilities_items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.facilities .facilities_item {
    border: 1px solid #E8E8E8;
    background: var(--white);
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.facilities .facilities_item .facilities_icon {
    font-size: 40px;
    line-height: 100%;
    color: var(--primary);
}
.room_sec .room_items .room_item .amenity-item i {
    font-size: 14px;
}
.facilities .facilities_item .facilities_text {
    font-size: 16px;
    line-height: 110%;
    font-weight: 400;
    font-family: var(--font-onest);
    color: var(--dark);
}
/*---------------------------
1.6) facilities area ends here
---------------------------*/


/*===========================
1.7) special section area here
===========================*/
.special_sec {
    position: relative;
    padding: 96px 0px;
    background: var(--white);
    overflow: hidden;
    z-index: 0;
}
.special_sec .special_items {
    display: grid;
    grid-template-columns: 522px auto;
    background: var(--rgba-primary);
    border-radius: 14px;
}
.special_sec .special_item:first-child {
    position: relative;
    z-index: 0;
    margin: -16px 0px -16px 0px;
}
.special_sec .special_item:last-child {
    display: flex;
    align-items: center;
}
.special_sec .special_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-dark);
    overflow: hidden;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
}
.special_sec .special_vector {
    position: absolute;
    top: 50%;
    left: 0;
    max-width: 38%;
    z-index: -1;
    transform: translate(-58%, -50%);
    -webkit-transform: translate(-58%, -50%);
    -moz-transform: translate(-58%, -50%);
    -ms-transform: translate(-58%, -50%);
    -o-transform: translate(-58%, -50%);
    animation: floatLeftRight10px 3s ease-in-out infinite;
    -webkit-animation: floatLeftRight10px 3s ease-in-out infinite;
}
@keyframes floatLeftRight10px {
    0%, 100% {
        transform: translate(-58%, -50%) translateX(-10px);
        -webkit-transform: translate(-58%, -50%) translateX(-10px);
        -moz-transform: translate(-58%, -50%) translateX(-10px);
        -ms-transform: translate(-58%, -50%) translateX(-10px);
        -o-transform: translate(-58%, -50%) translateX(-10px);
    }
    50% {
        transform: translate(-58%, -50%) translateX(10px);
        -webkit-transform: translate(-58%, -50%) translateX(10px);
        -moz-transform: translate(-58%, -50%) translateX(10px);
        -ms-transform: translate(-58%, -50%) translateX(10px);
        -o-transform: translate(-58%, -50%) translateX(10px);
    }
}
@-webkit-keyframes floatLeftRight10px {
    0%, 100% {
        -webkit-transform: translate(-58%, -50%) translateX(-10px);
    }
    50% {
        -webkit-transform: translate(-58%, -50%) translateX(10px);
    }
}
.special_sec .special_content {
    padding: 20px 60px 20px 100px;
}
.special_sec .special_content h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.special_sec .special_content h2 span {
    color: var(--primary);
    display: block;
    line-height: 100%;
}
.special_sec .special_content p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    margin: 14px 0px 30px;
    color: var(--para);
}
/*---------------------------
1.7) special section area ends here
---------------------------*/


/*===========================
1.8) restaurant area here
===========================*/
.restaurant_sec {
    padding: 80px 0;
    background: var(--rgba-primary);
    position: relative;
    overflow: hidden;
}
.restaurant_sec .restaurant_inner {
    text-align: center;
}
.restaurant_sec .restaurant_heading {
    margin-bottom: 40px;
}
.restaurant_sec .restaurant_heading h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
}
.restaurant_sec .restaurant_heading h2 span {
    color: var(--primary);
    display: block;
    line-height: 100%;
}
.restaurant_sec .restaurant_heading p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
    max-width: 700px;
    margin: 0 auto;
}
.restaurant_sec .restaurant_items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.restaurant_sec .restaurant_item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.restaurant_sec .restaurant_item:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}
.restaurant_sec .restaurant_item .thumb {
    position: relative;
    height: 500px;
    overflow: hidden;
}
.restaurant_sec .restaurant_item .thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
    transition: opacity 0.4s ease;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -ms-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.restaurant_sec .restaurant_item:hover .thumb::before {
    opacity: 0.9;
}
.restaurant_sec .restaurant_item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
}
.restaurant_sec .restaurant_item:hover .thumb img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.restaurant_sec .restaurant_item .content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    width: calc(100% - 50px);
    color: var(--white);
    text-align: left;
    transition: bottom 0.4s ease;
    -webkit-transition: bottom 0.4s ease;
    -moz-transition: bottom 0.4s ease;
    -ms-transition: bottom 0.4s ease;
    -o-transition: bottom 0.4s ease;
}
.restaurant_sec .restaurant_item:hover .content {
    bottom: 40px;
}
.restaurant_sec .restaurant_item .content h4 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.restaurant_sec .restaurant_item .content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/*---------------------------
1.8) restaurant section area ends here
---------------------------*/

/*===========================
1.9) testimonial section area here
===========================*/
.testimonial_sec {
    padding: 80px 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.testimonial_sec .testimonial_heading {
    text-align: center;
    margin-bottom: 60px;
}
.testimonial_sec .testimonial_heading h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
}
.testimonial_sec .testimonial_heading h2 span {
    color: var(--primary);
    display: inline-block;
    line-height: 100%;
}
.testimonial_sec .testimonial_heading p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
    max-width: 700px;
    margin: 0 auto;
}
.testimonial_sec .testimonial_items {
    position: relative;
    overflow: visible;
}
.testimonial_sec .testimonial_items .owl-nav {
    display: none;
}
.testimonial_sec .testimonial_items .owl-dots {
    display: none;
}
.testimonial_sec .testimonial_items .owl-stage {
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.testimonial_sec .testimonial_item {
    background: var(--white);
    padding: 40px 30px 30px;
    box-shadow: 0px 0.7px 16.07px 0px rgba(0, 0, 0, 0.2);
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 8px solid rgba(65, 105, 225, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.testimonial_sec .testimonial_items .owl-item.active.center .testimonial_item {
    border-bottom-color: var(--primary);
}
.testimonial_sec .testimonial_item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}
.testimonial_sec .testimonial_item .thumb {
    width: 120px;
    height: 120px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    top: -70px;
    margin-bottom: -50px;
    box-shadow: 0 4px 15px rgba(107, 147, 247, 0.3);
    border: 6px solid rgba(65, 105, 225, 0.5);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: border-color 0.3s ease;
    -webkit-transition: border-color 0.3s ease;
    -moz-transition: border-color 0.3s ease;
    -ms-transition: border-color 0.3s ease;
    -o-transition: border-color 0.3s ease;
}
.testimonial_sec .testimonial_items .owl-item.active.center .testimonial_item .thumb {
    border-color: var(--primary);
}
.testimonial_sec .testimonial_item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial_sec .testimonial_item .content {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.testimonial_sec .testimonial_item .content span {
    display: inline-block;
    margin-bottom: 15px;
}
.testimonial_sec .testimonial_item .content span i {
    font-size: 30px;
    color: var(--para);
}
.testimonial_sec .testimonial_item .content > p {
    font-size: 18px;
    color: var(--para);
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
    font-family: var(--font-onest);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testimonial_sec .testimonial_item .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    
}
.testimonial_sec .testimonial_item .left {
    text-align: left;
}
.testimonial_sec .testimonial_item .left h4 {
    font-size: 20px;
    line-height: 100%;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}
.testimonial_sec .testimonial_item .left p {
    font-size: 16px;
    line-height: 100%;
    color: var(--para);
}
.testimonial_sec .testimonial_item .right {
    display: flex;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.testimonial_sec .testimonial_item .right li {
    line-height: 1;
}
.testimonial_sec .testimonial_item .right li i {
    font-size: 14px;
    color: #ffa500;
}
.testimonial_sec .testimonial_item .right li i.fa-regular {
    color: #ddd;
}
/*---------------------------
1.9) testimonial section area ends here
---------------------------*/


/*===========================
1.10) contact section area here
===========================*/
.contact_sec {
    padding: 96px 0;
    background: var(--rgba-primary);
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.contact_sec::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    top: -100px;
    left: -100px;
    z-index: -1;
    animation: float 6s ease-in-out infinite;
    -webkit-animation: float 6s ease-in-out infinite;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.contact_sec::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    bottom: -100px;
    right: -100px;
    z-index: -1;
    animation: float 8s ease-in-out infinite reverse;
    -webkit-animation: float 8s ease-in-out infinite reverse;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-20px) translateX(20px);
    }
}
.contact_sec .contact_items {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-radius: 14px;
    background: var(--white);
}
.contact_sec .contact_Left {
    position: relative;
    z-index: 0;
    margin: -16px 0px -16px 0px;
}
.contact_sec .contact_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    box-shadow: var(--shadow-dark);
    overflow: hidden;
    padding: 20px;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
}
.contact_sec .contact_info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    animation: fadeInUp 0.8s ease-out backwards;
    -webkit-animation: fadeInUp 0.8s ease-out backwards;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.contact_sec .contact_info:nth-child(1) {
    animation-delay: 0.1s;
}
.contact_sec .contact_info:nth-child(2) {
    animation-delay: 0.2s;
}
.contact_sec .contact_info:nth-child(3) {
    animation-delay: 0.3s;
}
.contact_sec .contact_info:nth-child(4) {
    animation-delay: 0.4s;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.contact_sec .contact_info:hover {
    background: var(--rgba-primary);
    transform: translateX(5px);
}
.contact_sec .contact_info .contact_icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px var(--rgba-secondary);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.contact_sec .contact_info:hover .contact_icon {
    box-shadow: 0 6px 20px var(--rgba-secondary);
    transform: scale(1.1) rotate(5deg);
    -webkit-transform: scale(1.1) rotate(5deg);
    -moz-transform: scale(1.1) rotate(5deg);
    -ms-transform: scale(1.1) rotate(5deg);
    -o-transform: scale(1.1) rotate(5deg);
}
.contact_sec .contact_info .contact_icon i {
    font-size: 24px;
    color: var(--white);
}
.contact_sec .contact_info .contact_text h4 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}
.contact_sec .contact_info .contact_text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--para);
}
.contact_sec .contact_info .contact_text .social_links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.contact_sec .contact_info .contact_text .social_links a {
    display: inline-block;
    line-height: 100%;
    font-size: 24px;
    color: var(--para);
}
.contact_sec .contact_info .contact_text .social_links a:hover {
    color: var(--primary);
}
.contact_sec .contact_vector {
    position: absolute;
    top: 50%;
    left: 0;
    max-width: 38%;
    z-index: -1;
    transform: translate(-58%, -50%);
    -webkit-transform: translate(-58%, -50%);
    -moz-transform: translate(-58%, -50%);
    -ms-transform: translate(-58%, -50%);
    -o-transform: translate(-58%, -50%);
    animation: contactFloatLeftRight 3s ease-in-out infinite;
    -webkit-animation: contactFloatLeftRight 3s ease-in-out infinite;
}
.contact_sec .contact_vector img {
    width: 100%;
    height: auto;
}
@keyframes contactFloatLeftRight {
    0%, 100% {
        transform: translate(-58%, -50%) translateX(-10px);
        -webkit-transform: translate(-58%, -50%) translateX(-10px);
        -moz-transform: translate(-58%, -50%) translateX(-10px);
        -ms-transform: translate(-58%, -50%) translateX(-10px);
        -o-transform: translate(-58%, -50%) translateX(-10px);
    }
    50% {
        transform: translate(-58%, -50%) translateX(10px);
        -webkit-transform: translate(-58%, -50%) translateX(10px);
        -moz-transform: translate(-58%, -50%) translateX(10px);
        -ms-transform: translate(-58%, -50%) translateX(10px);
        -o-transform: translate(-58%, -50%) translateX(10px);
    }
}
@-webkit-keyframes contactFloatLeftRight {
    0%, 100% {
        -webkit-transform: translate(-58%, -50%) translateX(-10px);
    }
    50% {
        -webkit-transform: translate(-58%, -50%) translateX(10px);
    }
}
.contact_sec .contact_map {
    padding: 0px 0px 0px 0px;
    border: 30px solid var(--white);
    border-radius: 14px;
}
.contact_sec .contact_map iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
    display: block;
}
/*---------------------------
1.10) contact section area ends here
---------------------------*/


/*===========================
1.11) main footer area here
===========================*/
.main-footer {
    background: var(--dark);
    color: var(--white);
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
}
.main-footer .footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 40px;
}
.main-footer .footer-logo {
    margin-bottom: 20px;
}
.main-footer .footer-logo a {
    display: block;
    text-align: start;
    max-width: 120px;
}

.main-footer .footer-section p {
    color: #bdc3c7;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 20px;
}
.main-footer .footer-social {
    display: flex;
    gap: 15px;
}
.main-footer .footer-social a {
    color: #bdc3c7;
    font-size: 20px;
    line-height: 100%;
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}
.main-footer .footer-social a:hover {
    color: var(--white);
}
.main-footer .footer-section {
    text-align: start;
}
.main-footer .footer-section h4 {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--primary-color);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.main-footer .footer-links {
    list-style: none;
}
.main-footer .footer-links li:not(:last-child) {
    margin-bottom: 10px;
}
.main-footer .footer-links a {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 16px;
    line-height: 22px;
    display: block;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}
.main-footer .footer-links a:hover {
    color: var(--white);
}
.main-footer .footer_contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.main-footer .footer_contact li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
.main-footer .footer_contact li .logo {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}
.main-footer .footer_contact li .logo i {
    color: #bdc3c7;
}

.main-footer .footer_contact li .desc {
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    color: #bdc3c7;
}
.main-footer .footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 30px;
}
.main-footer .footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.main-footer .footer-bottom-content .left p {
    font-size: 16px;
    line-height: 100%;
    color: #bdc3c7;
    font-weight: 400;
}
.main-footer .footer-bottom-content .right p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bdc3c7;
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
}
.main-footer .footer-bottom-content .right p span:first-child {
    font-weight: 700;
}
.main-footer .footer-bottom-content .right p img {
    max-width: 26px;
}
.main-footer .footer-bottom-content .right p a {
    color: #bdc3c7;
    font-size: 16px;
    line-height: 100%;
    font-family: var(--font-open);
    font-weight: 400;
    display: inline-block;
}
.main-footer .footer-bottom-content .right p a:hover {
    color: var(--white);
}
/*---------------------------
1.11) main footer area ends here
---------------------------*/


/*===========================
1.12) top up button area here
===========================*/
.topUp-btn {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    border: transparent;
    background: var(--gradient-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.25);
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.topUp-btn:hover {
	background: var(--gradient-primary-hover);
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4);
}
.topUp-btn i {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.topUp-btn:hover i {
	color: var(--white);
}
/*---------------------------
1.12) top up button area ends here
---------------------------*/


/*===========================
1.13) welcome popup area here
===========================*/
.welcome_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 100000000;
}
.welcome_overlay.show {
    display: block;
}
.welcome_overlay .welcome_popup {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: hidden;
    padding: 40px 0px;
    background-color: var(--white);
    position: relative;
    z-index: 0;
}
.welcome_overlay.show .welcome_popup {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.welcome_overlay .welcome_wrap .container {
    max-width: 800px;
}
.welcome_overlay .welcome_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0px;
    background: var(--dark-color);
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--white);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}
.welcome_overlay .welcome_close:hover {
    background: #d96f1b;
}
.welcome_overlay .welcome_header {
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    padding: 0px 0px 20px;
}
.welcome_overlay .welcome_header img {
    max-height: 80px;
}
.welcome_overlay .welcome_header h2 {
    font-size: 30px;
    line-height: 100%;
    font-style: italic;
    font-family: "Roboto", sans-serif;
    margin: 20px 0px 0px;
    color: var(--dark-color);
}
.welcome_overlay .welcome_content {
    margin-top: 20px;
}
.welcome_overlay .welcome_content .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.welcome_overlay .item .content {
    text-align: center;
    border: 1px solid #e9ecef;
    padding: 20px 20px 0px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.welcome_overlay .item .content:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}
.welcome_overlay .item h2 {
    color: var(--dark-color);
    font-size: 26px;
    line-height: 34px;
    font-family: "Roboto", sans-serif;
    margin-bottom: 20px;
}
.welcome_overlay .item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.welcome_overlay .item .bottom {
    text-align: center;
    margin-top: 24px;
}
.welcome_overlay .item .main_btn {
    width: 100%;
    padding: 10px 18px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 10px;
}
.welcome_overlay .item p {
    color: var(--sub-dark-color);
    font-size: 16px;
    line-height: 24px;
    margin: 14px 0px 0px;
}
/*---------------------------
1.13) welcome popup area ends here
---------------------------*/

/*===========================
1.14) floating book now button area here
===========================*/
.floating_book_button {
    position: fixed;
    top: 50%;
    right: -220px;
    z-index: 999;
    transition: right 0.5s ease-in-out;
    -webkit-transition: right 0.5s ease-in-out;
    -moz-transition: right 0.5s ease-in-out;
    -ms-transition: right 0.5s ease-in-out;
    -o-transition: right 0.5s ease-in-out;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.floating_book_button.show {
    right: 20px;
}
.floating_book_button .main_btn {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400 !important;
    font-family: var(--font-paprika) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.floating_book_button .main_btn:active,
.floating_book_button .main_btn:focus {
    color: var(--white) !important;
}
.floating_book_button .main_btn::after {
    content: '';
    width: 90px;
    height: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    border: 2px dashed var(--white);
    animation: floatingRotateBorder 20s linear infinite;
    -webkit-animation: floatingRotateBorder 20s linear infinite;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.floating_book_button .main_btn:hover::after {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
}
@keyframes floatingRotateBorder {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*---------------------------
1.14) floating book now button area ends here
---------------------------*/


/*########################
2) about us ---------------[########################]
########################*/

/*===========================
2.1) inner banner area here
===========================*/
.inner_banner {
    width: 100%;
    height: 580px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.inner_banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rgba-black-bg-inner);
    z-index: -1;
}
.inner_banner .inner_banner_thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.inner_banner .inner_banner_wrap {
    width: 100%;
}
.inner_banner .inner_banner_inner {
    position: relative;
    margin-top: 103px;
    z-index: 0;
}
.inner_banner .inner_banner_inner h2 {
    font-size: 50px;
    line-height: 100%;
    color: var(--white);
    font-weight: 700;
    margin-bottom: 20px;
}
.inner_banner .inner_banner_inner ul {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inner_banner .inner_banner_inner ul li {}
.inner_banner .inner_banner_inner ul li a {
    font-size: 20px;
    line-height: 100%;
    color: var(--white);
    font-weight: 400;
    font-family: var(--font-onest);
    position: relative;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.inner_banner .inner_banner_inner ul li a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px;
    left: 0;
    background: var(--white);
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
}
.inner_banner .inner_banner_inner ul li:hover a::before {
    width: 100%;
}
.inner_banner .inner_banner_inner ul li span {
    display: inline-block;
    font-size: 17px;
    line-height: 100%;
    color: var(--white);
    font-weight: 400;
}
.inner_banner .inner_banner_inner .rectangle_thumb {
    position: absolute;
    top: 50%;
    left: -70px;
    z-index: -1;
    max-width: 6%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    animation: floatUpDown 3s ease-in-out infinite;
    -webkit-animation: floatUpDown 3s ease-in-out infinite;
}
@keyframes floatUpDown {
    0% {
        transform: translate(0%, -50%) translateY(20px);
        -webkit-transform: translate(0%, -50%) translateY(20px);
        -moz-transform: translate(0%, -50%) translateY(20px);
        -ms-transform: translate(0%, -50%) translateY(20px);
        -o-transform: translate(0%, -50%) translateY(20px);
    }
    50% {
        transform: translate(0%, -50%) translateY(-20px);
        -webkit-transform: translate(0%, -50%) translateY(-20px);
        -moz-transform: translate(0%, -50%) translateY(-20px);
        -ms-transform: translate(0%, -50%) translateY(-20px);
        -o-transform: translate(0%, -50%) translateY(-20px);
    }
    100% {
        transform: translate(0%, -50%) translateY(20px);
        -webkit-transform: translate(0%, -50%) translateY(20px);
        -moz-transform: translate(0%, -50%) translateY(20px);
        -ms-transform: translate(0%, -50%) translateY(20px);
        -o-transform: translate(0%, -50%) translateY(20px);
    }
}
@-webkit-keyframes floatUpDown {
    0% {
        -webkit-transform: translate(0%, -50%) translateY(20px);
    }
    50% {
        -webkit-transform: translate(0%, -50%) translateY(-20px);
    }
    100% {
        -webkit-transform: translate(0%, -50%) translateY(20px);
    }
}
/*---------------------------
2.1) inner banner area ends here
---------------------------*/


/*===========================
2.2) about welcome area here
===========================*/
.about_welcome {
    position: relative;
    background: var(--white);
    padding: 80px 0px;
    overflow: hidden;
    z-index: 0;
}
.about_welcome .about_welcome_wrap {}
.about_welcome .about_welcome_inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    z-index: 0;
}
.about_welcome .about_welcome_inner .about_welcome_vector {
    position: absolute;
    top: 50%;
    left: 0%;
    max-width: 16%;
    z-index: -1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    animation: welcomeFloatLeftRight 3s ease-in-out infinite;
    -webkit-animation: welcomeFloatLeftRight 3s ease-in-out infinite;
}
@keyframes welcomeFloatLeftRight {
    0%, 100% {
        transform: translate(-50%, -50%) translateX(-10px);
        -webkit-transform: translate(-50%, -50%) translateX(-10px);
        -moz-transform: translate(-50%, -50%) translateX(-10px);
        -ms-transform: translate(-50%, -50%) translateX(-10px);
        -o-transform: translate(-50%, -50%) translateX(-10px);
    }
    50% {
        transform: translate(-50%, -50%) translateX(10px);
        -webkit-transform: translate(-50%, -50%) translateX(10px);
        -moz-transform: translate(-50%, -50%) translateX(10px);
        -ms-transform: translate(-50%, -50%) translateX(10px);
        -o-transform: translate(-50%, -50%) translateX(10px);
    }
}
@-webkit-keyframes welcomeFloatLeftRight {
    0%, 100% {
        -webkit-transform: translate(-50%, -50%) translateX(-10px);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) translateX(10px);
    }
}
.about_welcome .left {
    width: 100%;
    padding: 60px 24px;
    box-shadow: var(--shadow-dark);
    background: var(--white);
    text-align: center;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.about_welcome .left p {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    margin-bottom: 31px;
}
.about_welcome .left .main_btn {}
.about_welcome .right {
    position: relative;
    margin-left: -150px;
    z-index: -1;
}
.about_welcome .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about_welcome .right::after {
    content: '';
    position: absolute;
    background: var(--rgba-black-bg);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
/*---------------------------
2.2) about welcome area ends here
---------------------------*/


/*===========================
2.3) about details area here
===========================*/
.about_details {
    position: relative;
    padding: 80px 0px;
    background: var(--rgba-primary);
    z-index: 0;
}
.about_details .about_details_wrap {}
.about_details .about_details_inner {}
.about_details .about_details_header {
    text-align: center;
    margin-bottom: 40px;
}
.about_details .about_details_header span {
    display: block;
    font-size: 20px;
    line-height: 100%;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.about_details .about_details_header h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.about_details .about_details_items {}
.about_details .about_details_item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}
.about_details .about_details_item:last-child {
    margin-bottom: 0;
}
.about_details .about_details_item .left {
    flex: 1;
}
.about_details .about_details_item .left h3 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 14px;
}
.about_details .about_details_item .left p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    color: var(--para);
}
.about_details .about_details_item .right {
    flex: 1.5;
}
.about_details .about_details_item .right .thumb {
    position: relative;
    overflow: visible;
}

.about_details .about_details_item .right .thumb::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 80%;
    border-right: 3px solid var(--white);
    border-top: 3px solid var(--white);
    z-index: 1;
    transition: all 0.4s ease;
}
.about_details .about_details_item .right .thumb::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40%;
    border-left: 3px solid var(--white);
    border-bottom: 3px solid var(--white);
    z-index: 1;
    transition: all 0.4s ease;
}
.about_details .about_details_item:hover .right .thumb::before {
    border-color: var(--primary);
    width: 0%;
    height: 100%;
}
.about_details .about_details_item:hover .right .thumb::after {
    border-color: var(--primary);
    width: 0%;
    height: 100%;
}
.about_details .about_details_item .right .thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
}
.about_details .about_details_item:hover .right .thumb img {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
}

/*---------------------------
2.3) about details area ends here
---------------------------*/


/*===========================
2.4) faq area here
===========================*/
.faq {
    position: relative;
    padding: 80px 0px;
    background: var(--white);
    overflow: hidden;
    z-index: 0;
}
.faq .faq_wrap {}
.faq .faq_inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    align-items: flex-start;
}
.faq .left {}
.faq .left h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
}
.faq .left h2 span {
    color: var(--primary);
    display: block;
    line-height: 100%;
}
.faq .left p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
}
.faq .right {}
.faq .faq_lists {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.faq .faq_item {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.faq .faq_item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.faq .faq_question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.faq .faq_question h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}
.faq .faq_icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rgba-primary);
    flex-shrink: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.faq .faq_icon i {
    color: var(--primary);
    font-size: 14px;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}
.faq .faq_answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    -webkit-transition: max-height 0.4s ease, padding 0.4s ease;
    -moz-transition: max-height 0.4s ease, padding 0.4s ease;
    -ms-transition: max-height 0.4s ease, padding 0.4s ease;
    -o-transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq .faq_answer p {
    padding: 10px 0px 20px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
}
/* Active State */
.faq .faq_item.active .faq_question {
    background: var(--rgba-primary);
}
.faq .faq_item.active .faq_question h3 {
    color: var(--primary);
}
.faq .faq_item.active .faq_icon {
    background: var(--primary);
    transform: rotate(180deg);
}
.faq .faq_item.active .faq_icon i {
    color: var(--white);
}
.faq .faq_item.active .faq_answer {
    max-height: 300px;
    padding-top: 0;
}
/*---------------------------
2.4) faq area ends here
---------------------------*/



/*########################
2) rooms ---------------[########################]
########################*/

/*===========================
2.1) inner banner area here
===========================*/
.inner-banner {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-top: 205px;
    background-position: center center !important;
}
.inner-banner .awe-overlay-intro {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.inner-banner .awe-overlay-intro .row {
    margin: 0px !important;
}
.inner-banner .awe-overlay-intro .content {
    display: block;
    width: 100%;
    text-align: start;
}
.inner-banner .awe-overlay-intro .content h1 {
    position: relative;
    display: inline-block;
    padding: 0px;
    text-align: start;
    z-index: 0;
}
.inner-banner .awe-overlay-intro .content h1::after {
    left: calc(100% + 10px);
    top: 0;
    opacity: 0.3;
    z-index: -1;
}
.inner-banner .awe-overlay-intro .content h1::before {
    right: calc(100% + 10px);
    top: 0;
    opacity: 0.3;
    z-index: -1;
}
/*---------------------------
2.1) inner banner area ends here
---------------------------*/


/*===========================
2.2) rooms area here
===========================*/
.rooms {
    position: relative;
    padding: 80px 0px;
    background: var(--white);
    overflow: hidden;
}
.rooms .row {
    margin: 0px !important;
}
.rooms .widget-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0px;
}
.rooms .widget-rooms-list form {
    box-shadow: var(--shadow-main);
}
.rooms .rooms-item {
    margin: 0px !important;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    border: 1px solid var(--rgba-secondary);
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}
.rooms .rooms-item:hover {
    border: 1px solid var(--primary);
}
.rooms .item-photo {
    position: inherit !important;
    top: inherit !important;
    left: inherit !important;
    width: 100% !important;
}
.rooms .item-photo a {
    padding-top: inherit !important;
    height: 100% !important;
}
.rooms .item-desc {
    padding: 20px !important;
    text-align: start !important;
}
.rooms .item-desc h2 {
    font-size: 24px;
    line-height: 34px;
    color: var(--dark);
    font-family: var(--font-onest) !important;
}
.rooms .item-desc p {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 24px !important;
    margin-bottom: 20px !important;
    color: var(--para) !important;
}
.rooms .desc-features {
    width: 100% !important;
    margin-top: 0px !important;
}
.rooms .desc-features ul {
    display: block;
}
.rooms .desc-features::after,
.rooms .desc-features::before {
    display: none !important;
}
.rooms .desc-features ul::after,
.rooms .desc-features ul::before {
    display: none !important;
}
.rooms .desc-features li {
    color: var(--para) !important;
    padding-left: 0px !important;
    font-size: 14px !important;
    line-height: 100% !important;
    font-family: var(--font-open);
}
.rooms .desc-features li i {
    margin-right: 4px;
}
.rooms .item-price {
    position: inherit !important;
    width: 100% !important;
    padding: 0px !important;
    border: none !important;
    top: inherit !important;
    right: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rgba-primary) !important;
}
.rooms .price-inner {
    position: inherit !important;
    top: inherit !important;
    transform: inherit !important;
    padding: 0px !important;
}
.rooms .price-inner h3 {
    font-size: 30px !important;
    color: var(--dark);
    font-family: var(--font-open) !important;
    font-weight: 600 !important;
    position: relative;
    z-index: 0;
}
.rooms .price-inner h3.reguler_price {
    font-size: 16px !important;
    line-height: 100% !important;
    display: inline-block;
}
.rooms .price-inner h3.reguler_price::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--delete);
    top: 50%;
    left: 0;
    transform-origin: center;
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}
.rooms .price-inner h5 {
    padding: 10px 0px 20px !important;
    font-size: 14px !important;
    line-height: 100%;
    color: var(--para) !important;
    font-family: var(--font-open);
}
.rooms .price-inner a {
    padding: 9px 24px !important;
}
/*---------------------------
2.2) rooms area ends here
---------------------------*/


/*########################
3) reservation ---------------[########################]
########################*/
/*===========================
3.1) reservation area here
===========================*/
.reservation_sec {
    position: relative;
    padding: 60px 0px 60px;
    background: var(--white);
    z-index: 0;
}

/* search box css */
.reservation_sec .search-box {
    background: var(--white);
    padding: 40px 25px;
    box-shadow: var(--shadow-dark);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Animated Border Effects */
.reservation_sec .search-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    animation: searchBoxTopBorder 5s linear infinite;
    -webkit-animation: searchBoxTopBorder 5s linear infinite;
    z-index: 2;
}

.reservation_sec .search-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    animation: searchBoxBottomBorder 5s linear infinite;
    -webkit-animation: searchBoxBottomBorder 5s linear infinite;
    z-index: 2;
}

.reservation_sec .search-box .border-left {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    animation: searchBoxLeftBorder 5s linear infinite;
    -webkit-animation: searchBoxLeftBorder 5s linear infinite;
    z-index: 2;
}

.reservation_sec .search-box .border-right {
    content: '';
    position: absolute;
    right: 0;
    bottom: -100%;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    animation: searchBoxRightBorder 5s linear infinite;
    -webkit-animation: searchBoxRightBorder 5s linear infinite;
    z-index: 2;
}

/* Keyframe Animations */
@keyframes searchBoxTopBorder {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes searchBoxBottomBorder {
    0% {
        right: -100%;
    }
    100% {
        right: 100%;
    }
}

@keyframes searchBoxLeftBorder {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}

@keyframes searchBoxRightBorder {
    0% {
        bottom: -100%;
    }
    100% {
        bottom: 100%;
    }
}

.reservation_sec .search-title {
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    color: var(--dark);
    text-align: left;
    margin-bottom: 30px;
    position: relative;
    z-index: 0;
}
.reservation_sec .search-title::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--primary);
}
.reservation_sec .search-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
    /* position: relative;
    z-index: 3; */
}
.reservation_sec .search-form .form-group {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.reservation_sec .search-form label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-open);
}

.reservation_sec .search-form label i {
    color: var(--primary);
    font-size: 14px;
}

.reservation_sec .search-form input,
.reservation_sec .search-form select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--rgba-primary);
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--font-open);
    color: var(--dark);
    background: var(--white);
    transition: all 0.3s ease;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/* number css */
.reservation_sec .number-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--white);
    border: 2px solid var(--rgba-primary);
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.reservation_sec .number-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--rgba-primary);
}

.reservation_sec .number-btn {
    width: 40px;
    height: 52px;
    border: none;
    background: var(--rgba-primary);
    color: var(--dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.reservation_sec .number-btn:hover {
    background: var(--primary);
    color: var(--white);
}

.reservation_sec .number-btn:active {
    background: #2651c9;
}

.reservation_sec .number-btn:disabled {
    background: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
}

.reservation_sec .number-input-wrapper input[type="number"] {
    flex: 1;
    border: none;
    padding: 14px 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    background: var(--white);
    -moz-appearance: textfield;
    appearance: textfield;
}

.reservation_sec .number-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.reservation_sec .number-input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reservation_sec .number-input-wrapper input[type="number"]:focus {
    outline: none;
}

.reservation_sec .search-form input:focus,
.reservation_sec .search-form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--rgba-primary);
}

.reservation_sec .main_btn {
    line-height: 100%;
    font-family: var(--font-open) !important;
    padding: 20px 20px;
    border-radius: 10px;
}
.reservation_sec .main_btn i {
    margin-right: 4px;
}


/* room section  */
.reservation_sec .reservation-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    margin-top: 60px;
}
.reservation_sec .rooms-section {
    background: transparent;
}
.reservation_sec .section-title {
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    color: var(--dark);
    text-align: left;
    margin-bottom: 40px;
    position: relative;
    z-index: 0;
}
.reservation_sec .section-title::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--primary);
}

.reservation_sec .rooms-container {
    display: grid;
    gap: 25px;
}

/* Room Card */
.reservation_sec .room-card {
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-main);
    border: 1px solid var(--rgba-secondary);
    display: grid;
    grid-template-columns: 300px 1fr;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.reservation_sec .room-card:hover {
    box-shadow: var(--shadow-dark);
    border: 1px solid var(--primary);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
}
.reservation_sec .room-image {
    position: relative;
    /* height: 220px; */
    overflow: hidden;
}
.reservation_sec .room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
}
.reservation_sec .room-card:hover .room-image img {
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
}
.reservation_sec .available-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--gradient-primary-hover);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-main);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.reservation_sec .available-badge small {
    font-size: 14px;
    line-height: 100%;
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-open);
    margin-bottom: 4px;
}
.reservation_sec .available-badge span {
    font-size: 22px;
    line-height: 100%;
    font-weight: bold;
    color: var(--white);
}
.reservation_sec .room-details {
    padding: 0px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.reservation_sec .room-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    font-family: var(--font-onest);
    text-align: left;
    padding: 10px 24px;
    margin: 0px -24px;
    background: var(--rgba-primary);
}
.reservation_sec .room-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.reservation_sec .info-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.reservation_sec .info-label {
    color: var(--para);
    font-weight: 500;
    font-family: var(--font-open);
    font-size: 14px;
    line-height: 100%;
}
.reservation_sec .info-value {
    color: var(--dark);
    font-family: var(--font-open);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
}
.reservation_sec .room-price {
    color: var(--primary);
    font-weight: 900;
}
.reservation_sec .room-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}
.reservation_sec .room-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rgba-primary);
    padding: 8px 15px;
    border-radius: 8px;
}
.reservation_sec .quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--primary);
    color: var(--white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reservation_sec .quantity-btn:hover {
    background: #2651c9;
}
.reservation_sec .quantity-btn:disabled {
    background: #ddd;
    cursor: not-allowed;
}
.reservation_sec .quantity-value {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    color: var(--dark);
    font-size: 16px;
    font-family: var(--font-open);
}
.reservation_sec .select-room-btn {
    flex: 1;
    padding: 12px 25px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-open);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.reservation_sec .select-room-btn:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-main);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
}
.reservation_sec .select-room-btn.selected {
    background: #27ae60;
}
.reservation_sec .select-room-btn.selected:hover {
    background: #229954;
}

/* reservation sidebar */
.reservation_sec .reservation-sidebar {
    position: relative;
}
.reservation_sec .sidebar-sticky {
    position: sticky;
    top: 90px;
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-dark);
}
.reservation_sec .sidebar-header {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 30px 20px;
    text-align: center;
}
.reservation_sec .sidebar-header h3 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}
.reservation_sec .sidebar-header p {
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
}

/* Selected Rooms Summary */
.reservation_sec .selected-rooms {
    padding: 24px 20px;
    border-bottom: 2px solid var(--primary);
}
.reservation_sec .selected-rooms h4 {
    font-size: 20px;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 18px;
}
.reservation_sec #selectedRoomsContainer {
    display: grid;
    gap: 15px;
}
.reservation_sec .selected-room-item {
    background: var(--rgba-primary);
    padding: 18px;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.reservation_sec .room-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.reservation_sec .room-item-name {
    font-size: 17px;
    color: var(--dark);
    font-weight: 700;
    font-family: var(--font-onest);
}
.reservation_sec .room-count {
    background: var(--primary);
    color: var(--white);
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-open);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.reservation_sec .room-item-details {
    font-size: 14px;
    color: var(--para);
    line-height: 1.8;
    font-family: var(--font-open);
}
.reservation_sec .room-item-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rgba-secondary);
    font-weight: 600;
}
.reservation_sec .total-label {
    font-size: 17px;
    color: var(--dark);
    font-weight: 700;
    font-family: var(--font-onest);
}
.reservation_sec .total-value {
    color: var(--primary);
    font-family: var(--font-open);
    font-size: 16px;
}

/* Guest Form Section */
.reservation_sec .guest-form-section {
    padding: 0;
}
.reservation_sec .tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
}
.reservation_sec .tab-btn {
    flex: 1;
    padding: 18px 20px;
    background: var(--rgba-primary);
    color: var(--para);
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-onest);
}
.reservation_sec .tab-btn:hover {
    background: var(--white);
    color: var(--primary);
}
.reservation_sec .tab-btn.active {
    background: var(--gradient-primary);
    color: var(--white);
}
.reservation_sec .tab-content {
    display: none;
    padding: 30px 20px;
    animation: reservationFadeIn 0.4s ease;
    -webkit-animation: reservationFadeIn 0.4s ease;
}
.reservation_sec .tab-content.active {
    display: block;
}

@keyframes reservationFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.reservation_sec .guest-form .form-field {
    margin-bottom: 20px;
}
.reservation_sec .guest-form label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
    font-family: var(--font-onest);
    text-align: left;
}
.reservation_sec .guest-form input,
.reservation_sec .guest-form select,
.reservation_sec .guest-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #ddd;
    font-size: 14px;
    font-family: var(--font-open);
    color: var(--dark);
    background: var(--white);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.reservation_sec .guest-form input:focus,
.reservation_sec .guest-form select:focus,
.reservation_sec .guest-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--rgba-primary);
}
.reservation_sec .guest-form textarea {
    resize: vertical;
    min-height: 100px;
}
.reservation_sec .submit-btn {
    width: 100%;
    padding: 16px 30px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-onest);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.reservation_sec .submit-btn:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-dark);
}

/* Empty State */
.reservation_sec .empty-state {
    padding: 60px 30px;
    text-align: center;
    color: #95a5a6;
}
.reservation_sec .empty-state i {
    font-size: 64px;
    margin-bottom: 15px;
    opacity: 0.3;
}
.reservation_sec .empty-state p {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-open);
}




/* success modal */

.reservation_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rgba-black-bg);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.reservation_modal.active {
    display: flex;
}
.reservation_modal .modal-content {
    background: var(--white);
    padding: 50px;
    text-align: center;
    max-width: 450px;
    box-shadow: var(--shadow-dark);
    animation: reservationModalSlideIn 0.4s ease;
    -webkit-animation: reservationModalSlideIn 0.4s ease;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

@keyframes reservationModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.reservation_modal .modal-icon {
    font-size: 80px;
    color: #27ae60;
    margin-bottom: 20px;
}
.reservation_modal .modal-content h3 {
    font-size: 28px;
    color: var(--dark);
    margin-bottom: 15px;
    font-family: var(--font-paprika);
}
.reservation_modal .modal-content p {
    font-size: 16px;
    color: var(--para);
    margin-bottom: 30px;
    font-family: var(--font-open);
}
.reservation_modal .modal-btn {
    padding: 14px 40px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-onest);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.reservation_modal .modal-btn:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
}


/*---------------------------
3.1) reservation area ends here
---------------------------*/


/*########################
3) restaurant ---------------[########################]
########################*/
/*===========================
3.1) restaurant area here
===========================*/
.restaurant {
    padding: 80px 0px;
}
.restaurant .row {
    margin: 0px;
}
.restaurant .widget-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.restaurant .restaurant_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.restaurant .left .thumb {
    height: 100%;
}
.restaurant .left .thumb img {
    height: 100%;
    object-fit: cover;
}
.restaurant .right .content img {
    width: 200px;
    margin-bottom: 20px;
    border: 10px solid #b9a256;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.restaurant .right .content p {
    font-size: 18px;
    line-height: 28px;
    margin: 0px;
}
.restaurant .right .restaurant_social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.restaurant .right .restaurant_social li a {
    font-size: 20px;
    color: #b9a256;
}
.restaurant .right .restaurant_social li a .icon_itrm:hover {
    color: #b9a256;
}
/*---------------------------
3.1) restaurant area ends here
---------------------------*/


/*########################
4) meeting-and-event ---------------[########################]
########################*/
/*===========================
4.1) meeting and event area here
===========================*/
.meeting {
    padding: 80px 0px;
}
.meeting .row {
    margin: 0px;
}
.meeting .inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.meeting .inner .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.meeting .inner .items .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.meeting .inner .items .content h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 12px;
}
.meeting .inner .items .content p {
    font-size: 18px;
    line-height: 28px;
    margin: 0px;
}
/*---------------------------
4.1) meeting and event area ends here
---------------------------*/


/*########################
5) offer ---------------[########################]
########################*/
/*===========================
5.1) offer area here
===========================*/
.offer {
    padding: 80px 0px;
}
.offer .row {
    margin: 0px;
}
.offer .offer-div h2 {
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 40px;
}
.offer .offer-div img {
    width: auto;
    max-width: 600px;
    min-height: auto !important;
    margin: 0px !important;
    background: inherit !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border: 20px solid #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
/*---------------------------
5.1) offer area ends here
---------------------------*/


/*########################
6) gallery ---------------[########################]
########################*/
/*===========================
6.1) gallery area here
===========================*/
.gallery {
    padding: 80px 0px;
    position: relative;
    overflow: hidden;
    background: var(--rgba-primary);
}
.gallery .inner {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
}
.gallery .inner .left {
    margin: 0px;
}
.gallery .inner h4 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    font-family: var(--font-onest);
    padding: 15px 20px;
    margin: 0px;
    text-transform: capitalize;
    color: var(--white);
    background: var(--gradient-primary-hover);
    border-radius: 10px;
}
.gallery .inner ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.gallery .inner ul li {
    display: block;
    width: inherit;
    padding: 0px;
    line-height: 0px;
}
.gallery .inner ul li::after {
    display: none;
}
.gallery .inner ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.gallery .inner ul li a::after {
    width: 90%;
    height: 90%;
    top: 5%;
    left: 0;
    background: rgba(0, 0, 0, 0.2) url(../images/camera.png) no-repeat center center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transform: translate(5%, 0px);
    -webkit-transform: translate(5%, 0px);
    -moz-transform: translate(5%, 0px);
    -ms-transform: translate(5%, 0px);
    -o-transform: translate(5%, 0px);
}
.gallery .inner ul li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery .inner .right {
    margin: 0px;
}
/*---------------------------
6.1) gallery area end here
---------------------------*/


/*########################
7) contact-us ---------------[########################]
########################*/
/*===========================
7.1) contact us area here
===========================*/
.contact_us {
    padding: 80px 0px;
}
.contact_us .row {
    margin: 0;
}
.contact_us .contact_wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}
.contact_wrap .contact_left {
    padding: 30px 20px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.contact_left h2 {
    font-size: 30px !important;
    line-height: 40px;
    padding-bottom: 20px !important;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.contact_left p {
    font-size: 18px;
    line-height: 28px;
    margin: 0px;
}
.contact_left .contact-form {
    margin: 30px 0px 0px 0px !important;
}
.contact_left .form_input_sub {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.contact_left .form-group {
    width: 100%;
    margin: 0px;
}
.contact_left .form-group label {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 6px;
    color: #000;
}
.contact_left .form-group input {
    margin: 0px;
}
.contact_left .submit-button {
    margin-top: 30px;
}
.contact_left .submit-button button {
    width: 100%;
    padding: 15px 20px !important;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: inherit;
    text-transform: capitalize;
    border: none;
}
.contact_left .submit-button button {
    width: 100%;
    padding: 15px 20px !important;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: inherit;
    text-transform: capitalize;
    border: none;
}
.contact_left .submit-button button:hover {
    border: none;
}
.contact_left .submit-button button:focus {
    outline: none;
}
.contact_wrap .contact_right {
    padding: 30px 20px;
    background: #fff;
    height: max-content;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.contact_right h2 {
    font-size: 30px !important;
    line-height: 40px;
    padding-bottom: 20px !important;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.contact_right .address {
    display: block;
}
.contact_right .address li:not(:last-child) {
    margin-bottom: 16px;
}
.contact_right .address li h4 {
    font-size: 20px;
    line-height: 30px;
    text-transform: capitalize;
    margin-bottom: 4px;
}
.contact_right .address li p {
    margin: 0px;
    font-size: 16px;
    line-height: 26px;
}
.contact_right .social-links {
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.contact_right .social-links li a {
    font-size: 24px;
    line-height: 30px;
    color: #b9a256;
}
.contact_right .social-links li a .icon:hover {
    color: #b9a256;
}
/*---------------------------
7.1) contact us area ends here
---------------------------*/


/*########################
8) first home ---------------[########################]
########################*/
/*===========================
8.1) first header area here
===========================*/
.first_header {
    overflow: hidden;
    position: fixed !important;
    top: 0;
    left: 0;
    background: var(--rgba-black);
    backdrop-filter: blur(10px);
    width: 100%;
    padding: 20px 0px;
    z-index: 999;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}
.first_header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.first_header .inner .left p {
    margin: 0;
    font-size: 20px;
    line-height: 100%;
    color: var(--white);
}
.first_header .inner .right ul {
    display: flex;
    align-items: center;
    gap: 20px;
}
.first_header .inner .right ul li {
    line-height: 100%;
}
.first_header .inner .right ul li a {
    font-size: 20px;
    line-height: 100%;
    color: var(--white);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.first_header .inner .right ul li a:hover {
    color: var(--primary);
}
/*---------------------------
8.1) first header area ends here
---------------------------*/


/*===========================
8.2) first banner area here
===========================*/
.first_banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.first_banner .wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rgba-black-bg-inner);
    z-index: 0;
}
.first_banner .container-fluid::after,
.first_banner .container-fluid::before,
.first_banner .container::before,
.first_banner .container::after,
.first_banner .row::after,
.first_banner .row::before {
    display: none;
}
.first_banner .wrap .container-fluid {
    padding: 0px;
}
.first_banner .slider_items .owl-stage {
    display: flex;
}
.first_banner .slider_items .owl-nav,
.first_banner .slider_items .owl-dots {
    display: none;
}
.first_banner .slider_items .thumb img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.first_banner .content_wrap {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    z-index: 50;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.first_banner .content_wrap .content {
    max-width: 100%;
    margin: 60px auto 0px;
    text-align: center;
    position: relative;
    z-index: 0;
}
.first_banner .content_wrap .content .rectangle_thumb_left {
    position: absolute;
    top: -28px;
    left: -50px;
    max-width: 6%;
    z-index: -1;
    animation: floatUpDown10px 3s ease-in-out infinite;
    -webkit-animation: floatUpDown10px 3s ease-in-out infinite;
}
.first_banner .content_wrap .content .rectangle_thumb_right {
    position: absolute;
    top: -28px;
    right: -50px;
    max-width: 6%;
    z-index: -1;
    animation: floatUpDown10px 3s ease-in-out infinite;
    -webkit-animation: floatUpDown10px 3s ease-in-out infinite;
}
@keyframes floatUpDown10px {
    0%, 100% {
        transform: translateX(10px);
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
}
    50% {
        transform: translateX(-10px);
        -webkit-transform: translateX(-10px);
        -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        -o-transform: translateX(-10px);
}
}
@-webkit-keyframes floatUpDown10px {
    0%, 100% {
        -webkit-transform: translateX(10px);
    }
    50% {
        -webkit-transform: translateX(-10px);
    }
}
.first_banner .content_wrap .content h2 {
    font-size: 64px;
    line-height: 110%;
    font-family: var(--font-onest);
    font-weight: 600;
    color: var(--white);
    margin-bottom: 14px;
}
.first_banner .content_wrap .content h2 span {
    color: var(--primary);
    font-weight: 700;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
}
.first_banner .content_wrap .content p {
    font-size: 20px;
    line-height: 28px;
    color: var(--white);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}
.first_banner .location_link {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}
.location_link .location_btn {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400 !important;
    font-family: var(--font-paprika) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.location_link .location_btn:active,
.location_link .location_btn:focus {
    color: var(--white) !important;
}
.location_link .location_btn::after {
    content: '';
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    border: 2px dashed var(--white);
    animation: locationRotateBorder 20s linear infinite;
    -webkit-animation: locationRotateBorder 20s linear infinite;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.location_link .location_btn:hover::after {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
}
@keyframes locationRotateBorder {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*---------------------------
8.2) first banner area ends here
---------------------------*/


/*===========================
8.3) first contact area here
===========================*/
/* .first_contact {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    background: var(--bg_color);
}
.first_contact .section-header h2 {
    font-size: 40px;
    line-height: 50px;
    color: var(--dark-color);
    font-weight: 500;
    margin-bottom: 10px;
}
.first_contact .section-header p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--sub-dark-color);
    max-width: 700px;
    margin: 0 auto;
}
.first_contact .contact_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.first_contact .item {
    background: var(--bg_color);
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, 0.1);
}
.first_contact .item h3 {
    color: var(--dark-color);
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 10px;
    text-align: left;
}
.first_contact .item h3 span {
    color: var(--primary-color);
    font-weight: 600;
}
.first_contact .item > p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--sub-dark-color);
    text-align: left;
    margin: 0px 0px 30px;
}
.first_contact .infos {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.first_contact .info {
    display: flex;
    gap: 14px;
}
.first_contact .info .thumb {
    width: 40px;
    height: 40px;
    color: var(--white);
    background: var(--primary-color);
    font-size: 20px;
    line-height: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.first_contact .info .content {
    text-align: left;
}
.first_contact .info .content h4 {
    display: block;
    color: var(--dark-color);
    font-size: 24px;
    line-height: 28px;
    font-family: "Poppins", sans-serif;
    margin-bottom: 10px;
    text-align: left;
}
.first_contact .info .content p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--sub-dark-color);
    margin: 0px;
} */
/*---------------------------
8.3) first contact area ends here
---------------------------*/


/*########################
9) first restaurant ---------------[########################]
########################*/
/*===========================
9.1) section header area here
===========================*/
.first_rest {
    padding: 80px 0px 0px;
    position: relative;
    background: var(--white);
    z-index: 1;
}
.first_rest .wrap .section-header {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
    box-shadow: var(--shadow-dark);
    background: var(--white);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.first_rest .wrap .section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    animation: firstRestTopBorder 3s linear infinite;
    -webkit-animation: firstRestTopBorder 3s linear infinite;
    z-index: 2;
}
.first_rest .wrap .section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    animation: firstRestBottomBorder 3s linear infinite;
    -webkit-animation: firstRestBottomBorder 3s linear infinite;
    z-index: 2;
}
.first_rest .wrap .section-header .border-left {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    animation: firstRestLeftBorder 3s linear infinite;
    -webkit-animation: firstRestLeftBorder 3s linear infinite;
    z-index: 2;
}
.first_rest .wrap .section-header .border-right {
    content: '';
    position: absolute;
    right: 0;
    bottom: -100%;
    width: 3px;
    height: 100%;
    background:  var(--gradient-primary);
    animation: firstRestRightBorder 3s linear infinite;
    -webkit-animation: firstRestRightBorder 3s linear infinite;
    z-index: 2;
}
@keyframes firstRestTopBorder {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
@keyframes firstRestBottomBorder {
    0% {
        right: -100%;
    }
    100% {
        right: 100%;
    }
}
@keyframes firstRestLeftBorder {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}
@keyframes firstRestRightBorder {
    0% {
        bottom: -100%;
    }
    100% {
        bottom: 100%;
    }
}
.first_rest .wrap .section-header h2 {
    margin-bottom: 10px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
    position: relative;
    z-index: 3;
}
.first_rest .wrap .section-header p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
    position: relative;
    z-index: 3;
}
/*---------------------------
9.1) section header area ends here
---------------------------*/


/*===========================
9.2) our menu area here
===========================*/
.first_rest .our_menu_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 60px 0px 0px;
}
.first_rest .our_menu_wrap .content {
    text-align: left;
}
.first_rest .our_menu_wrap .content > h4 {
    font-size: 16px;
    line-height: 100%;
    font-weight: bold;
    color: var(--primary);
    font-family: var(--font-open);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.first_rest .our_menu_wrap .content > h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 10px;
    color: var(--dark);
}
.first_rest .our_menu_wrap .content > p {
    color: var(--para);
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 30px;
}
.first_rest .our_menu_wrap .item:not(:last-child) {
    margin-bottom: 20px;
}
.first_rest .our_menu_wrap .item {
    display: flex;
    gap: 12px;
}
.first_rest .our_menu_wrap .item span {
    font-size: 24px;
    line-height: 100%;
    display: inline-block;
    color: var(--primary);
}
.first_rest .our_menu_wrap .item_content h3 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--dark);
    font-family: var(--font-onest);
}
.first_rest .our_menu_wrap .item_content p {
    color: var(--para);
    font-size: 14px;
    line-height: 24px;
}
.first_rest .our_menu_wrap .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*---------------------------
9.2) our menu area ends here
---------------------------*/


/*===========================
9.3) thumb wrap area here
===========================*/
.first_rest .thumb_wrap {
    overflow: hidden;
    position: relative;
    padding: 80px 0px;
}
.first_rest .thumb_wrap .container-fluid {
    padding: 0px;
}
.first_rest .thumb_wrap .container-fluid,
.first_rest .thumb_wrap .row,
.first_rest .thumb_wrap .col-12 {
    background: inherit;
    box-shadow: none;
}
.first_rest .thumb_wrap .inner .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.first_rest .thumb_wrap .inner .item {
    cursor: pointer;
}
.first_rest .thumb_wrap .inner .item .thumb {
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.first_rest .thumb_wrap .inner .item .thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.first_rest .thumb_wrap .inner .item:hover .thumb::before {
    background: rgba(0, 0, 0, 0.3);
}
.first_rest .thumb_wrap .inner .item .thumb img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}
.first_rest .thumb_wrap .inner .item:hover .thumb img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.first_rest .thumb_wrap .inner .item .content {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: calc(80%);
    background: var(--white);
    padding: 20px 15px;
    z-index: 2;
    border: 1px solid var(--primary);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.first_rest .thumb_wrap .inner .item:hover .content {
    max-width: calc(100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--primary);
    border-width: 1px;
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}
.first_rest .thumb_wrap .inner .item .content h4 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--dark);
    font-family: var(--font-onest);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}
.first_rest .thumb_wrap .inner .item:hover .content h4 {
    color: var(--primary);
}
.first_rest .thumb_wrap .inner .item .content p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: var(--para);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*---------------------------
9.3) thumb wrap area ends here
---------------------------*/


/*===========================
9.4) menu wrap area here
===========================*/
.first_rest .menu_wrap {
    background: var(--rgba-primary);
    padding: 80px 0px 56px;
    position: relative;
    overflow: hidden;
}
.first_rest .menu_wrap .section-header {
    margin-bottom: 70px;
}
.first_rest .menu_wrap .section-header h2 {
    margin-bottom: 10px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    color: var(--dark);
}
.first_rest .menu_wrap .section-header p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
    max-width: 600px;
    margin: 0 auto;
}
.first_rest .menu_wrap .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.first_rest .menu_wrap .item {
    padding: 0px 24px 40px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-main);
    margin-bottom: 25px;
}
.first_rest .menu_wrap .item h3 {
    font-size: 30px;
    line-height: 100%;
    font-weight: 500;
    background: var(--gradient-primary);
    color: var(--white);
    font-family: var(--font-onest);
    max-width: 90%;
    margin: -25px auto 0px;
    padding: 10px 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 20px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.first_rest .menu_wrap .item:hover h3 {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--gradient-primary-hover);
}
.first_rest .menu_wrap .item ul {
    width: 100%;
    margin: 40px 0px 0px;
}
.first_rest .menu_wrap .item ul li:not(:last-child) {
    margin-bottom: 30px;
}
.first_rest .menu_wrap .item ul li {
    display: flex;
    gap: 12px;
}
.first_rest .menu_wrap .item ul li span {
    font-size: 22px;
    line-height: 100%;
    display: inline-block;
    color: var(--primary);
}
.first_rest .menu_wrap .item ul li .content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
}
.first_rest .menu_wrap .item ul li .content .left {
    text-align: left;
}
.first_rest .menu_wrap .item ul li .content .left h4 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 500;
    color: var(--font-onest);
    margin-bottom: 8px;
}
.first_rest .menu_wrap .item ul li .content .left p {
    color: var(--para);
    font-size: 14px;
    line-height: 24px;
}
.first_rest .menu_wrap .item ul li .content .right {}
.first_rest .menu_wrap .item ul li .content .right p {
    color: var(--primary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin: 0px;
}
/*---------------------------
9.4) menu wrap area ends here
---------------------------*/

/*===========================
9.5) open hours area here
===========================*/
.first_rest .open_hours {
    position: relative;
    background: var(--white);
    padding: 80px 0px;
    overflow: hidden;
    z-index: 0;
}
.first_rest .open_hours .section-header {
    text-align: center;
    margin-bottom: 4%;
}
.first_rest .open_hours .section-header h2 {
    margin-bottom: 10px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    color: var(--dark);
}
.first_rest .open_hours .section-header p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--para);
}
.first_rest .open_hours .hours_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.first_rest .open_hours .hours_card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-main);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    position: relative;
    z-index: 0;
}
.first_rest .open_hours .hours_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
}
.first_rest .open_hours .hours_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}

.first_rest .open_hours .hours_card:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
}

.first_rest .open_hours .card_header {
    background: var(--rgba-primary);
    padding: 30px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.first_rest .open_hours .card_header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--gradient-primary-hover);
    animation: firstRestRotateGlow 10s linear infinite;
    -webkit-animation: firstRestRotateGlow 10s linear infinite;
}

@keyframes firstRestRotateGlow {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

.first_rest .open_hours .day_icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
    animation: firstRestIconBounce 2s ease-in-out infinite;
    -webkit-animation: firstRestIconBounce 2s ease-in-out infinite;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
@keyframes firstRestIconBounce {
    0%, 100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        -o-transform: translateY(-8px);
    }
}

.first_rest .open_hours .hours_card:hover .day_icon {
    animation-play-state: paused;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.first_rest .open_hours .card_header h3 {
    font-size: 24px;
    line-height: 100%;
    font-weight: 700;
    color: var(--white);
    position: relative;
    z-index: 1;
}
.first_rest .open_hours .card_body {
    padding: 30px 24px;
}

.first_rest .open_hours .timing_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.first_rest .open_hours .timing_item:last-child {
    border-bottom: none;
}

.first_rest .open_hours .timing_item:hover {
    padding-left: 8px;
    background: rgba(var(--primary-rgb), 0.05);
}

.first_rest .open_hours .timing_item .meal_type {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--dark);
    position: relative;
}

.first_rest .open_hours .timing_item .meal_type::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.3s ease;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.first_rest .open_hours .timing_item:hover .meal_type::before {
    transform: translateY(-50%) scale(1);
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
}

.first_rest .open_hours .timing_item .time {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--primary);
    font-family: var(--font-onest);
}
/*---------------------------
9.5) open hours area ends here
---------------------------*/




/*########################
10) room details ---------------[########################]
########################*/

/*===========================
10.1) room details gallery area here
===========================*/
.room_details_gallery {
    position: relative;
    padding: 80px 0px;
    overflow: hidden;
    z-index: 0;
}
.room_details_gallery .rbg_wrap {}
.room_details_gallery .rbg_inner {
    position: relative;
}
.room_details_gallery .rdg_items {
    position: relative;
}

.room_details_gallery .rdg_item {
    position: relative;
    margin: 0 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.room_details_gallery .rdg_item::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.room_details_gallery .rdg_item:hover::before {
    opacity: 1;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
}
.room_details_gallery .rdg_item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    -webkit-transition: transform 0.6s ease;
    -moz-transition: transform 0.6s ease;
    -ms-transition: transform 0.6s ease;
    -o-transition: transform 0.6s ease;
}
.room_details_gallery .rdg_item:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

/* Owl Carousel Custom Styling */
.room_details_gallery .owl-carousel .owl-stage-outer {
    overflow: hidden;
}
.room_details_gallery .owl-carousel .owl-item {
    opacity: 0.5;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -o-transform: scale(0.85);
}
.room_details_gallery .owl-carousel .owl-item.center {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.room_details_gallery .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    margin: 0 !important;
    z-index: 10;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.room_details_gallery .owl-nav button {
    width: 50px;
    height: 50px;
    background: var(--primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    opacity: 0;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.room_details_gallery:hover .owl-nav button {
    opacity: 1;
}
.room_details_gallery .owl-nav button.owl-prev {
    margin-left: 30px;
}
.room_details_gallery .owl-nav button.owl-next {
    margin-right: 30px;
}
.room_details_gallery .owl-nav button:hover {
    background: var(--dark) !important;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.room_details_gallery .owl-nav button span {
    font-size: 24px;
    color: var(--white);
    line-height: 0;
}
/*---------------------------
10.1) room details gallery area ends here
---------------------------*/



/*===========================
10.1) room details hero area here
===========================*/
/* .room_details_hero {
    height: 400px !important;
    background: var(--dark-color) !important;
}
.room_details_hero .item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
} */
/*---------------------------
10.1) room details hero area ends here
---------------------------*/


/*===========================
10.2) room details area here
===========================*/
.room_details {
    position: relative;
    overflow: hidden;
    background: var(--rgba-primary);
    padding: 80px 0px;
    z-index: 0;
}
.room_details .inner {}
.room_details_content {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--rgba-primary);
    margin-bottom: 30px;
}
.room_details_content .sub_title {
    font-size: 20px;
    line-height: 100%;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: var(--font-open);
}
.room_details_content .title {
    position: relative;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--dark);
}
.room_details_content .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 70px;
    height: 4px;
    background: var(--dark);
}
.room_details_content ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 40px 0 30px;
}
.room_details_content li {
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.1);
    background: var(--white);
    color: var(--para);
    padding: 10px 18px;
    font-size: 14px;
    line-height: 100%;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid var(--para);
    display: inline-block;
}
.room_details_content li span {
    margin-left: 8px;
}
.room_details_content .description {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--para);
    margin: 0;
}

/* Type items styling */
.room_details .type_items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    animation-delay: 0.2s;
    opacity: 0;
}
.room_details .type_items .item {
    background: var(--white);
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: var(--shadow-main);
    border: 1px solid var(--rgba-secondary);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.room_details .type_items .item:hover {
    border-color: var(--primary);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}
.room_details .type_items .item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--rgba-secondary);
}
.room_details .type_items .item:hover:before {
    background: var(--primary);
}
.room_details .type_items .content img {
    width: auto;
    height: 50px;
    object-fit: contain;
}
.room_details .type_items h4 {
    color: var(--dark);
    font-size: 20px;
    line-height: 100%;
    margin: 26px 0px 10px;
    font-weight: 600;
}
.room_details .type_items p {
    color: var(--para);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

/* Feature items styling */
.room_details .feature_items {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px 24px;
    box-shadow: var(--shadow-main);
    animation-delay: 0.4s;
    opacity: 0;
}
.room_details .feature_items h3 {
    color: var(--dark);
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}
.room_details .feature_items h3:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 50px;
    height: 3px;
    background: var(--dark);
}
.room_details .feature_items ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.room_details .feature_items li {
    color: var(--para);
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.room_details .feature_items li:hover {
    color: var(--primary);
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
}
.room_details .feature_items i {
    margin-right: 8px;
    font-size: 20px;
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
}
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
}
}
.room_details .room_details_content, 
.room_details .type_items, 
.room_details .feature_items {
    animation: fadeInUp 0.5s ease forwards;
    -webkit-animation: fadeInUp 0.5s ease forwards;
}
/*---------------------------
10.2) room details area ends here
---------------------------*/