.holding-section,.section-atomo{
  background-color: #197a89;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100vh;
}
.section-atomo{
  position: relative;
}
.holding-grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    margin-top: 30px;
}
.rotmenucontainer { 
  width:100%;
  height: 100vh;
  overflow: hidden;
  opacity: 0.98;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.allrotate {
  box-sizing:border-box;  
  width: 300px;
  height: 300px;
  position: relative;  
  border: none;
  
}


.service {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px;
  text-decoration: none;
}


.center-circle {
  display: flex;  
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.5);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1000;
  border: none;
  text-align: center;
   
}

.servicelink{
    text-decoration: none;
}
.servicelink:hover{
  cursor: pointer;
}

.service1,
.service2,
.service3,
.service4,
.service5,
.service6 {
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color:rgba(0, 161, 205, 0.7);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  border: none;
  text-transform: uppercase;
  position: absolute;
}

.counterrotate {
  display: flex;
  justify-content: center;
  align-items: first baseline;  
  color: #f1f1f1; 
}

.counterrotate h3{
  font-size: 150%;
}

h3{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    font-size: 100%;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.logo-holding{
  left: 50%;
  top: 70%;
  transform: translate(5%,150%);
  width: 180px;
  height: 90px;
}



/* Formatação do container do CARD */
.rotmenucontainer {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.card-holding-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-holding {
  background-color: rgba(255, 255, 255, 0.074);
  border: 1px solid rgba(255, 255, 255, 0.222);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  margin-right: 25%;
  margin-top: -20%;
  height: 300px; /* Defina a altura fixa desejada para o card */
  width: 400px; /* Defina a largura fixa desejada para o card */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10%;
  box-shadow: 0px 5px 12.5px rgba(0, 0, 0, 0.7);
  color: #f1f1f1;
  z-index: 8;
  border-radius: 15px;
  padding: 20px; /* Adicione um espaçamento interno para evitar que o texto fique colado nas bordas */
  box-sizing: border-box; /* Inclua o padding no tamanho total do card */
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px; /* Adicione uma margem inferior para separar o título do texto */
}

.text-card {
  width: 100%; /* Altere para 100% para ocupar toda a largura do card */
  font-style: italic;
  text-align: justify;
  height: 140px; /* Defina uma altura fixa para o texto */
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden; /* Oculte o texto que excede a altura definida */
  text-overflow: ellipsis; /* Adicione reticências (...) para indicar que há mais conteúdo */
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Defina o número máximo de linhas visíveis */
  -webkit-box-orient: vertical;
}

.cta-holding-atomo {
  font-size: 14px;
  font-weight: 300;
  background-color: rgba(241, 213, 213, 0);
  color: #f1f1f1bf;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  padding: 3px 6px;
  cursor: help !important;
  font-style: italic;
}

/*Formatação chamada para a ação atomo canto esquerdo*/
.holding-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.holding-cta p{
  display: block;
  color: #f1f1f1;
  font-weight: 600;
  font-size: 18px;
  bottom: 35%;
  left: 20%;
  transform: translate(40%,200%);
}
.seta-img{
  display: block;
  width: 80%;
  bottom: 25%;
  left: 35%;
  transform: translate(45%,35%);
}

.cta-atomo-legenda{
  font-weight: 300;
  font-size: 10px;
  display: inline-block;
  padding-left: 20%;
}

/*      Fim Container CARD      */
 
/*move each circle away from the centre circle (here, 300px each but can be anything), and rotate to the desired angle (here, 360deg divided by 6)*/
.service1 {
  transform: translate(100px); /* no rotation, just move to the right*/
  
}

.service2 {
  transform: rotate(60deg) translate(100px) rotate(300deg);
}

.service3 {
  transform: rotate(120deg) translate(100px) rotate(240deg);
}

.service4 {
  transform: translate(-100px); /*no rotation, just move to the left*/
}

.service5 {
  transform: rotate(240deg) translate(100px) rotate(120deg);
}

.service6 {
  transform: rotate(300deg) translate(100px) rotate(60deg);
}



/* ---------------  Medias Querys Até 498px ------------- */
@media(max-width: 498px){
  .rotmenucontainer{
    margin: 0;
  }

   .allrotate{
    left: 8%;
  } 
  .center-circle {
    width: 115px;
    height: 115px;
    margin: -70px; 
  }



  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 90px;
    height: 90px;
    font-size: 6px;
  }


  .service1 {
    transform: translate(105px); /* no rotation, just move to the right*/
    
  }

  .service2 {
    transform: rotate(60deg) translate(115px) rotate(300deg);
  }

  .service3 {
    transform: rotate(120deg) translate(115px) rotate(240deg);
  }

  .service4 {
    transform: translate(-115px); /*no rotation, just move to the left*/
  }

  .service5 {
    transform: rotate(240deg) translate(115px) rotate(120deg);
  }

  .service6 {
    transform: rotate(300deg) translate(115px) rotate(60deg);
  }

  .logo-holding{

    width: 78%;
    height: 125%;
  }



  /* Formataçãodo container do CARD*/
  .card-holding-container{
    display: none;
  }
  .holding-grid{
    display: grid;
    grid-template-columns:1fr;
    justify-content: center;
    margin-top: 30px;
  }


  /*      Fim Container CARD      */

  .holding-cta p{
    font-size: 16px;
    display: inline-block;
    text-align: center;
    bottom: 25%;
    left: 0;
    transform: translate(0,205%);
  }
  .seta-img{
    display: none;
  }

  .cta-atomo-legenda {
  padding-left: 0%;
  }

}


/* ---------------  FIM Medias Querys Até 498px ------------- */


/* ---------------  Medias Querys de 498px a 850px ------------- */
@media (min-width: 498px) and (max-width: 899px) {
    /* .allrotate{
      left: 5%;
    } */
    .center-circle {
      width: 140px;
      height: 140px;
      margin: -80px;
    }
    
    
    
    .service1,
    .service2,
    .service3,
    .service4,
    .service5,
    .service6 {
      width: 90px;
      height: 90px;
      font-size: 6px;
    }
    
    
    .service1 {
      transform: translate(125px); /* no rotation, just move to the right*/
      
    }
    
    .service2 {
      transform: rotate(60deg) translate(125px) rotate(300deg);
    }
    
    .service3 {
      transform: rotate(120deg) translate(125px) rotate(240deg);
    }
    
    .service4 {
      transform: translate(-125px); /*no rotation, just move to the left*/
    }
    
    .service5 {
      transform: rotate(240deg) translate(125px) rotate(120deg);
    }
    
    .service6 {
      transform: rotate(300deg) translate(125px) rotate(60deg);
    }
    
    .logo-holding{
      width: 80%;
      height: 125%;
    }
    

    /*--------- Formatação CARDING ------------*/
    .holding-grid{
      grid-template-columns: 1fr;
    }
    .card-holding-container{
      display: none;
    }

    .cta-atomo{
      top: 5%;
      font-size: 18px;
    }

    .cta-atomo-legenda {
    padding-left: 0%;
    }
    .holding-cta p{
      font-size: 16px;
      display: inline-block;
      text-align: center;
      bottom: 25%;
      left: 25%;
      transform: translate(0,205%);
    }
  
    .seta-img{
      display: none;
    }
}
/* --------------- FIM Medias Querys de 498px a 850px ------------- */



/* ---------------  Medias Querys de 900px a 1200px ------------- */
@media(min-width: 900px) and (max-width: 1199px){

  .center-circle {
    width: 60%;
    height: 60%;
    margin: -98px;
  }
   
  h3 {
    font-size: 200%;
  }
  
  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 100px;
    height: 100px;
    font-size: 6.5px;
  }
  .service1 {
    transform: translate(160%); 
    
  }
  
  .service2 {
    transform: rotate(60deg) translate(160%) rotate(300deg);
  }
  
  .service3 {
    transform: rotate(120deg) translate(160%) rotate(240deg);
  }
  
  .service4 {
    transform: translate(-160%); 
  }
  
  .service5 {
    transform: rotate(240deg) translate(160%) rotate(120deg);
  }
  
  .service6 {
    transform: rotate(300deg) translate(160%) rotate(60deg);
  }
  .logo-holding{
    
    width: 80%;
    height: 80%;
    
  }



  /* Formataçãodo container do CARD*/
  /* .card-holding{
      height:45%;
      width: 100%;
      padding-top: 5px;
  } 
  .card-title{
    font-size: 18px;
  } */
  .text-card{
    font-size: 10px;
  }
  .cta-atomo{
    font-size: 24px;
    top: 2%;
  }


  .holding-cta p {
    font-size: 13px;
    bottom: 35%;
    left: 20%;
    transform: translate(-1%,90%);
    text-align: end;
  }
  .seta-img{
    width: 80%;
    bottom: 25%;
    left: 35%;
    transform: translate(20%,38%)
  }

  .cta-atomo-legenda{
    color: #f1f1f1bf;
    font-weight: 300;
    font-size: 8px;
    display: inline-block;
    padding-left: 10%;
  }

  /*      Fim Container CARD      */

}

