.services {
  background: var(--light-bg);
  --yellow:#f5bf23;
  --black:#111;
  --white:#fff;
  --light-color:#666;
  --light-bg:#eee;
  --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
  --border:.1rem solid rgba(0,0,0,.3);
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  font-size: 1.5rem;
  overflow-x: hidden;
  display: block;
  font-size: 50%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
padding-bottom: 3rem;
}
.services div{
  display: block;
}
.services h1{
  text-align: center;
  font-size: 2.25rem;
    font-weight: 600;
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.services .box-container {
  display: -ms-grid;
  display: grid;
  /*overflow: hidden;*/
  -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(17.4rem, 1fr));
  -ms-grid-auto-rows: 17.4rem;
  grid-auto-rows: 17.4rem;
  gap: 2rem;
  width:80%;
  margin: auto;
}

.services .box-container .box {
  text-align: center;
  padding: 2rem;
  background: var(--white);
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
  border: var(--border);
}

.services .box-container .box:hover img {
  -webkit-transform: translateY(-1rem);
          transform: translateY(-1rem);
}

.services .box-container .box img {
  height: 4rem;
  margin-bottom: .5rem;
  -webkit-transition: .2s linear;
  transition: .2s linear;
}

.services .box-container .box h3 {
  font-size: 1rem;
  color: var(--black);
  text-transform: capitalize;
  padding: 0.8rem 0;
  display: block;

    margin-block-start: 0rem;
    margin-block-end: 0rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.services .box-container .box p {
  font-size: 0.8rem;
  color: var(--light-color);
  line-height: 2;
}