/* =====================================
   SOBRE PAGE
===================================== */


.sobre-page{


max-width:1200px;


margin:0 auto;


padding:40px 20px;


color:white;


}



/* =====================================
   TÍTULO
===================================== */


.pagina-titulo{


text-align:center;


margin-bottom:50px;


}



.pagina-titulo h1{


font-size:38px;


margin-bottom:15px;


}



.pagina-titulo p{


font-size:18px;


opacity:.85;


}







/* =====================================
   GRID DOS CARDS
===================================== */


.sobre-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:25px;


margin-bottom:50px;


}







/* =====================================
   CARD
===================================== */


.sobre-card{


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.20);


border-radius:25px;


padding:30px 25px;


text-align:center;


backdrop-filter:blur(12px);


transition:.3s;


}




.sobre-card:hover{


transform:translateY(-8px);


background:

rgba(255,255,255,.20);


}







/* ÍCONE */


.sobre-icon{


width:70px;


height:70px;


margin:0 auto 20px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:#00e676;


color:white;


font-size:30px;


}







.sobre-card h2{


font-size:22px;


margin-bottom:15px;


}



.sobre-card p{


line-height:1.6;


opacity:.9;


}









/* =====================================
   TEXTO
===================================== */


.sobre-texto{


background:

rgba(0,0,0,.20);


padding:40px;


border-radius:25px;


margin-top:30px;


}



.sobre-texto h2{


font-size:26px;


margin-bottom:15px;


color:#00e676;


}



.sobre-texto p{


font-size:17px;


line-height:1.7;


margin-bottom:30px;


}




.sobre-texto ul{


padding-left:25px;


}



.sobre-texto li{


margin-bottom:12px;


font-size:16px;


}








/* =====================================
   BOTÃO VOLTAR
===================================== */


.btn-voltar{


display:flex;


width:max-content;


margin:40px auto 0;


align-items:center;


gap:10px;


padding:15px 30px;


background:#00e676;


color:white;


text-decoration:none;


border-radius:30px;


font-weight:bold;


transition:.3s;


}



.btn-voltar:hover{


transform:translateY(-3px);


background:#00c853;


}









/* =====================================
   RESPONSIVO
===================================== */


@media(max-width:1000px){


.sobre-grid{


grid-template-columns:repeat(2,1fr);


}


}






@media(max-width:600px){


.sobre-page{


padding:25px 15px;


}



.pagina-titulo h1{


font-size:28px;


}



.sobre-grid{


grid-template-columns:1fr;


}



.sobre-card{


padding:25px 20px;


}



.sobre-texto{


padding:25px;


}



.sobre-texto h2{


font-size:22px;


}



}