.r {
  font-size: 18px;
  font-weight: 400;
   
}

 
 
.btn span {
  color: #fff;
  font-size: 0;
  /* padding: 10px 30px; */
text-align: left;
display: inline-block;
  /* font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease-in-out;
 */
  /* margin-left: -5px; */
}
 

.btn:hover span {
  font-size: 1.0em;
  
}
 

.btn:hover .span {
  visibility: visible;

}
.btn:hover .fa{
    visibility: hidden;
}
 
.col-md-4 .r, .fa
{
    margin-left: -10%;
}
/* .ico::before {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  content: "\f2c3" !important;
  font-family: Ionicons;
  margin-left: -5px;
} */
 
.mission-section {
  /* display: flex; */
  gap: 33.33px; /* Set the gap between the divs */
  margin: 50px 70px;
}

.mission-box {
  flex: 1; /* Ensures all boxes have the same width */
  text-align: center;
  padding: 20px;
   
  border-radius: 10px; /* Optional rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}
 
.fa {
  font-size: 1.5em; /* Adjust the size of the icons */
 margin-left:-25px;
  transition: all 0.3s ease; /* Add a smooth transition effect */
}

 .mission-box:hover{
    background-color: #198754;
    color: #fff;
 }
 @media (max-width: 768px) {
    .mission-section {
      display: flex;
      flex-direction: column; /* Stacks items one by one */
      gap: 0; /* Removes the gap */
      margin: 20px; /* Adjusts margin for mobile */
    }
  
    .mission-box {
      width: 100%; /* Ensures full width */
      margin-bottom: 20px; /* Adds space between stacked items */
    }
  
    .fa {
      font-size: 1.2em; /* Adjusts icon size */
      margin-left: 0; /* Centers icons */
    }
  }