@media(max-width:991px) {

    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        height: 100vh;
        background: #000;
        transition: .4s;
        padding: 10px 20px;
        overflow-y: auto;
    }

    .mobile-menu.active {
        right: 0;
    }

    .menu-close {
        display: block;
        background: none;
        border: none;
        color: #fff;
        font-size: 32px;
        margin-left: auto;
    }

    .navbar-nav {
        align-items: flex-start !important;
    }

    .nav-link {
        color: #fff;
        margin: 12px 0;
        font-size: 18px;
    }

    .dropdown-menu {
        background: #111;
        box-shadow: none;
    }

    .dropdown-item {
        color: #fff;
    }

    .donate-btn {
        margin-top: 20px;
        display: inline-block;
        background: #fff;
        color: #000;
    }

    .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        background: #111;
        border: none;
        box-shadow: none;
        padding-left: 15px;
    }

    .dropdown-menu.show {
        display: block;
    }


    #menuOpen {
        color: #fff;
    }

    #mobileMenu .nav-link {
        color: #fff !important;
    }

    .dropdown-toggle-custom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-icon {
        margin-left: auto;
    }

    .nav-item.dropdown {
        width: 100%;
    }


}

@media(max-width:767px) {

    body,html{
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

.footer-form button {
  padding: 0px 10px;

}
.top-bar.hide{
    margin-top:0px;
}

.top-bar{
    padding: 0;
}
.banner-content h1 {
  font-size: 34px;
}

.footer-bottom {
  display: block;
  text-align: center;
  margin-top: 30px;
}

.footer-links {
  text-align: center;
  justify-content: center;
  margin-top: 10px;
}
    .topbar-left a span {
        display: none;
    }

    .topbar-left {
        gap: 15px;
    }

    .topbar-left a {
        font-size: 16px;
    }

      .topbar-right {
  display: none;
  }

    .topbar-right a {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .top-bar .container {
        display: block;
    }


}

@media(max-width:991px) {

    .hero-content h1 {
        font-size: 50px;
    }

}

@media(max-width:767px) {

    .hero-slide {
        min-height: 80vh;
        text-align: center;
    }

    .hero-btns a {
        padding: 8px 17px;
        font-size: 14px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-btns {
        justify-content: center;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

}

@media(max-width:991px){

    .section-heading h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .section-heading h2{
        font-size:30px;
    }

    .service-card{
        padding:30px 25px;
    }

}
@media(max-width:991px){

    .about-content{
        padding-left:0;
    }

    .about-content h2{
        font-size:38px;
    }

    .about-images{
        min-height:auto;
        padding-bottom:120px;
    }

}

@media(max-width:767px){

    .about-img-main{
        width:100%;
    }

    .about-img-small{
        width:65%;
        right:10px;
        bottom:70px;
    }

    .about-content h2{
        font-size:30px;
    }

    .experience-badge{
        left:10px;
        bottom:0;
        padding:18px;
    }

    .experience-badge h3{
        font-size:30px;
    }

}

@media(max-width:991px){

    .mission-vision-section{
        padding:80px 0;
    }

    .section-title h2{
        font-size:40px;
    }

}

@media(max-width:767px){

    .section-title h2{
        font-size:30px;
    }

    .section-title p{
        font-size:15px;
    }

    .foundation-card{
        padding:35px 25px;
    }

    .foundation-icon{
        width:70px;
        height:70px;
    }

    .foundation-icon i{
        font-size:28px;
    }

    .foundation-card h3{
        font-size:24px;
    }

}
@media(max-width:991px){

    .impact-heading h2{
        font-size:40px;
    }

}

@media(max-width:767px){

    .impact-section{
        padding:70px 0;
    }

    .impact-heading h2{
        font-size:30px;
    }

    .impact-card h3{
        font-size:45px;
    }

    .impact-card span{
        font-size:30px;
    }

}

@media(max-width:991px){

    .featured-program{
        padding:80px 0;
    }

    .program-content h2{
        font-size:38px;
    }

    .program-image img{
        height:450px;
    }

}

@media(max-width:767px){

    .program-content h2{
        font-size:30px;
    }

    .program-features{
        grid-template-columns:1fr;
    }

    .program-image img{
        height:350px;
    }

    .program-badge{
        left:15px;
        bottom:15px;
        padding:20px;
    }
    .donation-form .donate-btn {
  background: #000;
  color: #fff;
}
.featured .member-img {
  height: auto;
}

}

@media(max-width:991px){

    .newsletter-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

}

@media(max-width:767px){

    .newsletter-grid{
        grid-template-columns:1fr;
    }

    .newsletter-content h3{
        font-size:20px;
    }

}
@media(max-width:1200px){

    .event-layout{
        gap:40px;
    }

}

@media(max-width:991px){

    .event-layout{
        grid-template-columns:1fr;
    }

    .event-sidebar{
        position:relative;
        top:auto;
        margin-top:50px;
    }

    .event-content h2{
        font-size:38px;
    }

    .meta-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:767px){

    .event-main-section{
        padding:70px 0;
    }

    .event-content h2{
        font-size:32px;
    }

    .event-content blockquote{
        padding:25px;
        font-size:18px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .event-comment-box{
        padding:30px;
    }

    .meta-grid{
        grid-template-columns:1fr;
    }

.event-hero .event-content h1 {
  font-size: 30px;
}
.event-hero {
  height: 50vh;
}
.navbar-brand img {
  max-height: 70px;
}

}

@media(max-width:576px){

    .event-content h2{
        font-size:28px;
        line-height:1.3;
    }

    .event-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .event-item img{
        width:100%;
        height:180px;
    }

}
@media(max-width:991px){

    .gallery-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:767px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:280px;
    }

    .popup-img{
        width:95%;
    }

    .gallery-prev,
    .gallery-next{
        width:45px;
        height:45px;
    }

}

@media(max-width:991px){

    .event-slider{
        grid-template-columns:1fr 1fr;
    }

    .section-header h2{
        font-size:40px;
    }

}

@media(max-width:767px){

    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .event-slider{
        grid-template-columns:1fr;
    }

    .section-header h2{
        font-size:30px;
    }

}
@media(max-width:991px){

    .cta-box{
        flex-direction:column;
        text-align:center;
        padding:45px 35px;
    }

    .cta-content h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .cta-section{
        padding:40px 0;
    }

    .cta-box{
        padding:35px 25px;
        border-radius:20px;
    }

    .cta-content h2{
        font-size:28px;
    }

    .cta-content p{
        font-size:15px;
    }

    .cta-btn{
        width:100%;
        justify-content:center;
    }

}









/* new css */

@media(max-width:991px){

.page-banner{

height:350px;

}

.banner-content h1{

font-size:52px;

}

.banner-content p{

font-size:18px;

}

}

@media(max-width:767px){

.page-banner{

height:300px;

padding:0 15px;

}

.banner-content h1{

font-size:38px;

}

.banner-content p{

font-size:16px;

line-height:1.7;

}

.banner-subtitle{

font-size:12px;

letter-spacing:3px;

}

.banner-wave svg{

height:55px;

}

.timeline-year {
    left: -3px !important;
    right: auto !important;
    width: 55px;
    height: 55px;
    font-size: 14px;
  }

  .section-padding {
  padding: 50px 0;
}

}