/* -------------------- SLIDE CONTAINERS -------------------- */
.slides-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
}

.slide {
    width: 100vw;
    position: relative;
    max-width: 100vw;
    overflow: hidden;
    height: 100vh;
}

/* -------------------- SLIDE 1 GRIDS -------------------- */
.slide-1-grid-desktop {
    display: grid;
    grid-template-columns: 5% 10% 5% 60% 5% 10% 5%;
    grid-template-rows: 5% 10% 30% 10% 30% 10% 5%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.slide-1-grid-mobile {
    display: grid;
    grid-template-columns: 5% 10% 5% 60% 5% 10% 5%;
    grid-template-rows: 5% 10% 30% 10% 30% 10% 5%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Grid cells are empty containers, no styling */
.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

/* Slide 1 desktop specific cell spans */
.s1d-2-2-3 {
    grid-column: 2 / span 2;
    grid-row: 2;
}

.s1d-2-5-6 {
    grid-column: 5 / span 2;
    grid-row: 2;
}

.s1d-4-1-7 {
    grid-column: 1 / span 7;
    grid-row: 4;
}

/* Slide 1 mobile specific cell spans */
.s1m-2-4 {
    grid-column: 4;
    grid-row: 2;
}

.s1m-4-1-7 {
    grid-column: 1 / span 7;
    grid-row: 4;
}

.s1m-6-4 {
    grid-column: 4;
    grid-row: 6;
}

/* All other slide 1 grid cells are single cells, no need to define each individually */

/* -------------------- SLIDE 2 GRIDS -------------------- */
.big-screen-layout {
    display: grid;
    grid-template-columns: 5% 30% 5% 55% 5%;
    grid-template-rows: 15% 25% 25% 20% 15%;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.small-screen-layout {
    display: grid;
    grid-template-columns: 5% 5% 80% 5% 5%;
    grid-template-rows: 5% 50% 5% 5% 20% 10% 5%;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    box-sizing: border-box;
}

/* Big screen cell placements */
.bs-1-1 { grid-area: 1 / 1 / 2 / 2; }
.bs-1-2 { grid-area: 1 / 2 / 2 / 3; }
.bs-1-3 { grid-area: 1 / 3 / 2 / 4; }
.bs-1-4 { grid-area: 1 / 4 / 2 / 5; }
.bs-1-5 { grid-area: 1 / 5 / 2 / 6; }

.bs-2-1 { grid-area: 2 / 1 / 3 / 2; }
.bs-2-2 { grid-area: 2 / 2 / 3 / 3; }
.bs-2-3 { grid-area: 2 / 3 / 3 / 4; }
.bs-2-4 { grid-area: 2 / 4 / 3 / 5; }
.bs-2-5 { grid-area: 2 / 5 / 3 / 6; }

.bs-3-1 { grid-area: 3 / 1 / 4 / 2; }
.bs-3-2 { grid-area: 3 / 2 / 4 / 3; }
.bs-3-3 { grid-area: 3 / 3 / 4 / 4; }
.bs-3-4 { grid-area: 3 / 4 / 4 / 5; }
.bs-3-5 { grid-area: 3 / 5 / 4 / 6; }

.bs-4-1 { grid-area: 4 / 1 / 5 / 2; }
.bs-4-2 { grid-area: 4 / 2 / 5 / 3; }
.bs-4-3 { grid-area: 4 / 3 / 5 / 4; }
.bs-4-4 { grid-area: 4 / 4 / 5 / 5; }
.bs-4-5 { grid-area: 4 / 5 / 5 / 6; }

.bs-5-1 { grid-area: 5 / 1 / 6 / 2; }
.bs-5-2 { grid-area: 5 / 2 / 6 / 3; }
.bs-5-3 { grid-area: 5 / 3 / 6 / 4; }
.bs-5-4 { grid-area: 5 / 4 / 6 / 5; }
.bs-5-5 { grid-area: 5 / 5 / 6 / 6; }

.bs-carousel-combined {
    grid-area: 2 / 4 / 5 / 5;
}

.bs-icons-aligned {
    grid-area: 4 / 2 / 5 / 3;
}

/* Small screen cell placements */
.ss-1-1 { grid-area: 1 / 1 / 2 / 2; }
.ss-1-2 { grid-area: 1 / 2 / 2 / 3; }
.ss-1-3 { grid-area: 1 / 3 / 2 / 4; }
.ss-1-4 { grid-area: 1 / 4 / 2 / 5; }
.ss-1-5 { grid-area: 1 / 5 / 2 / 6; }

.ss-2-1 { grid-area: 2 / 1 / 3 / 2; }
.ss-2-2 { grid-area: 2 / 2 / 3 / 3; }
.ss-2-3 { grid-area: 2 / 3 / 3 / 4; }
.ss-2-4 { grid-area: 2 / 4 / 3 / 5; }
.ss-2-5 { grid-area: 2 / 5 / 3 / 6; }

.ss-3-1 { grid-area: 3 / 1 / 4 / 2; }
.ss-3-2 { grid-area: 3 / 2 / 3 / 3; }
.ss-3-3 { grid-area: 3 / 3 / 3 / 4; }
.ss-3-4 { grid-area: 3 / 4 / 3 / 5; }
.ss-3-5 { grid-area: 3 / 5 / 3 / 6; }

.ss-4-1 { grid-area: 4 / 1 / 5 / 2; }
.ss-4-2 { grid-area: 4 / 2 / 5 / 3; }
.ss-4-3 { grid-area: 4 / 3 / 5 / 4; }
.ss-4-4 { grid-area: 4 / 4 / 5 / 5; }
.ss-4-5 { grid-area: 4 / 5 / 5 / 6; }

.ss-5-1 { grid-area: 5 / 1 / 6 / 2; }
.ss-5-2 { grid-area: 5 / 2 / 6 / 3; }
.ss-5-3 { grid-area: 5 / 3 / 6 / 4; }
.ss-5-4 { grid-area: 5 / 4 / 6 / 5; }
.ss-5-5 { grid-area: 5 / 5 / 6 / 6; }

.ss-6-1 { grid-area: 6 / 1 / 7 / 2; }
.ss-6-2 { grid-area: 6 / 2 / 7 / 3; }
.ss-6-3 { grid-area: 6 / 3 / 7 / 4; }
.ss-6-4 { grid-area: 6 / 4 / 7 / 5; }
.ss-6-5 { grid-area: 6 / 5 / 7 / 6; }

.ss-7-1 { grid-area: 7 / 1 / 8 / 2; }
.ss-7-2 { grid-area: 7 / 2 / 8 / 3; }
.ss-7-3 { grid-area: 7 / 3 / 8 / 4; }
.ss-7-4 { grid-area: 7 / 4 / 8 / 5; }
.ss-7-5 { grid-area: 7 / 5 / 8 / 6; }

.ss-carousel {
    grid-area: 2 / 3 / 3 / 4;
}

.ss-icons-aligned {
    grid-area: 6 / 3 / 7 / 4;
}

.ss-arrow-left {
    grid-area: 5 / 2 / 6 / 3;
}

.ss-arrow-right {
    grid-area: 5 / 4 / 6 / 5;
}










/* -------------------- SLIDE 3 GRID -------------------- */
#slide-3 {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 10% 20% 0% 55% 10% 5%;
    width: 100vw;
    max-width: 100vw;
}

.s3-1-1 { grid-area: 1 / 1 / 2 / 2; }
.s3-2-2 { grid-area: 2 / 2 / 3 / 3; }
.s3-3-1 { grid-area: 3 / 1 / 4 / 2; }
.s3-4-2 { grid-area: 4 / 2 / 5 / 3; }
.s3-5-1 { grid-area: 5 / 1 / 6 / 2; }
.s3-6-1 { grid-area: 6 / 1 / 7 / 2; }
.s3-1-3 { grid-area: 1 / 3 / 2 / 4; }
.s3-3-3 { grid-area: 3 / 3 / 4 / 4; }
.s3-5-3 { grid-area: 5 / 3 / 6 / 4; }
.s3-6-3 { grid-area: 6 / 3 / 7 / 4; }

/* All other slide 3 cells are empty placeholders */

/* Base: desktop-first approach */
.slide-1-grid-desktop,
.big-screen-layout {
    display: grid;
}

.slide-1-grid-mobile,
.small-screen-layout {
    display: none;
}

/* Mobile breakpoint */
@media screen and (max-width: 1024px) {
    .slide-1-grid-desktop,
    .big-screen-layout {
        display: none;
    }
    .slide-1-grid-mobile,
    .small-screen-layout {
        display: grid;
    }

    /* Slide 3 mobile rows */
    #slide-3 {
        grid-template-rows: 10% 20% 0% 55% 10% 5%;
    }
}

/* Desktop breakpoint (redundant but keeps clarity) */
@media screen and (min-width: 1025px) {
    .slide-1-grid-desktop,
    .big-screen-layout {
        display: grid;
    }
    .slide-1-grid-mobile,
    .small-screen-layout {
        display: none;
    }

    /* Slide 3 desktop rows */
    #slide-3 {
        grid-template-rows: 10% 20% 0% 55% 10% 5%;
    }
}








