@media only screen and (max-width:1530px) {
    .right-registration-form-area::after {
        position: absolute;
        content: '';
        width: 101%;
        height: 225px;
    }
}
@media only screen and (max-width:1360px){
    .volunteer-registration-left-form h2 {
       
        font-size: 42px;
    }
    .right-registration-form-area h2 {
       
        font-size: 42px;
       
        margin: 62px 0;
    }
    .box-content p {
        font-size: 20px;
    }
    .number {
      
      gap: 8px;
      margin-right: 8px;
    }
    .right-nav {
     
      gap: 12px;
    }
    .right-nav button {
      
      padding: 10px 17px;
      font-size: 16px;
     
      width: 143px;
    }
    .menu-section a {
      margin: 11px;
    }
    .banner-content h2 {
      font-size: 48px;
    }
    .banner-content p {
      font-size: 18px;
    
    }
    .box-slogan .content-text {
      padding: 18px 0 0 15px;
    }
  }
  @media only screen and (max-width:1199px){
    .box-timer h4 {
      
      font-size: 24px;
    }
    .box-timer p{
      font-size: 15px;
    }
    .box-timer {
      padding: 15px;
      width: 90px;
      height: 90px;
    }
    .left-content, .right-content {
     
      gap: 15px;
    }
    .volunteer-registration-left-form h2 {
       
        font-size: 34px;
    }
    .right-registration-form-area h2 {
       
        font-size: 34px;
       
        margin: 42px 0;
    }
    .box-content p {
        font-size: 20px;
    }
  .menu-section a {
    margin: 6px;
    font-size: 15px;
  }
  .number {
    gap: 5px;
    margin-right: 0px;
  }
  .user-icon img {
    width: 20px;
  }
  .right-nav button {
    padding: 9px 10px;
    font-size: 15px;
    width: 122px;
  }
  .right-nav {
    gap: 6px;
  }
  .title-section h2 {
    font-size: 44px;
  }
  
  }
  @media only screen and (max-width:992px){

    .roadmap-list::after {
position: relative;
    }

    .swiper-slide.demon-ss .container-sm::after {
      position: relative;

    }


    .timer-section-flex {
      
      gap: 20px;
      
      padding: 30px 35px;
    }
    .box-timer {
      padding: 13px;
      width: 80px;
      height: 80px;
    }
    .box-timer p {
      font-size: 14px;
    }
    .blog-rel .text {
     
      font-size: 50px;
    }
    .single-blog-sectoin{
    
      margin: 40px 0;
    }
    
    .single-blog-sectoin{
      padding: 30px !important;
    }
    .img-box-blog-list .text{
      
    font-size: 70px;
    }
  .common-div {
    padding: 40px 0;
  }
  
  /* .bg-section .align-items-center {
   
    flex-direction: column-reverse;
  } */
  
  .right-registration-form-area::after {
    height: 240px;
   
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .map-content h2 {
   
    font-size: 32px;
   
  }
  .txt-success p {
    font-size: 18px;
    padding: 40px;
    
  }
  .refe {
    width: 441px;
   
    margin-bottom: 20px;
    border: 3px solid #221F1F;
  }
  .left-refe p {
    margin-bottom: 0;
    font-size: 20px;
  }
  .right-text h6 {
    margin-bottom: 0;
    padding: 11px 0;
   
    font-size: 26px;
  }
  .success-text h1 {
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    padding: 54px 0;
  }
  .banner-content h2 {
    font-size: 45px;
  }
  
  .banner-content button {
    padding: 10px 18px;
    font-size: 16px;
  }
  .title-section h2 {
    font-size: 40px;
  }
  .title-section p {
    font-size: 17px;
  }
  .box-slogan .content-text {
    padding: 15px 0 0px 15px;
  }
  .box-slogan h6 {
    
    font-size: 17px;
  }
  .box-slogan {
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
  }
  .slogan-section {
    padding: 40px 0;
  }
  .bg-section {
   
    padding: 40px 0;
  }
  .galery-section {
    padding: 40px 0;
  }
  .about-section {
   
    padding: 40px 0;
  }
  .blog-section {
    padding: 40px 0;
  }
  .single-list-galley .context h6 {
    font-size: 28px;
  }
  .single-list-galley .context {
    padding: 20px;
  }
  .single-blog h6 {
    font-size: 28px;
  }
  }
  
  @media only screen and (max-width:991px){
    .drop-menu .submenu a {
      
      padding: 2px 0px;
    }
    .dropdown-arrows:hover .drop-menu {
     
      padding: 14px 0px;
     
  }

    .single-list-galley{
      padding: 15px;
    }
    .left-section-img-lives {
     
      margin-bottom: 23px;
    }
    .timer-section-flex {
      display: block;
      
    }
    .fl-box.title-section {
      text-align: center;
    }
    .left-content, .right-content {
      
      justify-content: center;
    }
    .timer-section-flex .fl-box.title-section{
      margin-bottom: 20px;
    }

    .drop-menu {
      
      left: 0;
      width: 100%;
      background-color: transparent;
    }
    .drop-menu{
      border: 0;
    }
    .drop-menu a{
      border: 0;
    }
    .copyright-section {
    
      padding-top: 15px;
    }
    .dropdown-arrows:hover .drop-menu {
      display: none;
  }
  .drop-menu.show {
    position: relative;
    display: block !important;
}
.drop-menu {
  box-shadow: none;
}
.dropdown-arrows {
  
  padding-bottom: 0;
}
    .right-nav{
      margin-bottom: 20px;
    }
    .dropdown-arrows {
      margin: 0;
    }
    .right-nav button {
      background-color: #221F1F;
      color: #fff;
      width: auto;
  }
    .menu-section.active{
      display: block;
      transition: all ease-in-out 0.3s;
      position: fixed;
      top: 0;
      content: "";
      left: 0;
      background-color: #efe4b6;
      width: 100%;
      height: 100%;
      padding: 15px;
      z-index: 99;
  }
  .single-blog h6 {
    font-size: 27px;
  }
  .heading-con-h h2 {
    font-size: 22px;
   
    margin-top: 30px;
    text-align: center;
  }
  
  .left-contact-area.heading-con-h {
    
    padding: 40px;
  }
  .web-ver{
    display: none;
  }
  .for-mobile{
    display: block !important;
  }
  .for-web{
    display: none !important;
  }
    .right-registration-form-area {
       
        padding-bottom: 440px;
      }
      .right-registration-form-area::after {
        height: 378px;
       
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .our-volunteer-location {
        padding: 30px 0;
      }
      .right-registration-form-area.available-time-img{
        padding-bottom: 0 !important;
        height: 800px;
      }
      .logo-icon-section p {
        font-size: 16px;
      }
      .verify-heading-section {
        padding: 30px;
      }
      .flex-box.volunteer-registration-left-form{
        padding: 0 !important;
        margin-bottom: 20px;
      }
  
      /* menu-mobile */
      .hambargar .first-line{
        width: 40px;
        height: 3px;
        background-color: #221F1F;
        margin-bottom: 7px;
        transition: all ease-in-out 0.3s;
  
  }
  .hambargar{
  cursor: pointer;
  z-index: 999;
  }
  .hambargar .second-line{
  width: 40px;
  height: 3px;
  background-color: #221F1F;
  margin-bottom: 7px;
  transition: all ease-in-out 0.3s;
  
  }
  .hambargar .third-line{
  width: 40px;
  height: 3px;
  background-color: #221F1F;
  transition: all ease-in-out 0.3s;
  
  }
  .menu-section{
  display: none;
  transition: all ease-in-out 0.3s;
  
  }
  
  .menu-section.show {
  display: block !important;
  transition: all ease-in-out 0.3s;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EFE4B6;
  z-index: 99;
  padding: 30px;
  
  /* Ensure no scrolling leaks */
  overflow-y: hidden;
  }
  
      .first-line.roated-line{
        transform: translateY(10px) rotate(-45deg);
        transition: all ease-in-out 0.3s;
        }
    .second-line.hide{
      opacity: 0;
      transition: all ease-in-out 0.3s;
    }
  
        .third-line.third-roated{
          transform: translateY(-10px) rotate(45deg);
          transition: all ease-in-out 0.3s;
          }
          .mobile-icons{
            display: flex;
            gap: 15px;
            align-items: center;
          }
          .menu-section a{
            display: block;
          }
          .drop-menu.show{
            position: relative;
          }
          .menu-section a {
           
            padding: 4px 0;
          }
          .menu-section.show button {
            background-color: #221F1F ;
            color: #fff;
            margin-top: 10px;
          }
          .single-list-galley .context h6 {
            font-size: 22px;
          }
 
  .single-blog-sectoin{
    
    margin: 30px 0;
  }
}
  
  @media only screen and (max-width:767px){
    .event-section::after {
      position: relative;
      height: 15%;
    }

    .event-section {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      text-align: center;
    }
    .article-contents {
      display: block;
      text-align: center;
      padding: 5px 0px;
      width: 100%;
    }
    .event-section::before{
      position: absolute;
    content: '';
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%, -50%);
    width: 1px;
    background-color: #bdbdbd;
    height: 40px;
      
    }
    .for-mobile-reverse{
      flex-direction: column-reverse;
    }
    .toggle-title h2{
      font-size: 20px;
    }
    .adding-box .box-i {
      padding: 12px 18px;
      background-color: #221F1F;
      color: #fff;
      font-size: 19px;
      display: inline-block;
      cursor: pointer;
    }
    .toggle-context p {
      padding-top: 20px;
      font-size: 16px;
    }
    .article-content-list-left::after {
      position: relative;
    }
    .timer-section-flex .fl-box.title-section p {
     
      display: none;
    }
    .timer-section-flex {
    
      border-radius: 35px;
    }
    .timer-section-flex {
      
      padding: 20px 15px;
    }
    .box-timer {
      
      
      border: 1px solid #efe4b6;
      
    }
    .box-timer h4 {
      font-size: 20px;
    }
    .about-img .top-text {
      display: block;
      
      margin-bottom: 20px;
    }
    .button-section.banner-content button:first-child {
      margin-right: 16px;
    }
    .left-section-img-lives h5 {
      padding-top: 12px;
      text-align: center;
      font-size: 20px;
    }
    .left-section-img-lives {
     
      padding: 10px;
    }
    .box-timer {
      padding: 8px;
      width: 65px;
      height: 65px;
    }
    .box-timer p {
      font-size: 12px;
    }

    .left-content, .right-content {
      flex-wrap: wrap;
      gap: 10px;
    }
    /* .gallery-slider .custom-prev, .custom-next {
      display: flex !important;
    } */
    .blog-rel .text {
     
      font-size: 24px;
    }
    .share-icon a img {
      width: 20px;
    }
    .slice-next-prev .left-arrow {
      
      font-size: 18px;
    }
    .slice-next-prev .right-arrow {
      
      font-size: 18px;
    }
    .single-blog-sectoin{
    
      margin: 20px 0;
    }
    .slice-next-prev .center-arrow{
width: 50px;
margin: auto;
    }
    .single-blog-sectoin{
      padding: 20px !important;
    }
    .img-box-blog-list .text{
      
      font-size: 40px;
      }
    .heading h4{
      font-size: 18px;
    }
    .custom-prev, .custom-next{
      display: none;
    }
  .banner-content h2 {
    font-size: 30px;
  }
  .banner-content p {
    font-size: 16px;
    padding-right: 0;
    margin-bottom: 15px;
  }
  .banner-content button {
    padding: 10px 15px;
    font-size: 15px;
  }
  .single-blog h6 {
    font-size: 26px;
  }
  .single-list-galley .context h6 {
    font-size: 20px;
  }
  .single-list-galley {
   
    margin: 15px 0;
  }
  .hambargar .first-line{
    width: 35px;
    height: 3px;
   
  
  }
  
  .hambargar .second-line{
  width: 35px;
  height: 3px;
  
  
  }
  .hambargar .third-line{
  width: 35px;
  height: 3px;
  
  
  }
  
  .title-section h2 {
    font-size: 26px;
  }
  .title-section p {
    font-size: 16px;
  }
  .common-div {
    padding: 20px 0;
  }
  .left-contact-area.heading-con-h {
    
    padding: 20px;
  }
  
    .refe {
      width: 80%;
      margin-bottom: 20px;
      border: 2px solid #221F1F;
      display: block;
      text-align: center;
      margin: 20px auto;
    
  }
  .right-text {
    width: 100%;
    
  }
  .left-refe {
    text-align: center;
    width: 100%;
    padding: 10px 0;
  
  }
  .left-refe p {
    margin-bottom: 0;
    font-size: 17px;
  }
  .right-text h6 {
    margin-bottom: 0;
    padding: 16px 0;
   
    font-size: 18px;
  }
  .success-text h1 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    padding: 32px 0;
  }
  
  
  .txt-success p {
    font-size: 16px;
    padding: 20px;
    
  }
  .flex-box.volunteer-registration-left-form h2 {
    text-align: center !important;
    
  }
  .verify-heading-section {
    padding: 20px;
  }
  .flex-box {
    display: block;
  }
    .footer-menu-section h6 {
       
        font-size: 20px;
    }
    .our-volunteer-location {
      
        text-align: center;
      }
      footer{
        text-align: center;
      }
      .social-icons ul {
       
        justify-content: center;
      }
    .map-content h2 {
   
        font-size: 24px;
       
      }
    .volunteer-registration-left-form h2 {
       
        font-size: 24px;
    }
    .right-registration-form-area h2 {
       
        font-size: 24px;
       
        margin: 20px 0;
    }
    .box-content p {
        font-size: 16px;
    }
    .volunteer-registration-left-form {
        padding: 26px;
      }
      .right-registration-form-area {
       
        padding: 24px;
      }
      .right-registration-form-area::after {
       
        height: 271px;
    left: -3px;
      }
      .right-registration-form-area {
        padding: 24px;
        padding-bottom: 24px;
        padding-bottom: 170px;
      }
      .box-dv h4 {
        font-size: 20px;
       
      }
      .box-dv p {
       
        font-size: 15px;
      }
      .box-dv {
        background-color: #000;
        padding:20px;
        margin: 10px;
      }


  }
  
  @media only screen and (max-width:575px) {
    .img-box-blog-list .text{
      
      font-size: 30px;
      }
  .success-text h1 {
    font-size: 26px;
  }
    .right-registration-form-area::after {
        height: 213px;
        left: -3px;
      }
      .box-content {
       
        padding: 15px;
      }
      
    }
    @media only screen and (max-width:480px) {
      .left-contact-area.heading-con-h {
        padding: 15px;
      }
      li a {
      
        gap: 10px;
        
      }
      .left-contact-area.heading-con-h ul li a svg {
        font-size: 18px;
      }
      .icon-cnt {
      
        padding: 8px;
      }
      .left-contact-area.heading-con-h ul li a {
      
        font-size: 15px;
      }
  
      .menu-section.show {
        padding: 15px;
      }
        .time-section {
            width: 400px;
            overflow: auto;
        }
    }
    @media only screen and (max-width:400px) {
        .time-section {
            width: 290px;
            overflow: auto;
        }
    }
    @media only screen and (max-width:480px) {
        .right-registration-form-area::after {
            height: 170px;
            left: -3px;
          }
    
        }