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

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-accent);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

}

.section-header h2{

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

    font-size:clamp(42px,5vw,64px);

    margin-bottom:20px;

}

.section-header p{

    color:var(--color-text-light);

    max-width:620px;

    margin:auto;

    line-height:1.8;

}

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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 32px;

    border-radius:999px;

    font-size:15px;
    font-weight:600;

    text-decoration:none;

    transition:all .35s ease;

    cursor:pointer;

}

.btn-primary{

    background:#111;
    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.btn-outline{

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

    color:var(--color-text);

}

.btn-outline:hover{

    background:#111;

    color:#fff;

}

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

.card{

    background:#fff;

    border-radius:32px;

    overflow:hidden;

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

    transition:all .35s ease;

}

.card:hover{

    transform:translateY(-8px);

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

}

/* ==================================================
   LINK
================================================== */

.link-arrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--color-text);

    font-weight:600;

    transition:all .35s ease;

}

.link-arrow:hover{

    gap:18px;

}

/* ==================================================
   IMAGE
================================================== */

.image-cover{

    overflow:hidden;

    border-radius:40px;

}

.image-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.image-cover:hover img{

    transform:scale(1.05);

}