/* Plan Itinerary Widget CSS */

.hero.section-slider {
    --hero-card-width: 280px;
    --hero-card-height: 400px;
    --hero-gap: 15px;
    --hero-center-gap: 400px;
}

.hero {
    display: block;
    position: relative;
    min-height: 50vh;
    padding: 8rem 0 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow-x: hidden;
}

.hero.section-slider .hero__slider {
    height: 100%;
}

.hero.section-slider .hero-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hero-card-width);
    height: var(--hero-card-height);
    overflow: hidden;
    background: #ececf1;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.6s ease,
        opacity 0.6s ease,
        box-shadow 0.6s ease;
}

.hero.section-slider .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero.section-slider .hero-slide--L2 {
    opacity: 1;
    z-index: 1;
    transform: translate(
        calc(-50% - (var(--hero-center-gap) + var(--hero-card-width) + var(--hero-gap))),
        -50%
    );
}

.hero.section-slider .hero-slide--L1 {
    opacity: 1;
    z-index: 2;
    transform: translate(calc(-50% - var(--hero-center-gap)), -50%);
}

.hero.section-slider .hero-slide--R2 {
    opacity: 1;
    z-index: 1;
    transform: translate(
        calc(-50% + (var(--hero-center-gap) + var(--hero-card-width) + var(--hero-gap))),
        -50%
    );
}

.hero.section-slider .hero-slide--R1 {
    opacity: 1;
    z-index: 3;
    transform: translate(calc(-45% + var(--hero-center-gap)), -52%) scale(1.2)
        rotate(4deg);
    box-shadow: 0 45px 85px rgba(0, 0, 0, 0.35);
}

.hero-slide:not(.hero-slide--L2):not(.hero-slide--L1):not(.hero-slide--R1):not(
        .hero-slide--R2
    ) {
    opacity: 0;
}

.hero.section-slider .hero__content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 360px;
}

.hero.section-slider .hero__eyebrow {
    font-size: 19px;
	font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hero.section-slider .hero__title {
    font-size: 52px;
    line-height: 1.05;
    /*max-width: 250px;*/
    /*margin: 0 auto 25px!important;*/
	padding-bottom: 25px;
}

.hero.section-slider .hero__text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28px;
    /*max-width: 300px;*/
}

.hero.section-slider .hero__btn {
    border: none;
    color: #000;
    background-color: transparent;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
/*     transition: all ease-in-out 0.3s; */
    cursor: default;
}

/* .hero.section-slider .hero__btn:hover,
.hero.section-slider .hero__btn:focus {
    color: #ffaf02;
} */

.hero.section-slider .hero__btn--with-heart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero.section-slider .hero__btn-heart {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.hero.section-slider .hero__btn-heart svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    display: block;
}
.hero.section-slider svg {
    .st0 {
        fill: none;
    }

    .st1 {
        clip-path: url(#clippath-2);
    }

    .st2 {
        fill: #fff;
    }
}

.hero.section-slider .hero__dots {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: auto;
}

.hero.section-slider .hero__dots .hero__dot {
    padding:0;
}

.hero__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc !important;
    border: 0 !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero__dot--active {
    background: #ffaf02 !important;
}

.hero.section-slider .slide-like {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 35px;
    height: 35px;
    border: 0;
    background-color: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 5;
    &::before {
        content: "";
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 35px;
        background-image: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8'%3F><svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 37.78 37.78'><!-- Generator: Adobe Illustrator 29.8.4, SVG Export Plug-In . SVG Version: 2.1.1 Build 6) --><defs><style> .st0 { fill: none; } .st1 { clip-path: url(%23clippath-2); } .st2 { fill: %23ffffff; } </style><clipPath id='clippath'><rect class='st0' width='37.78' height='37.78'/></clipPath><clipPath id='clippath-2'><rect class='st0' x='7.18' y='10.03' width='23.41' height='18.49'/></clipPath></defs><path class='st2' d='M37.67,16.83c-.47-4.27-2.38-8.25-5.42-11.29h0c-7.37-7.38-19.33-7.39-26.71-.02C-.67,11.72-1.79,21.38,2.84,28.84c.1.18.15.38.14.58-.03.21-.09.4-.19.59-1.19,1.73-.76,4.09.97,5.29,1.33.92,3.08.9,4.39-.05.16-.09.33-.16.51-.21.17-.03.35-.01.51.05,2.93,1.77,6.29,2.71,9.71,2.7.7,0,1.39-.04,2.08-.11,10.37-1.14,17.85-10.47,16.72-20.84ZM34.9,20.26c-.6,7.56-6.72,13.86-14.25,14.66-3.68.39-7.26-.43-10.34-2.39-.81-.51-1.21-.66-2.12-.66-.96-.05-2.27.62-2.53.29-.32-.39,1.28-2.26-.26-4.49-2.09-3.02-2.86-6.67-2.49-10.37.76-7.59,7.07-13.77,14.68-14.36,4.72-.37,9.33,1.33,12.66,4.66,3.33,3.33,5.02,7.94,4.65,12.66Z'/><g id='Group_125'><g class='st1'><g id='Group_123'><path id='Path_52' class='st2' d='M29.09,12.18c-2.29-2.62-6.27-2.89-8.89-.6-.11.09-.21.19-.31.29l-.97.98-.98-.98c-2.46-2.46-6.45-2.46-8.91,0s-2.46,6.45,0,8.91l.98.98,5.24,5.23c2.03,2.03,5.31,2.03,7.34,0l5.24-5.24.82-.82c2.41-2.35,2.61-6.17.45-8.76'/></g></g></g></svg>");
    }
}

