@import url('../css2-1');
:root {
  --deep-gray: #222629;
  --deep-green: #61892f;
  --light-green: #86c232;
  --medium-gray: #474B4F;
  --light-gray: #6B6E70;
  --main-width: 1680px
}

html {
  font-family: 'Urbanist', sans-serif;
}
.desktop{
  display: block;
}@import url('../css2-1');
:root {
  --deep-gray: #222629;
  --deep-green: #61892f;
  --light-green: #86c232;
  --medium-gray: #474B4F;
  --light-gray: #6B6E70;
  --main-width: 1680px
}

html {
  font-family: 'Urbanist', sans-serif;
}
.desktop{
  display: block;
}
body {
  margin: 0;
  background: var(--deep-gray);
}
.login{
  font-size:25px
}
a{
  color: unset;
  text-decoration: unset;
}
.mob-text{
  display: none;
}
.btn{
  width: 500px;
  height: 77px;
  border-radius: 10px;
  background: var(--light-green);
  font-size: 35px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin:33px auto 25px auto;
  display: block;
  font-weight: bold;
  line-height: 77px;
}
#question .hide{
  display: none;
}
.white{
  color: #fff;
  font-weight: bold;
}
.gray{
  color: var(--light-gray);
}
.deep-gray{
  color: var(--medium-gray);
}
.mobile{
  display: none;
}
.main-padding {
  padding: 40px;
}

.main-width {
  max-width: 1350px;
  margin: auto;
}

.header-biggest {
  font-size: 45px;
  text-transform: uppercase;
}

.header-medium {
  font-size: 27px;
}

header .container {
  padding: 40px;
}

header .header-biggest {
  color: var(--light-green);
  text-transform: uppercase;
  text-align: center;
  margin: 25px 0 20px 0;
}

header .logo {
  width: 289px;
}

header .elements {
  display: flex;
  justify-content: space-between;
}

header .right {
  color: var(--light-gray);
}

header .header-medium {
  margin: 25px 0;
  text-align: center;
}

header .right .with-bg {
  background-image: url('../img/111 1.png');
  width: 841px;
  height: 497px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .with-bg .items {
  width: 750px;
}

header .items .item {
  display: flex;
  align-items: center;
}

header .items .text {
  margin: 10px 25px;
  font-size: 40px;
  color: #fff;
}

header .left .text {
  color: var(--deep-green);
}

header form {
  border-radius: 15px;
  width: 450px;
  min-height: 497px;
  background: var(--medium-gray);
  padding: 20px 7px 10px 7px;
  box-sizing: border-box;
}
.form_control{
  text-align: center;
  margin: 10px 0;
}
.my_input{
  width: 400px;
  height: 45px;
  box-sizing: border-box;
  background: #fafafa;
  border-radius: 7px;
  border: none;
  margin: 10px 0;
}
#form-group-phone{
  position: relative;
  top: 10px;
}
#introduction {
  background: var(--medium-gray);
}
form .btn{
  width: 400px;
  border:none
}
#introduction .text .header-biggest {
  color: var(--light-green);
  text-align: center;
  margin: 25px 0;
}

#introduction .elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#introduction .items {
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 25px;
}

#introduction .items .item {
  display: flex;
  align-items: center;
}
#introduction .right{
  width:50%
}
#introduction .left{
  width:50%
}
#introduction .items .item .short-text {
  margin: 0 10px;
  font-size: 22px;
  color: #fff;
}

#steps .text .header-biggest {
  color: var(--light-green);
  text-align: center;
  margin: 25px 0;
}

#steps .elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#steps .elements .element {
  color: #fff;
  margin: 30px 0;
  width: 400px;
  height: 450px;
  background: var(--light-gray);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#steps .element .header{
  font-weight: bold;
}
#steps .element .sub-element{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#steps .element .item {
  display: flex;
  width: 360px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
