/* =========================================================
   TEN ONE RESORT
   Facilities & Services Section
   facilities.css
   ========================================================= */


/* =========================================================
   01. FACILITIES SECTION
   ========================================================= */

.facilities-section {
    position: relative;

    width: 100%;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    overflow: hidden;

    isolation: isolate;

    background-color:
        var(--color-background);

    background-image:
        url("../images/tofaci1.avif");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    /*
     * Keep the scenic image visually fixed while
     * the section content scrolls over it.
     */
    background-attachment:
        fixed;
}


/* =========================================================
   02. TOP WHITE FADE
   White at the top → gradually reveals the image
   ========================================================= */

.facilities-section::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            rgba(255, 255, 255, 0.98) 0%,

            rgba(255, 255, 255, 0.94) 8%,

            rgba(247, 248, 243, 0.78) 20%,

            rgba(247, 248, 243, 0.50) 34%,

            rgba(247, 248, 243, 0.27) 50%,

            rgba(247, 248, 243, 0.12) 66%,

            rgba(247, 248, 243, 0.04) 83%,

            rgba(247, 248, 243, 0) 100%
        );
}


/* =========================================================
   03. SOFT CENTRAL MIST
   ========================================================= */

.facilities-section::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 1150px;
    height: 900px;

    transform:
        translate(
            -50%,
            -50%
        );

    z-index: -1;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse,

            rgba(255, 255, 255, 0.52) 0%,

            rgba(255, 255, 255, 0.32) 34%,

            rgba(255, 255, 255, 0.12) 60%,

            rgba(255, 255, 255, 0.04) 78%,

            rgba(255, 255, 255, 0) 100%
        );
}


/* =========================================================
   04. MAIN CONTAINER
   ========================================================= */

.facilities-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            1180px
        );

    margin-inline:
        auto;
}


/* =========================================================
   05. SECTION HEADER
   ========================================================= */

.facilities-header {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items:
        end;

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    margin-bottom:
        clamp(
            2.5rem,
            5vw,
            4rem
        );
}


/* =========================================================
   06. EYEBROW
   ========================================================= */

.facilities-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        var(--color-primary-light);

    font-family:
        var(--font-body-strong);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.facilities-eyebrow::before {
    content:
        "";

    width:
        38px;

    height:
        1px;

    flex-shrink:
        0;

    background:
        var(--color-primary-light);
}


/* =========================================================
   07. TITLE
   ========================================================= */

.facilities-title {
    max-width:
        720px;

    margin:
        0;

    color:
        var(--color-text-dark);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            5vw,
            4.75rem
        );

    font-weight:
        var(--font-weight-semibold);

    line-height:
        0.92;

    letter-spacing:
        -0.035em;
}


.facilities-title span {
    display:
        block;

    color:
        var(--color-primary);
}


/* =========================================================
   08. INTRO
   ========================================================= */

.facilities-intro {
    max-width:
        520px;

    margin:
        0 0
        4px
        auto;

    color:
        var(--color-text-light);

    font-family:
        var(--font-body-strong);

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.9;

    letter-spacing:
        -0.01em;
}


/* =========================================================
   09. FACILITIES GRID
   Desktop = 3 columns
   ========================================================= */

.facilities-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        16px;

    width:
        100%;
}


/* =========================================================
   10. FACILITY CARD
   ========================================================= */

.facility-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-width:
        0;

    min-height:
        285px;

    padding:
        27px
        26px
        25px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            22,
            74,
            58,
            0.11
        );

    border-radius:
        18px;

    background:
        rgba(
            248,
            249,
            244,
            0.94
        );

    box-shadow:
        0 10px 32px
        rgba(
            22,
            74,
            58,
            0.09
        ),
        0 2px 8px
        rgba(
            22,
            74,
            58,
            0.04
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform
        var(--transition-base),

        background-color
        var(--transition-base),

        border-color
        var(--transition-base),

        box-shadow
        var(--transition-base);
}


