@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&display=swap");

@use "@material/list/mdc-list"; @use "@material/menu-surface/mdc-menu-surface"; @use "@material/menu/mdc-menu"; * {
                                                                                                                    -webkit-font-smoothing: antialiased;
                                                                                                                    -moz-osx-font-smoothing: grayscale
                                                                                                                }

html, body, main {
    margin: 0;
    padding: 0;
    font-family: 'Blinker'
}

p {
    font-family: "Open Sans";
    font-size: 20px
}

h3 {
    font-size: 24px;
    font-weight: 600;
    color: #28697C
}

h4 {
    font-size: 18px;
    font-weight: 600;
    color: #28697C
}

.services, .how-we-work, .testimonials, .articles, .cta {
    margin-top: 140px
}

main address {
    text-align: center
}

@media screen and (max-width: 768px) {
    main h1 {
        font-size: 37px
    }
}

@media screen and (max-width: 768px) {
    address a {
        font-size: 16px
    }
}

body {
    font-family: "Blinker"
}

header {
    position: fixed;
    background: #fff;
    width: 100%;
    z-index: 9
}

.logo-mobile, .menu-mobile {
    display: none
}

main {
    padding-top: 142px
}

.main-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 80px;
    height: 111px
}

.configs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 30px;
    padding: 0 80px;
    border-bottom: 0.5px solid #eaeaea
}

.configs select {
    border-color: transparent;
    font-size: 12px;
    font-family: "Open Sans"
}

.configs #language option:before {
    content: "";
    background-image: url("../images/pt.svg")
}

nav.menu-desktop img {
    margin: 16px 0;
    width: 205px;
    height: 79px
}

nav.menu-desktop a {
    display: inline-block;
    color: #1e1e1e;
    font-size: 18px;
    text-decoration: none;
    margin-right: 16px
}

nav.menu-desktop a:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative
}

nav.menu-desktop a:hover:before {
    content: '';
    display: inline-block;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    background-color: #FFD31F;
    position: relative;
    z-index: -1;
    top: 6px;
    left: 13px
}

.selected-page:before {
    content: '';
    display: inline-block;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    background-color: #FFD31F;
    position: relative;
    z-index: -1;
    top: 6px;
    left: 13px
}

ul {
    list-style: none
}

main h1 {
    font-size: 72px;
    font-weight: bold;
    text-align: left;
    max-width: 630px;
    color: #1e1e1e
}

.mdc-button:not(:disabled) {
    font-family: 'Blinker';
    background-color: #1e1e1e;
    color: #FFD31F;
    border-radius: 40px;
    padding: 20px 40px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2px
}

.mdc-button:hover {
    background-color: #28697C
}

.opening {
    height: 810px;
    display: flex;
    align-items: center;
    background-image: url("../images/home_extendida_1.png");
    padding: 0 80px
}

.opening:after {
    content: '';
    display: block;
    border-radius: 16%;
    width: 100%;
    height: 200px;
    background-color: #f9cc48;
    position: absolute;
    left: 0;
    bottom: -156px;
    z-index: -1
}

.content-opening {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

h2 {
    font-size: 40px;
    color: #1e1e1e;
    text-align: center
}

article {
    padding: 0 80px
}

.services {
    text-align: center
}

.services ul {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-around
}

.services li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.services li div {
    width: 197px;
    height: 197px;
    display: flex;
    align-items: center;
    justify-content: center
}

.services li div:before {
    content: '';
    width: 197px;
    height: 197px;
    display: block;
    background-color: #FFD31F;
    border-radius: 100%;
    position: absolute;
    z-index: -1
}

.how-we-work article {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0
}

.how-we-work article div {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column
}

.how-we-work article img {
    height: 215px;
    margin-right: 10px
}

.how-we-work .mdc-touch-target-wrapper {
    display: block;
    text-align: center;
    margin-top: 40px
}

.mdc-button:not(:disabled).btn-secondary {
    background-color: transparent;
    color: #1e1e1e;
    border: 1px solid #1e1e1e
}

.mdc-button:not(:disabled).btn-secondary:hover {
    color: #fff;
    background-color: #1e1e1e
}

.how-we-work-content {
    display: flex;
    padding: 0 80px
}

.testimonials {
    background-color: #FFD31F;
    background-image: url("../images/ball-bg.png");
    background-position: center;
    padding: 32px 290px 100px 290px
}

.testimonials .testimonial-1, .testimonials .testimonial-2 {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    min-width: 515px;
    height: 128px;
    margin-right: 16px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)
}

