/* =========================================================
   ASHGI.COM — TERMS & CONDITIONS
   File: /assets/css/terms.css
========================================================= */


/* =========================================================
   1. PARTICLE BACKGROUND
========================================================= */

#particles-js {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}

#particles-js canvas {
    pointer-events: none !important;
}


/* =========================================================
   2. HERO
========================================================= */

.terms-hero {

    position: relative;
    z-index: 2;

    width: 100%;
    box-sizing: border-box;

    padding: 70px 20px 55px;

    text-align: center;

    background: #020617;
}


.terms-container {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;

    margin: 0 auto;
}


.terms-label {

    display: inline-block;

    margin-bottom: 14px;

    color: #00d9ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.terms-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 5vw, 48px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.terms-hero p {

    margin: 14px auto 0;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   3. TERMS PAGE
========================================================= */

.terms-page {

    position: relative;
    z-index: 2;

    width: 100%;
    box-sizing: border-box;

    padding: 55px 20px 80px;

    background: #020617;
}


/* =========================================================
   4. TERMS SECTION
========================================================= */

.terms-section {

    padding: 0 0 32px;

    margin-bottom: 32px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, 0.10);
}


.terms-section:last-of-type {

    margin-bottom: 0;
}


.terms-section h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;
}


.terms-section p {

    margin: 0 0 12px;

    color: #aeb9c9;

    font-size: 14px;

    line-height: 1.75;
}


.terms-section p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   5. TERMS LINKS
========================================================= */

.terms-section a {

    position: relative;

    z-index: 3;

    display: inline;

    color: #00d9ff;

    text-decoration: none;

    cursor: pointer;

    pointer-events: auto;
}


.terms-section a:hover {

    color: #ffffff;

    text-decoration: underline;
}


/* =========================================================
   6. LAST UPDATED
========================================================= */

.terms-updated {

    margin-top: 35px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.10);

    color: #64748b;

    font-size: 12px;
}


.terms-updated strong {

    color: #94a3b8;

    font-weight: 600;
}


/* =========================================================
   7. FOOTER
========================================================= */

footer {

    position: relative;

    z-index: 2;
}


/* =========================================================
   8. TABLET
========================================================= */

@media (max-width: 800px) {

    .terms-hero {

        padding: 60px 20px 45px;
    }


    .terms-page {

        padding: 45px 20px 65px;
    }

}


/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 600px) {

    .terms-hero {

        padding: 50px 16px 40px;
    }


    .terms-hero h1 {

        font-size: 32px;
    }


    .terms-hero p {

        font-size: 13px;
    }


    .terms-page {

        padding: 40px 16px 60px;
    }


    .terms-section {

        padding-bottom: 26px;

        margin-bottom: 26px;
    }


    .terms-section h2 {

        font-size: 18px;
    }


    .terms-section p {

        font-size: 13px;

        line-height: 1.7;
    }

}