@charset "UTF-8";

/* =========================================================
   IMASCits - Customers Section
   ========================================================= */

/*Start Customers*/
.customers {
  padding-top: var(--Section-Padding);
  padding-bottom: var(--Section-Padding);
  position: relative;
  overflow: hidden;
}

/* =========================================================
   Grid
========================================================= */

.customers .imgs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: clamp(15px, 2.5vw, 24px);
  align-items: center;
  transition: var(--main-transition);
}

/* =========================================================
   Box
========================================================= */

.customers .imgs-container .box2 {
  background-color: var(--General-color-W);

  padding: clamp(22px, 3vw, 30px) 15px;

  text-align: center;
  position: relative;

  opacity: 0.88;
  overflow: hidden;

  border-radius: var(--main-radius, 12px);

  box-shadow: var(--secondary-box-shadow);

  isolation: isolate;

  transition:
    opacity var(--main-transition),
    transform var(--main-transition),
    box-shadow var(--main-transition);
  animation: customer-logo-rise 0.45s ease both;
  animation-delay: var(--logo-delay, 0s);
}

.customers .imgs-container .box2.customer-swap .imge2 {
  opacity: 0;
  transform: scale(0.88) rotate(-2deg);
}

.customers .imgs-container .box2.customer-glow {
  opacity: 1;
  box-shadow: 0 0 24px rgb(222 0 125 / 34%);
}

.customers .imgs-container .box2.customer-glow::before {
  opacity: 1;
  transform: scale(1);
}

/* Border Effect */
.customers .imgs-container .box2::before {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px solid var(--main-color);

  border-radius: inherit;

  opacity: 0;

  transform: scale(0.9);

  pointer-events: none;

  transition:
    opacity var(--main-transition),
    transform var(--main-transition);
}

/* Shine Effect */
.customers .imgs-container .box2::after {
  content: "";

  position: absolute;

  top: -50%;
  left: -80%;

  width: 50%;
  height: 200%;

  background-color: var(--General-color-W-t);

  transform: rotate(25deg);

  pointer-events: none;

  transition: left var(--main-transition);
}

/* Hover */
.customers .imgs-container .box2:hover {
  opacity: 1;

  transform: translateY(-8px) scale(1.03);

  box-shadow: var(--main-box-shadow);
}

.customers .imgs-container .box2:hover::before {
  opacity: 1;
  transform: scale(1);
}

.customers .imgs-container .box2:hover::after {
  left: 130%;
}

/* =========================================================
   Images
========================================================= */

.customers .imgs-container .box2 .imge2,
.customers .imgs-container .box .imge2,
.customers .imgs-container .box2 .image2,
.customers .imgs-container .box .image2 {
  width: clamp(62px, 7vw, 78px);
  height: clamp(62px, 7vw, 78px);

  object-fit: contain;

  margin: 0 auto;

  position: relative;
  z-index: 2;

  filter: grayscale(100%);
  opacity: 0.75;

  transition:
    transform var(--main-transition),
    filter var(--main-transition),
    opacity var(--main-transition);
}

/* Hover Image */
.customers .imgs-container .box2:hover .imge2,
.customers .imgs-container .box2:hover .image2,
.customers .imgs-container .box2.customer-glow .imge2,
.customers .imgs-container .box2.customer-glow .image2 {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}

/* =========================================================
   Customers Button
========================================================= */




.customers .customers-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 160px;
  width: fit-content;

  margin: 35px auto 0;

  padding: 15px 24px;

  background-color: var(--main-color);
  color: var(--General-color-W);

  border: none;
  outline: none;

  border-radius: var(--small-radius, 6px);

  font-size: clamp(15px, 2vw, 18px);
  font-weight: 800;

  line-height: 1.4;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow: var(--main-box-shadow);

  position: relative;
  overflow: hidden;
  z-index: 1;

  transition:
    background-color var(--main-transition),
    color var(--main-transition),
    transform var(--main-transition),
    box-shadow var(--main-transition);
}

/* Button Shine */
.customers .customers-toggle-btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background-color: var(--General-color-W-t);

  transform: skewX(-25deg);

  transition: left 0.6s ease;

  z-index: -1;
}

/* Hover */
.customers .customers-toggle-btn:hover {
  background-color: var(--Secondary-color);

  color: var(--General-color-W);

  transform: translateY(-4px) scale(1.03);

  box-shadow: var(--secondary-box-shadow);
}

/* Shine Hover */
.customers .customers-toggle-btn:hover::before {
  left: 140%;
}

/* Active */
.customers .customers-toggle-btn:active {
  transform: scale(0.96);
}

/* Focus */
.customers .customers-toggle-btn:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 4px;
}

/* =========================================================
   Tablet
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

  .customers .imgs-container {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 18px;
  }

}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

  .customers {
    padding-top: var(--Section-Padding-Mobile, 60px);
    padding-bottom: var(--Section-Padding-Mobile, 60px);
  }

  .customers .imgs-container {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 15px;
  }

  .customers .imgs-container .box2 {
    padding: 22px 10px;
    border-radius: 10px;
  }

  .customers .imgs-container .box2:hover {
    transform: translateY(-4px) scale(1.02);
  }

  .customers .customers-toggle-btn {
    width: 100%;
    max-width: 240px;

    padding: 14px 20px;

    font-size: 15px;
  }

}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 480px) {

  .customers .imgs-container {
    grid-template-columns: repeat(2, 1fr);
  }

}

@keyframes customer-logo-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 0.88;
    transform: translateY(0);
  }
}

/*End Customers*/