/*
Theme Name: Mukundra
Theme URI: https://www.nayrathemes.com/mukundra-free/
Author: Nayra Themes
Author URI: https://www.nayrathemes.com/
Description: Designed for hotels, resorts, and vacation rentals, this theme offers modern layouts to showcase rooms, amenities, and services. It includes booking forms, availability calendars, and gallery sections for a seamless user experience. Fully responsive and customizable, it ensures easy navigation across devices while supporting online reservations, helping hospitality businesses present their brand professionally and attract more guests. View Pro Demo: https://www.nayrathemes.com/demo/pro/mukundra/ and Details: https://www.nayrathemes.com/mukundra-pro/
Template: hotel-26
Version: 1.1
Tested up to: 7.0
Requires PHP: 5.6
Requires at least: 4.7
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mukundra
Slug: mukundra
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu,  custom-logo, featured-image-header, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog, photography, portfolio, editor-style, grid-layout, rtl-language-support

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/

/* == Breadcrumb === */
.breadcrumb-section {
    padding-top: 200px;
    padding-bottom: 115px;
}

/* == Slider === */
.slider-wrapper.home-6 .theme-content h3 {
    font-family: 'Dancing Script';
    text-transform: inherit;
}

.slider-wrapper.home-6 .main-slider .star-rating {
    margin-bottom: 0px;
}

.slider-wrapper.home-6 .theme-slider {
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
	margin-bottom: 40px;
}

.main-slider .item video, .main-slider .item iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
	position: absolute;
}



