/* video hero */
.hero-content {
   position: relative;
}

.hero-video-container {
   padding: 56.25% 0 0 0;
   position: relative;
   height: 100vh;
   width: 100%;
   overflow: hidden;
}

.happyintro-video {
   position: absolute;
   top: 0;
   left: 0;
   /*right:0;*/
   width: 100%;
   height: 100%;
}

.video-overlay-titles {
   width: 100%;
   z-index: 160;
   height: 100%;
   top: 0;
   bottom: 0;
   font-size: 1em;
}

.overflow-video-title {
   font-size: 4em;
   color: white;
   height: auto;
   line-height: 1.2;
   text-align: center;
}

.overflow-video-subtitle {
   font-size: 2em;
   color: white;
   height: auto;
   line-height: 1.2;
   text-align: center;
}

/* audio / video controls */
.controls {
   width: auto;
   z-index: 165;
   position: absolute;
   left: 10px;
   bottom: 10px;
   font-size: 4em;
   font-weight: 300;
}

.controlicons {
   width: 70px;
   height: 70px;
   color: var(--beige-color);
   display: flex;
   align-content: center;
   justify-content: center;
   align-items: center;
}

.controlicons span {
   font-size: 1.1em;
   font-weight: 200;
   color: var(--beige-color);
   margin: auto;
}

/* concept section */
.concept-content {
   background-color: var(--beige-color);
}

.concept-item {
   height: 600px;
   width: auto;
}

.concept-item-image,
.concept-item-matrixvideo {
   object-fit: cover;
   height: 100%;
   overflow: hidden;
}

.concept-description {
   max-width: 1100px;
}

.concept-description p {
   text-align: center;
   font-size: 1.3em;
   line-height: 1.5em;
   color: var(--graphite-color);
}

/* marquee section */
.marque-sec-container {
   background-color: var(--beige-color);
   color: var(--graphite-color);
   border-top: 2px solid var(--graphite-color);
   border-bottom: 2px solid #333;
}

.marquee-container {
   overflow: hidden;
   white-space: nowrap;
   width: 100%;
}

.marquee-ticker {
   width: 100%;
   display: flex;
   font-size: 2em !important;
   line-height: 1;
}

.marquee-ticker li {
   width: auto;
   font-size: 2em !important;
   line-height: 1;
}

.marquee-circle {
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background-color: var(--dark-color);
}


/* accommodation section */
.accommodation-content {
   background-color: var(--beige-color);
   height: auto;
}

.scroll-animation-section {
   background-color: var(--beige-color);
}

/* GSAP Custom Styles for the Animation */
/**/
/**/

/* The section that will be pinned and animated */
#scroll-animation-section {
   background: var(--beige-color);
   color: white;
   overflow: hidden;
}

.animation-box {
   position: relative;
   width: calc(100% - 40px);
   height: calc(100vh - 40px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   overflow: hidden;
}

/* General styles for animated divs */
.animated-div {
   height: 100%;
   border-radius: 20px !important;
   transition: all 0.3s ease;
   position: absolute;
   width: 49.5%;
   overflow: hidden;
}

.animated-div>.card {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white-color);
   border: 0;
   border-radius: 20px;
}

/* Custom colored card classes for visibility */
.card-violet {
   background-color: var(--lightgrey-color) !important;
}

.card-red {
   background-color: var(--lightgrey-color) !important;
}

.card-teal {
   background-color: var(--lightgrey-color) !important;
}

.card-blue {
   background-color: var(--lightgrey-color) !important;
}

.card-orange {
   background-color: var(--lightgrey-color) !important;
}

.card-lime {
   background-color: var(--lightgrey-color) !important;
}

/* --- STAGE 1 ELEMENTS --- */
/* d1: Starts on LEFT HALF (Violet) */
#d1 {
   background-color: var(--lightgrey-color);
   border-radius: 20px;
   left: 0.5%;
   right: auto;
   z-index: 9;
}

/* d2-d3 Container: Starts on RIGHT HALF (Red/Teal wipe) */
#d2-d3-container {
   width: 49.5%;
   height: calc(100% - 0px);
   position: absolute;
   right: 0.5%;
   left: auto;
   overflow: hidden;
   border-radius: 20px;
   z-index: 15;
}

#d2,
#d3 {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

#d2 {
   background-color: var(--lightgrey-color);
   z-index: 1;
}

#d3 {
   background-color: var(--lightgrey-color);
   z-index: 2;
   transform: translateY(-100%);
}

/* --- STAGE 2 ELEMENTS --- */
/* d4-d5 Container: Slides up on RIGHT HALF, becomes the BASE for the next wipe */
#d4-d5-container {
   width: 49.5%;
   height: calc(100% - 0px);
   position: absolute;
   right: 0.5%;
   left: auto;
   overflow: hidden;
   border-radius: 20px;
   z-index: 14;
}

#d4,
#d5 {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

#d4 {
   background-color: var(--lightgrey-color);
   z-index: 1;
}

#d5 {
   background-color: var(--lightgrey-color);
   z-index: 2;
   transform: translateY(-100%);
}

/* --- STAGE 3 ELEMENTS --- */
/* d6: New single element (Lime) that appears on the RIGHT HALF */
#d6 {
   background-color: var(--lightgrey-color);
   left: auto;
   right: 0.5%;
   z-index: 10;
}

/* END of GSAP Custom Styles for the Animation */
/* room details */
.roomimage {
   object-fit: cover;
   height: 100%;
   overflow: hidden;
   transition: all 0.3s linear;
}

.roomdetails-overlay {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), no-repeat top center;
   background-size: cover;
   color: var(--beige-color);
}

