@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{margin: 0; padding: 0; font-family: "Montserrat", sans-serif; box-sizing: border-box;}
.flex, .hover, .process .btn{display: flex;}
.fdc{display: flex; flex-direction: column;}
.fww{flex-wrap: wrap;}
.aic{align-items: center;}
.jcc{justify-content: center;}
.jcsb{justify-content: space-between;}
.jcfe{justify-content: flex-end;}
.aifs{align-items: flex-start;}
a{text-decoration: none; color: inherit;}
.wrapper{width: 1280px; margin: 0 auto;}
html{font-size: 62.5%;}
body, .wrapper{position: relative;}
.wrapper{z-index: 1;}
h4{font-size: 4rem;}

header{position: absolute; width: 100%; z-index: 2;}
header, .s1, .s3, .s4, .s6, .s7, .s8, .s11 input[type=submit], .request.yellow .tab-btn:hover, .tab-btn.active, footer{color: #fff;}
header .wrapper{width: 100%;}
header .top{font-size: 1.6em; padding: 5px 2%; margin-bottom: 10px; background: #00345da8;}
header .bottom{width: 1280px; margin: 0 auto;}
.phone{gap: 3em;}
.phone span{font-size: 1.8em;}
.phone div{text-align: right;}
.phone small{font-size: 1.2rem; display: block;}
.logo-div, nav, .socials{width: 33%;}
.socials a{transition: .3s;}
.socials a{width: 25px; height: 25px;}
.dzen{background-position: -133px -56px;}
.vk{background-position: -184px -131px;}
.tg{background-position: -184px -106px;}
.socials a:hover{transform: scale(1.1);}
nav a{font-size: 2rem; padding: 10px 20px; border-radius: 10px; transition: .5s;}
nav a:hover{background: #084778;}
nav li{list-style: none;}
nav ul{gap: 1rem;}
.socials{gap: 1rem;}
.filter{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #084778a8; z-index: 1;}
.logo-div p{font-size: 2rem;}
.logo-div svg, .s1 .content svg{width: 50px; height: 50px; margin-right: 10px; fill: #fff;}

.s1{background: url(../img/s1-bg.png) no-repeat; background-size: cover; padding-top: 170px; text-align: center; position: relative; background-position: center;}
h1{font-size: 5.5rem; width: 70%; margin: 0 auto;}
.s1 .subtitle{font-size: 1.8rem; width: 520px; margin: 30px auto; text-align: center; line-height: 200%;}
.s1 .desc{font-size: 2.8rem; line-height: 1.3; width: 80%; margin: 0 auto;}
.s1 .wrapper{z-index: 1;}
.s1 .options{width: 75%; margin: 75px auto;}
.s1 .options p{font-size: 1.8rem;}
.s1 .options b{display: block; font-size: 2.4rem; line-height: 1.1; margin-bottom: 5px;}
.s1 .request{font-size: 2rem; padding: 18px 36px; background-color: #E5E5E5; border: none; color: #015E5F; margin: 0 auto 64px; border-radius: 8px; cursor: pointer; transition: all .5s;}
.s1 .request:hover{box-shadow: 0 0 20px 5px #E5E5E5;}

.s2{padding: 64px 0; color: #084778;}
.s2 .left{margin-right: 100px; width: 25%; min-width: 200px; flex-shrink: 0;}
.s2 h3{font-size: 3rem; line-height: 1.2;}
.s2 .right{width: 70%;}
.s2 .right p{font-size: 2.8rem; line-height: 1.2; font-weight: 500;}
.s2 .row{margin: 30px 0;}
.banks{gap: 20px; width: 500px;}
.s2 .bank{width: 105px; height: 105px; background-color: #084778; border: 3px solid #EBEBEB; border-radius: 20px;}
.bank:first-child svg{display: none;}
.bank .img-div, .ggl-map .img-div, .socials a{background-image: url(../img/sprite.png);}
.bank:first-child .img-div{background-position: 0px -56px; width: 70px; height: 52px;}
.bank:nth-child(2) .img-div{background-position: -184px 0px; width: 49px; height: 64px;}
.bank:nth-child(3) .img-div{background-position: 0px 0px; width: 103px; height: 56px;}
.bank:nth-child(4) .img-div{background-position: -103px 0px; width: 81px; height: 48px;}
.bank:nth-child(5) .img-div{background-position: -70px -56px; width: 63px; height: 44px;}
.bank:nth-child(6) .img-div{background-position: -56px -108px; width: 57px; height: 60px;}
.bank:nth-child(7) .img-div{background-position: 0px -108px; width: 56px; height: 62px;}
.bank:last-child .img-div{background-position: -184px -64px; width: 40px; height: 42px;}

.s3{padding: 64px 5%; background: linear-gradient(135deg, #015E5F 40%, #14A37B 70%, #084778 60px); text-align: center;}
.s3 h4{margin-bottom: 50px;}
.s3 p{font-size: 2.4rem; padding-right: 15px;}
.s3 .list{columns: 2;}
.s3 .row svg{width: 30px; height: 30px; transform: rotate(180deg); flex-shrink: 0; margin-top: 7px; stroke: #fff;}
.s3 .row p{text-align: left; line-height: 1.8; break-inside: avoid;}
.s3 svg.mother{width: 170px; height: 170px;}
.s3 svg{flex-shrink: 0;}

.s4{background: url(../img/s4-bg.png) no-repeat; background-size: cover; padding: 64px 0 150px; position: relative; background-position: bottom;}
.s4 .wrapper{z-index: 1;}
.s4 .content{margin-top: 150px; width: 420px;}
.s4 h4{text-align: center;}
.s4 h6, .text-div h6, .s9 h6, .s10 h6, .s11 h6{font-size: 4rem; margin-bottom: 20px;}
.s4 p, .text-div p{font-size: 2rem; line-height: 25px;}

.tab-btns{gap: 1px;}
.tab-btn{color: #AFBAE5; font-size: 1.8rem; padding: 15px 30px; background-color: #192148; width: 20%; text-align: center; cursor: pointer;}
.tabs{min-height: 350px;}
.tab{padding: 30px 0; display: none; transition: all .5s;}
.tab.active{display: block;}
.options{gap: 20px; margin: 60px 0;}
.s5 h5{font-size: 2.5rem; color: #101640; font-weight: 450; text-transform: uppercase;}
.options .item{background-color: #EFF2F8; border-radius: 10px; padding: 20px 30px; min-width: 250px; max-width: 450px; text-align: center;}
.first{font-size: 1.8rem; color: #a0aaca; margin-bottom: 5px;}
.second{font-size: 2.2rem; color: #04258B; font-weight: 600;}
.request.yellow{background-color: #F3BA19; border: none; text-transform: uppercase; font-size: 1.4rem; padding: 15px 40px; border-radius: 40px; cursor: pointer; font-weight: bold; transition: .3s;}
.request.yellow:hover{box-shadow: 0 4px 2px #869ee7;}
.partners{margin: 30px 0;}

.s6{background: url(../img/s6-bg.png) no-repeat; background-size: cover; padding: 150px 0 100px; position: relative;}
.text-div{max-width: 510px;}

.s7{background: url(../img/s7-bg.png) no-repeat; background-size: cover; padding: 150px 0 100px; position: relative;}
.specific .item{background-color: #fff; text-align: left; max-width: 510px; padding: 30px 60px;}
.specific .second{text-transform: uppercase; font-size: 1.6rem;}
.specific .first{color: #000;}

.s8{background: url(../img/s8-bg.png) no-repeat; background-size: cover; padding: 150px 0 100px; position: relative;}

.s9{padding: 64px 0;}
.s9 .item{width: 30%; text-align: center; flex-shrink: 0; margin-right: 50px;}
.s9 .item .title{font-size: 6rem; color: #1F5281;}
.s9 .item .desc{font-size: 1.8rem; padding: 0 10%; margin-top: 15px;}
.s9 .item svg{width: 75px; height: 75px;}
.s9 .item path{fill: #1F5281;}
.s9 h6, .s10 h6{color: #1F5281;}
.s9 .right svg{width: 30px; height: 30px; transform: rotate(180deg);}
.s9 .row p{font-size: 1.8rem; line-height: 150%; break-inside: avoid;}
.s9 .col{columns: 2;}
.s9 .row.mother{margin-bottom: 50px; padding-bottom: 30px;}
.s9 .right{position: relative;}
.s9 .right:after{position: absolute; content: ''; width: 30%; height: 1px; background: #1F5281; top: 115%;}
.s9 .row.mother:last-child:after{display: none;}
.s9 path, .s11 path{stroke: inherit;}
.s9 .row .row svg{stroke: #000; flex-shrink: 0;}

.s10{padding: 64px 0; background-color: #F5F5F5;}
.s10 h6{text-align: center;}
.blogs{columns: 3; margin-top: 70px;}
.blog{font-size: 2.2rem; margin-bottom: 50px; display: block; break-inside: avoid;}
.blog:after{content: 'Читать далее'; font-size: 17px; margin-top: 10px; break-inside: avoid; display: block;}
.blog:before{content: ''; width: 40px; height: 2px; background-color: #1F5281; margin-bottom: 10px; break-inside: avoid; display: block;}

.s11{padding: 64px 0;}
.s11 form{width: 65%; flex-shrink: 0; margin-right: 30px;}
.s11 h6{margin-bottom: 20px;}
.s11 .subtitle{font-size: 2rem; font-weight: 500;}
.inputs{margin-top: 30px; gap: 40px;}
.get{min-height: 25px; margin-top: 15px;}
.error, .success{color: red; font-weight: 500; font-size: 2rem;}
.success{color: #1F5281; font-size: 4rem;}
.s11 input, .regions-input{padding: 10px 25px; font-size: 1.8rem; border: 1px solid #E5E5E5; border-radius: 8px; width: 250px; flex-shrink: 0;}
.s11 .submit-div{margin-top: 30px; gap: 20px;}
.s11 input[type=submit]{font-size: 2rem; padding: 18px 0;background: linear-gradient(180deg, #2d3cc0 0%, #11916d 100%); cursor: pointer; transition: .3s; border: none;}
.s11 input[type=submit]:hover{box-shadow: 0 0px 9px 3px #a5a5a5;}
.s11 .agree{font-size: 1.6rem; font-weight: 500;}
.s11 .agree a{color: #2D3CC0; text-decoration: underline;}
.s11 .columns{columns: 2;}
.s11 .partner-banks img{margin: 30px 20px 0 0; max-width: 80%;}
.s11 .current svg{width: 30px; height: 30px; transform: rotate(270deg); transition: all .3s; stroke: #000;}
.regions-input{position: relative; padding: 10px 15px; cursor: pointer;}
.regions{position: absolute; top: 130%; background-color: #fff; padding: 10px 0; left: 0; width: 100%; max-height: 40vh; overflow-y: scroll; border-radius: 8px; border: 1px solid #E5E5E5; display: none;}
.regions.show{display: block;}
.regions input[type=radio]{display: none;}
.regions p{padding: 5px 15px; cursor: pointer;}
.regions p:nth-child(even){background-color: #f3f3f3;}
.theme{display: none; font-size: 1.8rem; margin-top: 20px;}

footer{padding: 64px 0; background-color: #1F5281; z-index: 0; position: relative;}
.yan-map, .ggl-map{padding: 5px 8px; border: 1px solid #fff; border-radius: 4px; display: block; transition: .5s; flex-shrink: 0;}
.ggl-map .img-div{width: 89px; height: 17px; background-position: 0px -170px; margin-bottom: 8px;}
.yan-map:hover, .ggl-map:hover{box-shadow: 0 0 10px 0px;}
.rate, .review{font-size: 1.4rem;}
.rate{font-weight: 600; margin: 0 5px;}
.map-btns{gap: 15px;}
footer .phone a{display: block;}
footer .address{font-size: 1.4rem; margin-top: 10px;}
.contacts{text-align: right;}
footer .socials, footer .map-btns, .contacts{width: 30%;}
footer .oferta p{font-size: 1.4rem; line-height: 24px; margin-bottom: 25px;}
.oferta .copyright{margin-bottom: 50px;}
.whatsapp{position: fixed; bottom: 10vh; right: 10vw; z-index: 1; width: 100px;}
.for-anim{position: absolute; border: 1px solid #fff; z-index: 3; width: 100%; height: 100%; border-radius: 16px; transform: scale(1.5); opacity: .5; animation: whatsapp 2s infinite;}

@keyframes whatsapp {
    0%{transform: scale(1);}
    50%, 100%{transform: scale(1.5); opacity: 0;}
}