/* =========================================================
   11. CARD HOVER
   ========================================================= */

.facility-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(
            63,
            118,
            85,
            0.20
        );

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 18px 42px
        rgba(
            22,
            74,
            58,
            0.13
        ),
        0 4px 12px
        rgba(
            22,
            74,
            58,
            0.05
        );
}


/* =========================================================
   12. FEATURED CARD
   ========================================================= */

.facility-card-featured {
    color:
        var(--color-white);

    background:
        linear-gradient(
            145deg,
            #103F31 0%,
            #164A3A 55%,
            #27634B 100%
        );

    border-color:
        transparent;

    box-shadow:
        0 14px 38px
        rgba(
            22,
            74,
            58,
            0.16
        );

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}


.facility-card-featured:hover {
    background:
        linear-gradient(
            145deg,
            #164A3A 0%,
            #27634B 65%,
            #3F7655 100%
        );

    border-color:
        transparent;
}


/* =========================================================
   13. CARD TOP
   ========================================================= */

.facility-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;
}


/* =========================================================
   14. CARD NUMBER
   ========================================================= */

.facility-number {
    color:
        rgba(
            63,
            118,
            85,
            0.55
        );

    font-family:
        var(--font-body-strong);

    font-size:
        0.72rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.16em;
}


.facility-card-featured
.facility-number {
    color:
        rgba(
            255,
            255,
            255,
            0.48
        );
}


/* =========================================================
   15. FACILITY ICON
   ========================================================= */

.facility-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        49px;

    height:
        49px;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(
            63,
            118,
            85,
            0.18
        );

    border-radius:
        50%;

    color:
        var(--color-primary-light);

    background:
        rgba(
            63,
            118,
            85,
            0.075
        );

    font-size:
        var(--icon-md);

    transition:
        transform
        var(--transition-base),

        background-color
        var(--transition-base),

        color
        var(--transition-base);
}


.facility-card-featured
.facility-icon {
    color:
        var(--color-white);

    border-color:
        rgba(
            255,
            255,
            255,
            0.20
        );

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.facility-card:hover
.facility-icon {
    transform:
        scale(1.05);
}


.facility-card-featured:hover
.facility-icon {
    background:
        rgba(
            255,
            255,
            255,
            0.16
        );
}


/* =========================================================
   16. CARD CONTENT
   ========================================================= */

.facility-card-content {
    margin-top:
        auto;

    padding-top:
        30px;

}


/* =========================================================
   17. CARD TITLE
   ========================================================= */

.facility-card h3 {
    margin:
        0 0
        10px;

    color:
        var(--color-text-dark);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            1.55rem,
            1.8vw,
            1.95rem
        );

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1;

    letter-spacing:
        -0.02em;
}


.facility-card-featured h3 {
    color:
        var(--color-white);
}


/* =========================================================
   18. CARD DESCRIPTION
   ========================================================= */

.facility-card p {
    max-width:
        320px;

    margin:
        0;

    color:
        var(--color-text-light);

    font-family:
        var(--font-body-strong);

    font-size:
        0.78rem;

    font-weight:
        500;

    line-height:
        1.7;
}


.facility-card-featured p {
    color:
        rgba(
            255,
            255,
            255,
            0.74
        );
}


/* =========================================================
   19. CARD BOTTOM ACCENT
   ========================================================= */

.facility-card-line {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--color-water),
            var(--color-primary-light)
        );

    transition:
        width
        var(--transition-slow);
}


.facility-card:hover
.facility-card-line {
    width:
        100%;
}


.facility-card-featured
.facility-card-line {
    background:
        linear-gradient(
            90deg,
            var(--color-water),
            rgba(
                255,
                255,
                255,
                0.75
            )
        );
}


/* =========================================================
   20. EXPERIENCE BANNER
   ========================================================= */

