html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:var(--color-black);text-decoration:none}mark{background-color:#ff9;color:var(--color-black);font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style: none;}input:focus,select:focus,textarea:focus{outline: none;}



html{overflow-x: hidden; position: relative;}


:root{
    --black: #092451;
    --blue: #114292;
    --grey: #565656;
}


body{
    font-family: "Inter", sans-serif;
	background: #fff;
    font-size: 16px;
    line-height: 1.2;
	color: var(--black);
	min-width: 320px;
    font-weight: normal;
    position: relative;
    padding: 0;
}

.container{max-width: 1620px; margin: 0 auto; box-sizing: border-box; width: 100%; padding: 0 20px;}



header{padding: 16px 0;}
    header .flex{align-items: center;}
    header nav ul{display: flex; align-items: center; justify-content: center; gap: 60px}
        header nav ul li a{color: var(--grey); position: relative;}
            header nav ul li a:after{background: var(--grey); width: 0; height: 1px; position: absolute; bottom: -2px; left: 0; content: ''; transition: all 0.2s;}
            header nav ul li a:hover:after{width: 100%;}





#promo{position: relative; padding: 8px 0 0; overflow: inherit;}
    #promo .counts{color: #fff; padding: 15px 20px; border-radius: 20px; background: var(--black); position: absolute; top: 10px; right: 30px; font-size: 14px;}
        #promo .counts span{display: block; font-size: 44px; font-weight: 600; color: #F6B413;}
    #promo .container{position: relative;}
    #promo .image img{border-radius: 24px; width: 100%; height: 670px;}
    #promo .data{position: absolute; top: 0; left: 20px; width: calc(100% - 40px); box-sizing: border-box; padding: 85px 40px;}
    #promo .leader{display: flex; align-items: center; justify-content: center; background: #fff url("../img/star.svg") 15px 50% no-repeat; padding: 0 15px 0 47px; color: #000; font-size: 14px; font-weight: 500; height: 42px; border-radius: 100px; margin-bottom: 16px;}
    #promo h1{margin-bottom: 16px; line-height: 120%; font-size: 76px; font-weight: 800; text-transform: uppercase;}
        #promo h1 span{font-size: 86px}
    #promo .text p{margin-bottom: 35px; max-width: 400px; font-size: 20px; font-weight: 600; line-height: 26px;}
    #promo .advantages{max-width: 780px; padding: 40px 0 0;}
        #promo .advantages .item{background: #fff; padding: 15px 42px 35px 15px; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 20px;}
            #promo .advantages .item .icon{margin-bottom: 12px;}
            #promo .advantages .item h3{font-size: 18px; font-weight: 600; margin-bottom: 10px;}
            #promo .advantages .item p{font-size: 14px; color: var(--grey);}





#counts{margin: 65px 0 90px; text-align: center; font-size: 14px; color: var(--grey);}
    #counts .count{color: var(--blue); margin-bottom: 10px; font-weight: 600; font-size: 44px;}
    #counts .grid{border-radius: 24px; border: 1px solid #BFC7D5; padding: 30px 0;}





#services{padding: 0 0 80px;}
.service__item{margin-bottom: 40px; padding: 40px; position: relative; overflow: hidden; border-radius: 24px; background: url("../img/service1bg.webp") 50% 50% no-repeat; background-size: cover;}
    .service__item:last-child{margin: 0}
    .service__item .image{position: absolute; top: 0; height: 100%;}
        .service__item .image img{height: 100%;}
    .service__item.si1,.service__item.si3{padding-left: 650px}
        .service__item.si1 .image,.service__item.si3 .image{left: 0}

    .service__item.si2{padding-right: 650px}
        .service__item.si2 .image{right: 0}
    .service__item.si2{background: url("../img/service2bg.webp") 50% 50% no-repeat; background-size: cover; color: #fff}
    .service__item.si3{background: url("../img/service3bg.webp") 50% 50% no-repeat; background-size: cover;}
    .service__item .title{padding: 0 20px; height: 40px; border-radius: 100px; border: 1px solid var(--blue); color: var(--blue); display: flex; align-items: center; margin-bottom: 20px; font-size: 14px; font-weight: 500;}
        .service__item.si2 .title{color: #fff; border-color: #fff;}
    .service__item .info{max-width: 615px; margin-bottom: 20px;}
        .service__item .info p{font-size: 14px; line-height: 22px;}
    .service__item .service__title{margin-bottom: 15px; font-size: 48px; font-weight: 800; line-height: 120%;}
    .service__item .advantages .item{margin-bottom: 40px; padding: 12px 16px; background: #fff; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 24px;}
        .service__item .advantages .item h3{margin-bottom: 16px; font-weight: 600; color: var(--blue); padding: 0 0 0 35px; background: url("../img/ls.svg") 0 50% no-repeat; display: flex; align-items: center; min-height: 40px;}
        .service__item .advantages .item p{color: var(--grey); line-height: 22px; font-size: 14px;}

    .service__item .advantages__i{margin-bottom: 40px; max-width: 876px}
        .service__item .advantages__i .item{display: flex; align-items: center; justify-content: flex-start; min-height: 70px; box-sizing: border-box; background: rgba(23, 40, 71, 0.2); gap: 10px; font-weight: 600; padding: 0 16px; border: 1px solid #183165; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 24px;}


    .service__item.si3 .info{max-width: 700px}
    .service__item .advantages__l{margin-bottom: 40px; max-width: 600px}
        .service__item .advantages__l .item{padding: 12px 16px; line-height: 22px; font-size: 14px; color: var(--grey); background: #fff; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 24px;}
            .service__item .advantages__l .item h3{font-weight: 600; color: var(--black); margin-bottom: 10px;}





#how_we_work{background: #FBF9F6; padding: 80px 0; text-align: center;}
    #how_we_work .section__title{max-width: 690px; margin: 0 auto 60px;}
    #how_we_work .items{background: url("../img/hww_line.svg") 50% 88px no-repeat;}
    #how_we_work .item{}
        #how_we_work .item .icon{position: relative; display: flex; align-items: center; justify-content: center; width: 166px; height: 166px; background: #FFFFFF; margin: 0 auto 25px; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 83px;}
            #how_we_work .item .icon span{display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; width: 44px; height: 44px; border-radius: 50%; background: #F6B413; position: absolute; top: -22px; left: calc(50% - 22px)}
        #how_we_work .item h3{font-size: 22px; font-weight: 600; margin-bottom: 10px;}
        #how_we_work .item p{font-size: 14px; color: var(--grey); line-height: 22px; margin: 0 auto; max-width: 290px}





#reviews{padding: 80px 0;}
    #reviews .swiper{overflow-x: visible;}
    #reviews .swiper-slide{width: 510px;}
    .review__item{position: relative; overflow: hidden; border-radius: 24px;}
        .review__item img{width: 100%; height: 620px;}
        .review__item a{position: relative;}
            .review__item a:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3) url("../img/play.svg") 50% 50% no-repeat; content: ''; transition: all 0.2s;}
            .review__item:hover a:after{transform: scale(1.3);}





#faq{padding: 0 0 80px; text-align: center;}
    #faq .list__faq{max-width: 970px; margin: 0 auto; text-align: left;}
    #faq .faq__item{transition: all 0.2s; background: #FFFFFF; margin-bottom: 12px; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 24px;}
    #faq h3{display: flex; position: relative; min-height: 74px; box-sizing: border-box; align-items: center; cursor: pointer; justify-content: flex-start; box-sizing: border-box; padding: 3px 100px 3px 40px; line-height: normal; font-size: 20px; font-weight: 600;}
    #faq .answer{padding: 0 40px 25px 40px; color: var(--grey); font-size: 18px; line-height: 26px; display: none;}
    #faq h3:after{width: 34px; height: 34px; transition: all 0.2s; content: ''; position: absolute; top: calc(50% - 17px); right: 25px; background: url("../img/plus.svg") 50% 50% no-repeat;}
    #faq .faq__item.active h3:after{background: #0455E1 url("../img/minus.svg") 50% 50% no-repeat; border-radius: 5px; transform: rotate(45deg);}





#contacts{padding: 80px 0; color: #fff; text-align: center; background: radial-gradient(33.99% 99.2% at 20.13% 24.78%, #0A255F 36.06%, #12213C 100%), #FBF9F6; border-radius: 64px; overflow: hidden;}
    #contacts .container{position: relative; z-index: 3}
    #contacts:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../img/flag.webp") 0 0 no-repeat;}
    #contacts .section__title{margin: 0 auto 40px; max-width: 650px}
        #contacts .section__title .s__text{color: #F6B413; font-size: 16px;}
        #contacts .section__title .s__note{color: #fff; font-size: 18px;}
    #contacts .grid{margin: 0 auto 40px; max-width: 1250px}
    #contacts .item{text-align: left; padding: 16px 16px 16px 78px; background: #0C2250; border: 1px solid #183165; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 24px;}
        #contacts .item.phone{background: #0C2250 url("../img/phone.svg") 16px 50% no-repeat;}
        #contacts .item.email{background: #0C2250 url("../img/email.svg") 16px 50% no-repeat;}
        #contacts .item.whatsapp{background: #0C2250 url("../img/whatsappi.svg") 16px 50% no-repeat;}
        #contacts .item.telegram{background: #0C2250 url("../img/telegram.svg") 16px 50% no-repeat;}
        #contacts .item span{display: block; margin-bottom: 10px; font-weight: 600; color: #9EA7B9}
        #contacts .item a{color: #fff; font-size: 20px; font-weight: 600;}
            #contacts .item a:hover{color: #F6B413}






.section__title{margin: 0 0 40px;}
    .section__title .s__text{font-weight: 500; margin-bottom: 3px; color: var(--blue);}
    .section__title .bt{font-size: 48px; font-weight: 800; line-height: 120%;}
    .section__title .s__note{margin-top: 13px; font-size: 14px; color: var(--grey); line-height: 22px;}



footer{padding: 16px 0;}
    footer .flex{align-items: center;}
    footer nav ul{display: flex; align-items: center; justify-content: center; gap: 60px}
        footer nav ul li a{color: var(--grey); position: relative;}
            footer nav ul li a:after{background: var(--grey); width: 0; height: 1px; position: absolute; bottom: -2px; left: 0; content: ''; transition: all 0.2s;}
            footer nav ul li a:hover:after{width: 100%;}
    footer .copyright{text-align: center; padding: 20px 0 4px; color: #565656; border-top: 1px solid #BFC7D5; margin-top: 20px;}






section{position: relative; z-index: 2; overflow: hidden;}






.flex{display: flex; justify-content: space-between; flex-wrap: wrap;}
    .flex.flex__center{justify-content: center;}
    .flex.flex__start{justify-content: flex-start; gap: 15px;}
    .flex.flex__end{justify-content: flex-end;}




.grid{display: grid; grid-template-columns: repeat(1,1fr); gap: 15px;}
    .grid.grid-2{grid-template-columns: repeat(2,1fr);}
    .grid.grid-3{grid-template-columns: repeat(3,1fr);}
    .grid.grid-4{grid-template-columns: repeat(4,1fr);}
    .grid.grid-5{grid-template-columns: repeat(5,1fr);}
    .grid.grid-6{grid-template-columns: repeat(6,1fr);}
    .grid.grid-7{grid-template-columns: repeat(7,1fr);}



.slider-sw .swiper-button-prev,.slider-sw .swiper-button-next{display: none!important; width: 54px; border-radius: 0%; opacity: 1!important; height: 54px; top: 100%!important; transition: all 0.2s ease-out; margin: -60px 0 0 0; overflow: hidden; box-sizing: border-box; background: #FFFFFF; box-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.03), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 8px;}
.slider-sw .swiper-button-prev{left: calc(50% - 65px)}
.slider-sw .swiper-button-next{right: calc(50% - 65px)}




.slider-sw .swiper-button-prev:hover,.slider-sw .swiper-button-next:hover{background-color: rgba(0, 0, 0, 0.05);}


.slider-sw .swiper-button-prev{transform: rotate(-180deg);}



.slider-sw .swiper-button-disabled{opacity: 0.5!important}
.swiper-button-prev:hover,.swiper-button-next:hover{opacity: 1!important;}


.swiper-button-prev:after,.swiper-button-next:after{display: none;}






section{box-sizing: border-box; position: relative;}







button{background: transparent;}




a,svg,svg path,rect{text-decoration: none; transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;}
	a:hover{transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:focus{outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

svg,svg path,rect{transition: all 0.2s ease-out;}

img{display: block;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 100%; height: auto; transition: all 0.2s ease-out; object-fit: cover;}
div{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}



.btn,.btn:after{font-family: "Inter", sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-align: center; cursor: pointer; padding: 0; border: none; transition: all 0.2s ease-out; box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;}
	.btn:hover{transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}



.btn-blue-tr{height: 56px; border-radius: 20px; border: 1px solid var(--blue); font-weight: 500; font-size: 18px; color: var(--blue); padding: 0 30px; gap: 10px;}
    .btn-blue-tr:hover{background: var(--blue); color: #fff;}
    .btn-blue-tr:hover svg path{fill: #fff;}


.btn i{font-style: normal; position: relative; left: -5px;}


.btn-blue{background: linear-gradient(180deg, #0455E1 0%, #0336BD 100%); border-radius: 20px; overflow: hidden;}
    .btn-blue span{position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; color: #fff; gap: 10px; height: 62px; padding: 0 30px; font-size: 18px; font-weight: 600;}
    .btn-blue:after{position: absolute; top: 0; left: 0; width: 0%; height: 100%; content: ''; background: linear-gradient(180deg, #0336BD 0%, #0455E1 100%); transition: all 0.2s; border-radius: 20px;}
    .btn-blue:hover:after{width: 100%;}





.btn-yellow{background: linear-gradient(180deg, #D2AC4F 0%, #F6B413 100%); border-radius: 20px; overflow: hidden;}
    .btn-yellow span{position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; color: var(--black); gap: 10px; height: 62px; padding: 0 30px; font-size: 18px; font-weight: 600;}
    .btn-yellow:after{position: absolute; top: 0; left: 0; width: 0%; height: 100%; content: ''; background: linear-gradient(180deg, #F6B413 0%, #D2AC4F 100%); transition: all 0.2s; border-radius: 20px;}
    .btn-yellow:hover:after{width: 100%;}





@media screen and (max-width: 1620px){
}


@media screen and (max-width: 1240px){
    .container{max-width: 100%;}


    .btn-blue-tr{font-size: 14px; height: 40px; border-radius: 10px; padding: 0 14px;}


    .service__item{padding: 0!important}
    .service__item .image{position: relative; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 250px; border-radius: 24px; overflow: hidden; margin-bottom: 20px;}
    .service__item .image img{width: 110%; height: 110%;}
    .service__item .text{max-width: 100%; width: 100%; padding: 0 20px 20px; box-sizing: border-box;}


    #how_we_work .grid{background-position: 50% 50px;}
    #how_we_work .item .icon{width: 100px; height: 100px;}
    #how_we_work .item .icon img{width: 30px;}
    #how_we_work .item h3{font-size: 18px;}


    #contacts .grid{grid-template-columns: repeat(1, 1fr);}


    header{padding: 12px 0;}
    header .logo,footer .logo{max-width: 92px}
    header nav,footer nav{display: none;}
}


@media screen and (max-width: 767px){
    #promo .advantages{grid-template-columns: repeat(1, 1fr);}
    #promo .leader{height: 36px; font-size: 12px; margin: 0 auto 16px;}
    #promo .data{padding: 60px 14px;}
    #promo .text{text-align: center;}
    #promo h1,#promo h1 span{font-size: 46px}
    #promo .text p{font-size: 16px; margin-bottom: 20px;}
    #promo .flex .btn{margin: 0 auto;}
    #promo .advantages{gap: 6px;}
    #promo .counts{display: none;}
    #promo .advantages .item{padding: 15px 15px 15px 55px; position: relative;}
    #promo .advantages .item .icon{position: absolute; top: 15px; left: 15px;}
    #promo .image{background: url("../img/hero-bg-m.webp") 50% 0 no-repeat; background-size: cover; border-radius: 24px;}
    #promo .image img{opacity: 0;}


    #counts .grid{grid-template-columns: repeat(1, 1fr);}


    .service__item .service__title{font-size: 22px;}
    .service__item .advantages{grid-template-columns: repeat(1, 1fr); gap: 12px; margin-bottom: 20px;}
    .service__item .advantages .item{margin: 0}
    .service__item .advantages .item p{display: none;}
    .service__item .advantages .item h3{margin: 0}
    .service__item .btn{width: 100%;}


    .advantages__i.grid.grid-2,.advantages__l.grid.grid-2{grid-template-columns: repeat(1, 1fr);}



    .section__title .bt{font-size: 32px;}


    #how_we_work .grid{background: transparent; grid-template-columns: repeat(1, 1fr); gap: 33px}


    #reviews .swiper-slide{width: 280px; margin-bottom: 75px;}
    #reviews .swiper-slide img{height: 400px;}

    .slider-sw .swiper-button-prev,.slider-sw .swiper-button-next{display: flex!important;}
    .slider-sw .swiper-button-prev svg,.slider-sw .swiper-button-next svg{width: 20px;}

    .btn i{display: none;}


    #faq h3{padding: 3px 66px 3px 12px;}
    #faq .answer{padding: 0 12px 15px 12px;}


    #contacts{padding: 40px 0;}
    #contacts:after{background-position: 0 110%;}
}