.testimonials .text {
    font-size: 14px;
    padding-left: 40px
}

.testimonials .text:before {
    content: " '' ";
    display: block;
    font-size: 72px;
    font-weight: bold;
    color: #FFD31F;
    position: absolute;
    margin: -21px 0 0 -43px
}

.testimonials img {
    margin-right: 10px
}

.testimonials .testimonial-info {
    display: flex
}

.testimonials h4 {
    margin: 10px 0
}

.testimonials .info-container p {
    font-size: 18px;
    font-family: "Blinker";
    color: #28697C;
    margin: 0
}

.testimonials .carousel {
    padding: 0;
    max-width: 850px;
    overflow: hidden;
    display: flex
}

.testimonials .static-container {
    position: relative
}

.testimonials .static-container .arrow {
    margin: 0;
    position: absolute;
    right: -10px;
    top: 39%
}

.articles {
    padding: 0 80px
}

.articles h2 {
    text-align: left
}

.cta {
    text-align: center
}

.posts-container {
    position: relative
}

.posts-container .static-container {
    display: flex;
    overflow: hidden;
    padding: 0 0 10px 10px
}

.posts-container .button-txt {
    float: right;
    padding: 20px
}

.posts-container article {
    padding: 0;
    width: 270px;
    border-radius: 8px;
    display: block;
    overflow: hidden;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)
}

.posts-container article img {
    height: 154px
}

.posts-container h4, .posts-container p {
    margin: 16px 20px;
    text-decoration: none
}

.posts-container p {
    font-size: 14px
}

.posts-container a {
    text-decoration: none;
    color: initial;
    margin-right: 16px
}

.posts-container .arrow {
    margin: 0;
    position: absolute;
    right: -10px;
    top: 39%
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30px
}

footer p:last-child {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px
}

footer img {
    height: 275px
}

footer .footer-infos {
    height: 500px;
    background-color: #FFD31F;
    top: 35px;
    position: relative
}

footer .footer-infos:before {
    content: '';
    display: block;
    border-radius: 16%;
    width: 100%;
    height: 200px;
    background-color: #FFD31F;
    position: absolute;
    top: -35px;
    z-index: -1
}

footer .newsletter {
    display: flex;
    padding: 0 300px;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px
}

footer .newsletter .mdc-button.btn-secondary {
    margin-left: 30px
}

footer .newsletter .mdc-text-field {
    width: 310px;
    background: #FFF7CF
}

footer .contact {
    display: flex;
    align-items: center;
    padding: 0 300px;
    justify-content: space-between;
    margin-top: 110px
}

footer .contact img {
    width: 35px;
    height: 35px;
    margin: 0 5px
}

footer .contact address {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    font-size: 20px;
    font-style: normal;
    font-weight: normal
}

footer .contact address a {
    color: #1e1e1e;
    text-decoration: none;
    margin: 5px 0
}

.contact-page, .how-we-work-page, .services-page, .about-us-page {
    padding: 200px 80px 0
}

.contact-page h1, .how-we-work-page h1, .services-page h1, .about-us-page h1 {
    text-align: center;
    max-width: initial
}

.contact-page .breadcrumb, .how-we-work-page .breadcrumb, .services-page .breadcrumb, .about-us-page .breadcrumb {
    display: flex
}

.contact-page .breadcrumb a, .contact-page .breadcrumb p, .how-we-work-page .breadcrumb a, .how-we-work-page .breadcrumb p, .services-page .breadcrumb a, .services-page .breadcrumb p, .about-us-page .breadcrumb a, .about-us-page .breadcrumb p {
    margin: 0;
    font-size: 14px;
    font-family: 'Open Sans'
}

.contact-page .breadcrumb a, .how-we-work-page .breadcrumb a, .services-page .breadcrumb a, .about-us-page .breadcrumb a {
    color: #28697C
}

.contact-page .breadcrumb p:before, .how-we-work-page .breadcrumb p:before, .services-page .breadcrumb p:before, .about-us-page .breadcrumb p:before {
    content: '>';
    margin: 0 5px
}

.contact-page .mdc-text-field, .how-we-work-page .mdc-text-field, .services-page .mdc-text-field, .about-us-page .mdc-text-field {
    margin-top: 18px;
    width: 100%
}

.contact-page .form-content, .how-we-work-page .form-content, .services-page .form-content, .about-us-page .form-content {
    width: 40%;
    margin-left: 90px
}

