/* ==========================================================
   GLOBAL.CSS
========================================================== */

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

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

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

@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================
   Body
========================================================== */

body{

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

    background:var(--bg-page);

    color:var(--text-primary);

    line-height:var(--lh-normal);

    overflow-x:hidden;

}

/* ==========================================================
   Container
========================================================== */

.container{

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

    margin-inline:auto;

}

/* ==========================================================
   Sections
========================================================== */

.section{

    position:relative;

    padding: 46px 0;

    scroll-margin-top: 80px;

}

.section:nth-child(even){

    background:var(--bg-section);

}

/* ==========================================================
   Section Header
========================================================== */

.section-header{

    max-width:850px;

    margin:0 auto 5rem;

    text-align:center;

}

.section-title{

    margin-top:1rem;

    font-size:clamp(
            2.5rem,
            5vw,
            4.2rem
    );

    font-weight:800;

    line-height:1.2;

    letter-spacing:-.03em;

}

#honeyField{

    position: absolute;

    opacity: 0;

    pointer-events: none;

    width: 0;

    height: 0;

}

.section-title span{

    display:block;

    margin-top:.35rem;

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.section-description{

    margin-top:1.8rem;

    font-size:1.15rem;

    line-height:2;

    color:var(--text-secondary);

}

/* ==========================================================
   Hero Label
========================================================== */

.hero-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    width:fit-content;

    max-width:max-content;

    align-self:flex-start;

    padding:.65rem 1.25rem;

    margin-bottom:1.6rem;

    border-radius:999px;

    font-size:.95rem;

    font-weight:700;

    color:var(--color-primary);

    background:rgba(6,182,212,.10);

    border:1px solid rgba(6,182,212,.20);

    white-space:nowrap;

    letter-spacing:.3px;

}

.hero-label::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

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

    box-shadow:0 0 14px var(--color-primary-light);

    flex-shrink:0;

}

/* ==========================================================
   Common Cards
========================================================== */

.card{

    background:var(--gradient-card);

    border:1px solid var(--border-color);

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

    backdrop-filter:blur(18px);

    transition:all .35s ease;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.35);

    box-shadow:var(--shadow-card);

}

/* ==========================================================
   Glass
========================================================== */

.glass{

    background:var(--bg-glass);

    border:1px solid var(--border-light);

    backdrop-filter:blur(20px);

}

/* ==========================================================
   Grid Helpers
========================================================== */

.grid{

    display:grid;

    gap:2rem;

}

.grid-2{

    grid-template-columns:

        repeat(

            2,

            minmax(0,1fr)

        );

}

.grid-3{

    grid-template-columns:

        repeat(

            3,

            minmax(0,1fr)

        );

}

.grid-4{

    grid-template-columns:

        repeat(

            4,

            minmax(0,1fr)

        );

}

/* ==========================================================
   Images
========================================================== */

img{

    width:100%;

    height:auto;

    object-fit:cover;

}

video{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

canvas{

    display:block;

    width:100%;

    height:100%;

}

/* ==========================================================
   Links
========================================================== */

a{

    transition:var(--transition);

}

a:hover{

    color:var(--color-primary);

}

/* ==========================================================
   Utilities
========================================================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none!important;

}

.relative{

    position:relative;

}

.overflow-hidden{

    overflow:hidden;

}

/* ==========================================================
   Reveal Animation
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/* ==========================================================
   Fade Helpers
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:none;

}

.delay-1{

    transition-delay:.15s;

}

.delay-2{

    transition-delay:.3s;

}

.delay-3{

    transition-delay:.45s;

}

.delay-4{

    transition-delay:.6s;

}

/* ==========================================================
   Selection
========================================================== */

::selection{

    background:rgba(37,99,235,.45);

    color:#fff;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .section-description{

        text-align: justify;

    }

}

@media (max-width:768px){

    .section{

        padding-block:2rem;

    }

    .section-header{

        margin-bottom:3rem;

    }

    .section-title{

        font-size:2.3rem;

    }

    .section-description{

        font-size:1rem;

    }

    .grid-2,

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

}