.heroarea-index{

  background-image: url("HERO-IMAGE-2.png");
   background-repeat: no-repeat;
  background-size: 100% 130%;
  overflow: hidden;
   height: 100vh;
   display: flex;
   flex-direction: column;
}



@media (min-width: 1px) {
.heroarea-index{
 min-height: 400px;
 height: 42vw;
}

@media (min-width: 410px) {
.heroarea-index{
 min-height: 400px;
 height: 48vh;
   max-height: 520px;
}
}


@media (min-width: 700px) {
.heroarea-index {
min-height: 400px;
 height: 55vh;
   max-height: 600px;
}
}

@media (min-width: 800px) {
.heroarea-index {
min-height: 400px;
 height: 85vh;
 max-height: 900px;
}
}

@media (min-width: 1400px) {
.heroarea-index {
min-height: 700px;
 max-height: none;
}
}


@media (min-width: 1920px) {
.heroarea-index{
min-height: 1200px;
}
}


@media (min-width: 2400px) {
.heroarea-index{
min-height: 1200px;
}
}


.hero-content-wrappper {
display: grid;
align-items: center;
justify-items: center;
grid-template-rows: 1fr;
gap: 40px;
flex: 1 0 0;
align-self: stretch;
height: 100%;
width: 100%;

}

.hero-text-wrapper
{
  float: left;
display: flex;
flex-direction: column;
padding: 10px 5px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
width: 100%;
height: 30vw;
background: transparent;
}



@media (min-width: 1px) {
.hero-text-wrapper {
padding: 10px 1px;
}
}


@media (min-width: 600px) {
.hero-text-wrapper {
padding: 10px 5px;
}
}

.h14 {
  display: flex;
align-items: center;
color: #fff;
height: 40vw;
min-height: 200px;
}

@media (min-width: 600px) {
.h14{
  display: flex;
height: 48vw;
min-height: 240px;
}
}


@media (min-width: 1200px) {
.h14{
min-height: 360px;
}
}

@media (min-width: 1900px) {
.h14{
min-height: 500px;
}
}

.servicio {
background-size: 100% 100%;
background-repeat: no-repeat;
display: grid;
flex-direction: column;
justify-content: center;
justify-items: center;
flex: 1 0 0;
color: #FFF;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc(10px + 2vw);
font-style: normal;
font-weight: 500;
line-height: normal;
width: 100%;
}

.servicio-green {
  color: #CABDAA;
  font-weight: 700;
}


/********************************BANNER**************************/
.banner {
  display: flex;
min-width: 200PX;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}

@media (min-width: 1px) {
.banner{
  display: flex;
height: 16vw;
min-height: 250px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}


@media (min-width: 1200px) {
.banner{
  display: flex;
height: 16vw;
min-height: 260px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}

@media (min-width: 1900px) {
.banner{
  display: flex;
height: 14vw;
min-height: 260px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}


.banner-text {
  display: flex;
width: 90vw;
min-height: 150px;
height: 18vw;
max-height: 250px;
margin: 0px;
font-size: calc(9px + .6vw);
flex-direction: column;
justify-content: center;
color: #FFFFFF;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc();
font-style: normal;
font-weight: 400;
line-height: normal;
}



.banner-text-brown {
  color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc(9px + 1.5vw);
font-style: medium;
padding: 10px 5px;
font-weight: 800;
line-height: normal;
}

/********************************GRID-INDEX**************************/

.grid-general-index {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: .3fr, 1fr 1fr, 1fr;
  padding: 10px 10px;
  background-image: url("HERO-IMAGE.png");
  background-repeat: no-repeat;
  background-size: 100% 130%;
}

@media (min-width: 1px) {
.grid-general-index {

  padding: 20px 0px;
}
}

@media (min-width: 410px) {
.grid-general-index {

  padding: 10px 10px;
}
}


.grid-wrapper-index {
 display: grid;
grid-template-columns: .5fr .5fr;
justify-content: center;
  align-items: center;
  align-items: center;
  gap: 0px;
  margin: 5vh auto;
  max-width: 1400px;
 height: 450px;
  min-height: 200px;
  overflow: hidden;
  grid-gap: 10PX;

}

@media (min-width: 1px) {
.grid-wrapper-index {

  margin: 5px auto;
  width: 95vw;
 max-width: 550px;
 height: 200px;
 overflow: hidden;
 justify-items: CENTER;
 grid-gap: 0PX;
}
}


@media (min-width: 600px) {
.grid-wrapper-index {

 min-height: 200px;
  margin: 10px auto;
 width: 95vw;
 max-width: 850px;
 height: 300px;
 overflow: hidden;
 position: relative;
 grid-gap: 0PX;
}
}

@media (min-width: 900px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 800px;
 margin: 10px auto;
  width: 95vw;
max-width: 1150px;
 height: 350px;
 grid-gap: 10PX;
}
}

@media (min-width: 1200px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 1000px;
 margin: 10px auto;
 width: 95vw;
 height: 450px;
  grid-gap: 10PX;
}
}

@media (min-width: 1600px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 1200px;
 margin: 0px auto;
 width: 1150px;
 height: 480px;
}
}

@media (min-width: 1900px) {
.grid-wrapper-index {
width: 95vw;
max-width: 1250px;
margin: 0px auto;
 height: calc(350px + 5vw);
 align-items: center;
}
}


@media (min-width: 2400px) {
.grid-wrapper-index {
width: 95vw;
min-width: calc(1250px + 3vw);
margin: 0px auto;
 min-height: 500px;
 height: calc(22vw - 50px);
}
}

.grid-wrapper-index-reverse {
 display: grid;
grid-template-columns: .5fr .5fr;
justify-content: center;
  align-items: center;
  gap: 0px;
  margin: 10px auto;
  max-width: 1400px;
  width: 100vw;
  height: 450px;
  min-height: 200px;
  grid-gap: 10PX;
  z-index: 10;

}


@media (min-width: 1px) {
.grid-wrapper-index-reverse {

  margin: 5px auto;
  width: 95vw;
 max-width: 550px;
 height: 200px;
 overflow: hidden;
 justify-items: CENTER;
 grid-gap: 0PX;
}
}

@media (min-width: 600px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
  margin: 10px auto;
 width: 95vw;
 max-width: 850px;
 height: 300px;
 overflow: hidden;
 grid-gap: 0PX;
}
}

