/*
    Home banner
*/
.home-slick-banner .slick-list.draggable, .home-slick-banner .slick-track, .home-slick-banner .slick-slide, .home-slick-banner .slick-slide > div {
  height: 100%;
}
.cc-home-slider {
  overflow: hidden;
  width: 100%;
  height: 600px;
}
.home-slide {
  height: 600px;
  overflow: hidden;
  display: none;
}


.home-banner-image {
    right: -50%;
}

a.home-card.card.models--card.cc-product-box {
  max-width: 300px !important;
  height: 300px;
}
.slick-dots {
  position: absolute;
  bottom: 50%;
  display: flex;
  flex-flow: column;
  width: fit-content;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  right: 1%;
}
  .slick-dots li button:before {
    font-size: 10px;
    opacity: 1;
    color: var(--gray500);
    display: none
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--blue300);
  }

  .slick-dots li {
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    margin: 5px;
    padding: 0;
    cursor: pointer;
  }

  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 5px;
    cursor: pointer;
    border-radius: 100%;
    background: var(--gray500);
    border: 0;
    outline: 0;
    opacity: .7;
  }
    .slick-dots li.slick-active button {
      background: var(--white);
      opacity: 1;
      height: 20px;
      border-radius: 20px;
    }

  @media(max-width: 767px) {
    .home-banner-image:before {
    display: none !important;
  }
  #home-banner {
    height: fit-content;
    margin-top: -30px !important;
  }
  .home-banner-image {
    right: 0;
    position: relative !important;
  }
  .home-product-slick .slick-slide > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* banner triple reja*/

.h-img-reja {
  height: 85%;
}
.h-titulo-reja {
  height: 15%;
}
.cc-banner-rejas {
    height: 100%;
}
.banner-cercocentr-expertos-img {
  height: 75%;
}
.banner-cercocentr-expertos-text {
  height: 25%;
}
/*  .banner-cercocentr-expertos-text img {
    width: 50%;
  }
@media (max-width: 1360px) {
  .banner-cercocentr-expertos-text img {
    width: 45%;
  }
}*/
.logo-cercocentro-banner {
    width: 80%;
}
@media (max-width: 1500px) {
  .cc-banner-rejas h2, .cc-banner-rejas h1 {
    font-size: 3rem !important;
  }
}
@media (min-width: 1199px) AND (max-width: 1360px) {
  .servicios-banner-list li {
    font-size: 1.1rem !important;
  }
}
@media (max-width: 1280px) {
  .cc-banner-rejas h2, .cc-banner-rejas h1 {
    font-size: 2.6rem !important;
  }
}
@media (max-width: 1080px) {
  .cc-banner-rejas h2, .cc-banner-rejas h1 {
    font-size: 2.3rem !important;
  }
}
@media (min-width: 992px) {
  .cc-servicios-banner-img, .cc-servicios-banner-box {
    height: 100%;
  }
}
@media(max-width: 991px) {
  .cc-banner-rejas {
    height: 33.33%;
  }
  .logo-cercocentro-banner {
      width: 200px !important;
      height: 50px;
      margin: 0px !important;
  }
  .h-img-reja {
      height: 72%
  }
  .h-titulo-reja {
      height: 28%
  }
  .cc-banner-rejas h2, .cc-banner-rejas h1 {
    font-size: 1.5rem !important;
    text-align: center;
  }
    .cc-banner-rejas h2 br, .cc-banner-rejas h1 br {
      display: none;
    }
  .cc-banner-rejas h3 {
      font-size: 1rem !important;
      text-align: center;
  }
  .cc-servicios-box {
      height: fit-content !important;
  }
  .banner-cercocentr-expertos-img {
      height: 70%;
  }
  .banner-cercocentr-expertos-text {
    height: 30%;
    text-align: center;
  }
  .banner-cercocentr-expertos-text img {
      height: 50px;
      width: 200px;
  }
}
@media(max-width: 768px) {

  .cc-banner-rejas h2, .cc-banner-rejas h1 {
    font-size: 1.2rem !important;
  }
  .cc-banner-rejas img {
    object-position: top;
  }
  .banner-cercocentr-expertos-img {
    height: 65%;
  }

  .banner-cercocentr-expertos-text {
    height: 35%;
  }
}
/*banner servicios*/

/*
    Home cta tutoriales
*/
section#cta-tutoriales {
  height: 350px;
}

.locations-bar:before {
  content: '';
  width: 15%;
  background: var(--white);
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
}
.home-banner-image:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 100%;
  z-index: 3;
  background: white;
  left: -5px;
}
#cc-figure-section {
  margin-top: -80px;
}
.home-slide-cc-figure {
  top: 50%;
  transform: translate(-50%, -50%);
  right: -115px;
}
.home-slide-cc-seal {
  top: 20px;
  transform: translate(-50%, -50%);
  right: -85px;
}
.home-slide-cc-product-circle {
  top: 50%;
  transform: translate(-50%, -50%);
  right: -85px;
}

.home-banner-slick-btn-container .slick-arrow {
  background: none;
  border: none;
  outline: none;
  font-size: 45px;
  color: var(--white);
}