#steps .element .item .short-text{
  margin: 0 10px;
}
#question{
  background: var(--medium-gray);
}
#question .header-biggest{
  color: var(--light-green);
  text-align: center;
}
#question .elements .data{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#question .elements {
  padding: 20px 0;
}
#question .item{
  margin: 25px 0;
  width: 1450px;
  color: #fff;
  position: relative;
  padding: 10px 0;
  border-bottom: 2px solid var(--light-green);
}
#question .content{
  width: 1200px;
  display: flex;
  flex-direction: column;
}
#question .arrow {
  cursor: pointer;
  position: absolute;
  bottom: -3px;
  right: 2px;
  transform: rotate(90deg);
}
#question .rotate {
  transform: rotate(-90deg);
  right: -3px;
}
#question .header{
  font-size: 30px;
}
#question .text{
  font-size: 19px;
  margin: 20px 0;
}
#description .item{
  width: 50%;
}
#description .left img{
  width: 50%;
}
#description .elements .left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#description .left .header-medium {
  color: var(--deep-green);
}
#description .elements{
  display: flex;
  justify-content: space-between;
}
#description  .mobile{
  display: none;
}
#description .deep-gray{
  font-size: 30px;
}
#description .right{
  color: var(--light-gray);
  line-height: 30px;
}
.f-1{
  display: flex;
  justify-content: space-between;
  width: 450px;
  margin: 10px 0;
  color: #fafafa;
}

.f-2{
  color: white;
  width: 450px;
  text-align: center;
}
@media screen and (max-width: 650px){
  #introduction .right{
    width: 100%;
  }
  #introduction .left{
    width: 100%;
  }
  form .btn{
    width:100%
  }
  .f-1, .f-2{
    width: 100%;
  }
  .my_input, #phone{
    width: 330px;
    height: 45px;
  }
  .btn{
    width: auto;
    font-size: inherit;
  }
  .mobile{
    display: block;
  }
  img{
    max-width: 100%;
  }
  .main-padding{
    padding: 10px;
    box-sizing: border-box;
  }
  .desktop{
    display: none;
  }
  .header-biggest{
    font-size: 32px;
  }
  .header-medium{
    font-size: 24px;
  }
  .main-width{
    width: 100%;
    max-width: 100%;
  }
  header .header-biggest{
    margin:10px 0;
  }
  header .header-medium{
    margin: 10px 0;
  }
  header .logo {
    width: 50%;
  }
  header .container {
    padding: 10px;
    box-sizing: border-box;
  }
  header form{
    width: 100%;
    height: auto;
  }
  header .elements{
    flex-direction: column;
  }
  header .right .with-bg{
    width: auto;
    height: auto;
  }
  header .items{
    padding: 25px;
    box-sizing: border-box;
  }
  header .items .text{
    font-size: inherit;
  }
  header .items img{
    width: 8%;
  }


  #introduction .elements{
    flex-direction: column;
  }

  #introduction .items{
    height: auto;
    margin-left: unset;
  }
  #introduction .items .item .short-text{
    margin: 10px;
    font-size: inherit;
  }

  #steps .elements{
    flex-direction: column;
  }
  #steps .elements .element{
    background: none;
    margin: 15px 0;
    height: auto;
    width: auto;
    align-items: flex-start;
  }
  #steps .element .item{
    width: auto;
    color: var(--light-gray);
    margin: 10px 0;
  }
  #steps .element .sub-element{
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 15px;
  }


  #question .elements{
    padding: 7px;
    box-sizing: border-box;
  }
  #question .content {
    width: auto;
    padding: 5px;
    box-sizing: border-box;
  }

  #question .header{
    font-size: 25px;
  }

  #question .item{
    width: 100%;
    margin: 10px 0;
  }
  #question .item .arrow img{
    width:40px;
  }

  #question .arrow{
    bottom: -5px;
    right: 0px;
  }

  #question .rotate {
    transform: rotate(-90deg);
    right: -3px;
    bottom: -3px;
  }

  #question .arrow img{
    width: 50%;
  }

  #description .elements{
    padding: 20px 0;
    flex-direction: column-reverse;
  }
  #description  .desktop{
    display: none;
  }

  #description  .mobile{
    display: block;
  }
  #description .item{
    width: 100%;
  }
  #description .left .header-medium{
    font-size: 23px;
    margin: 10px 0;
    color: var(--light-green);
  }
  #description .deep-gray{
    font-size: inherit;
    color: var(--light-gray)
  }
  #description .center{
    text-align: center;
    font-size: 16px;
  }
  #description .elements .left, #description .elements .right{
    align-items: center;
  }
}
body {
  margin: 0;
  background: var(--deep-gray);
}
.login{
  font-size:25px
}
a{
  color: unset;
  text-decoration: unset;
}
.btn{
  width: 500px;
  height: 77px;
  border-radius: 10px;
  background: var(--light-green);
  font-size: 35px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin:33px auto 25px auto;
  display: block;
  font-weight: bold;
  line-height: 77px;
}
#question .hide{
  display: none;
}
.white{
  color: #fff;
  font-weight: bold;
}
.gray{
  color: var(--light-gray);
}
.deep-gray{
  color: var(--medium-gray);
}
.mobile{
  display: none;
}
.main-padding {
  padding: 40px;
}

