/*
============================================
*   [Table of contents]
* ==========================================
    Theme Default Css
    01.	Common CSS
    02. Preloader
    03. Header Section
    04. Main Slider
    05. About Section
    06. Service Section
    07. Rooms Section
    08. Funfact Section
    09. Testimonial Section
    10. Team Section
    11. highlight Section
    12. CTA Section
    13. Pricing Section
    14. Amenities Section
    15. Award Section
    16. Blogs Section
    17. Footer Section
    18. Booking Section
    19. Packages Offers Section
    20. Breadcrumb Section
    21. Why Choose Section
    22. Blog Single Section
    23. Shop Products Section
    24. Product Detail Section
    25. Cart Section 
    26. Checkout Section
    27. Gallery Section
    28. 404 Section
    29. Comingsoon Section
    30. Restaurant Service section
    31. Food Menu Section
    32. My Account Section
    33. Login Section
    34. FAQs Section
    35. Network Section


========================================== */

/*------ Theme Default Css
=======================================*/


/* Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@400;600&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */


/*===== 01. Common CSS =====*/

body {
    background: var(--dark-1);
    overflow-x: hidden;
    font-size: 15px;
    font-weight: 400;
    color: var(--sp-primary);
	font-family: "poppins","montserrat", sans-serif;
}

[class*=" icon-"], [class^=icon-] {
	font-family: "poppins","montserrat", sans-serif;
}

body.fixed,
body.docker-popup-active {
    overflow: hidden;
}

a {
    color: var(--sp-primary);
}

