/* ========================================================
* ==========================================
   RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--body-font);
    font-size:var(--fs-body);

    color:var(--text-dark);

    background:var(--bg-main);

    overflow-x:hidden;

    line-height:1.7;

}

/* ==========================================
   TYPOGRAPHY
========================================== */

h1,h2,h3,h4,h5,h6{

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

    font-weight:var(--fw-bold);

    color:var(--text-dark);

}

h1{
    font-size:var(--fs-h1);
}

h2{
    font-size:var(--fs-h2);
}

h3{
    font-size:var(--fs-h3);
}

h4{
    font-size:var(--fs-h4);
}

p{

    color:var(--text-light);

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

img{

    width:100%;

    display:block;

}

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

.container{

    width:90%;

    max-width:var(--container-width);

    margin:auto;

}

/* ==========================================
   SECTION
========================================== */

section{

    padding:var(--section-padding) 0;

}

/* ==========================================
   BUTTON
========================================== */
/* ==========================================
PREMIUM BUTTON SYSTEM
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 34px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    transition:all .35s ease;

    cursor:pointer;

    border:none;

    position:relative;

    overflow:hidden;
}

/* Primary */

.btn-primary{

    color:#fff;

    background:linear-gradient(
        135deg,
        #7CC043,
        #4CAF50
    );

    box-shadow:
        0 15px 35px rgba(76,175,80,.28);
}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 25px 45px rgba(76,175,80,.4);
}

/* Outline */

.btn-outline{

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

    transform:translateY(-5px);
}

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

.glass{

    background:var(--glass-bg);

    backdrop-filter:var(--blur);

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

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

/* ==========================================
   TEXT SELECTION
========================================== */

::selection{

    background:var(--primary);

    color:white;

}