/* =========================================================
   FAIRWIN HOSTING – FINAL, CLEAN CAROUSEL CSS
   ✔ Stable
   ✔ JS-compatible
   ✔ Popup-safe
   ✔ 2560×1400 friendly
========================================================= */

/* ---------- RESET ---------- */
* {
    box-sizing: border-box;
}

html, body {
    padding: 0; 
    width: 100%;
    height: auto;
    font-family: 'Montserrat', sans-serif;
}

/* ---------- CAROUSEL STAGE ---------- */
#fw-startup-carousel {
    position: relative;
    margin-top:-130px !important;
    width: 100%;
    height: 100vh;
    min-height: 550px !important;

    background-color: linear-gradient(180deg, #0b6bcf 0%, #095ab8 50%, #04336a 100%);   /* ✔ keep */
    background-repeat: no-repeat;
    background-size: contain;    /* or cover, see below */
    background-position: center center;
    transition: background-image 0.6s ease;

    overflow: visible; /* dots live here */
}

/* ---------- SLIDE STAGE ---------- */
#fw-startup-slides {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* slides clip here */
}

/* ---------- SLIDES ---------- */
.fw-page-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    opacity: 0;
    z-index: 1;
    transition: opacity .6s ease;
}

/* ACTIVE SLIDE */
.fw-page-slide.fw-page-slide-active {
    opacity: 1 !important;
    z-index: 2;
}

/* ---------- BACKGROUNDS ---------- */
.fw-bg-left,
.fw-bg-right {
    background-repeat: no-repeat;
    background-size: contain;
}

.fw-bg-left {
    background-position: left center;
}

.fw-bg-right {
    background-position: right center;
}

/* ---------- GRADIENT OVERLAY ---------- */
.fw-page-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}



/* ---------- CONTENT LAYER ---------- */
.fw-page-slide > * {
    position: relative;
    z-index: 2;
}

/* ---------- ICONS ---------- */
.icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper i {
    font-size: 15px;
    color: #ffd15c;
}

/* ---------- BUTTON ---------- */
.fw-btn {
    margin-top: 18px;
    border-radius: 999px;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #ffd15c;
    background: #007bff;
    color: #ffffff;
    cursor: pointer;
    transition: all .2s ease;
}

.fw-btn:hover {
    background: #005fcc;
    transform: translateY(-1px);
}

/* ---------- DOT NAVIGATION ---------- */
#fw-startup-dots {
    position: absolute;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 10000;
    pointer-events: auto;
}

#fw-startup-dots span {
    width: 12px;
    height:12px;
    border-radius: 75%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

#fw-startup-dots span.active {
    background: #077718;
    transform: scale(1.2);
}


/* ===============================
   FINAL PAINT FIX – DO NOT REMOVE
=============================== */

.fw-page-slide {
    will-change: opacity;
    isolation: isolate;
}

/* ===============================
   FINAL SLIDE VISIBILITY FIX
=============================== */

/* Hide inactive slides completely */
.fw-page-slide {
    pointer-events: none;
    visibility: hidden;
}

/* Show only active slide */
.fw-page-slide.fw-page-slide-active {
    visibility: visible;
    pointer-events: auto;
}

.fw-page-slide {
    z-index: 1;
}
.fw-page-slide-active {
    z-index: 2;
}

/* =========================================
   PREMIUM CAROUSEL ANIMATION (FINAL)
========================================= */

/* ---- BASE SLIDE STATE ---- */
.fw-page-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.985);
}

/* ---- ACTIVE SLIDE ---- */
.fw-page-slide-active {
    visibility: visible;
    pointer-events: auto;
    animation: fwSlideIn 0.7s cubic-bezier(.22,.61,.36,1) forwards;
}

/* ---- EXIT SLIDE ---- */
.fw-slide-exit {
    animation: fwSlideOut 0.45s ease forwards;
}

/* ---- KEYFRAMES ---- */
@keyframes fwSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.985);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fwSlideOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.015);
    }
}

/* =========================================
   CONTENT STAGGER (TEXT FEELS PREMIUM)
========================================= */

.fw-page-slide > div {
    opacity: 0;
    transform: translateY(12px);
}

.fw-page-slide-active > div {
    animation: fwContentIn 0.6s ease forwards;
    animation-delay: 0.15s;
}

@keyframes fwContentIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SUBTLE BACKGROUND PAN (NO GRADIENT)
========================================= */

#fw-startup-carousel {
    background-position: center center;
}

.fw-bg-left.fw-page-slide-active ~ #fw-startup-carousel,
.fw-bg-right.fw-page-slide-active ~ #fw-startup-carousel {
    animation: fwBgPan 8s ease-in-out infinite alternate;
}

@keyframes fwBgPan {
    from {
        background-position: 48% center;
    }
    to {
        background-position: 52% center;
    }
}

/* =========================================
   MOBILE – PREMIUM CAROUSEL UX (CARD STYLE)
========================================= */
@media (max-width: 300px) {
    #fw-startup-carousel {
        background: none !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        animation: none !important;
    }

    #fw-startup-slides {
        height: auto !important;
        overflow: visible !important;
    }

    .fw-page-slide {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        background: #ffffff !important;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        margin: 0 16px;
    }

    .fw-bg-left,
    .fw-bg-right,
    .fw-page-slide::after {
        display: none !important;
    }

    .fw-page-slide > div {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

    #fw-startup-dots {
        position: relative !important;
        margin-top: 20px;
        gap: 14px;
    }
    .fw-page-slide {
    touch-action: pan-y;
    }
}

/* =========================================
   MOBILE – HIDE CAROUSEL ONLY
========================================= */
@media (max-width: 768px) {

  #Carousel,
  #fw-startup-carousel {
    display: none !important;
  }

}