.contact-page .contact-content, .how-we-work-page .contact-content, .services-page .contact-content, .about-us-page .contact-content {
    width: 40%;
    margin: 0 90px
}

.contact-page .cta, .how-we-work-page .cta, .services-page .cta, .about-us-page .cta {
    margin-top: 30px
}

.contact-page .contact-wrapper, .how-we-work-page .contact-wrapper, .services-page .contact-wrapper, .about-us-page .contact-wrapper {
    display: flex
}

.contact-page .contact-wrapper h2, .how-we-work-page .contact-wrapper h2, .services-page .contact-wrapper h2, .about-us-page .contact-wrapper h2 {
    margin: 0 0 30px 0
}

.contact-page .contact-wrapper address, .how-we-work-page .contact-wrapper address, .services-page .contact-wrapper address, .about-us-page .contact-wrapper address {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    font-style: normal;
    font-weight: normal
}

.contact-page .contact-wrapper address a, .contact-page .contact-wrapper address p, .how-we-work-page .contact-wrapper address a, .how-we-work-page .contact-wrapper address p, .services-page .contact-wrapper address a, .services-page .contact-wrapper address p, .about-us-page .contact-wrapper address a, .about-us-page .contact-wrapper address p {
    color: #1e1e1e;
    text-decoration: none;
    margin: 15px 0;
    font-size: 20px;
    font-family: "Open Sans";
    display: flex;
    align-items: center
}

.contact-page .contact-wrapper address p, .how-we-work-page .contact-wrapper address p, .services-page .contact-wrapper address p, .about-us-page .contact-wrapper address p {
    align-items: flex-start
}

.contact-page .contact-wrapper address a:before, .how-we-work-page .contact-wrapper address a:before, .services-page .contact-wrapper address a:before, .about-us-page .contact-wrapper address a:before {
    content: url("../images/phone 2.svg");
    width: 24px;
    height: 24px;
    margin-right: 5px
}

.contact-page .contact-wrapper address a:first-child:before, .how-we-work-page .contact-wrapper address a:first-child:before, .services-page .contact-wrapper address a:first-child:before, .about-us-page .contact-wrapper address a:first-child:before {
    content: url("../images/email 2.svg");
    width: 24px;
    height: 24px;
    margin-right: 5px
}

.contact-page .contact-wrapper address p:before, .how-we-work-page .contact-wrapper address p:before, .services-page .contact-wrapper address p:before, .about-us-page .contact-wrapper address p:before {
    content: url("../images/address.svg");
    width: 24px;
    height: 24px;
    margin-right: 5px
}

.contact-page .contact-wrapper h2, .contact-page .contact-wrapper address, .how-we-work-page .contact-wrapper h2, .how-we-work-page .contact-wrapper address, .services-page .contact-wrapper h2, .services-page .contact-wrapper address, .about-us-page .contact-wrapper h2, .about-us-page .contact-wrapper address {
    text-align: left
}

.cookies {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    width: 1060px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: fixed;
    bottom: 0;
    background: #fff;
    border-radius: 8px
}

.cookies p {
    font-size: 14px
}

.button-txt:not(:disabled) {
    background-color: transparent;
    color: #1e1e1e
}

.how-we-work-page {
    padding: 200px 0
}

.how-we-work-page h2 {
    text-align: left
}

.how-we-work-page .breadcrumb {
    padding: 0 80px
}

.how-we-work-page .extension, .how-we-work-page .complete-project {
    display: flex;
    margin-bottom: 100px
}

.how-we-work-page .extension img, .how-we-work-page .extension div, .how-we-work-page .complete-project img, .how-we-work-page .complete-project div {
    width: 33%
}

.how-we-work-page .compare {
    padding: 0 80px
}

.how-we-work-page .compare h2 {
    text-align: center
}

.how-we-work-page .compare p {
    font-size: 14px;
    padding: 0 60px
}

.how-we-work-page .compare p.check:before {
    content: url(../images/check.svg);
    width: 18px;
    display: block;
    position: relative;
    float: left;
    margin-right: 10px
}

.how-we-work-page .compare p.fail:before {
    content: url(../images/fail.svg);
    width: 18px;
    display: block;
    position: relative;
    float: left;
    margin-right: 10px
}

.how-we-work-page .compare .modality {
    display: flex
}

.how-we-work-page .compare .modality > div {
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin: 0 14px
}