.roomstitles,
.roomssubtitles {
   color: var(--beige-color);
   font-size: 2.2em !important;
   line-height: 1;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.roomdetails {
   background-color: transparent !important;
   font-size: 1.2em !important;
}

a.roomseemore {
   color: var(--beige-color);
   font-size: 1.2em;
   text-transform: uppercase;
   margin-left: 20px;
}

a.roomseemore:hover {
   color: var(--beige-color);
}

/*.rooms-featured-card:hover .roomimage { transform: scale(1.05); transition: all 0.3s linear; }*/
.accommodation-readmore-section {
   background-color: var(--beige-color);
   height: auto;
}


/* gastronomy section */
.gastronomy-container {
   background-color: var(--beige-color);
   color: #2f4f68;
   border-top: 1px solid var(--graphite-color);
}

.gastronomy-description {
   max-width: 1100px;
}

.gastronomy-description p {
   font-size: 1.3em;
   line-height: 1.5em;
   color: var(--graphite-color);
}

#parallax-stack {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
}

.panel {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   background-color: transparent;
}

.p1 {
   z-index: 1;
}

.p2 {
   z-index: 2;
   transform: translateY(100%);
}

.p3 {
   z-index: 3;
   transform: translateY(100%);
}

.p4 {
   z-index: 4;
   transform: translateY(100%);
}

.content {
   background-color: var(--beige-color);
}

.panel .content .titles {
   color: var(--darkblue-color);
   line-height: 1;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.panel .content .subtitles {
   color: var(--darkblue-color);
   line-height: 1;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-size: 1.2em;
}

.panel .content p {
   text-align: left;
   font-size: 1.3em;
   line-height: 1.5em;
   color: var(--graphite-color);
   width: 70%;
}


/* wellness section */
.wellness-heroimages-container {
   background-color: var(--lightblue-color);
   color: #2f4f68;
   /* color: var(--darkblue-color); */
}

.wellness-logo-image {
   width: 420px;
   z-index: 1;
   position: absolute;
   bottom: 50%;
   left: calc(50% - 220px);
   top: 30%;
   right: calc(50% - 220px);
}

.wellness-hero-image {
   /*height:1700px;*/
   width: 100%;
}

/* .wellness-hero-image { opacity: 0.9; transition: opacity 0.5s ease; } */
/* .wellness-hero-image:hover { opacity: 1; } */
.wellness-container {
   background-color: var(--lightblue-color);
   color: #2f4f68;
}

/* .wellness-description { max-width:1100px; } */
.wellness-description p {
   text-align: justify;
   font-size: 1.3em;
   line-height: 1.5em;
   color: var(--graphite-color);
}

.quotetitles {
   color: var(--footerblue-color) !important;
   text-transform: none !important;
   line-height: 1.5;
   letter-spacing: 3px !important;
   font-size: 3.5em !important;
}

.quotetitles.quotetitles-big {
   font-size: 3.9em !important;
}


/* location section */
.location-container {
   background-color: var(--beige-color);
}

.sticky-content {
   position: -webkit-sticky;
   position: sticky;
   top: 100px;
   align-self: flex-start;
}

/* .gallery-wrapper img { opacity: 0.9; transition: opacity 0.5s ease; } */
/* .gallery-wrapper img:hover { opacity: 1; } */
.location-description p {
   text-align: justify;
   font-size: 1.3em;
   line-height: 1.5em;
   color: var(--graphite-color);
}


/* experience section */
.experience-container {
   background-color: var(--beige-color);
   height: auto;
}

.experience-card {
   color: var(--graphite-color);
   overflow: hidden;
   transition: all 0.3s ease-out;
}

.experience-card img {
   transition: all 0.3s ease-out;
}

/*.experience-card:hover img { transform: scale(1.02); }*/
.experience-card h3,
.experience-card p {
   color: var(--graphite-color);
}

/* Hover underline animation */
.title-underline {
   position: relative;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-items: center;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   transition: all 0.5s ease;
   width: auto;
}

/* .title-underline::before { content: ' →'; opacity: 0; position:absolute; right: -10px; transition: all 0.3s ease; } */
/* .title-underline:hover::before { opacity: 1; right: -18px; } */
/* The animated border */
.title-underline::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: currentColor;
   transform: scaleX(0);
   transform-origin: bottom right;
   transition: all 0.5s ease-out;
}

.experience-card:hover .title-underline::after {
   transform: scaleX(1);
   transform-origin: bottom left;
}

/* gallery section */
.gallery-content {
   background-color: var(--beige-color);
}

.index-swiper {
   width: 100%;
   height: 750px;
   padding: 20px 0;
}

/* 1. Ensure the timing is linear for the marquee effect */
.index-swiper .swiper-wrapper {
   transition-timing-function: linear !important;
}

/* 2. When the swiper is hovered, we "freeze" the wrapper */
/* .swiper:hover .swiper-wrapper { transition-duration: 0ms !important; transform: translate3d(attr(data-x), 0, 0); } */
/* 3. Ensure slides don't shrink and respect their unique content widths */
.index-swiper .swiper-wrapper .swiper-slide {
   flex-shrink: 0;
   width: auto;
   height: 750px;
}

.index-swiper .swiper-wrapper .swiper-slide img {
   height: 100%;
   width: auto;
   /* Maintains aspect ratio */
   display: block;
}


/* offers section */
.offers-content {
   background-color: var(--white-color);
}

.offers-content>.titles {
   font-size: 4.5em;
}


/* footer section */
#parallax-footer {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   background-color: var(--footerblue-color);
}

.footerpanel {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   background-color: transparent;
}

.videofooter {
   z-index: 1;
}

.sidefooter {
   z-index: 2;
   transform: translateY(100%);
}

.footercontent {
   background-color: transparent;
   color: #f5f5f5;
}

.footerslide-content {
   background-color: var(--footerblue-color);
   color: var(--beige-color);
}