:root {
    --dark-blue: #0c5aa9 !important;
    --red: #fd0014 !important;
    --yellow: #ffbd00 !important;
    --green: #7fbc00 !important;
    --marine-blue: #00a9a1 !important;
    --light-blue: #0099d4 !important;
    --green-itworks: #7fbc08 !important;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Montserrat', Arial, sans-serif !important;
    scroll-behavior: smooth !important;
}

body {
    overflow-x: hidden !important;
}

body.modal-open {
    padding: 0 !important;
    overflow: scroll;
}

h3 {
    font-size: 1.2rem !important;
    font-weight: bold !important;
}

h4 {
    font-size: 1rem !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
}

p {
    margin: 0 !important;
    padding: 0 !important;
}

*, ::after, ::before {
    /*box-sizing: initial !important;*/
}

/* ######   Desktop   ###### */
@media screen and (min-width:1150px){
    .formulario{
        border-radius: 15px;
        width: 70%;
        margin: -80px 0;
    }
    /* ######   Menu   ###### */
    nav {
        width: 100%;
        height: 120px;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute;
        top: 0 !important;
        left: 0 !important;
        transition: 0.3s;
        z-index: 99;
    }

    #navbar-mobile {
        display: none !important;
    }

    #nav-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav img {
        width: 250px;
        margin: 20px 0 0 0;
        transition: 0.3s;
    }

    nav ul {
        list-style: none;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
    }

    nav ul li {
        display: inline-block;
        margin: 0 20px;
    }

    #btn-beneficios {
        text-decoration: none;
        color: white;
        font-weight: bold;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px;
    }

    #btn-beneficios svg {
        fill: white;
        width: 30px;
        margin: 0 0 0 5px;
    }

    .beneficios-dropdown {
        font-size: 0.9rem;
        display: none;
        position: absolute;
        float: left;
        padding: 10px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        top: 80px;
    }

    .beneficios-dropdown a {
        color: black;
        padding: 10px 16px;
        margin: 10px 0;
        text-decoration: none !important;
        border-radius: 20px;
        display: block;
        transition: 0.2s;
    }

    .beneficios-dropdown a:hover {
        color: white;
        background: var(--light-blue);
        border-radius: 40px;
        text-decoration: none !important;
    }

    #btn-beneficios:hover .beneficios-dropdown {
        display: block !important;
    }

    #btn-central {
        text-align: center;
    }

    #btn-central p {
        font-size: 0.7rem;
        margin: 0 !important;
    }

    #btn-central a {
        color: white !important;
        text-decoration: none !important;
    }

    #btn-menu {
        width: 220px;
        text-align: center;
    }

    .btn-menu {
        color: white !important;
        font-size: 0.8rem;
        background-color: var(--light-blue);
        text-decoration: none !important;
        text-align: center;
        padding: 10px 20px;
        border-radius: 100px;
        transition: 0.3s;
    }

    .btn-menu:hover {
        color: white !important;
        filter: saturate(160%);
        padding: 10px 25px;
    }

    /* ######   Home   ###### */
    #home {
        width: 100%;
        height: 700px;
        background-image: url('../img/business-woman-bussiness-man-colleagues-working-laptop.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    #home-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #home-title {
        width: 50%;
        margin: 50px 0 0 0;
    }

    #home h1 {
        color: var(--light-blue);
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 30px 0;
    }

    #home p {
        color: white;
        font-weight: 300;
        line-height: 1.7rem;
        margin: 0 0 50px 0 !important;
    }

    .btn-primary {
        color: white !important;
        font-size: 1rem !important;
        background-color: var(--light-blue) !important;
        text-decoration: none !important;
        text-align: center !important;
        padding: 20px 45px !important;
        border-radius: 100px !important;
        transition: 0.3s !important;
        cursor: pointer !important;
    }

    .btn-primary:hover {
        filter: saturate(160%) !important;
        padding: 20px 55px !important;
    }

    #wave-home-mobile {
        display: none;
    }
    
    #wave-home {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: -25px 0;
    }

    #wave-home svg {
        fill: white;
        width: 100%;
        height: auto;
    }

    #arrow-wave-home {
        position: absolute;
        top: 650px;
        right: 45%;
    }

    /* ######   Presentation   ###### */
    #presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0 70px 0;
    }

    .presentation-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .presentation-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 0 50px 0;
    }

    .presentation-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
    }

    .h1-blue {
        color: var(--dark-blue);
    }

    .presentation-text {
        width: 100%;
    }

    .presentation-text p {
        line-height: 1.8rem;
    }

    .presentation-text ul {
        line-height: 1.8rem;
    }

    .presentation-text li {
        margin: 10px 0 0 25px;
        list-style: none;
    }

    .presentation-text li img {
        width: 25px;
        margin: -10px 10px -6px 5px;
    }

    .citacao {
        font-style: italic;
        font-weight: bold;
        background: #f4f7f9;
        padding: 15px 25px !important;
    }

    /* ######   Infographic   ###### */
    #infographic-mobile {
        display: none;
    }

    #infographic {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: #f2f2f9;
    }

    .infographic-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .infographic {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .infographic-left {
        width: 175%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .infographic-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 0 50px 0;
        text-align: center;
    }

    .infographic-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        margin: 0 0 30px 0;
    }

    .infographic-title p {
        line-height: 1.8rem;
    }

    .infographic img {
        width: 450px;
    }

    .item-infographic p {
        font-size: 0.7rem;
        line-height: 1.1rem;
    }

    .text-red {
        color: var(--red);
        margin: 0 0 10px 0;
    }

    .text-yellow {
        color: var(--yellow);
        margin: 0 0 10px 0;
    }

    .text-green {
        color: var(--green);
        margin: 0 0 10px 0;
    }

    .text-blue-marine {
        color: var(--marine-blue);
        margin: 0 0 10px 0;
    }

    .text-blue {
        color: var(--light-blue);
        margin: 0 0 10px 0;
    }

    .text-darkblue {
        color: var(--dark-blue);
        margin: 0 0 10px 0;
    }

    .item-infographic {
        padding: 25px;
    }

    .item-infographic-left-bottom {
        padding: 0 25px 25px 25px;
    }

    .item-infographic-left-top {
        padding: 25px 25px 0 25px;
    }

    .item-infographic-right-bottom {
        padding: 0 25px 25px 25px;
    }

    .item-infographic-right-top {
        padding: 25px 25px 0 25px;
    }

    .border-top-left {
        border-top: 1px dotted #cfcfe2;
        border-left: 1px dotted #cfcfe2;
        border-top-left-radius: 20px;
        margin: 30px 0 0 0;
    }

    .border-top-left::after {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 -30px;
    }

    .border-bottom-left {
        border-bottom: 1px dotted #cfcfe2;
        border-left: 1px dotted #cfcfe2;
        border-bottom-left-radius: 20px;
        margin: 40px 0 0 0;
    }

    .border-bottom-left::before {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 -30px;
    }

    .border-top-right {
        border-top: 1px dotted #cfcfe2;
        border-right: 1px dotted #cfcfe2;
        border-top-right-radius: 20px;
        margin: 30px 0 0 0;
    }

    .border-top-right::after {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 275px;
    }

    .border-bottom-right {
        border-bottom: 1px dotted #cfcfe2;
        border-right: 1px dotted #cfcfe2;
        border-bottom-right-radius: 20px;
        margin: -5px 0 0 0;
    }

    .border-bottom-right::before {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 275px;
    }

    .border-top-left-bottom {
        border-bottom: 1px dotted #cfcfe2;
        border-left: 1px dotted #cfcfe2;
        border-bottom-left-radius: 20px;
    }

    .border-top-left-bottom::before {
        content: "";
        position: absolute;
        height: 30px;
        width: 40px;
        border-top: 1px dotted #cfcfe2;
        border-right: 1px dotted #cfcfe2;
        border-top-right-radius: 20px;
        margin: 111px 0 0 176px;
    }

    .border-top-left-bottom::after {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: -90px 0 0 -31px;
    }

    .border-top-left-bottom-2 {
        border-top: 1px dotted #cfcfe2;
        border-left: 1px dotted #cfcfe2;
        border-top-left-radius: 20px;
    }

    .border-top-left-bottom-2::before {
        content: "";
        position: absolute;
        height: 26px;
        width: 50px;
        border-bottom: 1px dotted #cfcfe2;
        border-right: 1px dotted #cfcfe2;
        border-bottom-right-radius: 20px;
        margin: -52px 0 0 175px;
    }

    .border-top-left-bottom-2::after {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 -31px;
    }

    .gestao-cenarios {
        width: 150px;
        margin: 25px 0 0 -250px;
    }

    .gestao-cenarios-box {
        width: 550px;
    }

    .compliance-fiscal {
        width: 150px;
        margin: 25px 0 22px -250px;
    }

    /* ######   beneficios   ###### */
    #beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: url('../img/background-marca-dagua.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center right;
    }

    .beneficios-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .beneficios-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        margin: 0 0 80px 0;
    }

    .beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .beneficios-box {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 40px;
    }

    .beneficios img {
        width: 60px;
    }

    .beneficios h3 {
        margin: 10px 0;
    }

    .beneficios p {
        font-size: 0.9rem;
        line-height: 1.4rem;
    }

    .box-border-left {
        border-left: 1px solid #cfcfe2;
    }

    .box-border-right {
        border-right: 1px solid #cfcfe2;
    }

    .beneficios-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px 0 0 0;
    }

    .beneficios-btn a {
        width: 50%;
        padding: 15px 0;
        text-decoration: none !important;
    }
    
    .beneficios-btn a:hover {
        padding: 15px;
    }

    /* ######   Porque a IT Works   ###### */
    #porque {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0 150px 0;
        background: url('../img/background-textures.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .porque-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .porque-title {
        width: 100%;
    }

    .porque-title h1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
        margin: 0 0 80px 0;
    }
    
    .green-text {
        color: var(--green-itworks);
    }

    .porque {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .porque-left {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .porque-left img {
        width: 80%;
    }

    .porque-right {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
    }

    .ptext-1 {
        font-size: 2.6rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }
    
    .ptext-2 {
        font-size: 2.3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
    }
    
    .ptext-3 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }

    .ptext-4 {
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3.7rem;
    }

    .ptext-5 {
        font-size: 3.75rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    /* ######   Cases   ###### */
    #cases {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: white;
    }

    .cases-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .cases-title {
        width: 100%;
    }

    .cases-title h1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
        margin: 0 0 80px 0;
    }

    .cases {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .cases-box {
        min-height: 660px;
        padding: 30px;
        border-radius: 20px;
        background: var(--green-itworks);
    }
    
    .cases-box h4 {
        color: white;
        font-size: 1.5rem !important;
        line-height: 1.5rem;
    }

    .cases ul {
        margin: 20px 0 10px 0;
    }
    
    .cases li {
        color: white;
        font-size: 0.9rem;
        margin: 18px 0;
        list-style: none;
    }
    
    .cases li img {
        width: 20px;
        margin: 0 5px -3px 0;
    }

    .mg-side {
        margin: 0 30px;
    }

    /* ######   Clientes   ###### */
    #clientes {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: #f2f2f9;
    }

    .clientes-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .clientes-title {
        width: 100%;
    }

    .clientes-title h1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
        margin: 0 0 80px 0;
    }

    .clientes {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .clientes-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .clientes-box img {
        width: 200px;
    }

    /* ######   Empresas   ###### */
    #empresas {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 200px 0 150px 0;
        background: white;
    }

    .empresas-margin {
        width: 1120px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .empresas {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .empresas img {
        width: 450px;
    }

    .empresas p::after {
        width: 70px;
        height: 10px;
        content: "";
        background: #383838;
        position: absolute;
        margin: -75px 0 0 0px;
        display: flex;
    }

    .mg-left-empresas {
        margin: 0 0 0 150px;
    }

    /* ######   Footer   ###### */
    footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../img/footer-background.jpg');
        background-size: cover;
        background-position: center;
        padding: 80px 0 0 0;
    }
    
    footer p {
        color: white;
        font-size: 0.8rem;
        font-weight: 300;
    }

    .footer-top-margin {
        width: 1120px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    #footer-top {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 70px 0;
    }

    .footer-left {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .footer-left img {
        width: 250px;
    }
    
    .footer-social-medias {
        width: 45%;
        display: flex;
        justify-content:center;
        align-items: center;
    }
    
    .footer-social-medias img {
        width: 25px;
        margin: 20px 5px 0 5px;
        filter: saturate(0%) brightness(300%);
        transition: 0.2s;
    }
    
    .footer-social-medias img:hover {
        filter: saturate(100%) brightness(100%);
    }

    .footer-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .footer-right h2 {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    .footer-right p {
        line-height: 2rem;
    }

    .footer-right img {
        width: 20px;
        margin: -3px 15px 0 0;
    }

    #footer-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0C5AA9;
        padding: 25px 0 20px 0;
    }
    
    .footer-bottom-margin {
        width: 1120px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .footer-bottom-margin a {
        color: rgb(111, 158, 234);
    }

    .footer-bottom-margin a:hover {
        color: rgb(111, 158, 234);
    }

    /* ######   Form   ###### */
    .form {
        padding: 20px;
    }
    .mauticform_wrapper {
        width: 100%;
   }
    .mauticform-name {
        font-weight: bold;
        font-size: 1.5em;
        margin-bottom: 3px;
   }
    .mauticform-description {
        margin-top: 2px;
        margin-bottom: 10px;
   }
    .mauticform-error {
        margin-bottom: 10px;
        color: var(--light-blue);
   }
    .mauticform-message {
        margin: -20px 0 20px 0;
        color: var(--light-blue);
        font-size: 0.9rem;
   }
    .mauticform-row {
        display: block;
        margin-bottom: 15px;
   }
    .mauticform-label {
        font-size: 0.8rem;
        display: none;
        font-weight: bold;
        margin-bottom: 5px;
   }
    .mauticform-row.mauticform-required .mauticform-label:after {
        color: var(--light-blue);
        content: " *";
        display: inline;
   }
    .mauticform-helpmessage {
        display: block;
        font-size: 0.9em;
        margin-bottom: 3px;
   }
    .mauticform-errormsg {
        display: block;
        font-size: 0.8rem;
        color: var(--light-blue);
        margin-top: 2px;
   }
    .mauticform-selectbox, .mauticform-input, .mauticform-textarea {
        font-size: 0.8rem;
        width: 95%;
        padding: 15px;
        border: none;
        background: #f2f2f7;
        box-shadow: 0px 0px 0px #fff inset;
        border-radius: 100px;
        box-sizing: border-box;
   }
    .mauticform-checkboxgrp-label {
        font-weight: normal;
   }
    .mauticform-radiogrp-label {
        font-weight: normal;
        font-size: 0.8rem;
        line-height: 0.6rem;
   }
    .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {
        color: white;
        background-color: var(--light-blue);
        width: 100%;
        margin: 20px 0 0 0;
   }
    .mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.3856;
        border-radius: 50px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: 0.2s;
   }
    .mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] {
        background-color: #ffffff;
        border-color: #dddddd;
        opacity: 0.75;
        cursor: not-allowed;
   }
    .mauticform-pagebreak-wrapper .mauticform-button-wrapper {
        display: inline;
   }

   .mauticform-button:hover {
       filter: brightness(110%);
   }

   .modal-content {
       border-radius: 30px !important;
       border: none !important;
   }

   .modal-title {
        margin-bottom: 0;
        line-height: 1.5rem !important;
        font-size: 1.4rem;
        padding: 10px 15px;
   }
}

