*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg-color:#f8fbff;

    --sidebar-color:
    rgba(255,255,255,0.72);

    --card-color:
    rgba(255,255,255,0.58);

    --primary:#5da9ff;

    --primary-dark:#3b82f6;

    --text:#0f172a;

    --text-gray:#64748b;

    --border:
    rgba(15,23,42,0.06);

}

/* =========================
   HTML / BODY
========================= */

html,
body{

    overflow-x:hidden;

    min-height:100%;

}

body{

    font-family:
    'Poppins',sans-serif;

    color:var(--text);

    background:

    radial-gradient(
        circle at top right,
        rgba(93,169,255,0.10),
        transparent 24%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(147,197,253,0.14),
        transparent 28%
    ),

    linear-gradient(
    180deg,
    #edf4fb 0%,
    #dfeffc 100%
);

    background-attachment:fixed;

}

/* =========================
   LINKS
========================= */

a{

    text-decoration:none;

    color:inherit;

}

/* =========================
   IMG
========================= */

img{

    width:100%;

    display:block;

}

/* =========================
   LOGO
========================= */

.logo-img{

    height: 48px;

    width: auto;

    object-fit: contain;

    display: block;

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#e7f0fa;

}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    180deg,
    #edf4fb 0%,
    #dfeffc 100%
);
    border-radius:20px;

}

/* =========================
   BG GLOW
========================= */

body::before{

    content:'';

    position:fixed;

    width:600px;
    height:600px;

    background:
    rgba(93,169,255,0.10);

    filter:blur(160px);

    top:-220px;
    right:-160px;

    z-index:-1;

    pointer-events:none;

}

body::after{

    content:'';

    position:fixed;

    width:500px;
    height:500px;

    background:
    rgba(147,197,253,0.14);

    filter:blur(160px);

    bottom:-220px;
    left:120px;

    z-index:-1;

    pointer-events:none;

}

/* =========================
   GLASS EFFECT
========================= */

.glass{

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

    backdrop-filter:blur(20px);

    border:
    1px solid rgba(255,255,255,0.65);

    box-shadow:
    0 10px 30px rgba(93,169,255,0.08);

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(20px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}