.sc-outer{width: 100%; max-width: 980px; margin: 0 auto;}
.sc-left{width: 428px; position: relative; z-index: 9; margin-top: 5%;}
.sc-right{width: calc(100% - 520px);position: relative;}
.sc-inner{padding: 40px 0 30px 80px;position: relative;min-height: 470px;}
.sc-inner-content h3{color: var(--yellow);font-size: 40px;line-height: 1.2;margin-bottom: 26px;}
.yellow-bg .sc-inner-content h3, .grey-bg .sc-inner-content h3, .white-bg .sc-inner-content h3{color: var(--black);}
.sc-slider-box{margin-bottom: 40px;}
.hc-shape-left{position: absolute;left: -282px;top: 0;height: 100%;z-index: -1;width: 300px;}
.hc-shape-right{position: absolute;right: -168px;top: 0;height: 100%;z-index: -1;width: 300px;}
.hc-shape-left svg{width: auto;height: 100%; float: left;}
.hc-shape-right svg{width: auto;height: 100%; float: right;}
.white-bg .hc-shape-left svg, .white-bg .hc-shape-right svg{fill: var(--white);}
.grey-bg .hc-shape-left svg, .grey-bg .hc-shape-right svg{fill: var(--grey);}
.yellow-bg .hc-shape-left svg, .yellow-bg .hc-shape-right svg{fill: var(--yellow);}
.purple-bg .hc-shape-left svg, .purple-bg .hc-shape-right svg{fill: var(--purple);}
.dark-purple-bg .hc-shape-left svg, .dark-purple-bg .hc-shape-right svg{fill: var(--dark-purple);}
.purple-navy-bg .hc-shape-left svg, .purple-navy-bg .hc-shape-right svg{fill: var(--purple-navy);}
.black-bg .hc-shape-left svg, .black-bg .hc-shape-right svg{fill: var(--black);}
.green-bg .hc-shape-left svg, .green-bg .hc-shape-right svg{fill: var(--green);}
.sc-img-container{width: 100%;padding-bottom: 87%;}
.sc-img-box{position: relative;}
.sc-img-inner{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-mask-image: url(../../include/images/hex-shape.svg); mask-image: url(../../include/images/hex-shape.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;}
.sc-hex-bg{position: absolute;left: -8px;top: -8px;width: calc(100% + 16px);height: calc(100% + 16px);z-index: -1;max-width: none;}
.sc-img-container{position: relative; z-index: 9;}
.sc-img-content{position: absolute; left: 0; top: 0; width: 100%;}
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
    .sc-outer{width: 780px; max-width: 94%; margin-right: 6%; margin-left: 0;}
    .sc-left{width: 240px; margin-top: 5%;}
    .sc-right{width: calc(100% - 330px);}
    .sc-inner{min-height: 295px; padding-left: 40px;} 
    .sc-slider-box{margin-bottom: 25px;}
    .hc-shape-left{left: -195px;}
    .hc-shape-right{right: -130px;}

}

 

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
   
   
 }

/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){
    .sc-outer{flex-flow: column;margin: 0; max-width: 100%;}
    .sc-left{width: 100%; max-width: 330px; margin-bottom: -24px; margin-top:0%; transform: none !important;}
    .sc-right{width: 100%; padding: 0 10px;}
    .sc-inner-content h3{font-size: 35px; margin-bottom: 20px;}
    .sc-inner{padding: 60px 0 50px;}
    .sc-inner .slider-arrow-group{width: 82px; margin: 0 auto;}
    .hc-shape-left{left: -77px;}
    .hc-shape-right{right: -77px;}
    .hc-shape-left svg, .hc-shape-right svg{width: 200px;}
    
}

/* ======================================================
 ! 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) {
}