.how-we-work-page .compare .modality > div:nth-child(3) {
    border: 3px #FFD31F solid
}

.how-we-work-page .compare .modality > div h3 {
    color: #1e1e1e;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center
}

.services-page h1 {
    margin-bottom: 0
}

.services-page .services {
    margin-top: 70px
}

.services-page .services article {
    padding: 0
}

.services-page .services ul p {
    margin: 0;
    font-size: 20px
}

.services-page .services ul h3 {
    margin-bottom: 10px
}

.services-page .tech h2 {
    margin-top: 100px
}

.services-page .tech ul {
    display: flex;
    align-items: center;
    justify-content: center
}

.services-page .tech li {
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    height: 78px;
    width: 124px;
    display: flex;
    justify-content: center;
    align-items: center
}

.about-us-page {
    background-image: url("../images/about-us-bg.png");
    background-size: contain;
    background-repeat: no-repeat
}

.about-us-page h1 {
    text-align: left;
    max-width: 600px;
    margin-top: 110px
}

.about-us-page .mission {
    text-align: center;
    margin-top: 150px
}

.about-us-page .mission ul {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-around
}

.about-us-page .mission li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.about-us-page .mission li div {
    width: 197px;
    height: 197px;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-us-page .mission li div:before {
    content: '';
    width: 197px;
    height: 197px;
    display: block;
    background-color: #FFD31F;
    border-radius: 100%;
    position: absolute;
    z-index: -1
}

.about-us-page .testimonials {
    background: none
}

.about-us-page .testimonials .arrow {
    right: -55px
}

@media screen and (max-width: 768px) {
    header {
        position: initial
    }

    header .configs {
        padding: 0 10px
    }

    .logo-desktop, .menu-desktop {
        display: none
    }

    .logo-mobile, .menu-mobile {
        display: block
    }

    .menu-mobile {
        position: absolute;
        right: 20px
    }

    .menu-mobile .icon-close {
        width: 30px;
        position: absolute;
        right: 30px;
        top: 40px
    }

    .menu-mobile.closed {
        display: block
    }

    .menu-mobile.open {
        display: none;
        width: 90%;
        background-color: #ffffff;
        right: 0;
        top: 0;
        z-index: 20;
        height: 100vh;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
        position: fixed
    }

    .menu-mobile.open .logo-mobile {
        margin: 20px auto
    }

    .menu-mobile.open .icon-close {
        width: 20px;
        height: 20px
    }

    .menu-mobile.open ul {
        padding: 0 30px
    }

    .menu-mobile.open li a {
        text-decoration: none;
        color: #1e1e1e;
        display: block;
        padding: 20px 0;
        border-bottom: 0.5px solid #cecece
    }

    .menu-mobile.open .selected-page {
        position: relative
    }

    .menu-mobile.open .selected-page:before {
        top: 18px;
        left: -12px;
        position: absolute
    }

    .main-menu {
        justify-content: center
    }

    main {
        padding: 0
    }

    main h1 {
        font-size: 32px;
        text-align: center;
        margin-top: 240px
    }

    h2 {
        font-size: 24px
    }

    .mdc-touch-target-wrapper {
        text-align: center
    }

    .opening {
        height: 400px;
        background-color: #f9cc48;
        background-size: 120%;
        background-position: center top;
        background-repeat: no-repeat;
        padding: 0 25px
    }

    .opening:after {
        display: none
    }

    .opening .mdc-touch-target-wrapper {
        margin-bottom: 70px
    }

    .services h2 {
        margin-top: 100px
    }

    .services ul {
        flex-wrap: wrap
    }

    .services li {
        width: 110px;
        justify-content: end;
        text-align: center
    }

    .services li div, .services li div:before {
        width: 89px;
        height: 89px
    }

    .services li img {
        max-width: 56px;
        max-height: 56px
    }

    h3 {
        font-size: 20px;
        margin: 0
    }

    p {
        font-size: 14px
    }

    article {
        padding: 0 25px
    }

    .how-we-work-content {
        flex-direction: column;
        padding: 0 25px
    }

    .how-we-work article {
        flex-direction: column;
        width: 100%
    }

    .how-we-work article img {
        height: 110px
    }

    .how-we-work article p {
        text-align: center
    }

    .how-we-work article:last-child {
        margin-top: 40px
    }

    .testimonials {
        padding: 0 0 80px 0
    }

    .testimonials h2 {
        padding-top: 20px
    }

    .testimonials .testimonial-1, .testimonials .testimonial-2 {
        min-width: 272px
    }

    .testimonials .carousel {
        padding: 0 25px
    }

    .testimonials .static-container {
        overflow: hidden
    }

    .articles {
        padding: 0 0 0 25px
    }

    .posts-container .static-container {
        padding-left: 0
    }

    .posts-container .arrow {
        right: 0
    }

    .cta {
        margin-top: 100px
    }

    footer {
        margin-top: -58px
    }

    footer .contact, footer .newsletter {
        flex-direction: column;
        padding: 0 25px;
        margin: 0
    }

    footer .contact p, footer .newsletter p {
        font-size: 20px;
        text-align: center
    }

    footer .newsletter .mdc-touch-target-wrapper {
        margin-top: 20px
    }

    footer .newsletter .mdc-button.btn-secondary {
        margin-left: 0
    }

    footer .contact {
        text-align: center
    }

    footer .contact address {
        align-items: center
    }

    footer .contact address a {
        font-size: 20px
    }

    footer .footer-infos:before {
        top: -63px
    }

    .cookies {
        left: 0;
        transform: inherit;
        width: auto;
        flex-direction: column;
        margin: 15px;
        padding: 5px 15px
    }

    .cookies p {
        font-size: 12px
    }

    .cookies .mdc-button:not(:disabled) {
        font-size: 16px
    }

    .services, .how-we-work, .testimonials, .articles, h2 {
        margin-top: 60px
    }

    .services-page .services {
        margin: 0
    }

    .services-page .services ul {
        flex-direction: column;
        align-items: center
    }

    .services-page li {
        width: auto;
        margin-top: 35px
    }

    .services-page .tech ul {
        justify-content: flex-start;
        padding: 15px;
        margin-bottom: 80px;
        overflow: scroll
    }

    .contact-page, .how-we-work-page, .services-page {
        padding: 20px 25px 0
    }

    .contact-page h1, .how-we-work-page h1, .services-page h1 {
        margin-top: 20px
    }

    .contact-page h2, .how-we-work-page h2, .services-page h2 {
        text-align: center;
        margin-top: 0
    }

    .contact-page .breadcrumb, .how-we-work-page .breadcrumb, .services-page .breadcrumb {
        padding: 0
    }

    .contact-page .complete-project, .contact-page .extension, .how-we-work-page .complete-project, .how-we-work-page .extension, .services-page .complete-project, .services-page .extension {
        flex-direction: column;
        align-items: center
    }

    .contact-page .complete-project div, .contact-page .extension div, .how-we-work-page .complete-project div, .how-we-work-page .extension div, .services-page .complete-project div, .services-page .extension div {
        width: 100%
    }

    .contact-page .complete-project img[src*="circles"], .contact-page .extension img[src*="circles"], .how-we-work-page .complete-project img[src*="circles"], .how-we-work-page .extension img[src*="circles"], .services-page .complete-project img[src*="circles"], .services-page .extension img[src*="circles"] {
        display: none
    }

    .contact-page .compare, .how-we-work-page .compare, .services-page .compare {
        padding: 0;
        margin-bottom: 60px
    }

    .contact-page .compare p, .how-we-work-page .compare p, .services-page .compare p {
        padding: 0 30px
    }

    .contact-page .compare .modality, .how-we-work-page .compare .modality, .services-page .compare .modality {
        flex-direction: column
    }

    .contact-page .compare .modality > div, .how-we-work-page .compare .modality > div, .services-page .compare .modality > div {
        margin: 10px 15px
    }

    .contact-page .compare .modality > div h3, .how-we-work-page .compare .modality > div h3, .services-page .compare .modality > div h3 {
        margin-top: 10px
    }

    .contact-page .contact-wrapper, .how-we-work-page .contact-wrapper, .services-page .contact-wrapper {
        flex-direction: column
    }

    .contact-page .contact-wrapper h2, .how-we-work-page .contact-wrapper h2, .services-page .contact-wrapper h2 {
        margin: 60px 0 0;
        text-align: center
    }

    .contact-page .form-content, .how-we-work-page .form-content, .services-page .form-content {
        width: 100%;
        margin-left: 0
    }

    .contact-page .contact-content, .how-we-work-page .contact-content, .services-page .contact-content {
        width: 100%;
        margin: 0
    }
}

@media screen and (max-width: 375px) {
    .mdc-button:not(:disabled) {
        font-size: 16px
    }
}