.main-width {
  max-width: 1350px;
  margin: auto;
}

.header-biggest {
  font-size: 45px;
  text-transform: uppercase;
}

.header-medium {
  font-size: 27px;
}

header .container {
  padding: 40px;
}

header .header-biggest {
  color: var(--light-green);
  text-transform: uppercase;
  text-align: center;
  margin: 25px 0 20px 0;
}

header .logo {
  width: 289px;
}

header .elements {
  display: flex;
  justify-content: space-between;
}

header .right {
  color: var(--light-gray);
}

header .header-medium {
  margin: 25px 0;
  text-align: center;
}

header .right .with-bg {
  background-image: url('../img/111 1.png');
  width: 841px;
  height: 497px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .with-bg .items {
  width: 750px;
}

header .items .item {
  display: flex;
  align-items: center;
}

header .items .text {
  margin: 10px 25px;
  font-size: 40px;
  color: #fff;
}

header .left .text {
  color: var(--deep-green);
}

header form {
  border-radius: 15px;
  width: 450px;
  min-height: 497px;
  background: var(--medium-gray);
  padding: 20px 7px 10px 7px;
  box-sizing: border-box;
}
.form_control{
  text-align: center;
  margin: 5px 0;
}
.my_input{
  width: 400px;
  height: 45px;
  box-sizing: border-box;
  background: #fafafa;
  border-radius: 7px;
  border: none;
  font-size: 22px;
  padding: 0 10px;
  margin: 10px 0;
}
#form-group-phone{
  position: relative;
  top: 10px;
}
#introduction {
  background: var(--medium-gray);
}
form .btn{
  width: 400px;
  border:none
}
#introduction .text .header-biggest {
  color: var(--light-green);
  text-align: center;
  margin: 25px 0;
}

#introduction .elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#introduction .items {
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 25px;
}

#introduction .items .item {
  display: flex;
  align-items: center;
}
#introduction .right{
  width:50%
}
#introduction .left{
  width:50%
}
#introduction .items .item .short-text {
  margin: 0 10px;
  font-size: 22px;
  color: #fff;
}

#steps .text .header-biggest {
  color: var(--light-green);
  text-align: center;
  margin: 25px 0;
}

#steps .elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#steps .elements .element {
  color: #fff;
  margin: 30px 0;
  width: 400px;
  height: 450px;
  background: var(--light-gray);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#steps .element .header{
  font-weight: bold;
}
#steps .element .sub-element{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#steps .element .item {
  display: flex;
  width: 360px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
#steps .element .item .short-text{
  font-size: 22px;
  margin: 0 10px;
}
#question{
  background: var(--medium-gray);
}
#question .header-biggest{
  color: var(--light-green);
  text-align: center;
}
#question .elements .data{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#question .elements {
  padding: 20px 0;
}
#question .item{
  margin: 25px 0;
  width: 1350px;
  color: #fff;
  position: relative;
  padding: 10px 0;
  border-bottom: 2px solid var(--light-green);
}
#question .content{
  width: 1200px;
  display: flex;
  flex-direction: column;
}
#question .arrow {
  cursor: pointer;
  position: absolute;
  bottom: -3px;
  right: 2px;
  transform: rotate(90deg);
}
#question .rotate {
  transform: rotate(-90deg);
  right: -3px;
}
#question .header{
  font-size: 30px;
}
#question .text{
  font-size: 19px;
  margin: 20px 0;
}
#description .item{
  width: 50%;
}
#description .left img{
  width: 50%;
}
#description .elements .left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#description .left .header-medium {
  color: var(--deep-green);
}
#description .elements{
  display: flex;
  justify-content: space-between;
}
#description  .mobile{
  display: none;
}
#description .deep-gray{
  font-size: 30px;
}
#description .right{
  color: var(--light-gray);
  line-height: 30px;
}
.f-1{
  display: flex;
  justify-content: space-between;
  width: 450px;
  margin: 10px 0;
  color: #fafafa;
}

