@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500;600;700;900&display=swap');

:root {
    --width-full: clamp(15px, 5vw, 50px);
    --width-xl: max(clamp(15px, 5vw, 50px), calc(50% - 710px));
    --width-l: max(clamp(15px, 5vw, 50px), calc(50% - 600px));
    --width-m: max(clamp(15px, 5vw, 50px), calc(50% - 430px));
    --width-s: max(clamp(15px, 5vw, 50px), calc(50% - 325px));

    --padding-l: clamp(15px, 12.5vw, 300px);
    --padding-m: clamp(15px, 10vw, 200px);
    --padding-s: clamp(15px, 4vw, 100px);

    --gap-xl: clamp(20px, 5vw, 80px);
    --gap-l: clamp(15px, 3vw, 60px);
    --gap-m: clamp(15px, 2vw, 40px);
    --gap-s: clamp(10px, 2vw, 20px);
    --gap-xs: 10px;

    /*Colors*/
    --error: var(--red);

    --red: #AC182D;
    --white: #FFFFFF;
    --l-grey: #F5F5F5;
    --l-blue: #F5FAFF;
    --m-gray: #AFAFAF;
    --blue: #007FC7;
    --d-grey: #393939;
    --black: #262626;
    --font-grey: #666;
    --cyan: #00D7B0;

    --gradient: linear-gradient(98deg, #02A4CE 29.33%, #0068B3 93.33%);
}

body, textarea, input, select {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.8vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

h1, h2, h3, h4, h5, h6, .hero, .title-large, .title-medium, .title-small, .button {
    font-family: "Poppins", sans-serif;
    line-height: 1.25em;
    font-weight: 900;
    margin: min(0.5em, 30px) 0;

}

.hero {
    font-size: clamp(40px, 6.4vw, 64px);
}

h1, h2, .title-large {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 300;
}

h3, .title-medium {
    font-size: clamp(24px, 3.5vw, 35px);
    line-height: 1.428em;
}

h4, .title-small {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 600;
    line-height: 0.733em;
}

h5 {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5em;
    font-weight: 500;

}

h6, .button {
    font-size: 14px;
    line-height: 1.571em;
    letter-spacing: 4.2px;
    text-transform: uppercase;
    font-weight: 600;
}

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

.minus-margin + * {
    margin-top: 5px;
}

.light-text {
    font-weight: 300;
}

.regular-text {
    font-weight: 400;
}

.semi-bold-text {
    font-weight: 600;
}

.underline {
    text-decoration: underline;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--cyan);
}

.alignleft {
    float: left;
    margin-right: 20px;
}

.alignright {
    float: right;
    margin-left: 20px;
}

.aligncenter {
    margin: auto;
    text-align: center;
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

div.wp-caption {
    max-width: 100%;
    display: inline-block;
}

p.wp-caption-text {
    background-color: #f7f7f7;
    color: #808080;
    padding: 16px 25px;
    font-size: 18px;
    font-style: italic;
}

.mce-content-body span[style="color: #ffffff;"] {
    color: #ddd !important;
}


.button {
    padding: 16px 24px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    background: var(--gradient);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    transition: 0.2s ease;
    border-radius: 100px;
    margin: 0 5px 0 0;
    border: none;
}

.button:hover {
    top: 3px;
    left: 5px;
    color: #fff;
}

.button.white {
    background: white;
    color: var(--blue);
    /*border: 1px solid transparent;*/

}

.button.black_outline {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--d-grey);
}

.button.full-width {
    width: 100%;
    color: initial;
    border-bottom: 1px solid black;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    padding-right: 50px;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 20px;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 600;
    line-height: 1em;
    text-transform: none;
    letter-spacing: 0;
    gap: 10px;
}

.button.full-width:after {
    content: '';
    background: calc(100% - 20px) / 22px 16px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' fill='none'%3e%3cpath fill='%23000000' fill-rule='evenodd' d='m15.3 1 6.4 6.3c.4.4.4 1 0 1.4l-6.4 6.4a1 1 0 0 1-1.4-1.4L18.6 9H1a1 1 0 0 1 0-2h17.6l-4.7-4.7A1 1 0 0 1 15.3 1Z' clip-rule='evenodd'/%3e%3c/svg%3e");
    position: absolute;
    inset: 0;
}

.bg_black .button.full-width:after {
    background: calc(100% - 20px) / 22px 16px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' fill='none'%3e%3cpath fill='%23FFFFFF' fill-rule='evenodd' d='m15.3 1 6.4 6.3c.4.4.4 1 0 1.4l-6.4 6.4a1 1 0 0 1-1.4-1.4L18.6 9H1a1 1 0 0 1 0-2h17.6l-4.7-4.7A1 1 0 0 1 15.3 1Z' clip-rule='evenodd'/%3e%3c/svg%3e");
}

.button.full-width:hover:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' fill='none'%3e%3cpath fill='%23007Fc7' fill-rule='evenodd' d='m15.3 1 6.4 6.3c.4.4.4 1 0 1.4l-6.4 6.4a1 1 0 0 1-1.4-1.4L18.6 9H1a1 1 0 0 1 0-2h17.6l-4.7-4.7A1 1 0 0 1 15.3 1Z' clip-rule='evenodd'/%3e%3c/svg%3e")
}

.button.full-width span {
    text-wrap: nowrap;
}

@media (max-width: 600px) {
    .button.full-width span {
        text-wrap: wrap;
        min-width: 30%;
    }
}

.button.full-width:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.mce-content-body a.button[data-mce-selected] {
    padding: 8px 20px;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}


button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
}

/* bullet points */

ul.check_ul {
    list-style: none;
    padding: 0;
}

ul.check_ul > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

ul.check_ul > li:last-child {
    margin-bottom: 0;
}

ul.check_ul > li::before {
    content: '';
    margin-right: 15px;
    min-width: 20px;
    min-height: 20px;
    background: center / 16px 12px no-repeat url("data:image/svg+xml,%3Csvg width='16' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.43 12.23-5.2-5.2a.8.8 0 0 1 0-1.13l1.14-1.13a.8.8 0 0 1 1.13 0L6 8.27l7.5-7.5a.8.8 0 0 1 1.13 0l1.14 1.13a.8.8 0 0 1 0 1.13l-9.2 9.2a.8.8 0 0 1-1.14 0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}

@media (max-width: 450px) {
    .button {
        min-width: 100%;
        box-sizing: border-box;
        margin: 0 0 8px 0;
    }
}