/*
Theme Name: Content Mapper
Theme URI: https://contentmapper.com.br
Author: Jaqueline Martins
Description: Tema criado para Content Mapper em 2024
Version: 1.0
*/

/* RESET */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
margin: 0;
}

body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

input, button, textarea, select {
font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}

#root, #__next {
isolation: isolate;
}

html{
    scroll-behavior: smooth; 
}

body{
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: 'Noto Sans', Helvetica, sans-serif;
    color: #373737;
}

a{
    color: inherit;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.container{
    margin: 0 auto;
    width: 1200px
}

nav{
    background-color: #ffff;
}

.menu-desktop{
    display: flex;
    padding: 20px 0;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

.menu-desktop ul{
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Noto Sans Display', Helvetica, sans-serif;
    font-weight: 600;
    display: flex;
    list-style: none;
    gap: 80px;
    padding: 0;
}

h1{
    font-size: 48px;
    line-height: 1.2em;
}

.main-banner{
    position: relative;
    z-index: 1;
}

.main-banner::before{
    position: absolute;
    z-index: -1;
    filter: blur(5px);
}

.main-text{
    padding: 150px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-text > div{
    width: 70%;
    text-align: center;
}

.main-text p{
    margin: 30px 0;
    font-size: 24px;
    color: #787878;
}

.info-section{
    background-color: #221F20;
    position: relative;
    z-index: 2;
    border-radius: 100px 100px 0 0;
}

.btn{
    background: rgb(232,148,75);
    background-image: linear-gradient(to left, rgba(232,148,75,1), rgba(216,52,101,1), rgba(232,148,75,1), rgba(216,52,101,1));
    font-family: 'Noto Sans Display', Helvetica, sans-serif;
    padding: 10px 20px;
    color: white;
    display: inline-block;
    border-radius: 50px;
    font-weight: 600;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size:300%;
    background-position: 0 0;
    -webkit-appearance: none !important;
}

.btn:hover, .btn:focus{
    background-position: 100% 0;
    color:#fff;
}

.btn-container{
    margin-top: 40px;
}

.info-section h2{
    font-size: 40px;
    color: #E8944B;
    font-family: 'Noto Sans Display', Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1.2em;
}

.info-section p{
    color: white;
}

.info-items{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 100px 0 200px 0;
    gap: 60px;
    align-items: center;
}

.info-texto h2{
    margin-bottom: 25px;
}

.info-img{
    height: 400px;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
}

.info-img img{
    position: absolute;
    width: 100%;
}

.info-texto span{
    color: #E8944B;
    font-weight: 600;
}

.info-texto > .btn{
    margin-top: 40px;
}

footer{
    background-color: white;
    border-radius: 100px 100px 0 0;
    padding: 80px 0;
    margin-top: -100px;
    z-index: 3;
    position: relative;
}

.rodape{
    display: flex;
    justify-content: center;
    color: #787878;
    gap: 60px;
}

.rodape p{
    width: 300px;
    position: relative;
}

.rodape p::before{
    content: '';
    width: 1px;
    height: 60px;
    background-color: #ACACAC;
    position: absolute;
    left: -30px;
    top: -5px;
}

.sobre-bg{
    background-color: #221F20;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    background-position-y: -200px;
    height: auto;
    width: 100%;
}

.banner-sobre{
    padding: 140px 0;
    color: white;
    position: relative;
    z-index: 1;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 80px 0;
}
    
.timeline::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: #E8944B;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    height: 75%;
}

.timeline-container {
    padding: 10px 80px;
    position: relative;
    background-color: #37373700;
    width: 50%;
    margin-bottom: 50px;
}

.timeline-container::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    right: -35px;
    background-image: linear-gradient(to left, rgba(232,148,75,1), rgba(216,52,101,1));
    top: 0px;
    border-radius: 50%;
    z-index: 1;
    }
      
/* Place the container to the left */
.left {
    left: 0;
    text-align: right;
}

/* Place the container to the right */
.right {
    left: 50%;
    text-align: left;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -35px;
}

/* The actual content */
.conteudo {
    padding: 30px 40px;
    background-color: #373737;
    position: relative;
    border-radius: 20px;
}

.conteudo h3{
    color: #E8944B;
    margin-bottom: 10px;
}

.conteudo p{
    color: white;
}

#item1::before{
    content: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_61_75' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='37' height='37'%3E%3Crect width='37' height='37' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_61_75)'%3E%3Cpath d='M23.1249 32.375V27.75H16.9583V12.3333H13.8749V16.9583H3.08325V4.625H13.8749V9.25H23.1249V4.625H33.9166V16.9583H23.1249V12.3333H20.0416V24.6667H23.1249V20.0417H33.9166V32.375H23.1249ZM26.2083 13.875H30.8333V7.70833H26.2083V13.875ZM26.2083 29.2917H30.8333V23.125H26.2083V29.2917ZM6.16659 13.875H10.7916V7.70833H6.16659V13.875Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    width: 70px;
    height: 70px;
    right: -18px;
    top: 17px;
    border-radius: 50%;
    z-index: 2;
}

