/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: wrap;
    margin-block: 0;
}

/* 9. Create a root stacking context */
#root, #__next {
    isolation: isolate;
}

html :where(.wp-block) {
    max-width: 90%;
}

html {
    scroll-behavior: smooth;
}

body:not(.block-editor-page) {
    font-family: 'MonaSans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

abbr {
    text-decoration: none;
}

a {
    transition: 0.4s all;
}


.nunito-sans {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.nunito-sans-200 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.nunito-sans-300 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.nunito-sans-400 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.nunito-sans-500 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.nunito-sans-600 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.nunito-sans-700 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.nunito-sans-800 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.nunito-sans-900 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.nunito-sans-1000 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 1000;
    font-style: normal;
}

/* ===================== Layout Grid ===================== */
.container, .container-new {
    width: 1270px;
    padding-inline: 24px;
    margin-inline: auto;
    max-width: 100%;
}

.container-full {
    width: 100%;
    padding-inline: 24px;
    margin-inline: auto;
    max-width: 100%;
}

.row, .row-new {
    margin-inline: -24px;
    display: flex;
    flex-wrap: wrap;
}

.hide-xl {
    display: none;
}

.hide-lg {
    display: none;
}

.col-lg-6 {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding-inline: 24px;
    @media screen and (min-width: 991.8px) {
        width: 50%;
        flex-basis: 50%;
    }
}

@media (min-width: 991.8px) {
    .hide-lg {
        display: flex;
    }
}

.show-lg {
    display: flex;
}

@media (min-width: 991.8px) {
    .show-lg {
        display: none;
    }
}

@media (min-width: 1023.9px) {
    .hide-xl {
        display: flex;
    }
}

body {
    position: relative;
    min-height: 100vh;
}

body:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/lines.webp");
    background-repeat: repeat;
    opacity: 0.02;
    z-index: -1;
    background-size: 64px;
}

body.overflow {
    overflow: hidden;
}

/*
==================================
COLORS
==================================
 */
:root {
    --white: #FFF;
    --black: #000;
    --green-100: #DCF2F0;
    --orange-100: #F27038;
    --purple-100: #34195F;
}

.white {
    color: var(--white);
}

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

.orange-100 {
    color: var(--orange-100);
}

.green-100 {
    color: var(--green-100);
}

.purple-100 {
    color: var(--purple-100);
}