a:focus,
a:hover {
    color: var(--sp-secondary);
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

ins {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-py-default {
    padding: 70px 0;
}

.st-py-default2 {
    padding: 100px 0;
}

.white-bg {
    background: var(--dark-1) !important;
}

.dark-bg {
    background: var(--dark-2) !important;
}

.primary-bg {
    background: var(--sp-primary) !important;
}

.secondary-bg {
    background: var(--sp-secondary) !important;
}

.color-primary {
    color: var(--sp-primary) !important;
}

.color-secondary {
    color: var(--sp-secondary) !important;
}

.color-highlight {
    color: var(--sp-highlight) !important;
}

/** Text ellipsis **/
.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item:active {
    background-color: transparent;
}

/** Scrollbar **/

.menubar::-webkit-scrollbar {
    width: 2px;
}

.menubar::-webkit-scrollbar-thumb {
    background-color: var(--sp-secondary);
}

.menubar::-webkit-scrollbar {
    display: none;
}

.min-h-50 {
    min-height: 50px;
}

/** Buttons **/
.btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid;
    color: var(--sp-primary);
    border-color: var(--sp-primary);
    background-color: var(--sp-white);
    outline: 1px dashed;
    outline-offset: -5px;
    outline-color: var(--sp-white);
}

.btn:focus,
.btn:hover {
    outline: 1px dashed;
    outline-offset: -5px;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.btn.btn-primary {
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.btn.btn-primary:focus,
.btn.btn-primary:hover {
    border-color: var(--sp-secondary);
    background-color: var(--sp-secondary);
}

.btn.btn-secondary {
    color: var(--sp-white);
    border-color: var(--sp-secondary);
    background-color: var(--sp-secondary);
}

.btn.btn-secondary:focus,
.btn.btn-secondary:hover {
    border-color: var(--sp-primary);
    background-color: var(--sp-primary);
}

.fw-600 {
    font-weight: 600 !important;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -16px;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 130%;
    height: 0%;
    margin: auto;
    transform: rotate(-45deg);
    background-color: inherit;
    transition: 1500ms cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.btn:hover::before {
    height: 550%;
}

/** Social **/
.social-icon li a {
    position: relative;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    text-decoration: none;
    background-color: var(--sp-white);
    z-index: 0;
}

.social-icon li a::before {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    content: "";
    position: absolute;
    transform: scale(0.5);
    border-radius: inherit;
    z-index: -1;
    transition: 0.8s;
    background: var(--sp-secondary);
}

.social-icon li a:hover::before,
.social-icon li a:focus::before {
    opacity: 1;
    transform: scale(1.02);
}

.social-icon li a:hover,
.social-icon li a:focus {
    color: var(--sp-white);
}

/* cursor */

.cursor-outer {
    -webkit-margin-start: -12px;
    margin-inline-start: -12px;
    margin-top: -12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--sp-secondary);
    background-color: var(--sp-secondary);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.34;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.cursor-outer.cursor-hover {
    opacity: 0.14;
}

.cursor-outer.cursor-big {
    opacity: 0;
}

.st-mouseCursor {
    position: fixed;
    margin-top: -14px;
    margin-left: -14px;
    inset: 0px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
    text-align: center;
}

.st-mouseCursor.cursor-big {
    width: 20px;
    height: 20px;
    -webkit-margin-start: -12px;
    margin-inline-start: -12px;
    margin-top: -12px;
}

.cursor-inner {
    -webkit-margin-start: -3px;
    margin-inline-start: -4px;
    margin-top: -4px;
    width: 10px;
    height: 10px;
    z-index: 10000001;
    background-color: var(--sp-secondary);
    opacity: 1;
    -webkit-transition: all 0.24s ease-out 0s;
    transition: all 0.24s ease-out 0s;
}

.cursor-inner span {
    color: var(--gt-text);
    line-height: 60px;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

.cursor-inner.cursor-big span {
    opacity: 1;
}

.cursor-inner.cursor-hover {
    -webkit-margin-start: -10px;
    margin-inline-start: -10px;
    margin-top: -10px;
    width: 30px;
    height: 30px;
    background-color: var(--sp-secondary);
    border: 1px solid #686363;
    opacity: 0;
}

/*===== 02. Preloader =====*/

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in oklab, var(--sp-primary) 25%, #FFF 0%);
    backdrop-filter: blur(4px);
}

.yinyang {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--sp-primary) 0%, var(--sp-primary) 50%, white 50%, white 100%);
    display: block;
    box-shadow: 6px 6px 27px 4px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    animation: 2s rotateYinyang linear infinite;
}

.yinyang:after,
.yinyang:before {
    content: '';
    display: block;
    border-radius: 50%;
}

.yinyang:after {
    width: 75%;
    height: 75%;
    background: radial-gradient(ellipse at center, var(--sp-primary) 0%, var(--sp-primary) 25%, white 25%, white 100%);
    animation: inner-size 3s ease-in-out infinite;
    animation-delay: -1.5s;
}

.yinyang:before {
    width: 25%;
    height: 25%;
    background: radial-gradient(ellipse at center, white 0%, white 25%, var(--sp-primary) 25%, var(--sp-primary) 100%);
    animation: inner-size 3s ease-in-out infinite;
}

@keyframes inner-size {

    0%,
    100% {
        width: 75%;
        height: 75%;
    }

    50% {
        width: 25%;
        height: 25%;
    }
}

@keyframes rotateYinyang {
    to {
        transform: rotate(-360deg)
    }
}

/* preloader - 2 */

@keyframes flicker {
    0% {
        background: transparent;
    }

    50% {
        background: white;
    }

    100% {
        background: transparent;
    }
}

@keyframes neon {
    0% {
        text-shadow: none;
    }

    50% {
        text-shadow: rgba(255, 255, 255, 0.8) 0 0 8px;
    }

    100% {
        text-shadow: none;
    }
}

.loader {
    --cols: 5;
    --rows: 5;
    padding: 0.5em;
    padding-bottom: 2em;
    position: relative;
    display: grid;
    background: var(--sp-primary);
    width: calc(var(--cols) * 1em + 0.5em);
    height: calc(var(--rows) * 1em + 4.5em);
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    gap: 0.5em;
    border-radius: 4px;
    color: var(--sp-white);
}

/* Hotel sign */
.loader .hotel-sign {
    padding: 0.25em 0;
    position: absolute;
    right: -1.5em;
    width: 1.3em;
    text-align: center;
    background: var(--sp-primary);
    font-family: sans-serif;
    font-weight: 700;
    border-radius: 4px;
    animation: neon 3s infinite ease;
}

.loader .hotel-sign > span {
    display: block;
}

.loader .window {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background: var(--dark-1);
    animation: flicker 1s infinite ease;
}

.loader .window:nth-of-type(5n) {
    margin: 0 0 0.5em 0;
}

/* Animation timing — expanded loops */

/* 1–5 */
.loader .window:nth-child(1) {
    animation-delay: 0.5s;
    animation-duration: 0.5s;
}

.loader .window:nth-child(2) {
    animation-delay: 1s;
    animation-duration: 1s;
}

.loader .window:nth-child(3) {
    animation-delay: 1.5s;
    animation-duration: 1.5s;
}

.loader .window:nth-child(4) {
    animation-delay: 2s;
    animation-duration: 2s;
}

.loader .window:nth-child(5) {
    animation-delay: 2.5s;
    animation-duration: 2.5s;
}

/* 5–10 */
.loader .window:nth-child(6) {
    animation-delay: 1.5s;
    animation-duration: 1.5s;
}

.loader .window:nth-child(7) {
    animation-delay: 1.75s;
    animation-duration: 1.75s;
}

.loader .window:nth-child(8) {
    animation-delay: 2s;
    animation-duration: 2s;
}

.loader .window:nth-child(9) {
    animation-delay: 2.25s;
    animation-duration: 2.25s;
}

.loader .window:nth-child(10) {
    animation-delay: 2.5s;
    animation-duration: 2.5s;
}

/* 10–20 */
.loader .window:nth-child(11) {
    animation-delay: 1.1s;
    animation-duration: 1.1s;
}

.loader .window:nth-child(12) {
    animation-delay: 1.2s;
    animation-duration: 1.2s;
}

.loader .window:nth-child(13) {
    animation-delay: 1.3s;
    animation-duration: 1.3s;
}

.loader .window:nth-child(14) {
    animation-delay: 1.4s;
    animation-duration: 1.4s;
}

.loader .window:nth-child(15) {
    animation-delay: 1.5s;
    animation-duration: 1.5s;
}

.loader .window:nth-child(16) {
    animation-delay: 1.6s;
    animation-duration: 1.6s;
}

.loader .window:nth-child(17) {
    animation-delay: 1.7s;
    animation-duration: 1.7s;
}

.loader .window:nth-child(18) {
    animation-delay: 1.8s;
    animation-duration: 1.8s;
}

.loader .window:nth-child(19) {
    animation-delay: 1.9s;
    animation-duration: 1.9s;
}

.loader .window:nth-child(20) {
    animation-delay: 2s;
    animation-duration: 2s;
}

/* 20–30 */
.loader .window:nth-child(21) {
    animation-delay: 1.4s;
    animation-duration: 1.75s;
}

.loader .window:nth-child(22) {
    animation-delay: 1.47s;
    animation-duration: 1.83s;
}

.loader .window:nth-child(23) {
    animation-delay: 1.53s;
    animation-duration: 1.92s;
}

.loader .window:nth-child(24) {
    animation-delay: 1.6s;
    animation-duration: 2s;
}

.loader .window:nth-child(25) {
    animation-delay: 1.67s;
    animation-duration: 2.08s;
}

/* Door */
.loader .door {
    background: white;
    position: absolute;
    bottom: 0;
    width: 1em;
    height: 1.5em;
    left: 50%;
    margin-left: -0.5em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}


/*** Search Popup ***/

.mfp-bg {
    background-color: color-mix(in oklab, var(--sp-primary) 45%, #fff 0%);
    backdrop-filter: blur(4px);
}

.header-cart,
.header-search-toggle {
    padding: 0;
    width: 45px;
    height: 45px;
    border: none;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.header-cart:hover,
.header-cart:focus,
.header-search-toggle:hover,
.header-search-toggle:focus {
    background-color: var(--sp-secondary);
}

.header-search-popup {
    background-color: color-mix(in oklab, var(--sp-primary) 45%, #fff 0%);
    backdrop-filter: blur(4px);
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: 1s;
    clip-path: circle(0%);
}

.header-search-active.header-search-popup {
    display: block;
    visibility: visible;
    opacity: 1;
}

.header-search-active.header-search-popup {
    visibility: visible;
    opacity: 1;
    clip-path: circle(100%);
}

.header-search-popup .search-box {
    width: 100%;
    max-width: 100px;
    margin: auto;
    position: relative;
    top: 50%;
    -moz-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -o-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    opacity: 0;
    transform: scaleX(0);
    transition: .6s;
    transition-delay: .8s;
    transform-origin: center;
}

.header-search-active.header-search-popup .search-box {
    max-width: 100%;
    height: auto;
    opacity: 1;
    width: 100%;
    transform: scaleX(1);
}

.header-search-popup .search-form {
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.header-search-popup form .search-form-control {
    max-height: 60px;
    padding: 15px;
    padding-right: 50px;
    font-size: 15px;
    margin: 0 10px;
    border-radius: 0;
    box-shadow: var(--sp-shadow);
    border: 1px solid;
    border-radius: 50px;
    border-color: var(--sp-border-dark);
    background: var(--dark-2);
    color: var(--sp-primary);
}

.header-search-popup form .search-form-control {
    width: -webkit-fill-available;
}

.header-search-popup form input.search-form-control::placeholder {
    color: var(--sp-primary);
}

.header-search-popup .search-form i {
    position: absolute;
    top: 0;
    right: 14px;
    bottom: 0;
    margin: auto 0;
    font-size: 16px;
    text-align: center;
    max-width: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: var(--sp-secondary);
    color: var(--sp-white);
}

.close-style.header-search-close {
    position: absolute;
    width: 45px;
    height: 45px;
    border: none;
    background: var(--sp-white);
    color: var(--sp-secondary);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.header-search-popup .header-search-close {
    border-radius: 50%;
    border: 1px solid var(--sp-border-dark);
}

.close-style:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close-style:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-style:before,
.close-style:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background: var(--sp-secondary);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

.close-style:hover:before,
.close-style:hover:after,
.close-style:focus:before,
.close-style:focus:after {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.header-search-popup .breaking-news-section .container-wrapper {
    border: none;
    background: var(--sp-primary);
}

.header-search-popup .breaking-news-section .breaking-news-slider .item a {
    color: var(--sp-white);
    font-weight: 400;
}

.header-search-popup .breaking-news-section .news-title {
    font-size: 16px;
}

/*===== // =====*/

/*===== Cart =====*/

.header-cart {
    position: relative;
}

.header-cart .count {
    position: absolute;
    top: -4px;
    right: 5px;
    bottom: 20px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    display: inline-block;
    font-size: 10px;
    color: var(--sp-white);
    border-radius: 50%;
    text-align: center;
    background: var(--sp-secondary);
}

.header-cart:hover .count,
.header-cart:focus .count {
    background: var(--sp-primary);
}

.cart-wrapper {
    position: relative;
}

.menu-right-list li.cart-wrapper:hover .shopping-cart,
.menu-right-list li.cart-wrapper:focus-within .shopping-cart {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.menu-right-list li.cart-wrapper .shopping-cart:has(.woocommerce-mini-cart__empty-message) {
	padding-top: 10px;
    padding-bottom: 10px;
}

.menu-right-list li.cart-wrapper .woocommerce-mini-cart__empty-message {
	margin: 0;
}

.shopping-cart {
    text-align: left;
}

.shopping-cart {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    width: 320px;
    line-height: 50px;
    padding: 20px;
    color: var(--sp-primary);
    background: var(--dark-1);
    border-radius: 0 3px 3px;
    border: 0;
    border-top: 2px solid var(--sp-secondary);
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

.shopping-cart .cart-header>i {
    font-size: 20px;
}

.shopping-cart .cart-header {
    display: flex;
    border-bottom: 1px solid var(--sp-border-dark);
    padding-bottom: 15px;
    color: var(--sp-primary);
    line-height: 1;
    justify-content: space-between;
}

.shopping-cart .main-button {
    text-decoration: none;
    border: none;
    width: 100%;
    color: var(--sp-white) !important;
    font-weight: 500;
    display: block;
    font-size: 16px;
    background: var(--sp-primary);
    border: 1px solid rgba(255 255 255 / 20%);
    padding: 8px;
}

.shopping-cart .cart-header .cart-total {
    color: var(--sp-primary);
    font-size: 16px;
}

.shopping-cart .cart-header .cart-total .woocommerce-Price-amount {
    color: var(--sp-primary);
}

div.shopping-cart ul.cart-items {
    padding: 0;
    margin: 0;
    padding-top: 10px;
    list-style: none;
    max-height: 188px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: unset;
    border-bottom: 1px solid var(--sp-border-dark);
    margin-bottom: 8px;
}

div.shopping-cart ul.cart-items li {
    display: inline-block;
    width: 100%;
    margin: 0 10px 10px 0;
    padding: 0;
    font-size: 15px;
    position: relative;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}

div.shopping-cart ul.cart-items li:last-child {
    border: none;
}

div.shopping-cart ul.cart-items li a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--sp-secondary);
    transition: 1s;
    display: block;
}

div.shopping-cart ul.cart-items li a:hover,
div.shopping-cart ul.cart-items li a:focus-within {
    color: var(--sp-primary);
    text-decoration: dotted underline;
}

div.shopping-cart ul a.remove {
    float: right;
    margin-top: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    color: var(--sp-secondary) !important;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
    border: 1px solid rgba(255 255 255 / 20%);
    text-decoration: none;
}

.shopping-cart .cart-items .item-img {
    float: left;
    margin-right: 12px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 4.1;
    border-width: 1px;
    border-style: solid;
    border-color: var(--sp-primary);
}

.shopping-cart .cart-items .item-img img {
    width: 90%;
    border-radius: 50%;
    display: inline-block;
    float: none;
    margin: auto;
}

.shopping-cart .cart-items .item-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
    padding-top: 15px;
    line-height: 1;
    text-align: left;
    color: var(--sp-primary);
}

.shopping-cart .cart-items .item-name:hover,
.shopping-cart .cart-items .item-name:focus-within {
    color: var(--sp-secondary);
}

.shopping-cart .cart-badge {
    color: var(--sp-white);
    font-size: 10px;
    margin: 0;
    width: 16px;
    height: 16px;
    line-height: 1.6;
    text-align: center;
    vertical-align: super;
    border-radius: 100px;
    display: inline-block;
    background-color: var(--sp-secondary);
    margin-left: -10px;
}

.shopping-cart .cart-items .quantity {
    font-size: 12px;
    font-weight: 400;
    color: var(--sp-secondary);
    line-height: 3;
    float: left;
}

.shopping-cart .cart-items .quantity span bdi {
    color: var(--sp-primary);
    font-weight: 400;
}

.shopping-cart .cart-items .amount {
    font-size: 12px;
    font-weight: 600;
    margin-right: 0;
    color: #222;
}

/*===== // =====*/

/*===== 03. Header Section =====*/

header {
    position: relative;
    z-index: 9;
}

.header .widget-title {
    display: none;
}

/* above-header */
.above-header .header-widget {
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.above-header .header-widget .no-widget-text  {
	margin: 0;
}
.above-header .header-widget .no-widget-text a {
	color: var(--sp-white);
}

.above-header [class*='widget-'] .text-details {
    display: flex;
    gap: 25px;
}

.above-header [class*='widget-']>div,
.above-header [class*='widget-'] .text-details li {
    position: relative;
}

.above-header [class*='widget']>div:not(.container)::after,
.above-header [class*='widget'] .text-details li::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    opacity: 0.4;
    background: color-mix(in oklab, var(--sp-white) 50%, transparent);
}

.above-header .widget-right div::after,
.above-header .widget-right .text-details li::after {
    left: -12px;
}

.above-header .widget-left:not(:has(aside)) .text-details li:last-child::after, .above-header .widget-left:not(:has(aside)) > div:last-of-type::after,
.above-header .widget-right:not(:has(aside)) .text-details li:first-child::after, .above-header .widget-right:not(:has(aside)) > div:last-of-type::after {
    content: none;
}

.above-header .widget-left aside, .above-header .widget-left > div{
    margin-left: 30px;
}

.above-header .widget-left aside:first-child, .above-header .widget-left > div:first-child {
    margin-left: 0;
}

.above-header p, .above-header h1, .above-header h2, .above-header h3, .above-header h4, .above-header h5, .above-header h6 {
	margin: 0 !important;
}

/* .above-header [class*='widget-'] .text-details li:last-child::after { */
    /* display: none; */
/* } */

.above-header [class*='widget-'] .text-details a {
    text-decoration: none;
    position: relative;
    color: var(--sp-white);
    font-size: 15px;
    font-weight: 500;
}

.above-header [class*='widget-'] .text-details a>i {
    margin-right: 5px;
    font-size: 16px;
    color: var(--sp-secondary);
}

.login-signup a:hover>i,
.widget .menu-language-container .menu>li>a:hover>i,
.above-header [class*='widget-'] .text-details a:hover>i {
    animation: wobbles 1s ease-in-out;
}

.login-signup a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    margin-right: 5px;
    text-decoration: none;
    color: var(--sp-white);
}

/* .login-signup a::after {
    content: '/';
    position: absolute;
    left: -10px;
    top: 50%;
    color: var(--sp-white);
    transform: translateY(-50%);
}

.login-signup a:first-child::after {
    display: none;
} */

.theme-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.theme-menu .menu-right {
	min-width: fit-content;
}

.widget .menu-language-container .menu>li>a {
    color: var(--sp-white);
    padding: 0;
    font-weight: 500;
    padding: 0 5px;
    padding-right: 18px;
    text-decoration: none;
    transition: var(--sp-transition);
}

.widget .menu-language-container .menu>li>a i {
    font-size: 16px;
    margin-right: 4px;
    color: var(--sp-secondary);
}

.widget .menu-language-container .menu>li>a::after {
    content: '\f107 ';
    position: absolute;
    right: 5px;
    font-family: 'FontAwesome';
}

.widget .menu-language-container .menu li {
    padding-top: 0;
    line-height: 2;
    padding-bottom: 0;
    width: 100%;
    margin-bottom: 0;
}

.widget .menu-language-container .menu li .sub-menu {
    width: 200px;
    top: 47px;
}

.login-signup a i,
.login-signup a:hover,
.login-signup a:focus,
.above-header [class*='widget-'] .text-details a:hover,
.above-header [class*='widget-'] .text-details a:focus,
.widget .menu-language-container .menu>li>a:hover,
.widget .menu-language-container .menu>li>a:focus {
    color: var(--sp-secondary);
}

.booking-btn {
    font-size: 18px;
    color: var(--sp-white);
    border-color: var(--sp-highlight);
    background-color: var(--sp-highlight);
}

.booking-btn:hover,
.booking-btn:focus {
    background-color: var(--sp-secondary);
    border-color: var(--sp-secondary);
}

header .navigator-wrapper .logo .site-title {
    max-width: 215px;
}

header .navigator-wrapper .logo {
    position: relative;
    z-index: 0;
    height: 100%;
    display: grid;
    align-items: center;
}

/* Header two */
.header.header-two {
    position: fixed;
	top: 0;
    right: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    margin: 0 auto;
    background: transparent;
}

.header.header-two .above-header {
    margin-bottom: 8px;
}

.header.header-two .navigator-wrapper {
    background-color: var(--sp-white);
}

.header.header-two .sticky-nav.sticky-menu {
    border-bottom: 1px solid var(--sp-secondary);
}

.header.header-two .navigator-wrapper,
.header.header-two .navigator-wrapper .row.position-relative>[class^="col-"]:first-child {
    position: relative;
}

.header.header-two .navigator-wrapper .row.position-relative>[class^="col-"]:first-child::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1000px;
    height: calc(100% + 16px);
    transform: translateY(-50%);
    background-color: var(--sp-secondary);
    clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}

.header.header-two .navigator-wrapper .sticky-nav.sticky-menu .row.position-relative>[class^="col-"]:first-child::before {
    height: 100%;
    clip-path: none;
}

.header.header-two .navigator-wrapper::before,
.header.header-two .navigator-wrapper .sticky-nav:not(.sticky-menu) .row.position-relative>[class^="col-"]:last-child::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 75%;
    height: calc(100% + 16px);
    transform: translateY(-50%);
    border-top: 1px solid var(--sp-secondary);
    border-bottom: 1px solid var(--sp-secondary);
}

.header.header-two .navigator-wrapper::before {
    width: 50%;
}
.header.header-two .navigator-wrapper:has(.navbar-area.sticky-menu)::before {
    display: none;
}

/* Header Three */

.header.header-three {
    position: relative;
}

.header.header-three>.navigator-wrapper,
.header.header-three .sticky-menu {
    background-color: var(--sp-primary);
}

.header.header-three .toggle-lines,
.header.header-three .header-cart,
.header.header-three .header-search-toggle {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.header.header-three [title="Add a menu"], .header-three .logo h4.site-title, .header-three .logo p.site-description {
	color: var(--sp-white);
}

.header.header-three .toggle-lines:hover,
.header.header-three .toggle-lines:focus,
.header.header-three .header-cart:hover,
.header.header-three .header-cart:focus,
.header.header-three .header-search-toggle:hover,
.header.header-three .header-search-toggle:focus {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.header.header-three .toggle-lines>span {
    background-color: var(--sp-secondary);
}

.header.header-three .toggle-lines:hover>span,
.header.header-three .toggle-lines:focus>span {
    background-color: var(--sp-white);
}

.header.header-three .sticky-nav {
    border-top: 1px solid color-mix(in oklab, var(--sp-white) 20%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--sp-white) 20%, transparent);
}

.header.header-three .booking-section.style1 {
    margin-top: 0;
    padding-bottom: 0;
}

.header.header-three .booking-section.style1 form {
    border: 0;
    z-index: 0;
    border-radius: 0;
    backdrop-filter: none;
    background-color: var(--sp-primary);
}

/* Header Four */

.header.header-four .above-header {
    border-bottom: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
}

.header.header-four .logo-wrapper {
    padding: 15px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
}

.header.header-four .logo-wrapper .logo img {
    display: inline;
}

.header.header-four .sticky-nav {
    padding: 12px 0;
}

.header.header-four .sticky-menu {
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

.header.header-four .toggle-lines,
.header.header-four .header-cart,
.header.header-four .header-search-toggle {
    color: var(--sp-primary);
    background-color: var(--sp-white);
}

.header.header-four .toggle-lines>span {
    background-color: var(--sp-primary);
}

.header.header-four .toggle-lines:hover>span,
.header.header-four .toggle-lines:focus>span {
    background-color: var(--sp-white);
}

.header.header-four .toggle-lines:hover,
.header.header-four .toggle-lines:focus,
.header.header-four .header-cart:hover,
.header.header-four .header-cart:focus,
.header.header-four .header-search-toggle:hover,
.header.header-four .header-search-toggle:focus {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

/* Header Five */
.header-five {
    position: relative;
}

.header-five .login-signup a i,
.header-five .widget .menu-language-container .menu>li>a i,
.header-five .above-header [class*='widget-'] .text-details a>i {
    color: var(--sp-white);
}

.header-five .login-signup a:hover,
.header-five .login-signup a:focus,
.header-five .above-header [class*='widget-'] .text-details a:hover,
.header-five .above-header [class*='widget-'] .text-details a:focus,
.header-five .widget .menu-language-container .menu>li>a:hover,
.header-five .widget .menu-language-container .menu>li>a:focus {
    color: var(--sp-primary);
}

.header-five>.navigator-wrapper {
    position: absolute;
    z-index: 9;
    width: 100%;
    top: calc(100% + 25px);
}

.header-five>.navigator-wrapper .container>.row {
    margin: 0;
    border-radius: 100px;
    box-shadow: var(--sp-shadow);
    background-color: var(--sp-white);
}

.header-five>.navigator-wrapper .container>.row::before,
.header-five>.navigator-wrapper .container>.row::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    z-index: -1;
    border-radius: 100px;
    aspect-ratio: 1;
    height: calc(100% + 16px);
    transform: translateY(-50%);
    background-color: var(--sp-secondary);
}

.header-five>.navigator-wrapper .container>.row::after {
    left: unset;
    right: -10px;
}

.header-five>.navigator-wrapper .container>.row>[class^="col-"]:first-child::before,
.header-five>.navigator-wrapper .container>.row>[class^="col-"]:last-child::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    aspect-ratio: 1;
    height: calc(100% + 16px);
    transform: translate(40%, -50%);
    background-color: var(--sp-secondary);
    clip-path: polygon(0 0, 100% 8px, 100% calc(100% - 8px), 0% 100%);
}

.header-five>.navigator-wrapper .container>.row>[class^="col-"]:last-child::after {
    left: unset;
    right: 0;
    transform: translate(-40%, -50%);
    clip-path: polygon(0 8px, 100% 0, 100% 100%, 0 calc(100% - 8px));
}

.header-five .sticky-menu {
    background: transparent;
    box-shadow: none;
    top: 12px;
}


/*===== // =====*/

/*===== 04. Main Slider =====*/
.slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    color: var(--sp-white);
    background: var(--sp-secondary);
    z-index: 0;
}

.main-slider,
.main-slider .owl-item img {
    width: 100%;
    height: 100%;
}
.main-slider .star-rating {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--sp-secondary);
}

.theme-slider {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /* width: 100%; */
    height: 100%;
    /* z-index: 0; */
	position: relative;
	/* padding: 200px 0; */
}

.theme-table {
    overflow: hidden;
    display: table;
    width: 100%;
    height: 100%;
}

.theme-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.theme-slider .text-left {
    margin-right: auto;
}

.theme-slider .text-center {
    margin: auto;
}

.theme-slider .text-right {
    margin-left: auto;
}

.theme-slider div.theme-content {
    position: relative;
    max-width: 900px;
    width: 100%;
    margin-bottom: 100px;
    overflow: hidden;
}

.theme-content h3 {
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--sp-secondary);
    text-transform: uppercase;
}

.theme-content h1 {
    font-size: 70px;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 700;
}

.theme-content h1 span {
    color: var(--sp-secondary);
}

.theme-content h1 span {
    font-weight: 900;
}

.theme-content p {
    font-weight: 300;
    margin-bottom: 30px;
    font-size: 20px;
}

.theme-content .av-btn {
    font-size: 24px;
    font-weight: 600;
    border-radius: 3px;
    padding: 6px 30px;
}

/* == owl dot == */
.owl-theme .owl-nav {
    margin-top: 0;
}

.main-slider.owl-theme .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.main-slider.owl-theme .owl-dots .owl-dot {
    margin-right: 5px;
    border-radius: 25px;
    padding: 2px !important;
    border: 0px solid var(--sp-white);
}

.main-slider.owl-theme .owl-dots .owl-dot:focus,
.main-slider.owl-theme .owl-dots .owl-dot:hover {
    background-color: transparent;
}

.main-slider.owl-theme .owl-dots .owl-dot.active span {
    width: 26px;
}

.main-slider.owl-theme .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 1px;
    border-radius: 25px;
    border: 1px solid var(--sp-secondary);
    transition: var(--sp-transition);
    background-color: var(--sp-secondary);
}

/* == owl Nav == */
.owl-carousel .owl-nav [class*=owl-] {
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin: -23px 0 0;
    display: block;
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease 0s;
    color: #fff !important;
    background-color: var(--sp-primary);
    text-align: center;
    z-index: 200;
    border-radius: 100px;
    border: 1px solid #ececec;
    box-sizing: initial;
    opacity: 0;
}

.owl-carousel .owl-nav [class*=owl-]:hover,
.owl-carousel .owl-nav [class*=owl-]:focus {
    background-color: var(--sp-secondary);
}

.owl-carousel .owl-nav .owl-prev {
    left: 0;
}

.owl-carousel .owl-nav .owl-next {
    right: 0;
}

.owl-carousel:hover .owl-prev,
.owl-carousel:focus-within .owl-prev {
    right: auto;
    left: -22px;
    opacity: 1;
}

.owl-carousel:hover .owl-next,
.owl-carousel:focus-within .owl-next {
    left: auto;
    right: -22px;
    opacity: 1;
}

.main-slider.owl-carousel:hover .owl-prev,
.main-slider.owl-carousel:focus-within .owl-prev {
    left: 50px;
}

.main-slider.owl-carousel:hover .owl-next,
.main-slider.owl-carousel:focus-within .owl-next {
    right: 50px;
}

.main-slider.owl-carousel .owl-nav [class*=owl-] {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 28px;
    color: var(--sp-secondary) !important;
    background-color: var(--sp-white);
}

.main-slider.owl-carousel .owl-nav [class*=owl-]:hover,
.main-slider.owl-carousel .owl-nav [class*=owl-]:focus {
    color: var(--sp-white) !important;
    background-color: var(--sp-secondary);
}

/*===== Glossy Effect =====*/
.st-glossy {
    position: relative;
    overflow: hidden;
}

.st-glossy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0) 90%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
}