/* -------------------- SLIDE 1 -------------------- */







/* -------------------- PRELOADER -------------------- */
@font-face {
    font-family: 'BebasNeue';
    src: url('BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.preloader-active {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0b0a0a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: contentFadeIn 0.6s ease-out forwards;
}

.preloader-logo {
    object-fit: contain;
    animation: logoScale 1.5s ease-out forwards;
}

.preloader-text {
    font-family: 'BebasNeue', sans-serif;
    color: #eae7df;
    text-transform: uppercase;
    font-weight: 400;
    opacity: 0;
    animation: textFadeIn 1s ease-out 2s forwards;
}

/* Keyframes */
@keyframes contentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes logoScale {
    0% { transform: scale(1); }
    100% { transform: scale(2.25); }
}

@keyframes textFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Desktop >1024px */
@media screen and (min-width: 1025px) {
    .preloader-logo {
        width: 70px;
        height: 70px;
    }
    .preloader-text {
        font-size: 45px;
        letter-spacing: 3px;
    }
    .preloader-content {
        gap: 20px; 
    }
}

/* Tablet 701px – 1024px */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .preloader-logo {
        width: 60px;
        height: 60px;
    }
    .preloader-text {
        font-size: 40px;
        letter-spacing: 2px;
    }
    .preloader-content {
        gap: 16px;
    }
}

