/* ========================================
   LOCAL FONTS
======================================== */

@font-face {
    font-family: "Cinzel";
    src:
        url("../assets/fonts/Cinzel-Regular.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cinzel";
    src:
        url("../assets/fonts/Cinzel-Medium.ttf")
        format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src:
        url("../assets/fonts/Vazirmatn-Light.ttf")
        format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src:
        url("../assets/fonts/Vazirmatn-Regular.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src:
        url("../assets/fonts/Vazirmatn-Medium.ttf")
        format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background: #2b0206;

    color: #fff;

    font-family: "Vazirmatn", sans-serif;

    overflow-x: hidden;
}


/* ========================================
   RED BACKGROUND
======================================== */

.terms-page {

    position: relative;

    min-height: 100vh;

    padding: 130px 20px 70px;

    isolation: isolate;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255, 255, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3b050c 0%,
            #020000 45%,
            #3a050b 100%
        );;
}


/* ========================================
   STARS
======================================== */

.terms-header,
.terms-content,
.terms-footer {
    position: relative;
    z-index: 2;
}

.stars {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.stars span {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

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

    box-shadow:
        0 0 7px rgba(255, 255, 255, 0.7);

    animation:
        starFloat
        var(--duration)
        ease-in-out
        infinite alternate;

    opacity: var(--opacity);
}


/* Different star positions */

.stars span:nth-child(1) {
    left: 4%;
    top: 12%;
    --duration: 5s;
    --opacity: .45;
}

.stars span:nth-child(2) {
    left: 9%;
    top: 42%;
    --duration: 7s;
    --opacity: .7;
}

.stars span:nth-child(3) {
    left: 14%;
    top: 78%;
    --duration: 6s;
    --opacity: .35;
}

.stars span:nth-child(4) {
    left: 19%;
    top: 25%;
    --duration: 8s;
    --opacity: .55;
}

.stars span:nth-child(5) {
    left: 24%;
    top: 62%;
    --duration: 5s;
    --opacity: .8;
}

.stars span:nth-child(6) {
    left: 29%;
    top: 9%;
    --duration: 7s;
    --opacity: .4;
}

.stars span:nth-child(7) {
    left: 34%;
    top: 87%;
    --duration: 6s;
    --opacity: .65;
}

.stars span:nth-child(8) {
    left: 39%;
    top: 35%;
    --duration: 9s;
    --opacity: .5;
}

.stars span:nth-child(9) {
    left: 44%;
    top: 70%;
    --duration: 5s;
    --opacity: .75;
}

.stars span:nth-child(10) {
    left: 49%;
    top: 18%;
    --duration: 8s;
    --opacity: .35;
}

.stars span:nth-child(11) {
    left: 54%;
    top: 52%;
    --duration: 6s;
    --opacity: .7;
}

.stars span:nth-child(12) {
    left: 59%;
    top: 84%;
    --duration: 7s;
    --opacity: .5;
}

.stars span:nth-child(13) {
    left: 64%;
    top: 28%;
    --duration: 5s;
    --opacity: .8;
}

.stars span:nth-child(14) {
    left: 69%;
    top: 65%;
    --duration: 9s;
    --opacity: .4;
}

.stars span:nth-child(15) {
    left: 74%;
    top: 11%;
    --duration: 6s;
    --opacity: .65;
}

.stars span:nth-child(16) {
    left: 79%;
    top: 44%;
    --duration: 8s;
    --opacity: .5;
}

.stars span:nth-child(17) {
    left: 84%;
    top: 76%;
    --duration: 5s;
    --opacity: .75;
}

.stars span:nth-child(18) {
    left: 89%;
    top: 22%;
    --duration: 7s;
    --opacity: .45;
}

.stars span:nth-child(19) {
    left: 94%;
    top: 58%;
    --duration: 6s;
    --opacity: .7;
}

.stars span:nth-child(20) {
    left: 97%;
    top: 88%;
    --duration: 9s;
    --opacity: .4;
}

.stars span:nth-child(21) {
    left: 7%;
    top: 92%;
    --duration: 6s;
    --opacity: .55;
}

.stars span:nth-child(22) {
    left: 17%;
    top: 55%;
    --duration: 8s;
    --opacity: .75;
}

.stars span:nth-child(23) {
    left: 47%;
    top: 94%;
    --duration: 7s;
    --opacity: .5;
}

.stars span:nth-child(24) {
    left: 71%;
    top: 91%;
    --duration: 5s;
    --opacity: .65;
}

.stars span:nth-child(25) {
    left: 91%;
    top: 36%;
    --duration: 8s;
    --opacity: .45;
}

.stars span:nth-child(26) {
    left: 32%;
    top: 48%;
    --duration: 6s;
    --opacity: .8;
}

.stars span:nth-child(27) {
    left: 61%;
    top: 6%;
    --duration: 7s;
    --opacity: .55;
}

.stars span:nth-child(28) {
    left: 87%;
    top: 93%;
    --duration: 5s;
    --opacity: .7;
}

.stars span:nth-child(29) {
    left: 53%;
    top: 37%;
    --duration: 9s;
    --opacity: .4;
}

.stars span:nth-child(30) {
    left: 27%;
    top: 82%;
    --duration: 6s;
    --opacity: .6;
}


/* Star movement */

@keyframes starFloat {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(8px, -12px, 0)
            scale(1.25);
    }

    100% {
        transform:
            translate3d(-6px, 10px, 0)
            scale(.8);
    }
}


/* ========================================
   HEADER
======================================== */

.terms-header {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin: 0 auto 150px;

    text-align: center;
}


.terms-label {

    display: block;

    margin-bottom: 28px;

    font-family: "Cinzel", serif;

    font-size: 10px;

    letter-spacing: 5px;

    color: rgba(255, 255, 255, 0.65);
}


.terms-header h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(
        42px,
        7vw,
        95px
    );

    font-weight: 400;

    line-height: 1;

    letter-spacing: 3px;

    color: #fff;
}


