/** icons **/

[class^="icon-"], [class*=" icon-"] {
    speak: never;

    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-family: 'icomoon' !important;

    line-height: 1;
    text-transform: none;
}

.icon-play:before { content: "\e905" }
.icon-pin:before { content: "\e900" }
.icon-arrow:before { content: "\e904" }
.icon-phone:before { content: "\e903" }
.icon-linkedin:before { content: "\e902" }
.icon-instagram:before { content: "\e901" }
.icon-envelope:before { content: "\f0e0" }
.icon-youtube:before { content: "\f16a" }
.icon-facebook:before { content: "\f230" }
.icon-whatsapp:before { content: "\e906" }


/** reset **/

* {
    border: 0;
    border-radius: 0;

    margin: 0;
    padding: 0;

    resize: none;
    outline: none;

    box-sizing: border-box;
    background: transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-display: swap !important;
}

a {
    text-decoration: none;
}

ul,
ol,
li {
    list-style: none;
}

svg,
img {
    width: 100%;
    height: auto;
    display: block;
}

html,
body {
    overflow-x: hidden;

    font-size: 10px;
    line-height: 10px;

    background-color: #f5f5f5;
}

button {
    cursor: pointer;
}


/** shared **/

.flex        { display: flex }
.flex.wrap   { flex-wrap: wrap }
.flex.inline { display: inline-flex }
.flex.column { flex-direction: column }

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .grow   { flex-grow: 1 }
.flex > .shrink { flex-shrink: 1 }

.flex.al-end    { align-items: flex-end }
.flex.al-start  { align-items: flex-start }
.flex.al-center { align-items: center }

.flex.jf-end     { justify-content: flex-end }
.flex.jf-start   { justify-content: flex-start }
.flex.jf-center  { justify-content: center }
.flex.jf-around  { justify-content: space-around }
.flex.jf-between { justify-content: space-between }

.z-top    { z-index: 10 }
.z-middle { z-index: 5 }
.z-bottom { z-index: 1 }

.for-display {
    speak: none;
}

.for-sreader {
    width: 0;
    height: 0;

    display: block;
    overflow: hidden;

    font-size: 14px;
    line-height: 16px;

    text-indent: -5000vw;
}

.wrapper {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 101.0rem;
}


/** button **/

.btn {
    color: #ffffff;

    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;

    gap: 15px;
    padding: 1.0rem 3.5rem;
    border-radius: 2.0rem;

    transition: color 0.3s ease,
                background 0.3s ease;

    background: #00AABC;
}

.btn i {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.whatsapp {
    z-index: 100;

    right: 20px;
    bottom: 20px;

    width: 8.0rem;
    height: 8.0rem;

    position: fixed;
    transition: transform 0.3s ease-out;
    box-shadow: 0 0.4rem 0.4rem rgba(0,0,0, 0.1);

    color: #ffffff;
    background: #00AABC;

    font-size: 4rem;
    border-radius: 50%;
}

@media (any-hover: hover) {
    .btn:hover {
        background: #004E5A;
    }

    .btn:hover i {
        transform: translateX(0.8rem);
    }

    .whatsapp:hover {
        transform: scale(1.1);
    }
}


/** header **/

.banner,
.banner .wrapper {
    height: 38vw;
    position: relative;
    min-height: 56rem;
}

.banner:after {
    inset: 0;
    z-index: 2;

    content: '';
    display: block;
    position: absolute;

    background: rgba(0,0,0,0.4);
}

.banner .bg {
    inset: 0;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

.banner h1 {
    color: #ffffff;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
}

.banner h1 small {
    font-size: 0.8em;
    font-weight: 400;
}

.banner h1 strong {
    font-size: 1.4em;
    font-weight: 800;
}

.banner a {
    margin: 2rem 0 0;
    width: 35rem;
}

.banner .badge {
    width: 20rem;
    margin: 0 0 2rem;
    filter: brightness(100);
}

.header {
    margin: 0 0 -2rem;
    padding: 6.0rem 0 0;
    overflow: visible;
    position: relative;
}

.header:after {
    top: -120rem;
    left: 55%;

    width: 140rem;
    height: 140rem;

    content: '';
    display: block;
    position: absolute;

    border: 6.0rem solid #00A66C;
    border-radius: 50%;
}

.header h2 {
    color: #273b5d;

    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Raleway', sans-serif;

    letter-spacing: -0.01em;
}

.header h2 small {
    font-size: 0.67em;
    font-weight: 500;
}

.header h2 strong {
    font-weight: 800;
    background: #d3e1f1;
}


/** sections **/

.section-text {
    padding: 12.0rem 0;
}

.section-text p,
.section-text ul {
    color: #333333;

    font-size: 2.0rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: 'Raleway', sans-serif;

    margin-bottom: 3.0rem;
}

.section-text h3 {
    color: #004E5A;

    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;

    margin-bottom: 4.0rem;
}

.section-text img {
    width: 150%;
}

.section-text .column-text { width: 55% }
.section-text .column-image { width: 35% }

.section-text.with-circle,
.section-text.with-outline,
.section-text.with-large-circle {
    position: relative;
}

.section-text.with-circle:after,
.section-text.with-outline:after,
.section-text.with-large-circle:after {
    background: #00A66C;

    top: 20.0rem;
    left: -60.0rem;
    width: 50.0rem;
    height: 50.0rem;

    content: '';
    display: block;
    position: absolute;

    border-radius: 50%;
}

.section-text.with-outline:after {
    left: auto;
    right: -75.0rem;

    width: 65.0rem;
    height: 65.0rem;
    border: 1px solid #00AABC;

    background: transparent;
}

.section-text.with-large-circle:after {
    top: 40rem;
    left: auto;
    right: -80rem;

    width: 80rem;
    height: 80rem;

    background: #00AABC;
}


/** intro **/

#intro {
    position: relative;
}

#intro img {
    margin-top: -18rem;
}


