:root{
    --dark:#0D0D2B;
    --white:#fff;
    --white-rgb:255, 255, 255;
    --blue:#3671E9;
    --purple:#2B076E;
    --light-gray:#E0E0E0;
    --purple-rgb: 43,7,110;
}
body{
    background-color: var(--dark);
    color: var(--white);
}
/* rubik-regular - latin_cyrillic */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/rubik-v23-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('../fonts/rubik-v23-latin_cyrillic-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* rubik-500 - latin_cyrillic */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/rubik-v23-latin_cyrillic-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('../fonts/rubik-v23-latin_cyrillic-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* rubik-700 - latin_cyrillic */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/rubik-v23-latin_cyrillic-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('../fonts/rubik-v23-latin_cyrillic-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* header style start */
  .header{
    max-width: 1202px;
    padding-left: 15px;
    padding-right: 15px;
    margin:0 auto;
    display: flex;
    justify-content:space-between ;
    align-items: center;
    margin-top: 60px;
}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
}
.nav-item{
    margin-left: 32px;
}
.nav-link{
    text-decoration: none;
    color: var(--white);
    font-size: 16px;
    transition: 0.2s ease color;
}
.nav-link:hover{
    color: var(--blue);
}
.nav-item--login{
    margin-left: 56px;
    padding-right: 24px;
    border-right: 1px solid rgba(242,242,242,0.3);
    font-weight: 500;
}
.nav-item--register{
    margin-left: 24px;
    background-color: var(--blue);
    padding: 14px 32px;
    border-radius: 32px;
    font-weight: 500;
    transition: 0.2s ease background-color;
}
.nav-item--register:hover{
    color: var(--white);
    background-color: var(--purple);
}
/* header style  end */

/* main style start  */
.wrapper{
    max-width: 1202px;
    padding-left: 15px;
    padding-right: 15px;
    margin:0 auto;
}
.main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}
.main-text{
    flex:0 0 600px ;
}
.main-text__sale{
    background-color: rgba(var(--white-rgb),0.1);
    display: inline-block;
    padding:8px 12px 8px 4px;
    border-radius: 32px;
}
.main-text__sale span{
    background-color: var(--white);
    color: var(--dark);
    padding: 4px 16px;
    border-radius: 32px;
    margin-right: 16px;
}
.main-text__title{
    font-size: 64px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1.1;
    margin-bottom: 24px;
}
.main-text__desc{
    
    color: var(--light-gray);
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 57px;
}
.main-img{
    flex-grow: 1;
    
}

.main-img_image{
    width: 100%;
}
.main-text__link{
    color:var(--white);
    text-decoration: none;
    /* margin-left: 24px; */
    background-color: var(--blue);
    padding: 14px 32px;
    border-radius: 32px;
    font-weight: 500;
    transition: 0.2s ease background-color;
}
.main-text__link:hover{
    color: var(--white);
    background-color: var(--purple);
}
/* main style end  */

/* stat style start  */
.stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 200px;
    padding-bottom: 196px;
}
.stat-item{
    display: flex;
    align-items: center;
}
.stat-item__text span{
display: block;
font-size: 40px;
font-weight: 700;
color: var(--white);
}
.stat-item__icon{
    background-color: rgba(var(--white-rgb),0.1);
    flex : 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    margin-right: 24px;
    background-repeat: no-repeat;
    background-position: center center;
}
.stat-item__icon--01{
    background-image:url(../img/icon-1.svg);
}
.stat-item__icon--02{
    background-image:url(../img/icon-2.svg);
}
.stat-item__icon--03{
    background-image:url(../img/icon-3.svg);
}

/* stat style end  */

/* text style start  */

.text{
   text-align:  center;
    padding-bottom: 60px;
}