.main-slider .owl-item.active .st-glossy::before {
    animation: softGlossEffect 4s linear forwards;
}

.award-item:focus-within.st-glossy::before,
.award-item:hover.st-glossy::before,
.packages-box:focus-within .st-glossy::before,
.packages-box:hover .st-glossy::before,
.post-items:focus-within .st-glossy::before,
.post-items:hover .st-glossy::before {
    animation: softGlossEffect 1s linear forwards;
}

@keyframes softGlossEffect {
    0% {
        transform: translateX(-75%) skewX(-20deg);
    }

    100% {
        transform: translateX(100%) skewX(-20deg);
    }
}

.btn.btn-play {
    width: 46px;
    height: 46px;
    color: var(--sp-white);
    border-color: var(--sp-border-dark);
    font-size: 22px;
    outline: none;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in oklab, var(--sp-primary) 2%, transparent);
    backdrop-filter: blur(4px);
}

.btn.btn-highlight {
    color: var(--sp-white);
    border-color: var(--sp-highlight);
    background-color: var(--sp-highlight);
}

.btn.btn-highlight:focus,
.btn.btn-highlight:hover {
    border-color: var(--sp-primary);
    background-color: var(--sp-primary);
}

/*===== Star Rating =====*/


/* slider style - 1 */
.slider-wrapper.style1 .theme-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: color-mix(in oklab, var(--sp-primary) 20%, transparent);
    clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}

/* Kenburn effects */

.ken-burns-slider .item {
    position: relative;
    overflow: hidden;
}

.ken-burns-slider .owl-item .item>img {
    display: block;
    width: 100%;
    /* height: auto; */
    -webkit-transition: all 20s;
    -moz-transition: all 20s;
    -o-transition: all 20s;
    transition: all 20s;
    transition-timing-function: linear;
}
.main-slider .owl-item .item>img {
    position: absolute;
}

.ken-burns-slider .owl-item:nth-child(even) .item>img {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}

.ken-burns-slider .owl-item:nth-child(odd) .item>img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}

.ken-burns-slider .owl-item.active:nth-child(even) .item>img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.ken-burns-slider .owl-item.active:nth-child(odd) .item>img {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
}

/*===== // =====*/

/*===== 05. About Section =====*/

.heading-default {
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 0;
    margin-bottom: 30px;
}

.heading-default.text-center {
    margin-left: auto;
    margin-right: auto;
}

.heading-default .sub-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: var(--sp-secondary);
    /* text-transform: uppercase; */
}

.heading-default .sub-title::before,
.heading-default .sub-title::after {
    content: '';
    left: 50%;
    height: 1px;
    position: absolute;
    transform: translateX(-50%);
}

.heading-default .sub-title:not(.no-content)::before {
    bottom: 0;
    width: 50px;
    background: var(--sp-secondary);
}

.heading-default .sub-title:not(.no-content)::after {
    bottom: -5px;
    width: 30px;
    background: var(--sp-primary);
}

.section-title h2 {
    font-weight: 800;
    position: relative;
    margin-bottom: 12px;
}

.about-section {
    position: relative;
    overflow: hidden;
}

.about-section::after,
.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-image: url(../images/pattern1.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.about-section::after {
    left: unset;
    right: 0;
    background-position: right;
    background-image: url(../images/pattern2.png);
}

.about-image1 img,
.about-image2 img {
    width: 100%;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}

.about-image2 div {
    position: absolute;
    top: 25px;
    right: 0;
    width: calc(100% + 130px);
}

.about-title {
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    margin-top: 15px;
}

.about-services-boxes {
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-services-boxes .service-box {
    display: flex;
    padding: 18px;
    align-items: center;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
    background-color: var(--sp-primary);
}

.about-services-boxes .service-box .service-icon {
    font-size: 40px;
    margin-right: 20px;
    color: var(--sp-secondary);
}

.about-services-boxes .service-box h6 {
    margin-bottom:0;
}

.about-features-list li {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.about-features-list li i {
    color: var(--sp-secondary);
    margin-right: 8px;
}

.about-video-badge {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    color: var(--sp-white);
    background: var(--sp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	font-weight: 500;
}

.about-image2 + .about-video-badge {
    bottom: 0;
}

.video-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rotating-text div {
    animation: rotateText 10s linear infinite;
}

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.about-video-badge .play-icon {
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 35px;
    display: block;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-white);
    background: var(--sp-secondary);
}

/*===== // =====*/

/*===== 06. Service Section =====*/

.service-section {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.service-section.home {
    color: var(--sp-white);
    margin: 0 25px;
    padding: 70px 25px;
    border-radius: var(--sp-radius);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.service-section.home::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
	background-color: color-mix(in srgb, #000000 70%, transparent);
    /* z-index: -1; */
}

.service-section.home .container::before,
.service-section.home .container::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: calc(100% - 200px);
    transform: translateY(-50%);
    background-color: var(--sp-white);
    clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0% 100%);
}

.service-section.home .container::before {
    left: 0;
}

.service-section.home .container::after {
    right: 0;
    transform: translateY(-50%) rotate(180deg);
}

.service-item {
    position: relative;
    padding: 30px;
    text-align: center;
    border-radius: var(--sp-radius);
    transition: var(--sp-transition);
    box-shadow: var(--sp-shadow);
}

.service-section.home .service-item {
    backdrop-filter: blur(5px);
    background: color-mix(in oklab, var(--sp-secondary) 15%, #fff 4%);
    border: 1px solid color-mix(in oklab, var(--sp-secondary) 50%, transparent 50%);
}

.service-img {
    width: 100px;
    height: 100px;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sp-transition);
    background-color: var(--sp-secondary);
}

.service-section.home .service-img {
    background-color: transparent;
    border: 2px solid var(--sp-secondary);
}

.service-img img {
    aspect-ratio: 1;
}

.service-item .service-title {
    margin-bottom: 10px;
}

.service-item .service-description {
    margin-bottom: 20px;
}

.service-item .btn-secondary:hover,
.service-item .btn-secondary:focus {
    border-color: var(--sp-highlight);
    background-color: var(--sp-highlight);
}

.service-section.home .service-item:hover,
.service-section.home .service-item:focus-within {
    background: color-mix(in oklab, var(--sp-secondary) 25%, #fff 0%);
    box-shadow: var(--sp-shadow);
}

.service-section.home .service-item:hover .service-img,
.service-section.home .service-item:focus-within .service-img {
    border-color: var(--sp-highlight);
}

.service-section.service-page::after,
.service-section.service-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-image: url(../images/pattern1.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.service-section.service-page::after {
    left: unset;
    right: 0;
    background-position: right;
    background-image: url(../images/pattern2.png);
}

.service-section.service-page .service-item {
    background-size: cover;
}

.service-section.service-page .service-item.active,
.service-section.service-page .service-item:hover {
    color: var(--sp-white);
}

/* hover-aware */

.hover-aware {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hover-aware:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-1);
    opacity: 1;
    z-index: -1;
    transition: 0.5s;
    left: 0%;
    transform-origin: left center;
}


.hover-aware.active:before,
.hover-aware:hover:before {
    opacity: 0;
}

.hover-aware.active .effect,
.hover-aware:hover .effect {
    width: 300%;
    height: 300%;
}

.hover-aware .effect {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: width .4s ease-in-out, height .4s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    background: var(--sp-primary);
    opacity: 0.5;
}

/*===== // =====*/

/*===== 07. Rooms Section =====*/

.room-slider.owl-carousel .owl-stage-outer {
    border-radius: var(--sp-radius);
}

.room-item {
    position: relative;
    overflow: hidden;
    color: var(--sp-white);
    box-shadow: var(--sp-shadow);
    border-radius: var(--sp-radius);
    transition: var(--sp-transition);
}

.room-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--sp-primary) 65%, transparent);
}

.room-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.room-img img {
    height: 100%;
}

.room-content .room-title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 15px;
}

