:root {
    --vpd: 6vh;
    --hpd: 22px;
    --navtop: 68px;
    --ease: cubic-bezier(0.59, 0.17, 0.24, 1);
    --rounded: 7px;
    --round: 500px;
    --shadow: 3px 3px 45px 2px #00000014;
    --container-fluid: 1480px;
    --container-sm: 630px;
    --container-md: 970px;
    --container-lg: 1280px;
    --center-cont: calc(100% - var(--hpd)*2);
    --center-cont-sm: calc(100% - var(--hpd)*4);
    --lsp-small: .8px;
    --gap: 25px;
    --gap-2: 5vw;
    --submenu-height: 40vh;
    --slider-nav-size: 45px;
    --pag-pt-gl: calc(var(--navtop) + 15px);
    --white: #fff;
    --offwhite: #fff8e7;
    --primary: #7c3712;
    --secondary: #ff6400;
    --rep: #ff6400;
    --brazil-green: #006E4F;
    --clear-green: #ecfbcb;
    --slate: #222222;
    --grey: #757575;
    --ui-grey: #E8E8E8;
    --ui-borders: #f8601c5c;
    --placeholders: #7c37129c;
    --error: #ff2222;
    --h-font: IvyMode;
    --h-alt-font: Quickpen;
    --font: Graphik;
}

@font-face {
    font-family: "IvyMode";
    src: url("media/IvyMode-Regular.woff2") format("woff2"), url("media/IvyMode-Regular.woff") format("woff"),
        url("media/IvyMode-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik";
    src: url("media/Graphik-Medium.woff2") format("woff2"),
        url("media/Graphik-Medium.woff") format("woff"),
        url("media/Graphik-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik";
    src: url("media/Graphik-Light.woff2") format("woff2"),
        url("media/Graphik-Light.woff") format("woff"),
        url("media/Graphik-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
    background: var(--offwhite);
    color: var(--primary);
    width: 100%;
    height: 100%;
    position: relative;
    font-family: var(--font), sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}


body {
    font-family: var(--font);
    line-height: 1.35;
}

main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
main *{
    text-align: center;
}
.tel{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}
main p {
    padding: 0;
    margin-block-end: 0;
    display: block;
    margin-block-start: 0;
    margin: 0 0 10px 0;
}
.btn.primary-btn {
    font-family: var(--h-font);
    font-size: 21px;
    font-weight: 300;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    display: flex;
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: var(--primary);
}
.social-media {
    display: flex;
    gap: 20px;
}
.logo-wrapper img {
    width: 100%;
}

.logo-wrapper {
    max-width: 240px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--h-font);
    font-weight: 500;
    color: var(--secondary);
    line-height: 1.24;
}

h1,
.h1 {
    .small {
        font-size: 30px;
    }
}

h1 {
    color: var(--primary);
}

p,
.p,
ul li {
    font-family: var(--font), sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: var(--primary);

    &[data-splitting]:not(.h3):not(.h4):not(.h5):not(.alt-font) {
        font-size: 17px;
    }
}

ul li {
    line-height: calc(28px + 0.1vw);
}

h1,
.h1 {
    font-size: clamp(42px, 4.2vw, 52px);
}

.h1-5 {
    font-size: clamp(42px, 4.2vw, 47px);
}

h2,
.h2 {
    font-size: clamp(39px, 3.15vw, 41px);
}

.h2-5 {
    font-size: clamp(43px, 3vw, 39px);
}

h3,
.h3 {
    font-size: calc(30px + 0.45vw);
}

.h3-5 {
    font-size: clamp(24px, 30px, 34px);
}

h4,
.h4 {
    font-size: clamp(24px, 27px, 30px);
}

h5,
.h5 {
    font-size: calc(20px + 0.15vw);
}

h6,
.h6 {
    font-size: 17px;
}

/* Text alignment */

.tc {
    text-align: center;
}

.tl,
.tl>a,
.tl>div {
    text-align: left;
}

.tti {
    text-transform: initial;
}

.ttu {
    text-transform: uppercase;
}

.fsit {
    font-style: italic;
}

.fwi {
    font-weight: 300 !important;
}

.alt-font,
.alt-f {
    font-family: var(--h-alt-font);
    line-height: 120%;
    padding: 10px;
    font-size: clamp(33px, 2.4vw, 36px);

    &.h2,
    &.h1-5 {
        font-size: 32px;
    }
}

blockquote * {
    font-family: var(--h-alt-font);
    color: var(--cream);
    font-size: 46px;
    line-height: 56px;
    margin: 5vh 0 30px;
    padding-left: 10px;
}

.sm-t.ttu {
    font-family: var(--font);
    letter-spacing: var(--lsp-small);
    font-weight: 300;
    text-transform: uppercase;
    font-size: 15px;

}

.sans-font,
.sans-f {
    font-family: var(--font);
    font-weight: 300;

    &.ttu {
        letter-spacing: var(--lsp-small);
        font-weight: 300;
    }
}

.h-font {
    font-family: var(--h-font);
}

.fwb {
    font-weight: 400;
}

b,
strong {
    font-weight: 400;
}

// ========================== */
// Media queries
// ========================== */

@media screen and (max-width: 600px) {
    .h6.ttu {
        font-size: 16px;
    }

    .h2-5 {
        font-size: clamp(35px, 37px, 47px);

    }

    .alt-f,
    .alt-font {

        &.h2,
        &.h2-5,
        &.h3,
        &.h1-5 {
            font-size: 1.75rem;
        }
    }
}

@media screen and (min-width: 1400px) {

    .h2,
    h2 {
        font-size: clamp(49px, 3.2vw, 52px);

    }
}

@media screen and (min-width: 1550px) {

    h1,
    .h1 {
        font-size: clamp(47px, 5vw, 60px);

    }

    .h1-5 {
        font-size: clamp(45px, 5vw, 60px);

    }

    .subh {
        font-size: 19px;
        line-height: 35px;
    }

    p,
    .p,
    ul li {
        font-size: calc(17px + 0.1vw);

    }
}

@media screen and (min-width: 1700px) {

    h1,
    .h1 {
        font-size: 3.25vw;

    }

    .h2,
    h2 {
        font-size: 55px;


        &.alt-f {
            font-size: 46px;

        }
    }

    .h2-5 {
        font-size: 50px;

    }

    .h3-5 {
        font-size: 36px;
    }

    h4,
    .h4 {
        font-size: 27px;

    }

    h3,
    .h3,
    .block-title-centered p,
    .block-title-centered h2,
    .block-title-centered h3,
    .block-title-centered h4 {
        font-size: 42px;
    }

    .btn.alt {
        font-size: calc(28px + 0.25vw);

    }
}