@font-face {
    font-family: 'Fira Sans';
    src: url('resources/fonts/FiraSans-Regular.woff2') format('woff2'),
         url('resources/fonts/FiraSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira Sans Book';
    src: url('resources/fonts/FiraSans-Book.woff2') format('woff2'),
         url('resources/fonts/FiraSans-Book.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    }
@font-face {
    font-family: 'Fira Sans Bold';
    src: url('resources/fonts/FiraSans-Bold.woff2') format('woff2'),
        url('resources/fonts/FiraSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Semibold';
  src: url('resources/fonts/FiraSans-SemiBold.woff2') format('woff2'),
      url('resources/fonts/FiraSans-SemiBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Medium';
  src: url('resources/fonts/FiraSans-Medium.woff2') format('woff2'),
      url('resources/fonts/FiraSans-Medium.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body{ font-family: 'Fira Sans Book'; color: #606060;}

.header-tarjetasjep{
    background-color: #007e32;
}
.header-tarjetasjep img{
    width: 100%;
}
.banner-tarjetasjep{
    background-image: url('resources/images/slider-clictopay.png');
    height: auto;
    background-size: auto;  
    background-repeat: no-repeat;
    background-size: cover; 
 background-position: center;

}


.banner-tarjetasjep .logo-banner img{

    width: 300px;
    height: auto;
}
.banner-tarjetasjep .content-img img{
    width: 400px;
    height: auto;
}
.banner-tarjetasjep h1{
font-family: 'Fira Sans Semibold';
font-size: 35px;
color: #fff;
margin-bottom: 0.5rem;
}

.banner-tarjetasjep p{
font-family: 'Fira Sans Book';
font-size: 20px;
color: #fff;
margin-bottom: 2.5rem;
line-height: 25px;
}

.banner-tarjetasjep .content-img {
    display: flex;
    width: 100%;
    justify-content: center;
}
.text-introduction{
    background-color: #f2f2f2;
}
.text-introduction p{
    font-family: 'Fira Sans Book';
    font-size: 18px;
    line-height: 23px;
    padding-top: 1rem;
    text-align: justify;
}
.content-beneficios{
    background-color: #f8f8f8;
    border-radius: 15px;
    padding: 1rem 1.5rem;
}
.beneficios-tarjetas h2{
font-family: 'Fira Sans Semibold';
font-size: 30px;
color: #007e32;
margin: 2rem 1rem;
}

.beneficios-tarjetas .content-beneficios h3{
font-family: 'Fira Sans Bold';
font-size: 18px;
color: #007e32;
margin: 0.5rem 1rem;
}

.beneficios-tarjetas p{
font-size: 18px;
color: #606060;
text-align: justify;
}

.beneficios-tarjetas .content-beneficios p{
font-size: 15px;
color: #606060;
line-height: 18px;
text-align: center;
}

.content-beneficios img{
    height: 40px;
    width: auto;
}
.informacion-slider2 h4{
    font-family: 'Fira Sans Semibold';
    font-size: 30px;
    text-align: justify;
}

.pasos-agregar-tarjetas{
    background-color: #f8f8f8;
}
.pasos-agregar-tarjetas h2{
font-family: 'Fira Sans Semibold';
font-size: 30px;
color: #007e32;
margin: 3rem 1rem 0.5rem 1rem;
}
.pasos-agregar-tarjetas p{
    font-size: 18px;
}
.pasos-agregar p{
    font-size: 18px;
    text-align: justify;
    line-height: 23px;
    padding: 1rem 0rem;
}
.pasos-agregar p span{
    font-family: 'Fira Sans Bold';
}
.pasos-add-tarjeta{
    background-color: #fff;
    padding: 1rem 1.5rem 1rem 1.5rem;
    border-radius: 15px;
}
.pasos-click-to-pay{
        font-family: 'Fira Sans Bold';
    font-size: 27px;
    color: #f39200;
    width: 44px;
    border: 2px solid #f39200;
    border-radius: 50%;
    text-align: center;
}
.footer-color{
    background-color: #007e32;
}
ul {
    list-style-image: url('resources/images/icono-lista.svg'); /* Aquí pones la ruta de tu imagen */
  }
  .content-pago-web{
    background-color: #f8f8f8;
    border-radius: 15px;
    padding: 2rem 2rem;
  }

  .como-pago-clicktopay h2{
    font-family: 'Fira Sans Semibold';
    font-size: 30px;
    margin: 3rem 1rem 0.5rem 1rem;
  }
  .como-pago-clicktopay p{
 font-size: 18px;
  }
  .como-pago-clicktopay h5{
    font-family: 'Fira Sans Semibold';
    font-size: 25px;
    margin-bottom: 1rem;
  }
  .pagos-sitios-web ul li{
    margin-bottom: 0.5rem;
  }
 .accordion-header{
background-color:#f8f8f8;
display: flex;
font-family: 'Fira Sans Bold';
font-size: 20px;
padding-left: 1rem;
padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .accordion-button{
    background-color:#f8f8f8;
    padding-left: 0.5rem;
    color: #606060;

  }
  .accordion-button:not(.collapsed) {
    color: #007e32;
    background-color:#f8f8f8;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
        padding-left: 0.5rem;
}
.accordion{
    border-radius: 15px;
}

  .accordion-item:first-of-type>.accordion-header .accordion-button{
    background-color:#f8f8f8;
    padding-left: 0.5rem;
  }
  .accordion-button::after{
        background-image: url('resources/images/icono-colapse.svg');
  }
  .accordion-body{
    background-color: #f0f0f0;
        padding: 1.5rem 1.5rem;
  color: #606060;
    }
  .collapselist{margin-bottom:0rem !important;  border-radius:15px !important;box-shadow: none !important;

}
  .solicita-tarjetasjep{
    background-color: #f8f8f8;
  }
  .solicita-tarjetasjep h2{
    font-family: 'Fira Sans Semibold';
    font-size: 30px;
    color: #007e32;
  }
  .boton-solicita-tarjeta button{
    background-color: #f39200;
    border-radius: 8px;
    border: 1px solid #f39200;
    color: #fff;
    font-family: 'Fira Sans Medium';
    font-size: 20px;
        padding: 0.25rem 2rem;
  }
  .preguntas-frecuentes h5{
    text-align: center;
    font-family: 'Fira Sans Semibold';
    font-size: 30px;
    color: #007e32;
    margin: 2rem 0rem 0.25rem 0rem;
  }
    .preguntas-frecuentes p{
        text-align: center;
    }
  .como-pago-clicktopay h3{
    font-family: 'Fira Sans Semibold';
    color: #007e32;
    margin-bottom: 0rem;
    font-size: 30px;
  }
  .boton-leer-aquí button{
    color: #fff;
    font-family: 'Fira Sans Medium';
    font-size: 20px;
    border: 1px solid #f39200;
    border-radius: 8px;
    padding: 0.25rem 3rem;
    background-color: #f39200;
  }
  .boton-solicita-tarjeta{
    margin: 2rem 0rem;
  }
  .accordion-button:focus{
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  }
  .accordion-button:not(.collapsed)::after{
    background-image: url('resources/images/icono-colapse.svg');
  }
  .accordion{
        --bs-accordion-bg:#f8f8f8;
        --bs-accordion-border-color: none;
  }
@media (max-width: 768px) {
.banner-tarjetasjep h1{
    margin-top: 1.5rem;
text-align: center;
font-size: 29px;
}
.banner-tarjetasjep p{
text-align: center;
font-size: 15px;
text-align: 20px;
}
.banner-tarjetasjep .content-img img{
    width: 300px;
    height: auto;
}
.logo-banner{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 3rem;
}
}

@media (max-width: 569px) {
.content-beneficios{
  margin-bottom: 1rem;
}
.informacion-slider2 h4{
  text-align: center;
}
.pasos-add-tarjeta{
  margin-bottom: 1rem;
}
.como-pago-clicktopay h5{
  margin-top: 2rem;
  text-align: center;
}
.boton-solicita-tarjeta{
  text-align: center;
}
.content-pago-web{
  padding: 2rem 0rem;
}
.solicita-tarjetasjep h2{
  text-align: center;
}
.header-tarjetasjep img{
  width: 68%;
}
}