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

*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


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

html {

    scroll-behavior: smooth;

    font-size: 16px;

}

body {

    min-height: 100vh;

    background: var(--color-background);

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

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

    font-weight: var(--font-weight-regular);

    line-height: 1.5;

    overflow-x: hidden;

}


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

img {

    display: block;

    max-width: 100%;

    height: auto;

}


/*=====================================
    LINKS
======================================*/

a {

    color: inherit;

    text-decoration: none;

}


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

button {

    border: 0;

    margin: 0;

    padding: 0;

    background: none;

    color: inherit;

    font: inherit;

    cursor: pointer;

}


/*=====================================
    LISTS
======================================*/

ul,
ol {

    list-style: none;

}


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

.container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding-left: var(--container-padding);

    padding-right: var(--container-padding);

}


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

section {

    width: 100%;

}


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

.cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 10px 24px;

    border-radius: 999px;

    background: var(--color-olive);

    color: var(--color-white);

    font-size: 13px;

    font-weight: var(--font-weight-medium);

    line-height: 1;

    text-align: center;

    transition: var(--transition-normal);

}

.cta-btn:hover {

    opacity: 0.85;

}


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

button:focus-visible,
a:focus-visible {

    outline: 2px solid var(--color-white);

    outline-offset: 4px;

}


/*=====================================
    SELECTION
======================================*/

::selection {

    background: var(--color-white);

    color: var(--color-black);

}


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

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: var(--color-black);

}

::-webkit-scrollbar-thumb {

    background: #333333;

}

::-webkit-scrollbar-thumb:hover {

    background: #555555;

}


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

@media (max-width: 768px) {

    :root {

        --container-padding: 20px;

        --section-padding: 60px;

    }

}