@media(min-width: 1200px) and (max-width: 1599px){
  

  .center-circle {
    width: 55%;
    height: 55%;
    margin: -90px;
  }
   
  h3 {
    font-size: 180%;
  }
  
  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 100px;
    height: 100px;
    font-size: 8px;
  }
  .service1 {
    transform: translate(150%); 
    
  }
  
  .service2 {
    transform: rotate(60deg) translate(150%) rotate(300deg);
  }
  
  .service3 {
    transform: rotate(120deg) translate(150%) rotate(240deg);
  }
  
  .service4 {
    transform: translate(-150%); 
  }
  
  .service5 {
    transform: rotate(240deg) translate(150%) rotate(120deg);
  }
  
  .service6 {
    transform: rotate(300deg) translate(150%) rotate(60deg);
  }
  .logo-holding{
    width: 75%;
    height: 75%;
  }

  /* .card-holding{
    width: 100%;
    height: 45%;
  } */
  /* .card-title{
    font-size: 20px;
  } */
  .text-card{
    font-size: 11px;
  }
  
  .holding-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .holding-cta p {
    display: block;
    color: #f1f1f1;
    font-weight: 600;
    font-size: 22px;
    transform: translate(15%,50%);
    text-align: end;
  }
  .seta-img{
    display: block;
    width: 80%;
    bottom: 25%;
    left: 35%;
    transform: translate(50%,5%);
  }
  
  .cta-atomo-legenda{
    font-size: 10px;
  }

}



