/* -- Hero Video Section -- */
.pagehero-content { position:relative; }
.pagehero-image-container { padding:0; position:relative; height:100vh; width:100%; overflow:hidden; }
.happyintro-image { position:absolute; top:0; left:0; width:100%; min-height:100%; }

.image-overlay-titles { width:100%; z-index:160;  height:auto; bottom:40px; font-size:1em; }
.overflow-image-title { font-size:3.5em; color: white; height: auto; line-height: 1.2; text-align: center; }            
.overflow-image-subtitle { font-size:3em; color: white; height: auto; line-height: 1.2; text-align: center; }

.pagehero-video-container { padding:56.25% 0 0 0; position:relative; height:100vh; }
.happyintro-video { position:absolute; top:0; left: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; }  

/* -- Marquee -- */
.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); }



/* -- QUICK Links // p -> color: #2f4f68; -- */
.quicklinks-content { background-color: var(--white-color); }
.quicklinks-container {  background-color: var(--beige-color); }
.quicklinks-swiper {  width: 100%; height: 700px; padding: 20px 0; }
/* 1. Ensure the timing is linear for the marquee effect */
.quicklinks-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 */
.quicklinks-swiper .swiper-slide { flex-shrink: 0; width: auto; height:700px; }
.quicklinks-swiper .swiper-slide img { height: 600px; width: auto; /* Maintains aspect ratio */ display: block; }

/* -- offERS // p -> color: #2f4f68; -- */
.spacer-content { background-color: var(--white-color); }


/* -- our concept // p -> color: #2f4f68; -- */
.concept-content{ background-color: var(--beige-color); }
.concept-item { height:auto;  }
.concept-item-image, .concept-item-matrixvideo { /*object-fit: cover;*/ width:100%; height:auto; overflow:hidden; }
.concept-description { max-width:1100px; }
.concept-description p { text-align:left; font-size: 1.3em; line-height: 1.5em; color:var(--graphite-color); }
.quotetitles { color: var(--graphite-color) !important; text-transform: none !important; line-height: 1.5; letter-spacing: 3px !important; font-size: 4.2em !important; }
.quotetitles.quotetitles-big { font-size: 4.5em !important; text-transform: uppercase !important; }