@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

  body {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden;
  }



* {
    box-sizing: border-box;

}

  #video-container {
    position:relative;
    top: 0;
    left: 0;
    width: 100%;
    height:750px;
    overflow: hidden;
  }

  .nosdiv p{
  width: 80%;
  margin-left: 10%;
  text-align: center;
  border-left: solid 3px black;
  }

  section {
    padding: 0px;
    position: relative;
    margin-top:0%;
    max-width: 100%;
  }

  video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    filter: grayscale(60%) brightness(50%) contrast(100%);
  }

  #video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgb(200,199,214);
  background: radial-gradient(circle, rgba(200,199,214,0) 22%, rgba(213,213,213,0) 53%, rgba(2,0,10,0.9024859943977591) 98%);
  }

  #video-container2 {
    position:relative;
    top: 0;
    left: 0;
    width: 100%;
    height:450px;
    overflow: hidden;
  }

  .paragraph-video{
    width: 70%;
    margin-left: 10%;
    margin-top:1%;
    padding:1%;
    border-left: solid 5px white;

  }

  .paragraph-video p{
    color:white;
    margin-top: 1px;
  }


  .paragraph-video img{
    width:255px;
  }


  #video-container2::before {
    content: "";
    position: ;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgb(200,199,214);
  background: radial-gradient(circle, rgba(200,199,214,0) 22%, rgba(213,213,213,0) 53%, rgba(2,0,10,0.9024859943977591) 98%);
  }


  #content {
    position: relative;
    z-index: 1;
    /* Agrega estilos adicionales para tu contenido */
  }

  .topnav {
    overflow: hidden;
    background-color:;
    position: relative;
    transition: 1s;

  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
    margin-left: 5%;

  }

  /* Style navigation menu links */
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }

  /* Style the hamburger menu */
  .topnav a.icon {
    font-size: 40px;
    background:;
    display: block;
    position: absolute;
    right: 3%;
    top: 10%;
  }

  /* Add a grey background color on mouse-over */
  .topnav a:hover {
    background-color:transparent ;
    color: #BDB8B3;
    transition: 1s;
  }

  /* Style the active link (or home/logo) */
  .active {
    background-color: transparent;
    color: white;
  }

  .log{
    margin-left: 10%;

  }
  .log h1 {
  margin-bottom:-6px;
  font-size:50px;
  }
  .log small {
    margin-top: 0px;
    letter-spacing: inherit;
    margin-left: 2px;
    font-size:22px;
  }

  .padiv{
    width: 90%;
    display: flex;
    position: relative;
    margin-top:5%;
    margin-left:5%;
  }
  .titlediv{
    width:30%;
    margin-left:5%;
    padding:1%;
    background: rgb(255,134,118);
  background: linear-gradient(131deg, rgba(255,134,118,1) 14%, rgba(249,196,110,1) 72%, rgba(253,187,45,1) 100%);
  }

  .titlediv2{
    width: 30%;
    margin-left:5%;
    padding:1%;
    border: solid 1px;

  }
  .titlediv h2{
    color: white;
    text-align:left;
    border-left: solid 5px white;
    padding:3px;


  }
  .titlediv p{
    color: white;
    text-align:left;

  }
  .titlediv2 h2{
    color: black;
    border-left: solid 2px white;
    padding: 1px;

  }
  .titlediv2 p{
    color: black;

  }

  .titlediv img{
    width: 25%;
    margin-left: 40%;
  }

  .titlediv2 img{
    width: 25%;
    margin-left: 40%;
  }
  .imagefix{
    margin-top: 5%;
    padding: 10%;
    background: url(../img/2020camb.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .imagefix h3{
    font-size:50px;
    font-weight: bolder;
    color: white;
  }

  .imagefix p{
    color: white;
  }

  .imagefix a{
    background:#064D82;
    color:white;
    text-decoration: none;
    padding: 8px;
    font-style: 20px;
    font-weight: bolder;
    border-radius: 10px;
  }




  .imagefix2{
    margin-top: 5%;
    padding: 10%;
    background: url(../img/grua1.jpg);
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
  }

  .imagefix2 h3{
    font-size:50px;
    font-weight: bolder;
    color: white;
  }

  .imagefix2 p{
    color: white;
  }

  .imagefix2 a{
    background:#064D82;
    color:white;
    text-decoration: none;
    padding: 8px;
    font-style: 20px;
    font-weight: bolder;
    border-radius: 10px;
  }



  .imagefix3{
    margin-top: 5%;
    padding: 10%;
    background: url(../img/portada334.jpg);
    background-size: cover;
    background-position:center;
    background-attachment: fixed;

  }

  .imagefix3 h3{
    font-size:50px;
    font-weight: bolder;
    color: white;
  }

  .imagefix3 p{
    color: white;
  }

  .imagefix3 a{
    background:#064D82;
    color:white;
    text-decoration: none;
    padding: 8px;
    font-style: 20px;
    font-weight: bolder;
    border-radius: 10px;
  }




  .imagefix4{
    margin-top: 5%;
    padding: 10%;
    background: url(../img/trabajo.jpg);
    background-size: cover;
    background-position:bottom;
    background-attachment: fixed;

  }

  .imagefix4 h3{
    font-size:50px;
    font-weight: bolder;
    color: white;
  }

  .imagefix4 p{
    color: white;
  }

  .imagefix4 a{
    background:#064D82;
    color:white;
    text-decoration: none;
    padding: 8px;
    font-style: 20px;
    font-weight: bolder;
    border-radius: 10px;
  }




  .titlediv a{
    background:#064D82;
    color:white;
    text-decoration: none;
    padding: 8px;
    font-style: 20px;
    font-weight: bolder;
    border-radius: 10px;
  }


  .slide {
        display: none; /* Ocultar todas las diapositivas por defecto */
        margin-top: 10%;
        margin-left: 10%;
        position: absolute;
      }

      .slide h1{
          color:white;
          font-size: 30px;
          font-weight: bolder;
          margin-bottom: 0px;
          }
          .slide p{
              color:white;
              font-size: 20px;
              margin-top: 10px;
              }
  .icoslide {
    width:95px;
  }
  .smalltitle {

  padding:3px;
  border-radius: 5px;
  margin-top: 10px;
  transition: 1s;


  }.titleseccion {
    width: 100%;
    text-align: center;
    font-size: 35px;
  }
  .imgfija{


  }


  @keyframes zoomBackground {
    0% {
      background-size: 100%;
    }
    50% {
      background-size: 110%;
    }
    100% {
      background-size: 100%;
    }
  }


  .imgfija::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px;
    background: url(../img/rbla.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) brightness(50%) contrast(100%);
    z-index: -1;
    animation: zoomBackground 10s ease-in-out infinite;
  }

  .imgfija2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px;
    background: url(../img/cont_puerto.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) brightness(50%) contrast(100%);
    z-index: -1;
    animation: zoomBackground 10s ease-in-out infinite;
  }

  .imgfija3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px;
    background: url(../img/depo2.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) brightness(50%) contrast(100%);
    z-index: -1;
    animation: zoomBackground 10s ease-in-out infinite;
  }

  .imgfija4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px;
    background: url(../img/playa2.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) brightness(50%) contrast(100%);
    z-index: -1;
    animation: zoomBackground 10s ease-in-out infinite;
  }



  .cuadrante1 {
    width: 45%;
    margin-left: 10%;
    margin-top:5%;
    background: RGB(0,0,0,0.3);
    padding:1%;
    border-left: solid 5px white;
  }

  .cuadrante1 h1,p {
    color:white;
  }


  .secc-2{
    margin-left: 10%;
    width:80%;
    margin-top:5%;
    text-align: center;
  }
  .secc-2 p{
    color: black;
  }

  .par{
    border-left: solid 3px black;
    text-align: left;
    padding: 5px;
  }
  .coountaincard{
    width: 90%;
    display: flex;
    margin-left: 5%;
  }

  .card {
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-left: 5%;
      margin: 10px;
      padding:3%;
      width:30%;
      margin-left:1%;
      text-align: center;
      transition: transform 0.3s ease;
  }

  .card:hover {
      transform: scale(1.05);
  }

  .card h2,p {
    color: black;
  }

  .request-button {
      background-color: #007BFF;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      transition: background-color 0.3s ease;
  }

  .request-button:hover {
      background-color: #0056b3;
  }

  .icoimag {
    width:25%;
  }

  .footer {
      background-color: #2c3e50;
      color: #ffffff;
      padding: 40px 0 20px;
  }

  .footer-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .footer-section {
      flex: 1;
      margin: 20px;
      min-width: 250px;
  }
  .footer-section img{
    width: 185px;

  }
  .footer-section h2 {
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: bold;
  }

  .footer-section p {
    color:white;
  }

  .footer-section p,
  .footer-section ul {
      font-size: 14px;
      line-height: 1.6;
  }

  .footer-section ul {
      list-style-type: none;
      padding: 0;
  }

  .footer-section ul li {
      margin-bottom: 10px;
  }

  .footer-section ul li a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
  }

  .footer-section ul li a:hover {
      color: #f39c12;
  }

  .footer-bottom {
      text-align: center;
      padding: 10px 0;
      font-size: 14px;
      border-top: 1px solid #ffffff;
      margin-top: 20px;
  }

  .footer-bottom p {
      margin: 0;
  }

  @media (max-width: 768px) {
      .footer-content {
          flex-direction: column;
          align-items: center;
      }

      .footer-section {
          margin: 20px 0;
      }


      .imgfija{
          width: 100%;
          height:550px;
          background: url(../img/rbla.jpg);
          background-repeat: no-repeat;
          background-size: cover;
    background-position: center;


      }


      .imgfija::before {
        filter: grayscale(20%) brightness(50%) contrast(100%);
        z-index: -1;
      }


      .imgfija3{
          width: 100%;
          height:550px;
          background: url(../img/depo2.jpg);
          background-repeat: no-repeat;
          background-size: cover;
    background-position: center;


      }


      .imgfija3::before {
        filter: grayscale(20%) brightness(50%) contrast(100%);
        z-index: -1;
      }



      .imgfija2{
          width: 100%;
          height:550px;
          background: url(../img/cont_puerto.jpg);
          background-repeat: no-repeat;
          background-size: cover;
    background-position: center;


      }


      .imgfija2::before {
        filter: grayscale(20%) brightness(50%) contrast(100%);
        z-index: -1;
      }



      .imgfija4{
          width: 100%;
          height:550px;
          background: url(../img/playa2.jpg);
          background-repeat: no-repeat;
          background-size: cover;
    background-position: center;


      }


      .imgfija4::before {
        filter: grayscale(20%) brightness(50%) contrast(100%);
        z-index: -1;
      }


  }



  .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px;
  }

  .gallery img {
      height: 380px;
      width: 30%;
      margin-bottom: 20px;
      cursor: pointer;
      border: 2px solid #ddd;
      transition: transform 0.3s ease;
  }

  .gallery img:hover {
      transform: scale(1.05);
  }

  .lightbox {
      display: none;
      position: fixed;
      z-index: 1000;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 90%;
      height: 90%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.8);
  }

  .lightbox-content {
      margin: auto;
      display: block;
      max-width: 80%;
      max-height: 80%;
      animation: fadeIn 0.5s;
  }

  @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
  }

  .close {
      position: absolute;
      top: 50px;
      right: 100px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
  }

  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }
  .inliner{
    display: inline;

  }

  .inliner a{
    color: white;
      margin-left:10px;
      text-decoration: none;
      transition:3s;
  }

  .inliner a:hover{
    text-decoration:underline;
    transition:3s;

  }
  .contacto{
    margin-top: 2%;
    padding: 3%;
    width: 80%;
    margin-left: 10%;
  }

  .contact_form{
    width: 100%;
  }

  .input{
  width: 90%;
  padding: 1%;
  border-radius: 5px;

  }

  #submit_button{
    width: 92%;
    background: orange;
    color: white;
    padding: 1%;
  border-radius: 5px;
  border: none;
  margin-top: 2%;
  transition: 1s;
  }


  #submit_button:hover{
    background: #b97306;

  }

  .btn-empleo{
    background: #024286;
    color: white;
    padding: 1%;
    border-radius: 5px;
    text-decoration: none;
    transition: 1s;
  }
  .btn-empleo:hover{
    background: #002041;
  }

  .contacto-rapido {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
  }

  .whatsapp-button img {
    width: 80px;
    height: 80px;
    margin-left: 10px;
  }

  #modalButton {
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  /* Modal CSS */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .contentcard{
    display: flex;
    display: grid;

  }

  .card1{
    width: 20%;
    margin-left: 2px;
    background: blue;
    padding: 1%;
    border-radius: 5px;
    display: grid;


  }
  .card1 a{
    color:white;
    text-decoration: none;
  }


  @media (max-width: 768px) {
    .coountaincard, .padiv, .contentcard {
        display: block;

    }

    .paragraph-video{
      width: 90%;
      margin-left: 5%;
      margin-top:1%;
      padding:1%;
      border-left: solid 5px white;

    }


    .paragraph-video p{
      color:white;
      margin-top: 1px;
    }


    .paragraph-video img{
      width:40px;
    }


    .titlediv, .titlediv2, .card1 {
        width: 90%;
        margin-left: 0;
        padding: 1%;
    }


}

