main{
    color: #464E53;
}

#funcionalidades{
    display: flex;
    justify-content: center;
    gap:2.5rem;
    margin-top: 10rem;
}


#image-func{
    position: relative;
    z-index: 1;
    overflow: visible;

}

#image-func::before {
    content: "";
    position: absolute;
    top: -15rem;
    left: -10rem;
    width: 48rem;  
    height: 55rem  ;  
    opacity: 20%;   
    background: radial-gradient(circle, #007ECA 40%, transparent 70%);
    z-index: -1;
    
}


.content-func{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.content-func h2{
    width: 40rem;
    height: 6rem;
    font-size: 2.4em;
    margin: 0;
    font-weight: 400;
    line-height: 125%;
    font-weight: 400;
}

.content-func p{
    width: 40rem;
    height: 6rem;
    font-size: 1em;
    margin: 0;
    font-weight: 400;
    line-height: 139%;
    letter-spacing: -2%;
}

#pergunta-func{
    margin: 0;
}

.lista-func{
list-style: none;
padding: 0;
width: 40rem;
height: 21.5rem;
}

.lista-func li{
display: flex;
margin-bottom: 1rem;
padding: 1rem;
gap: 0.7rem;
border: 1px solid;
border-color:#E3E3E3;
border-radius: 0.8rem;
width: 38rem;
height: 3rem;
align-items: center;
}

.text-li{
   width: 36rem;
   height: 3rem;
}

.text-li h3{
    font-size: 1.25em;
    margin: 0;
    font-weight: 500;
    line-height: 132%;
    letter-spacing: -4%;
    color: #241827;
}

.text-li p{
    font-size: 0.875em;
    font-weight: 400;
    line-height: 132%;
    letter-spacing: -4%;
    color: #7D888F;
}



.check-image{
    margin: 0;
    display: flex;
    align-items: center;
}


@media(max-width:1660px){
#image-func img{
 width: 40rem;
 height: 30rem;
 border-radius: 1.5rem;

}

#image-func{
    position: relative;
    z-index: 1;
    overflow: visible;

}

#image-func::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: -12rem;
    width: 40rem;  
    height: 40rem;  
    opacity: 57%;   
    background: radial-gradient(circle, #007ECA 0%, transparent 70%);
    z-index: -1;
}

.content-func{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.content-func h2{
    width: 30rem;
    height: 5rem;
    font-size: 2em;
}

.content-func p{
    width: 40rem;
    height: 6rem;
    font-size: 0.98em;
}

#pergunta-func img{
    width: 20rem;
}

.lista-func{
list-style: none;
padding: 0;
width: 40rem;
height: 21.5rem;
}

.lista-func li{
display: flex;
margin-bottom: 1rem;
padding: 1rem;
gap: 0.7rem;
border: 1px solid;
border-color:#E3E3E3;
border-radius: 0.8rem;
width: 38rem;
height: 3rem;
align-items: center;
}

.text-li{
   width: 36rem;
   height: 3rem;
}

.text-li h3{
    font-size: 1.25rem;
    margin: 0;
    font-weight: 500;
    line-height: 132%;
    letter-spacing: -4%;
    color: #241827;
}

.text-li p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 132%;
    letter-spacing: -4%;
    color: #7D888F;
}



.check-image{
    margin: 0;
    display: flex;
    align-items: center;
}


}

@media(max-width: 1430px){

#image-func img{
 width: 36rem;
 height: 28rem;
 border-radius: 24px;

}

#image-func{
    position: relative;
    z-index: 1;
    overflow: visible;

}

#image-func::before {
    content: "";
    position: absolute;
    top: -14rem;
    left: -14rem;
    width: 40rem;  
    height: 40rem;  
    opacity: 57%;   
    background: radial-gradient(circle, #007ECA 0%, transparent 48%);
    z-index: -1;
}

