/* Slideshow container */
.slideshow-container {
  width: 100%;
  height: 86vh;
  position: relative;
  margin-bottom: 0.5rem;

  background-image: url("../images/background.svg");

  background-repeat: no-repeat;
  background-size: cover;

  overflow: hidden;
}
.mySlides {
  width: 100%;
  height: 100%;
}
.slide__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


}

.slideshow-container >.mySlides > .slide__content > .header-text {
  width: 100%;
  height: 100%;
  

  font-family: 'Poppins', sans-serif;
  margin-left: 150px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.slideshow-container >.mySlides > .slide__content > .header-text > *{
  margin: 1rem 0;
}

 

.slideshow-container >.mySlides > .slide__content >.header-text >  h1.header-title {
  font-size: 4rem;
  font-weight: 500;
  max-width: 50%;
  max-height: 80%;
  line-height: 85px;
}


.slideshow-container >.mySlides > .slide__content >.header-text > span {
  font-size: 1.3rem;
  font-weight: 400;
}

.slideshow-container >.mySlides > .slide__content > .header-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slideshow-container >.mySlides > .slide__content > .header-image > img.vem_buscar {
  position: absolute;
  height: auto;
  width: auto;
  left: 850px;

  -webkit-animation-name: slide-left;
  -webkit-animation-duration: .5s;
  animation-name: slide-left;
  animation-duration: .5s;
}
.slideshow-container >.mySlides > .slide__content >.header-image >img {
  height: 100%; 
  width: 640px;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: normal;
  font-size: 50px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev{
  margin-left: 40px;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  margin-right: 40px;

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  font-size: 55px;
  transition: none ease-in-out;
}


.dots {
  position: absolute;
  width: 100%;
  bottom: 2rem;
  z-index: 20;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: black;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: .5s;
  animation-name: fade;
  animation-duration: .5s;
}

.slide__content{
  -webkit-animation-name: slide-left;
  -webkit-animation-duration: .5s;
  animation-name: slide-left;
  animation-duration: .5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}


}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
 
}

@-webkit-keyframes slide-left{

  from {margin-left: 100%}
  to {margin-left: 0%}
}

@keyframes slide-left {
  from {margin-left: 100%}
  to {margin-left: 0%}
}

.inf__menus{
  width: 100%;
height: 100px;
  display: flex;
  align-items: center;
  justify-content:center;
}

.inf__menus > img {
 width: 80px;
  }

.inf__menus > span {
font-size: 50px;
font-weight:500;
color:var(--primary);
margin-left: 20px;
}
main {
  height: 100%;

}

main .cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 150px;
}

main .cards-container .card {
  width: 43rem;
  max-width: 100%;
  height: 25rem;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  border-radius: 1.5rem;
  margin: 2rem auto;
}

main .cards-container .card .card-container {
  color: #fff;
  max-width: 70%;
  margin-left: 24.5rem;
}

main .cards-container .card .card-container > * {
  margin: 1rem 0;
}

main .cards-container .card .card-container h1 {
  font-weight: 300;
  font-size: 3rem;
  max-width: 70%;
}

main .cards-container .card.card-one {
  background-image: url("../images/card-one.png");

  background-repeat: no-repeat;
  background-size: cover;
}

main .cards-container .card.card-two {
  background-image: url("../images/card-two.png");

  background-repeat: no-repeat;
  background-size: cover;
}

main .about__us__container {
 width: 100%;

 background-image: url(../../src/images/background_white.svg);
 
 background-repeat: no-repeat;
 background-position: 50% 0;
 background-size: cover;
 background-color: var(--pink);
 opacity: 1;

 display: flex;
 flex-direction: column;
 align-items: left;
 justify-content: center;
 padding: 2rem;
 margin: 0 auto;
}

main .about__us__container > span.about__us_title {
  font-size: 2rem;
  color: #fff;
}

main .about__us__container > p {
  font-size: 1.2rem;
  color: #333;
  text-align: justify;
  margin: 1rem 0;
  max-width: 50rem;
  width: 100%;
}

main .about__us__container > a {
  width: 100%;
  max-width: 15rem;
}



/* subscribe_area */


.subscribe_area {
	background: var(--primary);
	position: relative
}

.subscribe_area .site_heading {
	position: relative;
	margin-bottom: 30px
}

.subscribe_area .section_title,
.subscribe_area .sub_title {
	color: #fff
}

.subscribe_box {
  width: 35rem;
  max-width: 100%;
  background: #fff;
	border-radius: 30rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.subscribe_box form {
  width: 100%;
  height: 100%;
  padding: 0.75rem 1rem;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.subscribe_box form input {
	width: 60%;
	height: 100%;
  padding: 0 1rem;
	background: transparent;
	border: none;
  font-size: 1rem;
	border-radius: 30rem;
}

.subscribe_box form input:focus-visible {
  outline: none;
}

.subscribe_box form button {
	width: 40%;
	height: 100%;
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
}



@media only screen and (max-width: 1024px) {
  main .cards-container {
    margin: 0;
    padding: 2rem;
  }

  .inf__order {
    margin: 0;
    padding: 2rem;
  }

  /* main .cards-container {

  } */
}