.hero-container {padding: 90px 0;}
.hero-left {margin-top: 6px;width: 46%;padding-left: 10px; position: relative; z-index: 9;}
.hero-right {width: 54%;margin-right: -25px;position: relative; z-index: 8;}
.hero-outer .hero-title {font-size: 59px;line-height: 64px;font-weight: 300;letter-spacing: -1.6px;margin-bottom: 16px;}
.hero-outer .hero-title + .hero-title { margin-bottom: 30px; }
.hero-outer .hero-title span {padding: 0 7px;margin-left: -10px;position:relative;margin-right: -6px;}
.hero-outer .hero-title span:after{content:''; width: 100%; height: 100%;  border-radius: 6px; position: absolute; left: 0; top: 0; z-index:-1; background: linear-gradient(265deg, rgba(252, 252, 176, 1) 0%, rgba(245, 245, 245, 1) 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 0.5s cubic-bezier(.215, .61, .355, 1) 0.5s;}
.animated .hero-outer .hero-title span:after{ clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);}
.hero-outer h2.hero-title span:after{transition-delay: 1s;}
.hero-outer p { max-width: 460px; margin-bottom: 30px; }
.hero-btn { margin-bottom: 40px; white-space: nowrap; }
.hero-btn .btn { min-width: 204px; }
.hero-logos { width: 454px; margin-bottom: 24px; }
.hero-logos-list{width: 474px;justify-content: space-between;}
.hero-logos-box{margin-bottom: 20px;}
.hero-logos-box{margin-right: 20px; height: 35px;}
.hero-logos-box img{height: 100%; width: auto; object-fit: contain;}
.hero-bottom{color: #666; font-size: 17px;}
.hh-shape{width: 100%;position: relative;z-index: 2;}
.hh-triangle{width: 48%;position: absolute;left: 23%;top: 31%;z-index: 3;}
.home-hero-img{width: 43%;height: 58%;background: var(--black);position: absolute;left: 25.5%;top: 28%;z-index: 1;} 
.home-hero-img img{width: 100%; height: 100%; object-fit: cover;} 
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) { 
  
}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
.hero-container{padding: 40px 0 58px;}
.hero-left { width: 46%;  margin: 0; }
.hero-outer .hero-title { font-size: 40px; line-height: 44px; }
.hero-right { margin-top: -20px; margin-right: 0; }
.hero-logos { margin-bottom: 16px; }

}

/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){
    .hero-container { padding-top: 16px; }
    .hero-right { width: 100%; margin: 0; padding: 0 6px; }
    .hero-left { width: 100%; margin-top: 24px; }
    .hero-outer .hero-title { font-size: 37px; line-height: 40px; margin-bottom: 13px; padding-right: 9%; }
    .hero-outer .hero-title + .hero-title { margin-bottom: 27px; }
    .hero-outer p { margin-bottom: 24px; }
    .hero-btn { max-width: 320px; margin: 0 auto 55px; }
    .hero-btn .btn { display: block; }
    .hero-btn .btn + .btn { margin-left: 0; margin-top: 15px; }
    .hero-logos-list{width: 100%; max-width: 474px;}
    .hero-logos-box{height: 29px; margin-right: 15px;}
    .hero-bottom{font-size: 18px;}
    
}

/* ======================================================
 ! Extra small devices (portrait phones, less than 576px)
 ====================================================== */
@media (max-width: 575.98px){

}

/* ======================================================
! Extra small devices (portrait phones, less than 360px)
====================================================== */
@media (max-width:359.98px) {
    .hero-right { padding: 0; }
    .hero-outer .hero-title { font-size: 32px; line-height: 38px; padding-right: 0; }
 
}