#item2::before{
    content: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_61_93' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='37' height='37'%3E%3Crect width='37' height='37' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_61_93)'%3E%3Cpath d='M33.3 35.4583L28.5594 30.7563C28.0969 31.0389 27.6023 31.2509 27.0755 31.3922C26.5488 31.5335 26.0028 31.6042 25.4375 31.6042C23.7417 31.6042 22.2899 31.0003 21.0823 29.7927C19.8747 28.5851 19.2708 27.1333 19.2708 25.4375C19.2708 23.7417 19.8747 22.2899 21.0823 21.0823C22.2899 19.8747 23.7417 19.2708 25.4375 19.2708C27.1333 19.2708 28.5851 19.8747 29.7927 21.0823C31.0003 22.2899 31.6042 23.7417 31.6042 25.4375C31.6042 26.0285 31.5271 26.5873 31.3729 27.1141C31.2188 27.6408 31.0003 28.1354 30.7177 28.5979L35.4583 33.3L33.3 35.4583ZM8.47917 31.6042C6.78333 31.6042 5.3316 31.0003 4.12396 29.7927C2.91632 28.5851 2.3125 27.1333 2.3125 25.4375C2.3125 23.7417 2.91632 22.2899 4.12396 21.0823C5.3316 19.8747 6.78333 19.2708 8.47917 19.2708C10.175 19.2708 11.6267 19.8747 12.8344 21.0823C14.042 22.2899 14.6458 23.7417 14.6458 25.4375C14.6458 27.1333 14.042 28.5851 12.8344 29.7927C11.6267 31.0003 10.175 31.6042 8.47917 31.6042ZM8.47917 28.5208C9.32708 28.5208 10.053 28.2189 10.6568 27.6151C11.2606 27.0113 11.5625 26.2854 11.5625 25.4375C11.5625 24.5896 11.2606 23.8637 10.6568 23.2599C10.053 22.6561 9.32708 22.3542 8.47917 22.3542C7.63125 22.3542 6.90538 22.6561 6.30156 23.2599C5.69774 23.8637 5.39583 24.5896 5.39583 25.4375C5.39583 26.2854 5.69774 27.0113 6.30156 27.6151C6.90538 28.2189 7.63125 28.5208 8.47917 28.5208ZM25.4375 28.5208C26.2854 28.5208 27.0113 28.2189 27.6151 27.6151C28.2189 27.0113 28.5208 26.2854 28.5208 25.4375C28.5208 24.5896 28.2189 23.8637 27.6151 23.2599C27.0113 22.6561 26.2854 22.3542 25.4375 22.3542C24.5896 22.3542 23.8637 22.6561 23.2599 23.2599C22.6561 23.8637 22.3542 24.5896 22.3542 25.4375C22.3542 26.2854 22.6561 27.0113 23.2599 27.6151C23.8637 28.2189 24.5896 28.5208 25.4375 28.5208ZM8.47917 14.6458C6.78333 14.6458 5.3316 14.042 4.12396 12.8344C2.91632 11.6267 2.3125 10.175 2.3125 8.47917C2.3125 6.78333 2.91632 5.3316 4.12396 4.12396C5.3316 2.91632 6.78333 2.3125 8.47917 2.3125C10.175 2.3125 11.6267 2.91632 12.8344 4.12396C14.042 5.3316 14.6458 6.78333 14.6458 8.47917C14.6458 10.175 14.042 11.6267 12.8344 12.8344C11.6267 14.042 10.175 14.6458 8.47917 14.6458ZM25.4375 14.6458C23.7417 14.6458 22.2899 14.042 21.0823 12.8344C19.8747 11.6267 19.2708 10.175 19.2708 8.47917C19.2708 6.78333 19.8747 5.3316 21.0823 4.12396C22.2899 2.91632 23.7417 2.3125 25.4375 2.3125C27.1333 2.3125 28.5851 2.91632 29.7927 4.12396C31.0003 5.3316 31.6042 6.78333 31.6042 8.47917C31.6042 10.175 31.0003 11.6267 29.7927 12.8344C28.5851 14.042 27.1333 14.6458 25.4375 14.6458ZM8.47917 11.5625C9.32708 11.5625 10.053 11.2606 10.6568 10.6568C11.2606 10.053 11.5625 9.32708 11.5625 8.47917C11.5625 7.63125 11.2606 6.90538 10.6568 6.30156C10.053 5.69774 9.32708 5.39583 8.47917 5.39583C7.63125 5.39583 6.90538 5.69774 6.30156 6.30156C5.69774 6.90538 5.39583 7.63125 5.39583 8.47917C5.39583 9.32708 5.69774 10.053 6.30156 10.6568C6.90538 11.2606 7.63125 11.5625 8.47917 11.5625ZM25.4375 11.5625C26.2854 11.5625 27.0113 11.2606 27.6151 10.6568C28.2189 10.053 28.5208 9.32708 28.5208 8.47917C28.5208 7.63125 28.2189 6.90538 27.6151 6.30156C27.0113 5.69774 26.2854 5.39583 25.4375 5.39583C24.5896 5.39583 23.8637 5.69774 23.2599 6.30156C22.6561 6.90538 22.3542 7.63125 22.3542 8.47917C22.3542 9.32708 22.6561 10.053 23.2599 10.6568C23.8637 11.2606 24.5896 11.5625 25.4375 11.5625Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    width: 70px;
    height: 70px;
    left: -18px;
    top: 17px;
    border-radius: 50%;
    z-index: 2;
}