.room-content .room-price {
    font-size: 45px;
    margin-bottom: 20px;
}

.room-feature-box {
    display: flex;
    align-items: center;
    border-radius: 25px;
    backdrop-filter: blur(2px);
    transition: var(--sp-transition);
    background: color-mix(in oklab, var(--sp-primary) 50%, #fff 0%);
}

.room-feature-box i {
    font-size: 25px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--sp-secondary);
    transition: .5s;
}

.room-feature-box:hover i {
    transform: rotateY(180deg);
}

.room-feature-box span {
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
}

.room-slider-wrapper {
    display: flex;
    grid-template-columns: 1fr auto 1fr;
}

.room-slider-wrapper .container {
    flex: 100%;
	width: 100%;
}

.room-slider-wrapper .side-room {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
	flex: 1;
	width: 100%;
}

.room-slider-wrapper .side-room img {
    object-fit: cover;
    height: 100%;
}

.room-slider-wrapper .side-room .room-name {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    font-size: clamp(14px, 1.6vw, 32px);
    font-weight: 600;
    white-space: nowrap;
    color: var(--sp-secondary);
    transform: translate(-50%, -50%) rotate(-90deg);
}

.room-slider-wrapper .side-room::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: color-mix(in oklab, var(--sp-primary) 65%, transparent);
}

/*===== // =====*/

/*===== 08. Funfact Section =====*/

.funfact-section {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in oklab, var(--sp-secondary) 10%, transparent);
}

.funfact-section::after,
.funfact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
}

.funfact-section::after {
    left: unset;
    right: 0;
    transform: scale(-1, 1);
}

.funfact-item {
    padding: 20px;
    text-align: center;
    border: 1px solid color-mix(in oklab, var(--sp-secondary) 50%, transparent 50%);
}

.col-3:not(:last-child) .funfact-item {
    border-right: 0;
}

.funfact-img {
    width: 100px;
    height: 100px;
    margin: auto;
    display: flex;
    font-size: 36px;
    margin-bottom: 25px;
    align-items: center;
    justify-content: center;
}

.funfact-content h5 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.funfact-content .title {
    font-size: 20px;
    font-weight: 600;
    color: var(--sp-secondary);
}

/*===== // =====*/

/*===== 09. Testimonial Section =====*/

.testimonial-section {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
}

.testimonial-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: color-mix(in oklab, var(--sp-primary) 65%, transparent);
}

.testimonial-item {
    position: relative;
    overflow: hidden;
    padding: 38px 20px;
    border-radius: var(--sp-radius);
    background-color: var(--sp-white);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.testimonial-img {
    width: 100px;
    height: 100px;
}

.testimonial-content .rating {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--sp-secondary);
}

.testimonial-footer {
    position: relative;
    padding: 8px 0;
    margin: 20px 0;
}

.testimonial-footer::after {
    content: "\f10d";
    left: 0;
    bottom: 0;
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 60px;
    line-height: 1;
    opacity: 0.5;
    color: var(--sp-secondary);
}

.testimonial-footer .sponsor {
    padding: 5px;
    width: 150px;
    height: 38px;
    display: flex;
    margin-left: auto;
    align-items: center;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
}

.testimonial-contact-form {
    padding: 20px;
    text-align: center;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background: color-mix(in oklab, var(--sp-primary) 50%, #fff 0%);
}

.testimonial-contact-form form p {
    margin-bottom: 15px;
}

.testimonial-contact-form form input,
.testimonial-contact-form form textarea {
    color: var(--sp-white);
    border-radius: 25px;
    background: transparent;
    border-color: var(--sp-border-dark) !important;
}

.testimonial-contact-form form input::placeholder,
.testimonial-contact-form form textarea::placeholder {
    color: #ffffff;
    opacity: 0.5;
}

.testimonial-contact-form form input[type="submit"] {
    width: 100%;
    border: 0;
    font-weight: 500;
    border-radius: 25px;
    padding: 10px 20px;
    color: var(--sp-white);
    outline: 1px dashed;
    outline-offset: -5px;
    outline-color: var(--sp-white);
    background: var(--sp-secondary);
    font-size: 16px !important;
}

.testimonial-contact-form form input[type="submit"]:hover,
.testimonial-contact-form form input[type="submit"]:focus {
    background: var(--sp-highlight);
}

/*===== // =====*/

/*===== 10. Team Section =====*/

.team-item {
    position: relative;
    overflow: hidden;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
    border: 1px solid;
    background-color: var(--sp-primary);
}

.team-img {
    position: relative;
    overflow: hidden;
    margin: 1px;
    padding: 10px;
    z-index: 0;
    border-top-left-radius: var(--sp-radius);
    border-top-right-radius: var(--sp-radius);
    background: var(--dark-1);
}

.team-img img {
    display: block;
    width: 100%;
    border-radius: var(--sp-radius);
}

.team-img .social-icon {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 20px;
    z-index: 1;
}

.team-img .social-icon .flex {
    gap: 10px;
}

.team-item .social-icon li {
    transform: translateY(200%);
}

.team-item:hover .social-icon li,
.team-item:focus-within .social-icon li {
    transform: translateY(0%);
    visibility: visible;
}

.team-item::before,
.team-img:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    margin: 10px;
    border-radius: var(--sp-radius);
    transition: background-color 0.7s ease;
    transition: all 0.7s ease;
    z-index: 0;
    background: color-mix(in oklab, var(--sp-primary) 50%, transparent);
}

.team-item::before {
    margin: 0;
    background: var(--sp-secondary);
}

.team-item:hover::before,
.team-item:focus-within::before,
.team-item:hover .team-img:before,
.team-item:focus-within .team-img:before {
    opacity: 1;
    top: 0;
}

.team-content {
    position: relative;
    padding: 12px;
    padding-left: 20px;
}

.team-content::before,
.team-content::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 2px;
    height: 70%;
    background-color: var(--sp-secondary);
    transform: translateY(-50%);
}

.team-content::after {
    left: calc(100% - 10px);
    opacity: 0;
    transition: background-color 0.7s ease;
    transition: all 0.7s ease;
}

.team-item:hover .team-content::after,
.team-item:focus-within .team-content::after {
    left: 10px;
    opacity: 1;
    background-color: var(--sp-white);
}

.team-content h6 a {
    color: var(--sp-white);
    text-decoration: none;
}

.team-content p {
    margin: 0;
}

/*===== // =====*/

/*===== 11. highlight Section =====*/

.highlight-item p {
    position: relative;
    padding-left: 25px;
    font-size: 20px;
    font-weight: 500;
    color: var(--sp-white);
    text-transform: uppercase;
    text-decoration: none;
	margin-bottom: -3px;
}

.highlight-item p:hover,
.highlight-item p:focus {
    color: var(--sp-primary);
}

.highlight-features-section.primary-bg {
    border-top: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 25%);
}

.highlight-features-section.primary-bg .highlight-item p::before,
.highlight-features-section.primary-bg .highlight-item p:hover,
.highlight-features-section.primary-bg .highlight-item p:focus {
    color: var(--sp-secondary);
}

.highlight-item p::before {
    content: '\f006';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
	padding-bottom: 3px;
}

/*===== // =====*/

/*===== 12. CTA Section =====*/

.cta-section {
    position: relative;
    overflow: hidden;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/cta/bg-shape.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.cta-content h1 {
    font-size: 60px;
    margin-bottom: 15px;
}

.cta-content .widget-contact .contact-icon {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.cta-content .widget-contact .contact-area .contact-info>a {
    color: var(--sp-white);
}

.cta-content .btn-secondary:hover,
.cta-content .btn-secondary:focus,
.cta-content .widget-contact:hover .contact-icon,
.cta-content .widget-contact:focus-within .contact-icon {
    background-color: var(--sp-highlight);
}

.cta-badge {
    position: absolute;
    right: 15px;
    bottom: -40px;
    max-width: 160px;
}

.cta-img {
    position: absolute;
    top: 50%;
    left: 30px;
    width: calc(100%*2);
    border-top-left-radius: 400px;
    border-bottom-left-radius: 400px;
    transform: translateY(-50%);
    overflow: hidden;
}

/*===== // =====*/

/*===== 13. Pricing Section =====*/

.pricing-section {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: color-mix(in oklab, var(--sp-secondary) 10%, transparent);
    background-image: url(../images/rooms/bg-shape.png);
}

.pricing-item {
    padding: 20px 15px;
    padding-top: 110px;
    position: relative;
    border-radius: var(--sp-radius);
    background-color: var(--dark-1);
    border: 1px solid var(--sp-border-dark);
    transition: var(--sp-transition);
    box-shadow: inset 0 0 1px 4px color-mix(in oklab, var(--sp-border-dark) 40%, transparent);
}

.pricing-item.active,
.pricing-item:focus-within {
    border: 1px solid var(--sp-secondary);
    box-shadow: inset 0 0 1px 4px color-mix(in oklab, var(--sp-secondary) 40%, transparent);
}

.pricing-heading .popular-badge {
    padding: 0 10px;
    border-radius: 25px;
    color: var(--sp-white);
    background-color: var(--sp-highlight);
}

.pricing-list {
    padding: 12px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--sp-border-dark);
}

.pricing-list .included-title {
    line-height: 20px;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    border-radius: 4px;
    border: 1px solid var(--sp-border-dark);
}

.pricing-list li {
    position: relative;
    padding: 5px 0;
    padding-left: 20px;
}

.price-feature::before {
    content: "\f057";
    font-family: 'FontAwesome';
    position: absolute;
    top: 7px;
    left: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    color: var(--sp-highlight);
    transition: all 0.3s ease-in-out;
}

.price-feature.active::before {
    content: "\f058";
	color: var(--sp-secondary);
}

.pricing-rate {
    position: absolute;
    top: -21px;
    left: 30px;
    width: fit-content;
    padding: 20px 10px;
    padding-bottom: 8px;
    color: var(--sp-white);
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
}

.pricing-rate .price {
    font-size: 40px;
    font-weight: 600;
    display: block;
    line-height: 45px;
}

.pricing-item.active .pricing-rate .price,
.pricing-item:focus-within .pricing-rate .price {
    color: var(--sp-white);
}

.pricing-rate::before,
.pricing-rate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 20px;
    z-index: 0;
    transition: var(--sp-transition);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background: color-mix(in oklab, var(--sp-primary) 80%, transparent);
}

.pricing-rate::after {
    left: 100%;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.pricing-rate .price::after {
    content: '';
    position: absolute;
    top: 99%;
    left: 0;
    width: 100%;
    height: 20px;
    transition: var(--sp-transition);
    background-color: var(--sp-primary);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% calc(100% - 20px), 0 100%);
}

.pricing-item.active .pricing-rate,
.pricing-item:focus-within .pricing-rate,
.pricing-item.active .pricing-rate .price::after,
.pricing-item:focus-within .pricing-rate .price::after {
    background-color: var(--sp-secondary);
}

.pricing-item.active .pricing-rate::before,
.pricing-item.active .pricing-rate::after,
.pricing-item:focus-within .pricing-rate::before,
.pricing-item:focus-within .pricing-rate::after {
    background: color-mix(in oklab, var(--sp-secondary) 80%, #000 15%);
}

.pricing-item.active .btn,
.pricing-item:focus-within .btn {
    border-color: var(--sp-secondary);
    background-color: var(--sp-secondary);
}

.filter-tab a {
    position: relative;
    overflow: hidden;
    font-size: 18px;
    font-weight: 500;
    border-radius: 25px;
    padding: 10px 20px;
    color: var(--sp-white);
    text-decoration: none;
    outline: 1px solid;
    outline-offset: 5px;
    margin-right: 20px;
    margin-bottom: 15px;
    outline-color: var(--sp-primary);
    display: inline-block;
}

.filter-tab a.active,
.filter-tab a:hover,
.filter-tab a:focus {
    outline-color: var(--sp-secondary);
}

.filter-tab a img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}