/* ######   Tablet   ###### */
@media screen and (min-width:769px) and (max-width:1149px){
    .formulario{
        border-radius: 15px;
        width: 70%;
        margin: 15px 0 40px 0;
    }
    /* ######   Menu   ###### */
    nav {
        width: 100%;
        height: 120px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.3s;
        z-index: 99;
    }

    #navbar-mobile {
        display: none !important;
    }

    #nav-margin {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav img {
        width: 250px;
        margin: 20px 20px 0 0;
        transition: 0.3s;
    }

    nav ul {
        list-style: none;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
    }

    nav ul li {
        display: inline-block;
        margin: 0;
        font-size: 0.8rem;
    }

    #btn-beneficios {
        text-decoration: none;
        color: white;
        font-weight: bold;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px;
    }

    #btn-beneficios svg {
        fill: white;
        width: 30px;
        margin: 0 0 0 5px;
    }

    .beneficios-dropdown {
        font-size: 0.9rem;
        display: none;
        position: absolute;
        float: left;
        padding: 10px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        top: 80px;
    }

    .beneficios-dropdown a {
        color: black;
        padding: 10px 16px;
        margin: 10px 0;
        text-decoration: none !important;
        border-radius: 20px;
        display: block;
        transition: 0.2s;
    }

    .beneficios-dropdown a:hover {
        color: white;
        background: var(--light-blue);
        border-radius: 40px;
    }

    #btn-beneficios:hover .beneficios-dropdown {
        display: block !important;
    }

    #btn-central {
        text-align: center;
    }

    #btn-central h4 {
        font-size: 0.7rem;
    }

    #btn-central a {
        color: white !important;
        text-decoration: none !important;
    }

    #btn-central p {
        font-size: 0.7rem;
    }
    
    #btn-menu {
        width: 200px;
        text-align: center;
    }
    
    .btn-menu {
        color: white;
        font-size: 0.7rem;
        background-color: var(--light-blue);
        text-decoration: none !important;
        text-align: center;
        padding: 10px 20px;
        border-radius: 100px;
        transition: 0.3s;
    }

    .btn-menu:hover {
        color: white !important;
        filter: saturate(160%);
        padding: 10px 25px;
    }

    /* ######   Home   ###### */
    #home {
        width: 100%;
        height: 700px;
        background-image: url('../img/business-woman-bussiness-man-colleagues-working-laptop.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    #home-margin {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #home-title {
        width: 50%;
        margin: 100px 0 0 0;
    }

    #home h1 {
        color: var(--light-blue);
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 30px 0;
    }

    #home p {
        color: white;
        font-weight: 300;
        line-height: 1.7rem;
        margin: 0 0 50px 0 !important;
    }

    .btn-primary {
        color: white !important;
        font-size: 1rem !important;
        background-color: var(--light-blue) !important;
        text-decoration: none !important;
        text-align: center !important;
        padding: 20px 45px !important;
        border-radius: 100px !important;
        transition: 0.3s !important;
    }

    .btn-primary:hover {
        filter: saturate(160%) !important;
        padding: 20px 55px !important;
    }

    #wave-home-mobile {
        display: none;
    }

    #wave-home {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: -30px 0;
    }

    #wave-home svg {
        fill: white;
        width: 100%;
        height: auto;
    }

    #arrow-wave-home {
        position: absolute;
        top: 650px;
        right: 43%;
    }

    /* ######   Presentation   ###### */
    #presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
    }

    .presentation-margin {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .presentation-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 0 50px 0;
    }

    .presentation-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
    }

    .h1-blue {
        color: var(--dark-blue);
    }

    .presentation-text {
        width: 100%;
    }

    .presentation-text p {
        line-height: 1.8rem;
    }

    .presentation-text ul {
        line-height: 1.8rem;
    }

    .presentation-text li {
        margin: 20px 0 20px 25px;
        list-style: none;
    }

    .presentation-text li img {
        width: 25px;
        margin: -10px 10px -6px 5px;
    }

    .citacao {
        font-style: italic;
        font-weight: bold;
        background: #f4f7f9;
        padding: 15px 25px !important;
    }

    /* ######   Infographic   ###### */
    #infographic {
        display: none;
    }

    #infographic-mobile {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding:100px 0;
        background: #f2f2f9;
    }

    .infographic-mobile-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .infographic-mobile {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .infographic-mobile-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 0 50px 0;
    }

    .infographic-mobile-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.3rem;
        margin: 0 0 30px 0;
        text-align: center;
    }

    .infographic-mobile-title p {
        line-height: 1.6rem;
    }

    .infographic-mobile img {
        width: 70%;
    }

    .item-mobile-infographic p {
        font-size: 0.9rem;
        line-height: 1.6rem;
    }

    .text-red {
        color: var(--red);
        margin: 0 0 10px 0;
    }

    .text-yellow {
        color: var(--yellow);
        margin: 0 0 10px 0;
    }

    .text-green {
        color: var(--green);
        margin: 0 0 10px 0;
    }

    .text-blue-marine {
        color: var(--marine-blue);
        margin: 0 0 10px 0;
    }

    .text-blue {
        color: var(--light-blue);
        margin: 0 0 10px 0;
    }

    .text-darkblue {
        color: var(--dark-blue);
        margin: 0 0 10px 0;
    }

    .item-mobile-infographic {
        padding: 25px;
    }

    .item-mobile-infographic-left-bottom {
        padding: 0 25px 25px 30px;
    }

    .border-bottom-left {
        border-bottom: 2px dotted #cfcfe2;
        border-left: 2px dotted #cfcfe2;
        border-bottom-left-radius: 20px;
        margin: 60px 0 0 0;
    }

    .border-bottom-left::before {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 -36px;
    }

    /* ######   beneficios   ###### */
    #beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: url('../img/background-marca-dagua.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center right;
    }

    .beneficios-margin {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .beneficios-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        margin: 0 0 80px 0;
    }

    .beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .beneficios-box {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 40px;
    }

    .beneficios img {
        width: 60px;
    }

    .beneficios h3 {
        margin: 10px 0;
    }

    .beneficios p {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }

    .box-border-left {
        border-left: 1px solid #cfcfe2;
    }

    .box-border-right {
        border-right: 1px solid #cfcfe2;
    }

    .beneficios-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px 0 0 0;
    }

    .beneficios-btn a {
        width: 50%;
        padding: 15px 0;
        text-decoration: none !important;
    }

    .beneficios-btn a:hover {
        padding: 15px;
    }

    /* ######   Porque a IT Works   ###### */
    #porque {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: url('../img/background-textures.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .porque-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .porque-title {
        width: 100%;
    }

    .porque-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 80px 0;
    }
    
    .green-text {
        color: var(--green-itworks);
    }

    .porque {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .porque-left {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .porque-left img {
        width: 80%;
    }

    .porque-right {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
    }

    .ptext-1 {
        font-size: 2.2rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }
    
    .ptext-2 {
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
    }
    
    .ptext-3 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }

    .ptext-4 {
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3.7rem;
    }

    .ptext-5 {
        font-size: 3.75rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    /* ######   Cases   ###### */
    #cases {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: white;
    }

    .cases-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .cases-title {
        width: 100%;
    }

    .cases-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 80px 0;
    }

    .cases {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .cases-box {
        width: 90%;
        padding: 30px;
        border-radius: 20px;
        background: var(--green-itworks);
    }
    
    .cases-box h4 {
        color: white;
        font-size: 1.5rem !important;
        line-height: 1.5rem;
    }

    .cases ul {
        margin: 20px 0 10px 0;
    }
    
    .cases li {
        color: white;
        font-size: 1rem;
        margin: 18px 0;
        list-style: none;
    }
    
    .cases li img {
        width: 20px;
        margin: 0 5px -3px 0;
    }

    .mg-side {
        margin: 20px 0;
    }

    /* ######   Clientes   ###### */
    #clientes {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: #f2f2f9;
    }

    .clientes-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .clientes-title {
        width: 100%;
    }

    .clientes-title h1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
        margin: 0 0 80px 0;
    }

    .clientes {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .clientes-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .clientes-box img {
        width: 120px;
    }

    /* ######   Empresas   ###### */
    #empresas {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 200px 0 150px 0;
        background: white;
        overflow: hidden;
    }

    .empresas-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .empresas {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .empresas img {
        width: 250px;
    }

    .empresas p::after {
        width: 70px;
        height: 10px;
        content: "";
        background: #383838;
        position: absolute;
        margin: -75px 0 0 0px;
        display: flex;
    }

     /* ######   Footer   ###### */
     footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../img/footer-background.jpg');
        background-size: cover;
        background-position: center;
        padding: 80px 0 0 0;
    }
    
    footer p {
        color: white;
        font-size: 0.8rem;
        font-weight: 300;
    }

    .footer-top-margin {
        width: 85%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    #footer-top {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 70px 0;
    }

    .footer-left {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .footer-left img {
        width: 250px;
    }
    
    .footer-social-medias {
        width: 75%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 0 100px;
    }
    
    .footer-social-medias img {
        width: 25px;
        margin: 20px 5px 0 5px;
        filter: saturate(0%) brightness(300%);
        transition: 0.2s;
    }
    
    .footer-social-medias img:hover {
        filter: saturate(100%) brightness(100%);
    }

    .footer-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .footer-right h2 {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    .footer-right p {
        line-height: 2rem;
    }

    .footer-right img {
        width: 20px;
        margin: -3px 15px 0 0;
    }

    #footer-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0C5AA9;
        padding: 25px 0 20px 0;
    }
    
    .footer-bottom-margin {
        width: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .footer-bottom-margin a {
        color: rgb(111, 158, 234);
    }

    .footer-bottom-margin a:hover {
        color: rgb(111, 158, 234);
    }

    /* ######   Form   ###### */
    .form {
        padding: 20px;
    }
    .mauticform_wrapper {
        width: 100%;
   }
    .mauticform-name {
        font-weight: bold;
        font-size: 1.5em;
        margin-bottom: 3px;
   }
    .mauticform-description {
        margin-top: 2px;
        margin-bottom: 10px;
   }
    .mauticform-error {
        margin-bottom: 10px;
        color: var(--light-blue);
   }
    .mauticform-message {
        margin: -20px 0 20px 0;
        color: var(--light-blue);
        font-size: 0.9rem;
   }
    .mauticform-row {
        display: block;
        margin-bottom: 15px;
   }
    .mauticform-label {
        font-size: 0.8rem;
        display: none;
        font-weight: bold;
        margin-bottom: 5px;
   }
    .mauticform-row.mauticform-required .mauticform-label:after {
        color: var(--light-blue);
        content: " *";
        display: inline;
   }
    .mauticform-helpmessage {
        display: block;
        font-size: 0.9em;
        margin-bottom: 3px;
   }
    .mauticform-errormsg {
        display: block;
        font-size: 0.8rem;
        color: var(--light-blue);
        margin-top: 2px;
   }
    .mauticform-selectbox, .mauticform-input, .mauticform-textarea {
        font-size: 0.8rem;
        width: 95%;
        padding: 15px;
        border: none;
        background: #f2f2f7;
        box-shadow: 0px 0px 0px #fff inset;
        border-radius: 100px;
        box-sizing: border-box;
   }
    .mauticform-checkboxgrp-label {
        font-weight: normal;
   }
    .mauticform-radiogrp-label {
        font-weight: normal;
        font-size: 0.8rem;
        line-height: 0.6rem;
   }
    .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {
        color: white;
        background-color: var(--light-blue);
        width: 100%;
        margin: 20px 0 0 0;
   }
    .mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.3856;
        border-radius: 50px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: 0.2s;
   }
    .mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] {
        background-color: #ffffff;
        border-color: #dddddd;
        opacity: 0.75;
        cursor: not-allowed;
   }
    .mauticform-pagebreak-wrapper .mauticform-button-wrapper {
        display: inline;
   }

   .mauticform-button:hover {
       filter: brightness(110%);
   }

   .modal-content {
       border-radius: 30px !important;
       border: none !important;
   }

   .modal-title {
        margin-bottom: 0;
        line-height: 1.5rem !important;
        font-size: 1.4rem;
        padding: 10px 15px;
   }
}

