*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /*background-image: url('../img/fundo.png');*/
    min-height: 100vh;
    
}
.fundoanime{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: -2;
   pointer-events: none;
   background: linear-gradient(-45deg, #0a001a, #15056d, #001f3f, #050010);
   background-size: 400% 400%;
   animation: anime 12s ease infinite alternate;
}
@keyframes anime{
   0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.fund{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: -1000;
   pointer-events: none;
   width: 1110px;
   max-width: 130vw;
   animation: pulse 20s ease-in-out infinite;
}
@keyframes pulse{
   0%{
      transform: translate(-50%,-50%) scale(1);
   }
   50%{
      transform: translate(-50%,-50%) scale(1.1);
   }
   100%{
      transform: translate(-50%,-50%) scale(1);
   }
}

.cab{
    position: fixed;
    z-index: 1001;
    top:0;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content:space-between;
    display: flex;
    padding: 0 15px;
    background-color: rgba(75, 77, 104, 0.288);
    position: fixed;
    transition: transform 0.6s ease-in-out;
}
.rodape{
   margin: 100px 0 0 0;
   width: 100%;
   height: 200px;
   background-color: rgb(28, 28, 93);
}
.cab.escondido{
    transform: translateY(-100%);
}
.topsite{
    height: 45px;
    
}
 .link{
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    /*transition: all 0.5s ease;*/
 }
 .serv:hover{
    transform: translateY(-4px);
 }
 .serv{
    border-radius:10px;
    background-color: rgb(66, 66, 158);
    color: rgb(247, 248, 249);
    padding: 5px;
    text-decoration: none;
    cursor:pointer;
    transition: transform 0.6s ease;
 }
 .serv:active{
    box-shadow: 0 2px 10px rgb(66, 4, 138);
    transform: translateY(-1px);
 }

 .quadro{
   
    height: 600px;
    width: 95%;
    display: flex;
    margin: 100px auto 0 auto ;
    border-radius: 10px;
    background-color: rgba(14, 26, 192, 0.288);    
    align-items: center;
    justify-content: center;
    gap: 30px;
    
    
 }
 .flipA{
    /*border: 2px solid purple;*/
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    background-color: aliceblue;
    box-shadow: 0 1px 20px rgb(8, 212, 28);
    border-radius: 30px;
    
    
 }
  .flipB{
    /*border: 2px solid purple;*/
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    box-shadow: 0 1px 20px rgb(12, 91, 193);
    border-radius: 30px;
    background-color: aliceblue;
    
 }
  .flipC{
    /*border: 2px solid purple;*/
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    box-shadow: 0 1px 20px rgb(175, 4, 167);
    border-radius: 30px;
    background-color: aliceblue;
    
 }
 /*aqui controla as listas de beneficios dos cards*/
 .lista{
   display: flex;
   flex-direction: column;
   gap: 10px;
   
 }
 
 .Plan{
    /*border: 2px solid black;*/
    width: 30%;
    height: 90%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    
  
 }
 .flipA.virado {
    transform: rotateY(180deg);
    cursor:pointer;
 }
 .flipB.virado.virado {
    transform: rotateY(180deg);
    cursor:pointer;
 }
  .flipC.virado {
    transform: rotateY(180deg);
    cursor:pointer;
 }
 #A{
    transition: transform 0.6s eas;
    transform-style: preserve-3d;
   /*box-shadow: 0 4px 12px rgb(8, 212, 28);*/
 }
 .BackA,.BackB,.BackC{
    transform: rotateY(180deg);
 }
 .titulo1{
    margin: 10px 0;
    font-size: 20px;

 }
 .frontA,.BackA{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display:flex;
    flex-direction: column;
    align-items:center;
    margin-top: 20px;
    gap: 20px;
 }
  .frontB,.BackB{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap:20px;
 }
  .frontC,.BackC{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
 }
  #B{
    transition: transform 0.6s eas;
    transform-style: preserve-3d;
 }
#C{
    transition: transform 0.6s eas;
    transform-style: preserve-3d;
 }
 .saibamais{
   border-radius: 100px;
   padding: 10px;
   margin-top: 400px;
   background-color: rgb(8, 8, 100);
   color: aliceblue;
   transition: all 0.3s ease;
   cursor: pointer;
 }
 .saibamais:hover{
   transform: translateY(-4px);
   background-color: rgba(8, 8, 100, 0.655);
   box-shadow: 0 4px 12px blue;
 }

 /* Pelo que entendi essa função faz uma versão só para os celulares(Telas até 768px) */
@media (max-width: 768px) {
    .quadro {
        flex-direction: column;
        height: auto;           
        padding: 20px 0;
    }

    .Plan {
        width: 85%;             
        height: 500px;          
         
    
    }
}
/*aqui agora vai controlar a galeria de serviços*/
.galeria_servicos{
   border: 4px solid white;
   margin-top: 200px;
   width: 100%;
   height: 80vh;
   display:flex;
   flex-direction: column;
   align-items: center;
   gap: 50px;
   padding: 10px;
   color:aliceblue;
   

}
/*aqui vai ficar os icones dos serviços que ofertamos
*/
.trab{
   /*border: 4px solid red;*/
   width: 30%;
   height: 300px;
   display: flex;
   justify-content: center;
   
   
}
.ir{
   width: 100px;
   height: 200px;
   margin-top: 40px;
   border-radius: 100px;
   background-color: transparent;
   
}
.volt{
   width: 100px;
   height: 200px;
   margin-top: 40px;
   border-radius: 100px;
   background-color: transparent;
}