@media (min-width: 900px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 800px;
 margin: 0px auto;
  width: 95vw;
 height: 350px;
 grid-gap: 10PX;
}
}

@media (min-width: 1200px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 1000px;
 margin: 10px auto;
 width: 95vw;
 height: 450px;
}
}

@media (min-width: 1600px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 1200px;
 margin: 0px auto;
 height: 480px;
}
}

@media (min-width: 1900px) {
.grid-wrapper-index-reverse {
width: 95vw;
max-width: 1250px;
margin: 0px auto;
height: calc(350px + 5vw);
}
}

@media (min-width: 2400px) {
.grid-wrapper-index-reverse {
width: 95vw;
min-width: calc(1250px + 3vw);
margin: 0px auto;
height: calc(22vw - 50px);
 min-height: 500px;
 margin: 0px, auto;
}
}


.textbox-index {
   display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
background: transparent;
   margin: 0px;
   min-width: 150px;
  width: 100%;
  height: 100%;

}

@media (min-width: 1px) {
.textbox-index{
height: 80%;
}
}

@media (min-width: 1900px) {
.textbox-index{
height: calc(200px + 13vw);
}
}

.textbox-blue {
background: transparent;
}

.image-button-index {
  width: 25vw;            /* 10% del ancho de la ventana */
  height: 25vw;           /* igual que el ancho para que sea un círculo */
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 1px) {
.image-button-index{
  min-width: calc(100px + 1vw);
  min-height: calc(100px + 1vw);

}
}

@media (min-width: 300px) {
.image-button-index{
  min-width: 120px;
  min-height: 120px;
}
}

@media (min-width: 600px) {
.image-button-index{
  min-width: 250px;
  min-height: 250px;
}
}


@media (min-width: 900px) {
.image-button-index {
  min-width: 350px;
  min-height: 350px;
}
}

@media (min-width: 1200px) {
.image-button-index {
  min-width: 420px;
  min-height: 420px;
}
}

@media (min-width: 1900px) {
.image-button-index {
    width: 15vw;            /* 10% del ancho de la ventana */
  height: 15vw;           /* igual que el ancho para que sea un círculo */
}
}