.filter-tab a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 25px;
    transition: var(--sp-transition);
    background: var(--sp-primary);
}

.filter-tab a:has(img)::after {
    opacity: 0.8;
}

.filter-tab a.active::after,
.filter-tab a:hover::after,
.filter-tab a:focus::after {
    background: var(--sp-secondary);
}

/* MIXIUP filter */
.tile {
    display: none;
}

/*===== // =====*/

/*===== 14. Amenities Section =====*/

.amenities-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.amenity {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--sp-white);
}

.col:has(.amenity) {
    position: relative;
}

.col:not(:last-child):has(.amenity)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--sp-border-dark);
}

.amenity .icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    font-size: 30px;
    display: flex;
    padding: 12px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.amenity .icon i,
.amenity .icon img {
    animation: tada 5s infinite linear;
}

.amenity p {
    margin: 0;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 500;
}

.amenity:focus-within .icon img,
.amenity:hover .icon img,
.service-item:focus-within .service-img img,
.service-item:hover .service-img img,
.funfact-item:focus-within .funfact-img img,
.funfact-item:hover .funfact-img img {
    animation: bounce-scale 0.5s 0.1s;
}

/*===== // =====*/

/*===== 15. Award Section =====*/

.award-section {
    background: color-mix(in oklab, var(--sp-secondary) 10%, transparent);
}

/*===== // =====*/

/*===== 16. Blogs Section =====*/

.post-items {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.owl-carousel .post-items {
    margin: 5px;
}

.post-items a {
    /* text-decoration: none; */
}

.featured-image {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    z-index: 0;
}

.featured-image>a>img {
    width: 100%;
}

.post-section:not(.blog-single-page) .featured-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: var(--sp-transition);
    background: color-mix(in oklab, var(--sp-primary) 25%, transparent);
}

.post-section:not(.blog-single-page) .post-items:focus-within .featured-image::before,
.post-section:not(.blog-single-page) .post-items:hover .featured-image::before {
    background: color-mix(in oklab, var(--sp-primary) 50%, transparent);
}

.hover-links {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: var(--sp-transition);
    transform: translate(-50%, -50%);
}

.hover-links a {
    width: 50px;
    height: 50px;
    display: flex;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sp-white);
    text-decoration: none;
    opacity: 0;
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
    transform: scale(0);
}

.post-items:focus-within .hover-links a,
.post-items:hover .hover-links a {
    opacity: 1;
    transform: scale(1);
}

.hover-links a:focus,
.hover-links a:hover {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.post-items .featured-image>a>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1.5s ease-out;
}

.post-items:focus-within .featured-image>a>img,
.post-items:hover .featured-image>a>img {
    transform: scale3d(1.1, 1.1, 1);
}

.post-image {
    position: relative;
}

.post-meta>div {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    min-height: 45px;
    padding: 0 20px;
    color: var(--sp-primary);
}

.post-meta>div.meta-top {
    min-height: 0;
}

.meta-top .post-tags {
    position: absolute;
    left: 0;
    bottom: 45px;
    width: 100%;
    padding: 10px 20px;
    border-top: 1px solid white;
}

.post-meta>div i {
    margin-right: 2px;
    color: var(--sp-secondary);
}

.post-meta .meta-bottom .blog-category {
    margin-left: 15px
}

.post-meta .meta-bottom {
    position: relative;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.post-meta .meta-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.1px;
    height: 100%;
    opacity: 0.5;
    transform: translateX(-50%);
    background-color: var(--sp-white);
}

.post-meta a {
    color: var(--sp-white);
}

.post-meta a:hover,
.post-meta a:hover {
    color: var(--sp-secondary);
}

.post-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 2px 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: var(--sp-primary);
}

.post-items .post-content {
    padding: 20px;
}

.post-items .post-title {
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}


.post-items .post-title a {
    -webkit-line-clamp: 2;
}

.post-section:not(.blog-single-page) .post-items p.text {
    -webkit-line-clamp: 3;
    margin-bottom: 15px;
}

.post-items .btn.more-link {
    font-size: 18px;
}

.post-items .btn.more-link:hover,
.post-items .btn.more-link:focus {
    outline-color: var(--sp-white);
}

.post-items .post-content .comments {
    position: absolute;
    right: -25px;
    bottom: -25px;
    width: 90px;
    height: 90px;
    padding-top: 20px;
    padding-left: 10px;
    font-size: 18px;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

/*===== // =====*/

/*===== 17. Footer Section =====*/

.footer-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: var(--sp-white);
}

.footer-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* footer-service */
.footer-service .service-item {
    backdrop-filter: blur(0px);
    border: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

.footer-service .service-img {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 45px;
    padding: 8px;
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    color: var(--sp-secondary);
    background-color: transparent;
}

.footer-section .guarantee-box {
    border: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

.footer-award {
    display: flex;
    gap: 12px;
    padding: 15px;
	justify-content: center;
}

.guarantee-box {
    border-radius: var(--sp-radius);
}

.guarantee-title {
    position: relative;
    overflow: hidden;
    color: var(--sp-white);
    font-weight: 600;
    text-align: center;
    z-index: 0;
    font-size: 24px;
}

.guarantee-title img {
    margin: auto;
}

.guarantee-title::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, color-mix(in oklab, var(--sp-primary) 45%, transparent), transparent);
    animation: shineLight 3s ease-in-out infinite;
}

@keyframes shineLight {
    0% {
        left: -100%;
        transition-property: left;
    }
    100% {
        left: 100%;
        transition-property: left;
    }
}

.guarantee-list li {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    font-size: 18px;
}

.guarantee-list li:first-child {
    border-top: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
}

.guarantee-list li:not(:last-child) {
    border-bottom: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
}

.guarantee-list .icon-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.guarantee-list .guarantee-text {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
}

.guarantee-list .guarantee-text span {
    color: var(--sp-secondary);
}

.footer-info-bar {
    position: relative;
    padding: 15px;
    display: grid;
    font-weight: 500;
    align-items: center;
    margin-bottom: 30px;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--sp-radius);
    border: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

.footer-info-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 80%;
    background-color: color-mix(in oklab, var(--sp-primary) 50%, #fff 50%);
    transform: translate(-50%, -50%);
}

.footer-info-bar .widget-contact {
    padding-left: 15px;
}

.footer-info-bar .widget-contact .contact-icon {
    width: 65px;
    height: 65px;
    padding: 12px;
    font-size: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.footer-info-bar .widget-contact .contact-icon img {
    animation: tada 5s infinite linear;
}

.footer-info-bar .widget-contact a {
    color: var(--sp-white);
    text-decoration: none;
}

.footer-info-bar .widget-contact a:hover,
.footer-info-bar .widget-contact a:focus {
    color: var(--sp-secondary);
}

.footer-section .footer-content .no-widget-text a {
	color: var(--sp-white);
}

/* footer-above */
.footer-above {
    position: relative;
    padding: 10px 15px;
    margin-bottom: 30px;
    border-radius: var(--sp-radius);
    border: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

.footer-above::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 70px;
    height: calc(100% + 2px);
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: color-mix(in oklab, var(--sp-primary) 50%, #fff 10%);
}

.footer-above::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 68px;
    height: 100%;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: var(--sp-primary);
}

.footer-above .widget_social_widget li a {
    margin-right: 10px;
}

.footer-above .widget_social_widget li i {
    width: 40px;
    height: 40px;
    color: var(--sp-white);
    font-size: 20px;
    border-radius: 50%;
    line-height: 40px;
    flex-shrink: 0;
}

.widget-social-icons .fa-facebook,
.sidebar .widget_block .wp-block-social-link a:has(.fa-facebook),
.footer-above .widget_social_widget li i.fa-facebook {
    background-color: #0148a2;
}

.widget-social-icons .fa-instagram,
.sidebar .widget_block .wp-block-social-link a:has(.fa-instagram),
.footer-above .widget_social_widget li i.fa-instagram {
    background-color: #e52b6a;
}

.widget-social-icons .fa-twitter,
.sidebar .widget_block .wp-block-social-link a:has(.fa-twitter),
.footer-above .widget_social_widget li i.fa-twitter {
    background-color: #000000;
}

.widget-social-icons .fa-pinterest-p,
.sidebar .widget_block .wp-block-social-link a:has(.fa-pinterest-p),
.footer-above .widget_social_widget li i.fa-pinterest-p {
    background-color: #d20001;
}

.widget-social-icons .fa-youtube-play,
.sidebar .widget_block .wp-block-social-link a:has(.fa-google-plus),
.footer-above .widget_social_widget li i.fa-youtube {
    background-color: #ff0103;
}

.widget-social-icons .fa-envelope,
.sidebar .widget_block .wp-block-social-link a:has(.fa-linkedin),
.footer-above .widget_social_widget li i.fa-envelope {
    background-color: #0085fe;
}

.footer-above .widget-right li a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

/* copyright */
.footer-copyright {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.footer-copyright .column-layout.row [class^='col']:has(.copyright-text){
	order: 1;
}

.footer-copyright .copyright-text a {
    color: var(--sp-secondary);
}

.footer-above .widget-right li,
.footer-copyright .widget-nav_menu li {
    display: inline-block;
    vertical-align: middle;
	margin: 0 2px;
}

.footer-copyright .widget-nav_menu li a {
    color: var(--sp-white);
    padding-right: 0;
}

.footer-copyright .widget-nav_menu li a:hover,
.footer-copyright .widget-nav_menu li a:focus {
    color: var(--sp-secondary);
    text-decoration: underline;
}


.footer-content .mail-form label {
    width: 100%;
    margin-bottom: 10px;
}

.footer-content .mail-form .submit {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    border-radius: 4px;
    color: var(--sp-secondary);
    border: 1px solid color-mix(in oklab, var(--sp-secondary) 50%, #fff 10%);
    background: color-mix(in oklab, var(--sp-primary) 75%, transparent);
}

/*** scrollup ****/
.scrollup.style-1 {
    position: fixed;
    z-index: 111;
    left: 50%;
    bottom: 90px;
    padding: 0;
    line-height: 68px;
    border: none;
    color: var(--sp-secondary);
    background-color: var(--sp-primary);
    transition: all 1.1s ease;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(200px);
    width: 55px;
    height: 55px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

button.scrollup:hover,
button.scrollup:focus {
    outline: none;
}

.scrollup.style-1.is-active {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    opacity: 1;
}

/*===== // =====*/

/*===== 18. Booking Section =====*/

.booking-section {
    position: relative;
    z-index: 1;
}

body.home .hb_room_carousel_container .hb_room {
	width: auto;
}

@media (max-width: 667px) {
    body .hb_room_carousel_container .hb_room {
        min-width: unset;
    }
}

body .hotel-booking-search button, body .hotel-booking-rooms-search button {
    min-width: 30px;
    padding: 3px;
    border: 2px solid #fff;
	border-radius: 50%;
}

.booking-section form {
    padding: 20px 15px;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: color-mix(in oklab, var(--sp-primary) 2%, transparent);
    border: 2px solid var(--sp-secondary);
    box-shadow: var(--sp-shadow);
}

.booking-section form h3 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
}

.hb-form-table .hb-form-field {
    position: relative;
}

.booking-section form p {
    margin-bottom: 0;
    flex-shrink: 0;
    text-align: center;
}

.booking-section form p.hb-submit button {
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 25px;
    color: var(--sp-white);
    border-radius: 50px;
    border: 1px solid var(--sp-white);
    background-color: var(--sp-highlight);
    outline: 1px dashed;
    outline-offset: -6px;
    outline-color: var(--sp-white);
}

.booking-section form p.hb-submit button:hover,
.booking-section form p.hb-submit button:focus {
    background-color: var(--sp-secondary);
}


.booking-section form .hb-form-table .hb-form-field select,
.booking-section form .hb-form-table .hb-form-field input {
    color: var(--sp-white);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 2px;
}

.booking-section form .hb-form-table .hb-form-field .select2-container .select2-selection--single {
    /* pointer-events: none;
    cursor: default; */
    text-decoration: none;
    height: 100%;
    border: none;
    background-color: transparent;
}

.booking-section form .hb-form-table .hb-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 5px;
    color: var(--sp-white);
}

/* Booking Form Style 1  */

.booking-section.style1 {
    margin-top: -160px;
    padding-bottom: 25px;
}

.hb-form-table .hb-form-field {
	margin: 0;
}

.booking-section.style1 form {
    padding: 25px;
    padding-left: 5px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.booking-section.style1 form h3 {
    display: none;
}

.booking-section.style1 .hb-form-table {
    display: flex;
    width: 80%;
	align-items: center;
}

.booking-section.style1 .hb-form-table .hb-form-field {
    width: 25%;
    padding: 0 4%;
    text-align: center;
    border-right: 1px solid color-mix(in oklab, var(--sp-border-dark) 25%, transparent);
}

.booking-section.style1 .hb-form-table .hb-form-field:nth-last-child(2) {
    border-right: none;
}

.booking-section .hb-form-table .hb-form-field:last-child {
    display: none;
}

.booking-section.style1 .hb-form-table .hb-form-field label {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--sp-secondary);
}

.booking-section.style1 form p.hb-submit button {
    border-radius: 50px;
    width: fit-content;
}

.booking-section.style1 form .hb-form-table .hb-form-field .select2-container {
    width: 60% !important;
    float: left;
    text-align: right;
}

.booking-section.style1 form .hb-form-table .hb-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
}

.booking-section.style1 form .hb-form-table .hb-form-field .select2-container .select2-selection--single .select2-selection__arrow {
    display: none;
}

.booking-section.style1 form .hb-form-table .hb-form-field .hb-form-field-input .nav-guest {
    width: 40%;
    float: left;
    text-align: left;
    padding: 0 10px;
}

.booking-section.style1 form .hb-form-table .hb-form-field .hb-form-field-input .nav-guest span {
    display: block;
    font-size: 13px;
    color: var(--sp-white);
	cursor: pointer;
}

.booking-section.style1 form .hb-form-table .hb-form-field .hb-form-field-input .nav-guest span.goUp {
    margin-bottom: 10px;
    margin-top: -1px;
}

/* Booking Form Style 2 & Slider two  */

.slider-wrapper.style2 {
    padding-top: 200px;
    padding-bottom: 100px;
}

.slider-wrapper.style2 .main-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-wrapper.style2 .main-slider .item img {
    height: 100%;
    object-fit: cover;
}

.slider-wrapper.style2 .main-slider .owl-stage-outer,
.slider-wrapper.style2 .main-slider .owl-stage,
.slider-wrapper.style2 .main-slider .owl-item,
.slider-wrapper.style2 .main-slider .item {
    height: 100%;
}

.slider-wrapper.style2 .theme-slider div.theme-content {
    margin-bottom: 0;
    max-width: clamp(450px, 58vw, 850px);
}

.booking-section.style2 .hb-form-table .hb-form-field {
    margin-bottom: 15px;
	border-radius: 55px;
    border: 2px solid var(--sp-secondary);
}

.booking-section.style2 .hb-form-table .hb-form-field label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
	border-radius: 500px;
}