#item3::before{
    content: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_61_102' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='37' height='37'%3E%3Crect width='37' height='37' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_61_102)'%3E%3Cpath d='M23.125 33.9166V30.0625L12.3333 24.6666H4.625V15.4166H11.2542L15.4167 10.6375V3.08331H24.6667V12.3333H18.0375L13.875 17.1125V21.9687L23.125 26.5937V24.6666H32.375V33.9166H23.125ZM18.5 9.24998H21.5833V6.16665H18.5V9.24998ZM7.70833 21.5833H10.7917V18.5H7.70833V21.5833ZM26.2083 30.8333H29.2917V27.75H26.2083V30.8333Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    width: 70px;
    height: 70px;
    right: -18px;
    top: 17px;
    border-radius: 50%;
    z-index: 2;
}

#item4::before{
    content: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_61_111' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='37' height='37'%3E%3Crect width='37' height='37' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_61_111)'%3E%3Cpath d='M3.08325 32.375V29.2917H33.9166V32.375H3.08325ZM4.62492 27.75V16.9583H9.24992V27.75H4.62492ZM12.3333 27.75V9.25H16.9583V27.75H12.3333ZM20.0416 27.75V13.875H24.6666V27.75H20.0416ZM27.7499 27.75V4.625H32.3749V27.75H27.7499Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    width: 70px;
    height: 70px;
    left: -18px;
    top: 17px;
    border-radius: 50%;
    z-index: 2;
}

.banner-sobre{
    width: 600px;
    text-align: center;
    margin: 0 auto;
}

.banner-sobre h1{
    margin-bottom: 40px;
    font-weight: 600;
}

.banner-sobre p{
    font-size: 24px;
}

.cto-bottom{
    padding-bottom: 250px;
}

.cto-bottom-conteudo{
    background-image: linear-gradient(to left, rgba(232,148,75,1), rgba(216,52,101,1));
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 40px 80px;
    border-radius: 20px;
    gap: 20px;
    align-items: center;
    color: white;
    margin: 0 150px;
}

.cto-bottom-conteudo h2{
    font-weight: 500;
    line-height: 1.2em;
}

.contato-banner::before{
    position: absolute;
    z-index: -1;
    filter: blur(5px);
}

.contato-text{
    text-align: center;
    padding: 120px 0;
}

.contato-text h1{
    margin-bottom: 10px;
}

.contato-text p{
    font-size: 24px;
}

.form-contato{
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    padding-bottom: 150px;
    align-items: start;
}

.wpcf7-form-control{
    width: 100%;
    border: 1px solid #787878;
    padding: 10px 20px;
    border-radius: 5px;
    color: #787878;
    font-weight: 300;
    font-family: "Noto Sans", sans-serif;
    box-sizing: border-box;   
}

.wpcf7-form{
    display: grid;
    gap: 10px;
}

::placeholder {
    color: #787878;
    opacity: 1; /* Firefox */
}
  
::-ms-input-placeholder { /* Edge 12 -18 */
    color: #787878;
}

.wpcf7-submit{
    background: rgb(232,148,75);
    background-image: linear-gradient(to left, rgba(232,148,75,1), rgba(216,52,101,1), rgba(232,148,75,1), rgba(216,52,101,1));
    font-family: 'Noto Sans Display', Helvetica, sans-serif;
    padding: 10px 40px;
    color: white;
    display: inline-block;
    border-radius: 50px;
    font-weight: 600;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size:300%;
    background-position: 0 0;
    -webkit-appearance: none !important;
    width: auto;
    text-transform: uppercase;
    border: 0;
    float: right;
}