/* ---------------  Medias de 1600px a 1800px ------------- */

@media(min-width: 1600px) and (max-width: 1800px){

  .center-circle {
    width: 80%;
    height: 80%;
    margin: -100px;
  }
   
  h3 {
    font-size: 180%;
  }
  
  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 155px;
    height: 155px;
    font-size: 8px;
  }
  .service1 {
    transform: translate(150%); 
    
  }
  
  .service2 {
    transform: rotate(60deg) translate(150%) rotate(300deg);
  }
  
  .service3 {
    transform: rotate(120deg) translate(150%) rotate(240deg);
  }
  
  .service4 {
    transform: translate(-150%); 
  }
  
  .service5 {
    transform: rotate(240deg) translate(150%) rotate(120deg);
  }
  
  .service6 {
    transform: rotate(300deg) translate(150%) rotate(60deg);
  }
  .logo-holding{
    
    width: 75%;
    height: 75%;
    
  }

/* 
  .card-holding{
    width: 100%;
    height: 40%;
  } */

  .card-title{
    font-size: 20px;
  }
  .text-card{
    font-size: 12px;
  }

  .holding-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .holding-cta p{
    display: block;
    color: #f1f1f1;
    font-weight: 600;
    font-size: 28px;
    bottom: 35%;
    left: 20%;
    transform: translate(17%,80%);
    text-align: end;
  }

  .seta-img{
    display: block;
    width: 80%;
    bottom: 25%;
    left: 35%;
    transform: translate(45%,35%);
  }
  
  .cta-atomo-legenda{
    color: #f1f1f1bf;
    font-weight: 300;
    font-size: 12px;
    display: inline-block;
    padding-left: 20%;
  }

}
/* --------------- FIM Medias de 1200px a 1800px ------------- */

