@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

html,body{

    margin: 0;

    padding: 0;

    font-family: 'Inter', sans-serif;

    font-size: 18px;

    background: #f2f2f2;

}

header{

    background: #123344;

    color: #fff;

    padding: 13px 0;

    height: 50px;

}

.container{

    width: 1140px;

    margin: 0 auto;

}

.row{

    width: 1040px;

    margin: 0 auto;

}

.logo{

    text-decoration: none;

    color: #fff;

    font-size: 40px;

    font-weight: 800;

}

.logo img{

    height: 50px;

}

header .container{

    position: relative;

}

menu{

    position: absolute;

    top: 14px;

    right: 400px;

    margin: 0;

}

menu a{

    color: #fff;

    text-decoration: none;

    margin: 0 10px;

    transition: width 0.2s ease-out;

    display: inline-block;

    position: relative;

}

menu a:after {

    display: block;

    position: absolute;

    left: 0;

    width: 0;

    height: 1px;

    bottom: -5px;

    background-color: #fff;

    content: "";

    transition: width 0.2s ease-out;

}

menu a:hover:after, menu a:focus:after {

    width: 100%;

}



.login{

    position: absolute;

    top: 2px;

    right: 0px;

    margin: 0;

}

.login a{

    margin-left: 20px;

    color: #fff;

    text-decoration: none;

}

.btn{

  position: relative;

  display: inline-block;

  width: 130px;

  color: white;

  font-size: 14px;

  text-decoration: none;

  border: 1px solid #fff;

  padding: 14px 20px;

  text-transform: uppercase;

  overflow: hidden;

  transition: 1s all ease;

  text-align: center;

  z-index: 100;

  font-weight: 400;

  letter-spacing: 1px;

}

.btn::before{

  background: #fff;

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  z-index: -1;

  transition: all 0.6s ease;

  color:  #000;

}

.btn3::before{

  width: 100%;

  height: 0%;

  transform: translate(-50%,-50%) rotate(45deg);

}

.btn3:hover::before{

  height: 380%;

}

.btn:hover{

    color: #293033;

}

.btn-or{

    background: #af6c64;

}