.facilities-banner {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-12);

    min-height:
        300px;

    margin-top:
        16px;

    padding:
        48px
        54px;

    overflow:
        hidden;

    border-radius:
        22px;

    background:
        linear-gradient(
            125deg,
            #103D30 0%,
            #164A3A 48%,
            #28634E 100%
        );

    box-shadow:
        0 20px 52px
        rgba(
            22,
            74,
            58,
            0.13
        );
}


/* =========================================================
   21. BANNER GLOW
   ========================================================= */

.facilities-banner::before {
    content:
        "";

    position:
        absolute;

    top:
        -210px;

    right:
        100px;

    width:
        450px;

    height:
        450px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(
                95,
                169,
                184,
                0.25
            ) 0%,

            rgba(
                95,
                169,
                184,
                0
            ) 70%
        );
}


/* =========================================================
   22. BANNER CONTENT
   ========================================================= */

.facilities-banner-content {
    position:
        relative;

    z-index:
        3;

    max-width:
        620px;
}


/* =========================================================
   23. BANNER EYEBROW
   ========================================================= */

.facilities-banner-eyebrow {
    display:
        block;

    margin-bottom:
        12px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-family:
        var(--font-body-strong);

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


/* =========================================================
   24. BANNER TITLE
   ========================================================= */

.facilities-banner h3 {
    margin:
        0 0
        14px;

    color:
        var(--color-white);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.5rem,
            4vw,
            3.8rem
        );

    font-weight:
        var(--font-weight-semibold);

    line-height:
        0.92;

    letter-spacing:
        -0.025em;
}


.facilities-banner h3 span {
    display:
        block;

    color:
        #BBD7C6;
}


/* =========================================================
   25. BANNER DESCRIPTION
   ========================================================= */

.facilities-banner p {
    max-width:
        550px;

    margin:
        0 0
        23px;

    color:
        rgba(
            255,
            255,
            255,
            0.73
        );

    font-family:
        var(--font-body-strong);

    font-size:
        0.78rem;

    font-weight:
        500;

    line-height:
        1.75;
}


/* =========================================================
   26. BANNER BUTTON
   ========================================================= */

.facilities-banner-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        48px;

    padding:
        0 8px
        0 18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.38
        );

    border-radius:
        var(--radius-full);

    color:
        var(--color-white);

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    font-family:
        var(--font-body-strong);

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform
        var(--transition-base),

        background-color
        var(--transition-base),

        border-color
        var(--transition-base);
}


.facilities-banner-button:hover {
    color:
        var(--color-white);

    border-color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    transform:
        translateY(-2px);
}


/* =========================================================
   27. BANNER ARROW
   ========================================================= */

.facilities-banner-arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    border-radius:
        50%;

    color:
        var(--color-primary);

    background:
        var(--color-white);

    transition:
        transform
        var(--transition-base);
}


.facilities-banner-button:hover
.facilities-banner-arrow {
    transform:
        translateX(3px);
}


/* =========================================================
   28. DECORATIVE RINGS
   ========================================================= */

.facilities-banner-decoration {
    position:
        absolute;

    right:
        35px;

    bottom:
        -120px;

    width:
        350px;

    height:
        350px;

    pointer-events:
        none;

    z-index:
        1;
}


.facilities-banner-decoration span {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );
}


.facilities-banner-decoration
span:nth-child(1) {
    width:
        175px;

    height:
        175px;
}


.facilities-banner-decoration
span:nth-child(2) {
    width:
        250px;

    height:
        250px;
}


.facilities-banner-decoration
span:nth-child(3) {
    width:
        330px;

    height:
        330px;
}


