
 html,
 body,
 header,
 .view {
   height: 700px;
 }
 .view_caracteristicas{
  height: 450px;
}
.viewcliente{
  height: 450px;
}
.viewhistoria{
  height: 450px;
  background-color: #343746 !important;
}
.viewnosotros{
  height: 450px;
  background-color: #0D3562 !important;
}
.viewDescarga{
  height: 100%;
}


 @media (max-width: 740px) {
   html,
   body,
   header,
   .view {
     height: 700px;
   }
   .view_caracteristicas{
    height: 450px;
  }
  .viewcliente{
    height: 450px;
  }
  .viewhistoria{
    height: 450px;
    background-color: #343746 !important;
  }
  .viewnosotros{
    height: 450px;
    background-color: #0D3562 !important;
  }
 }


 @media (min-width: 800px) and (max-width: 850px) {
   html,
   body,
   header,
   .view {
     height: 700px;
   }
   .view_caracteristicas{
    height: 450px;
  }
  .viewcliente{
    height: 450px;
  }
  .viewhistoria{
    height: 450px;
    background-color: #343746 !important;
  }
  .viewnosotros{
    height: 450px;
    background-color: #0D3562 !important;
  }
 }


 .top-nav-collapse {
   background-color: #c41d18 !important;
 }

 .navbar:not(.top-nav-collapse) {
   background: #c41d18 !important;
 }

 @media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
   background: #c41d18 !important;
  }
 }

 h6 {
   line-height: 1.7;
 }

 
 .contact-section .form .btn-floating {
   left: 3px;
 }

 
 .map-container-section {
   overflow:hidden;
   padding-bottom:56.25%;
   position:relative;
   height:0;
 }
 .map-container-section iframe {
   left:0;
   top:0;
   height:100%;
   width:100%;
   position:absolute;
 }

 .appWhatsapp{
   position: fixed;
   right: 26px;
   bottom: 100px;
   width: 60px;
   z-index: 1000;
 }

 .appWhatsapp img{
  width: 100%;
  height: auto;
}
footer{
  background: #258436 !important;
}

.intro-section{
  background: #0D3562 !important;
}

li a.actives{
  background: #258436;
  transition: .10s;
  border-radius: 20%;
}


.enlace{
  position: absolute;
  padding: 0px 50px
 }
 
 .cambiacolor:nth-child(1):hover{
   background-color: #258436;
  }


  
  --------------------------------------------------------

  .hero-section {
    position: relative;
    overflow: hidden;
  }
  
  .object-fit-cover {
    object-fit: cover;
  }
  
 
  
  .content h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  }
  
  .content p {
    font-size: 1.2rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  }
  
  .btn-light:hover {
    background-color: #38a939;
    color: #fff;
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
  }
  
  .wave {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
  }

  -----------------------------------------------------------------

 /* Estilos del formulario */
#contact-form {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#contact-form:hover {
  transform: translateY(-5px); /* Efecto al pasar el ratón */
  opacity: 0.9;
}

#contact-form input,
#contact-form textarea {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 10px;
  transition: border-color 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: #38a939; /* Color verde al hacer focus */
  outline: none;
}

#contact-form button {
  background-color: #38a939;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact-form button:hover {
  background-color: #2c8e2e;
}

/* Animaciones de entrada */
[data-aos="zoom-in"] {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s, transform 0.6s;
}

[data-aos="zoom-in"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}