/* Mobile ≤700px */
@media screen and (max-width: 700px) {
    .preloader-logo {
        width: 50px;
        height: 50px;
    }
    .preloader-text {
        font-size: 30px;
        letter-spacing: 1.5px;
    }
    .preloader-content {
        gap: 14px;
    }
}


/* -------------------- SLIDE 1 LOGO TARGET (UPPER LEFT) -------------------- */
.logo-target {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-target-logo {
    object-fit: contain;
}

.logo-target-text {
    font-family: 'BebasNeue', sans-serif;
    color: #eae7df;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
}

/* Desktop >1024px */
@media screen and (min-width: 1025px) {
    .logo-target-logo {
        width: auto;  
        height: 126px;
    }
    .logo-target-text {
        font-size: 36px; 
        letter-spacing: 2.4px; 
    }
    .logo-target-content {
        gap: 16px; 
    }
}

/* Tablet 701px – 1024px */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .logo-target-logo {
        width: auto; 
        height: 108px;
    }
    .logo-target-text {
        font-size: 32px; 
        letter-spacing: 1.6px; 
    }
    .logo-target-content {
        gap: 13px; 
    }
}

/* Mobile ≤700px */
@media screen and (max-width: 700px) {
    .logo-target-logo {
        width: auto;
        height: 90px;
    }
    .logo-target-text {
        font-size: 24px;
        letter-spacing: 1.2px; 
    }
    .logo-target-content {
        gap: 11px; 
    }
}