@media (min-width: 2400px) {
.image-button-index {
    width: 18vw;            /* 10% del ancho de la ventana */
  height: 18vw;           /* igual que el ancho para que sea un círculo */
}
}

.box-index > img {
  width: 100%;
    }

.big-card-text
{
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 100%;
 padding: 5px;
 border-radius: 20px;
height: 100%;
}

@media (min-width: 1px) {
.big-card-text{
display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 50%;
 min-width: 50px;
padding: 2px;
min-height: 120px;
}
}

@media (min-width: 600px) {
.big-card-text{
display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 50%;
 min-width: 50px;
 min-height: 150px;
padding: 4px;
}
}


.header-card-index
{
  display: grid;
  color: #fff;
 font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: calc(12px + 1.2vw);
  background-color: #CABDAA;
  margin: 0px 5px;
  padding: 0px 5px;
  font-weight: 500;
  align-items: center;
  justify-items: center;
  align-self: center;
  max-width: 100%;
  align-self: center;
  justify-self: center;
  text-align: center;
}

.paragraph
{
 color: #000;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
  font-size: calc(9px + 0.6vw);
  font-weight: 100;
  justify-self: center;
  width: 90%;
  margin: 0px;
}

.btn-containers
{
  display: grid;
  grid-template-columns: 1fr ;
  justify-items: center;
  font-size: calc(9px + 0.2vw);
font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: white;
  background-color: #105584;
  padding: 4px;
  border-radius: 100px;
  text-decoration: none;
  border-color: transparent;
  cursor: pointer;
  width: 110px;
}

.btn-containers-green {
background-color: #047E8F;
}

.btn-containers:hover {
    transition-timing-function: ease-in;
  transition-duration: .2s;
 filter: sepia(20%)  saturate(300%);
}

@media (min-width: 900px) {
.btn-containers{
 width: 130px;
}
}

.boton-llamada {
  background-color: transparent;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}
.heroarea-index{

  background-image: url("HERO-IMAGE-2.png");
   background-repeat: no-repeat;
  background-size: 100% 130%;
  overflow: hidden;
   height: 100vh;
   display: flex;
   flex-direction: column;
}