.booking-section.style2 form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0;
    width: 45px;
    background-color: var(--sp-secondary);
	border-radius: 50px;
}

.booking-section.style2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--sp-white) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--sp-white) transparent !important;
}

.booking-section.style2 form .hb-form-table .hb-form-field select,
.booking-section.style2 form .hb-form-table .hb-form-field input,
.booking-section.style2 form .hb-form-table .hb-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 12px 10px;
    text-align: end;
    padding-right: 30px;
    line-height: inherit;
    color: var(--sp-secondary);
}

.booking-section.style2 form .hb-form-table .hb-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 60px;
}

/*===== // =====*/

/*===== 19. Packages Offers Section =====*/

.packages-box {
    box-shadow: var(--sp-shadow);
    border-radius: var(--sp-radius);
}

.packages-box a {
    text-decoration: none;
}

.packages-box .thumbnail {
    position: relative;
    padding: 10px;
}

.packages-box .thumbnail .packages-img img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--sp-radius);
}

.packages-features-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    text-align: center;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.packages-features-bar .feature-item i {
    display: block;
    font-size: 18px;
    margin-bottom: 2px;
    color: var(--sp-secondary);
}

.packages-details {
    padding: 12px 10px;
    background: color-mix(in oklab, var(--sp-secondary) 10%, transparent);
}

.packages-details a {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.packages-details p {
    margin-bottom: 0;
}

.post-content-bottom {
    padding: 10px;
}

.packages-amenities li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.packages-amenities li::before {
    content: '\f00c';
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 13px;
    color: var(--sp-secondary);
    font-family: 'FontAwesome';
    transform: translateY(-50%);
}

.post-content-bottom a.more-link {
    gap: 4px;
    padding: 0;
    border: none;
    outline: none;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--sp-highlight);
    background-color: transparent;
}

.packages-price-box {
    padding: 15px 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sp-border-dark);
    border-bottom: 1px solid var(--sp-border-dark);
}

.packages-price-box .old-price {
    display: block;
    text-decoration: line-through;
}

.packages-price-box .cta-btn {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 15px;
    font-weight: 500;
}

.packages-price-box .share-btn {
    width: 45px;
    height: 45px;
    outline: none;
    font-size: 18px;
    padding: 0;
    flex-shrink: 0;
    justify-content: center;
}

.packages-cta {
    text-align: center;
    font-weight: 600;
    margin-top: 10px;
    font-size: 18px;
}

/* Tag */
.corner-ribbon .banget {
    letter-spacing: 2px;
    color: var(--sp-white);
    text-transform: uppercase;
    --f: .5em;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.5;
    padding-inline: 1.5lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    box-shadow: var(--sp-shadow);
    background-color: var(--sp-highlight);
}

.corner-ribbon .banget.banget-green {
    background-color: #32bf13;
}

.corner-ribbon .banget.banget-orange {
    background-color: #ff7200;
}

.discount-badge .badge {
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: small;
    font-weight: 400;
    padding: 5px 12px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: var(--sp-highlight);
}

/*===== // =====*/

/*===== 20. Breadcrumb Section =====*/

.breadcrumb-section {
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 115px;
}

.breadcrumb-section::after,
.breadcrumb-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    background-image: url(../images/breadcrumb/pattern1.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.breadcrumb-section::after {
    left: unset;
    right: 0;
    background-position: right;
    background-image: url(../images/breadcrumb/pattern2.png);
}

.breadcrumb-wrapper {
    position: relative;
    z-index: 4;
}

.breadcrumb-text {
    padding: 20px 50px;
    margin: auto;
    text-align: center;
    font-weight: 500;
    width: fit-content;
    min-width: 400px;
    font-size: 16px;
    border-radius: 100px;
    color: var(--sp-white);
    border: 2px solid var(--sp-secondary);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: color-mix(in oklab, var(--sp-primary) 2%, transparent);
    box-shadow: var(--sp-shadow);
}

.breadcrumb-text .js-tilt-glare {
    border-radius: 100px;
}

.breadcrumb-icone a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin-top: -45px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    font-size: 24px;
    color: var(--sp-white);
    text-decoration: none;
    background-color: var(--sp-secondary);
}

.breadcrumb-heading h1 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--sp-secondary);
}

.breadcrumb-heading h1::before,
.breadcrumb-heading h1::after {
    content: '';
    left: 50%;
    height: 1px;
    position: absolute;
    transform: translateX(-50%);
}

.breadcrumb-heading h1::before {
    bottom: 0;
    width: 50px;
    background: var(--sp-secondary);
}

.breadcrumb-heading h1::after {
    bottom: -8px;
    width: 30px;
    background: var(--sp-white);
}

.breadcrumb-list li {
    display: inline-flex;
    word-break: break-word;
}

.breadcrumb-list li a {
    font-weight: 600;
    color: var(--sp-white);
    text-decoration: none;
}

.breadcrumb-list li a i {
    color: var(--sp-secondary);
}

.breadcrumb-list li a:hover,
.breadcrumb-list li a:focus {
    color: var(--sp-secondary);
}

.breadcrumb-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: unset;
}

.breadcrumb-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.breadcrumb-slider .owl-stage-outer,
.breadcrumb-slider .owl-stage,
.breadcrumb-slider .owl-item,
.breadcrumb-slider .item {
    height: 100%;
}

.breadcrumb-slider .owl-thumbs {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 4;
    transform: translateX(-50%);
}

.breadcrumb-slider .owl-thumb-item {
    width: 45px;
    height: 45px;
    padding: 0;
    margin-right: 8px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: var(--sp-shadow);
    border: 2px solid var(--sp-white);
    transition: var(--sp-transition);
}

.breadcrumb-slider .owl-thumb-item.active {
    border: 2px solid var(--sp-secondary);
}

.breadcrumb-slider .owl-thumb-item:hover,
.breadcrumb-slider .owl-thumb-item:focus {
    transform: scale(1.1);
    border: 2px solid var(--sp-secondary);
}

.breadcrumb-slider .item img,
.breadcrumb-slider .owl-thumb-item img {
    object-fit: cover;
    height: 100%;
}

/*===== // =====*/

/*===== 21. Why Choose Section =====*/

.why-choose-card {
    position: relative;
    padding: 10px;
    padding-right: 0;
    border-radius: var(--sp-radius);
}

.why-choose-card::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 80%;
    z-index: -1;
    border-radius: var(--sp-radius);
    background-color: var(--sp-secondary);
    transition: all 0.5s ease;
}

.why-choose-card:hover::after,
.why-choose-card:focus-within::after {
    background-color: var(--sp-primary);
}

.why-choose-card .choose-content {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--sp-radius);
}

.why-choose-card .choose-title {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: var(--sp-white);
    z-index: 2;
}


.why-choose-card .choose-content::before,
.why-choose-card .choose-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.why-choose-card .choose-content::before {
    background: linear-gradient(to top, var(--sp-primary), transparent);
    opacity: 1;
}

.why-choose-card .choose-content::after {
    background: linear-gradient(to top, var(--sp-secondary), transparent);
    opacity: 0;
}

.why-choose-card:hover .choose-content::before {
    opacity: 0;
}

.why-choose-card:hover .choose-content::after {
    opacity: 1;
}

/*===== // =====*/

/*===== 22. Blog Single Section  =====*/

.blog-single-page .post-items {
    margin-bottom: 25px;
    box-shadow: none;
    border: 1px solid var(--sp-border-dark);
}

.blog-single-page .post-items .post-title {
    padding: 0;
    margin-bottom: 12px;
}

.blog-single-page .post-items .post-content {
    padding: 20px 15px;
}

.post-content .quote-box {
    padding: 30px;
    position: relative;
    color: var(--sp-white);
    text-align: center;
    font-size: 18px;
    background-color: var(--sp-primary);
    border-radius: var(--sp-radius);
}

.post-content .quote-box::after {
    content: "\f10e";
    font-size: 6rem;
    color: var(--sp-white);
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.1;
    transform: translate(-50%, -50%);
    font-family: 'FontAwesome';
}

.post-content .quote-author {
    font-weight: 600;
    color: var(--sp-secondary);
}

.post-content .quote-box p {
    max-width: 600px;
    margin: auto;
    margin-bottom: 5px;
}

.blog-single-page .post-content p.text {
    margin-bottom: 20px;
}

.blog-single-page .post-content p.text:last-child {
    margin-bottom: 0;
}

.blog-single-page .widget-single-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sp-border-dark);
}

.blog-single-page .widget-single-page .sinlge-page-tag,
.blog-single-page .widget-single-page .widget_social_widget {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-single-page .widget-single-page .widget_social_widget ul li a {
    font-size: 16px;
    width: 40px;
    height: 40px;
    color: var(--sp-white);
    line-height: 40px;
    margin-right: 4px;
    margin-bottom: 1px;
    background-color: var(--sp-primary);
}

.blog-single-page .widget-single-page .widget_social_widget ul li a:focus,
.blog-single-page .widget-single-page .widget_social_widget ul li a:hover {
    background-color: var(--sp-secondary);
}

.blog-single-page .widget-single-page .widget-title {
    margin-bottom: 4px;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 22px;
}

.blog-section.blog-single-page .blog-post.author-details {
    position: relative;
    overflow: hidden;
    padding: 15px;
    box-shadow: var(--sp-shadow);
    border-top-right-radius: var(--sp-radius);
    border-bottom-right-radius: var(--sp-radius);
    border-left: 5px solid;
    background-color: var(--dark-1);
    border-color: var(--sp-secondary);
    z-index: 0;
    margin-bottom: 25px;
}

.blog-section.blog-single-page .blog-post.author-details::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-secondary) 20%, transparent);
}

.blog-section.blog-single-page .blog-post.author-details .media {
    display: flex;
    gap: 15px;
}

.blog-section.blog-single-page .blog-post.author-details .widget_social_widget {
    padding: 10px 15px;
    background-color: color-mix(in srgb, var(--sp-primary) 10%, transparent);
}

.blog-section.blog-single-page .blog-post.author-details .media-body h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--sp-secondary);
}

.blog-post.author-details .media-body h4 {
    margin-bottom: 5px;
}

.blog-section.blog-single-page .blog-post.author-details .media-body h4>a {
    font-size: 20px;
    text-decoration: none;
}

.blog-section.blog-single-page .author-details .widget_social_widget li a {
    width: 38px;
    height: 38px;
    line-height: 38px;
}

.blog-section.blog-single-page .author-details .media .auth-mata img {
    border-radius: 50%;
}

/* comment */