/* Rain */
.st-rain-wrapper {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.st-rain {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.st-rain.back {
    bottom: 60px;
    opacity: 0.5;
}

.st-rain .drop {
    position: absolute;
    bottom: 100%;
    width: 15px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}

@keyframes drop {
    0% {
        transform: translateY(0vh);
    }

    75% {
        transform: translateY(90vh);
    }

    100% {
        transform: translateY(90vh);
    }
}

.st-rain .stem {
    width: 3px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
    animation: stem 0.5s linear infinite;
}

@keyframes stem {
    0% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.st-rain .splat {
    width: 15px;
    height: 10px;
    opacity: 1;
    border-radius: 50%;
    transform: scale(0);
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    animation: splat 0.5s linear infinite;
}

@keyframes splat {
    0% {
        opacity: 1;
        transform: scale(0);
    }

    80% {
        opacity: 1;
        transform: scale(0);
    }

    90% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.st-cloud-wrapper {
    position: absolute;
    top: 0;
    /* width: 100%; */
    z-index: 1;
}

.st-cloud-wrapper img {
    width: clamp(150px, 25vw, 450px);
}

.animate-moveCloud {
    animation: moveCloud 25s linear infinite;
}

@keyframes moveCloud {

    0% {
        transform: translateX(-80%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translateX(40vw) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translateX(100vw) scale(0.8);
        opacity: 0.5;
    }
}

.st-orbit-lines {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40vw;
    aspect-ratio: 1 / 1;
    transform: translate(50%, -50%);
    z-index: 1;
}

.st-orbit-lines .orbit-1,
.st-orbit-lines .orbit-2,
.st-orbit-lines .orbit-3 {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in oklab, var(--sp-white) 30%, transparent);
    border-radius: 50%;
}

.st-orbit-lines .orbit-1 span,
.st-orbit-lines .orbit-2 span,
.st-orbit-lines .orbit-3 span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: var(--dark-1);
    width: clamp(6px, 1vw, 12px);
    height: clamp(6px, 1vw, 12px);
    box-shadow: var(--sp-shadow);
    transform: translate(-50%, -50%);
}

.st-orbit-lines .orbit-1 {
    animation: orbit1 10s linear infinite;
}

.st-orbit-lines .orbit-2 {
    animation: orbit2 13s linear infinite reverse;
}

.st-orbit-lines .orbit-3 {
    animation: orbit3 15s linear infinite;
}

@keyframes orbit1 {
    from {
        transform: scaleX(1.1) scaleY(1) rotate(0deg);
    }

    to {
        transform: scaleX(1.1) scaleY(1) rotate(360deg);
    }
}

@keyframes orbit2 {
    from {
        transform: scaleX(0.95) scaleY(1) rotate(0deg);
    }

    to {
        transform: scaleX(0.95) scaleY(1) rotate(360deg);
    }
}

@keyframes orbit3 {
    from {
        transform: scaleX(0.8) scaleY(1) rotate(0deg);
    }

    to {
        transform: scaleX(0.8) scaleY(1) rotate(360deg);
    }
}

@media (min-width: 992px) {
	/* Header Six */
    .header.header-six {
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        z-index: 9;
        width: 100%;
        margin: 0 auto;
    }

    .header.header-six .above-header,
    .header.header-six .navigator-wrapper {
        padding: 5px 0;
        border-bottom: 1px solid color-mix(in oklab, var(--sp-border-dark) 15%, transparent);
    }

    .header.header-six .navbar-area:not(.sticky-menu) .menubar .menu-wrap>li>a {
        color: var(--sp-white);
    }

    header.header-six .header-widget.header-dark {
        background-color: transparent;
    }

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

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

    .st-cloud-wrapper {
        top: 150px;
    }

    .slider-wrapper.home-6 .theme-slider div.theme-content {
        margin-top: 60px;
    }
}

/*===== 41. Destination Section  =====*/

.destination-section {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in oklch shorter hue, var(--sp-primary) 10%, var(--sp-secondary) 10%);
}

.destination-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 600;
    background-image: url("./assets/images/destination/Cloud-bg.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    pointer-events: none;
}

.destination-item {
    margin: 5px;
    box-shadow: var(--sp-shadow);
}

.destination-img img {
    border-radius: var(--sp-radius);
}

.destination-img {
    position: relative;
}

.destination-content {
    position: relative;
    padding: 12px;
    margin-top: -20px;
    border-radius: 10px;
    text-align: center;
    color: var(--sp-white);
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
}

.destination-item:hover .destination-content,
.destination-item:focus-within .destination-content {
    background-color: var(--sp-secondary);
}

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

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

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

.destination-item .discount-badge .badge {
    color: var(--sp-highlight);
    background-color: color-mix(in oklch shorter hue, var(--sp-highlight) 10%, #fff 80%);
}

.hot-air-balloon {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hot-air-balloon .balloon1,
.hot-air-balloon .balloon2 {
    position: absolute;
    width: 15vw;
    opacity: 0.4;
}

.hot-air-balloon .balloon1 {
    top: 18%;
    left: 0;
    animation: floatUpDown 15s linear infinite;
}

.hot-air-balloon .balloon2 {
    top: 15%;
    right: 0;
    animation: floatUpDown 8s linear infinite;
}

.destination-section .heading-default::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    width: 150%;
    z-index: -1;
    aspect-ratio: 220 / 20;
    background: url("./assets/images/destination/title-separator.png") no-repeat center;
    background-size: contain;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}
/*===== // =====*/

/*===== 42. Funfact Section =====*/
.funfact-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
}

.funfact-withvideo-section .funfact-item {
    border: none;
    display: flex;
    text-align: left;
}

.funfact-withvideo-section .funfact-img {
    width: 50px;
    height: 50px;
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 15px;
    flex-shrink: 0;
}

.funfact-withvideo-section .funfact-content .title {
    color: var(--sp-white);
    display: block;
    line-height: 1.1;
    margin-bottom: 5px;
}

.funfact-withvideo-section .funfact-content h5 {
    margin-bottom: 0;
    color: var(--sp-white);
}

.funfact-withvideo-section .funfact-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: color-mix(in oklab, var(--sp-primary) 25%, transparent);
}

.funfact-withvideo-section .video-center a {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    display: block;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-primary);
    background: var(--sp-white);
}

.funfact-withvideo-section .say-yes-box {
    position: absolute;
    top: 75px;
    left: 45px;
    padding: 55px;
    text-align: center;
    color: var(--sp-white);
    font-family: 'Dancing Script';
    transform: rotate(-25deg);
}

.funfact-withvideo-section .say-yes-box svg {
    fill: var(--sp-primary);
    width: 125%;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}

.funfact-withvideo-section .say-yes-box span {
    font-size: 150%;
    color: var(--sp-secondary);
}

.funfact-border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 10px solid;
    border-radius: var(--sp-radius);
    transform: translate(-50%, -50%);
    border-color: color-mix(in oklab, var(--sp-white) 20%, transparent);
}

.destination-section .heading-default::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    width: 150%;
    z-index: -1;
    aspect-ratio: 220 / 20;
    background: url("./assets/images/destination/title-separator.png") no-repeat center;
    background-size: contain;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	cursor: pointer;
}