/* =========================================================
   BYALL GROUP
   BASE / GLOBAL STYLES
========================================================= */

:root {

    /* Official Brand Colors */
    --byall-blue: #0CA3E3;
    --byall-gold: #E9AD14;

    /* Neutral Colors */
    --black: #000000;
    --charcoal: #151515;
    --dark-gray: #292929;
    --gray: #6F7478;
    --light-gray: #F5F5F3;
    --border: #E1E1DF;
    --white: #FFFFFF;

    /* Layout */
    --container: 1240px;
    --page-padding: 4%;

}


/* RESET */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;

    background: var(--white);
    color: var(--charcoal);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;
    width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


ul {
    list-style: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


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

.container {
    width: min(92%, var(--container));
    margin-inline: auto;
}


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

h1,
h2,
h3,
h4 {
    color: var(--black);
    line-height: 1.15;
}


h1 {
    font-size: clamp(48px, 6vw, 78px);
    letter-spacing: -0.045em;
}


h2 {
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -0.035em;
}


h3 {
    font-size: 24px;
}


p {
    font-size: 16px;
}


.section-label {
    display: block;

    margin-bottom: 14px;

    color: var(--byall-blue);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.section-intro {
    max-width: 650px;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.75;
}


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

.section {
    padding: 100px 0;
}


.section-light {
    background: var(--light-gray);
}


.section-dark {
    background: var(--black);
    color: var(--white);
}


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

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 25px;

    border: 0;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .06em;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.btn-primary {
    background: var(--byall-gold);
    color: var(--black);
}


.btn-primary:hover {
    background: var(--byall-blue);
    color: var(--black);
}


.btn-dark {
    background: var(--black);
    color: var(--white);
}


.btn-dark:hover {
    background: var(--byall-blue);
}


.btn-outline {
    border: 1px solid currentColor;
    background: transparent;
}


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

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 5px;

    border-bottom:
        2px solid
        var(--byall-gold);

    font-size: 13px;
    font-weight: 700;
}


.text-link span {
    transition: transform .2s ease;
}


.text-link:hover {
    color: var(--byall-blue);
}


.text-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        var(--byall-blue);

    outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .section {
        padding: 80px 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {
        width: 90%;
    }


    .section {
        padding: 65px 0;
    }


    h1 {
        font-size: 44px;
    }


    h2 {
        font-size: 34px;
    }


    h3 {
        font-size: 21px;
    }

}