.comments-area .comments-title h3 {
    font-size: 25px;
    font-weight: 700;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

 ol.comment-list li {
    list-style: none;
}

.comments-area .comment-body {
    position: relative;
    min-height: 120px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    border-radius: 3px;
    z-index: 0;
    margin-bottom: 5px;
    margin: 20px 0;
    padding: 20px;
    padding-left: 110px;
    border: 1px solid var(--sp-border-dark);
    background: var(--dark-1);
}

.comments-area .comment-meta .comment-author img {
    position: absolute;
    z-index: 0;
    left: 16px;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    border: 1px solid var(--sp-border-dark);
}

.comments-area .comment-meta .comment-author {
    margin-bottom: 5px;
}

.blog-section.blog-single-page .comments-area .comment-meta .comment-author .fn a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

.comments-area .comment-body  a.comment-reply-link {
    position: relative;
    /* text-decoration: none; */
    font-weight: 600;
    padding-left: 20px;
    transition: var(--sp-transition);
    color: var(--sp-highlight);
}

.comments-area .comment-body .comment-metadata span.edit-link a.comment-edit-link {
    position: absolute;
    bottom: 20px;
    left: 180px;
    font-weight: 600;
    transition: var(--sp-transition);
    color: var(--sp-highlight);
}

.comments-area .comment-body .comment-metadata a time {
    font-weight: 500;
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
    padding-left: 20px;
    transition: 0.65s;
    color: var(--sp-secondary);
}

.comments-area .comment-body a.comment-reply-link:before,
.comments-area .comment-body  a time:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    left: 0;
}

.comments-area .comment-body  a.comment-reply-link:before {
    content: "\f064";
}

.comments-area .comment-body  a time:before {
    content: "\f133";
}

.comment-list .children {
    position: relative;
    padding: 0;
    margin: 0;
    margin-left: 2.5rem;
    z-index: 0;
}

ol.comment-list li#comment-13 {
    margin-left: -70px;
}

#respond.comment-respond {
    padding: 30px 25px;
    border-radius: var(--sp-radius);
    background-color: color-mix(in srgb, var(--sp-secondary) 15%, transparent);
}

#respond.comment-respond .comment-reply-title {
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 700;
}

.comment-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.comment-form>p:nth-child(1n+1):not(.comment-form-email):not(.comment-form-comment):not(.comment-form-cookies-consent):not(.form-submit):not(.comment-form-url) {
    margin-right: 30px;
}

.comment-form>p:not(.comment-notes):not(.comment-form-comment):not(.comment-form-cookies-consent):not(.form-submit) {
    flex: 45.5%;
}

.comment-form>p label {
    display: none;
}

.comment-form>p input {
    outline: none;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background-color: var(--dark-1);
}

.comment-respond textarea#comment::placeholder,
.comment-form>p input::placeholder {
    color: var(--sp-black);
}

.comment-form-cookies-consent,
.form-submit,
.comment-form-comment {
    max-width: 100%;
    flex-basis: 100%;
}

.comment-respond textarea#comment {
    height: 150px;
    overflow: auto;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    resize: vertical;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
    outline: none;
    border-radius: var(--sp-radius);
    background: var(--dark-1);
}

.comment-form>p.comment-form-cookies-consent input {
    margin: 0;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
}

.comment-form>p.comment-form-cookies-consent label {
    display: block;
    margin-left: 8px;
    font-size: 14px;
}

.comment-respond input#comment-submit {
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    margin-top: 10px;
    margin-bottom: 0;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    transition: var(--sp-transition);
    outline: 1px dashed var(--sp-white);
    outline-offset: -6px;
}

.comment-respond input#comment-submit:focus,
.comment-respond input#comment-submit:hover {
    background-color: var(--sp-primary);
}

.comment-respond .comment-form .comment-form-rating {
    margin-left: auto;
}

/*==== Pagination ====*/
.pagination {
    display: inline-flex;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 10px;
}

.pagination .nav-links .page-numbers {
    position: relative;
    overflow: hidden;
    display: block;
    width: 45px;
    height: 45px;
    z-index: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 45px;
    border-radius: 100px;
    text-align: center;
    text-decoration: none;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.pagination .nav-links .page-numbers:not(.prev):not(.next)::after {
    content: '';
    position: absolute;
    top: 75%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 100%;
    background-color: var(--sp-secondary);
    transition: all 0.3s ease;
}

.pagination .nav-links .page-numbers:not(.prev):not(.next):hover::after,
.pagination .nav-links .page-numbers:not(.prev):not(.next):focus::after,
.pagination .nav-links .page-numbers:not(.prev):not(.next).active::after {
    top: 0;
}

.pagination .nav-links .page-numbers.prev {
    margin-right: 5px;
}

.pagination .nav-links .page-numbers.next {
    margin-left: 5px;
}

.pagination .nav-links .page-numbers.prev:hover,
.pagination .nav-links .page-numbers.prev:focus,
.pagination .nav-links .page-numbers.next:hover,
.pagination .nav-links .page-numbers.next:focus {
    background-color: var(--sp-secondary);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    padding: 0;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
    position: absolute;
}

/*===== // =====*/

/*===== 27. Gallery Section  =====*/

.gallery-item {
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    border-radius: var(--sp-radius);
}

.gallery-item a.image-popup::after {
    content: '\f00e';
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'FontAwesome';
    font-size: 18px;
    z-index: 1;
    border-radius: 50%;
    color: var(--sp-white);
    width: 50px;
    height: 50px;
    opacity: 0;
    line-height: 50px;
    text-align: center;
    background-color: var(--sp-secondary);
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.4s ease;
}

.gallery-item.active a.image-popup::after,
.gallery-item:hover a.image-popup::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-item .single-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery-item.hover-aware:before {
    content: unset;
}

.gallery-item.hover-aware .effect {
    z-index: 1;
}

button.mfp-arrow,
button.mfp-close,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    background-color: transparent;
    outline: none;
}

/*===== // =====*/

/*===== 28. 404 Section  =====*/

.section404 {
    position: relative;
    overflow: hidden;
    z-index: 0;
    color: var(--sp-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/404-img.jpg);
}

.card404 {
    padding: 50px;
    border-radius: 500px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--sp-shadow);
    border: 2px solid var(--sp-secondary);
    background: color-mix(in oklab, var(--sp-primary) 10%, transparent);
}

.section404::before,
.comingsoon-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
}

.card404 h1 {
    font-size: 18vw;
    font-weight: 700;
    line-height: 0.9;
    margin-bottom: 10px;
    letter-spacing: 10px;
    font-family: 'Geologica', sans-serif;
}

.card404 h3 {
    font-weight: 600;
    margin-bottom: 25px;
}

.card404 p {
    margin-bottom: 30px;
}

/*===== // =====*/

/*===== 29. Comingsoon Section  =====*/

.comingsoon-section {
    position: relative;
    height: 100%;
    min-height: 100vh;
    display: flex;
    z-index: 0;
    align-items: center;
    color: var(--sp-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-image: url(../images/404-img.jpg); */
}

.dealsofday-timer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.dealsofday-timer .dealsofday-item {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: clamp(4.3rem, 16vw, 18rem);
    aspect-ratio: 1;
    border-radius: 500px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--sp-shadow);
    border: 2px solid var(--sp-secondary);
    background: color-mix(in oklab, var(--sp-primary) 10%, transparent);
}

.dealsofday-timer .dealsofday-item .dealsofday-count h6 {
    line-height: 1;
    font-size: clamp(1.5rem, 6vw, 6rem);
}

.dealsofday-timer .dealsofday-item p {
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    margin: 0px;
    font-size: clamp(0.5rem, 2.2vw, 1.8rem);
}

.coming-soon h3 {
    font-weight: 600;
    margin-bottom: 25px;
}

.coming-soon form {
    position: relative;
    max-width: 700px;
    margin: auto;
    margin-bottom: 30px;
}

.coming-soon form label {
    width: 100%;
}

.coming-soon form label input {
    border-radius: 25px;
    font-size: 16px;
}

.coming-soon form button {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 600;
    padding: 0.613rem 1.5rem;
    border-radius: 25px;
    font-size: 16px;
    color: var(--sp-white);
    border: 1px solid var(--sp-secondary);
    background-color: var(--sp-secondary);
    outline: 1px dashed var(--sp-white);
    outline-offset: -5px;
}

.coming-soon form button:hover,
.coming-soon form button:focus {
    border: 1px solid var(--sp-primary);
}

/*===== // =====*/

/*===== 30. Restaurant Service section  =====*/

.dishes-item {
    padding: 20px 15px;
    text-align: center;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
    background-color: var(--sp-primary);
}

.dishes-item .dishes-img {
    width: 90px;
    height: 90px;
    margin: auto;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    color: var(--sp-secondary);
    background-color: var(--sp-white);
    transition: var(--sp-transition);
}

.dishes-item:hover .dishes-img i,
.dishes-item:focus-within .dishes-img i { 
    animation: wobbles 1s ease-in-out;
}

.dishes-item:hover .dishes-img,
.dishes-item:focus-within .dishes-img {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.dishes-item .dishes-title {
    color: var(--sp-secondary);
    font-weight: 600;
    margin-bottom: 10px;
}

.dishes-item .read-more-link {
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    color: var(--sp-secondary);
    background-color: var(--sp-white);
    padding: 8px 15px;
    border-radius: 25px;
    display: inline-block;
    outline: 1px dashed;
    outline-offset: -5px;
    outline-color: var(--sp-secondary);
}

.dishes-item .read-more-link:hover,
.dishes-item .read-more-link:focus {
    color: var(--sp-white);
    outline-color: var(--sp-white);
    background-color: var(--sp-secondary);
}



.gallery-section.restaurant-page .gallery-item a.image-popup::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    opacity: 0;
    border-radius: var(--sp-radius);
    background-color: var(--sp-black);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.4s ease;
}

.gallery-section.restaurant-page .gallery-item.active a.image-popup::before,
.gallery-section.restaurant-page .gallery-item:focus-within a.image-popup::before,
.gallery-section.restaurant-page .gallery-item:hover a.image-popup::before {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-section.restaurant-page .gallery-item.active a.image-popup::after,
.gallery-section.restaurant-page .gallery-item:focus-within a.image-popup::after,
.gallery-section.restaurant-page .gallery-item:hover a.image-popup::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
}

/*===== // =====*/

/*===== 31. Food Menu Section  =====*/

.food-menu-section {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in oklab, var(--sp-secondary) 10%, transparent);
}

.food-menu-section::after,
.food-menu-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
}

.food-menu-section::after {
    left: unset;
    right: 0;
    transform: scale(-1, 1);
}

.food-menu-item {
    display: flex;
    position: relative;
    align-items: center;
}

.food-menu-img {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 15px;
    border-radius: var(--sp-radius)
}

.food-menu-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: var(--sp-transition);
}

.food-menu-item:hover .food-menu-img img {
    transform: scale(1.2);
}

.food-menu-content {
    flex: 1;
}

.food-menu-content .menu-tag {
    vertical-align: middle;
    font-size: 15px;
    padding: 0px 8px;
    border-radius: 4px;
    font-weight: 500;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.food-menu-content .menu-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-menu-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.food-menu-content .menu-title-row .food-menu-desc {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-menu-content .menu-line {
    position: relative;
    flex: 1;
    height: 2px;
    text-align: center;
    color: var(--sp-secondary);
    background-color: var(--sp-secondary);
}

.food-menu-content .menu-line i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.food-menu-content .menu-line::before,
.food-menu-content .menu-line::after {
    content: '\f0fb';
    position: absolute;
    top: 50%;
    font-family: 'FontAwesome';
    transform: translateY(-50%);
}

.food-menu-content .menu-line::before {
    left: -4px;
    transform: translateY(-50%) rotate(180deg);
}

.food-menu-content .menu-line::after {
    right: -4px;
}

.food-menu-content .price-container {
    margin-left: 5px;
    margin-right: 10px;
}

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
    height: 3.5em;
    width: 3.5em;
    background: var(--sp-highlight);
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
    content: "";
    position: absolute;
    z-index: -1;
}

.price-container {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.price-container:before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.price-container:after {
    top: 0;
    left: 0;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.price-container .price {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.price-container .price:before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.price-container .price:after {
    top: 0;
    left: 0;
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
}

.price-container .price ins {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-white);
}

/*===== // =====*/

/*===== // =====*/

/*===== 34. FAQs Section =====*/

.st-accordion .accordion-item {
    margin-bottom: 20px;
    border: none;
    border-left: 4px solid var(--sp-secondary);
    border-radius: var(--sp-radius);
    transition: var(--sp-transition);
}

.st-accordion .accordion-button {
    color: var(--sp-primary);
    background: var(--dark-2);
    box-shadow: none;
    padding: 15px;
    font-weight: 700;
}

.st-accordion .accordion-button:focus {
    outline: 1px dotted;
}

.st-accordion .accordion-item:has(.accordion-collapse.show),
.st-accordion .accordion-item:has(.accordion-collapse.show) .accordion-button {
    background-color: var(--sp-primary);
    color: var(--sp-white);
}

.st-accordion .accordion-button::after {
    right: 15px;
    color: var(--sp-secondary);
    font-weight: 300;
    font-size: 30px;
}

.st-accordion .accordion-item .accordion-body {
    padding-top: 0;
    font-size: 14px;
}

.avatar-box {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: var(--dark-2);
}

.avatar-group {
    display: flex;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid var(--sp-border-dark);
}

.avatar-group .avatar {
    width: 50px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--sp-white);
}

.avatar-group .avatar:not(:first-child) {
    margin-left: -15px;
}


/* Faq  */

.st-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion .card .card-header {
    padding: 0;
    border: 0;
    background-color: transparent;
}

.accordion .acc-btn,
.st-accordion .accordion-button {
    width: 100%;
    position: relative;
    color: var(--sp-black);
    box-shadow: none;
    border: 0;
    padding: 12px 15px;
    border-radius: var(--sp-radius);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    white-space: normal;
    transition: var(--sp-transition);
}

.accordion .card:not(:last-child) {
    margin-bottom: 20px;
}

.st-accordion .accordion-button:focus {
    outline: 1px dotted;
}

.accordion .acc-btn::after,
.st-accordion .accordion-button::after {
    content: '+';
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--sp-radius);
    text-align: center;
    line-height: 20px;
    font-size: 25px;
    background-image: none;
    transition: var(--sp-transition);
}

.accordion .acc-btn:not(.collapsed)::after,
.st-accordion .accordion-button:not(.collapsed)::after {
    /* content: '−'; */
    transform: translateY(-50%) rotate(45deg);
}

/*===== // =====*/

/*===== 35. Network Section =====*/

.network-item {
    text-align: center;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
}

.network-img {
    position: relative;
}

.network-img .flag {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--sp-secondary);
}

