@import "vars.css";
:root {
  --def-black: #000000;
  --def-white: #ffffff;
  --def-darkblue: #1B2B46;
  --def-blue: rgba(27, 43, 70, 1);
  --acc-gray: rgba(48, 73, 107, 0.15);
  --acc-orange-dark: #DB9500;
  --acc-orange: rgba(246, 195, 88, 1);
  --fz-sm: 16px;
  --fz-md: 20px;
  --fz-md-lg: 24px;
  --fz-md-xl: 26px;
  --fz-lg-sm: 32px;
  --fz-lg: 48px;
  --fz-64: 64px;
  --fz-128: 128px;
  --fw-sm: 300;
  --fw-md: 400;
  --fw-lg: 500;
  --fw-xl: 700;
  --fw-2xl: 900;
  --font-raleway: "Raleway";
  --font-montserrat: "Montserrat";
  --max-width: 1920px;
  --default-pd: 0 120px;
  --section-pd: 100px 120px;
  --footer-pd: 30px 120px;
  --text-page-pd: 60px 80px;
  --br-def: 15px;
  --shadow-def: 2px 2px 5.5px 0 #1B2B465C;
  --shadow-lg: 6px 7px 10.6px 0px rgba(27, 43, 70, 0.7);
  --transition-def: all 0.3s;
}

.activity .slide .container, .activity .slideContentHeader, .activity .slideHeader, .activityHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activityHeader .personal-calculation {
  border-radius: var(--br-def);
  background: var(--def-darkblue);
  text-align: center;
  color: var(--def-white);
  align-content: center;
  transition: var(--transition-def);
}
.activityHeader .personal-calculation:hover {
  transform: scale(1.03);
}

.activityHeader h2 {
  font-size: var(--fz-64);
  font-weight: var(--fw-2xl);
  line-height: var(--fz-64);
  text-transform: uppercase;
  font-family: var(--font-montserrat), sans-serif;
}

@media screen and (max-width: 1600px) {
  :root {
    --section-pd: 60px 80px;
    --footer-pd: 30px 80px;
  }
}
@media screen and (max-width: 1025px) {
  :root {
    --section-pd: 30px 40px;
    --footer-pd: 30px 40px;
  }
}
@media screen and (max-width: 991px) {
  .activityHeader h2 {
    font-size: var(--fz-lg);
    font-weight: var(--fw-2xl);
    line-height: var(--fz-lg);
    text-transform: uppercase;
    font-family: var(--font-montserrat), sans-serif;
  }
  :root {
    --section-pd: 30px 30px;
    --footer-pd: 30px 30px;
  }
}
@media screen and (max-width: 550px) {
  .activityHeader h2 {
    font-size: var(--fz-lg-sm);
    line-height: var(--fz-lg-sm);
  }
  :root {
    --section-pd: 20px 15px;
    --footer-pd: 30px 15px;
  }
}
@media screen and (max-width: 450px) {
  .activityHeader h2 {
    font-size: var(--fz-lg-sm);
    line-height: var(--fz-lg-sm);
  }
}
.active {
  max-height: 1500px !important;
}

