/* ==========================================
   GLOBAL
========================================== */

body{

    background:var(--bg);

    color:var(--text);

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

    font-size:var(--fs-md);

    overflow-x:hidden;

}


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

.container{

    width:min(100% - 60px,var(--container));

    margin:auto;

}


/* ================================
   HEADINGS
================================ */

h1,h2,h3,h4,h5{

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

    font-weight:700;

    line-height:1.15;

    letter-spacing:-0.5px;

}

h1{

    font-size:clamp(3rem,6vw,5rem);

}

h2{

    font-size:clamp(2.2rem,4vw,3.5rem);

}

h3{

    font-size:1.8rem;

}


/* ================================
   PARAGRAPH
================================ */

p{

    color:var(--text-light);

    line-height:1.8;

    font-size:1.05rem;

}


/* ================================
   SECTIONS
================================ */

section{

    position:relative;

    padding:110px 0;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 28px;

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

    transition:var(--transition);

    font-weight:700;

}

.btn-primary{

    background:var(--primary);

    color:white;

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

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

}

.btn-secondary{

    background:white;

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

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

}

.btn-secondary:hover{

    transform:translateY(-4px);

}


/* ================================
   CARDS
================================ */

.card{

    background:white;

    border-radius:28px;

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

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

}


/* ================================
   IMAGES
================================ */

img{

    user-select:none;

    -webkit-user-drag:none;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F5F4EF;

}

::-webkit-scrollbar-thumb{

    background:#BFD8BB;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8FB38C;

}


/* ================================
   BACKGROUND DECORATION
================================ */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(255,255,255,.65),
    transparent 30%),

    radial-gradient(circle at 90% 10%,
    rgba(127,166,125,.12),
    transparent 28%),

    radial-gradient(circle at 80% 90%,
    rgba(242,198,109,.10),
    transparent 22%);

    z-index:-2;

}


/* ================================
   SMOOTH TRANSITIONS
================================ */

*{

    transition:

    background .3s,

    color .3s,

    border-color .3s;

}


/* ===========================
   EYEBROW
=========================== */

.eyebrow{

    display:inline-block;

    background:var(--primary-light);

    color:var(--primary-dark);

    padding:8px 18px;

    border-radius:999px;

    margin-bottom:22px;

    font-weight:700;

    font-size:15px;

}