.iit-left{width: 272px;}
.iit-right{width: calc(100% - 272px);padding: 0 21% 0 55px;}
.iit-right h4{font-size: 26px; line-height: 1.2; margin-bottom: 20px; font-family: var(--primary-font);}
.hexagon-box{width: 100%;position: relative;overflow: hidden;}
.hex-image-frame{width: 100%; z-index: 2; position: relative;}
.hex-image-main{width: 100%;z-index: 1;position: absolute;left: 0;top: 0;height: calc(100% + 50px);object-fit: cover;}
.triangle-group{width: 135px;position: relative;}
.tri-arrow-1{width: 100%; position: relative;}
.tri-arrow-2{position: absolute;left: 8%;top:0;width: 84%;}
.tri-arrow-3{position: absolute;left: 35%;top: -12%;width: 31%;}
.iit-content .triangle-group{position: absolute;top: 50%;transform: translateY(-50%);right: 12px;margin-top: 16px;}
/* .hexagon-box:before{content: ''; width: 100%; height: 100%; border: solid 2px #fff; position: absolute; left: 0; top: 0; z-index: 9;} */
.hexagon-box{ width: 100%; padding-bottom: 89%; -webkit-mask-image: url(../../include/images/hex-shape.svg); mask-image: url(../../include/images/hex-shape.svg); -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right; mask-position: right;}
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {

}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
    .iit-content{padding-left: 20px;}
    .iit-left{width: 205px;}
    .iit-right{width: calc(100% - 205px);padding: 0 25% 0 41px;}
    .triangle-group{width: 115px;}
    .iit-content .triangle-group{right: 55px;}

}

/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){
    .iit-content{ flex-flow: column;align-items: flex-start !important; padding: 0;}
    .iit-right{width: 100%; padding: 0;}
    .iit-left{margin-bottom: 45px;margin-left: 10px;width: 235px;}
    .iit-content .triangle-group{right: 30px;top: 34px;transform: none;}
    .triangle-group{width: 91px; z-index: 9;}

}

/* ======================================================
 ! 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) {
    .iit-content .triangle-group{right: 10px;}
    .iit-left{margin-left: 0;}
}