/* =========================================================
   29. TABLET
   769px - 1100px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    .facilities-section {
        padding:
            5.5rem
            0;
    }


    .facilities-container {
        width:
            calc(
                100% -
                (var(--container-padding) * 2)
            );
    }


    .facilities-header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.85fr);

        gap:
            3rem;

        margin-bottom:
            2.75rem;
    }


    .facilities-title {
        font-size:
            clamp(
                2.8rem,
                5.5vw,
                4rem
            );
    }


    .facilities-intro {
        font-size:
            0.88rem;

        line-height:
            1.72;
    }


    /*
     * TABLET = 2 COLUMNS
     */

    .facilities-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            14px;
    }


    .facility-card {
        min-height:
            270px;

        padding:
            23px
            22px
            22px;

        border-radius:
            16px;
    }


    .facility-icon {
        width:
            45px;

        height:
            45px;
    }


    .facility-card-content {
        padding-top:
            26px;
    }


    .facility-card h3 {
        font-size:
            1.55rem;
    }


    .facility-card p {
        font-size:
            0.72rem;
    }


    .facilities-banner {
        min-height:
            280px;

        padding:
            40px
            42px;
    }

}


/* =========================================================
   30. MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /*
     * Fixed backgrounds are avoided on mobile for
     * smoother scrolling and better browser support.
     */

    .facilities-section {
        padding:
            4.75rem
            0;

        background-attachment:
            scroll;

        background-position:
            center center;
    }


    /* -----------------------------------------------------
       Mobile white fade
       ----------------------------------------------------- */

    .facilities-section::before {
        background:
            linear-gradient(
                180deg,

                rgba(255, 255, 255, 0.99) 0%,

                rgba(255, 255, 255, 0.94) 12%,

                rgba(247, 248, 243, 0.79) 28%,

                rgba(247, 248, 243, 0.50) 45%,

                rgba(247, 248, 243, 0.20) 65%,

                rgba(247, 248, 243, 0.05) 84%,

                rgba(247, 248, 243, 0) 100%
            );
    }


    .facilities-section::after {
        width:
            750px;

        height:
            700px;

        background:
            radial-gradient(
                ellipse,

                rgba(255, 255, 255, 0.59) 0%,

                rgba(255, 255, 255, 0.35) 38%,

                rgba(255, 255, 255, 0.10) 66%,

                rgba(255, 255, 255, 0) 100%
            );
    }


    /* -----------------------------------------------------
       Container
       ----------------------------------------------------- */

    .facilities-container {
        width:
            calc(
                100% -
                (var(--container-padding) * 2)
            );
    }


    /* -----------------------------------------------------
       Header
       ----------------------------------------------------- */

    .facilities-header {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            1.25rem;

        margin-bottom:
            2.25rem;
    }


    .facilities-eyebrow {
        margin-bottom:
            10px;

        font-size:
            0.68rem;

        letter-spacing:
            0.14em;
    }


    .facilities-eyebrow::before {
        width:
            27px;
    }


    .facilities-title {
        max-width:
            100%;

        font-size:
            clamp(
                2.35rem,
                10vw,
                3.4rem
            );

        line-height:
            0.94;
    }


    .facilities-intro {
        max-width:
            100%;

        margin:
            0;

        font-size:
            0.88rem;

        line-height:
            1.7;
    }


    /* -----------------------------------------------------
       MOBILE = 1 COLUMN
       ----------------------------------------------------- */

    .facilities-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .facility-card {
        min-height:
            225px;

        padding:
            22px
            19px
            21px;

        border-radius:
            16px;

        background:
            rgba(
                248,
                249,
                244,
                0.95
            );

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }


    .facility-card-featured {
        background:
            linear-gradient(
                145deg,
                #103F31 0%,
                #164A3A 55%,
                #27634B 100%
            );
    }


    .facility-card-top {
        margin-bottom:
            18px;
    }


    .facility-number {
        font-size:
            0.64rem;
    }


    .facility-icon {
        width:
            41px;

        height:
            41px;

        font-size:
            14px;
    }


    .facility-card-content {
        padding-top:
            3px;
    }


    .facility-card h3 {
        margin-bottom:
            8px;

        font-size:
            1.5rem;

        line-height:
            1.02;
    }


    .facility-card p {
        max-width:
            100%;

        font-size:
            0.72rem;

        line-height:
            1.62;
    }


    /* -----------------------------------------------------
       Experience banner
       ----------------------------------------------------- */

    .facilities-banner {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            1.75rem;

        min-height:
            360px;

        margin-top:
            12px;

        padding:
            34px
            23px;

        border-radius:
            19px;
    }


    .facilities-banner-eyebrow {
        margin-bottom:
            10px;

        font-size:
            0.60rem;
    }


    .facilities-banner h3 {
        margin-bottom:
            12px;

        font-size:
            clamp(
                2.25rem,
                9vw,
                3.1rem
            );
    }


    .facilities-banner p {
        max-width:
            100%;

        margin-bottom:
            19px;

        font-size:
            0.73rem;

        line-height:
            1.65;
    }


    .facilities-banner-button {
        min-height:
            46px;

        padding:
            0 7px
            0 16px;

        font-size:
            0.70rem;
    }


    .facilities-banner-arrow {
        width:
            29px;

        height:
            29px;
    }


    .facilities-banner-decoration {
        right:
            -85px;

        bottom:
            -115px;

        width:
            280px;

        height:
            280px;
    }


    .facilities-banner-decoration
    span:nth-child(1) {
        width:
            150px;

        height:
            150px;
    }


    .facilities-banner-decoration
    span:nth-child(2) {
        width:
            215px;

        height:
            215px;
    }


    .facilities-banner-decoration
    span:nth-child(3) {
        width:
            280px;

        height:
            280px;
    }

}


