@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'Manrope', sans-serif;
    
}

@font-face {
    font-family: 'Mistral';
    src: url('mistral-font.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}



nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    position: fixed !important;
    top: 0;
    z-index: 100;
}

ul {
    margin-bottom: 0;
}

.navbar {
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.nav-menu li {
    list-style: none;
    padding: 0 1rem;
}

.nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

a.nav-link {
    color: #262626;
    text-decoration: none;
    font-size: 16px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-weight: 700;
}

a.nav-link.active{
    color: #BF5702;
    border-bottom: 3px solid #BF5702;
    
}

a.nav-link:hover {
    color: #BF5702;
}

.hamburger {
    display: none;
}

.bar,
.fa-times {
    width: 1.5rem;
    height: 3px;
    display: block;
    color: #fff;
    padding: 0;
    margin: 6px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background-color: #000;
}

.bar:nth-child(1) {
    width: 100%;
}

.bar:nth-child(2) {
    width: 200%;
}

.bar:nth-child(3) {
    width: 300%;
}

.social-media a.nav-link{
    display: inline;
    padding: 0 0.5em;
}

.primary-btn,
.primary-btn:hover,
.primary-btn:active{
    background-color: #BF5702;
    color: #fff;
    border-radius: 28px;
    padding: 0.8em;
}

.home-banner {
    background-image: url(https://impact57.org/assets/img/Home-banner-001.jpg);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 300px 0;
    margin-top: 105px;
    background-repeat: no-repeat;
    padding-top: 260px;
    padding-bottom: 140px;
}

.home-banner .banner-content {
    max-width: 60%;
}

.home-banner .banner-content h1,
.contact-banner .banner-content h1 {
    font-size: 33px;
    margin-bottom: 20px;
	    line-height: 42px;
}

.secondary-btn,
.secondary-btn:hover,
.secondary-btn:active{
    padding: 10px 20px;
    text-decoration: none;
    color: #262626;
    background-color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-weight: 700;
    transition: background-color 0.3s;
    margin-bottom: 20px;
}

.banner-btn {
    display: flex;
    align-items: center;
    
}

.banner-content p{
    font-family: 'Mistral';
    font-size: 20px;
    padding: 0px 20px;
}

.upcoming-events .carousel-item .col-lg-7,
.upcoming-events-details .col-lg-7{
    background-color: #7A4831;
    color: #fff;
    padding: 10px 20px;
}

.upcoming-events p,
.upcoming-events-details p{
    font-size: 15px;
    position: relative;
}

.upcoming-events .fas{
    color: #000;
    background-color: #fff !important;
    font-size: 25px;
    padding: 10px 15px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.upcoming-events .carousel-control-prev .fas{
    position: absolute;
    left: -30px;
}

.upcoming-events .carousel-control-next .fas{
    position: absolute;
    right: -30px;
}

.home-about{
    background-image: linear-gradient(to right, #EEC3A1 0%, #7A4831);
    padding: 0px 0;
    border-radius: 40px;
}

.about-impact .col-lg-7{
    padding: 140px 40px 30px 40px;
}

.about-impact p,
.our-mission p{
    padding-top: 30px;
}

.our-mission ul{
    list-style-image: url(https://impact57.org/assets/img/list-style.svg);
}

.whats-being-done ul{
    list-style-image: url(https://impact57.org/assets/img/list-style-brown.svg);
}

.kitchen-table-strategy ul,
.tactical-recommendations-boxes ul{
    list-style-image: url(https://impact57.org/assets/img/list-style.svg);
}

.our-mission ul li{
    margin: 15px auto 10px auto;
}

.whats-being-done ul li,
.kitchen-table-strategy ul li,
.tactical-recommendations-boxes ul li{
    margin: 10px auto 10px auto;
    font-size: 15px;
}

.home-about .the-name{
    background: linear-gradient(to right, #FEFEFE 0%, #7A4831);
    margin-top: 50px;
    border-radius: 50px;
}

.the-name .col-lg-7{
    padding: 30px 40px;
}

.the-name p,
.whats-next p{
    padding-top: 20px;
}

.whats-next,
.whats-being-done{
    background-image: linear-gradient(to right, #EEC3A1, #7B4A32, #7A4831);
}

.whats-next-text{
    padding: 60px 50px 50px 50px;
}

logo-slider {
    --image-size: 120px;
    overflow: hidden;
    /* width: 100%; */
    margin: 30px 20px;
    position: relative;
    display: flex;
}

logo-slider:hover section {
    animation-play-state: paused;
}

logo-slider section {
    display: flex;
    position: relative;
    animation: marquee 40s linear infinite;
    justify-content: space-around;
}

logo-slider img {
    display: block;
    min-width: var(--image-size);
    height: 100px;
    
}

logo-slider figure {
    text-align: center;
    margin: 0 2vw 1vh 2vw;
}

logo-slider figcaption,
#juprasert_logos figcaption {
    margin-top: 5px;
    font-weight: 500;
    text-align: center;
}

logo-slider:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

h2,
h3{
    font-weight: 700;
    position: relative;
    width: fit-content;
}

h2::before,
h3::before{
    position: absolute;
    width: 70px;
    height: 3px;
    background-color: #BF5702;
    top: 20px;
    right: -100px;
    content: '';
}

.home-about h3::before,
.whats-next h3::before,
.join-us h3::before{
    background-color: #7A4831 !important;
    position: absolute;
    width: 70px;
    height: 3px;
    top: 20px;
    right: -100px;
    content: '';
}

.kitchen-table-strategy h2::before,
.whats-being-done h3::before{
    background-color: #4D1500;
}

.home-about .the-name h3::after{
    content: url(https://impact57.org/assets/img/logo.svg);
    position: absolute;
    top: -25px;
    right: -230px;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.join-us,
.subscribe{
    background-image: url(https://impact57.org/assets/img/join-us-bg.jpg);
    background-position: center;
    background-size: cover;
}

.join-us .join-us-content{
    background-color: #fff;
    border-top-left-radius: 100px;
    border: 10px solid #E9E9E9;
}

.join-us .the-goal-content{
    background-color: #fff;
    border-bottom-right-radius: 100px;
    border: 10px solid #E9E9E9;
}

.sponsor .row{
    background-image: linear-gradient(to bottom, #fff 30%, #F6F6F5 30%);
}

.sponsor h4{
    padding-top: 150px;
}

footer ul{
    list-style: none;
}

.countdown-container span{
    text-align: center;
    margin: 0 10px;
    font-size: 12px;
}

.countdown-container {
    display: flex;
    background-color: #47200F;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 40px;
    margin-bottom: 10px;
}

.countdown-container section{
    border-right: 1px solid #fff;
}

.countdown-container section:last-child{
    border-right: none;
}

.countdown-item {
    margin: 0 10px;
    font-size: 16px;
}

.events-banner {
    background-image: url('https://impact57.org/assets/img/events-banner.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 230px 0;
    margin-top: 105px;
    background-repeat: no-repeat;
}

h1{
    font-weight: 700;
}

.upcoming-events-details .event-details .row{
    margin: 20px auto;
}

.upcoming-events-details h4{
    font-size: 20px;
    margin-top: 10px;
}

.subscribe h3{
    position: relative;
}

.subscribe h3::before{
    position: absolute;
    content: none;
}

.subscribe form .form-group,
.get-in-touch form .form-group{
    margin: 15px auto 20px auto;
}

.subscribe button,
.get-in-touch button{
    border-radius: 40px;
}

.subscribe .form-group input,
.get-in-touch .form-group input
.get-in-touch .form-group textarea{
    border-radius: 0px;
}

.subscribe .form-control:focus{
    outline: none;
    box-shadow: none;
}

.contact-banner{
    background-image: url('https://impact57.org/assets/img/contact-banner.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 230px 0;
    margin-top: 105px;
    background-repeat: no-repeat;
}

.get-in-touch-form{
    background-image: url(https://impact57.org/assets/img/get-in-touch-bg.jpg);
    padding: 30px 40px;
}

.our-cause-banner{
    margin-top: 105px;
}

.whats-being-done-text{
    padding-right: 0;
}

.whats-being-done-text img{
    width: 300px;
}

.kitchen-table-strategy{
    margin-top: -250px;
}

.kitchen-table-strategy .col-lg-5 {
    background-color: #fff;
    border: 3px solid #7A4831;
    padding: 30px;
    margin-bottom: 20px;
}

.whats-being-done-img{
    padding: 120px 0 80px 0;
}

.tactical-recommendations{
    background-color: #F6F6F5;
    border-radius: 50px;
    margin-top: 50px;
}

.tactical-recommendations-boxes {
    display: flex;
    flex-wrap: wrap;
}

.tactical-recommendations .col-lg-6,
.tactical-recommendations .col-lg-4{
    margin: 20px 0 10px 0;
}

.tactical-recommendations-boxes .box {
    background-color: #fff;
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.tactical-recommendations span{
    color: #BF5702;
    font-size: 60px;
    font-weight: 500;
}


.timeline {
    margin-top: 105px;
    padding: 15px;
    display: grid;
    grid-template-columns: 40% auto;
    justify-content: center;
}

.timeline ul {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
}

.timeline li {
    margin-top: 30px;
    position: relative;
    padding: 25px;
}
.timeline li p,
.timeline li h5 {
    padding: 0 5px;
    transition: 1.5s;
}

.timeline .date {
    position: absolute;
    top: 30px;
    left: -50px;
    opacity: 0;
    transition: 1.5s;
    font-size: 12px;
}
.timeline-line {
    background: rgb(228, 228, 228);
    width: 4px;
    border-radius: 12px;
    position: relative;
    justify-self: end;
}
.timeline-point {
    border: none;
    position: absolute;
    border-radius: 50%;
    background: #BF5702;
    width: 8px;
    height: 8px;
    top: 30px;
    left: -6px;
    transition: 1.5s ease;
}

.timeline-innerline {
    position: absolute;
    background: #BF5702;
    width: 4px;
    height: 0%;
    top: 0%;
    left: 0%;
    transition: 1s linear;
  }

  @media screen and (min-width: 728px) {
    .timeline {
      display: block;
    }
    .timeline ul {
      flex-direction: row;
    }
    .timeline li {
      margin-top: 0px;
      position: relative;
      width: 100%;
      padding: 0px;
    }
    .timeline p {
      transform: translateY(-10px);
      opacity: 1;
      /* padding: 0 20px; */
      transition: 1.5s;
      margin-top: 20px;
      font-size: 13px;
    }
    
    .timeline .date {
      opacity: 1;
      transition: 1.5s;
      font-size: 12px;
      
      position: absolute;
      top: -150px;
      left: 33%;
    }
    
    .timeline-point {
      width: 15px;
      height: 15px;
      
      top: -40px;
      left: 40%;
      transition: 1.5s ease;
    }

    .timeline-point::before{
      height: 35px;
    width: 0px;
    border: 1.2px dashed #707070;
    content: '';
    position: absolute;
    bottom: 20px;
    right: 6px;
    }
    
    .timeline-line {
      width: 100%;
      height: 4px;
    }
    
    .timeline-innerline {
      position: absolute;
      background: #BF5702;
      width: 0%;
      height: 4px;
      
      top: 0%;
      left: 0%;
      
      transition: 1s linear;
      border-radius: 999px;
    }
  }
  
  
  .date::before{
    height: 13px;
    width: 13px;
    background-color: #BF5702;
    border-radius: 50%;
    content: '';
    position: absolute;
    bottom: -41px;
    right: 20px;
    
  }
  .date::after {
    height: 25px; /* Adjust the size of the outer circle */
    width: 25px;
    background: none;
    border: 2px solid #BF5702; /* Border color for the outer circle */
    border-radius: 50%;
    content: '';
    position: absolute;
    bottom: -47px; /* Adjust the bottom value to add a gap between circles */
    right: 14px;
    z-index: -1;/* Adjust the right value to position the outer circle properly */
}

.timeline-mobile{
    position:relative;
    margin:50px auto;
    padding:40px 0;
    box-sizing:border-box;
    display: none;
  }
  .timeline-mobile:before{
    content:'';
    position:absolute;
    left:50%;
    width:2px;
    height:100%;
    background:#c5c5c5;
  }
  .timeline-mobile ul{
    padding:0;
    margin:0;
  }
  .timeline-mobile ul li{
    list-style:none;
    position:relative;
    width:50%;
    padding:20px 40px;
    box-sizing:border-box;
  }
  .timeline-mobile ul li:nth-child(odd){
    float:left;
    text-align:right;
    clear:both;
  }
  .timeline-mobile ul li:nth-child(even){
    float:right;
    text-align:left;
    clear:both;
  }
  .timeline-mobile .content{
    padding-bottom:20px;
  }
  .timeline-mobile ul li:nth-child(odd):before
  {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    top:24px;
    right:-8px;
    background:#BF5702;
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(233,33,99,0.2);
  }
  .timeline-mobile ul li:nth-child(even):before
  {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    top:24px;
    left:-6px;
    background:#BF5702;
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(233,33,99,0.2);
  }
  .timeline-mobile ul li h3{
    padding:0;
    margin:0;
    color:#262626;
    font-weight:600;
  }
  .timeline-mobile ul li p{
    margin:10px 0 0;
    padding:0;
  }
  .timeline-mobile ul li .time h4{
    margin:0;
    padding:0;
    font-size:14px;
  }
  .timeline-mobile ul li:nth-child(odd) .time
  {
    position:absolute;
    top:12px;
    right:-165px;
    margin:0;
    padding:8px 16px;
    background: #BF5702;
    color:#FFF;
    border-radius:18px;
    box-shadow:0 0 0 3px rgba(233,33,99,0.3);
  }
  .timeline-mobile ul li:nth-child(even) .time
  {
    position:absolute;
    top:12px;
    left:-165px;
    margin:0;
    padding:8px 16px;
    background:#BF5702;
    color:#fff;
    border-radius:18px;
    box-shadow:0 0 0 3px rgba(233,33,99,0.3);
  }
  @media(max-width:1000px)
  {
    .timeline-mobile{
      width:100%;
    }
  }
  @media(max-width:767px){
    .timeline-mobile{
      width:100%;
      padding-bottom:0;
    }
  
    .timeline-mobile:before{
      left:20px;
      height:100%;
    }
    .timeline-mobile ul li:nth-child(odd),
    .timeline-mobile ul li:nth-child(even)
    {
      width:100%;
      text-align:left;
      padding-left:50px;
      padding-bottom:50px;
    }
    .timeline-mobile ul li:nth-child(odd):before,
    .timeline-mobile ul li:nth-child(even):before
    {
      top:-18px;
      left:16px;
    }
    .timeline-mobile ul li:nth-child(odd) .time,
    .timeline-mobile ul li:nth-child(even) .time{
      top:-30px;
      left:50px;
      right:inherit;
    }
  }

@media screen and (max-width: 992px){
    .home-banner .banner-content {
        max-width: 100%;
    }
    .about-impact .col-lg-7{
        padding: 60px 20px 20px 20px;
    }
    
    .sponsor h4{
        padding: 50px;
    }
    .upcoming-events-details .event-details .row .col-lg-7,
    .upcoming-events .carousel-item .col-lg-7{
        padding: 30px;
    }
    .whats-being-done-text img{
        width: auto;
    }
    .whats-being-done-img{
        padding: 40px 0 0px 0;
    }
    .kitchen-table-strategy{
        margin-top: -150px;
    }
    
    .kitchen-table-strategy .col-lg-5{
        background-color: #fff;
        border: 3px solid #7A4831;
        padding: 30px;
        margin-bottom: 20px;
        
    }

    .timeline{
        display: none;
        height: 80%;
    }

    .timeline-mobile{
        display: block;
    }

    .timeline-mobile::before{
        height:90%;
    }

    .timeline-mobile ul{
        padding: 60px 0 0 0;
    }
}


@media screen and (min-width: 600px){
    .kitchen-table-strategy{
        margin-top: -150px;
    }
}
    


@media (max-width: 992px) {
    .hamburger {
        display: block;
    }
    .active .bar:nth-child(2) {
        opacity: 0;
    }
    .active .bar:nth-child(1) {
        -webkit-transform: translateY(8px) rotate(-315deg);
        transform: translateY(8px) rotate(-315deg);
        width: 300%;
    }
    .active .bar:nth-child(3) {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
        width: 300%;
    }
    .nav-menu {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 75px;
        right: -100%;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .nav-menu li {
        padding: 1rem 0;
    }
    
    a.nav-link {
        margin: 1rem 0;
        color: #333;
        z-index: 1;
    }
    
    .active {
        right: 0;
        z-index: 100;
        transition: 0.2s ease;
    }
}

@media screen and (max-width: 480px) {
    a.nav-link {
        padding: 0.75rem 0;
    }
}