.slide-1-grid-desktop .s1d-2-2-3,
.slide-1-grid-mobile .s1m-2-4 {
    overflow: visible;
}








/* -------------------- INTERESTED BUTTON -------------------- */
.interested-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interested-btn {
    background: transparent;
    border: none;
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 400;
    padding: 8px 16px;
}

/* Desktop >1024px */
@media screen and (min-width: 1025px) {
    .interested-btn {
        font-size: 29px; 
        letter-spacing: 1.9px;
    }
}

/* Tablet 701px – 1024px */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .interested-btn {
        font-size: 26px; 
        letter-spacing: 1.3px; 
    }
}

/* Mobile ≤700px */
@media screen and (max-width: 700px) {
    .interested-btn {
        font-size: 19px; 
        letter-spacing: 1px; 
    }
}

/* -------------------- POPUP -------------------- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}
.interested-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: clamp(300px, 80vw, 800px);
    height: clamp(400px, 80vh, 600px);
    background: #0b0a0a;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s, visibility 0.4s;
    overflow: hidden;
}
.interested-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.popup-content {
    width: 100%;
    height: 100%;
    padding: 40px 20px 20px;
    color: #eae7df;
    position: relative;
    display: flex;
    flex-direction: column;
}
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #eae7df;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, transform 0.3s;
}
.popup-close:hover {
    color: #fff;
    transform: scale(1.1);
}
.popup-main-area {
    position: relative;
    width: 100%;
    height: 100%;
}
.popup-box {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.popup-title-box { top: 25%; height: 15%; }
.popup-subtitle-box { top: 40%; height: 10%; }
.popup-form-box { top: 60%; height: 120px; }
.popup-title {
    font-family: 'BebasNeue', sans-serif;
    font-size: 36px;
    color: #eae7df;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
}
.popup-subtitle {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: rgba(234,231,223,0.8);
    letter-spacing: 1px;
}
.popup-form {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.form-group { margin-bottom: 20px; width: 100%; }
.popup-form input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: #eae7df;
    font-family: Arial, sans-serif;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
}
.popup-form input:focus {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
}
.popup-form input::placeholder { color: rgba(255,255,255,0.4); }
.checkbox-group { margin-top: 10px; margin-bottom: 10px; }
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(234,231,223,0.7);
    text-align: left;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
    cursor: pointer;
}
.checkbox-text a {
    color: #eae7df;
    text-decoration: underline;
}
.checkbox-text a:hover { color: #fff; }
.popup-bottom-area {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    height: 220px;
}
#errorBox1, #errorBox2 {
    position: absolute;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #f00;
    visibility: hidden;
}
#errorBox2 { bottom: 10px; }
#errorBox1 { bottom: 40px; }
#errorBox1.has-error, #errorBox2.has-error {
    visibility: visible;
}
#popupButtonBox {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.send-btn {
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    max-width: 160px;
}
.send-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}
@media (max-width: 768px) {
    .popup-title { font-size: 28px; }
    .popup-subtitle { font-size: 14px; }
    .popup-form { max-width: 280px; }
    .popup-form input { padding: 12px 14px; }
    .send-btn { max-width: 140px; }
}
@media (max-width: 480px) {
    .popup-title { font-size: 24px; }
    .popup-subtitle { font-size: 13px; }
    .popup-form { max-width: 252px; }
}

/* -------------------- MARQUEE -------------------- */
.s1d-4-1-7,
.s1m-4-1-7 {
    background-color: rgba(11, 10, 10, 0.85);
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

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

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    will-change: transform;
}

.marquee-content {
    flex-shrink: 0;
    font-size: inherit;
    letter-spacing: inherit;
}

/* Fade out when popup opens */
.s1d-4-1-7.fade-out,
.s1m-4-1-7.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s;
}

