/* ==========================================
   KNOWLEDGE Portal
   Global Styles
========================================== */

/* ---------- RESET ---------- */

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

/* ---------- HTML ---------- */

html{

    scroll-behavior:smooth;

    font-size:16px;

}

/* ---------- BODY ---------- */

body{

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

    background:var(--background);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ---------- LINKS ---------- */

a{

    text-decoration:none;

    color:inherit;

}

/* ---------- BUTTON ---------- */

button{

    font-family:inherit;

    border:none;

    outline:none;

    cursor:pointer;

    transition:var(--transition);

}

/* ---------- INPUT ---------- */

input,
textarea,
select{

    font-family:inherit;

    outline:none;

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

    transition:var(--transition);

}

/* ---------- IMAGE ---------- */

img{

    display:block;

    max-width:100%;

}

/* ---------- LIST ---------- */

ul{

    list-style:none;

}

/* ---------- HEADINGS ---------- */

h1{

    font-size:2.75rem;

    font-weight:800;

}

h2{

    font-size:2rem;

    font-weight:700;

}

h3{

    font-size:1.4rem;

    font-weight:600;

}

h4{

    font-size:1.15rem;

    font-weight:600;

}

p{

    line-height:1.6;

    color:var(--text-light);

}

/* ==========================================
   CONTAINER
========================================== */

.container{

    width:min(1400px,95%);

    margin:auto;

}

/* ==========================================
   GLASS CARD
========================================== */

.glass{

    background:var(--glass-bg);

    backdrop-filter:blur(var(--blur));

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

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

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

}

/* ==========================================
   CARD
========================================== */

.card{

    background:var(--surface);

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

    padding:24px;

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-4px);

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

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

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

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

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

}

.btn-secondary:hover{

    background:var(--surface-hover);

}

/* ==========================================
   INPUTS
========================================== */

.input{

    width:100%;

    padding:14px 18px;

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

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

    background:#fff;

    font-size:15px;

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,76,129,.10);

}

/* ==========================================
   LABEL
========================================== */

.label{

    display:block;

    margin-bottom:8px;

    font-size:.90rem;

    font-weight:600;

}

/* ==========================================
   FLEX
========================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================
   GRID
========================================== */

.grid{

    display:grid;

    gap:20px;

}

/* ==========================================
   SPACING
========================================== */

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}

/* ==========================================
   ANIMATIONS
========================================== */

.fade-in{

    animation:fade .35s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.5rem;

    }

    .container{

        width:94%;

    }

}