.content-func{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.content-func h2{
    width: 30rem;
    height: 5rem;
    font-size: 1.8em;
}

.content-func p{
    width: 36rem;
    height: 6rem;
    font-size: 0.89em;
}

#pergunta-func img{
    width: 14rem;
}

.lista-func{
list-style: none;
padding: 0;
width: 40rem;
height: 21.5rem;
}

.lista-func li{
display: flex;
margin-bottom: 1rem;
padding: 1rem;
gap: 0.7rem;
border: 1px solid;
border-color:#E3E3E3;
border-radius: 0.8rem;
width: 34rem;
height: 2.2rem;
align-items: center;
}

.text-li{
   width: 36rem;
   height: 3rem;
}

.text-li h3{
    font-size: 1em;
    margin: 0;
    font-weight: 500;
    line-height: 132%;
    letter-spacing: -4%;
    color: #241827;
}

.text-li p{
    font-size: 0.8em;
    font-weight: 400;
    line-height: 132%;
    letter-spacing: -4%;
    color: #7D888F;
}
}

@media (max-width:1290px){

#funcionalidades{
    display: flex;
    flex-direction: column-reverse;
    gap:2.5rem;
    margin-top: 10rem;
}

.content-func h2{
    width: 40rem;
    height: 7rem;
    font-size: 2.5em;
}

.content-func p{
    width: 36rem;
    height: 6rem;
    font-size: 1.1em;
}


#image-func{
    margin: auto;
}

.content-func{
    margin: auto;
}

#image-func{
    position: unset;
    z-index: unset;
    overflow: unset;

}

#image-func::before {
    content: unset;
    position: unset;
    top: unset;
    left: unset;
    width: 48rem;  
    height: 55rem  ;  
    opacity: unset;   
    background: unset;
    z-index: unset;
    
}

#image-func img{
 width: 45rem;
 height: 30rem;
 border-radius: 10px;

}

#pergunta-func img{
    width: 20rem;
}

#pergunta-func {
    margin:auto;
}

.lista-func{
    margin-top: 3rem;
}

.text-li{
   width: 36rem;
   height: 5rem;
   margin: auto;
}


.text-li h3{
    font-size: 1.2em;
    margin: 0;
    font-weight: 500;
    line-height: 132%;
    letter-spacing: -4%;
    color: #241827;
}

.text-li p{
    font-size: 0.9em;
    font-weight: 400;
    line-height: 132%;
    letter-spacing: -4%;
    color: #7D888F;
}


}

@media (max-width:765px){


.content-func h2{
    width: 30rem;
    height: 5rem;
    font-size: 2em;
    margin: auto;
}

.content-func p{
    width: 30rem;
    height: 6rem;
    font-size: 1em;
    margin: auto;
}


#image-func img{
 width: 35rem;
 height: 24rem;
 border-radius: 10px;

}

#pergunta-func img{
    width: 20rem;
}

#pergunta-func {
    margin:auto;
}

.lista-func{
    margin-bottom: 0;
    width: 30rem;
}

.lista-func li{
    width: 30rem;
}

.text-li{
   width: 36rem;
   height: 5rem;
   margin: auto;
}


.text-li h3{
    font-size: 1em;
   
}

.text-li p{
    font-size: 0.8em;

}
}

@media (max-width:600px){


.content-func {
    width: 100vw;
    gap: 0.8rem;
}

.content-func h2{
    width: 22rem;
    height: 5rem;
    font-size: 1.5em;
    margin: auto;
}

.content-func p{
    width: 22rem;
    height: 6rem;
    font-size: 1em;
    margin: auto;
}


#image-func img{
 width: 22rem;
 height: 15rem;
 border-radius: 10px;

}

#pergunta-func {
    margin:auto;
}

.lista-func{
    margin: auto;
    margin-top: 6rem;
    width: 22rem;
}

.lista-func li{
    width: 19rem;
}

.text-li{
   height: 2rem;
   margin: auto;
}


.text-li h3{
    font-size: 0.85em;
   
}

.text-li p{
    font-size: 0.52em;

}

}