:root {
    --container-full-width: 100%;
    --container-boxed-xl: 1440px;
    --container-boxed-l: 1280px;
    --container-boxed-m: 1024px;
    --container-boxed-s: 768px;
    --container-calc-l: calc(100% - 150px);
    --container-calc-m: calc(100% - 100px);
    --container-calc-s: calc(100% - 50px);
    --margin-xl: 100px;
    --margin-l: 75px;
    --margin-m: 50px;
    --margin-s: 25px;
    --light-blue-title: #3CA3AA;
    --light-blue: #D0EAF0;
    --yellow: #FCC800;
    --alternative-yellow: #FCC800;
    --dark-yellow: #bd9806;
    --black: #000;
    --grey: #ccc;
    --white: #fff;
    --title-font: "Outfit", sans-serif;
    --text-font: "Lexend",sans-serif;
}

html, body, main, header, footer  {
    width: var(--container-full-width);
    height: auto;
    margin: 0 auto;
}

/** FONT **/

h1, h2, h3, h4, h5, h6 {
    color: var(--light-blue-title);
    font-family: var(--title-font);
    font-weight: 500;
}

p, span, li, a, label {
    margin: 0;
    line-height: 25px;
    font-family: var(--text-font);
}

ul, ol {
    margin-top: 10px;
    margin-bottom: 10px;
}

ul li {
    margin-bottom: 5px;
}

/** SPACING **/

.mb-0 {
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.mb-s {
    margin-bottom: var(--margin-s);
}

.mt-s {
    margin-top: var(--margin-s);
}

.ml-s {
    margin-left: var(--margin-s);
}

.mr-s {
    margin-right: var(--margin-s);
}

.icon-default-color {
    color: var(--black);
}

/** CONTAINER **/

.container-full-width {
    width: var(--container-full-width);
}

.default-container {
    width: var(--container-calc-l);
    margin: var(--margin-m) auto;
}

/** COMPONENTISTICA **/

/** BOTTONI **/

.primary-button {
    padding: 10px 15px !important;
    background-color: var(--yellow) !important;
    color: var(--black) !important;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 40px !important;
    border: 1px solid var(--yellow) !important;
    outline: 1px solid var(--white) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 13px;
    box-sizing: border-box;
}

.primary-button i {
    font-size: 20px;
}

.primary-button span {
    text-wrap: nowrap;
}

.wpcf7 .wpcf7-submit:disabled .primary-button,
.primary-button:hover {
    color: var(--white);
    background-color: var(--dark-yellow) !important;
    border: 1px solid var(--white) !important;
    outline: 1px solid var(--dark-yellow) !important;
}

@media screen and (max-width: 1024px) {
    html, body {
        overflow-y: scroll;
    }
 
    .default-container {
        width: var(--container-calc-m);
        margin: var(--margin-m) auto;
    }
}

@media screen and (max-width: 600px) {
    .default-container {
        width: var(--container-calc-s);
        margin: var(--margin-s) auto;
    }
}