.slide .hero__spot {display: none;

}

.template_content .template.title, .template_content .template.title:hover, .template_content .template.title:visited {font-size: 50px;
         font-family: 'Fontjek', sans-serif;
         margin: 0;
         font-weight: 500;
         color: #38ceff !important;
         text-decoration: none;
}

.section .title {z-index: 1;
}

.template_content .template.title, .template_content .template.title:hover, .template_content .template.title:visited {margin-top: -20px;
    }

.template_content .template.title, .template_content .template.title:hover, .template_content .template.title:visited {font-size: 60px;
    }

.slide .hero__spot {display: block;
    }

.slide .hero__spot {position: absolute;
        height: 100px;
        width: 100%;
        margin-top: -88px;
    }

.template_content .template.title, .template_content .template.title:hover, .template_content .template.title:visited {font-size: 60px;
         margin-top: -30px;
         font-weight: 500;
         color: #38ceff;
         margin-bottom: 10px;
    }

.template_content .template.title .top.art {display:block;
        padding: 0px;
        margin: 0px;
        margin-top: -100px;
        
    }

.section.content .content {display: flex;
    flex-direction: column;
    padding:20px;
    width: auto;
}

.section.content .content .column1,
.section.content .content .column2 {width: 100%; /* Ambas as colunas ocupam toda a largura disponível */
    margin-bottom: 20px; /* Adicionando espaço entre as colunas */
}

.section.content .content .column1 .title {color: #ffffff;
    font-size: 35px;
    font-family: 'Fontjek', sans-serif;
    margin: 0;
    font-weight: 500;
}

.section.content .content .column1 .text p {font-size: 14px;
    line-height: 20px;
    text-align: justify;
}

.section.content .content .column1 .title .part {color: #1F588E;
}

.section.content .content .column2 .video {position: relative;
      height: 0;
      padding-bottom: 56.25%;
    }

.section.content .content .column2 .video iframe {position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30px;
    margin-bottom: 15px;
}

.section.content .content {padding: 20px;
    }

.section.content .content .column1 .title {font-size: 33px;      
        font-weight: 500;
        padding:0px;
    }

.section.content .content {flex-direction: column; /* Altera para uma coluna em telas menores */
    }

.section.content .content .column1 .title {font-size: 60px;      
        font-weight: 500;
        padding:0px;
    }

.section.content .content .column2 .video iframe {width: 100%;
        height: 450px;
    }

.section.content .content .column2 .video iframe {position: relative;
    }

.section.content .content .column2 .video {width: 100%;
        height: 350px;
        padding-bottom: 0;
    }

.section.content .content .column2 .video iframe {width: 100%;
        height: 350px;
        z-index: 0;
    }

.section.content .content .column1 .title {font-size: 63px;      
        font-weight: 500;
        padding:0px;
    }

.section.content .content .column1 .text p {font-size: 12px;
     }

.section.content .content {flex-direction: row; /* Altera para uma linha em telas maiores */
    }

.section.content .content .column1,
    .section.content .content .column2 {width: calc(50%); /* Ambas as colunas ocupam metade da largura disponível */
        margin-right: 20px; /* Adicionando espaço entre as colunas */
        margin-top: 90px;
    }

.section.content .content .column2 {margin-left: 30px;
        margin-right: 0px;
    }

.section.content .top.art {display: block;
        margin:0px auto;
        padding: 0px;
        width: 100%;
        margin-top: 0px;
    }

.section.content .top.art .hero__spot {position: absolute;
        height: auto;
        width: 100%;
        margin-top: 0;
        z-index: 10;
        top: 0;
    }

.section.content .bottom.art .hero__spot {position: absolute;
        height: auto;
        width: 100%;
        margin-top: -20px;
        z-index: 1;
    }

.template_content .titles {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    color: #1f588e;
    font-family: 'Fontjek', sans-serif;
}

.areas {
   width: calc(100% - 40px);
   margin-top:20px;   
   padding: 20px;
}

.template_content {
    margin-top:40px;
    font-size: 16px;
    line-height: 27px;
    color: #484848;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
    padding: 0 20px;


}

/* Estilos para desktops (a partir de 1024px de largura) */
@media only screen and (min-width: 1024px) {

    
    .template_content {
        width: 100%;
        max-width: 996px !important;
        padding: 0 !important;
    }

    .areas {
       width: calc(100% - 40px);
       margin-top:20px!important;   
       padding: 0px !important;
    }
}