body {
    font-family: 'Cairo', sans-serif;
  }
  .actives {
    background-color: #ae7cff;
    transform: scale(0.9);
  }
  #navbarContent ul li:hover {
    background-color: #ae7cff;
    padding: 5px;
    margin-right: 5px;
    border-radius: 10px;
  }
  .btn-donate {
    background-color: #ae7cff;
    color: rgb(0, 0, 0);
    transition: background-color 0.3s;
  }
  .btn-donate:hover {
    background-color: #8539ff;
    color: white;
  }
  .navbar-brand {
    font-weight: bold;
  }
  .nav-link:hover {
    color: #000000 ;
    
  }
  .dropdown-menu li:hover {
    background-color: #ae7cff !important;
  }
  .dropdown-menu li a:hover {
    background-color: #ae7cff !important;
  }
  /* From Uiverse.io by Madflows */ 
.button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
}
.button a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 3rem;
  z-index: 2;
  position: relative;
  transition: color 0.475s;
}
.button:hover::before {
  transform: scaleX(1);
}
.button-content {
  position: relative;
  z-index: 1;
}
.button::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: all 0.475s;
}
.btn-lage {
  margin-left: 30px;
  margin-right: 30px;
}
/* hero */
.hero-section {
  position: relative;
  background-image: url(../img/works/work1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;

}
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #1b1b2fbb;
  color: #fff;


}
/* What_do_we_do */
.What_do_we_do {
  background-color: #FFAD42;
  padding: 50px 0;
}
.What_do_we_do .card {
  background-color: #f8f9fa;
  border: none;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;

}
.What_do_we_do img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}
/* programs-section */
.programs-section {
  /* background-color:#FFE5B4	; */
  background-color:#FFD28A;
  padding: 50px 0;
}
.programs-section .card {
  background-color: #f8f9fa;
  border: none;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;

}
.programs-section img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}
/* contact-us-section */
.contact-us-section {
  background-color: #FFAD42;
  padding: 50px 0;
}
.contact_info h5 {
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
}
.contact_info p {
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
}
.contact_info ul li {
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
}
/**/
.contact_info {
  background-color: #f8f9fa;
  border: none;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
/* footer */
footer {
  background-color:#F08A24;
  padding: 20px 0;
  text-align: center;
}
footer ul li a {
  text-decoration: none;
  color: rgb(0, 95, 219);
  font-weight: bold;
  margin-bottom: 10px;
}
footer ul li i {
  color: rgb(0, 95, 219);
  font-size: 14px;
  padding: 10px;
  background-color:rgb(141, 198, 255);
  border-radius: 5px;
  margin-right: 10px;
}
#footer_text {
  background-color: #00000000 !important;
  font-weight: bold;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .actives {
    margin-top: 10px;
    transform: scale(0.9);
  }

}