.wpcf7-submit:hover, .wpcf7-submit:focus{
    background-position: 100% 0;
    color:#fff;
}

textarea {
    resize: none;
}

.current_page_item{
    color: #E8944B;
}

.img-contato{
    border-radius: 25px;
    overflow: hidden;
}

.img-contato img{
    height: 100%;
    max-width: max-content;
}

@media screen and (max-width: 1300px) {
    .container{
        width: 1000px
    }

    .cto-bottom-conteudo{
        margin: 0 90px;
    }

}

@media screen and (max-width: 1100px){
    .container{
        width: 900px
    }

    .cto-bottom-conteudo {
        margin: 0 auto;
    }

    .sobre-bg {
        background-position-y: -100px;
    }

}

@media screen and (max-width: 1000px){
    .container{
        width: 800px
    }

    .info-img img{
        height: 100%;
        width: auto;
        max-width: max-content!important;
    }

    .timeline-container {
        padding: 10px 50px;
    }

    .img-contato img {
        margin-left: -60px;
    }

    .form-contato {
        gap: 40px
    }
}

@media screen and (max-width: 900px){
    .container{
        width: 700px
    }

    .info-items {
        gap: 25px;
    }

    .left {
        padding: 10px 50px 10px 0px;
    }

    .right {
        padding: 10px 0px 10px 50px;
    }
}

@media screen and (max-width: 800px){
    .container{
        width: 600px
    }

    .info-items {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 0 200px 0;
    }

    .info-items div:nth-child(3){
        order: 4;
    }

    .info-img img {
        height: auto;
        width: 600px;
        max-width: 600px !important;
        top: -100px;
    }

    .info-img {
        height: 300px;
    }

    .info-texto > .btn {
        margin-left: 32%;
    }

    .main-text {
        padding: 120px 0
    }

    h1 {
        font-size: 44px;
    }

    .menu-desktop{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 30px;
    }

    .main-banner::before {
        opacity: .7;
    }

    .main-text > div {
        width: 100%;
    }

    .btn-container{
        margin-top: 40px;
        text-align: center;
    }

    .timeline-container{
        width: 100%;
    }

    .left, .right{
        padding: 0 60px 0 0;
        left: 0;
        right: 0;
        text-align: right;
    }

    /* Place the timelime to the left */
    .timeline::after {
        left: unset;
        right: 0;
    }
    
    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        right: -33px;
        left: unset;
    }
    
    /* Make all right containers behave like the right ones */
    .right {
        right: 0;
        left: unset;
    }

    #item2::before, #item4::before{
        right: -18px;
        left: unset;
    }

    .cto-bottom-conteudo {
        padding: 30px 30px;
        justify-items: center;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .banner-sobre{
        width: 100%;
    }

    .sobre-bg {
        background-position-y: -50px;
    }

    .form-contato{
        grid-template-columns: 1fr;
    }

    .img-contato{
        height: 350px;
    }

    .img-contato img {
        margin-left: 0px;
        width: 100%;
        margin-top: -130px;
        height: auto;
        max-width: none;
    }

    .wpcf7-submit{
        float: left;
    }

}

@media screen and (max-width: 700px){
    .container{
        width: 80%;
    }

    .banner-sobre {
        padding: 140px 0 90px 0;
    }

}

@media screen and (max-width: 620px){
    .rodape{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .rodape img{
        width: 200px;
    }

    .rodape p{
        text-align: center;
    }

    .rodape p::before {
        width: 300px;
        height: 1px;
        left: 0;
        top: -10px;
    }

    footer{
        padding: 50px 0;
    }

    .img-contato img {
        margin-top: -110px;
    }
}

@media screen and (max-width: 500px){
    .info-section h2 {
        font-size: 36px;
    }

    h1 {
        font-size: 40px;
    }

    .menu-desktop ul {
        gap: 60px;
    }

    .main-banner{
        overflow: hidden;
    }

    .img-contato img {
        margin-top: -50px;
    }

    .contato-banner{
        overflow: hidden;
        position: relative;
        height: 580px;
    }

    .form-contato {
        margin-top: -180px;
    }
}


@media screen and (max-width:420px){
    .main-text {
        padding: 90px 0;
    }

    .info-section, footer {
        border-radius: 70px 70px 0 0;
    }
}

@media screen and (max-width:389px){
    .contato-banner{
        overflow: hidden;
        position: relative;
        height: 720px;
    }

    .form-contato {
        margin-top: -280px;
    }

    .img-contato img {
        margin-top: 0;
    }

    .form-contato {
        gap: 20px;
    }

    .img-contato {
        height: auto;
    }
}

@media screen and (max-width:320px){

    .menu-desktop ul {
        gap: 40px;
    }

    .left, .right {
        padding: 0 20px 0 0;
    }
}