:root {--bobo-icon-title-size: 36px; --bobo-icon-text-size: 18px; --bobo-icon-text-leading: 1.6; --bobo-icon-text-pt: 23px; --bobo-icon-pd: 90px 0;}
.bobo-icon-columns {padding: clamp(30px, 2.604167vw, 50px) 0; background: #242321;}
.bobo-icon-columns h3 {margin-bottom: 20px; font-size: clamp(24px, 1.88vw, 36px); position: relative; padding-bottom: 10px; color: #fff; text-align: center;}
.bobo-icon-columns h3::after {content: ""; width: 35px; height: 2px; background: var(--color-primary); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.bobo-icon-columns ul {margin-top: 40px; grid-template-columns: repeat(4, 1fr); display: grid; gap: 25px;}
.bobo-icon-columns ul li {cursor: pointer; box-sizing: border-box;}
.bobo-icon-columns ul li .box {padding: 25px 20px;box-sizing: border-box;transition: all 0.5s;-webkit-transition: all 0.5s;border: 1px solid rgba(255, 255, 255, 0.2);display: flex;gap: 15px;align-items: center;}
.bobo-icon-columns ul li img {width: 100%; object-fit: contain; flex: 1; height: 80px;}
.bobo-icon-columns ul li .txt {width: 80%;}
.bobo-icon-columns ul li h5 {color: #fff; font-size: clamp(16px, 0.94vw, 18px);}
.bobo-icon-columns ul li p {color: #fff;margin-top: 5px;}

@media screen and (min-width: 768px) {
.bobo-icon-columns ul li .box:hover { border-color: #c8a96e; background: rgba(200, 169, 110, 0.05); }  
}

@media screen and (max-width: 1500px) {
  
  .bobo-icon-columns ul li img {height: 55px;}
}

@media screen and (max-width: 992px) {
  .bobo-icon-columns ul {margin-top: 20px; grid-template-columns: repeat(2, 1fr); gap: 15px;}
  .bobo-icon-columns ul li .box {padding: 20px;}
  .bobo-icon-columns ul li img {height: 55px;}
}

@media screen and (max-width: 768px) {
  :root {--bobo-icon-title-size: 28px; --bobo-icon-text-size: 14px; --bobo-icon-pd: 30px 0; --bobo-icon-text-leading: 1.3; --bobo-icon-text-pt: 20px;}
  .bobo-icon-columns ul li .box {padding: 15px;}
}

@media screen and (max-width: 576px) {
  .bobo-icon-columns ul {grid-template-columns: 1fr; gap: 10px;}
}