/* =========================================================
   31. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .facilities-section {
        padding:
            4rem
            0;
    }


    .facilities-title {
        font-size:
            clamp(
                2.15rem,
                11vw,
                2.85rem
            );
    }


    .facilities-intro {
        font-size:
            0.95rem;
    }


    .facilities-grid {
        gap:
            10px;
    }


    .facility-card {
        min-height:
            210px;

        padding:
            19px
            16px
            18px;

        border-radius:
            15px;
    }


    .facility-card-top {
        margin-bottom:
            15px;
    }


    .facility-icon {
        width:
            38px;

        height:
            38px;

        font-size:
            13px;
    }


    .facility-card h3 {
        font-size:
            1.38rem;
    }


    .facility-card p {
        font-size:
            0.69rem;

        line-height:
            1.58;
    }


    .facilities-banner {
        min-height:
            345px;

        padding:
            30px
            18px;

        border-radius:
            17px;
    }


    .facilities-banner h3 {
        font-size:
            2.15rem;
    }


    .facilities-banner p {
        font-size:
            0.69rem;
    }

}


/* =========================================================
   32. VERY SMALL PHONES
   <= 375px
   ========================================================= */

@media (max-width: 375px) {

    .facilities-section {
        padding:
            3.5rem
            0;
    }


    .facilities-title {
        font-size:
            2.15rem;
    }


    .facility-card {
        min-height:
            200px;

        padding:
            18px
            14px
            17px;
    }


    .facility-number {
        font-size:
            0.58rem;
    }


    .facility-icon {
        width:
            36px;

        height:
            36px;

        font-size:
            12px;
    }


    .facility-card h3 {
        font-size:
            1.28rem;
    }


    .facility-card p {
        font-size:
            0.66rem;
    }


    .facilities-banner {
        min-height:
            330px;

        padding:
            27px
            16px;
    }


    .facilities-banner h3 {
        font-size:
            2rem;
    }


    .facilities-banner p {
        font-size:
            0.66rem;
    }

}


/* =========================================================
   33. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .facility-card,
    .facility-icon,
    .facility-card-line,
    .facilities-banner-button,
    .facilities-banner-arrow {

        transition:
            none;
    }


    .facility-card:hover,
    .facilities-banner-button:hover {

        transform:
            none;
    }


    .facility-card:hover
    .facility-card-line {

        width:
            0;
    }

}
.about-section{
    padding-bottom: 40px !important;
}

.facilities-section{
    padding-top: 40px !important;
}