@import url('https://fonts.cdnfonts.com/css/jano-sans-pro?styles=84948,84938,84946');

.timeline {
    position: relative;
    overflow: hidden;
    font-family: 'Jano Sans Pro', sans-serif;
    text-align: left;
}
  
.timeline h3{
  color: #F57D1F;
  font-weight: 500; 
                      
}
.timeline h2 {
    font-weight: 900; 
                                              
}

.timeline-content p{
    font-weight: 500;
    line-height: 34px;
    text-align: left;
}

.timeline-content a {
  background: #666;
  color: white;
  padding: 5px 15px;
  font-size: 15px;
  text-transform: capitalize;
  text-decoration: none;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .6);
}

.timeline-content a:hover, .timeline-content a:active, .timeline-content a:focus {
  background: #000000;
  color: white;
  text-decoration: none;
}

.timeline::before {
    content: '';
    background: #C5CAE9;
    width: 5px;
    height: 95%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  
.timeline-item {
    width: 100%;
    margin-bottom: 10px;
}
  
  .timeline-item:nth-child(even) .timeline-content {
    float: right;
    padding: 40px 30px 10px 30px;
  }
  
  .timeline-item:nth-child(even) .timeline-content .date {
    right: auto;
    left: 0;
  }
  
  .timeline-item:nth-child(even) .timeline-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
  
  .timeline-item::after {
    content: '';
    display: block;
    clear: both;
  }
  
  .timeline-content {
    position: relative;
    width: 45%;
    padding: 10px 30px;
    border-radius: 4px;
    background: #f5f5f5;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
  }

  
  .timeline-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 10px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #f5f5f5;
  }
  
  .timeline-img {
    width: 30px;
    height: 30px;
    background: #183b56;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-top: 25px;
    margin-left: -15px;
  }
  
  
  
  .timeline-card {
    padding: 0!important;
  }
  
  .timeline-card p {
    padding: 0 20px;
  }
  
  .timeline-card a {
    margin-left: 20px;
  }
  
  .timeline-item .jollof_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/jollof.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .waakye_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/waakye.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .shito_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/shito.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .fantekenkey_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/fantekenkey.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .mission_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/work/about1.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .mision_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/work/about8.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .vision_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/work/about4.jpg') center center no-repeat;
    background-size: cover;
  }

  .timeline-item .value_img {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .4)), url('../images/work/about1.jpg') center center no-repeat;
    background-size: cover;
  }
  .timeline-img-header {
    height: 300px;
    position: relative;
    margin-bottom: 20px;
  }
  
  .timeline-img-header h2 {
    color: #FFFFFF;
    position: absolute;
    bottom: 5px;
    left: 20px;
  }
  
  blockquote {
    margin-top: 30px;
    color: #757575;
    border-left-color: #3F51B5;
    padding: 0 20px;
  }
  
  .date {
    background: #FF4081;
    display: inline-block;
    font-weight: 300;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  @media screen and (max-width: 768px) {
    .timeline::before {
      left: 50px;
    }
  
    .timeline-img {
      left: 50px;
    }
  
    .timeline-content {
      max-width: 100%;
      width: auto;
      margin-left: 70px;
    }
  
    .timeline-item:nth-child(even) .timeline-content {
      float: none;
    }
  
    .timeline-item:nth-child(odd) .timeline-content::after {
      content: '';
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      top: 30px;
      left: -15px;
      border-width: 10px 15px 10px 0;
      border-color: transparent #f5f5f5 transparent transparent;
    }
  }
  

  .section3-main{
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    overflow: hidden;
    position: absolute;
    z-index: 4;
  }
  
  .slider-one,
  .slider-two,
  .slider-three,
  .slider-four {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation: slider-one 12s linear infinite;
  
    .slider-one-image,
    .slider-two-image,
    .slider-three-image,
    .slider-four-image {
      width: 110%;
      height: 100%;
      background-image: url("images/donate/pad6.jpg");
  
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      animation: zoom-out 3s linear infinite;
  
      .slider-text {
        position: absolute;
        top: 40%;
        left: 5%;
        color: white;
        width: 600px;
        text-transform: capitalize;
        animation: text-up 12s linear infinite;
        transform: translateY(100px);
        animation-delay: 0s;
  
        h1 {
          font-size: 2.5rem;
          margin-bottom: 20px;
        }
  
        p {
          font-size: 18px;
          line-height: 28px;
        }
      }
    }
  }
  
  .slider-two {
    animation: slider-two 12s linear infinite;
  
    .slider-two-image {
      background-image: url("images/donate/donate1.webp");
  
      .slider-text {
        animation-delay: 3s;
      }
    }
  }
  
  .slider-three {
    animation: slider-three 12s linear infinite;
  
    .slider-three-image {
      background-image: url("images/donate/donate2.png");
  
      .slider-text {
        animation-delay: 6s;
      }
    }
  }
  
  .slider-four {
    animation: slider-four 12s linear infinite;
  
    .slider-four-image {
      background-image: url("images/donate/donate3.webp");
  
      .slider-text {
        animation-delay: 9s;
      }
    }
  }
  
  @keyframes text-up {
    10% {
      transform: translateY(0px);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
  
  @keyframes zoom-out {
    100% {
      width: 100%;
    }
  }
  
  @keyframes slider-one {
    0% {
      visibility: visible;
    }
  
    25% {
      visibility: hidden;
    }
  
    50% {
      visibility: hidden;
    }
  
    75% {
      visibility: hidden;
    }
  
    100% {
      visibility: visible;
    }
  }
  
  @keyframes slider-two {
    0% {
      visibility: hidden;
    }
  
    25% {
      visibility: hidden;
    }
  
    50% {
      visibility: visible;
    }
  
    75% {
      visibility: hidden;
    }
  
    100% {
      visibility: hidden;
    }
  }
  
  @keyframes slider-three {
    0% {
      visibility: hidden;
    }
  
    25% {
      visibility: hidden;
    }
  
    50% {
      visibility: hidden;
    }
  
    75% {
      visibility: visible;
    }
  
    100% {
      visibility: hidden;
    }
  }
  
  @keyframes slider-four {
    0% {
      visibility: hidden;
    }
  
    25% {
      visibility: hidden;
    }
  
    50% {
      visibility: hidden;
    }
  
    75% {
      visibility: hidden;
    }
  
    100% {
      visibility: visible;
    }
  }