/* Gradient overlays (fade edges) */
.s1d-4-1-7::before,
.s1d-4-1-7::after,
.s1m-4-1-7::before,
.s1m-4-1-7::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.s1d-4-1-7::before,
.s1m-4-1-7::before {
    left: 0;
    background: linear-gradient(to right, rgba(11,10,10,0.85) 0%, transparent 100%);
}

.s1d-4-1-7::after,
.s1m-4-1-7::after {
    right: 0;
    background: linear-gradient(to left, rgba(11,10,10,0.85) 0%, transparent 100%);
}

/* Responsive font sizes */
@media screen and (min-width: 1025px) {
    .s1d-4-1-7,
    .s1m-4-1-7 {
        font-size: 57.6px;
        letter-spacing: 3.6px;
    }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7,
    .s1m-4-1-7 {
        font-size: 28.8px;
        letter-spacing: 1.8px;
    }
}
@media screen and (max-width: 700px) {
    .s1d-4-1-7,
    .s1m-4-1-7 {
        font-size: 22.4px;
        letter-spacing: 1.4px;
    }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ---------- CAURUSEL ---------- */



/* ----- 3D Flip (exact old) ----- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    background: transparent;
}

.carousel-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
    transform: rotateY(0.01deg); /* Safari fix */
}

.carousel-card.flip-right {
    transform: rotateY(180deg);
}

.carousel-card.flip-left {
    transform: rotateY(-180deg);
}

.carousel-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.carousel-face.front {
    transform: rotateY(0deg);
}

