/* ===================================
Cover
====================================== */
/* .cover {
  background-image: url("../../assets/img/cover.jpg");
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

/* ===================================
Grupo Armenta block
====================================== */
/* .hashtag-hacemos-inicio {
  font-size: 14px;
  position: relative;
  z-index: 2;
  left: 40px;
  text-transform: uppercase;
  transform: rotate(-90deg);
}
.title-ga-float-inicio {
  position: relative;
  left: -130px;
  z-index: 3;
} */

.hashtag-hacemos-inicio img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.bg-ellipse-bottom {
  position: relative;
  top: -10%;
  left: -1%;
  clip-path: ellipse(60% 100% at 50% 0%);
  -webkit-clip-path: ellipse(60% 100% at 50% 0%);
  height: 130px;
  width: 100vw;
  z-index: 1;
}
.bg-white {
  background-color: #ffffff!important;
}

/* ===================================
Timeline
====================================== */

.swiper-container-wrapper--timeline .swiper-slide {
  display: flex;
  /* background: #fff7f7; */
  /* min-height: 300px; */
  height: 170px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.swiper-container-wrapper--timeline .swiper-slide .container {
  padding: 0;
  width: 100%;
}
.swiper-container-wrapper--timeline .swiper-slide .title {
  font-size: 28px;
  /* opacity: 0; */
  /* transition: 0.5s ease 0.5s; */
}
.swiper-container-wrapper--timeline .swiper-slide-active .title {
  opacity: 1;
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar {
  position: relative;
  /* margin-bottom: 70px; */
  background-color: transparent;
  height: 4px;
  border-bottom: 1px solid #888;
  width: 75%;
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar-fill {
  background-color: transparent !important;
  height: 6px !important;
  top: 2px;
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar:before {
  position: absolute;
  top: 2px;
  left: -100%;
  width: 100%;
  height: 3px;
  background-color: #000;
  content: "";
}
.swiper-container-wrapper--timeline .swiper-pagination-progressbar:after {
  position: absolute;
  top: 3px;
  right: -100%;
  width: 100%;
  height: 1px;
  background-color: #888;
  content: "";
}
.swiper-container-wrapper--timeline .swiper-pagination-custom {
  position: relative;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  line-height: 1.66;
  bottom: 0;
  z-index: 11;
  /* width: 75%; */
  width: 85%;
  display: flex;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch {
  position: relative;
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: block;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title {
  position: absolute;
  font-weight: 400;
  right: 0;
  transform: translateX(50%);
  transition: 0.2s all ease-in-out;
  transition-delay: 0s;
  cursor: pointer;
  z-index: 1;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title:after {
  position: absolute;
  top: calc(100% + 29px);
  right: 50%;
  transform: translateX(50%) translateY(-50%);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 2.5rem !important;
  content: "";
  transition: 0.2s all ease-in-out;
  transition-delay: 0s;
  z-index: 1;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title {
  font-weight: 500;
  transition-delay: 0.4s;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:after {
  background: #ffffff;
  width: 16px;
  height: 16px;
  transition-delay: 0.4s;
  /* border: 3px solid rgba(255, 255, 255, 0.2); */
  top: 60px;
  border-radius: 2.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  outline-style: solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-width: thick;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title {
  font-weight: 16px;
}
.swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title:after {
  background: #ffffff;
}

/* Custom */
.swiper-pagination-switch .switch-title {
  color: transparent;
  bottom: 10px;
}
.swiper-pagination-switch.active .switch-title {
  color: #ffffff;
  font-size: 3.5rem;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  /* Debe ser igual al width de ".swiper-container-wrapper--timeline .swiper-pagination-custom" */
  width: 85% !important;
}

.swiper-container-wrapper--timeline .swiper-pagination-progressbar {
  position: relative;
  margin-bottom: 70px;
  background-color: transparent;
  height: 4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  width: 71% !important;
  margin: 0 auto !important;
}

.swiper-container-wrapper--timeline .swiper-pagination-progressbar:before,
.swiper-container-wrapper--timeline .swiper-pagination-progressbar:after {
display: none;
}
.title-timeline h2 {
  font-size: 5rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* .service-title {
  white-space: nowrap;
  font-size: 7rem;
  line-height: 7rem;
} */

/* responsive */
/* lg */ @media (max-width: 1199px) {

  .title-timeline h2 {
       font-size: 4.5rem;
       /* line-height: 6.3rem; */
  }

}
/* md */ @media (max-width: 991px) {

  .title-timeline h2 {
       font-size: 4rem;
       
  }

}
/* sm */ @media (max-width: 767px) {
  .title-timeline h2 {
       font-size: 3rem;
  }
  .swiper-pagination-switch.active .switch-title {
    color: #ffffff;
    font-size: 3rem;
  }
}

/* ===================================
  Ellipse bottom
====================================== */
.bg-ellipse-cover-top-bottom {
  -webkit-clip-path: ellipse(84% 72% at 50% 25%);
  clip-path: ellipse(84% 72% at 50% 25%);
}

/* sm */ @media (max-width: 767px) {
  .bg-ellipse-cover-top-bottom {
    -webkit-clip-path: ellipse(114% 72% at 50% 25%);
    clip-path: ellipse(114% 72% at 50% 25%);
  }
}

.bg-omnicanalidad {
  background: url('../../assets/img/bg-omnicanalidad.svg');
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: 70%;
}
/* sm */ @media (max-width: 767px) {
  .bg-omnicanalidad {
    background-position: 50% 10%;
  }
}
/* xs */ @media (max-width: 575px) {
  .bg-omnicanalidad {
    background-position: 50% 20%;
  }
}

/* ===================================
    Services
====================================== */
.service-number {
  font-size: 6rem;
  font-weight: 500;
  color: #000000;
  opacity: .4;
  /* line-height: 50px; */
}

.service-title {
  white-space: nowrap;
  font-size: 7rem;
  line-height: 7rem;
}

.banner-title {
  white-space: nowrap;
  font-size: 6rem;
  line-height: 6rem;
}


/* responsive */
/* lg */ @media (max-width: 1199px) {
  .service-number {
       font-size: 5.3rem;
  }
  .service-title {
       font-size: 6.3rem;
       line-height: 6.3rem;
  }
  .banner-title {
    white-space: nowrap;
    font-size: 5rem;
    line-height: 5rem;
  }
}
/* md */ @media (max-width: 991px) {
  .service-number {
       font-size: 3.8rem;
  }
  .service-title {
       font-size: 4.8rem;
       line-height: 4.8rem;
  }
  .banner-title {
    white-space: nowrap;
    font-size: 4rem;
    line-height: 4rem;
  }
}
/* sm */ @media (max-width: 767px) {
  .service-number {
       font-size: 2.8rem;
  }
  .service-title {
       white-space: initial;
       font-size: 3.8rem;
       line-height: 3.8rem;
  }
  .banner-title {
    white-space: nowrap;
    font-size: 3rem;
    line-height: 3rem;
  }
}

/* ===================================
    splide
====================================== */

.splide-box-content {
  background-image: -webkit-linear-gradient(180deg, #FFFFFF 0%, #F5F6F6 100%);
  background-image: -moz-linear-gradient(180deg, #FFFFFF 0%, #F5F6F6 100%);
  background-image: -o-linear-gradient(180deg, #FFFFFF 0%, #F5F6F6 100%);
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F6F6 100%);
  border-radius: 6px;
  padding: 60px 10px 20px 10px;
  /* min-height: 13rem; */
}

.splide__pagination {
  bottom: -10px;
}

.splide__pagination__page.is-active {
  background: #035AA6;
  transform: scale(1.2);
}
/* ===================================
    Nuestras marcas
====================================== */

.our-brands-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 15px;
  row-gap: 15px;
}
/* md */ @media (max-width: 991px) {
  .our-brands-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 10px;
    row-gap: 10px;
  }
}

.our-brands-nav button {
  aspect-ratio: 1 / 1;
  background-color: #F5F6F6;
}

/* on click - logos */
.our-brands-nav .nav-link.active > .color {
  display: none;
}
.our-brands-nav .nav-link.active > .white {
  display:inline-block;
}
.our-brands-nav .nav-link > .color {
  display:inline-block;
}
.our-brands-nav .nav-link > .white {
  display: none;
}

/* on click - backgorunds */
.our-brands-nav .nav-link.active:nth-child(1) {
  background: linear-gradient(90deg, #1C7FBE 0%, #833C8F 100%) !important;
}
.our-brands-nav .nav-link.active:nth-child(2) {
  background: linear-gradient(90deg, #17A8BF 0%, #303083 100%) !important;
}
.our-brands-nav .nav-link.active:nth-child(3) {
  background: linear-gradient(90deg, #035AA6 0%, #7A2DB1 100%) !important;
}
.our-brands-nav .nav-link.active:nth-child(4) {
  background: linear-gradient(90deg, #512D88 0%, #17A8BF 100%) !important;
}

/* ===================================
    Nuestro equipo
====================================== */
.team-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 15px;
  row-gap: 0px;
  grid-template-areas: 
  "team-block-title team-block-img"
  "team-block-description team-block-img";
}
.team-block-title {grid-area: team-block-title}
.team-block-description {grid-area: team-block-description}
.team-block-img {grid-area: team-block-img}

.team-box {
  /* background: linear-gradient(180deg, blue 0%, blue 20%, #ffffff 80%); */
  background: linear-gradient(0deg, #ffffff 0%, #ffffff 75%, transparent 25%);
}

/* xs */
@media (max-width: 575px) {
  .team-block {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    column-gap: 15px;
    row-gap: 0px;
    grid-template-areas: 
    "team-block-title"
    "team-block-img"
    "team-block-description";
  }
  .team-block-title {grid-area: team-block-title}
  .team-block-description {grid-area: team-block-description}
  .team-block-img {grid-area: team-block-img}
  
  .team-box {
    /* background: linear-gradient(180deg, blue 0%, blue 20%, #ffffff 80%); */
    background: linear-gradient(0deg, #ffffff 0%, #ffffff 75%, transparent 25%);
  }



  .splide__slide__container {
    height: auto !important;
  }
  .team-block {
    position: relative !important;
    text-align: center;
  }
}

/* ===================================
    CTA
====================================== */

.cta {
  /* The image used */
  background-image: url("../../assets/img/cta-2.jpg");

  /* Set a specific height */
  /* min-height: 500px; */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* md */
@media (max-width: 991px) {
  .cta {
    /* The image used */
    background-image: url("../../assets/img/cta-2.jpg");
    background-attachment: initial;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

#leaders-carousel .splide__arrow {
  background: #e5e5e5 !important;
  height: 3em;
  width: 3em;
}

#leaders-carousel .splide__arrow svg {
  fill: #823F91 !important;
}

/* .splide__arrow--next {
  right: -3em;
}

.splide__arrow--prev {
  left: -3em;
} */