.hero.section-slider .hero-slide .slide-like.liked::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='37.778' height='37.777' viewBox='0 0 37.778 37.777'><defs><clipPath id='clip-path'><rect width='37.778' height='37.777' fill='none'/></clipPath><clipPath id='clip-path-2'><rect id='Rectangle_67' data-name='Rectangle 67' width='37.778' height='37.777' fill='%23ffaf02'/></clipPath><clipPath id='clip-path-3'><rect id='Rectangle_68' data-name='Rectangle 68' width='23.412' height='18.491' fill='none'/></clipPath></defs><g id='Repeat_Grid_1' data-name='Repeat Grid 1' clip-path='url(%23clip-path)'><g id='Group_126' data-name='Group 126' transform='translate(-1385 -2486.223)'><g id='Group_122' data-name='Group 122' transform='translate(1385 2486.223)'><g id='Group_121' data-name='Group 121' transform='translate(0 0)' clip-path='url(%23clip-path-2)'><path id='Path_51' data-name='Path 51' d='M32.252,5.537a18.887,18.887,0,0,0-29.416,23.3,1.053,1.053,0,0,1,.135.577A1.626,1.626,0,0,1,2.778,30a3.8,3.8,0,0,0,5.357,5.236,2.22,2.22,0,0,1,.51-.214.917.917,0,0,1,.512.055,18.683,18.683,0,0,0,9.714,2.7,19.68,19.68,0,0,0,2.084-.111,18.89,18.89,0,0,0,11.3-32.13' transform='translate(0 0)' fill='%23ffaf02'/></g></g><g id='Group_125' data-name='Group 125' transform='translate(1392.184 2496.248)'><g id='Group_123' data-name='Group 123' transform='translate(0 0)' clip-path='url(%23clip-path-3)'><path id='Path_52' data-name='Path 52' d='M21.906,2.154a6.3,6.3,0,0,0-9.2-.312l-.973.98-.98-.98a6.3,6.3,0,0,0-8.913,8.913l.98.98L8.057,16.97a5.192,5.192,0,0,0,7.342,0l5.242-5.242.818-.818a6.448,6.448,0,0,0,.447-8.755' transform='translate(0 0)' fill='%23ffffff'/></g></g></g></g></svg>");
}

.hero.section-slider .hero-slide--mobile-only {
    display: none;
}

.hero.section-slider .hero__swiper-dots .button-text {
    display: none;
}
.elementor-widget-button.button-text .elementor-button:hover {
    background-color: #000;
	border-color: transparent;
}
.hero.section-slider .elementor-widget-button.button-text .elementor-button:focus {
	background-color: #FFAF02;
	color: #fff;
}

/* ===========================
         MOBILE
   =========================== */
@media (max-width: 1366px) {
	.hero.section-slider {
		--hero-center-gap: 320px;
		--hero-card-height: 350px;
		--hero-card-width: 240px;
	}
	.hero.section-slider .hero__content {
		width: 100%;
    	max-width: 280px;
	}
	    
}

@media (max-width: 1024px) {
	.hero.section-slider {
		--hero-card-width: 100%;
		--hero-card-height: 100%;
		--hero-gap: 16px;
		--hero-center-gap: 0;
	}

	.hero.section-slider {
		padding: 0;
		overflow-x: visible;
		max-width: 360px;
		margin: 0 auto;
		min-height: 500px;
	}

	.hero.section-slider .hero__content .hero__content_card-discover {
		display: none;
	}

	.hero.section-slider .hero-slide {
		position: absolute;
		inset: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translateY(10px);
		opacity: 0;
		display: none;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
		transition: opacity 420ms ease, transform 420ms ease;
		will-change: opacity, transform;
	}

	.hero.section-slider .hero-slide .hero-slide--active {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.hero.section-slider .hero-slide .slide-like::before {
		background-repeat: no-repeat;
		background-position: center;
		background-size: 35px;
	}

	.hero.section-slider .hero-slide--mobile-only {
		display: none;
		background: transparent;
		box-shadow: none;
	}

	.hero.section-slider .hero-slide--active {
		display: block;
		opacity: 1 !important;
	}

	.hero.section-slider .hero-slide--mobile-only .hero__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
		width: 80%;
		height: 100%;
		margin: 0 auto;
	}

	.hero.section-slider .hero-slide img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.hero.section-slider .hero__swiper-dots {
		position: relative;
		bottom: -20rem;
	}

	.hero.section-slider .hero__dots {
		position: relative;
		margin-top: 1rem;
		justify-content: center;
	}
}

@media (min-width: 2300px) {
	.hero.section-slider {
		--hero-card-width: 470px;
        --hero-card-height: 660px;
        --hero-gap: 15px;
        --hero-center-gap: 540px;
	}
}
