/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

 body {
    background: linear-gradient(to top, #000000 35%, #01180e 100%);            


 }

 nav ul a,
 nav .brand-logo {
   color: #ffffff;
   height: 100%;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400; /* Regular */   
   font-size: 18px !important;   
 }

.sidenav-overlay {
    z-index: 996 !important;
}

.sidenav {
    background-color: #000000 !important; 

z-index: 997 !important;
}
.sidenav a {
    color: #ffffff !important;
}


#titnoso {    
    margin-top: 8%;
    text-align: left !important;
    font-size: 50px;
    color: #55BE8D !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */     
}



.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="password"],
.input-field textarea {
  color: white !important;
}


.input-field input,
.input-field textarea{
  color: white;
}

.input-field input::placeholder,
.input-field textarea::placeholder {
  color: white;
  opacity: 1; /* Asegura que el color sea completamente visible en todos los navegadores */
}

.input-field input:focus + label,
.input-field textarea:focus + label, label {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Regular */   
  font-size: 18px !important;     
}

.input-field input:focus,
.input-field textarea:focus {
  border-bottom: 1px solid white;
  box-shadow: 0 1px 0 0 white;
}

 .swiper-button-next, .swiper-button-prev  {
    color: #55BE8D;
 }
 
.btn {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 18px !important;

}


 .brand-logo img{    
    height: 60%;
    object-fit: cover;
      
 }

 .banner{
    margin-top: -50px;
}


 .content h1 {
    margin-top: 8%;
    text-align: left !important;
    font-size: 45px;
    color: #55BE8D !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */        

}

.content h2 {    
    text-align: left !important;
    font-size: 30px !important;
    color: #55BE8D !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; 
    font-style: italic; 

}

.content h3 {
    text-align: left !important;
    font-size: 25px;
    color: #55BE8D !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */    
    line-height: 1.5; /* Esto ayuda a que el texto sea más legible */

}

.content p {
    font-size: 18px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */    
    line-height: 1.5; /* Esto ayuda a que el texto sea más legible */

}
.cta p {
    font-size: 30px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */    
    line-height: 1.3; /* Esto ayuda a que el texto sea más legible */
}


.content .block-image{
    display: flex;
    justify-content: center; 
    align-items: center;     
    background-color: #000;  
}

.content .block-image img {
    width: 50%;
    height: auto;  
    display: block;
    justify-content: center; /* Centra horizontalmente */


}

.content li {
    font-size: 18px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */   
    list-style-type: none;  /* Elimina los puntos predeterminados */
    position: relative;     /* Para colocar el icono de forma absoluta */
    padding-left: 20px;     /* Espacio para el icono */    
}

.content li::before {
    content: "✔";          /* Aquí va el símbolo del check */
    position: absolute;
    left: 0;               /* Coloca el ícono al inicio */
    top: 50%;              /* Alineación vertical */
    transform: translateY(-50%); /* Centra el ícono verticalmente */
    color: rgb(255, 255, 255);          /* Puedes cambiar el color */
    font-size: 18px;       /* Ajusta el tamaño del ícono */
}

#navbreadcrumb {
    max-height: 30px; 
    background-color: transparent;
    box-shadow: none !important;
    
}

#navbreadcrumb .nav-wrapper{
    max-height: 30px;
    display: flex;
    align-items: center;
    overflow-x: auto;

}

#navbreadcrumb .col {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

#navbreadcrumb .breadcrumb {
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    
}

#navbreadcrumb span {
    color: #55BE8D;
    
}




 p {
   line-height: 2rem;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400; /* Regular */   
 }
 
 .sidenav-trigger {
   color: #26a69a;
 }
 
 .parallax-container {
   min-height: 380px;
   line-height: 0;
   height: auto;
   color: rgba(0, 0, 0, 0.9);
 }
.parallax-container .section {
    width: 100%;
}

.banner .swiper {
    width: 100%;
    height: 100%;    
}

.banner .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 2rem; */
    background-color: transparent;
    /* border-radius: 1rem; */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.banner .slide-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;    
    padding: 3%;
    color: rgb(255, 255, 255);
    background-color: transparent;


}


.banner .slide-content .left{
    margin-left: 20px;
}

.banner .slide-content .left, 
.banner .slide-content .right {
    flex: 1;
}

.banner .slide-content .left h2 {
    font-size: 60px;
    text-align: left;
    margin-bottom: 1rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */

}

.banner .slide-content .left p {
    font-size: 30px;
    line-height: 1.6;
    
}

.banner .slide-content .right img {
    height: 100%;    
    object-fit: cover;
}

