@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');
* {box-sizing:border-box;}
html {
    scroll-behavior: smooth;
  }
body {
    font-family: 'Jost', sans-serif;
	}

.top_logo {                 
    width: 70px;
}
 .hero-section {
            background: url('/images/black_bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        .section-title {
            color: #008035;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .card_donate {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            height: 276px;
        }
        .card_donate:hover {
            transform: translateY(-5px);
        }
        .card_about{
           border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s; 
            height: 460px;
        }
        .card_about:hover {
            transform: translateY(-5px);
        }
        .img-fluid {
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .donation-section {
            background-color: #e9ecef;
            padding: 50px 0;
        }
        .btn-donate {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1.2rem;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .btn-donate:hover {
            background-color: #c82333;
        }
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        .display-4{
            font-weight: 500 !important;
        }
.main_head {
    position: fixed;
    top: 24px;
    left:0;
    right:0;
    z-index: 999;
    background: #fff;
}
.small_box:hover{
    color: #fff;
}
.small_box:hover .rap_name{
    color: #fff;
}
.darkHeader{
     background: #fff;
}
.main_head li a{
    color:#141414;
}
.banner_section {
    height: 425px;
    position: relative;
    top:83px;
}
.background_overlay{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
      z-index: 12;
      /* background: linear-gradient(235deg, rgb(242 133 43 / 60%), rgb(249 185 118 / 20%)); */
  }
.background_botttom {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 20;
}
.background_botttom img{
    width:100%;
}
.center_img {
    margin-top: 80px;
    text-align: center;
}

.center_data {
    margin-top:20px;
    text-align: center;
    color: #fff;
}
.banner_heading{
    font-size:45px;
    font-weight:700;
}
.don_button {
    text-align: center;
}
.banner_second{
    font-size:30px;
}
.don_button a{
    background: url(../images/don_bt.png);
    background-size: 100% 100%;
    padding: 50px 80px 30px 60px;
    display: inline-block;
    margin-top: 18px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}
.charity_section {
    padding:50px 0 ;
}
.small_content {
    font-size:24px;
    padding:50px 10px;
}
.elementor-image{
    position:relative;
    text-align: center;
}

.big_text {
    padding: 80px 10px;
    font-size: 35px;
    position:relative
}
.big_text i{
    position:absolute;
    right:0;
    top:-30px;
    font-size:100px;
    color:#f38c35;
}
.more_content {
    font-size: 28px;
    padding: 25px 50px;
    text-align: center;
}
.owl-dots  {
    display:none;
}
.owl-nav{
    display: none;
}
.single_blog  {
    padding: 10px;
}
.single_blog img {
    border-radius:15px 15px 0px 0px;
}
.single_blog img{
    height: 290px;
    object-fit: cover;
}
.single_blog {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.single_blog:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Image zoom effect */
.single_blog img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.single_blog:hover img {
  transform: scale(1.05);
}

/* Text animation on hover */
.single_blog h3 {
  transition: color 0.3s ease;
}

.single_blog:hover h3 {
  color: #008035; 
}

.single_blog:hover p {
  color: #008035; 
}

/* Link underline on hover */
.blog_link {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #007BFF;
  text-decoration: none;
}

.blog_link:hover {
  transform: translateX(5px);
  text-decoration: none;
  color: #0056b3;
}

.footer_overlay {
    background: #008035;
    color:#fff;
    padding-top:70px;
    padding-bottom:40px;
}
.copyright{
    color:#fff;
    background: #008035;
    padding:10px 0;
}
.footer_bottom img{
    width:100%;
    height:130px
}
.donation_section {
    padding: 10px 0;
    text-align: center;
}
/*.bg_images {*/
/*    background:url('../images/smiles.jpeg');*/
/*    background-size: cover;*/
/*    border-radius: 10px;*/
.custom-slider {
  width: 100%;
  height: 300px; /* adjust as needed */
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.custom-slider .slides {
  display: flex;
  width: 100%; /* 3 images = 300% */
  animation: slide 12s infinite;
}

.custom-slider img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Animation */
@keyframes slide {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(0%); }    /* 1st image pause */
  30%  { transform: translateX(-100%); }
  50%  { transform: translateX(-100%); } /* 2nd image pause */
  60%  { transform: translateX(-200%); }
  80%  { transform: translateX(-200%); } /* 3rd image pause */
  100% { transform: translateX(0%); }    /* back to 1st */
}

.help-section {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* same line, start aligned */
  gap: 20px; /* space between heading and button */
  margin-top: 20px;
}

.help-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.donate-btn {
  background:#008035;
    border-radius:10px;
    font-weight:600;
    color: #fff;
    transition:0.3s;
    padding: 8px 15px;
}
.donate-btn:hover {
  background-color: #fff;
  color: #008035;
  text-decoration: none;
  border: 1px solid #008035;
  padding: 8px 15px;
}
.don_btn {
  background: #008035;
  display: inline-block;
  animation: blinkShadow 2s infinite;
}

@keyframes blinkShadow {
  0% {
    box-shadow: none;
  }
  25% {
    box-shadow: rgba(0, 128, 53, 1) 0px 0px 0px 0.00869026px;
  }
  50% {
    /*box-shadow: 0 0 15px #00ff66, 0 0 25px #00ff66;*/
    box-shadow: rgba(0, 128, 53, 0.027) 0px 0px 0px 9.74399px;
  }
  75% {
            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 2.09168px;
  }
  100% {
    box-shadow: none;
  }
}
}
.bg_content {
    padding: 150px 40px;
    color: #fff;
    text-align: center;
}
.banners {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom:0;
    z-index:1;
   overflow:hidden;
}
.banners img{
   width:100%;
    height:100%;
}
.avatar img {
    width: 100px !important;
    height: 100px;
    object-fit:cover;
    border-radius:50%;
}
.tickerdiv {
    padding: 10px;
    font-weight: 700;
}
.darkHeader .tickerdiv{
    display: none;
}
.elementor-image img{
    width:400px;
    height:400px;
    object-fit:cover;
    margin-top:-80px;
    /* border-radius:50%; */
}
.gr_text span {
    color: #28a745;
}
h2.title_heading {
    margin-top:130px;
    font-size: 36px;
    font-weight: 700;
    color: #008035;
}
h2.title_headingR {
    margin-top:200px;
    font-size: 36px;
    font-weight: 700;
    color: #008035;
}
.progress-bar {
    background:#008035;
 }
 .progress{
     margin-top:20px;
 }
.t_collection +p{
    margin:0;
}
.pad_c {
    padding:50px 50px;
}

.single_blog {
    box-shadow: 0 0 10px 2px #ccc;
    border-radius: 15px;
    padding-top:0;
    padding-bottom:0;
}
.single_blog .caterg{
    margin:15px 0;
    background:#f28e388c;
    display:inline-block;
    padding:5px;
    border-radius:5px;
    font-size:15px;
}
.single_blog img{
    margin-left:-10px;
    margin-right:-10px;
    width:calc(100% + 20px) !important;
}
a.blog_link {
    padding:10px 0;
    display: inline-block;
    color: #008035;
}
.blog_heading{
    font-size: 25px;
    font-weight: 700;
}
.collection_details {
    display: flex;
}
.needed_ammonut,.collected_ammonut {
    width: 50%;
    text-align:center
}
.needed_ammonut span,.collected_ammonut span {
    background:#f9ac65;
    padding:4px 10px ;
    margin-top:10px;
    display:inline-block;
}
.donate_btn2{
    display:inline-block;
    padding:10px;
    text-align:center;
    width:100%;
}
.testimonials_section .item {
    text-align:center;
    padding:40px;
}
.avatar img{
    display:inline-block !important;
}
.banners img{
    height:400px;
    object-fit: fill;
}
.dropdown-menu {
    /* background: linear-gradient(0deg, #d2ba93, #bd7d15); */
    border:none;
    padding:0;
}
.dropdown-menu .dropdown-item{
    border-bottom:1px solid #ccc;
    color:#000;
}
p.p_collection {
    text-align: right;
    padding-right: 20%;
    padding-top: 10px;
    margin: 0;
}

p.t_collection {
    font-size: 24px;
    font-weight:700;
    text-transform:uppercase;
}
.donate_2 a ,.donate_btn2 a{
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 15px 45px;
    border-radius:10px;
    text-transform:uppercase;
    margin-top:30px;
    font-weight:700;
    text-decoration:none;
    transition:0.3s ease all;
}
.donate_2 a:hover,.donate_btn2 a:hover{
    background:#d2ba93;
}
.has_gap{
    padding-top:6px;
    padding-bottom:5px;
}
.single_blog img {
   /*   filter: brightness(0.5);  */ 
    transition:0.3s all;
}
.single_blog:hover img {
    /* filter: brightness(1); */
}
.single_blog{
    position:relative;
    height: 495px;
}
.single_blog .caterg {
    background:#fff;
    padding:15px 30px;
    text-align:center;
    box-shadow:0 0 10px 1px #111;
    font-size:16px;
    border-radius:10px;
    position:absolute;
    top:200px;
    left:50%;
    transform:translateX(-50%);
}
.single_blog .progress{
    margin:0;
}
.amonunt_info {
    padding: 19px 0;
    font-size: 23px;
    font-weight: 700;
    margin:0;
}
.amonunt_info span{
    color:#d2ba93;
}
.percentagess{
    margin:0;
    text-align:right;
     color:#d2ba93;
    font-size:20px;
}
.blog_heading{
    padding:15px 0px 0px 0px;
    font-size:24px;

}
.main-heading {
    position: relative;
    margin-bottom:0px;
    color:#008035;
    padding: 10px 0px;
}
.main-heading:after{
    content:'';
    width:15px;
    text-align: center;
    border-radius:20px;
    height:5px;
    background:#d2ba93;
    position:absolute;
    bottom:-5px;
    left: 0px;
}
.main-headingD {
    position: relative;
    margin-bottom:0px;
    color:#008035;
}



.top_main_heading{
    display:inline-block;
    background:#d2ba93;
    font-size:16px;
    padding:4px 10px;
    border-radius:6px;
    color:#fff
}
.how_we_work {
    background:url('../images/bgr.jpg');
    padding:150px 0;
    background-position-x: center;
}
.how_we_work .heading1{
    font-size:20px;
    color:#000;
    text-transform: uppercase;
    margin-bottom:10px;
}
.how_we_work .heading2{
    font-size:60px;
}
.how_we_work .donate_btn2{
    text-align: left;
}
.how_we_add{
    margin-top:-100px;
}
.small_box {
    padding: 40px 20px;
    border-radius: 10px;
    text-align: center;
    background:#fff;
    box-shadow:0 0 10px 1px #ccc;
    transition: 0.3s all;
}
.small_box:hover{
    background:#008035;
}
.rap_rate{
    margin-top:10px;
    font-size:30px;
    font-weight:700;
}
.rap_name{
    text-transform:uppercase;
    color:#aaa;
    font-weight:700;
}
.avatar {
    margin: 20px 0;
}
.name {
    text-transform: uppercase;
    color: #d2ba93;
}
.testimonials_section{
    background:#ddd;
}
.testimonials_section .item{
    padding:50px 30px;
    background:#fff;
    border-radius:10px;
    width:90%;
    margin-left:5%;
    box-shadow:0 0 10px 1px #aaa;
}
img.footer_logo {
    width: 60px;
    margin-bottom:30px;
}
.footer h4 {
    margin-bottom: 20px;
    position: relative;
}
.footer h4::after{
    content:"";
    background:#d2ba93;
    width:40px;
    height:5px;
    position:absolute;
    bottom:-10px;
    left:0;
    border-radius:10px;
}
.footer ul{
    padding:0;
    margin:0;
    list-style:none;
}
.footer ul a{
    color:#fff;
    text-decoration: none;
}
.footer ul a i{
    margin-right:7px;
    display:inline-block;
    transition:0.3s all;
}
.footer ul a:hover i{
    margin-right:14px;
}
.footer ul li{
        margin-bottom:10px;
}
.right_most_section {
    text-align: right;
    padding:10px 30px;
    background:#222;
    margin-top:20px;
    border-radius:10px;
}
.right_most_section p{
    margin:0;
}
ul.footer_socials{
    margin-top:30px;
}
.footer_socials li{
    display:inline-block;
    margin-right:7px;
    margin-top:10px;
}
.footer_socials li a{
    width:40px;
    height:40px;
    display:inline-block;
    background:#3c9e65;
    text-align:center;
    line-height:40px;
    border-radius:10px;
    transition: 0.3s;
}
.footer_socials li a i{
    margin-right: 0 !important;
}
.footer_socials li a:hover{
    background: #fff;
    color:#000;
}
.footer-bottom a {
    color: #d2ba93;
}
.testimonials_section {
    background: url(https://images.pexels.com/photos/45842/clasped-hands-comfort-hands-people-45842.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    position: relative;
    background-size:cover;
}
.testimonials_section::before{
    content:'';
    position:absolute;
    right:0;
    left:0;
    top:0;
    bottom:0;
    background: linear-gradient(223deg, #c3aa86, transparent);
}
.event_page .banner_section{
    height:325px;
}
.event_page .banners img{
    height:400px;
}
.ul_list{
    font-weight: bold;
}
.event_page .single_blog{
    padding-bottom:20px;
    margin-bottom:30px;
    height: 485px;
}
.gallery_page .single_blog {
    padding:10px;
    padding-top:0;
    transition:0.3s all;
}
.gallery_page .single_blog p{
    margin:0;
    padding:10px;
    text-align:center
}
.gallery_page .single_blog:hover {
    background:#000;
    color:#fff;
}
.ayog {
    color:#fff;
    margin-right:150px;
    background:rgba(0,0,0,0.5);
    padding:4px;
}
.ayog span{
    display:block;
    font-size:13px;
}
.ayog span.ay{
    font-size:15px;
}
.darkHeader .ayog{
    background: transparent;
}
.footer_img_gp {
    display: flex;
}
span.fo_text {
    margin-left: 16px;
    font-size: 13px;
}
/*.top_logo {*/
/*    animation: rotatation 2s infinite linear;*/
/*}*/
@keyframes rotatation{
    0%{
       transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
div#accordion .panel {
    padding:15px;
    border:1px solid #ddd;
    margin-bottom:20px;
    border-radius:10px;
    box-shadow:0 0 10px 1px #eee;
}
div#accordion .panel-title{
    font-size:18px;
}
div#accordion .panel-title a{
    color:#555;
    font-weight:700;
    text-decoration:none;
}
div#accordion .panel-title a::after{
    content:"\f107";
    margin-left:10px;
    font-family:fontAwesome;
}
.img_groups img{
    width:100%;
}
h4.secon_heading {
    margin-top: 35px;
}
.our-team {
    position: relative;
    border-radius:10px;
    overflow:hidden;
    text-align:center;
}
.our-team img{
    width:100%;
}
.pic img{
    height:250px;
    object-fit:cover;
}
.img_bottom{
    position:absolute;
    top:225px;
}
.team-content{
    background:#000;
    color:#fff;
    padding:15px;
    position: relative;
}
span.post {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}
.team-content h3{
    margin:0;
    font-size:20px;
}
.abouts{
    font-size:14px;
}
.our-team:hover .pic img {
    transform: scale(1.2);
}
.our-team img{
    transition:0.3s all;
}
.contact_img img{
    width:100%;
    border-radius:10px;
}
.contact_info li{
    list-style:none;
    margin-bottom:10px;
}
.contact_info{
    padding:0 10px;
}
.contact_info li span{
    font-weight:700;
    display:block;
    margin-top:10px;
}
.contact_form .form-control{
    margin-bottom:15px;
}
.submt_btn{
    width:100%;
    background:#000;
    color:#d2ba93;
    border:none;
    border-radius:4px;
    padding:10px;
    font-weight:700;
}
.contact_infoss{
    background: url('../images/bgr.jpg');
    background-position: center;
    /* margin-top:50px; */
}
.stories_page .single_blog p{
    padding:15px;
    font-size:15px;
    padding-bottom:0px;
}
.cusrow {
    display: flex;
}
.cusrow select{
    width:45%;
    border-right:none;
      border-radius:0;
}
.cusrow input{
    border-radius:0;
}
.doante_form .form-control{
    margin-bottom:30px;
    border-radius:0;
}
.donation_sec{
    padding:100px 0 ;
}
.btn_section {
    text-align: center;
}
.btn_section a{
    background:#d2ba93;
    color:#fff;
    padding:10px;
    border-radius:5px;
    text-transform:capitalize;
}
.donation_sec{
    background: url('../images/bgr.jpg');
background-position: center;
padding:150px 0 !important;
}
.about_secs img {
    width:100%;
    border-radius:10px;
}
.simple_row,.rev_row {
    padding: 10px 20px;
}
.simple_row img,.rev_row img{
    max-height:300px;
    object-fit:fit;
    margin-top:15%;
    height:100%;
    width:100%;
}
.owlinside .owl-nav{
    display:block ;
}
.owlinside .owl-prev,.owlinside .owl-next{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.owlinside .owl-next{
    left:unset;
    right:0;
}
.owlinside .owl-prev span,.owlinside .owl-next span{
    width:30px;
    background:#fff;
    height:30px;
    display:inline-block;
    line-height:30px;
    font-size:30px;
    border-radius:50%;
}
.nav-item.don_btn {
    background:#d2ba93;
    border-radius:50px;
    font-weight:600;
    transition:0.3s;
    padding: 0px 10px;
}
.nav-item.don_btn:hover {
    box-shadow:0 0 10px 0 #666;
    border-radius:14px;
}

.center_data{
    margin-top:300px;
}
.navbar_custom li.nav-item {
    margin-left: 12px;
}
.custom_pills li{
    width:150px;
}
.custom_pills li a{
    width:100%;
    display:inline-block;
    text-align:center;
    padding:10px;
    color:#000;
}
.custom_pills li a.active{
    background:#d2ba93;
    color:#fff;
    border-radius:4px 4px 0 0;
}
.custom_pills{
    border-bottom:2px solid #d2ba93;
    margin-bottom:20px;
    width:70%;
}
.imgsss_boixx img{
    width:100%;
}
.imgsss_boixx{
    position:relative;
}
.more_sect{
    position:absolute;
    bottom:50px;
    background: rgb(210 186 147 / 80%);
    padding:30px;
    font-weight:700;
}
.bxs {
    background: #d2ba93;
    padding: 20px;
    margin: 30px 0;
}
.don_box .sb_btn{
    background:#000;
    color:#fff;
    height:38px;
    line-height:38px;
    padding:0 30px;
    border:none;
    display: inline-block;
    margin-left:-30px;
    border-radius:0 5px 3px 0;
}
.custom_tab_cont li{
    margin-bottom:10px;
}
.bn_data {
    left: 0;
    bottom: 20%;
    position:absolute;
    right:0;
    text-align:center;
    color:#fff;
}
.bn_data h2{
    font-weight:700;
    font-size:50px;
    text-shadow: 4px 3px black;
}
.gallery_section .single_blog{
    position:relative;
    overflow:hidden;
    padding:0;
    height: 290px;
}
.gallery_section .single_blog p {
    position:absolute;
    top:100%;
    width:100%;
    height:100%;
    left:0;
    right:0;
    z-index:999;
    color:#fff;
    transform:translateY(50%);
    transition:0.3s;
}
.gallery_section .single_blog:hover p{
    top:0;
}
.secon_heading {
    font-size: 30px;
    font-weight: 700;
    position:relative;
    color:#008035;
    margin-bottom:20px;
    padding-bottom:8px;
}
.secon_heading::after{
    content:"";
    position:absolute;
    width:50px;
    height:5px;
    bottom:0;
    left:0;
    background:#4c4c4c;
}

.about_secs p{
    font-size:18px;
}

@media (max-width:575px){
    .elementor-image img{
        width:100%;
        margin-top:0;
        height:unset;
    }
    .nav-item.don_btn {
        background:transparent;
        border-radius:0px;
    }
    .banners img,.banner_section {
        height:285px !important;
    }
    
    .small_box{
        margin-bottom:20px;
    }
    .footer h4{
        margin-top:30px;
    }
    .main_head{
        background: #fff;
        top:12px;
    }
    .about_secs p{
        font-size:15px;
    }
    .rev_row .row {flex-direction: column-reverse;}
}