.text__title{
    font-size: 40px;
    font-weight: 700;
}
.text__descr {
    color: var(--light-gray);
    font-size: 18px;
    line-height: 1.5;
    max-width: 630px;
    margin: 0 auto;
}
.calc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FBFCFE;
    border-radius: 16px 16px 0 0;
    max-width: 942px;
    margin: 0 auto;
    padding: 47px 46px;
    box-sizing: border-box;
}
.calc-head__input {
    font-size: 20px;
    color: var(--dark);
    border: none;
    border-bottom: 1px solid var(--light-gray);
    flex-grow: 1;
    padding: 12px 0;
}
.calc-head__input:focus {
    outline: none;
}
.calc-head__input::placeholder {
    color: var(--dark);
}
.calc-head__select {
    font-size: 20px;
    color: var(--dark);
    border: none;
    border-bottom: 1px solid var(--light-gray);
    flex: 0 0 200px;
    margin-right: 48px;
    margin-left: 48px;
    appearance: none;
    background-image: url(../img/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: 98% 18px;
    padding: 12px 0;
}
.calc-head__select:focus {
    outline: none;
}
.calc-head__btn {
    font-size: 18px;
    color: var(--white);
    background-color: var(--blue);
    padding: 19px 0;
    border-radius: 32px;
    font-weight: 500;
    text-decoration: none;
    transition: .2s ease background-color;
    border: none;
    flex: 0 0 146px;
}
.calc-head__btn:hover {
    background-color: var(--purple);
}

/* text style end  */

/* page-light style start  */
.page-light{
    background-color:#F8F9FB; ;
    color: var(--dark);
}
.calc-foot{
    max-width: 942px;
    margin: 0 auto;
    padding: 15px 30px ;
    background-color: var(--white);
    border-radius:0 0 16px 16px ;
    box-sizing: border-box;
    margin-bottom: 105px;
}
.calc-foot__title{
    font-size: 16px;
    font-weight: 500;
    color: var(--blue);
    margin: 0;
}
.calc-foot__total{
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-top: 25px;
    margin-bottom: 14px;
}
.calc-foot__total span{
color:var(--blue)
}
.calc-foot__desc{
    color: #828282;
    font-size: 16px;
    margin: 0;
    margin-bottom: 50px;
}
.page-light__title{
    text-align: center ;
    font-size: 40px;
    font-weight: 700;
    max-width: 741px;
    margin: 0 auto;
}
.crypto {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
    margin-top: 57px;
    padding-bottom: 100px;
}
.crypto-item {
    background-color: var(--white);
    color: var(--dark);
    border-radius: 16px;
    flex: 0 0 31%;
    padding: 52px 30px 47px;
    box-sizing: border-box;
    transition: .2s ease background-color, .2s ease color;
}
.crypto-item:hover {
    background-color: var(--purple);
    color: var(--white);
}
.crypto-item__title {
    font-size: 32px;
    font-weight: 700;
    margin-top: 47px;
    margin-bottom: 21px;
}
.crypto-item__title sup {
    font-size: 18px;
    font-weight: 500;
    color: #BDBDBD;
}
.crypto-item__desc {
    font-size: 16px;
    color: #828282;
    line-height: 1.7;
    transition: .2s ease color;
    margin-bottom: 25px;
}
.crypto-item:hover .crypto-item__desc {
    color: var(--white);
}
.crypto-item__btn {
    background-color: var(--white);
    font-size: 18px;
    color: var(--white);
    text-decoration: none;
    border-radius: 32px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 205px;
    margin: 0 auto;
    transition: .2s ease background-color;
}
.crypto-item:hover .crypto-item__btn {
    background-color: var(--blue);
}
.crypto-item__btn-text {
    font-size: 18px;
    font-weight: 500;
    width: 0;
    transition: .2s ease width;
}
.crypto-item:hover .crypto-item__btn-text {
    width: 133px;
}
.crypto-item__btn-icon {
    background-color: var(--white);
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 100%;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid rgba(var(--purple-rgb), 0.2);
    transform: scale(1);
    transition: .2s ease border, .2s ease transform;
}
.crypto-item:hover .crypto-item__btn-icon {
    border: 2px solid var(--white);
    transform: scale(0.5);
}
   

/* page-light style end  */

/* page-gradient style start  */

.page-gradient{
    background: linear-gradient(180deg, var(--purple) 0%, var(--dark) 100%);
    padding-top: 88px;
    padding-bottom: 88px;
}
.form-text__title{
margin-top: 0;
font-size: 32px;
font-weight: 700;

}
.form{
    background-color: var(--blue);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px;
}
.form-letter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 566px;
}
.form-text{
    flex-grow: 1;
}
.form-text__desc{
    font-size: 16px;
    margin-bottom: 0;
    max-width: 348px;
    line-height: 1.5;

}
.form-letter__input{
    font-size: 16px;
    border: none;
    border-bottom: 1px solid var(--white);
    background-color: transparent;
    color: var(--white);
    margin-right: 40px;
    width: 100%;
}
.form-letter__input::placeholder{
    color: var(--white);
}
.form-letter__btn{
    border: none;
    background-color: var(--white);
    color: var(--dark);
    font-size: 18px;
    padding: 15px 32px;
    font-weight: 700;
    border-radius: 32px;
}
/* page-gradient stytle end  */

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
     max-width: 1202px;
    padding-left: 15px;
    padding-right: 15px;
    margin:0 auto;
   
}
.footer-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.footer-list__item{
margin-left: 32px;

}
.footer-list__item:first-child{
    margin-left: 0;
}