/* ==========================================================
   MILX PREMIUM
   home-theme.css
==========================================================*/

/* ===============================
   HOME PAGE
================================ */

.xs-home-wrap {
    background: var(--black);
    color: var(--white);
}

    /* ===============================
   SECTION TITLE
================================ */

    .xs-home-wrap .xs-section-title {
        margin-bottom: .75rem;
        text-align: center;
    }

        .xs-home-wrap .xs-section-title h2 {
            color: #fff;
            font-size: clamp(2rem,4vw,3rem);
            position: relative;
            display: inline-block;
        }

            .xs-home-wrap .xs-section-title h2::after {
                content: "";
                display: block;
                width: 70px;
                height: 4px;
                margin: 14px auto 0;
                border-radius: 999px;
                background: var(--gold-gradient-horizontal);
            }

    /* ===============================
   SUBTITLE
================================ */

    .xs-home-wrap .xs-section-sub {
        max-width: 700px;
        margin: 0 auto 3rem;
        text-align: center;
        color: var(--c-text-muted);
        font-size: 1.05rem;
    }

    /* ===============================
   SECTION BACKGROUNDS
================================ */

    .xs-home-wrap section {
        position: relative;
        padding: 90px 0;
    }

        .xs-home-wrap section:nth-child(even) {
            background: #101010;
        }

        .xs-home-wrap section:nth-child(odd) {
            background: #0B0B0B;
        }

        /* ===============================
   GOLD GLOW
================================ */

        .xs-home-wrap section::before {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient( rgba(212,175,55,.08), transparent 70% );
            top: -180px;
            right: -180px;
            pointer-events: none;
        }

html[dir="rtl"] .xs-home-wrap section::before {
    right: auto;
    left: -180px;
}

/* ===============================
   FEATURE ICONS
================================ */

.xs-feature-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 1.5rem;
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.15);
    color: var(--gold);
    font-size: 2rem;
    transition: .35s;
}

    .xs-feature-icon:hover {
        transform: rotate(8deg) scale(1.08);
        background: var(--gold-gradient);
        color: #111;
    }

/* ===============================
   FEATURE BOX
================================ */

.xs-feature {
    text-align: center;
    padding: 2rem;
}

    .xs-feature h4 {
        color: #fff;
        margin-bottom: .8rem;
    }

    .xs-feature p {
        color: var(--c-text-muted);
    }

/* ===============================
   BRANDS
================================ */

.xs-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: .7;
    transition: .35s;
}

    .xs-brand-item img {
        max-height: 70px;
        filter: grayscale(100%);
        transition: .35s;
    }

    .xs-brand-item:hover {
        opacity: 1;
    }

        .xs-brand-item:hover img {
            filter: none;
            transform: scale(1.08);
        }

/* ===============================
   STATS
================================ */

.xs-stat {
    text-align: center;
}

.xs-stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-display);
}

.xs-stat-label {
    color: var(--c-text-muted);
    margin-top: .5rem;
}

/* ===============================
   CTA SECTION
================================ */

.xs-cta {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient( rgba(0,0,0,.75), rgba(0,0,0,.75) ), url("/images/cta-bg.jpg") center/cover;
}

    .xs-cta h2 {
        color: #fff;
        margin-bottom: 1rem;
    }

    .xs-cta p {
        color: #ddd;
        max-width: 700px;
        margin: 0 auto 2rem;
    }

/* ===============================
   HOVER EFFECT
================================ */

.xs-home-wrap section:hover::before {
    transform: scale(1.05);
    transition: 1s;
}

/* ===============================
   SCROLL ANIMATION
================================ */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: .8s;
}

    .reveal.active {
        opacity: 1;
        transform: none;
    }

/* ===============================
   DIVIDER
================================ */

.xs-divider {
    width: 90px;
    height: 4px;
    margin: 1rem auto 2rem;
    border-radius: 999px;
    background: var(--gold-gradient-horizontal);
}

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

@media(max-width:992px) {

    .xs-home-wrap section {
        padding: 70px 0;
    }
}

@media(max-width:768px) {

    .xs-home-wrap section {
        padding: 55px 0;
    }

    .xs-stat-number {
        font-size: 2.3rem;
    }

    .xs-feature {
        padding: 1rem;
    }
}

@media(max-width:576px) {

    .xs-home-wrap .xs-section-title h2 {
        font-size: 2rem;
    }

    .xs-section-sub {
        font-size: .95rem;
    }
}