/* ==========================================================
   NOWANA
   Public Design System

   Author  : Arin Rayan Kavir
   Project : Nowana
========================================================== */


/* ==========================================================
   Fonts
========================================================== */

@font-face {
    font-family: "Asre Jadid";
    src: url("../../fonts/AsreJadid/Asre Jadid.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Impact";
    src: url("../../fonts/Impact/IMPACT.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================
   Variables
========================================================== */

:root {

    /* Brand */

    --public-primary:
        #a693ff;

    --public-primary-dark:
        #806cf0;

    --public-secondary:
        #e076ff;

    --public-secondary-dark:
        #c454e5;

    --public-gradient:
        linear-gradient(
            135deg,
            #a693ff 0%,
            #e076ff 100%
        );


    /* Background */

    --public-bg:
        #faf9ff;

    --public-bg-soft:
        #f6f4ff;

    --public-bg-secondary:
        #f1effa;

    --public-surface:
        #ffffff;

    --public-surface-glass:
        rgba(
            255,
            255,
            255,
            0.72
        );


    /* Text */

    --public-text-primary:
        #272532;

    --public-text-secondary:
        #625f70;

    --public-text-muted:
        #9692a3;

    --public-text-light:
        #b4b0bd;


    /* Border */

    --public-border:
        rgba(
            62,
            55,
            85,
            0.09
        );

    --public-border-primary:
        rgba(
            166,
            147,
            255,
            0.20
        );


    /* Status */

    --public-success:
        #27b879;

    --public-warning:
        #f4a63a;

    --public-danger:
        #ef5f6c;

    --public-info:
        #5c8df6;


    /* Radius */

    --public-radius-xs:
        8px;

    --public-radius-sm:
        12px;

    --public-radius-md:
        16px;

    --public-radius-lg:
        22px;

    --public-radius-xl:
        30px;

    --public-radius-2xl:
        40px;

    --public-radius-full:
        999px;


    /* Shadows */

    --public-shadow-xs:
        0 4px 15px
        rgba(
            35,
            27,
            70,
            0.03
        );

    --public-shadow-sm:
        0 10px 30px
        rgba(
            35,
            27,
            70,
            0.06
        );

    --public-shadow-md:
        0 20px 55px
        rgba(
            35,
            27,
            70,
            0.09
        );

    --public-shadow-lg:
        0 30px 80px
        rgba(
            35,
            27,
            70,
            0.13
        );

    --public-shadow-primary:
        0 16px 45px
        rgba(
            166,
            147,
            255,
            0.28
        );


    /* Transition */

    --public-transition:
        0.25s ease;

    --public-transition-slow:
        0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );


    /* Container */

    --public-container:
        1220px;
}


/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;

    -webkit-text-size-adjust:
        100%;
}


body {
    margin:
        0;

    min-width:
        320px;

    overflow-x:
        hidden;

    font-family:
        "Asre Jadid",
        Tahoma,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.8;

    color:
        var(--public-text-primary);

    background:
        var(--public-bg);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body,
button,
input,
textarea,
select {
    font-family:
        "Asre Jadid",
        Tahoma,
        Arial,
        sans-serif;
}


img,
svg {
    max-width:
        100%;
}


img {
    display:
        block;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
textarea,
select {
    font:
        inherit;
}


button {
    border:
        0;
}


ul,
ol {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top:
        0;
}


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

::selection {
    color:
        #ffffff;

    background:
        var(--public-primary);
}


/* ==========================================================
   Scrollbar
========================================================== */

::-webkit-scrollbar {
    width:
        8px;
}


::-webkit-scrollbar-track {
    background:
        #f5f3fa;
}


::-webkit-scrollbar-thumb {
    border-radius:
        20px;

    background:
        linear-gradient(
            180deg,
            #a693ff,
            #e076ff
        );
}


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

.public-container {
    width:
        min(
            calc(100% - 48px),
            var(--public-container)
        );

    margin-inline:
        auto;
}


/* ==========================================================
   Main
========================================================== */

.public-main {
    position:
        relative;

    z-index:
        2;

    min-height:
        80vh;

    padding-top:
        100px;
}


/* ==========================================================
   Decorative Background
========================================================== */

.public-background {
    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


.public-background::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                166,
                147,
                255,
                0.06
            ),
            transparent 40%
        );
}


.public-orb {
    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(80px);

    opacity:
        0.28;

    animation:
        publicOrbFloat
        16s ease-in-out
        infinite alternate;
}


.public-orb--one {
    top:
        -180px;

    right:
        -150px;

    width:
        480px;

    height:
        480px;

    background:
        #a693ff;
}


.public-orb--two {
    top:
        45%;

    left:
        -220px;

    width:
        450px;

    height:
        450px;

    background:
        #e076ff;

    animation-delay:
        -5s;
}


.public-orb--three {
    bottom:
        -250px;

    right:
        35%;

    width:
        380px;

    height:
        380px;

    background:
        #bfaeff;

    animation-delay:
        -9s;
}


@keyframes publicOrbFloat {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                40px,
                35px,
                0
            );
    }

}


