h1 { font-size: 4.6em; text-align: center;  margin-bottom: 0; }
h2 { text-align: center; margin-bottom: 88px; background: linear-gradient(to right, 
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0) 100%);
    color: white;
    padding: 0px;}
h3 {font-family: 'Bebas Neue'; font-size: 3.3em; background: -webkit-linear-gradient(#52c7bf, #2c55a0 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: left; margin: 25px;}
h4 {font-family: 'Bebas Neue'; color:#888; font-size: 1.8em;}
h5 {font-family: 'Bebas Neue'; font-size: 3.3em; background: -webkit-linear-gradient(#52c7bf, #2c55a0 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: left; margin: 25px;}
p { font-family: 'Open Sans';}
ol {list-style-type: none; padding-left: 0;}
progress {width:80%; height:20px;}


.header {
    font-family: 'Bebas Neue';
    letter-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 2px rgba(5, 78, 66, 0.747);
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0)44%),url('https://images3.alphacoders.com/134/thumb-1920-1349326.png'); 
    height: 38vh;
    background-attachment: scroll, fixed;
    background-position: 0 0, 50% 0;
    background-size: 100%, cover;
}


.social {justify-content: center;}
.socialmedia {margin: 5px 5px;}
.container {display: flex;}
.video {display:flex ; justify-content: center;}
.space {padding-bottom: 88px;}
.servs {place-items: center; text-align: center; padding: 8px;}
.card {transition: all 0.8s ease;}
.card:hover .jurel {content: url('../img/JUREL.png');}
.card:hover .manu {content: url('../img/Manu.png');}
.card:hover .peli {content: url('../img/DONPELI.png');}
.card:hover .pompon {content: url('../img/POMPON.png');}
.card:hover .pincho {content: url('../img/PINCHO.png');}
.card:hover .gob {content: url('../img/GOB.png');}
.card:hover .btn {background-color: teal; color: white;}
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mira {margin-left: 25px;}

.footer {font-family: 'Open Sans'; padding: 10px; background: linear-gradient(to right, #416f6c, #482c7a 150%);text-align: center; color: white; position: fixed; bottom: 0; width: 100%;}



h1 {
    padding-top: 11px;
    font-size: 8vw; /* Tamaño base para pantallas pequeñas */
  }




  @media (min-width: 345px) {
    h1 {
      font-size: 9vw;
    }
  }
  @media (min-width: 673px) {
    h1 {
        padding-top: 0px;
      font-size: 8vw;
    }
  }

  @media (min-width: 800px) {
    h1 {
      font-size: 8.8vw;
    }
  }

  @media (min-width: 992px) {
    h1 {font-size: 7vw;}
  }

  @media (min-width: 1200px) {
    h1 {font-size: 7.2vw;}

  }

  h2 {font-size: 0vw; /*Smaller*/}

  @media (min-width: 345px) {
    h2 {font-size: 3vw;}
  }
  
  @media (min-width: 555px) {
    h2 {font-size: 3vw;}
  }

  @media (min-width: 673px) {
    h2 {font-size: 2.8vw;}
  }

  @media (min-width: 800px) {
    h2 {font-size: 2.4vw;}
  }

  @media (min-width: 992px) {
    h2 {font-size: 2vw;}
  }

  @media (min-width: 1200px) {
    h2 {font-size: 2vw;}
  }

  h5 {font-size: 10vw;
    margin-left: 3px;
}

  @media (min-width: 345px) {
    h5 {font-size: 9.3vw;}
  }
  
  @media (min-width: 555px) {
    h5 {font-size: 8.6vw;}
  }

  @media (min-width: 673px) {
    h5 {font-size: 7vw;}
  }

  @media (min-width: 800px) {
    h5 {font-size: 5vw;}
  }

  @media (min-width: 992px) {
    h5 {font-size: 4vw;}
  }

  @media (min-width: 1200px) {
    h5 {font-size: 3.3vw;}
  }