/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
/*=============== VARIABLES CSS ===============*/

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}






img {
  max-width: 100%;
  height: auto;
}




.row-service  {
  display: flex;
  flex-wrap: wrap;

  padding: 20em 7em;
  margin-top: -310px;

  

}



.column {

  width: 100%;
  text-align: center;
  margin-top: 50px;
  padding: 0px 20px 20px 0px;
  flex-direction: column;

}



.column {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}







.card2 {
  background: #1e2326;
  padding-block: 4.5rem;
  
}


 .card__title2{

margin-top: 280px;
 }






 .card3 {
  width: 100%;
  height: 100%;
  padding: 6em 1.5em;
  background: linear-gradient(#1e232670 50%, #0c4c5096  50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.466);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 20px;
 
}

.card3 img{

  height: 2.9em;
  max-width: 110px;
  display: block;
  margin-top: -9px ;
  margin-left: -4px;

}



.icon-wrapper {
  background: linear-gradient(to top, rgba(30, 35, 38, 0.562), rgba(30, 35, 38, 0.466)),
  url(img/Consultoria.svg);
  /* background-color: #cdd8e9; */
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.8em;
  width: 2.8em;
  /* color: #30f3a286; */
  border-radius: 50%;
  display: grid;
  /* display: block; */
  place-items: center;
  margin-top: -40px;
 
  transition: 0.5s;
  /* animation: animate 20s infinite; */




}





.card3:hover {
  background-image: url(img/AGREGAR.jpg);
  background-size: cover;
  background-color: #1f261e;
  background-blend-mode: multiply;
  background-position: 0 100%;
  opacity: 0.6;


height: 94%;
width: 100%;
  background-color: #1e2326;
  color: #fff;






}


.card3:hover .icon-wrapper {
  background-color: #30f3a286;;
  color: #79fe2c;
  position: relative;
  /* animation: animate 2.9s infinite; */
}

.card3:hover .icon-wrapper::before{

content: "";
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(86, 165, 52, 0.295) 40%, #15aff7fd, #3f0558);
background-size: 300% 300%;
border-radius: 50%;
animation: example 5s ease-in-out infinite;
/* box-shadow: -1px 0px 20px #53171765; */
/* opacity: 0.3; */
opacity: .4;
box-shadow: 0px 1.5px 1.5px 1.5px hsla(197, 38%, 55%, 0.945);

/* animation: animate 3s infinite; */



}
@keyframes example {
  0%{background-position: 0 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0 50%;}
  }





.card3:hover h3 {
  color: #2be2e9;
  
}

.card3:hover p {
  color: #f0f0f0;
}


@keyframes float-img {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shape-animate {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.card3 p{
text-align: left;


}


.card3 span{


    text-align: center;
    
    
}




.card3 h3{


  text-align: center;
  background-color: #79fe2c11;
  padding: 10px 0 10px;
  border-radius: 5%;
  
  
  
}



.card3:hover h3 {
  background-color: #79fe2c36;
  padding: 10px 0 10px;
  border-radius: 5%;
  box-shadow: 0 5px 7px hsla(202, 71%, 46%, 0.219);


}

@media screen and (max-width: 768px) {
  .card__container {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  .card__container {
    grid-template-columns: repeat(2, 328px);
    column-gap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .card3 {
    height: 100vh;
  }
  .card__container {
    grid-template-columns: repeat(3, 328px);
    column-gap: 2rem;
  }
}

/* **********************************************DESACTIVADO********************************* */

/* **********************************************II********************************* */


.texto-oculto-3 {
  display: none;
}

.card3-3:hover .texto-oculto-3 {
  display: block;
}

.visualizar-btn-3 {
  position: absolute;
  top: 10px;
  right: 10px;
}

.card3-3 {
  width: 100%;
  height: 100%;
  padding: 6em 1.5em;
  background: linear-gradient(#1e232670 50%, #0c4c5096  50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.466);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 20px;
 
}

.card3-3 img{

  height: 2.9em;
  max-width: 110px;
  display: block;
  margin-top: -9px ;
  margin-left: -4px;

}



.icon-wrapper-3 {
  background: linear-gradient(to top, rgba(30, 35, 38, 0.562), rgba(30, 35, 38, 0.466)),
  url(img/Consultoria.svg);
  /* background-color: #cdd8e9; */
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.8em;
  width: 2.8em;
  /* color: #30f3a286; */
  border-radius: 50%;
  display: grid;
  /* display: block; */
  place-items: center;
  margin-top: -40px;
 
  transition: 0.5s;
  /* animation: animate 20s infinite; */




}





.card3-3:hover {
  background-image: url(img/AGREGAR.jpg);
  background-size: cover;
  background-color: #1f261e;
  background-blend-mode: multiply;
  background-position: 0 100%;
  opacity: 0.8;


height: 94%;
width: 100%;
  background-color: #1e2326;
  color: #fff;






}


.card3-3:hover .icon-wrapper {
  background-color: #51f330e8;;
  color: #79fe2c;
  position: relative;
  /* animation: animate 2.9s infinite; */
}

.card3-3:hover .icon-wrapper::before{

content: "";
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(86, 165, 52, 0.562) 40%, #15aff7fd, #3f0558);
background-size: 300% 300%;
border-radius: 50%;
animation: example 5s ease-in-out infinite;
opacity: .9;
box-shadow: 0px 1.5px 1.5px 1.5px hsla(197, 38%, 55%, 0.945);

/* animation: animate 3s infinite; */



}
@keyframes example {
  0%{background-position: 0 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0 50%;}
  }





.card3-3:hover h3 {
  /* color: #d8ffff; */
  background: linear-gradient(145deg,#21d2e9, #68d36d70,#6a792b);

  
  
}

.card3-3:hover p {
  color: #f0f0f0;


}


@keyframes float-img {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shape-animate {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.card3-3 p{
text-align: left;


}


.card3-3 span{


    text-align: center;
    
    
}




.card3-3 h3{


  text-align: center;
  background-color: #79fe2c11;
  padding: 10px 0 10px;
  border-radius: 5%;
  
  
  
}



.card3-3:hover h3 {
  /* background-color: #79fe2cb9; */
  background: linear-gradient(145deg,#68d36df1, #68d36db7,#6a792b);
  padding: 10px 0 10px;
  border-radius: 5%;
  box-shadow: 0 5px 7px hsla(202, 71%, 46%, 0.219);







}


/* **********************************************DESACTIVADO********************************* */

/* **********************************************III -4 ********************************* */


.texto-oculto-4 {
  display: none;
}

.card3-4:hover .texto-oculto-5 {
  display: block;
}

.visualizar-btn-4 {
  position: absolute;
  top: 10px;
  right: 10px;
}

.card3-4 {
  width: 100%;
  height: 100%;
  padding: 6em 1.5em;
  background: linear-gradient(#1e232670 50%, #0c4c5096  50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.466);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 20px;
 
}

.card3-4 img{

  height: 2.9em;
  max-width: 110px;
  display: block;
  margin-top: -9px ;
  margin-left: -4px;

}



.icon-wrapper-4 {
  background: linear-gradient(to top, rgba(30, 35, 38, 0.562), rgba(30, 35, 38, 0.466)),
  url(img/MAYER\ CONSULTING-02.svg);
  /* background-color: #cdd8e9; */
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.8em;
  width: 2.8em;
  /* color: #30f3a286; */
  border-radius: 50%;
  display: grid;
  /* display: block; */
  place-items: center;
  margin-top: -40px;
 
  transition: 0.5s;
  /* animation: animate 20s infinite; */




}





.card3-4:hover {
  background-image: url(img/AGREGAR-2.jpg);
  background-size: cover;
  background-color: #1f261e;
  background-blend-mode: multiply;
  background-position: 0 100%;
  opacity: 0.8;


height: 94%;
width: 100%;
  background-color: #1e2326;
  color: #fff;






}


.card3-4:hover .icon-wrapper {
  background-color: #51f330e8;;
  color: #79fe2c;
  position: relative;
  /* animation: animate 2.9s infinite; */
}

.card3-4:hover .icon-wrapper::before{

content: "";
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(86, 165, 52, 0.562) 40%, #15aff7fd, #3f0558);
background-size: 300% 300%;
border-radius: 50%;
animation: example 5s ease-in-out infinite;
/* box-shadow: -1px 0px 20px #53171765; */
/* opacity: 0.3; */
opacity: .4;
box-shadow: 0px 1.5px 1.5px 1.5px hsla(197, 38%, 55%, 0.945);

/* animation: animate 3s infinite; */



}
@keyframes example {
  0%{background-position: 0 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0 50%;}
  }





.card3-4:hover h3 {
  background: linear-gradient(145deg,#21d2e9, #68d36d70,#6a792b);

  
}

.card3-4:hover p {
  color: #f0f0f0;
}


@keyframes float-img {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shape-animate {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.card3-4 p{
text-align: left;


}


.card3-4 span{


    /* text-align: center; */
    text-align: left;
    
    
}




.card3-4 h3{


  text-align: center;
  background-color: #79fe2c11;
  padding: 10px 0 10px;
  border-radius: 5%;
  
  
  
}



.card3-4:hover h3 {
  background: linear-gradient(145deg,#68d36df1, #68d36db7,#6a792b);
  padding: 10px 0 10px;
  border-radius: 5%;
  box-shadow: 0 5px 7px hsla(202, 71%, 46%, 0.219);







}


/* **********************************************III-5********************************* */

.texto-oculto-5 {
  display: none;
}

.card3-5:hover .texto-oculto-5 {
  display: block;
}

.card3-5:hover .texto-oculto-5 p {
  text-align: left;
}



.visualizar-btn-5 {
  position: absolute;
  top: 10px;
  right: 10px;
}

.card3-5 {
  width: 100%;
  height: 100%;
  padding: 6em 1.5em;
  background: linear-gradient(#1e232670 50%, #0c4c5096  50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.466);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 20px;
 
}

.card3-5 img{

  height: 2.9em;
  max-width: 110px;
  display: block;
  margin-top: -9px ;
  margin-left: -4px;

}



.icon-wrapper-5 {
  background: linear-gradient(to top, rgba(30, 35, 38, 0.562), rgba(30, 35, 38, 0.466)),
  url(img/MAYER\ CONSULTING-03.svg);
  /* background-color: #cdd8e9; */
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.8em;
  width: 2.8em;
  /* color: #30f3a286; */
  border-radius: 50%;
  display: grid;
  /* display: block; */
  place-items: center;
  margin-top: -40px;
 
  transition: 0.5s;
  /* animation: animate 20s infinite; */




}





.card3-5:hover {
  background-image: url(img/AGREGAR-3.jpg);
  background-size: cover;
  background-color: #1f261e;
  background-blend-mode: multiply;
  background-position: 0 100%;
  opacity: 0.8;


height: 94%;
width: 100%;
  background-color: #1e2326;
  color: #fff;






}


.card3-5:hover .icon-wrapper {
  background-color: #51f330e8;;
  color: #79fe2c;
  position: relative;
  /* animation: animate 2.9s infinite; */
}

.card3-5:hover .icon-wrapper-5::before{

content: "";
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(86, 165, 52, 0.164) 40%, #15aff74d, #3f05582f);
background-size: 100% 100%;
border-radius: 50%;
animation: example 5s ease-in-out infinite;
/* box-shadow: -1px 0px 20px #53171765; */
/* opacity: 0.3; */
opacity: 0;

box-shadow: 0px 1.5px 1.5px 1.5px hsla(197, 38%, 55%, 0.945);

/* animation: animate 3s infinite; */



}







.card3-5:hover .icon-wrapper-5::before{
  background: linear-gradient(to top, rgba(30, 35, 38, 0.562), rgba(30, 35, 38, 0.466)),
  url(img/MAYER\ CONSULTING-03.svg);
  /* background-color: #cdd8e9; */
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.8em;
  width: 2.8em;
  /* color: #30f3a286; */
  border-radius: 50%;
  display: grid;
  /* display: block; */
  place-items: center;
  margin-top: -40px;
  opacity: -1;
 
  transition: 0.5s;
  /* animation: animate 20s infinite; */




}






@keyframes example {
  0%{background-position: 0 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0 50%;}
  }





.card3-5:hover h3 {
  background: linear-gradient(145deg,#21d2e9, #68d36d70,#6a792b);
  
}

.card3-5:hover p {
  color: #f0f0f0;
}


@keyframes float-img {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shape-animate {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.card3-5 p{
text-align: left;


}


.card3-5 span{


    text-align: left;
    
    
}




.card3-5 h3{


  text-align: center;
  background-color: #79fe2c11;
  padding: 10px 0 10px;
  border-radius: 5%;
  
  
  
}



.card3-5:hover h3 {
  background: linear-gradient(145deg,#68d36df1, #68d36db7,#6a792b);
  padding: 10px 0 10px;
  border-radius: 5%;
  box-shadow: 0 5px 7px hsla(202, 71%, 46%, 0.219);

}






.card3-5:hover span {


  text-align: left;
  
  
}


/* ****************************************************FIN*************************************** */



@media screen and (max-width: 768px) {
  .card__container {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  .card__container {
    grid-template-columns: repeat(2, 328px);
    column-gap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .card3 {
    height: 100vh;
  }
  .card__container {
    grid-template-columns: repeat(3, 328px);
    column-gap: 2rem;
  }
}






@media screen and (max-width: 767px) {

  .row-service  {
    display: flex;
    flex-wrap: wrap;
  
    padding: 0em 0em 0em 0em;
    margin-top: 0px;
  
    
  
  }
  
  
  
  .column {
  
    width: 100%;
    text-align: center;
    margin-top: 50px;
    padding: 0px 10px 5px 0px;
    flex-direction: column;
  
  }
  

  
  .column {
    flex: 0 0 100.33%;
    max-width: 100.33%;
  }
  
  


.column {
 


  width: 100%;
  text-align: center;

  margin-top: 15px;
  padding: 0px 20px 20px 0px;
  flex-direction: column;
  

}

.card__title2{

  margin-top: 0px;
   }


  }