/* second section css starts here */
.tools-section {
    text-align:center;
    padding: 40px 0 50px 0;
 }
.tools-section h2{
    color: var(--text-secondary, #35393F);
    text-align: center;
    font-family: var(--font-family-family, Sora);
    font-size: var(--body-lg-size, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--body-lg-line-height, 32px);
    margin-top: 0;
    margin-bottom: 24px;
}
.tools-container {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  position: relative;
  --icon-row-height: 96px; /* total height reserved for icons (tweak this) */
}

/* top area reserved for icon so all icons sit on one row */
.tool-top {
   height: var(--icon-row-height);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2; /* above dashed line */
   margin-bottom: 16px;
   height: auto;
}

/* your icon styling */
.tool-icon {
    width: 48px;
    height: 48px;
    display: block;
    padding-bottom: 16px;
    border-bottom: 2px solid #AFF4FA;
}

/* dashed line that runs across the whole container */
.tools-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* place the dashed line relative to the icon row height */
  /*top: calc(var(--icon-row-height) - 16.5px);*/
  top: calc(var(--icon-row-height) - 49px); /* tweak -12px to nudge line up/down */
  border-top: 1px dashed #e2e8f0;
  z-index: 1; /* below icons but above background */
}

/* box content */
.tool-box {
  /*padding: 0px 16px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  z-index: 2;
}

.tool-box p {
  margin: 0;
  text-align: center;
  color: #35393F;
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: 1024px) {
    .tools-section h2{
        margin-bottom: 0px;
    }
    .tools-section {
        padding: 40px 0 32px 0;
    }
    .maintain_oversight {
        padding-top: 32px;
        padding-bottom: 64px;
    }
}


@media (max-width: 767px) {
   
    .tools-section {
        padding: 40px 0 0px 0;
        margin-left: -10px;
        margin-right: -10px;
    }
    .tools-section h2 {
        font-size: var(--body-lg-size, 16px);
        line-height: var(--body-lg-line-height, 24px);
        margin-bottom: 20px;
    }
    .tools-container {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(5, 33.5%);
        overflow-x: auto;
         scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
    }
}
    /*.maintain_oversight h2 {*/
    /*    font-size: var(--heading-h2-size, 30px);*/
    /*    line-height: var(--heading-h2-line-height, 36px);*/
    /*}*/
/*}*/
/* second section css ends here */