/* === NORMALIZE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, #app-agc{
    width: 100vw;
    height: 100%;
    /* scroll-behavior: smooth; */
    /* -webkit-overflow-scrolling: touch; */
    
}

html{
    width: 100vw;
    overflow-x: hidden;
}

ol, ul, li{
    list-style: none;
}

h1, h2, h3, h4, h5, h6{
   margin: 0;
}

a{
    text-decoration: none;
    color: #000000;
}

body{
    background: #FFFF;
    font: 600 16px 'Poppins', 'sans-serif';
    color: #000000;
    overflow-x: hidden;
}

.no-scroll{
    overflow: hidden !important;
}

.container{
    max-width: 1146px;
    margin: 0 auto;
}



/* ================== SHARED ================= */

/* >>> Buttons >>>*/
.btn-primary{
    width: 176px;
    color: #ffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: #2423CD;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 7px 3px 18px RGBA(36,35,205, 0.61);
    transition: opacity .3s linear;
    cursor: pointer;
}

.btn-primary:hover{
    opacity: .8;
}

/* >>> Banner >>>*/
.banner-wrapper{
    position: relative;
    margin-left: 80px;
}

.banner-wrapper .banner {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

.banner-wrapper .banner-bg{
    z-index: 0;
    top: -35px;
    left: 18px;
}

/* >>>> Sections >>>> */

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

.section-content{
    max-width: 570px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section-content .suptitle{
    margin-bottom: 10px;
    color: #90909B;
    font-weight: 600;
}

.section-content .title{
    font-size: 36px;
    line-height: 1.3;
}

.section-content .description{
    margin: 30px 0 45px;
}


/* === HEADER === */
.header-nav{
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
}

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

.header-nav__items li{
    margin-right: 20px !important;
}

.header-nav__items a:hover{
    opacity: .8;
}

.menu-logo{
    display: none;
    right: 50px;
    cursor: pointer;
}

.menu-logo div{
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}

.header-main{
    margin-top: 160px;
    display: flex;
    justify-content: flex-start;
}

.header-content{
    width: 460px;
    min-width: 460px;
}

.header-content .title{
    font-size: 50px;
    font-weight: 700;
}
.header-content .subtitle{
    font-size: 18px;
    font-weight: 500;
    margin-top: 30px;
}

.header-contact{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 66px;
}

.header-contact .btn-primary{
    width: 176px;
}

.header-contact .call-us {
    width: 235px;
}

.header-contact .call-us .number{
    color: #4AC186;
}


/* === WHY US === */
.why-us{
    margin-top: 380px;
}

.why-us-header{
    width: max-content;
    height: 110px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.why-us-header .title{
    margin-top: 5px;
    font-size: 38px;
}

.why-us-header .suptitle{
    font-size: 18px;
    color: #90909B;
    font-weight: 600;
}

.why-us-header .bg-title{
    position: absolute;
    left: 50%;
    top: -30%;
    transform: translateX(-50%);
    font-size: 80px;
    color: #DFFAFC;
    z-index: -1;
}

.why-us-cards {
    max-width: 1257px;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
}

.why-us-cards .card{
    width: 295px;
    height: 380px;
    padding: 50px 20px 0;
    box-shadow: 0 3px 22px rgba(0, 0, 0, 0.11);
    text-align: center;
}

.card .icon-hover{
    display: none;
}

.card:hover{
    background: linear-gradient(to bottom, #2423Cd -10%, #49C086 100%);
    color: #fff;
}

.card:hover .icon{
   display: none;
}

.card:hover .icon-hover{
    display: inline;
 }

.card .title{
    font-size: 20px;
    margin-top: 23px;
}

.card .description{
    margin-top: 15px;
}



/* ===== ABOUT US =====*/

.about-us{
    max-width: 1257px;
    margin: 300px auto 0;
}

.about-us .banner-wrapper{
    margin-left: -35%;
}

.about-us .banner-wrapper .banner{
    top: -50%;
}

.about-us .banner-wrapper .banner-bg{
    top: -57%;
    transform: scale(-1.03, -1.03 );
}



/* ===== WORK PROCESS ===== */

.work-process{
    max-width: 1257px;
    margin: 425px auto 0;
    justify-content: flex-start;
}

.work-process .banner-wrapper .banner{
    top: -40%;
}

.work-process .banner-wrapper .banner-bg{
    top: -48%;
}


/* ===== OUR EXPERIANCE ===== */

.our-experiance{
    max-width: 1168px;
    margin: 225px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.our-experiance .section-content{
    height: 380px;
}

.counters{
    width: 515px;
    display: flex;
    justify-content: space-between;
}

.card-counter{
    width: 240px;
    height: 240px;
    box-shadow: 0 3px 22px rgba(0, 0, 0, 0.11);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 35px;
    line-height: 1.3;
}

.card-counter .title{
    font-size: 55px;
    font-weight: 600;
    color: #233653;
}

.card-counter .subtitle{
    font-size: 18px;
    font-weight: 500;
    color: #B0B7C1;
}

.counters-column:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-counter.selected{
    background: linear-gradient(to bottom, #2423Cd -10%, #49C086 100%);
}

.card-counter.selected > *{
    color: #fff;
} 


/* ==== CONTACTS ==== */

.contacts {
    max-width: 1168px;
    margin: 150px auto 0;
    display: flex;
    justify-content: space-between;
}

.contact-info{
    width: 50%;
}

#map{
    width: 35%;
    height: 600px;
}

.contact-info .title{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 35px;
}

.contact-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-form input, .contact-form textarea{
    height: 50px;
    border: 1px solid #707070;
    border-radius: 3px;
    padding: 0 12px;
    font-weight: 600;
}

#name, #email{
    width: 47%;
}

#subject, #textarea{
    margin-top: 20px;
    width: 100%;
}

#textarea{
    height: 130px;
    padding-top: 10px;
}

#submit{
    width: 175px;
    height: 55px;
    margin-top: 20px;
    color: #4AC186;
    background: #D7F9E9;
    border: none;
    outline: none;
    border-radius: 3px;
    transition: .2s linear;
    pointer-events: none;
    filter: brightness(0.8);
}

.contact-find-us{
    margin-top: 45px;
}

.contact-find-us .title{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-creds{
    margin-top: 20px;
    color: #90909B;
    font-weight: 700;   
}

.contact-creds a{
    color: #90909B;
}


/* ==== FOOTER ==== */
.footer{
    max-width: 470px;
    margin: 100px auto 0;
    padding-bottom: 40px;
    font-weight: 500;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.footer-description{
    margin-top: 25px;
}

.footer-title{
    margin-top: 30px;
    font-weight: 700;
    font-size: 20px;
}

.footer-social{
    width: 230px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-social a{
    display: block;
    height: 17px;
    width: 17px;
    color: #233653;
    fill: #233653;
    background-size: 17px 17px;
}

.facebook{
    background: url('../static/icons/social/facebook.svg');
}

.twitter{
    background: url('../static/icons/social/twitter.svg');
}

.linkedin{
    background: url('../static/icons/social/linkedin.svg');
}

.pinterest{
    background: url('../static/icons/social/pinterest.svg');
}

.google-plus{
    background: url('../static/icons/social/google-plus.svg');
}

/* === ANIMATIONS === */
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
    opacity: 0;
}