@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*,html{
    font-family: "Open Sans", sans-serif;
    font-size: 18px; color: #626262;
}

.bg-orange{
    background-color: #F0AB50;
}
.bg-dark{
    background-color: #363636;
}
.bg-purple{
    background-color: #7256C3;
}
.bg-white{
    background-color: #FFFFFF;
}
.color-orange{
    color: #F0AB50;
}

.color-vibrant-orange{
  color:#FF712A;
}

.color-dark{
    color: #363636;
}
.color-purple{
    color: #7256C3;
}
.color-white{
    color: #FFFFFF;
}
.top-icons-height{
    height: 24px;
}
.top-social-icons-height{
    height: 40px;
}
.top-bar a{
    text-decoration: none; color: #FFFFFF;
 }

 .logo{
    height: 100px; width: auto;
 }
 .drop-shadow{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }
 header nav .nav-item{
    padding-left: 20px;padding-right: 20px;
 }
  header nav .nav-item .nav-link{
    color: #F0AB50; font-weight: 600;
  }
   header nav .nav-item .nav-link:hover{
    color: #7256C3;  
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu{
    background-color: #7256C3; color: #FFFFFF!important;  width: 300px;
  }
    .navbar-expand-sm .navbar-nav .dropdown-menu .dropdown-item{
      color: #FFFFFF!important;    
    }
      .navbar-expand-sm .navbar-nav .dropdown-menu .dropdown-item:hover{
      color: #FFFFFF!important;  background-color: #F0AB50;   
    }

  .btn-donate-now{
    height: 58px;
  }
  .btn-learn-more{
    height: 48px;
  }
.dropdown-toggle{
    position: relative;
}
  .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: ""; border: 0px;
  background-image: url('../images/icon-dropdown.png');
  background-repeat: no-repeat; background-position: right top; width: 14px; height: 9px; position: absolute; right: -12px; top: 16px;
}

.dropdown-toggle:hover::after,
.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
    background-image: url('../images/icon-dropdown-hover.png');
  background-repeat: no-repeat; background-position: right top; width: 14px; height: 9px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #7256C3; 
}

 
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
  animation: slideDown 0.4s ease-in-out; 
}

body.nav-fixed-padding {
  padding-top: 70px; /* Adjust to your navbar height */
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.donation-box-area{
   background: url('../images/bg-orange-pattern.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; padding: 48px 48px 48px 48px; margin-top: -160px; border-radius: 15px;position: relative; z-index: 100; color: #FFFFFF;
}
h2{
  font-size: 48px; font-weight: 700;
}

h3{
  font-size: 24px; font-weight: 700;
}


.donation-box-area .selction-group {
    display: flex;
    flex-wrap: wrap;
}

.donation-box-area .selction-group 
.option {
    position: relative;
    cursor: pointer;
}

.option .btn-option {
    margin: 0 10px 10px 0;
    display: flex;
    background-color: transparent;
}
.option input {
    opacity: 0;
    position: absolute;
}

.option input + span {
    border: 2px solid #FFF; font-size: 22px;
    padding: 16px 36px;
    margin-right: 8px;
    border-radius: 100px;
    color: #FFF;
}
.option input + span:hover{
  background-color: #9747FF;
  color: #FFFFFF;
  border: 2px solid #9747FF;  
}
.option input:checked + span {
  background-color: #9747FF;
  color: #FFFFFF;
  border: 2px solid #9747FF; 
}
.option input:checked + span:hover, .option input:checked + span:focus, .option input:checked + span:active {
    background-color: #9747FF;
    color: #FFFFFF!important;
}
.custom-amount-area{
    border: 2px solid #FFF; 
     border-radius: 100px; display: flex;
}
.custom-amount-area input{
  background-color: transparent; outline: 0; border: 0; padding: 16px 16px 16px 16px; flex-grow: 1; color: #FFFFFF;font-size: 24px;
}
.custom-amount-area-prefix{
  padding: 16px 16px 16px 16px; background-color: #F0AB50;border-right: 2px solid #FFF; border-radius: 100px 0 0 100px;font-size: 24px;
}

.btn-submit-form{
  padding: 16px 16px 16px 16px; background-color: #F0AB50; border-radius: 100px; color:#363636; text-transform: uppercase; font-size: 28px; font-weight: 600; display: block; width: 100%;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;border: 0;
}

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

.updown-animation {
  display: inline-block;
  animation: upDown 2s ease-in-out infinite;
}

@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Move up */
  }
}

.section-heading{
    font-size: 48px; font-weight: 700; color: #535353;
}
.section-heading span{
  font-size: 48px; font-weight: 700; color: #F0AB50;
}


.section-sub-heading{
    font-size: 20px; font-weight: 600; color: #FF712A;
}
.text-justify{
  text-align: justify;
}

.wavecity{
  padding: 64px 0;
}

