.box{margin:0px -10px;height:auto;overflow:hidden;display:flex;flex-wrap:wrap}
 .box a{width:calc(25% - 30px);margin:15px;float:left;text-align:center;box-shadow:1px 5px 5px 1px #eee;background-color:#fff}
 .box a img{max-width:240px;max-height:240px;margin:30px 0;display: inline-block;}
 .box a h2{font-size:20px;color:#3d3e40;font-weight:800;margin-bottom:30px}
 .box a span{border:1px solid #eee;padding:8px 0;display:inline-block;width:90%;margin-bottom:30px;color:#333}
 .box a:hover{background:#223643}
 .box a:hover h2{color:#fff}
 .box a:hover span{color: #fff}


/*  */

.banner-container .owl-dots{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5%;
}
.banner-container .owl-dots > .owl-dot{
	margin-right: 16px;
}
.banner-container .owl-dots .owl-dot span{
	width: 72px !important;
	height: 8px !important;
	background: #fff !important;
}
.banner-container .owl-dots  .active span{
	
	background: red !important;
}
.banner-container .owl-dots > .owl-dot.owl-dot:hover span{
	background: red !important;
}
/*  */
#bg-img{
  background-image: url("/static/a-(20).jpg");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  padding: 242px 0px 242px 0px;
  position: relative;
}
#bg-img::after{
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: black;
  opacity: 0.1;
}
#bg-img ul{
  padding:20px;
  margin: 0;
  position: relative;
  z-index: 2;
}
#bg-img li{
  list-style-type: none;
  text-align: center;
  color: #fff;
}
/*  */
@media (max-width: 1028px) {

  .grid.grid-cols-2 > div:last-child:nth-child(odd) {
      grid-column: span 2;
  }

}