/* ================= ROOT ================= */
    :root {
        --gold: #caa169;
        --dark: #0f0f0f;
        --dark-soft: #1b1b1b;
        --text-light: #e5e5e5;
        --text-muted: #bdbdbd;
    }
    
    /* ================= HERO ================= */
    .hero-section {
        position: relative;
        min-height: 75vh;
        background: url('https://www.11-76.com/themes/luxex/luxex/img/about/1.jpg') center/cover no-repeat;
        display: flex;
        align-items: center;
    }
    
    .hero-content {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

/* ================= BRAND ================= */
    .clean-subheader {
        padding: 40px 0;
        background: #ffffff;
    }

    .clean-subheader h2 {
        font-size: 2.4rem;
        font-weight: 600;
        color: #111;
        margin-bottom: 16px;
    }

    .clean-subheader p {
        max-width: 760px;
        margin: auto;
        font-size: 1.05rem;
        line-height: 1.85;
        color: #0f0f0f;
    }

    /* Subtle bottom separator */
    .clean-subheader::after {
        content: "";
        display: block;
        width: 80px;
        height: 2px;
        background: #caa169;
        margin: 30px auto 0;
    }

/* Mobile */
    @media (max-width: 768px) {

        .clean-subheader {
            padding: 55px 15px;
        }
    
        .clean-subheader h2 {
            font-size: 2rem;
        }
    }

/* ================= ABOUT LUXURY SECTION ================= */
    .luxury-about {
        background: #fff;
    }

/* Image styling */
    .lux-img-wrap {
        position: relative;
    }

    .lux-img-wrap img {
        border-radius: 20px;
        box-shadow: 0 25px 60px rgba(0,0,0,.15);
    }

/* Text side */
    .lux-text-wrap h2 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 12px;
    }
    
    .lux-text-wrap p {
        color: #111;
        line-height: 1.9;
        font-size: 1.02rem;
        margin-bottom: 16px;
    }
    
    /* Border refine */
    .small-border {
        display: block;
        width: 80px;
        height: 3px;
        background: #caa169;
        margin: 18px 0 22px;
    }

/* Button */
.btn-outline-dark {
    border-radius: 30px;
    padding: 11px 34px;
    font-weight: 500;
    border: 2px solid #111;
    transition: all .3s ease;
}

    .btn-outline-dark:hover {
        background: #111;
        color: #fff;
    }

/* ================= MOBILE ================= */
@media (max-width: 768px) {
    .lux-text-wrap {
        text-align: center;
    }

    .small-border {
        margin: 16px auto 22px;
    }
}


/* ================= GOLD BORDER ================= */
.facilities-section {
    position: relative;
    padding: 80px 0;
    background-image:  url('https://sunrisedreamworldresort.com/Content/Resort/resort.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fixed background for desktop */
    background-attachment: fixed;
}

    .facilities-section .container {
        position: relative;
        z-index: 2;
    }

    /* =====================================================
   SECTION HEADING
   ===================================================== */
    .facilities-section h2 {
        font-size: 2.4rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 10px;
    }

    .facilities-section .small-border {
        display: block;
        width: 70px;
        height: 3px;
        background: var(--gold);
        margin: 18px auto 0;
    }

/* =====================================================
   FACILITY CARD – GLASS / TRANSPARENT
   ===================================================== */
.facility-card {
    height: 100%;
    padding: 35px 25px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.35s ease;
}

    /* Hover effect */
    .facility-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    }

    /* =====================================================
   ICON
   ===================================================== */
    .facility-card img {
        height: 58px;
        margin-bottom: 18px;
        filter: brightness(0) invert(1);
    }

    /* =====================================================
   TEXT
   ===================================================== */
    .facility-card h5 {
        color: #ffffff;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .facility-card p {
        color: #e0e0e0;
        font-size: 0.95rem;
        line-height: 1.7;
    }

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Tablets */
@media (max-width: 991px) {
    .facilities-section {
        padding: 65px 0;
    }

        .facilities-section h2 {
            font-size: 2.1rem;
        }

    .facility-card {
        padding: 30px 22px;
    }
}

/* Mobile – FIX background issue */
@media (max-width: 768px) {
    .facilities-section {
        padding: 55px 0;
        background-attachment: scroll; /* IMPORTANT */
        background-position: center top;
    }

        .facilities-section h2 {
            font-size: 1.9rem;
        }
}

/* Small Mobile */
@media (max-width: 576px) {
    .facility-card {
        padding: 26px 20px;
    }

        .facility-card img {
            height: 50px;
        }

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

/* ================= BUTTON ================= */
/* =====================================================
   PARENT COMPANY SECTION
   ===================================================== */
.parent-company-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a1a1a, #111);
}

    /* Heading */
    .parent-company-section h2 {
        font-size: 2.3rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 16px;
    }

    /* Description */
    .parent-company-section p {
        max-width: 820px;
        margin: auto;
        font-size: 1.05rem;
        line-height: 1.9;
        color: #e0e0e0;
    }

    /* Button */
    .parent-company-section .btn-outline-light {
        border-radius: 30px;
        padding: 11px 34px;
        font-weight: 500;
        border: 2px solid #ffffff;
        transition: all 0.3s ease;
    }

        .parent-company-section .btn-outline-light:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #000;
        }

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Tablet */
@media (max-width: 991px) {
    .parent-company-section {
        padding: 65px 0;
    }

        .parent-company-section h2 {
            font-size: 2.1rem;
        }
}

/* Mobile */
@media (max-width: 576px) {
    .parent-company-section {
        padding: 55px 15px;
    }

        .parent-company-section h2 {
            font-size: 1.8rem;
        }

        .parent-company-section p {
            font-size: 0.95rem;
        }
}