.network-img .flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.network-img .country {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    color: var(--sp-white);
    background: color-mix(in srgb, var(--sp-primary) 75%, transparent);
}

.network-content {
    padding: 10px;
    padding-top: 20px;
}

.network-content .phone {
    color: var(--sp-highlight);
}

.network-slider.owl-carousel .owl-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.network-slider.owl-carousel .owl-nav [class*=owl-] {
    position: unset;
    opacity: 1;
}

.network-slider.owl-carousel .owl-nav [class*=owl-].disabled {
    opacity: 0.6;
    cursor: no-drop;
}

/*===== // =====*/

/*===== 36. Contact Form Section =====*/

.contactform-section .top-bar {
    display: flex;
    overflow: hidden;
    border-top-left-radius: var(--sp-radius);
    border-top-right-radius: var(--sp-radius);
}

.contactform-section .top-left {
    width: 65%;
    padding: 20px;
    padding-bottom: 10px;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.contactform-section .top-right {
    display: flex;
    align-items: center;
    width: 35%;
    padding: 20px;
    background-color: var(--sp-primary);
}

.contactform-section .widget-contact .contact-area .icon-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--sp-white);
}

.contactform-section .widget-contact .contact-area .icon-content a {
    color: var(--sp-secondary);
    text-decoration: none;
}

.contactform-section .widget-contact .contact-icon {
    width: 55px;
    height: 55px;
    font-size: 26px;
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.contactform-section .top-bar .widget-contact .contact-icon {
    background-color: transparent;
}

.contactform-section .widget-contact:hover .contact-icon i,
.contactform-section .widget-contact:focus-within .contact-icon i,
.widget_social_widget ul a:not(.header-widget .widget_social_widget ul a):hover i,
.widget_social_widget ul a:not(.header-widget .widget_social_widget ul a):focus i {
    animation: wobbles 1s ease-in-out;
}

@keyframes wobbles {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.contactform-section .top-bar .widget-contact .contact-area .icon-content a {
    font-weight: 600;
}

.contactform-area {
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 30px 0;
    color: var(--sp-white);
}

.contactform-area::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
}

.contact-touch {
    padding: 25px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background: color-mix(in oklab, var(--sp-primary) 60%, transparent);
}

.contact-touch .wpcf7-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -5.5%;
}

.contact-touch .wpcf7-form label {
    display: none;
}

.contact-touch .wpcf7 form p:nth-child(2),
.contact-touch .wpcf7 form p:nth-child(3),
.contact-touch .wpcf7 form p:nth-child(4),
.contact-touch .wpcf7 form p:nth-child(5) {
    flex: 0 0 48.2%;
    margin-bottom: 3.5%;
}

.contact-touch .wpcf7 form p:nth-child(3),
.contact-touch .wpcf7 form p:nth-child(5) {
    margin-left: 3.5%;
}

.contact-touch .wpcf7-form input.wpcf7-form-control,
.contact-touch .wpcf7-form select.wpcf7-form-control,
.contact-touch .wpcf7-form textarea.wpcf7-form-control {
    background-color: transparent;
    color: var(--sp-white);
    border: 1px solid color-mix(in oklab, var(--sp-primary) 50%, #fff 25%);
}

.contact-touch .wpcf7-form input.wpcf7-form-control::placeholder,
.contact-touch .wpcf7-form select.wpcf7-form-control::placeholder,
.contact-touch .wpcf7-form textarea.wpcf7-form-control::placeholder {
    color: var(--sp-white);
}

.contact-touch .wpcf7 form p {
    flex: 100%;
    margin-bottom: 3.5%;
}

.contact-touch .wpcf7-form input[type="submit"] {
    width: 100%;
    border-radius: 50px;
    background-color: var(--sp-secondary);
    transition: var(--sp-transition);
    outline: 1px dashed;
    outline-offset: -5px;
    outline-color: var(--sp-white);
    border: none;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 30px;
}

.contactform-area .info-box {
    padding: 20px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background: color-mix(in oklab, var(--sp-primary) 60%, transparent);
}

.contactform-area .info-box h2 {
    position: relative;
    font-weight: 700;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.contactform-area .info-box h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background-color: var(--sp-secondary);
}

.contactform-area .info-item aside {
    padding: 16px 0;
    border-bottom: 1px solid var(--sp-border-dark);
}

.contactform-area .info-item aside:last-child {
    border-bottom: none;
}

.widget_social_widget ul a:not(.header-widget .widget_social_widget ul a) {
    margin-right: 10px;
    background-color: var(--sp-secondary);
}

/*===== // =====*/

/*===== 37. Contact Us Section =====*/

.contact-card {
    padding: 30px 20px;
    color: var(--sp-white);
    border-radius: var(--sp-radius);
}

.contact-card.hover-aware:before {
    background: var(--sp-primary);
}

.contact-card.hover-aware .effect {
    opacity: 1;
    background: var(--sp-secondary);
}

.contact-card .contact-icon {
    width: 85px;
    height: 85px;
    display: flex;
    font-size: 38px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--sp-secondary);
    transition: var(--sp-transition);
}

.contact-card:hover .contact-icon,
.contact-card.active .contact-icon,
.contact-card:focus-within .contact-icon {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
    animation: flipInX 1s linear;
}

.contact-content .title {
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid color-mix(in oklab, var(--sp-white) 20%, transparent);
}

.contact-content .contact-link {
    text-decoration: none;
    color: var(--sp-secondary);
    font-size: 16px;
}

.contact-card:hover .contact-content .contact-link,
.contact-card.active .contact-content .contact-link,
.contact-card:focus-within .contact-content .contact-link {
    color: var(--sp-white);
}

.contact-card:hover .contact-content .btn,
.contact-card.active .contact-content .btn,
.contact-card:focus-within .contact-content .btn {
    background-color: var(--sp-primary);
}

.contact-card .bg-contact-icon {
    position: absolute;
    top: 5px;
    right: 20px;
    opacity: 0.1;
    font-size: clamp(4.5rem, 8vw, 8.5rem);
    line-height: 1;
}

.contact-card.active .bg-contact-icon,
.contact-card:hover .bg-contact-icon .contact-card:focus-within .bg-contact-icon {
    animation: flipInY 1s linear;
}

.contactmap-section .frame-map {
    height: 450px;
}

.contactmap-section .frame-map iframe {
    height: 100%;
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
}

/*===== // =====*/

/*===== 38. Luxury Spa Section =====*/

.luxury-spa-feature {
    padding: 8px 25px;
    text-align: center;
}

.luxury-spa-feature .icon-circle {
    line-height: 1;
    font-size: 80px;
    margin-bottom: 10px;
    color: var(--sp-secondary);
}

.luxury-spa-feature:hover .icon-circle i,
.luxury-spa-feature:focus-within .icon-circle i {
    animation: wobbles 1s ease-in-out;
}

.luxury-spa-feature h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.luxury-spa-feature a {
    font-weight: 500;
    text-decoration: none;
    color: var(--sp-secondary);
}

.luxury-spa-feature a:hover,
.luxury-spa-feature a:focus {
    color: var(--sp-primary);
}

/*===== // =====*/

/*===== 39. Workflow Section =====*/

.workflow-section {
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.workflow-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
}

.workflow-wrap::before,
.workflow-wrap::after {
    content: '';
    position: absolute;
    top: calc(50% - 24px);
    left: 0;
    width: 10px;
    height: 10px;
    z-index: -1;
    border-radius: 50%;
    transform: translateY(-50%);
    background-color: var(--sp-secondary);
}

.workflow-wrap .line { 
    position: absolute;
    top: calc(50% - 24px);
    left: 0;
    width: 100%;
    height: 2px;
    z-index: -1;
    transform: translateY(-50%);
    background-color: var(--sp-secondary);
}

.workflow-wrap::after {
    left: unset;
    right: 0;
}

.workflow-item {
    text-align: center;
}

.workflow-img {
    position: relative;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 25px;
    width: clamp(4.5rem, 16vw, 18rem);
    border: 2px solid var(--sp-secondary);
    background-color: var(--sp-primary);
}

.workflow-img img,
.workflow-img .js-tilt-glare {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.workflow-img .count { 
    position: absolute;
    top: 50%;
    right: -25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600;
    transform: translateY(-50%);
    background-color: var(--sp-highlight);
}

/*===== // =====*/

/*===== 40. Spa Pricing Section  =====*/

.spa-pricing-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--sp-shadow);
    border-radius: var(--sp-radius);
}   

.spa-pricing-card-img {
    position: relative;
}

.spa-pricing-card-meta {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    color: var(--sp-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--sp-primary) 75%, transparent);
}

.spa-pricing-card-meta .price { 
    color: var(--sp-white);
    margin: 0;
}

.spa-pricing-card-body {
    padding: 15px;
}

.spa-pricing-card-body h4 { 
    font-weight: 600;
    margin-bottom: 8px;
    transition: var(--sp-transition);
}

.spa-pricing-card:hover .spa-pricing-card-body h4,
.spa-pricing-card:focus-within .spa-pricing-card-body h4 { 
    color: var(--sp-secondary);
}

.spa-pricing-features li {
    position: relative;
    padding: 4px 0;
    padding-left: 20px;
}

.spa-price-feature::before {
    content: "\f00d";
    font-family: 'FontAwesome';
    position: absolute;
    top: 7px;
    left: 0;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    color: var(--sp-highlight);
    transition: all 0.3s ease-in-out;
}

.spa-price-feature.active::before {
    content: "\f00c";
}

.spa-pricing-card-action {
    padding: 15px;
    border-top: 1px solid var(--sp-border-dark);
}


/*===== // =====*/

/* Wave Effect */
.wave-effect,
.wave-effect-primary {
    position: relative;
}

.wave-effect::before,
.wave-effect::after,
.wave-effect-primary::before,
.wave-effect-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
}

.wave-effect::before {
    animation: wave1 4s infinite;
}

.wave-effect::after {
    animation: wave2 4s infinite;
}

.wave-effect-primary::before {
    animation: wave3 4s infinite;
}

.wave-effect-primary::after {
    animation: wave4 4s infinite;
}

/* Autoptimize Animation  */

.st-autoptimize-left,
.st-autoptimize-right {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.st-autoptimize-left::before,
.st-autoptimize-right::before {
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(1);
    background-color: var(--sp-primary);
    transition: transform 0.8s cubic-bezier(0.565, 0.43, 0.24, 0.92) 0.65s;
    z-index: 1;
}

.st-autoptimize-left.is-visible::before {
    transform: scaleX(0);
    transform-origin: left center;
}

.st-autoptimize-right.is-visible::before {
    transform: scaleX(0);
    transform-origin: right center;
}

/***** IMG hover Style *****/
.st-media-hover {
    position: relative;
    overflow: hidden;
}

.st-media-hover img {
    position: relative;
    transition: all .5s ease;
    width: 100%;
    height: 100%;
}

.st-media-hover img:first-child {
    bottom: 0;
    filter: blur(10px);
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(50%) scaleX(2);
    transition: all .4s ease-in-out;
}

.st-media-hover:hover img:first-child,
.st-media-hover:focus-within img:first-child {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) scaleX(1);
}

.st-media-hover:hover img:nth-child(2),
.st-media-hover:focus-within img:nth-child(2) {
    filter: blur(10px);
    opacity: 0;
    transform: translateX(-50%) scaleX(2);
}
.woocommerce p.stars a:hover {
	color: var(--sp-primary);
}
.footer-copyright .widget_nav_menu ul {
    display: inline-flex;
    gap: 10px;
}
.footer-copyright .widget_nav_menu .menu-item {
    display: inline;
    margin-bottom: 0;
}
.footer-copyright .widget_nav_menu .menu-item:not(ul.sub-menu li)::before {
    border-bottom: none;
}
.footer-copyright .widget_nav_menu .menu-item a:hover, .footer-copyright .widget_nav_menu .menu-item a:focus {
    text-decoration: underline;
	color: var(--sp-secondary);
}
.footer-copyright p.no-widget-text a {
    color: #ffffff;
    display: inline-block;
}
.footer-copyright p {
    margin: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	cursor: pointer;
}