/*Hero*/
.contact-page .hero{ padding: 250px 0 130px; overflow: hidden; width: 100%; position: relative; }
.contact-page .hero .content{ display: flex; justify-content: space-between; align-items: stretch; height: auto; position: relative; z-index: 10; }

.contact-page .hero .approach-bg{ width: 1500px; height: 1000px; background: url("../img/iso2.svg"); background-size: 1500px 1500px; position: absolute; left: 50%; margin-left: -750px; top: -120px; opacity: .3 !important; }
.contact-page .hero .approach-bg:before{ content: ""; width: 100%; position: absolute; height: 400px; bottom: 0; z-index: 10; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(246,246,246,0.99) 45%,rgba(246,246,246,1) 100%); }

.contact-page .hero .left{ padding-right: 50px; max-width: 600px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-page .hero .left .top{}
.contact-page .hero .left .top h1{ color: var(--dark-blue); font-size: 52px; margin-bottom: 20px; }
.contact-page .hero .left .top .icon-angle{ color: var(--orange); rotate: 90deg; display: inline-block; margin-bottom: 10px; }
.contact-page .hero .left .top p{ line-height: 1.4; font-size: 20px; }
.contact-page .hero .left .bottom{ max-width: 350px;}
.contact-page .hero .left .bottom .box{ display: flex; margin-bottom: 30px; }
.contact-page .hero .left .bottom .box figure{ width: 45px; height: 45px; min-width: 45px; min-height: 45px; background: var(--blue); border-radius: 100%; display: flex; justify-content: center; align-items: center; margin-right: 15px; }
.contact-page .hero .left .bottom .box figure img{ width: 25px; }
.contact-page .hero .left .bottom .box .text{}
.contact-page .hero .left .bottom .box .text h4{ font-weight: 600; color: var(--dark-blue); margin-bottom: 10px; font-size: 19px; }
.contact-page .hero .left .bottom .box .text p{ font-size: 18px; line-height: 1.4; }

.contact-page .hero .left.mobile{ display: none; }

.contact-page .hero .right{ position: relative; width: 520px; min-width: 300px; height: 100%; }
.contact-page .hero .right .form-wrapper{ background: #EBF0F7; padding: 50px 40px; border-radius: 30px; text-align: center; }
.contact-page .hero .right .form-wrapper h2{ color: var(--dark-blue); font-size: 24px; margin-bottom: 40px; font-weight: 600; letter-spacing: -1px; line-height: 1.3; }
.contact-page .hero .right .form-wrapper input{ margin-bottom: 20px; }
.contact-page .hero .right .form-wrapper input[type="submit"]{ width: 100%; background: var(--dark-blue); border: 2px solid var(--dark-blue); color: var(--white); font-weight: 500; font-size: 18px; transition: var(--transition); border-radius: 10px; text-transform: uppercase; margin-top: 20px; cursor: pointer; margin-bottom: 0; }
.contact-page .hero .right .form-wrapper input[type="submit"]:hover{ background: transparent; color: var(--dark-blue); }
.contact-page .hero .right .form-wrapper textarea{ height: 100px; }

.contact-page .hero .right .form-wrapper .hs-error-msg{ font-size: 13px; text-align: left; color: #d0182d; display: block; position: relative; top: -11px; padding-left: 25px; }
.contact-page .hero .right .form-wrapper .hs_message .hs-error-msg{ top: 4px; }
.contact-page .hero .right .form-wrapper .hs_error_rollup{ margin-top: 30px; color: #d0182d; font-weight: 600; font-size: 15px; }

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

    /*Hero*/
    .contact-page .hero .approach-bg{ width: 1300px; height: 1000px; background-size: 1300px 1000px; margin-left: -650px; top: -30px; }
    .contact-page .hero .approach-bg:before{ height: 400px; }

    .contact-page .hero .left { max-width: 500px; }
    .contact-page .hero .left .top h1{ font-size: 42px; }
    .contact-page .hero .left .top p{ font-size: 19px; }
    .contact-page .hero .left .bottom .box .text h4{ font-size: 18px; }
    .contact-page .hero .left .bottom .box .text p{ font-size: 17px; }

}

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

    /*Hero*/
    .contact-page .hero { padding: 120px 0 0; }
    .contact-page .hero .content{ flex-direction: column; padding: 0; }
    .contact-page .hero .approach-bg{ width: 1000px; height: 500px; background-size: 1000px 500px; margin-left: -500px; top: -50px; }
    .contact-page .hero .approach-bg:before{ height: 400px; }
    .contact-page .hero .right{ width: 100%; min-width: 100%; }
    .contact-page .hero .left{ width: 100%; max-width: 100%; padding-right: 0; padding: 0 20px; margin-bottom: 10px; }
    .contact-page .hero .left .top{ margin-bottom: 50px; }
    .contact-page .hero .left .top h1{ font-size: 32px; }
    .contact-page .hero .left .top p{ font-size: 16px; }
    .contact-page .hero .left .bottom .box{ flex-direction: column; }
    .contact-page .hero .left .bottom .box figure{ margin-bottom: 20px; }
    .contact-page .hero .left .bottom .box .text p{ font-size: 16px; }
    .contact-page .hero .right .form-wrapper{ border-radius: 30px; }

    .contact-page .hero .left.mobile{ display: block; margin-top: 40px; }
    .contact-page .hero .left.desktop .bottom{ display: none; }
    
}

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


}