.hero_area.active {background-color: #f5f5f5;}
.hero_area {  width:100%; position:relative; }
.hero_top { width:100%; position:relative; padding:130px 0 180px; display:inline-block; vertical-align:top; }
.hero_top::before no-repeat center / contain;content: ""; display: block; height: 548px; position: absolute; right: -110px; top: -20px; width: 530px; z-index: 1; filter: drop-shadow(31px 46px 40px rgba(0, 161, 113,0.4)); }
.hero_top::after { content: "";position: absolute;width: 240px;height: 105px;right: 102px;top: 26px;filter: blur(24px);z-index: 1;background-color: rgb(0 195 137 / 90%); }
.hero_top .hero_cover { width:100%; color:#fff; transition:all 1s ease; opacity:0; transform: translate3d(0, 50%, 0); }
.active .hero_top .hero_cover { opacity:1; transform:translate3d(0, 0, 0);position: relative;z-index: 4; }

.hero_top h5 { color:#fff; font-size:16px; line-height:24px; font-weight:900; font-family: Mont, sans-serif;  text-transform:uppercase;} 
.hero_top h1 { color:#fff; margin:40px 0; }
.hero_top .hero_btns { width:100%; display:inline-block; vertical-align:top; }
.hero_top .hero_btns .button { width:auto; display:inline-block; margin-right:20px; }
.hero_top .hero_btns .button:last-child { margin-right:0; }
.hero_top .btn { min-width:128px; }
.hero_main {  display:flex; flex-wrap:wrap; margin:-140px -10px 0; }
.hero_main .hero_box { width:50%; padding:0 10px;  transition:all 1.5s ease; opacity:0; }
.hero_main .hero_boxin { width:100%; padding:20px; position:relative; display:flex; flex-wrap:wrap; align-items:center; min-height:650px; justify-content: center; text-align:center; transition:all .4s ease-in-out; }
.hero_main .hero_boxin h3 { color:#fff; }  
.hero_main .hero_boxin:before { position:absolute; content:""; left:0; top:0; width:100%; height:100%; background: #171717; opacity: 0.5; transition:all .4s ease-in-out; }
.hero_main .hero_wrap { position:relative; }

.hero_main .hero_boxin:hover:before { opacity: 1; background: rgba(52, 0, 158, 0.7); }
.hero_main .hero_boxin a.btn.btn-purple:hover { background: transparent; border-color: #fff !important; }
.hero_main .hero_boxin a.btn.btn-purple { border: 2px solid transparent !important; transition: all .4s ease-in-out; }

.hero_main .hero_box:first-child { transform:translate3d(-50%, 0, 0); }
.hero_main .hero_box:last-child { transform:translate3d(50%, 0, 0); }

.active .hero_main .hero_box:first-child { opacity:1; transform:translate3d(0, 0, 0); }
.active .hero_main .hero_box:last-child { opacity:1; transform:translate3d(0, 0, 0); }



@media(max-width:1400px){ 

    .hero_top h1 { font-size: 58px; line-height: 70px; }
    
}

@media(max-width:1200px){ 

    .hero_top h1 { margin: 20px 0; font-size: 50px; line-height: 60px; }
    .hero_main .hero_boxin { min-height:550px; }
    .hero_top:before { height: 478px;width: 450px; }
}


@media(max-width:991px){ 
    
    .hero_top h1 { font-size: 36px; line-height: 50px; }
    .hero_main .hero_boxin { min-height:450px; }
    .hero_top:before { height: 368px;width: 350px;right: -90px; }
    .hero_top:after { right: 38px;top: 11px;filter: blur(20px); }    

}


@media(max-width:767px){ 

    .hero_top .hero_btns { text-align:center; }
    .hero_top .hero_btns .button { margin:5px; }
    .hero_top { text-align:center; padding:100px 0 180px; }
    .hero_top h1 { font-size: 26px; line-height: 38px; } 
    .hero_main .hero_box { width:100%; padding:0 0 40px; }
    .hero_main .hero_boxin { min-height:400px; }
    .hero_main {  margin:-140px 0 0; }  
    .hero_top:before { height: 268px;right: -70px;width: 250px; }
    .hero_top:after { width: 110px;height: 50px;right: 29px;filter: blur(10px); }
}