/* ######   Mobile   ###### */
@media screen and (max-width:768px){
    .formulario{
        border-radius: 15px;
        width: 70%;
        margin: 180px 0 0;
    }
    /* ######   Menu   ###### */
    #navbar {
        display: none;
    }

    /* ######   Menu   ###### */
    #navbar-mobile {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.3s;
        z-index: 99;
    }

    #navbar-mobile-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 30px 0 0 0;
    }

    .navbar-mobile-menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 40px 0 30px 0;
    }
    
    .navbar-mobile-menu-btn {
        width: 100%;
    }

    #navbar-mobile img {
        width: 250px;
        margin: 20px 20px 0 0;
        transition: 0.3s;
    }

    #navbar-mobile ul {
        width: 100%;
        list-style: none;
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #navbar-mobile ul li {
        display: inline-block;
        margin: 0;
        font-size: 0.8rem;
    }

    #btn-beneficios {
        text-decoration: none;
        color: white;
        font-weight: bold;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px;
    }

    #btn-beneficios svg {
        fill: white;
        width: 30px;
        margin: 0 0 0 5px;
    }

    .beneficios-dropdown {
        font-size: 0.9rem;
        display: none;
        position: absolute;
        float: right;
        padding: 10px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        top: 100px;
        right: 0;
    }

    .beneficios-dropdown a {
        color: black;
        padding: 10px 16px;
        margin: 10px 0;
        text-decoration: none !important;
        border-radius: 20px;
        display: block;
        transition: 0.2s;
    }

    .beneficios-dropdown a:hover {
        color: white;
        background: var(--light-blue);
        border-radius: 40px;
    }

    #btn-central {
        text-align: center;
    }

    #btn-central h4 {
        color: white;
        font-size: 1rem;
    }
    
    #btn-central p {
        font-size: 0.7rem;
    }
    
    #btn-central a {
        color: white !important;
        text-decoration: none !important;
    }

    #btn-menu {
        width: 200px;
        text-align: center;
    }
    
    .btn-menu {
        color: white;
        font-size: 0.7rem;
        background-color: var(--light-blue);
        text-decoration: none !important;
        text-align: center;
        padding: 10px 20px;
        border-radius: 100px;
        transition: 0.3s;
    }

    .btn-menu:hover {
        color: white !important;
        filter: saturate(160%);
        padding: 10px 25px;
    }

    /* ######   Home   ###### */
    #home {
        width: 100%;
        min-height: 800px;
        background-image: url('../img/business-woman-bussiness-man-colleagues-working-laptop.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    #home-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #home-title {
        width: 100%;
        margin: 240px 0 0 0;
    }

    #home h1 {
        color: var(--light-blue);
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 30px 0;
    }

    #home p {
        color: white;
        font-weight: 300;
        line-height: 1.7rem;
        margin: 0 0 50px 0 !important;
    }

    .btn-primary {
        color: white !important;
        font-size: 0.8rem !important;
        background-color: var(--light-blue) !important;
        text-decoration: none !important;
        text-align: center !important;
        padding: 20px 45px !important;
        border-radius: 100px !important;
        transition: 0.3s !important;
    }

    .btn-primary:hover {
        filter: saturate(160%) !important;
        padding: 20px 55px !important;
    }

    #wave-home {
        display: none;
    }

    #wave-home-mobile {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: -80px 0 -24px 0;
    }

    #wave-home-mobile svg {
        fill: white;
        width: 100%;
        height: auto;
    }

    #arrow-wave-home {
        position: absolute;
        top: 925px;
    }

    /* ######   Presentation   ###### */
    #presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 70px 0 80px 0;
    }

    .presentation-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .presentation {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    .presentation-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 0 50px 0;
    }

    .presentation-title h1 {
        font-size: 2.3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.3rem;
        text-align: center;
    }

    .h1-blue {
        color: var(--dark-blue);
    }

    .presentation-text {
        width: 100%;
        margin: 0;
    }

    .presentation-text p {
        line-height: 1.6rem;
        margin: 20px 0 0 0;
    }

    .presentation-text ul {
        line-height: 1.8rem;
    }

    .presentation-text li {
        margin: 20px 0 20px 25px;
        list-style: none;
    }

    .presentation-text li img {
        width: 25px;
        margin: -10px 10px -6px 5px;
    }

    .citacao {
        font-style: italic;
        font-weight: bold;
        background: #f4f7f9;
        padding: 15px 25px !important;
    }

    /* ######   Infographic   ###### */
    #infographic {
        display: none;
    }

    #infographic-mobile {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: #f2f2f9;
    }

    .infographic-mobile-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .infographic-mobile {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .infographic-mobile-title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 0 20px 0;
    }

    .infographic-mobile-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.3rem;
        margin: 0 0 30px 0;
        text-align: center;
    }

    .infographic-mobile-title p {
        line-height: 1.6rem;
    }

    .infographic-mobile img {
        width: 90%;
    }

    .item-mobile-infographic p {
        font-size: 0.9rem;
        line-height: 1.6rem;
    }

    .text-red {
        color: var(--red);
        margin: 0 0 10px 0;
    }

    .text-yellow {
        color: var(--yellow);
        margin: 0 0 10px 0;
    }

    .text-green {
        color: var(--green);
        margin: 0 0 10px 0;
    }

    .text-blue-marine {
        color: var(--marine-blue);
        margin: 0 0 10px 0;
    }

    .text-blue {
        color: var(--light-blue);
        margin: 0 0 10px 0;
    }

    .text-darkblue {
        color: var(--dark-blue);
        margin: 0 0 10px 0;
    }

    .item-mobile-infographic {
        padding: 25px;
    }

    .item-mobile-infographic-left-bottom {
        padding: 0 25px 25px 30px;
    }

    .border-bottom-left {
        border-bottom: 2px dotted #cfcfe2;
        border-left: 2px dotted #cfcfe2;
        border-bottom-left-radius: 20px;
        margin: 60px 0 0 0;
    }

    .border-bottom-left::before {
        content: "";
        position: absolute;
        height: 7px;
        width: 7px;
        border-radius: 40px;
        background: white;
        border: 2px solid #cfcfe2;
        margin: 0 0 0 -36px;
    }

    /* ######   beneficios   ###### */
    #beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 70px 0 50px 0;
        background: url('../img/background-marca-dagua.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center right;
    }

    .beneficios-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .beneficios-title h1 {
        font-size: 2.3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.3rem;
        margin: 0 0 20px 0;
        text-align: center;
    }

    .beneficios {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    .beneficios-box {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 25px 0;
    }

    .beneficios img {
        width: 60px;
    }

    .beneficios h3 {
        margin: 10px 0;
    }

    .beneficios p {
        font-size: 0.9rem;
        line-height: 1.6rem;
    }

    .beneficios-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px 0 0 0;
    }

    .beneficios-btn a {
        width: 90%;
        padding: 15px 0;
        text-decoration: none !important;
    }

    .beneficios-btn a:hover {
        padding: 15px;
    }

    /* ######   Porque a IT Works   ###### */
    #porque {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0 150px 0;
        background: url('../img/background-textures.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .porque-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .porque-title {
        width: 100%;
    }

    .porque-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 80px 0;
    }
    
    .green-text {
        color: var(--green-itworks);
    }

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

    .porque-left {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .porque-left img {
        width: 80%;
        margin: 0 0 100px 0;
    }

    .porque-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    .ptext-1 {
        font-size: 2.2rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }
    
    .ptext-2 {
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
    }
    
    .ptext-3 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2rem;
    }

    .ptext-4 {
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3.7rem;
    }

    .ptext-5 {
        font-size: 3.75rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    /* ######   Cases   ###### */
    #cases {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: white;
    }

    .cases-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .cases-title {
        width: 100%;
    }

    .cases-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 2.5rem;
        margin: 0 0 80px 0;
    }

    .cases {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .cases-box {
        width: 80%;
        padding: 30px;
        border-radius: 20px;
        background: var(--green-itworks);
    }
    
    .cases-box h4 {
        color: white;
        font-size: 1.5rem !important;
        line-height: 1.5rem;
    }

    .cases ul {
        margin: 20px 0 10px 0;
    }
    
    .cases li {
        color: white;
        font-size: 0.8rem;
        margin: 18px 0;
        list-style: none;
    }
    
    .cases li img {
        width: 20px;
        margin: 0 5px -3px 0;
    }

    .mg-side {
        margin: 20px 0;
    }

    /* ######   Clientes   ###### */
    #clientes {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: #f2f2f9;
    }

    .clientes-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .clientes-title {
        width: 100%;
    }

    .clientes-title h1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
        margin: 0 0 80px 0;
    }

    .clientes {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .clientes-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .clientes-box img {
        width: 150px;
    }

    /* ######   Empresas   ###### */
    #empresas {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        background: white;
        overflow: hidden;
    }

    .empresas-margin {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }

    .empresas {
        width: 100%;
        height: 230px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .empresas img {
        width: 250px;
        margin: 30px 0;
    }

    .empresas p::after {
        width: 70px;
        height: 10px;
        content: "";
        background: #383838;
        position: absolute;
        margin: -75px 0 0 0px;
        display: flex;
    }

     /* ######   Footer   ###### */
     footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../img/footer-background.jpg');
        background-size: cover;
        background-position: center;
        padding: 80px 0 0 0;
    }
    
    footer p {
        color: white;
        font-size: 0.8rem;
        font-weight: 300;
    }

    .footer-top-margin {
        width: 85%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    #footer-top {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 70px 0;
    }
    
    .footer-left {
        width: 100%;
        display: flex;
        justify-content:center;
        align-items: center;
        flex-direction: column;
        padding: 0 0 70px 0;
    }
    
    .footer-left img {
        width: 100%;
    }
    
    .footer-social-medias {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .footer-social-medias img {
        width: 25px;
        margin: 20px 5px 0 5px;
        filter: saturate(0%) brightness(300%);
        transition: 0.2s;
    }
    
    .footer-social-medias img:hover {
        filter: saturate(100%) brightness(100%);
    }

    .footer-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    
    .footer-right h2 {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 3rem;
    }

    .footer-right p {
        line-height: 2rem;
    }

    .footer-right img {
        width: 20px;
        margin: -3px 15px 0 0;
    }

    #footer-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0C5AA9;
        padding: 25px 0 20px 0;
    }
    
    .footer-bottom-margin {
        width: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .footer-bottom-margin a {
        color: rgb(111, 158, 234);
    }
    
    .footer-bottom-margin a:hover {
        color: rgb(111, 158, 234);
    }
    
    #footer-bottom p {
        text-align: center;
    }

    /* ######   Form   ###### */
    .form {
        padding: 20px;
    }
    .mauticform_wrapper {
        width: 100%;
   }
    .mauticform-name {
        font-weight: bold;
        font-size: 1.5em;
        margin-bottom: 3px;
   }
    .mauticform-description {
        margin-top: 2px;
        margin-bottom: 10px;
   }
    .mauticform-error {
        margin-bottom: 10px;
        color: var(--light-blue);
   }
    .mauticform-message {
        margin: -20px 0 20px 0;
        color: var(--light-blue);
        font-size: 0.9rem;
   }
    .mauticform-row {
        display: block;
        margin-bottom: 15px;
   }
    .mauticform-label {
        font-size: 0.8rem;
        display: none;
        font-weight: bold;
        margin-bottom: 5px;
   }
    .mauticform-row.mauticform-required .mauticform-label:after {
        color: var(--light-blue);
        content: " *";
        display: inline;
   }
    .mauticform-helpmessage {
        display: block;
        font-size: 0.9em;
        margin-bottom: 3px;
   }
    .mauticform-errormsg {
        display: block;
        font-size: 0.8rem;
        color: var(--light-blue);
        margin-top: 2px;
   }
    .mauticform-selectbox, .mauticform-input, .mauticform-textarea {
        font-size: 0.8rem;
        width: 90%;
        padding: 15px;
        border: none;
        background: #f2f2f7;
        box-shadow: 0px 0px 0px #fff inset;
        border-radius: 1004px;
        box-sizing: border-box;
   }
    .mauticform-checkboxgrp-label {
        font-weight: normal;
   }
    .mauticform-radiogrp-label {
        font-weight: normal;
        font-size: 0.8rem;
        line-height: 0.6rem;    
   }
    .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {
        color: white;
        background-color: var(--light-blue);
        width: 100%;
        margin: 20px 0 0 0;
   }
    .mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.3856;
        border-radius: 50px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: 0.2s;
   }
    .mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] {
        background-color: #ffffff;
        border-color: #dddddd;
        opacity: 0.75;
        cursor: not-allowed;
   }
    .mauticform-pagebreak-wrapper .mauticform-button-wrapper {
        display: inline;
   }

   .mauticform-button:hover {
       filter: brightness(110%);
   }

   .modal-content {
       border-radius: 30px !important;
       border: none !important;
   }

   .modal-title {
        margin-bottom: 0;
        line-height: 1.5rem !important;
        font-size: 1rem;
        padding: 10px 15px;
   }
}