/** testimonials **/

#testimonials,
#testimonials .section-text {
    position: relative;
}

#testimonials {
    background: #E8E8E8;
}

#testimonials:after {
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;
    height: 36.0rem;

    content: '';
    display: block;
    position: absolute;

    background: #f5f5f5;
}

#testimonials .videos {
    margin: -10rem auto 0;
    padding: 0 0 12rem;
    position: relative;
}

#testimonials .videos .video {
    width: calc(33.3333% - 1.5rem);

    overflow: hidden;
    position: relative;

    border-radius: 2.0rem;
}

#testimonials .videos .video:after {
    cursor: pointer;

    inset: 0;
    z-index: 2;

    content: '';
    display: block;
    position: absolute;
    transition: background 0.3s ease-out;

    background: rgba(0,0,0, 0.4);
}

#testimonials .videos .video i {
    cursor: pointer;

    top: 50%;
    left: 50%;
    width: 10.0rem;
    height: 10.0rem;
    font-size: 6.0rem;

    z-index: 3;
    position: absolute;
    transform: translate(-50%,-50%);
    transition: transform 0.3s ease-out;

    color: #ffffff;
    border: #ffffff 1px solid;
    border-radius: 50%;
}

#testimonials .videos .video video {
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    position: absolute;
}

#testimonials .videos .btn-wrapper {
    width: 100%;
    margin: 6rem 0 0;
}


@media (any-hover: hover) {
    #testimonials .videos .video:hover:after {
        background: rgba(0,0,0, 0.1);
    }

    #testimonials .videos .video:hover i {
        transform: translate(-50%,-50%) scale(1.1);
    }
}


/** differentials **/

#differentials {
    overflow: hidden;
    position: relative;
}

#differentials p,
#differentials h2,
#differentials li {
    text-align: center;
}

#differentials li {
    font-size: 0.8em;
    font-weight: 600;
}

#differentials li .sep,
#differentials li .sep:after,
#differentials li .sep:before {
    position: relative;
    background: #00AABC;

    width: 1.0rem;
    height: 1.0rem;
    margin: 1.0rem auto;

    border-radius: 50%;
}

#differentials li .sep:after,
#differentials li .sep:before {
    top: 0;
    margin: 0;
    content: '';
    display: block;
    position: absolute;
}

#differentials li .sep:after {
    left: -2rem;
    background: #B34215;
}

#differentials li .sep:before {
    right: -2rem;
    background: #00A66C;
}

#differentials .sep-cta {
    margin: 5rem 0 0;
}

#differentials .splide {
    margin: -5rem 0 0;
}

#differentials .splide__arrows {
    z-index: 2;

    top: 50%;
    width: 100%;
    height: 0;

    display: flex;
    overflow: visible;
    position: absolute;

    align-items: center;
    justify-content: space-between;
}

#differentials .splide__arrows .splide__arrow svg path {
    fill: white;
}

#differentials .splide__arrows .splide__arrow--prev {
    width: 4rem;
    margin: -2rem auto 0 4rem;
    transform: scale(-1);
}

#differentials .splide__arrows .splide__arrow--next {
    width: 4rem;
    margin: -2rem 4rem 0 auto;
}

#differentials .splide__pagination {
    margin: 4rem 0 0;
    display: flex;
    align-items: center;
}

#differentials .splide__pagination .splide__pagination__page {
    width: 1.6rem;
    height: .8rem;
    margin: 0 .4rem;
    border-radius: .8rem;
    background: #ccc;
    transition: 0.3s ease-out;
}

#differentials .splide__pagination .splide__pagination__page.is-active {
    width: 4.2rem;
    background: #004e5a;
}

#differentials .btn {
    margin: 4rem 0;
}

#differentials .form p,
#differentials .form h2,
#differentials .form li {
    text-align: left;
}

#differentials .form .column-text,
#differentials .form .column-image {
    width: 48%;
}