@media (max-width: 768px) {
  .sust-row-img img.object-fit-cover, .sust-row-img picture {

  }
  .locations-bar:before {
    display: none;
  }
  .fluid-img-row picture, .fluid-img-row img {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
  }
  .home-slide-cc-figure {
    right: -100px;
  }
  .home-slide-cc-product-circle {
    width: 70px;
    height: 70px;
    right: -50px;
  }
  .home-slide-cc-figure {
    width: 85px;
    height: 85px;
    right: -70px;
  }
  .home-slide-cc-seal {
    width: 70px;
    height: 70px;
    right: -50px;
  }
}


/*----- solution-box ----- */

.cc-solution-box {
  height: 350px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

  .cc-solution-box h4:after {
    position: absolute;
    content: '';
    background: var(--white);
    width: 30%;
    height: 5px;
    top: 20px;
    bottom: 0px;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 3;
    transition: 0.8s all;
  }

  .cc-solution-box h4 {
    opacity: 1;
    transition: top 0.5s, text-align 0.8s, font-size 0.5s;    
    top: 80%;
  }

  .cc-solution-box:hover h4 {
    animation: fadeInOut 1s;
    top: 40%;
    font-size: 40px;  
    text-align: start !important;
  }
    .cc-solution-box:hover h4:after {
      right: 50%;
      top: 20px;
    }
  .cc-solution-box:not(:hover) h4 {
    animation: fadeOutIn 1s;
  }
  @keyframes fadeInOut {
    0%, 100% {
      opacity: 1;
    }

    20% {
      opacity: 0;
    }
  }
@keyframes fadeOutIn {
  0%, 100% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }
}

/*----- faqs ----- */

.custom-line {
  position: relative;
  display: inline-block;
  padding: 0 20px; 
  text-align: center;
}

  .custom-line::before, .custom-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 60px); /* Ajusta el ancho de las líneas y el margen */
    height: 2px;
    background-color: blue;
  }

.custom-line::before {
  left: 0;
  transform: translateY(-50%);
  margin-left: -100px;
}
  .line-productos-recomendados.custom-line::before {
    margin-left: -130px;
  }

  .custom-line::after {
    right: 0;
    transform: translateY(-50%);
    margin-right: -100px; 
  }
  .line-productos-recomendados.custom-line::after {
    margin-right: -130px;
  }

?.faq-button {
  padding: 10px;
  border: 1px solid var(--LightGray);
  background: 0 0;
  border-radius: 5px;
  cursor: pointer
}

.faq-collapse,
.hamburger {
  padding: 15px
}

.faq-button p {
  margin: 0
}


@media (max-width: 768px) {
  .custom-line::before, .custom-line::after {
      content: "";
      position: absolute;
      top: 50%;
      width: calc(50% - 20px); /* Ajusta el ancho de las líneas y el margen */
      height: 2px;
      background-color: blue;
    }
    .custom-line::before {
      left: 0;
      transform: translateY(-50%);
      margin-left: -25px;
    }

    .custom-line::after {
      right: 0;
      transform: translateY(-50%);
      margin-right: -25px;
    }
    .line-productos-recomendados.custom-line::before {
      margin-left: -60px;
      width: 20%;
    }
    .line-productos-recomendados.custom-line::after {
      margin-right: -60px;
      width: 20%;
    }
    #home-products .home-product-slick {
      width: 100% !important;
    }
    #home-products .product-slick-next {
      right: 0%;
      position: absolute !important;
    }
    #home-products .product-slick-prev {
        left: -2%;
        position: absolute !important;
        z-index: 2;
    }
    section#home-products .container {
      display: flex;
      flex-flow: column;
      align-items: center !important;
    }
  }


@media (max-width: 1199px) {
  .cc-solution-box h4:after {
    top: 60px;
  }

  .cc-solution-box:hover h4:after {
    right: 50%;
    top: 0px;
    bottom: 10%;
  }
  .cc-solution-box h4 {
    top: 75%;
  }
  .cc-solution-box:hover h4 {
    font-size: 30px;
  }
}

@media (max-width: 991px) {
  .cc-solution-box:hover h4 {
    font-size: 25px;
  }
    .cc-solution-box:hover h4:after {
      right: 50%;
      top: 0px;
      bottom: 25%;
    }
}

@media (max-width: 768px) {
  .cc-solution-box:hover h4 {
    font-size: 40px;
  }
  .cc-solution-box h4:after {
    top: 20px;
  }
}

@media (max-width: 525px) {
  .cc-solution-box:hover h4:after {
    top: 15%;
    bottom: 0;
  }
  .line-productos-recomendados.custom-line::before {
    margin-left: -15px;
    width: 8%;
  }

  .line-productos-recomendados.custom-line::after {
    margin-right: -15px;
    width: 8%;
  }
}

@media (max-width: 375px) {
  .cc-solution-box:hover h4 {
    font-size: 30px;
  }
    .cc-solution-box:hover h4:after {
      top: 0;
      bottom: 15%;
    }
  .line-productos-recomendados.custom-line::before {
    margin-left: 25px;
    width: 10%;
  }
  .line-productos-recomendados.custom-line::after {
    margin-right: 25px;
    width: 10%;
  }
}