.normal-pad{
  padding: 64px 0;
}

 .orange-dot::marker {
    color: orange;
  }
  .left-right-gradiant{
    background: #FDF39F;
background: linear-gradient(90deg,rgba(253, 243, 159, 1) 0%, rgba(255, 113, 42, 1) 76%); padding: 40px 0; position: relative;
  }
    .left-right-gradiant h2{
color: #363636; text-align: center; font-size: 40px!important;
    }

     .left-right-gradiant a.readmore{
      position: absolute; left: 50%; margin-left: -45px; bottom: -50px; z-index: 10; 
     }
    .left-right-gradiant::after{
      content: '';
      width: 98px; height: 98px;border-radius: 100%; background-color: #FFF;position: absolute;left: 50%;z-index: 1;margin-left: -58px; bottom: -60px;
     }

     .make-a-difference{
      border:1px solid #BBBBBB;
      background-color: #FFFFFF; border-radius: 10px; margin-bottom: 24px; padding: 24px; min-height: 350px;
     }
     .make-a-difference .icon-area{
      min-height: 125px;
     }
     .top-pad-normal{
      padding-top: 64px; text-align: center;
     }

      .seva_percentage{
        background: url('../images/seva-bg.png') no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; padding: 36px; color: #626262; font-size: 24px; min-height: 460px; border-radius: 15px;
      }
      .seva_percentage h2{
        color: #404040; font-size: 44px; font-weight: 700;
      }

     .first-blog{
      position: relative;margin-bottom: 24px;
     }
     .first-blog .featured-image{
      border-radius: 10px; width: 100%;
     }
      .blog-meta{
        position: absolute;padding: 24px; height: 50%; bottom: 0; left: 0; right: 0; width: 100%;
        background: #303030;
background: linear-gradient(180deg, rgba(48, 48, 48, 0) 0%, rgba(48, 48, 48, 1) 100%); border-radius: 0 0 10px 10px; display: flex; flex-direction: column; justify-content: end;
 
      }
      .blog-meta h3{
          font-size: 20px; text-align: left; margin-bottom: 24px;
       }
       .normal-blog-featured{
        border-radius: 10px; width:100%;
       }
       .normal-blog{
        background-color: #FFF; padding:16px; border-radius: 10px; min-height: 384px; margin-bottom: 24px;
       }

       .blog-meta-normal{ 
         display: flex; flex-direction: column; justify-content: end;
 
      }
      .blog-meta-normal h3{
          font-size: 20px; text-align: left; min-height: 100px;
       }
       .testimonial-bg{
        width: 400px; height: 397px; position: relative; padding: 100px 58px 24px 58px; margin-top: 64px; 
         background: url('../images/testimonial-bg.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   text-align: center; font-size: 20px;
       }
       .testimonial-bg h3{
        font-size: 20px; font-weight: 500;
       }
       .testimonial-bg .testimonial_thumbnail{
        position: absolute; top: -20px; left: 45%; margin-left: -50px;
       }

       .testimonial-slider.owl-carousel img{
        width: auto!important;
       }

 .disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  footer{
        position: relative; 
         background: url('../images/footer-bg.png') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  font-size: 20px; padding-top: 64px;color: #FFFFFF!important;
    }
    footer p{
      color: #FFFFFF!important;
    }
      footer h3{
        font-size: 24px; font-weight: 600; padding: 0; margin: 0 0 24px 0; color: #FFFFFF;
      }
       footer a{
        text-decoration: none;color: #FFFFFF;
       }

       footer .section-link ul li::marker {
          color: #FFFFFF;
        }
        .footer-logo{
          width: 110px; height: auto;
        }
        footer .copyright{
          border-top: 1px solid #FFFFFF; padding: 24px 0 16px 0;
        }
        footer .social-links{
          position: absolute; left: 10px; top: 32px;
        }
         footer .social-links ul{
          list-style-type: none;
         }
          footer .social-links ul li{
            margin-bottom: 10px;
          }

           footer .social-links ul li img{
            width: 48px; height: 48px;
           }
            .btn-black{
              background-color: #363636;
            }

             .btn-black:hover{
              background-color: #FF712A;
            }
            .btn-orange{
              background-color: #FF712A;
            }
            .btn-orange:hover{
              background-color: #363636;
            }
            .btn-wavecity{
            border-radius: 8px; padding:13px 54px 13px 13px;  color: #FFFFFF; height:48px; text-decoration: none; position: relative;
            }
           .btn-exmpand{
             background-image: url('../images/icon-expand.png'); background-repeat: no-repeat; width: 35px; height: 35px; position: absolute; right: 8px; top: 8px; 
           }
           .btn-minimize{
             background-image: url('../images/icon-minimize.png'); background-repeat: no-repeat; width: 35px; height: 35px; position: absolute; right: 8px; top: 8px; 
           }
            .btn-arrow{
             background-image: url('../images/icon-arrow.png'); background-repeat: no-repeat; width: 35px; height: 35px; position: absolute; right: 8px; top: 8px; 
           }