/* ---------------  Medias de 1800px a 2560px ------------- */

@media(min-width: 1800px) and (max-width: 2560px){

  .center-circle {
    width: 100%;
    height: 100%;
    margin: -115px;
  }
   
  h3 {
    font-size: 180%;
  }
  
  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 180px;
    height: 180px;
    font-size: 8px;
  }
  .service1 {
    transform: translate(150%); 
    
  }
  
  .service2 {
    transform: rotate(60deg) translate(150%) rotate(300deg);
  }
  
  .service3 {
    transform: rotate(120deg) translate(150%) rotate(240deg);
  }
  
  .service4 {
    transform: translate(-150%); 
  }
  
  .service5 {
    transform: rotate(240deg) translate(150%) rotate(120deg);
  }
  
  .service6 {
    transform: rotate(300deg) translate(150%) rotate(60deg);
  }
  .logo-holding{
    
    width: 75%;
    height: 75%;
    
  }

  .cta-atomo{
    font-size: 34px;
    top: -7%;
  }


  /* .card-holding {
    width: 60%;
    height: 20%;
  } */

  
  .holding-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .holding-cta p{
    font-size: 32px;
    bottom: 35%;
    left: 20%;
    transform: translate(15%,120%);
    text-align: end;
  }
  .seta-img{
    bottom: 25%;
    left: 35%;
    transform: translate(45%,50%);
  }
  
  .cta-atomo-legenda{
    font-size: 14px;
    display: inline-block;
    padding-left: 20%;
  }

}
/* --------------- FIM Medias de 1800px a 2560px ------------- */

/* ---------------  Medias de 2560px a 3200px ------------- */
@media(min-width: 2560px) and (max-width: 3200px){

  .center-circle {
    width: 120%;
    height: 120%;
    margin: -145px;
  }
   
  h3 {
    font-size: 240%;
  }
  
  .service1,
  .service2,
  .service3,
  .service4,
  .service5,
  .service6 {
    width: 180px;
    height: 180px;
    font-size: 8px;
  }
  .service1 {
    transform: translate(170%); 
    
  }
  
  .service2 {
    transform: rotate(60deg) translate(170%) rotate(300deg);
  }
  
  .service3 {
    transform: rotate(120deg) translate(170%) rotate(240deg);
  }
  
  .service4 {
    transform: translate(-170%); 
  }
  
  .service5 {
    transform: rotate(240deg) translate(170%) rotate(120deg);
  }
  
  .service6 {
    transform: rotate(300deg) translate(170%) rotate(60deg);
  }
  .logo-holding{
    
    width: 80%;
    height: 151%;
    margin-top: -5%;
    
  }

  /* .card-holding{
    width: 60%;
    height: 25%;
  }
  /* Formataçãodo container do CARD*/
  /* .card-title{
    font-size: 28px;
  } */ */

  /*      Fim Container CARD      */

  .cta-atomo{
    padding-top: 125px;
  }

  /* .card-holding{
    height: 52%;
  } */
  /* .cta-holding-atomo{
    font-size: 18px;
    font-weight: bold;
  } */

  .holding-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .holding-cta p{
    font-size: 44px;
    bottom: 35%;
    left: 20%;
    transform: translate(35%,60%);
  }
  .seta-img{
    bottom: 25%;
    left: 35%;
    transform: translate(70%,30%);
  }

  .cta-atomo-legenda{
    font-size: 18px;
    padding-left: 20%;
  }
}
/* ---------------  Medias de 2560px a 3200px ------------- */