/* ========================================================
* ==========================================
   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:min(1320px,92%);
    margin:0 auto;
}

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

section{
    position:relative;
    padding:120px 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;

}
/* ==========================================
   PREMIUM SECTION SPACING
========================================== */

section{
    position: relative;
    padding: 120px 0;
}

.container{
    width: min(1320px, 92%);
    margin: 0 auto;
}

.section-header{
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.section-subtitle{
    display: inline-block;
    margin-bottom: 18px;
}

.section-title{
    margin-bottom: 20px;
}

.section-description{
    max-width: 650px;
    margin: 0 auto;
}

.card{
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.card:hover{
    transform: translateY(-10px);
    box-shadow:
        0 30px 60px rgba(0,0,0,.12);
}



.btn:hover{
    transform: translateY(-3px);
}

/* ==========================================
   PREMIUM SECTION DIVIDER
========================================== */

section::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:90%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,0,0,.08),
        transparent
    );
}