@use "../../../plugins/bootstrap-5.1.3/scss/functions";
@use "../../../plugins/bootstrap-5.1.3/scss/variables";
@use "../../../plugins/bootstrap-5.1.3/scss/mixins";
@use "../../../plugins/bootstrap-5.1.3/scss/utilities";
@use "../../../plugins/bootstrap-5.1.3/scss/reboot";
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto !important;
  }
}

:root {
  --primary: #CD0511;
  --consumed-by-js: $primary;
  --bs-primary: #CD0511;
  --bs-primary-rgb: 205, 5, 17;
  --success: #179149;
  --consumed-by-js: $success;
  --bs-success: #179149;
  --bs-success-rgb: 23, 145, 73;
  --bs-dark: #161616;
  --bs-dark-rgb: 22, 22, 22;
  --bs-font-open-sans:'Open Sans', sans-serif;
  --bs-body-font-family: var(--bs-font-open-sans);
  --bs-body-color: #161616;
  --bs-link-color: $primary;
}

@use "../../../plugins/bootstrap-5.1.3/scss/bootstrap";
.advantages .equal-box {
  background: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.bgk-50 {
  background: linear-gradient(180deg, #f4f4f4 50%, #FFFFFF 50%);
}

@media (min-width: 992px) {
  .advantages .equal-box {
    /* position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;*/
    transition: background 0.8s ease, color 0.8s ease;
  }
  .advantages .equal-box .dsk-hover {
    font-size: 18px;
    margin-left: 50px;
    margin-right: 50px;
  }
  .advantages .equal-box .mob-text {
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%, 0);
    /* padding: 0 30px; */
    transition: bottom 1.2s ease, opacity 1.2s ease;
    display: block;
    width: calc(100% - 60px);
    box-sizing: border-box;
    opacity: 0;
  }
  .advantages .equal-box:hover {
    background: #161616 !important;
    color: #FFFFFF;
  }
  .advantages .equal-box:hover .icons, .advantages .equal-box:hover .dsk-hover {
    display: none;
  }
  .advantages .equal-box:hover .mob-text {
    bottom: 45%;
    transform: translate(-50%, 50%);
    opacity: 1;
  }
  .advantages .equal-box:not(:hover) .mob-text {
    bottom: 0;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: 0.2s;
  }
}