@media (min-width: 1px) {
.heroarea-index{
 min-height: 380px;
 height: 40vw;
}

@media (min-width: 410px) {
.heroarea-index{
 min-height: 400px;
 height: 45vh;
   max-height: 500px;
}
}


@media (min-width: 600px) {
.heroarea-index {
min-height: 400px;
 height: 55vh;
   max-height: 600px;
}
}

@media (min-width: 800px) {
.heroarea-index {
min-height: 400px;
 height: 85vh;
 max-height: 900px;
}
}

@media (min-width: 1400px) {
.heroarea-index {
min-height: 700px;
 max-height: none;
}
}


@media (min-width: 1920px) {
.heroarea-index{
min-height: 1200px;
}
}


@media (min-width: 2400px) {
.heroarea-index{
min-height: 1200px;
}
}


.hero-content-wrappper {
display: grid;
align-items: center;
justify-items: center;
grid-template-rows: 1fr;
gap: 40px;
flex: 1 0 0;
align-self: stretch;
height: 100%;
width: 100%;

}

.hero-text-wrapper
{
  float: left;
display: flex;
flex-direction: column;
padding: 10px 5px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
width: 100%;
height: 30vw;
background: transparent;
}



@media (min-width: 1px) {
.hero-text-wrapper {
padding: 10px 1px;
}
}


@media (min-width: 600px) {
.hero-text-wrapper {
padding: 10px 5px;
}
}

.h14 {
  display: flex;
align-items: center;
color: #fff;
height: 40vw;
min-height: 200px;
}

@media (min-width: 600px) {
.h14{
  display: flex;
height: 48vw;
min-height: 240px;
}
}

@media (min-width: 768px) {
.h14{
  display: flex;
height: 48vw;
min-height: 240px;
max-height: 300px;
}
}

@media (min-width: 900px) {
.h14{
  display: flex;
height: 48vw;
min-height: 240px;
max-height: none;
}
}


@media (min-width: 1200px) {
.h14{
min-height: 400px;
}
}

@media (min-width: 1900px) {
.h14{
min-height: 500px;
}
}

.servicio {
background-size: 100% 100%;
background-repeat: no-repeat;
display: grid;
flex-direction: column;
justify-content: center;
justify-items: center;
flex: 1 0 0;
color: #FFF;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc(10px + 2vw);
font-style: normal;
font-weight: 500;
line-height: normal;
width: 100%;
}

.servicio-green {
  color: #CABDAA;
  font-weight: 700;
}


/********************************BANNER**************************/
.banner {
  display: flex;
min-width: 200PX;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}

@media (min-width: 1px) {
.banner{
  display: flex;
height: 16vw;
min-height: 250px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}


@media (min-width: 1200px) {
.banner{
  display: flex;
height: 16vw;
min-height: 260px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}

@media (min-width: 1900px) {
.banner{
  display: flex;
height: 14vw;
min-height: 260px;
justify-content: center;
align-items: center;
gap: 5px;
align-self: stretch;
background: #CABDAA;
justify-content: center;
}
}


.banner-text {
  display: flex;
width: 90vw;
min-height: 150px;
height: 18vw;
max-height: 250px;
margin: 0px;
font-size: calc(9px + .6vw);
flex-direction: column;
justify-content: center;
color: #FFFFFF;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc();
font-style: normal;
font-weight: 400;
line-height: normal;
}



.banner-text-brown {
  color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: calc(9px + 1.5vw);
font-style: medium;
padding: 10px 5px;
font-weight: 800;
line-height: normal;
}

/********************************GRID-INDEX**************************/

.grid-general-index {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: .3fr, 1fr 1fr, 1fr;
  padding: 10px 10px;
  background-image: url("HERO-IMAGE.png");
  background-repeat: no-repeat;
  background-size: 100% 130%;
}

@media (min-width: 1px) {
.grid-general-index {

  padding: 20px 0px;
}
}

@media (min-width: 410px) {
.grid-general-index {

  padding: 10px 10px;
}
}


.grid-wrapper-index {
 display: grid;
grid-template-columns: .5fr .5fr;
justify-content: center;
  align-items: center;
  align-items: center;
  gap: 0px;
  margin: 5vh auto;
  max-width: 1400px;
 height: 450px;
  min-height: 200px;
  overflow: hidden;
  grid-gap: 10PX;

}

@media (min-width: 1px) {
.grid-wrapper-index {

  margin: 5px auto;
  width: 95vw;
 max-width: 550px;
 height: 200px;
 overflow: hidden;
 justify-items: CENTER;
 grid-gap: 0PX;
}
}


@media (min-width: 600px) {
.grid-wrapper-index {

 min-height: 200px;
  margin: 10px auto;
 width: 95vw;
 max-width: 850px;
 height: 300px;
 overflow: hidden;
 position: relative;
 grid-gap: 0PX;
}
}

@media (min-width: 900px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 800px;
 margin: 10px auto;
  width: 95vw;
max-width: 1150px;
 height: 350px;
 grid-gap: 10PX;
}
}

@media (min-width: 1200px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 1000px;
 margin: 10px auto;
 width: 95vw;
 height: 450px;
  grid-gap: 10PX;
}
}

@media (min-width: 1600px) {
.grid-wrapper-index {

 min-height: 200px;
 max-width: 1200px;
 margin: 0px auto;
 width: 1150px;
 height: 480px;
}
}

@media (min-width: 1900px) {
.grid-wrapper-index {
width: 95vw;
max-width: 1250px;
margin: 0px auto;
 height: calc(350px + 5vw);
 align-items: center;
}
}


@media (min-width: 2400px) {
.grid-wrapper-index {
width: 95vw;
min-width: calc(1250px + 3vw);
margin: 0px auto;
 min-height: 500px;
 height: calc(22vw - 50px);
}
}

.grid-wrapper-index-reverse {
 display: grid;
grid-template-columns: .5fr .5fr;
justify-content: center;
  align-items: center;
  gap: 0px;
  margin: 10px auto;
  max-width: 1400px;
  width: 100vw;
  height: 450px;
  min-height: 200px;
  grid-gap: 10PX;
  z-index: 10;

}


@media (min-width: 1px) {
.grid-wrapper-index-reverse {

  margin: 5px auto;
  width: 95vw;
 max-width: 550px;
 height: 200px;
 overflow: hidden;
 justify-items: CENTER;
 grid-gap: 0PX;
}
}

@media (min-width: 600px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
  margin: 10px auto;
 width: 95vw;
 max-width: 850px;
 height: 300px;
 overflow: hidden;
 grid-gap: 0PX;
}
}