.terms-header h2 {

    margin-top: 25px;

    font-family: "Vazirmatn", sans-serif;

    font-size: clamp(
        19px,
        2.5vw,
        28px
    );

    font-weight: 400;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.9);
}


/* ========================================
   TERMS CONTENT
======================================== */

.terms-content {

    position: relative;

    z-index: 2;

    width: min(
        850px,
        90%
    );

    margin: 0 auto;
}


/* ========================================
   TERM ITEM
======================================== */

.term-item {

    position: relative;

    padding: 0 0 85px;

    margin-bottom: 85px;

    text-align: center;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.2);
}


.term-item:last-child {

    border-bottom: none;

    margin-bottom: 0;
}


/* Number */

.term-number {

    display: block;

    margin-bottom: 18px;

    font-family: "Cinzel", serif;

    font-size: 11px;

    letter-spacing: 3px;

    color: rgba(255, 255, 255, 0.6);
}


/* Title */

.term-item h3 {

    font-family: "Vazirmatn", sans-serif;

    font-size: clamp(
        18px,
        2.5vw,
        25px
    );

    font-weight: 500;

    line-height: 1.5;

    color: #fff;
}


/* Small line */

.term-line {

    width: 45px;

    height: 1px;

    margin: 20px auto 0;

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


/* ========================================
   EMPTY SPACE
======================================== */

.term-placeholder {

    min-height: 150px;

    margin-top: 35px;
}


/* ========================================
   FOOTER
======================================== */

.terms-footer {

    position: relative;

    z-index: 2;

    width: min(
        850px,
        90%
    );

    margin: 120px auto 0;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.2);

    font-family: "Cinzel", serif;

    font-size: 9px;

    letter-spacing: 3px;

    color: rgba(255, 255, 255, 0.55);
}


/* ========================================
   COMPACT TERMS PAGE
======================================== */

.terms-page {
    padding: 80px 20px 40px;
}


/* Header */

.terms-header {
    margin-bottom: 75px;
}

.terms-label {
    margin-bottom: 18px;
    font-size: 8px;
    letter-spacing: 4px;
}

.terms-header h1 {
    font-size: clamp(34px, 5vw, 68px);
    letter-spacing: 2px;
}

.terms-header h2 {
    margin-top: 15px;
    font-size: 19px;
}


/* Terms */

.terms-content {
    width: min(760px, 90%);
}

.term-item {
    padding-bottom: 45px;
    margin-bottom: 45px;
}

.term-number {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 2px;
}

.term-item h3 {
    font-size: 17px;
}

.term-line {
    margin-top: 14px;
}

.term-placeholder {
    min-height: 80px;
    margin-top: 20px;
}


/* Footer */

.terms-footer {
    width: min(760px, 90%);
    margin-top: 55px;
    padding-top: 18px;
}