.slide-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #55BE8D;
    color: white;
    text-decoration: none;    
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */   
    font-size: 25px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.banner .slide-btn:hover {
    background-color: #55BE8D;
    transform: scale(1.05);
}        


.nosotros h2 {
    text-align: left !important;
    font-size: 45px;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */    
}

.nosotros p {
    font-size: 18px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */    
}

.nosotros img {
    width: 70%;
}

.portafolio .card-panel {
    background-color: #000000 !important;    
    border: 1px solid #55BE8D !important;
}

.portafolio h3{
    color: #55BE8D;
    font-size: 30px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */        
}

.subtitle{
    text-align: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */   
    font-size: 18px;    
}

.portafolio p {
    font-size: 18px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */    
}

.portafolio .collection {
    border: none;
}

.portafolio .collection a, i,.collection-item{
    background-color: #000000 !important; 
    border: 0px solid black;
    font-size: 18px;    
    color: white !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */       
}


#blogpreview {
    background-color: #000000 !important;    
    border: 1px solid #55BE8D !important;
}

#blogpreview h2 {
    font-size: 20px;
    color: #55BE8D;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */    
    text-align: left;    
    margin-top: 10px;
}


#blogpreview p {
    color: white !important;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */           
}

.blog p {
    color: white !important;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */               
}



.section h2 {
    text-align: center;
    font-size: 45px;
    color: #55BE8D;

}


.imglog {
    display: flex; 
    align-items: center; 
    justify-content: center;
}


footer h3 {
    color: #55BE8D;
    font-family: 'Raleway', sans-serif;
    font-weight: 400; /* Regular */   
    font-size: 20px;    
}

footer p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */   
    font-size: 18px;    
}



 
.icon-block {
    padding: 0 15px;
  }
  .icon-block .material-icons {
    font-size: inherit;
  }
  
  footer.page-footer {
    margin: 0;
  }
  
 
 
 
  /* Codigo slider marcas clientes */
 
 
  .client .swiper {
     width: 100%;
     height: 100%;
 }
 
 .client .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #000000;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .client .swiper-slide img {
     display: block;    
     height: 100%;
     object-fit: cover;
 }
 
 .client .swiper {
     width: 100%;
     height: 50px;    
 }
 
 .client .append-buttons {
     text-align: center;
     margin-top: 20px;
 }
 
 .client .append-buttons button {
     display: inline-block;
     cursor: pointer;
     border: 1px solid #007aff;
     color: #007aff;
     text-decoration: none;
     padding: 4px 10px;
     border-radius: 4px;
     margin: 0 10px;
     font-size: 13px;
 }

 
 /* Estilos para el botón de WhatsApp flotante */
 .whatsapp-float {
     position: fixed; /* Hace que el botón "flote" */
     width: 60px;     /* Ancho del botón */
     height: 60px;    /* Alto del botón */
     bottom: 40px;    /* Distancia desde la parte inferior */
     right: 40px;     /* Distancia desde la parte derecha */
     background-color: #25d366; /* Color de fondo de WhatsApp */
     color: #FFF;     /* Color del icono */
     border-radius: 50px; /* Hace el botón circular */
     text-align: center;  /* Centra el icono */
     font-size: 30px;     /* Tamaño del icono (si fuera texto) */
     box-shadow: 2px 2px 3px #999; /* Sombra sutil para un efecto 3D */
     z-index: 1000;       /* Asegura que esté por encima de otros elementos */
     display: flex;       /* Para centrar la imagen */
     justify-content: center; /* Para centrar la imagen horizontalmente */
     align-items: center; /* Para centrar la imagen verticalmente */
 }
 
 .whatsapp-float:hover {
     background-color: #1DA851; /* Un verde un poco más oscuro al pasar el ratón */
 }
 
 .whatsapp-float .whatsapp-icon {
     width: 35px; /* Tamaño del icono de WhatsApp */
     height: 35px;
 }


@media only screen and (max-width : 600px) {
    #index-banner .section {
      top: 0;
    }

    .banner{
        margin-top: -50px;
    }
 
    .titulo h2 {
     text-align: center !important;
   }   
 
   .banner .slide-content {
     height: 1000px;
 
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-float .whatsapp-icon {
        width: 30px;
        height: 30px;
    }    
  }

@media (min-width: 601px) and (max-width: 992px) {

    .slide-content {
        flex-direction: column;
        text-align: center;
    }

    .slide-content .left, 
    .slide-content .right {
        flex: unset;
    }
    .banner .slide-content {
        height: 500px;
    
    }    
}   
 
@media (min-width: 993px) {
    .parallax-container .section {
     position: absolute;
     top: 40%;
   }
   #index-banner .section {
     top: 10%;
   }
   .banner .slide-content {
    height: 400px;

   }   
 }