.donation-stream {
  display: flex;
  overflow: hidden;
  position: relative;
  padding: calc(1em * var(--s)) 0;
  max-width:100%;
}
.donation-stream__track {
  display: flex;
  gap: calc(1em * var(--s));
  -webkit-animation: donation-ticker 10s linear infinite;
          animation: donation-ticker 10s linear infinite;
  position: relative;
}
.donation-stream__track .donation-stream__track {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: calc(1em * var(--s));
  -webkit-animation: none;
          animation: none;
}
@-webkit-keyframes donation-ticker {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes donation-ticker {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.donation-stream__item {
  display: flex;
  align-items: center;
  gap: calc(.1em * var(--s));
  font-size: 70%;
}
.donation-stream__item img{
  height:300px;
  min-width:fit-content;
}
.donation-stream__itemj:before {
  content: "";
  width: 2.25em;
  height: 2.25em;
  background: hsla(var(--c-h) var(--c-s) 80%/1);
  transition: border-radius 0.25s;
  border-radius: max(0.25em, calc(50% * var(--b-r)));
}
.donation-stream__item:after {
  content: "";
  width: 1ch;
  height: 1em;
  border-radius: 0.333em;
  background: currentcolor;
  opacity: 0.15;
}





.blog-slider {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 25px;
  height:auto;
  
  transition: all 0.3s;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
}
@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
  }
}
.blog-slider__item {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .blog-slider__item {
    flex-direction: column;
  }
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
}
.blog-slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
  border-radius: 20px;
  transform: translateX(-80px);
  overflow: hidden;
}
.blog-slider__img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  border-radius: 20px;
  opacity: 0.8;
}
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .blog-slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__img {
    width: 95%;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider__img {
    height: 270px;
  }
}
.blog-slider__content {
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__content {
    padding: 0;
  }
}
.blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}
.blog-slider__code {
  color: #7b7992;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}
.blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.blog-slider__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}
.blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
  .blog-slider__button {
    width: 100%;
  }
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
}
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fd3838;
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}



