:root {
     --first-color: #cc3333;
     --second-color: #666666;
   }

   .fc {
     color: var(--first-color);
   }

   .sc {
     color: var(--second-color);
   }

   .tc {
     color: var(--third-color);
   }

   .z-index999 {
     z-index: 999;
   }

   .text-justify{
     text-align: justify;
   }

   .main-logo {
     width: 200px;
     height: 70px;
     position: relative;
     z-index: 999;
     margin-bottom: -40px;
   }

   .main-wave {
     margin-top:-30px;
   }

   .main-wave .wave-col {
      position: absolute;
   }

.main-wave .wave-col .wave-container{
  height: 150px;
  overflow: hidden;
}
.main-wave .wave-col .wave-container svg{
height: 100%;
width: 100%;
}

.main-wave .wave-col .wave-container svg path{
 stroke: none;
 fill: #fff;
}

.main-wave img{
  width:100%;
  height: 550px;
}



/* START EFECT HOVER WORKS*/
.image {
  overflow: hidden;
  position: relative;
}

figure img {
  border-radius: 5px;
  transition: all .23s ease;
}

/* .image figcaption {
  color: #555;
  height: 100%;
  width: 100%;
  top: 40%;
  position: absolute;
  text-align: center;
  transition: all .23s ease;
  font-size: 20px;
  font-weight: 600;
} */

.image figcaption{
  font-size: 20px;
  font-weight: 600;
  color: #555;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 100%;
}

.image.fades figcaption {
  opacity: 0;
  visibility: hidden;
}

.image.fades:hover>img {
  opacity: 0;
  visibility: hidden;
}

.image.fades:hover>figcaption {
  opacity: 1;
  visibility: visible;
}

/* END EFECT HOVER WORKS*/


.wave-content{
  position: absolute;
  margin-top: -450px;
  text-align: center;
}

.main-content-enterprise{
margin-top: -280px;
}
.main-content-enterprise .row .card{
 border-top: none;
}


.main-content-enterprise .row .card .row {
  padding: 0 10px;
  margin-top: -50px;
}

.content-enterprise a img{
  width: 100%;
  /* height: 100px; */
  /* margin-top: -20px; */
  padding: 10px;
}
    .whats-float:hover {
      background-color: #fff;
      color: #25d366;
      border: 2px solid #25d366;
    }

   .btn-web {
     background-color: #fff;
     color: #195cf0;
     width: 150px;
     height: 45px;
   }

   .btn-web:hover {
     transition: all 0.5s ease-out;
     background-color: #000;
     color: #fff;
   }


   .videoYoutube{
     overflow:hidden;
     height: 250px;
     width:100%;
   }


   .social .btn-xl {
     width: 120px;
     height: 120px;
     padding: 10px;
   }

   .gradient-border-mask {
     position: relative;
     padding: 15px 20px;
   }

   .gradient-border-mask::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     border: 7px solid transparent;
     background: linear-gradient(45deg, var(--first-color), var(--second-color)) border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
   }

   .red-title {
     font-size: 18px;
     font-weight: 600;
     color: #000;
   }

   .btn-cv {
     background-color: #fff;
     height: 50px;
     width: 350px;
     font-weight: 500;
     font-size: 22px;
   }

   .btn-cv:hover {
     background-color: #195cf0;
     color: #fff;
     transition: all 0.5s ease-out;
   }

   .title-footer {
     position: absolute;
     margin-top: 440px;
     z-index: 999;
     left: 50%;
     transform: translate(-50%, 0);
   }

   footer {
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #efeff6;
     color: #000;
     text-align: center;
     padding: 1rem;
     clear: both;
   }

   .flecha {
     animation: arrow 1s ease-in-out infinite;
     font-size: 20px;

   }

   .flecha:hover {
     animation: arrow 1s ease-out infinite !important;
     color: #229bf4;
   }

   @keyframes arrow {
     0% {
       transform: translateX(0%);
     }

     50% {
       transform: translate(50%);
     }

     100% {
       transform: translate(100%);
     }
   }



   /* Dispositivos pequeños (teléfonos horizontales, 576px y más) */
   @media (min-width: 576px) {
    
   }

   /* Dispositivos medianos (tabletas, 768px y más) */
   @media (min-width: 768px) {
     .videoYoutube {
       height: 300px;
     }
   }

   /* Dispositivos grandes (escritorios, 992px y más) */
   @media (min-width: 992px) {
     .videoYoutube {
       height: 100%;
     }
   }

   /* Dispositivos X-Large (escritorios grandes, 1200px y más) */
   @media (min-width: 1200px) {}

   /* XX-Dispositivos grandes (escritorios más grandes, 1400px y más) */
   @media (min-width: 1400px) {}