.start{

    background-image: linear-gradient(#114662, #6a8c9c);

    color: #fff;

    min-height: 1050px;

}

.start .container{

    display: flex;

    justify-content: space-between;

    padding-top: 120px;

}

.pic-block{

    width: 55%;

    position: relative;

}

.text-block{

    width: 42%;

}

.text-block h1{

    font-weight: 400;

    font-size: 48px;

    margin-top: 10px;

}

.text-block p{

    margin-bottom: 80px;

}

.big-btn{

    width: 200px;

    padding: 14px 30px;

    font-size: 18px;

}

.big-btn:hover::before{

  height: 500%;

}

.sector-1{

    position: absolute;

    top: 0;

    left: 0;

    width: 447px;

    height: 459px;

    background-image: linear-gradient(#af6c64, #436e83);

    z-index: 1;

}

.sector-2{

    background: #2e5d75;

    width: 446px;

    height: 540px;

    position: absolute;

    top: 100px;

    left: 50px;

    z-index: 2;

}

.sector-3{

    width: 344px;

    height: 342px;

    position: absolute;

    top: 250px;

    left: 250px;

    z-index: 3;

    background: url(../img/lines.png)center center;

}

.sector-4{

    width: 438px;

    height: 505px;

    background: url(../img/girl.jpg)center center no-repeat;

    background-size: 110%;

    position: absolute;

    top: 50px;

    left: 110px;

    z-index: 4;

}

.why .row{

    display: flex;

    justify-content: space-between;

    align-content: center;

}

.block-why{

    width: 24%;

    box-sizing: border-box;

    padding: 25px;

    background: #fff;

    min-height: 260px;

    margin-top: -130px;

}

.why{

    margin-bottom: 130px;

}

.block-why i{

    font-size: 60px;

    color: #2e5d75;

}

.block-why h3{

    font-size: 18px;

    margin: 20px 0 0 0;

}

.block-why p i{

    font-size: 16px;

    font-weight: 300;

}

.cool{

    position: absolute;

    background-image: linear-gradient(#114662, #6a8c9c);

    width: calc(((100% - 1140px) / 2) + 861px);

    height: 870px;

    top: 0;

    left: 0;

    z-index: 1;

}

.bg-cool .row{

    display: flex;

    justify-content: space-between;

    padding-top: 100px;

    position: relative;

    z-index: 2;

    color:  #fff;

}

.left-text{

    width: 42%;

}

.bg-cool{

    position: relative;

    margin-bottom: 170px;

}

.left-text{

    padding-top: 0px;

}

.left-text h1{

    font-weight: 400;

    font-size: 50px;

}

.left-text p{

    margin-bottom: 20px;

}

.sector-11{

    position: absolute;

    width: 520px;

    height: 550px;

    background-image: linear-gradient(#af6c64, #436e83);

    top: 0;

    right: 0;

    z-index: 1;

}

.sector-22{

    background-color: #2e5d75;

    width: 388px;

    height: 477px;

    position: absolute;

    top: 200px;

    right: 100px;

    z-index: 2;

}

.sector-33{

    background-color: #364c56;

    width: 485px;

    height: 520px;

    position: absolute;

    top: 70px;

    right: 70px;

    z-index: 3;

}

.sector-33 img{

    width: 485px;

    object-fit: cover;

    height: 520px;

    box-shadow: 0 0 35px 0 rgb(0 0 0 / 50%);

}

.sector-44{

    width: 330px;

    min-height: 107px;

    background: url(../img/fon-avatar.png)center center;

    z-index: 4;

    position: absolute;

    top: 533px;

    right: -40px;

}

.life{

    padding-top: 150px;

    padding-bottom: 150px;

}

.life .row{

    display: flex;

    justify-content: space-between;

    align-content: center;

    align-items: center;

}

.life .right-text{

    width: 49%;

}

.right-text h1{

    font-weight: 400;

    font-size: 50px;

    color: #364c56;

}

.right-text p {

    margin-bottom: 20px;

}

.list-life{

    width: 43%;

    padding:  20px;

    box-sizing: border-box;

    color: #fff;

    background-image: linear-gradient(#af6c64, #436e83);

}

.name-list{

    text-align: center;

    font-size: 20px;

    /*color: #2d373c;*/

    font-weight: 600;

    padding: 10px 0;

    border-bottom: 2px solid #fff;

}

.life ul li{

    list-style-type: none;

    padding: 10px 0;

    font-size: 16px;

}

.life ul li i{

    margin-right: 5px;

}

.life ul{

    margin: 10px 0 10px 0;

    padding: 0;

}

.line{

    width: 100%;

    height: 30px;

    background: #2d383d;

    background: linear-gradient(to right, transparent 25%, #124763 75%);

}

.happiness{

    padding: 150px 0;

    margin-bottom: 150px;

}

.happiness .container{

    display: flex;

    justify-content: space-between;

}

.left-happiness{

    width: 43%;

}

.left-happiness h1{

    font-weight: 400;

    font-size: 50px;

    color: #364c56;

    margin-top: 0;

}

.left-happiness p {

    /*margin-bottom: 80px;*/

}

.left-happiness .btn{

    border-color: #5f7b88;

    background: #5f7b88;

    margin-top: 40px;

}

.left-happiness .btn:hover{

    color: #5f7b88;

}

.img-happines{

    width: 55%;

    position: relative;

}

.firt-hap-img{

    width: 398px;

    height: 416px;

    background: #2e5d75;

    z-index: 1;

    position: absolute;

    top: 0;

    right: 0;

}

.second-hap-img{

    position: absolute;

    top: 70px;

    right: 130px;

    width: 415px;

    height: 502px;

    background-image: linear-gradient(#af6c64, #436e83);

    z-index: 2;

}

.third-hap-img{

    position: absolute;

    right: 50px;

    top: -20px;

    width: 430px;

    height: 518px;

    filter: brightness(0.95);

    box-shadow: 2px 2px 40px 0 rgb(26 26 26 / 40%);

    background: url(../img/girl3.jpg) top center no-repeat;

    background-size: cover;

    z-indeX: 3;

}

.fourth-hap-img{

    background: url(../img/fon-avatar.png)center center;

    position: absolute;

    top: 405px;

    right: 0px;

    width: 402px;

    min-height: 130px;

    z-index: 4;

}

footer{

    padding: 20px 0;

    background: #123344;

    color: #fff;

}

.copy{

    text-align: center;

    color: #fff;

    font-size: 14px;

}

footer .container{

    display: flex;

    justify-content: space-between;

    padding: 50px 0;

    align-items: center;

}

.footer-nav a{

    color:  #fff;

    text-decoration: none;

    margin: 0 10px;

    transition: width 0.2s ease-out;

    display: inline-block;

    position: relative;

}

.footer-nav a:after {

    display: block;

    position: absolute;

    left: 0;

    width: 0;

    height: 1px;

    bottom: -5px;

    background-color: #fff;

    content: "";

    transition: width 0.2s ease-out;

}

.footer-nav a:hover:after, .footer-nav a:focus:after {

    width: 100%;

}

.wrapper{

    min-height: calc(100vh - 343px);

    padding-bottom: 50px;

    background: url(../img/block.png) top right no-repeat;

}

.title{

    margin: 0;

    padding: 30px 0;

    text-align: center;

    font-weight: 600;

    font-size: 38px;

    color: #364c56;

    text-transform: uppercase;

}

form{

    width: 480px;

    padding: 20px;

    background-image: linear-gradient(#bf795c, #364c56);

    margin: 0 auto;

}

form input, form textarea{

    width: 100%;

    box-sizing: border-box;

    padding: 10px;

    border: none;

    background: #f2f2f2;

    font-size: 16px;

    font-family: 'Inter', sans-serif;

}

.group{

    margin: 10px 0;

}

.btn-group{

    margin-top: 25px;

    text-align: center;

}

.start .text-block p{

    margin: 20px 0;

}

.start .big-btn{

    margin-top: 40px;

}

.start p span{

    color: #ffa985;

    font-weight: 600;

}

.btn-group .big-btn{

    border-color: #fff;

    background: transparent;

    cursor: pointer!important;  

    width: 220px;

}

.btn-group .big-btn:hover{

    background: #fff;

}

.info-group a{

    color: rgba(255, 255, 255, 0.7);

    text-decoration: none;

    transition: 1s all ease;

}

.info-group a:hover{

    color: rgba(255, 255, 255, 2);

}

.group input:focus, .group textarea:focus{

    outline: none;

    background: #fff;

}

.info-group{

    color:  #fff;

}

.info-group input{

    display: inline-block;

    width: 22px;

    height: 22px;

    vertical-align: top;

    margin-top: -1px;

    cursor: pointer;

} 

.left-text .big-btn{

    margin-top: 40px;

}

.left-text span{

    color: #ffa985;

}

.list-life ul li b{

    font-size: 20px;

    font-weight: 600;

}

.right-text span{

    color: #d64d14;

    font-weight: 600;

}

.left-happiness span{

    color: #d64d14;

    font-weight: 600;

}





.support{

    position: absolute;

    background-image: linear-gradient(#114662, #6a8c9c);

    width: calc(((100% - 1140px) / 2) + 861px);

    height: 720px;

    top: 0;

    left: 0;

    z-index: 1;

}

.bg-support .row{

    display: flex;

    justify-content: space-between;

    padding-top: 100px;

    position: relative;

    z-index: 2;

    color:  #fff;

}

.bg-support{

    position: relative;

    margin-bottom: 170px;

    height: 720px;

}

.bg-support .left-text{

    padding-top: 0px;

}

.bg-support .left-text h1{

    font-weight: 400;

    font-size: 50px;

    text-align: center;

}

.bg-support .left-text p{

    margin-bottom: 20px;

}

.bg-support .sector-11{

    position: absolute;

    width: 520px;

    height: 550px;

    background-image: linear-gradient(#af6c64, #436e83);

    top: -45px;

    right: 0;

    z-index: 1;

}

.bg-support .sector-22{

    background-color: #364c56;

    width: 388px;

    height: 477px;

    position: absolute;

    top: 200px;

    right: 100px;

    z-index: 2;

}

.bg-support .sector-33{

    background-color: #364c56;

    width: 485px;

    height: 520px;

    position: absolute;

    top: 0px;

    right: 70px;

    z-index: 3;

}

.bg-support .sector-33 img{

    width: 485px;

    object-fit: cover;

    height: 520px;

    box-shadow: 0 0 35px 0 rgb(0 0 0 / 50%);

}

.bg-support .sector-44{

    width: 330px;

    min-height: 107px;

    background: url(../img/fon-avatar.png)center center;

    z-index: 4;

    position: absolute;

    top: 463px;

    right: -40px;

}

.bg-support form{

    background: transparent;

    padding: 0;

    width: 420px;

    max-width: 95%;

}

.lang{

    position: absolute;

    top: 27px;

    right: 10px;

    cursor: pointer;

}

.lang img{

    width: 30px;

}

.language{

    display: none;

    position: absolute;

    top: 80px;

    right: 10px;

    cursor: pointer;

}

.language img{

    width: 30px;

}

.language a{

    display: block;

    margin-bottom: 5px;

    transition: 0.3s;

}

.language a:hover{

    transform: scale(1.2);

}

.telegram{

    position: absolute;

    color: #fff;

    font-size: 30px;

    text-decoration: none;

    top: 8px;

    right: 400px;

    transition: 0.35s;

}

.youtube{

    position: absolute;

    color: #fff;

    font-size: 30px;

    text-decoration: none;

    top: 8px;

    right: 455px;

    transition: 0.35s;

}

.telegram:hover, .youtube:hover{

    color: #d8a49e;

}

footer .container{

    position: relative;

}

footer .telegram{

    right: 0;

    top: 55px;

}

footer .youtube{

    right: 50px;

    top: 55px;

}

.work_site{

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    height: 100vh;

    background: linear-gradient(45deg, #EECFBA, #C5DDE8);

    color: #333;

    text-align: center;

    z-index: 999999;

}

.work_site h1{

    margin: 0px auto;

    padding-top: 100px;

    font-size: 30px;

    max-width: 70%;

}

.right{

    width: 100%;
    
    text-align: center;
    
    color: #35bf48;
    
    font-size: 16px;
    
    margin: 10px 0;
    
    background: #dcffdf;
    
    padding: 5px 0;
    
    font-weight: 600;
    
    box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 30%);
    
    border-radius: 2px;

}

.error{

    width: 100%;
    
    text-align: center;
    
    color: red;
    
    font-size: 16px;
    
    margin: 10px 0;
    
    background: #ffdede;
    
    padding: 5px 0;
    
    font-weight: 600;
    
    box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 30%);
    
    border-radius: 2px;

}

.sponsor{

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 0;

}

.sponsor img{

    width: 60px;

    height: 60px;
    
    object-fit: cover;

    margin-left: 30px;

    font-size: 14px;

    border: 1px solid #fff;

}

.sponsor b{

    margin-right: 10px;

}

.small-text {

    font-size: 14px;

    display: flex;

}

.text-chekbox{

    display: inline-block;

    margin-left: 10px;

}

.right-text{

    max-width: 1140px;

    margin: 0 auto 5px auto;

    text-align: right;

}