.f-2{
  color: white;
  width: 400px;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
.f-2 .agreement-checkbox-text {
  text-align: left;
  margin-left: 15px;
}
.f-2 input[type=checkbox] {
  display: block;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 1050px){
  #desk-header-text{
    display: none;
  }
  .mob-text{
    text-align: center;
    color:#61892f;
    display: block;
    font-size: 20px;
    text-transform: uppercase;
  }
  .f-1{
    justify-content: space-around;
  }
  header .top {
    text-align: center;
  }
  header .items .item {
    justify-content: center;
  }
  #introduction .right{
    text-align:center;
    width: 100%;
  }
  #introduction .left{
    width: 100%;
  }
  /*#question .text{*/
  /*  width:330px;*/
  /*}*/
  form .btn{
    width:100%
  }
  header .right{
      margin:12px 0;
  }
  .f-1, .f-2{
    width: 100%;
  }
  .my_input, #phone{
    width: 320px;
    height: 45px;
    margin:5px 0;
  }
  .btn{
    width: auto;
    font-size: inherit;
    margin: 33px auto 11px auto;
  }
  .mobile{
    display: block;
  }
  img{
    max-width: 100%;
  }
  .main-padding{
    padding: 10px;
    box-sizing: border-box;
  }
  .desktop{
    display: none;
  }
  .header-biggest{
    font-size: 32px;
  }
  .header-medium{
    font-size: 24px;
  }
  .main-width{
    width: 100%;
    max-width: 100%;
  }
  header .header-biggest{
    margin:0;
  }
  header .header-medium{
    margin: 10px 0;
  }
  header .logo {
    width: 50%;
  }
  header .container {
    padding: 10px;
    box-sizing: border-box;
  }
  header form{
    width: 100%;
    height: auto;
    padding:5px;
  }
  header .elements{
    flex-direction: column;
  }
  header .right .with-bg{
    width: auto;
    height: auto;
  }
  header .items{
    padding: 5px;
    box-sizing: border-box;
  }
  header .items .text{
    font-size: 24px;
  }
  header .items img{
    width: 14%;
  }


  #introduction .elements{
    flex-direction: column;
  }

  #introduction .items{
    height: auto;
    margin-left: unset;
  }
  #introduction .items .item .short-text{
    margin: 10px;
    font-size: inherit;
  }

  #steps .elements{
    flex-direction: column;
  }
  #steps .elements .element{
    background: none;
    margin:0;
    height: auto;
    width: auto;
    align-items: flex-start;
  }
  #steps .element .item{
    width: auto;
    color: var(--light-gray);
    margin: 0;
  }
  #steps .element .sub-element{
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 15px;
  }


  #question .elements{
    padding: 7px;
    box-sizing: border-box;
  }
  #question .content {
    word-break: break-word;
    padding: 5px;
    box-sizing: border-box;
    width:100%
  }

  #question .header{
    font-size: 25px;
    word-break: break-word;
  }

  #question .item{
    width: 100%;
    margin: 10px 0;
    padding: 10px 0 40px 0;
  }
  #question .item .arrow img{
    width:40px;
  }

  #question .arrow{
    bottom: -5px;
    right: 0px;
  }

  #question .rotate {
    transform: rotate(-90deg);
    right: -3px;
    bottom: -5px;
  }

  #question .arrow img{
    width: 50%;
  }

  #description .elements{
    padding: 20px 0;
    flex-direction: column-reverse;
  }
  #description  .desktop{
    display: none;
  }

  #description  .mobile{
    display: block;
  }
  #description .item{
    width: 100%;
  }
  #description .left .header-medium{
    font-size: 23px;
    margin: 10px 0;
    color: var(--light-green);
  }
  #description .deep-gray{
    font-size: inherit;
    color: var(--light-gray)
  }
  #description .center{
    text-align: center;
    font-size: 16px;
  }
  #description .elements .left, #description .elements .right{
    align-items: center;
  }

  @media screen and (max-width:330px){
    .my_input, #phone{
      width: 280px;
      height: 45px;
    }

    #question .text{
      width:auto;
    }
  }
}
@media screen and (max-width: 650px){
  header .items .item {
    justify-content: unset;
  }
}