form > .group {
    margin: 0 0 1.2rem;
    position: relative;
}

form .group.g-sm {
    flex: 0 0 35%;
    max-width: calc(35% - .6rem);
}

form .group.g-md {
    flex: 0 0 65%;
    max-width: calc(65% - .6rem);
}

form .group.g-lg {
    flex: 0 0 50%;
    max-width: calc(50% - 1.2rem);
}

form .group input,
form .group textarea,
form .group ::placeholder {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 3.0rem;
    font-family: 'Raleway', sans-serif;

    color: var(--dark);
}

form .group input[disabled],
form .group textarea[disabled],
form .group button[disabled] {
    opacity: 80%;
}

form .group input,
form .group textarea {
    border: 0;
    width: 100%;
    height: 4.5rem;
    padding: 0 1.5rem;
    border-radius: .5rem;
    background: #E6E6E6;
}

form .group textarea {
    height: 14.5rem;
    padding-top: .5rem;
}

form .message {
    width: 100%;
    display: block;
    overflow: hidden;

    transition: height 0.3s ease;

    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.5rem;
    font-family: 'Raleway', sans-serif;
    color: #B34215;
}

form .submitter {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

form .submitter .message {
    width: auto;
    color: #00A66C;
    text-transform: uppercase;
}



/** footer **/

.footer {
    padding: 6.0rem 0;
    background: #004E5A;
}

.footer h2 {
    width: 55%;
    color: #00AABC;

    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;
}

.footer .line-2 {
    margin-top: 4rem;
}

.footer .line-2 .unit {
    color: #ffffff;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;

    margin-right: 4.0rem;
}

.footer .line-2 .unit a,
.footer .line-2 .unit strong {
    font-size: 1.8rem;
    font-weight: 600;
}

.footer .line-2 .unit a {
    color: #ffffff;
    font-size: 1.6rem;
    margin-top: 1rem;
}

.footer .line-2 .unit a i {
    margin-right: 1rem;
}

.footer .line-2 .unit strong {
    display: block;
    margin-bottom: 1rem;
}

.footer .line-2 .brand {
    width: 18rem;
    margin: 0 0 0 auto;
}


@media (any-hover: hover) {
    .footer .line-2 .unit a:hover {
        text-decoration: underline;
    }
}


/** responsive **/

@media (max-width: 1300px) {
    html, body {
        font-size: 8px;
    }
}

@media (max-width: 950px) {
    #intro img {
        width: 120%;
        margin-top: 0;
    }

    #testimonials .column-text,
    #differentials .column-text,
    #differentials .form .column-text,
    #differentials .form .column-image {
        width: 100%;
    }

    #differentials .form .column-text {
        margin: 0 0 8rem;
    }
}

@media (max-width: 760px) {
    .btn {
        font-size: 1.8rem;
    }

    .whatsapp {
        right: 15px;
        bottom: 15px;
    }

    .section-text {
        padding: 8.0rem 0;
    }

    .section-text p,
    .section-text ul {
        font-size: 1.8rem;
        margin-bottom: 2.0rem;
    }

    .section-text h3 {
        font-size: 2.5rem;
    }

    .banner h1 {
        font-size: 3.5rem;
    }

    .banner .badge {
        width: 14rem;
    }

    .banner,
    .banner .wrapper {
        min-height: 42rem;
    }

    .banner a {
        width: 25rem;
    }

    .header,
    .banner .wrapper {
        flex-wrap: wrap;
    }

    .header:after {
        top: -50rem;
        left: 70%;
        width: 70rem;
        height: 70rem;
        border-width: 3rem;
    }

    .header h2 {
        width: 100%;
        font-size: 3.5rem;
    }

    #intro .column-text,
    #intro .column-image {
        width: 100%;
    }

    #intro .column-image {
        display: none;
    }

    #intro .section-text {
        flex-wrap: wrap;
    }

    #testimonials .videos {
        margin: -5rem auto 0;
        padding: 0 0 8rem;
        flex-wrap: wrap;
    }

    #testimonials .videos .video {
        width: 100%;
        margin: 0 0 2rem;
    }

    #differentials li {
        font-size: 0.9em;
    }

    form .group.g-lg {
        flex: 0 0 100%;
        max-width: calc(100%);
    }

    form > .group.wrap {
        margin: 0;
    }

    form > .group .group.g-lg {
        margin: 0 0 1.2rem;
    }

    .footer .wrapper {
        flex-wrap: wrap;
    }

    .footer h2 {
        width: 100%;
        text-align: center;
    }

    .footer h2 br {
        display: none;
    }

    .footer .line-2 {
        align-items: center;
        flex-direction: column;
    }

    .footer .line-2 .unit {
        width: 22rem;
        margin: 0 0 4rem;
        text-align: center;
    }

    .footer .line-2 .brand {
        margin: 2rem 0 0;
    }
}