@media (min-width: 900px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 800px;
 margin: 0px auto;
  width: 95vw;
 height: 350px;
 grid-gap: 10PX;
}
}

@media (min-width: 1200px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 1000px;
 margin: 10px auto;
 width: 95vw;
 height: 450px;
}
}

@media (min-width: 1600px) {
.grid-wrapper-index-reverse {

 min-height: 200px;
 max-width: 1200px;
 margin: 0px auto;
 height: 480px;
}
}

@media (min-width: 1900px) {
.grid-wrapper-index-reverse {
width: 95vw;
max-width: 1250px;
margin: 0px auto;
height: calc(350px + 5vw);
}
}

@media (min-width: 2400px) {
.grid-wrapper-index-reverse {
width: 95vw;
min-width: calc(1250px + 3vw);
margin: 0px auto;
height: calc(22vw - 50px);
 min-height: 500px;
 margin: 0px, auto;
}
}


.textbox-index {
   display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
background: transparent;
   margin: 0px;
   min-width: 150px;
  width: 100%;
  height: 100%;

}

@media (min-width: 1px) {
.textbox-index{
height: 80%;
}
}

@media (min-width: 1900px) {
.textbox-index{
height: calc(200px + 13vw);
}
}

.textbox-blue {
background: transparent;
}

.image-button-index {
  width: 25vw;            /* 10% del ancho de la ventana */
  height: 25vw;           /* igual que el ancho para que sea un círculo */
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 1px) {
.image-button-index{
  min-width: calc(100px + 1vw);
  min-height: calc(100px + 1vw);

}
}

@media (min-width: 300px) {
.image-button-index{
  min-width: 120px;
  min-height: 120px;
}
}

@media (min-width: 600px) {
.image-button-index{
  min-width: 250px;
  min-height: 250px;
}
}


@media (min-width: 900px) {
.image-button-index {
  min-width: 350px;
  min-height: 350px;
}
}

@media (min-width: 1200px) {
.image-button-index {
  min-width: 420px;
  min-height: 420px;
}
}

@media (min-width: 1900px) {
.image-button-index {
    width: 15vw;            /* 10% del ancho de la ventana */
  height: 15vw;           /* igual que el ancho para que sea un círculo */
}
}

@media (min-width: 2400px) {
.image-button-index {
    width: 18vw;            /* 10% del ancho de la ventana */
  height: 18vw;           /* igual que el ancho para que sea un círculo */
}
}

.box-index > img {
  width: 100%;
    }

.big-card-text
{
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 100%;
 padding: 5px;
 border-radius: 20px;
height: 100%;
}

@media (min-width: 1px) {
.big-card-text{
display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 50%;
 min-width: 50px;
padding: 2px;
min-height: 120px;
}
}

@media (min-width: 600px) {
.big-card-text{
display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
height: 50%;
 min-width: 50px;
 min-height: 150px;
padding: 4px;
}
}


.header-card-index
{
  display: grid;
  color: #fff;
 font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: calc(12px + 1.2vw);
  background-color: #CABDAA;
  margin: 0px 5px;
  padding: 0px 5px;
  font-weight: 500;
  align-items: center;
  justify-items: center;
  align-self: center;
  max-width: 100%;
  align-self: center;
  justify-self: center;
  text-align: center;
}

.paragraph
{
 color: #000;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
  font-size: calc(9px + 0.6vw);
  font-weight: 100;
  justify-self: center;
  width: 90%;
  margin: 0px;
}

.btn-containers
{
  display: grid;
  grid-template-columns: 1fr ;
  justify-items: center;
  font-size: calc(9px + 0.2vw);
font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: white;
  background-color: #105584;
  padding: 4px;
  border-radius: 100px;
  text-decoration: none;
  border-color: transparent;
  cursor: pointer;
  width: 110px;
}

.btn-containers-green {
background-color: #047E8F;
}

.btn-containers:hover {
    transition-timing-function: ease-in;
  transition-duration: .2s;
 filter: sepia(20%)  saturate(300%);
}

@media (min-width: 900px) {
.btn-containers{
 width: 130px;
}
}

.boton-llamada {
  background-color: transparent;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}