.activity {
  background: var(--def-darkblue);
  padding: 80px 120px;
  position: relative;
}
.activityHeader {
  color: var(--def-white);
  margin-bottom: 35px;
  align-items: start;
}
.activityHeader .personal-calculation {
  width: fit-content;
  padding: 0 35px;
  height: 50px;
  background: var(--def-white);
  color: var(--def-darkblue);
  text-transform: uppercase;
  font-size: var(--fz-md-lg);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
.activityHeader h2 {
  text-transform: uppercase;
  margin-bottom: 5px;
}
.activityHeader p {
  font-weight: var(--fw-lg);
  font-size: var(--fz-lg-sm);
}
.activity .slider-carusel-btn {
  background: var(--def-white);
  height: 70px;
  color: var(--def-darkblue);
  width: 100%;
  box-shadow: 6px 7px 10.6px 0px rgba(27, 43, 70, 0.6980392157);
  border-radius: var(--br-def);
  font-size: 40px;
  font-family: var(--font-montserrat), sans-serif;
  font-weight: 900;
  text-align: left;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.activity .chevron {
  content: "";
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  height: 25px;
  width: 35px;
  background: url("../img/chevron-blue.svg") no-repeat;
  background-size: 100% 100%;
  z-index: 5;
  transition: all 0.3s ease-in-out;
}
.activity .chevron.active {
  transform: rotate(180deg) translateY(50%);
}
.activity .slider-carusel {
  overflow: hidden;
  border-radius: var(--br-def);
  transition: all 0.3s ease-in-out;
  position: relative;
}
.activity .slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.activity .slide {
  width: 100%;
  transition: transform 0.85s ease-in-out, z-index 0s;
  background-color: #fff;
  box-shadow: 6px 7px 10.6px 0px rgba(27, 43, 70, 0.7);
  border-radius: var(--br-def);
  padding: 50px 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 1;
}
.activity .slideHeader .stage {
  font-size: var(--fz-64);
  font-weight: var(--fw-2xl);
  color: var(--def-darkblue);
}
.activity .slideContent {
  font-family: var(--font-montserrat), sans-serif;
}
.activity .slideContentHeader {
  padding: 15px 4rem;
  position: relative;
  font-weight: var(--fw-xl);
  font-size: var(--fz-md-lg);
}
.activity .slideContentHeader:after {
  content: "";
  width: 93%;
  height: 3px;
  background: var(--def-darkblue);
  border-radius: var(--br-def);
  position: absolute;
  bottom: 0;
  left: 3.5%;
}
.activity .slide .container {
  padding: 5px 50px;
  font-weight: var(--fw-lg);
  font-size: var(--fz-md);
  min-height: 160px;
}
.activity .slide .container .bold {
  font-weight: var(--fw-xl);
}
.activity .slide .container .bonus {
  font-size: 26px;
}
.activity .slide .container .icon {
  width: 70px;
  height: 70px;
}
.activity .slide .container:nth-child(odd) {
  background: var(--acc-gray);
}
.activity .slide .requirement {
  display: flex;
  align-items: center;
  gap: 50px;
}
.activity .countdown {
  color: var(--acc-orange-dark);
  font-weight: var(--fw-2xl);
  font-size: var(--fz-lg-sm);
  padding-top: 10px;
  font-family: var(--font-montserrat), sans-serif;
}
.activityPrev {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
}
.activityNext {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 991px) {
  .activity {
    padding: var(--section-pd);
  }
  .activity .chevron {
    right: 20px;
    height: 15px;
    width: 25px;
  }
  .activity .countdown {
    font-size: 22px;
  }
  .activityHeader {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .activityHeaderLeft {
    margin: 0 auto;
  }
  .activityHeader .personal-calculation {
    margin-top: 30px;
    width: 100%;
    font-size: var(--fz-md);
  }
  .activity .slideContentHeader {
    padding: 0 2rem 15px;
    color: var(--def-darkblue);
  }
  .slider-carusel .slider-carusel-btn {
    font-size: var(--fz-md-lg);
    height: 50px;
  }
  .slider-carusel .slide {
    padding: 40px 0 0;
  }
  .slider-carusel .slide .container {
    padding: 5px 20px;
    min-height: 130px;
    gap: 15px;
  }
  .slider-carusel .slide .container .requirement {
    font-size: 16px;
    gap: 30px;
  }
  .slider-carusel .slide .container .requirement img {
    width: 50px;
    height: 50px;
  }
  .slider-carusel .slide .container .bonus {
    font-size: 18px;
    font-weight: 700;
    color: var(--def-darkblue);
    text-align: center;
  }
}
@media screen and (max-width: 650px) {
  .activity .slideContentHeader {
    display: none;
  }
  .activityHeader .personal-calculation {
    font-size: 16px;
    margin-top: 20px;
  }
  .activity .countdown {
    font-size: 18px;
    text-align: center;
  }
  .slider-carusel .slide {
    padding: 25px 0 0;
  }
  .slider-carusel .slide .container {
    padding: 10px 20px;
    flex-direction: column;
  }
  .slider-carusel .slide .container .requirement {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .slider-carusel .slide .container .bonus {
    background: var(--def-darkblue);
    color: var(--def-white);
    width: 100%;
    padding: 5px 0;
    border-radius: 10px;
  }
}

/*# sourceMappingURL=slider.css.map */