.carousel-face.back {
    transform: rotateY(180deg);
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transform: translate3d(0, 0, 0.1px);
    -webkit-transform: translate3d(0, 0, 0.1px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ----- Arrows (transparent, no hover background) ----- */
.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 10;
    max-width: 100%;
    box-sizing: border-box;
}

.carousel-arrow {
    pointer-events: auto;
    border: none;
    background: transparent !important;        /* fully transparent */
    color: white;
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 50%; /* keep shape, though background invisible */
}

.carousel-arrow:hover {
    transform: scale(1.1);
    /* no background change */
}

.carousel-arrow:focus,
.carousel-arrow:focus-visible {
    outline: none;
    border: none;
}

/* big arrows (desktop) */
.big-arrows .carousel-arrow {
    background: none !important;
    font-size: 32px;
    padding: 10px;
    z-index: 20;
}

@media screen and (min-width: 1025px) {
    .big-arrows {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .big-arrows .carousel-arrow {
        font-size: 56px !important;
        padding: 15px !important;
    }
}

/* small arrows (mobile) */
.small-arrow {
    border-radius: 0 !important;
    background: transparent !important;
    width: 100%;
    height: 100%;
    font-size: 28px;
}

.small-arrow:hover {
    background: transparent !important;
    border-radius: 0 !important;
}

.ss-arrow-left,
.ss-arrow-right {
    border-radius: 0 !important;
    background: transparent !important;
}

/* ----- Icons (hidden with opacity/visibility) ----- */
.icon-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.icon-buttons.hidden {
    opacity: 0;
    visibility: hidden;
}

.icon-button {
    max-width: 22%;
    max-height: 22%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.icon-button:hover {
    transform: scale(1.1);
    cursor: pointer;
}

#slide-2 .icon-button {
    outline: 3px solid white;
    outline-offset: -1px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

#slide-2 .icon-button:hover,
#slide-2 .icon-button:focus,
#slide-2 .icon-button:focus-visible,
#slide-2 .icon-button:active {
    outline: 3px solid white !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}


.bs-icons-aligned .icon-buttons {
    justify-content: flex-start !important;
    padding: 10px;
}


/* responsive icon sizes */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
    .bs-icons-aligned .icon-button {
        max-width: min(100px, 12vw);
        max-height: min(100px, 12vh);
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .bs-icons-aligned .icon-button {
        max-width: min(80px, 10vw);
        max-height: min(80px, 10vh);
    }
}

@media screen and (max-width: 1024px) {
    .ss-icons-aligned .icon-button {
        max-width: 100px;
        max-height: 100px;
    }
}

@media screen and (max-width: 440px) {
    .ss-icons-aligned .icon-button {
        max-width: 60px;
        max-height: 60px;
    }
}


/* ----- Text Content (exact old transitions) ----- */
.text-content {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: #fff;
}

.text-content.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* desktop text positioning */
@media screen and (min-width: 1025px) {
    .bs-2-2, .bs-3-2 {
        position: relative;
        overflow: hidden;
        background: transparent !important;
    }
    
    .bs-2-2 .text-content {
        top: 0;
        height: 100%;
        text-align: left;
        justify-content: flex-end;
        padding-bottom: 10px;
        padding-left: 10px;
    }
    
    .bs-3-2 .text-content {
        top: 0;
        height: 100%;
        text-align: left;
        justify-content: flex-start;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 15px;
    }

    .bs-2-2 .text-content,
    .bs-3-2 .text-content {
        text-align: left;
    }
}

/* mobile text positioning */
@media screen and (max-width: 1024px) {
    .ss-4-3, .ss-5-3 {
        position: relative;
        align-items: left;
        overflow: hidden;
        background: transparent !important;
    }
    
    .ss-4-3 .text-content,
    .ss-5-3 .text-content {
        top: 0;
        height: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* ----- Headline & Body (exact old fonts & sizes) ----- */
.carousel-headline {
    font-family: 'BebasNeue', sans-serif;
    font-size: 32px;
    margin: 0 0 25px 0;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.2;
    color: #eae7df;
    text-transform: uppercase;
}

.carousel-body {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.bs-carousel-combined,
.ss-carousel,
.carousel-container {
    overflow: visible !important;
}

/* responsive headline/body */
@media screen and (min-width: 1025px) {
    .carousel-headline { font-size: 40px; }
    .carousel-body { font-size: 22px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .carousel-headline { font-size: 29px; }
    .carousel-body { font-size: 19px; }
}
@media screen and (max-width: 700px) {
    .carousel-headline { font-size: 22px; }
    .carousel-body { font-size: 15px; }
}
@media screen and (max-width: 1024px) {
    .carousel-headline { margin-bottom: 0; }
}

/* ----- Color Shadows (exact old) ----- */
:root {
    --shadow-blue: rgba(100, 150, 255, 0.15);
    --shadow-green: rgba(100, 220, 150, 0.15);
    --shadow-red: rgba(255, 100, 120, 0.15);
    --text-blue: #64a0ff;
    --text-green: #64dc96;
    --text-red: #ff6478;
}

.highlight-blue { color: var(--text-blue); }
.highlight-green { color: var(--text-green); }
.highlight-red { color: var(--text-red); }

.carousel-face[data-index="0"] { box-shadow: 0 25px 60px var(--shadow-blue); }
.carousel-face[data-index="1"] { box-shadow: 0 25px 60px var(--shadow-green); }
.carousel-face[data-index="2"] { box-shadow: 0 25px 60px var(--shadow-red); }






/* ================= SLIDE 3 ================= */


#slide-3 {
    background-color: #F3F3F3;
}


/* ===== TYPEWRITER & APPROACH BUTTON (transplant from donor) ===== */

/* Nautilus font (used for typewriter text) */
@font-face {
    font-family: 'Nautilus';
    src: url('Nautilus.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* "Approach the Light" button */
.cta {
    background: none;
    border: none;
    color: #000000;
    font-weight: normal;               /* overridden by later rule */
    text-transform: uppercase;
    font-size: 16px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'BebasNeue', sans-serif;  /* final from donor */
    text-decoration: none;
    max-width: 100%;
    white-space: nowrap;
}





/* Desktop >1024px */
@media screen and (min-width: 1025px) {
    .cta {
        font-size: 27px; 
            }
}

/* Tablet 701px – 1024px */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .cta {
        font-size: 24px; 
        }
}

/* Mobile ≤700px */
@media screen and (max-width: 700px) {
    .cta {
        font-size: 17px; 
          }
}





.cta:hover {
    transform: translateY(-2px);
    color: #333333;
}

/* Shimmer effect on click */
.cta.shimmer {
    position: relative;
    overflow: hidden;
}

.cta.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Typewriter container cell (slide-3, grid cell s3-4-2) */
.s3-4-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.s3-4-2 .typewriter-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    padding: 0;
    box-sizing: border-box;
    width: min(90vw, 1000px);
    max-width: 100%;
    height: auto;
    min-height: 0;
}

/* Individual typewriter lines */
.typewriter-line {
    font-size: 18px;
    line-height: 1.6;
    font-family: 'Nautilus', cursive;
    color: #111;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    height: 38.4px;
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.typewriter-line.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blinking cursor */
.typewriter-cursor::after {
    content: '';
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Fade out animation after inactivity */
.typewriter-container.fade-out {
    animation: fadeOut 1.5s ease forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Background change while typewriter is active */
#slide-3.typewriter-active {
    background-color: #F3F3F3 !important;
}

/* Responsive font sizes for typewriter lines */
@media screen and (min-width: 1025px) {
    .typewriter-line {
        font-size: 25px;
        height: 40px;
    }
}

@media screen and (max-width: 1024px) {
    .typewriter-line {
        font-size: 18px;
        height: 28.8px;
    }
}




/* -------------------- CONTACT -------------------- */


@font-face {
    font-family: 'Oswald';
    src: url('the-free-font.regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

.contact-btn {
    font-family: 'Oswald', sans-serif;
    font-weight: 100;
}

.email-reveal {
    font-family: 'Manrope', sans-serif;
    /* keep all other existing properties */
}


/* Contact button & email reveal */
.contact-container {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 40px;
    cursor: pointer;
}

.contact-btn, .email-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.email-reveal {
    opacity: 0;
    font-size: 17px;
    transform: scaleX(0);
    pointer-events: none;
}

.contact-container.show-email .contact-btn {
    opacity: 0;
    transform: scaleX(0);
    pointer-events: none;
}

.contact-container.show-email .email-reveal {
    opacity: 1;
    transform: scaleX(1);
    pointer-events: auto;
}

/* "contact" button uses Antonio */
.contact-btn {
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
}

/* Email uses Manrope (same as carousel body) */
.email-reveal {
    font-family: 'Manrope', sans-serif;
    font-weight: 500; /* Regular weight */
}
















/* -------------------- GLOBAL -------------------- */

/* -------------------- BACKGROUNDS (Simple Parallax) -------------------- */
#slide-1, #slide-2 {
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('B1-H.jpg') center/cover no-repeat;
    will-change: transform;
}

.slide2-bg {
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('B2-H.jpg') center/cover no-repeat;
    will-change: transform;
}


/* -------------------- SLIDE CONTAINERS -------------------- */
.slides-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;              /* needed for scrolling */
    overflow-y: scroll;          /* enables scrolling */
    scroll-behavior: smooth;     /* optional – makes JS smooth scrolling smoother */
}

.slide {
    width: 100vw;
    position: relative;
    max-width: 100vw;
    overflow: hidden;
    height: 100vh;
}

/* Hide scrollbars */
body {
    overflow: hidden; /* prevents body from scrolling */
}

.slides-container {
    overflow-y: scroll; /* enables scrolling inside container */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.slides-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}


.slide {
    height: 100dvh; /* use dynamic viewport height instead of 100vh */
}








/* Desktop >1024px */
@media screen and (min-width: 1025px) {
    .contact-btn {
        font-size: 22px;
    }
    .email-reveal {
        font-size: 18px; /* or adjust if you want it smaller, e.g., 23px */
    }
}

/* Tablet 701px – 1024px */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .contact-btn {
        font-size: 20px;
    }
    .email-reveal {
        font-size: 16px;
    }
}

/* Mobile ≤700px */
@media screen and (max-width: 700px) {
    .contact-btn {
        font-size: 18px;
    }
    .email-reveal {
        font-size: 14px;
    }
}