.admin-prof p{
    color: var(--text-color);
  }
  
  .admin-prof{
    display: grid;
    width: 100%;
    grid-template-columns: 60% 40%;
    justify-content:space-between;
    borderj: 1px solid lightblue;
    border-radiusj: 10px;
    padding: 10px;
    margin: auto;
    backgroundj: rgb(28, 73, 112);
    animation: flyintoright .4s backwards;
        box-shadowh: rgba(0, 0, 0, .1) 0 1px 0;
        displayk: inline-block;
        position: relative;
        transition: all .2s ease-in-out;
        transformj: scale(1.03);
        box-shadowj: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
  }     
  .admin-prof:hover {
        box-shadown: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, 0.19);
        transform: scale(1.001);
        }
  .admin-left{
    width: 100%;
    paddinhg: 10px;
  } 
  .admin-left img{
    width: 100%;
    paddingh: 10px;
    height: auto;
  }
  .admin-right{
    animation:flyintoright .4s backwards;
    box-shadow: rgba(0, 0, 0, .1) 12px 10px 12px 10px;
    displayk: inline-block;
    position: relative;
    transition: all .2s ease-in-out;
    transform: scale(1.01);
    transform-origin: center;
    padding: 10px;
    border-radius: 10px;
    color: rgb(2, 134, 249);
  }
  .admin-right h3{
    display: flex;
    align-items: center;
  }
  .our{
    color: var(--text-color);
  }
  .adm-click {
    text-align: center;
   }
   .adm-click li{
     
     width: 100%;
     margin: auto;
     padding: 8px 0;
     border-radius: 18px;
     margin: 1rem 0;
     font-size: 16px;
     font-weight: 700;
   }
   .chat{
     background-color: rgb(0, 183, 255) ;
   }
   .ins{
     background-color:rgb(28, 73, 112) ;
   }

   .just{
    width:100%;
    text-align: center;
    background-color: var(--box1-color);
    border-radius: 10px;
    padding: 10px;
  
   }
   .meet-theme{
    max-width: 95%;
    overflow-x: auto;
    display:flex;
    gap: 10px;
    margin: auto;
   }
   .de-tc{
    max-width: 95%;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    margin: auto;
   } 
   .de-tc li{
    height: 60px;
    width: 60px;
    border-radius: 50%;
  }
   .de-tc img{
     height: 60px;
     width: 60px;
     border-radius: 50%;
   }
  .eed span{
    font-size: 22px;
  }
  
  .ftn{
  
  width: 60%;
  background-color:var(--box1-color);
  border-radius: 10px;
  padding: 10px;
  }
  .sd{
  color: #6F7B7E;
  font-size: 13px;
  font-weight: 400;
  }
  .dd{
  color:var(--dd-color);
  font-size: 20px;
  font-weight: 600;
  padding: 0;
  }
  .c23{
  padding:0;
  color: var(--dd-color);
  }
  
  
  .join-page{
    displayk: grid; 
    grid-template-columns:55% 40%; 
    justify-content: space-around; 
    margin-top: 8rem;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .jusgt{
    text-align: center;
    background-color: var(--box1-color);
    border-radius: 10px;
    padding: 10px;
  
   }
  
   .jusgt .xam{
    padding: 0px;
    color: #01a1fe;
    font-size: 16px;
    margin-top: 16px;
  }
  .jusgt .start {
    margin-top: 16px;
  }
  .jusgt .start a{
    padding: 4px 10px;
    color:black;
    font-size: 16px;
    border-radius: 30px;
    margin: 20px 0;
    background-color:rgb(228, 228, 0);
  }
  .jusgt #btnout {
    margin-top: 16px;
  }
  .jusgt #btnout a{
    padding: 4px 10px;
    color:aliceblue;
    font-size: 16px;
    border-radius: 30px;
    margin: 20px 0;
    background-color:red;
  }
  .inite{
  
  background-color:  var(--box1-color);
  border-radius: 10px;
  padding: 10px;
  }
  .inite li h4{
    padding:10px ;
    border-radius: 30px;
    width: 94%;
    background-color: var(--primary-color);
    cursor: pointer;
  
  }
  .note-me h4 {
    padding: 2px;
    display: flex;
    align-items: center;
  }
  .note-me h4 svg{
    padding: 2px;
    background-color: red;
    border-radius: 2px;
  }
  .me-pic{
    displany: grid;
    grid-template-columnjs: 50% 50%;
    marginj:auto;
    width: 100%;
    max-width: 600px;
  
  }
  
  .me-info {
    width: 85%;
    paddingm:10px 0 ;
    margin: auto;
  }
  .me-info li{
    widthk: 100%;
    text-align: center;
    padding:10px 0 ;
    margin: auto;
  }
  .me-info li input{
    width: 94%;
    padding: 10px ;
  
  }
  .me-info li input:focus{
    border: none;
  
  }
  .ghk{
    background-color: #01a1fe;
    width: 100%;
  }
  



   @media  (max-width:742px) {
    .admin-prof{
        display: table;
        
      }
    }

 #about{
  margin:6rem 1.5rem;
  align-items: center;
  max-width: 100%;
  justify-content: center;
  
  
 } 
 #about section{
  margin: auto;
  justify-content: center;
  max-width: 768px;
  
  display: flex;
 } 
 .box-info{
  text-align: center;
  padding: 20px;
 } 
 .about-box{
    animation:flyintoright .4s backwards;
    box-shadow: rgba(0, 0, 0, .1) 12px 10px 12px 10px;
    display: inline-block;
    position: relative;
    transition: all .2s ease-in-out;
    transform: scale(1.01);
    transform-origin: center;
    padding: 10px;
    border-radius: 10px;
    color: rgb(15, 50, 80);
 }
.box-img img{
width: 100%;
height: auto;
border-radius: 10px;
}

.leader-box{
  text-align: start;
  width: 100%;
}
.leader{
  text-align: start;
  animation:flyintoright .4s backwards;
    box-shadow:#f7f8f9 0px 0px 5px 5px;
    display: inline-block;
    position: relative;
    transition: all .2s ease-in-out;
    transform: scale(1.01);
    transform-origin: center;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    color: rgb(15, 50, 80);
    margin-bottom: 20px;
}
.img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.leader-info h2{
  margin: 0;
}
.leader-info p{
  margin: 0;
  margin-bottom: 10px;
}
.linkin{
  color: #01a1fe;
  display: flex;
  align-items: center;
  gap: 10px;
  fill:#01a1fe ;

}
.about-bo{
  margin: auto;
  justify-content: center;
  max-width:540px;
  
  display: flex;
}
.blog-box{
  display: flex;
  gap: 20px;
  overflow-x:auto !important;
  max-width:100%;
}
.blog{
  max-width:400px;
  width: 100%;
  text-align: start;
  animation:flyintoright .4s backwards;
    box-shadow:#f7f8f9 0px 0px 5px 5px;
    display: inline-block;
    position: relative;
    transition: all .2s ease-in-out;
    transform: scale(1.01);
    transform-origin: center;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    color: rgb(15, 50, 80);
    margin-bottom: 20px;
}
.svg{
  justify-content: space-between;
  gap: 20px;
}
.svg a svg{
  fill: aliceblue;
  
}