@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");


@font-face {
    font-family: 'Redtowns';
    src: url(assets/fonts/Redtowns.ttf);
}

body {
    background-color: black;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    font-family: 'Inter',serif !important;
    padding-bottom: 80px;
}

.header {
    z-index: -1;
    background-image: url('img/hero-ru.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    /* height: 110vh; */
    min-height: 100vh;
  }

  .join-btn {
    position: absolute;
    color: white !important;
    background: linear-gradient(90deg, #6525AE 0%, #BA7DF0 50%, #8A47D2 75%, #AC67ED 100%);
    padding: 17px 100px;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    border: 0.5px solid #6A2AB2;
    border-radius: 28px;
  }

  .about-us {
    margin-top: -25px;
    width: 100vw;
  }

  .section-about {
    margin-top: -3vh;
    background-image: url('img/second.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
  }


  .calculator {
    background-color: white;
    padding: 37px 34px;
    border-radius: 36px;
    padding-bottom: 49px;
  }

  .calculator-title {
    text-align: center;
    color: black;
    font-size: 28px;
    font-weight: 800;
  }

  .ranges-container {
    margin-top: 49px;
  }

  .ranges-title {
    color: black;
    font-size: 19px;
    font-weight: 600;
  }

  .range-subtitle {
    /* margin-top: 0px; */
    display: flex;
    flex-direction: column;
  }

  .first-subtitle {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #404142;
    line-height: 120%;
  }

  .second-subtitle {
    color: #404142;
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;

}

.third-subtitle {
    color: #8723AB;
    font-size: 11px;
    font-weight: 500;
    line-height: 120%;

}

.slider-container {
    margin-top: 15px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
}
.slider-container b {
    font-size: 16px;
}
.range-slider {
  margin-top: 10px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: transparent;
  border-radius: 4px;
  outline: none;
  opacity: 0.9;
  transition: opacity .2s;
}

.range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #c66af5 0%, #c66af5 var(--fill-percent), #B1B2B7 var(--fill-percent), #B1B2B7 100%);
  border-radius: 4px;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border: 4px solid #CF5EF8;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  margin-top: -8px;
}


.range-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: #B1B2B7; 
  border-radius: 4px;
}

.range-slider::-moz-range-progress {
  height: 4px;
  background: #CF5EF8; 
  border-radius: 4px;
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border: 4px solid #CF5EF8;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.slider-container span {
  font-size: 12px;
  font-weight: 600;
}

.additional-info {
  font-size: 13px;
  font-weight: 500;
  color: #535455;
}

.contract-count{
  font-size: 16px !important;
}


.selected-values-container {
  border: 1px solid black;
  border-radius: 40px;
  padding: 17px 13px;
  margin-top: 65px;
}

.client-values {
  padding: 31px 19px;
  border-radius: 28px;
  background-color: #E7E7E7;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.client-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.value-title {
  font-weight: 400;
  font-size: 15px;
  
}

.selected-value {
  font-size: 12px;
  font-weight: 600;
}

.total-income {
  background-color: black;
  padding: 19px;
  border-radius: 29px;
  margin-top: 21px;
  display: flex;
  flex-direction: column;
  gap: 11px;

}

.income-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.income-value {
  font-weight: 700;
  color: #CE9BFF;
  font-size: 30px;
}

.warning-container {
  margin-bottom: 60px;
  padding-left: 13px;
  padding-right: 13px;
  margin-top: 44px;
  font-size: 13px;
  font-weight: 500;
}

.warning-container span {
  font-weight: 700;
}

.join-btn-warn {
  color: white !important;
    background: linear-gradient(90deg, #6525AE 0%, #BA7DF0 50%, #8A47D2 75%, #AC67ED 100%);
    padding: 17px 100px;
    bottom: 104px;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    border: 0.5px solid #6A2AB2;
    border-radius: 28px;
}

footer{
  text-align: center;
  margin-top: 82px;
}

.join-btn-2{
  color: #B010EA !important;
  background: linear-gradient(90deg, #C0BFC2 0%, #FFFFFF 50%, #C9C9C9 75%, #EFEFEF 100%);
  padding: 17px 100px;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  border: 2px solid #6A2AB2;
  border-radius: 28px;
  
}

.join-btn-home{
  color: white !important;
    background: linear-gradient(90deg, #6525AE 0%, #BA7DF0 50%, #8A47D2 75%, #AC67ED 100%);
    padding: 17px 100px;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    border: 0.5px solid #6A2AB2;
    border-radius: 28px;
  
}

.social-title {
  font-family: 'Bebas', serif;
    font-size: 20px;
    font-weight: 700;
    margin-top: 117px;
    color: white;
}
.social-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  width: 100%;
  max-width: 500px;
}

.social-icons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 27px;
}

.social-icons img {
  width: 29px;
  height: 29px;
}

.social-text {
  color: #979799;
  font-size: 15px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.copyright {
margin-top: 16px;
color: #818185;
font-weight: 300;
font-size: 12px;

}



.third-container {
  position: relative; 
  width: 100vw; 
  height: auto; 
  overflow: hidden; 
}

.third {
  width: 100%; 
  display: block;
}


.join-btn-3 {
  position: absolute;
  color: white !important;
  background: linear-gradient(90deg, #6525AE 0%, #BA7DF0 50%, #8A47D2 75%, #AC67ED 100%);
  padding: 17px 100px;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  border: 0.5px solid #6A2AB2;
  border-radius: 28px;
  cursor: pointer;
  left: 50%; 
  bottom: 8%;
  transform: translate(-50%, -50%); 
  user-select: none;
  
}