@media (max-width: 768px) {
  .paragraph-video img {
    width:20%;
  }

.imagefix{
width: 100%;
background-attachment: scroll;
}





.contentimagefix{
width: 100%;
background: rgba(0,0,0,0.3);
padding: 10px;
}

.imagefix a{
font-size: 10px;
}
.imagefix p{
font-size: 15px;
}
.imagefix h3{
font-size:30px;
}


.imagefix2{
width: 100%;
background-attachment:local;

}
.contentimagefix2{
width: 100%;
background: rgba(0,0,0,0.3);
padding: 10px;
}
.imagefix3{
width: 100%;
background-attachment: scroll;

}
.contentimagefix3{
width: 100%;
background: rgba(0,0,0,0.3);
padding: 10px;
}
.imagefix4{
width: 100%;
background-attachment: scroll;

}
.contentimagefix4{
  width: 100%;
  background: rgba(0,0,0,0.3);
  padding: 10px;
}


.imagefix2 a{
font-size: 10px;
}
.imagefix2 p{
font-size: 15px;
}
.imagefix2 h3{
font-size:30px;
}

.imagefix3 a{
font-size: 10px;
}
.imagefix3 p{
font-size: 15px;
}
.imagefix3 h3{
font-size:30px;
}
.imagefix4 a{
font-size: 10px;
}
.imagefix4 p{
font-size: 15px;
}
.imagefix4 h3{
font-size:30px;
}

  .titlediv2 {
    width: 90%;
    margin: 10px 0;
    padding: 4%;
  }



    .titlediv {
      width: 90%;
      margin: 10px 0;
      padding: 4%;
    }

  .titlediv img {
    width: 25%;
    margin-left:5%;
}

  .topnav a.icon {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
    /* Header */
    .header {
        display: block;
        text-align: center;
        padding: 10px 0;
    }
    .header .logo {
        width: 100%;
        margin: 0 auto;
    }
    .header nav ul {
        display: block;
        padding: 0;
    }
    .header nav ul li {
        margin-bottom: 10px;

    }



    /* Video */
    .video-container {
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        position: relative;
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .slide {
      margin-left: 1%;
      width:90%;
    }
    .inliner{
display: none;


    }
    .cuadrante1{
      width: 80%;
      display: grid;
    }
    .inliner a{
    }


    .contacto-rapido {
      position: fixed;
      bottom: 2%;
      right: 2%;
      display: flex;
      align-items: center;
    }

    .whatsapp-button img {
      width: 80px;
      height: 80px;
      float: right;
    }

    .slide h1 {
    color: white;
    font-size: 25px;
    font-weight: bolder;
    margin-bottom: 0px;
    text-align: center;
}

.slide p {
  font-size:20px;
  text-align: center;
}
.log{

}

.topnav a.icon {
  font-size: 40px;
  background:;
  display: block;
  position: ;
  float: right;
}
.padiv {
  width: 95%;
  margin-left: 5%;
}
.card {
  width: 90%;
  padding: 8%;
  margin-left: 5%;
}

.gallery{
  display: block;
}

.gallery img{
  width: 100%;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.secc-2 {
  width: 95%;
  margin-left: 3%;
}

.contacto {
    margin-top: 2%;
    padding: 3%;
    width: 95%;
    margin-left: 2%;
}

}



.whatsapp-button {
    position: fixed;
    bottom: 10%; /* Ajusta este valor para mover el botón hacia arriba o abajo */
    right: 20px; /* Ajusta este valor para mover el botón hacia la izquierda o derecha */
    z-index: 100; /* Asegúrate de que esté por encima de otros elementos */
    border-radius: 50%; /* Hacer el botón circular */
    padding: 1%; /* Ajusta el espacio interno alrededor del icono */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); /* Añade una sombra para que resalte */
}

.whatsapp-button img {
    width: 60px; /* Ajusta el tamaño del icono */
    height: 60px;
}