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

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--font);

    line-height:1.6;

    transition:background .4s,color .4s;

}

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

.container{

    width:min(92%,var(--container));

    margin:auto;

}

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

section{

    padding:var(--section) 0;

}

/* ==========================================
   TITLES
========================================== */

h1,h2,h3,h4{

    font-family:var(--title);

    font-weight:700;

    color:var(--text);

}

h1{

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

    line-height:1.1;

}

h2{

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

}

p{

    color:var(--text-light);

    font-size:1.05rem;

}

/* ==========================================
   BUTTON
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.7rem;

    padding:15px 28px;

    border-radius:var(--radius);

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#FFF;

}

.btn-primary:hover{

    transform:translateY(-3px);

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

}

.btn-outline{

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

}