/* ==========================================================
   Typography
========================================================== */

.public-title {
    margin-bottom:
        18px;

    font-size:
        clamp(
            34px,
            5vw,
            64px
        );

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.8px;

    color:
        var(--public-text-primary);
}


.public-title-gradient {
    display:
        inline;

    background:
        var(--public-gradient);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;
}


.public-subtitle {
    max-width:
        720px;

    margin-bottom:
        28px;

    font-size:
        clamp(
            16px,
            2vw,
            19px
        );

    line-height:
        2;

    color:
        var(--public-text-secondary);
}


.public-section-title {
    margin-bottom:
        14px;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight:
        700;

    line-height:
        1.45;

    color:
        var(--public-text-primary);
}


.public-section-description {
    max-width:
        680px;

    margin:
        0 auto;

    font-size:
        16px;

    line-height:
        2;

    color:
        var(--public-text-secondary);
}


.public-section-heading {
    max-width:
        780px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


/* ==========================================================
   English Brand Typography
========================================================== */

.public-brand-text {
    font-family:
        "Impact",
        sans-serif;

    font-weight:
        400;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


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

.public-section {
    position:
        relative;

    padding:
        100px 0;
}


.public-section--sm {
    padding:
        70px 0;
}


.public-section--lg {
    padding:
        130px 0;
}


.public-section--soft {
    background:
        linear-gradient(
            180deg,
            rgba(
                166,
                147,
                255,
                0.035
            ),
            rgba(
                224,
                118,
                255,
                0.025
            )
        );
}


/* ==========================================================
   Eyebrow / Badge
========================================================== */

.public-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        34px;

    margin-bottom:
        18px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(
            166,
            147,
            255,
            0.18
        );

    border-radius:
        var(--public-radius-full);

    color:
        var(--public-primary-dark);

    background:
        rgba(
            166,
            147,
            255,
            0.07
        );

    font-size:
        12px;

    font-weight:
        600;
}


.public-eyebrow::before {
    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--public-gradient);

    box-shadow:
        0 0 0 4px
        rgba(
            166,
            147,
            255,
            0.10
        );
}


/* ==========================================================
   Generic Card
========================================================== */

.public-card {
    position:
        relative;

    padding:
        28px;

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

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

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

    box-shadow:
        var(--public-shadow-sm);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        transform var(--public-transition-slow),
        box-shadow var(--public-transition-slow),
        border-color var(--public-transition-slow);
}


.public-card:hover {
    transform:
        translateY(-6px);

    border-color:
        var(--public-border-primary);

    box-shadow:
        var(--public-shadow-md);
}


/* ==========================================================
   Icon Box
========================================================== */

.public-icon-box {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        20px;

    border-radius:
        16px;

    color:
        var(--public-primary-dark);

    background:
        linear-gradient(
            135deg,
            rgba(
                166,
                147,
                255,
                0.14
            ),
            rgba(
                224,
                118,
                255,
                0.10
            )
        );

    border:
        1px solid
        rgba(
            166,
            147,
            255,
            0.16
        );
}


/* ==========================================================
   Buttons
========================================================== */

.public-btn--secondary {
    color:
        var(--public-text-primary);

    background:
        #ffffff;

    border-color:
        var(--public-border);

    box-shadow:
        var(--public-shadow-xs);
}


.public-btn--secondary:hover {
    color:
        var(--public-primary-dark);

    border-color:
        var(--public-border-primary);

    box-shadow:
        var(--public-shadow-sm);

    transform:
        translateY(-2px);
}


.public-btn--lg {
    min-height:
        54px;

    padding:
        0 26px;

    border-radius:
        16px;

    font-size:
        15px;
}


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

.public-grid {
    display:
        grid;

    gap:
        24px;
}


.public-grid--2 {
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
}


.public-grid--3 {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}


.public-grid--4 {
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
}


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

.public-text-center {
    text-align:
        center;
}


.public-text-muted {
    color:
        var(--public-text-muted);
}


.public-text-primary {
    color:
        var(--public-primary);
}


.public-mt-0 {
    margin-top:
        0;
}


.public-mb-0 {
    margin-bottom:
        0;
}


/* ==========================================================
   Divider
========================================================== */

.public-divider {
    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                166,
                147,
                255,
                0.18
            ),
            transparent
        );
}


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

.public-glass {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.62
        );

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

    box-shadow:
        var(--public-shadow-md);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


/* ==========================================================
   Accessibility
========================================================== */

:focus-visible {
    outline:
        3px solid
        rgba(
            166,
            147,
            255,
            0.32
        );

    outline-offset:
        3px;
}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}