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

body{overflow-x: hidden;font-family: 'Graphie', sans-serif!important; font-weight:bold!important}
.logo {display: block;margin-bottom: 20px}
.hm {  width: 100%;
padding: 150px 0;
  text-align: center;
position: relative;
  overflow: hidden;}


/* Imagen en la parte superior */
.hm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px; /* ajusta según necesites */
  background: url('img/cinta-arriba-4k.webp')left no-repeat ;
  background-size: cover;
  z-index: -1;
}

/* Imagen en la parte inferior */
.hm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px; /* ajusta según necesites */
  background: url('img/cinta-abajo-4k.webp')right no-repeat;
  background-size: cover;

  z-index: -1;
}
h1 {text-align: center;color: #3faefb; font-size:50px!important;color: #1d1d1d;font-weight: bold!important;margin-bottom: 0!important;}
.hm b {font-family: 'Alfa Slab One', sans-serif!important;font-size: 46px; position: relative; }
.hm b::after {
  content: ''; /* <- CORRECTO */
  display: inline-block;
  width: 30px;
  height: 7px;
  background: #feb500;position: absolute;bottom: 13px
}

.hm h3{  font-style: italic;font-weight: bold; margin-top: 20px}
.btn-green {padding: 10px 30px; background: #837d25; display: inline-block; margin:10px auto;border-radius: 10px; cursor: pointer;position: relative; z-index: 10;color: #fff; text-decoration: none; font-size: 20px;transition: ease-in-out all 0.3s; border: 2px solid transparent}
.btn-green:hover {; color:#837d25; transition: ease-in-out all 0.3s; background: #fff; border: 2px solid #837d25}
#typer-size span {background: #d2effe ;display: inline-block}
a:hover,
a:focus {
color: #00E4FF;
text-decoration: none;
}


@media screen and (max-width:2001px){
  /* Imagen en la parte superior */
.hm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px; /* ajusta según necesites */
  background-image: url('img/cinta-arriba-2k.webp');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Imagen en la parte inferior */
.hm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px; /* ajusta según necesites */
  background: url('img/cinta-abajo-2k.webp') no-repeat right;
  background-size: cover;
 
  z-index: -1;
}
}

@media screen and (max-width:768px){
  /* Imagen en la parte superior */
.hm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px; /* ajusta según necesites */
  background: url('img/cinta-arriba-t.webp')left no-repeat;
  background-size: cover;
  z-index: -1;
}
  h1 {text-align: center;color: #3faefb; font-size:44px!important;color: #1d1d1d;font-weight: bold!important;margin-bottom: 0!important;}

  .hm b {font-family: 'Alfa Slab One', sans-serif!important;font-size: 38px}
/* Imagen en la parte inferior */
.hm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* ajusta según necesites */
  background: url('img/cinta-abajo-t.webp')right no-repeat;
  background-size: cover;
 
  z-index: 0;
}
}

@media screen and (max-width:480px){
  /* Imagen en la parte superior */
.hm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px; /* ajusta según necesites */
  background: url('img/cinta-arriba-m.webp')left no-repeat;
  background-size: cover;
  z-index: -1;
}

  .hm {padding: 160px 0}
/* Imagen en la parte inferior */
.hm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* ajusta según necesites */
  background: url('img/cinta-abajo-m.webp')right no-repeat;
  background-size: cover;
 
  z-index: 0;
}
  .hm b::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 7px;
  background: #feb500;
  position: absolute;
  bottom: 8px;
}
  h1 {text-align: center;color: #3faefb; font-size:36px!important;color: #1d1d1d;font-weight: bold!important;margin-bottom: 0!important;}

  .hm b {font-family: 'Alfa Slab One', sans-serif!important;font-size: 30px; font-weight: 400!important;}
}