.devlopment-info-section{  background-color: #bcc5d3; }
.info-block-main{ padding: 67px 0; position: relative;  background-color: #3f4957; width: 100%; overflow: hidden;  }
.info-block-main .line-1{ position: absolute; left: 44px; top: 0; width: 1px; background:  #151b24; height: 100%;   }
.info-block-main .line-2{ position: absolute; right: 44px; top: 0; width: 1px; background:  #151b24; height: 100%;   }
.info-block-main .info-block-listing{ flex-wrap: wrap; display: flex; width: 100%; padding: 0 45px; border-top: #151b24 solid 1px; border-bottom: #151b24 solid 1px; }
.info-box { cursor: pointer; position: relative; display: flex; align-items: stretch; justify-content: center; aspect-ratio: 1/1; width: 25%;}
.info-box::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; content: '';background: rgba(188,197,211,0.35); pointer-events: none; transition: all ease-in-out 300ms; }
.info-box:hover::after { opacity: 1; visibility: visible; }
.info-box.active::after { display: none; }
.info-box .innerbox { width: 100%; display: flex; align-items: center; }
.info-box + .info-box{ border-left:#151b24 solid 1px ; }
.info-box .hover-box{ transition: all 0.3s ease-in-out; opacity: 0; background: #F8FBFF; position: absolute; left: 0; top: 0; z-index: 3;  width: 100%; height: 100%; justify-content: center; display: flex ;align-items: center;  padding: 32px 48px;  }
.info-box .hover-box .hover-box-sub{ width: 100%; display: block; }
.info-box.active .hover-box{ opacity: 1; } 
.info-box .hover-box p{ color: #06080B;}
.info-box .close-info { position: absolute; top: 20px; right: 20px; display: flex; width: 20px; height: 20px; background: url('../images/fliter-close.svg') center center no-repeat; background-size: cover; }

.info-box .icon-box{ position: relative; z-index: 2; padding: 20px; width: 100%; display: block; text-align: center; transition: all ease-in-out 300ms; }
.info-box .icon-box .icon{ min-height: 70px; width: 80px; display: flex ;align-items: center; justify-content: center ; width: auto; height: auto;}
.info-box .icon-box .icon img { max-width: 100%; max-height: 70px; }
.info-box .icon-box h5  { line-height: 1.63; font-size: 16px; font-weight: 500; text-transform: uppercase; padding: 40px 0 0 0; text-align: center; color: #fff; }
 .info-box{ min-height: 377px}	

@media (min-width: 1401px) and (max-width: 1599px) {
 .info-box{ min-height: 377px}	
}
@media (min-width: 1281px) and (max-width: 1400px) {
  .info-box{ min-height: 377px}	
  .info-box .hover-box{ padding: 24px; }	
}
@media (min-width: 992px) and (max-width: 1280px) {
  .info-box{ min-height: 377px}	
  .info-box .hover-box{ padding: 20px; }
  .info-box .hover-box p{ font-size: 14px;}		
}
@media (max-width: 992px) {
	.devlopment-info-section { padding: 0 0 50px; }
.devlopment-info-section .container{ padding: 0; max-width: 100%; width: 100%;  } 
.info-block-main{ padding: 0; border: 0; }
.info-block-main .line-1{ width: 1px; left: 50%;top: 0;  height: 100%;}
.info-block-main .line-2{ width: 100vw; left: 0%;top: 50%;  height: 1px;}
.info-box + .info-box{ border: 0; }
.info-block-main .info-block-listing{ padding: 0; border: 0; position: relative; }
.info-box{ width: 50%; position: static;-webkit-tap-highlight-color: transparent; }
.info-block-listing.active .info-box { pointer-events: none; }
.info-block-listing.active .info-box .icon-box { opacity: 0; visibility: hidden; pointer-events: none; }
.info-box .hover-box { z-index: 5; opacity: 0; visibility: hidden;transition: all ease-in-out 300ms; }
.info-box.active .hover-box { opacity: 0; }
.info-block-listing .info-box.active .innerbox { transform: none !important;will-change: auto !important; }
.info-block-listing.active .info-box.current .hover-box { opacity: 1; visibility: visible;pointer-events: none; }
.info-box .close-info { display: flex; pointer-events: all; }

}
@media (min-width: 768px) and (max-width: 991px) {

}
@media (max-width: 767px) {
  .info-box{ min-height: 0px}
  /* .info-box .hover-box{ display: none;} */
  .info-box .icon-box .icon{ min-height: 52px; }
  .info-box .icon-box .icon img{ max-width: 52px; max-height: 52px; width: auto; height: auto; }
  .info-box .icon-box h5{ font-size: 14px; padding: 20px 0 0 0; }
}