@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
*{
	margin:0px;
	padding:0px;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}
::-webkit-scrollbar {
    width: 10px;
    background-color: #f08740;
}
.top-bar{
  background-color:#000;
}
.top-row{
      display: flex;
    flex-wrap: wrap;
    place-items: center;
}
.ngo-social{
  flex-wrap: wrap;
  justify-content: end;
}
.email{
 border-right: 1px solid #fff;
}
.email a{
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;  
    
}
.email a i{
  padding-right: 10px;
}

.email a:hover{
  color:#f07a36;
}
.call a{
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;  
   
}
.call a i{
  padding-right: 7px;
}
.call a:hover{
  color:#f07a36;
}
.ngo-connect{
  flex-wrap: wrap;
  justify-content: left;
}
.s-icons{
      display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.s-icons li{
  margin-right: 10px;
  cursor: pointer;
}
.s-icons li a i{  
    background-color: #fff;
    border-radius: 50px;
    padding: 10px;
    height: 35px;
    width: 35px;
    text-align: center;
    font-size: 18px;
    color: #f08740;
}
.s-icons li a i:hover{
background-color: #f08740;
color:#fff;
}

a.nav-link:hover:after{
    transform: scaleX(1);
}

a.nav-link:after {
 display: block;
 content: '';
 border-bottom: 2px solid #f08740;
 transform: scaleX(0);
 transition: transform 250ms ease-in-out;
}

.navbar-brand img {
     width: 100%;
    height: 90px;
}

.navbar-nav{
    width: 100%;
    display: flex!important;
    justify-content:center;
}
.nav-item{
  margin: 0px 10px;
}
.nav-link{
    
    font-size: 17px;
    font-weight: 500!important;
    color:#ef7b00!important;
}

.dropdown-menu{
     background-color: #32291c!important;
    border-top: 4px solid #f7941d!important;
    border-radius: 0px!important;
}

.dropdown-menu li{
  padding-left: 10px;
}

.dropdown-item:hover{
  background-color:transparent!important;
  color:#f7941d!important;
}

.my-btn{
    padding: 5px 25px;
    background-color:#f08740;
    border-radius: 5px;
    color: #fff!important;
    font-size: 17px;
    text-decoration: none;
    font-weight: 500;    
    display: flex;
    justify-content: center;
    align-items: center;
    border:none;
}

.my-btn:hover{
  background:#000;
  transition: 0.4s;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 2px solid #f7941d!important;
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
}

.strip-heading h4{
    color: #f08740;
    font-size: 25px;
   
    margin-bottom:10px;
}

.strip-heading p{
      color: #fff;
    font-size: 17px;
    
}

.d-block{
    height:550px;
}
/*--footer-start--*/
.strip-form{
      display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.cta-field{
  padding: 5px 10px;
  width: 95%;
}

.cta-form-btn{
  border: none;
  padding: 5px 10px;
  background-color: #f08740;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  border-radius: 5px;
  width: 100%;
}
.footer-involved-tab{
  text-align: center;
    padding: 40px 0px;
}

.footer-involved-tab h5{
    color: #fff;
    font-weight: 300;
   
}

.footer-involved-tab h5 i{
  padding-left: 10px;
}
.footer-tabs{
    text-align: center;
    padding: 20px 0px;
}
.footer-tabs i{
  font-size: 25px;
    padding-bottom: 10px;
    color: #fff;
}
.footer-tabs h5{ 
    font-weight: 300;
}
  .footer-tabs h5 a:hover{
  color:#f08740;
  transition: 0.4s;
}
.footer-tabs h5 a{
    color: #fff;
    text-decoration: none;
}
.footer-second{
     display: flex;
    flex-wrap: wrap;
    place-items: baseline;
    border-bottom: 1px solid #f08740;
}

.site-logo img{
  width: 100px;
}

.footer-call h5{
     color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    
}
.footer-call a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    
}

.footer-call a:hover{
  color:#f08740;
}
.footer-call h5 i{
      padding-right: 10px;
}

.social-icons h5{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
  
}

.footer-logo-text p{
  font-size: 16px;
  color: #fff;
  text-align: justify;
  
  width: 90%;
}
.footer-second-box h4{
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  
}

.footer-second-box ul{
  list-style: none;
    padding: 0px;
}

.footer-second-box ul li a{
      color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}

.footer-second-box ul li a:hover{
  color:#f18d42;
  transition: 0.4s;
}

.footer-second-box li{
    color:#fff;
    display: flex;
}
.copyright-text p{
    margin: 0px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
 
}
/*---footer-end---*/

/*--gallery-start--*/

.container__img-holder{
  cursor:pointer;
}
.container__img-holder img {
  width:100%;
  height: 300px;
  border-radius: 15px;
}

/* Popup Styling */
.img-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#000000c7;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.img-popup img {
/*  max-width: 900px;*/
  width: 60%;
  height: auto;
  opacity: 0;
  transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
}

.close-btn {
  width: 35px;
  height: 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.close-btn .bar {
  height: 4px;
  background: #fff;
}

.close-btn .bar:nth-child(1) {
  transform: rotate(45deg);
}

.close-btn .bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.opened {
  display: flex;
}

.opened img {
  animation: animatepopup 1s ease-in-out .8s;
  -webkit-animation: animatepopup .3s ease-in-out forwards;
}

@keyframes animatepopup {

  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

}

/*--gallery-end---*/

/*----blog-start---*/
.ngo-blog-box{
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
 .ngo-blog img{
  width:100%;
  height:auto;
  border-radius: 10px 10px 0px 0px;
 }

 .blog-text{
  padding: 10px;
 }

 .blog-text h4{
    font-size: 25px;
    font-weight: 500;
     }
 .blog-text p{
  font-size:16px;
  font-weight:400;
}

.blog-btn{
    padding: 10px;
    margin-bottom: 20px;
}
 .blog-btn a{
      padding: 10px 20px;
    background-color:#f08740;
    color: #fff!important;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
 }
 .blog-heading h2{
   
   font-weight: 600;
  font-size: 35px;
 }

/* ---blog-section-end */

/*---fields--section--start---*/
.ngo-field{
    display: flex;
    flex-wrap: wrap;
    place-items: center;
    color:#000!important;
  text-decoration:none;
}

.ngo-field-text-pic img{
     width: 90%;
  height: auto;
}
.ngo-field-text h3{
    color: #f0c774;
    font-size: 28px;
    text-decoration: underline;
    font-weight: 700;
    margin-bottom :15px;
}  
.ngo-field-text p{
      font-size: 16px;
    font-weight: 400;
    }
/*---fields--section--end---*/
 .banner-bottom-text p{
      font-size: 16px;
    color: #fff;
    font-weight: 500;
    }
 .donate-btn{
      background-color: transparent;
    border: 2px solid #ef7b01;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13%;
    margin: 0 auto;
 }
 .donate-btn:hover{
  background-color:#ef7b01;
  boredr:none;
  transition:0.4s;
}
/*----------------------*/
.section-first h2{
      font-size:35px;
    font-weight: 700;
    margin-bottom: 10px;
    
}
.section-first p{
    font-size: 16px;    
    font-weight: 500;    margin-bottom: 10px;
    text-align:justify;
}
.section-first img{
      width: 100%;
    height: 400px;
    border-radius: 15px;
}

.donate-icon{
  padding-right: 10px;
    filter: invert(1);
}

/*---about-section--start--*/
.about-banner{
  background-image: url("../images/Women-Banner.jpg");
  background-position: center;
  width: 100%!important;
  background-repeat: no-repeat;
  height: 500px;
  background-size: cover;
}
.about-image{
    border: 2px solid #000;
    padding: 10px;
    border-radius: 5px;
 }
.about-last-text h2{
    color:#fff;
}
.about-last-text p{
    color:#fff;
}

/*--about-section-end--*/

/*--mission-start---*/
.mission-banner{
  background-image: url("../images/mission-banner.jpg");
  background-position: center;
  width: 100%!important;
  background-repeat: no-repeat;
  height: 500px;
  background-size: cover;   
}
.our-mission h1{
    color: #fff;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 10px;
   
}
.our-mission p{
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    
}
.mission h1{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 10px;
    
}
.mission p{
    font-weight: 400;
    font-size: 16px;
   
}

/*--mission-end---*/

/*---contact----*/
.contact-f{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.contact-title span{
    font-size: 20px;
    font-weight: 500;
    color: blue;
}
.contact-text h1{
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 10px;
    
}
.contact-text p{
    font-size: 16px;    
    font-weight: 500;
  
    margin-bottom: 10px;
}
.contact-social{
    background-color:#f08740;
    padding: 35px 40px;
    position: relative;
}
.contact-social:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 50px;
    background: #eee;
    transform: skew(45deg);
    right: -75px;
    top: 0;
}
.contact-field{
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    font-weight: 500;
    
}
.contact-message{
    width: 100%;
    height: 100px;
    padding: 10px;
    background-color: #fff;
    font-weight: 500;
  
    border: 1px solid #eee; 
}
.contact-field:focus-visible{
    outline:none;
}
.contact-message:focus-visible{
    outline:none
}
.contact-social ul{
    list-style: none;
    padding: 0px;
}
.contact-social ul li{
    margin-bottom: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    display:flex;
}
.contact-social ul li i{
   padding-right: 8px;
}
.contact-social ul li a{
    color: #fff;
    text-decoration: none;
}
.contact-icons{
    margin-top: 15px;
}
.contact-icons li a i:hover{
    background-color: #000;
    color: #fff;
}
.contect-follow{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
}
.contact-f{
    background-color:#eee;
}

/*---contact-end---*/

.ng-l{
  padding-left: 10px;  
}

.ng-l li {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0px;
}

.box {
    padding: 20px 15px;
    border: 1px solid #eee;
    border-radius: 10px;
}

.bank-detail ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.bank-detail ul li {
    font-size: 17px;
    padding: 5px 0px;
    border-bottom: 1px solid #eee;
}

.box:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.box h5 {
    text-align: center;
    font-size: 22px;
}

.box h4 {
    font-size: 22px;
    padding: 10px 0px;
    margin: 0px;
    text-align: center;
}

.box p {
    font-size: 17px;
    text-align: center;
}

.pay-detail {
    text-align: center;
    list-style: none;
    font-size: 17px;
}

.pay-detail li {
    padding: 8px 0px;
}

.pay-detail li a{
    text-decoration: none;
    font-weight: 500;
}

.navbar-toggler-icon {
    display: none!important;
}

.navbar-toggler:after{
 content:'Menu';
 color:#000;
}

.navbar-toggler:focus {
    border-color: transparent!important;
}

/*------responsive-design-----*/

@media only screen and (max-width: 800px) {

.donate-btn{
  width:30%;
}  

.banner-bottom-text p {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    text-align: justify;
}

.footer-call h5 {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}
.social-icons h5{
   color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400; 
}
.footer-call a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}
.s-icons li a i {
    background-color: #fff;
    border-radius: 50px;
    padding: 8px;
    height: 34px;
    width: 34px;
    text-align: center;
    font-size: 18px;
    color: #f08740;
} 

.footer-call{
    text-align:center;
}
.social-icons{
   text-align:center;  
}
.site-logo{
  text-align:center;    
}
.s-icons{
 justify-content: center;  
}

.cta-field {
    padding: 5px 10px;
    width: 100%;
}
.footer-involved-tab {
    text-align: center;
    padding: 15px 0px;
}
.section-first img {
 height: auto;
}
.d-block{
 height:auto;    
}

.about-banner, .mission-banner {
    height:300px;
}
.section-first h2 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 15px;
}
.our-mission h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
}

.contact-social:before {
  display:none;
}

}

@media only screen and (max-width: 500px){
.ngo-social {
    flex-wrap: wrap;
    justify-content: center;
    padding:10px 0px;
}
.ngo-connect {
    flex-wrap: wrap;
    justify-content: center;
    padding:10px 0px;
}

.contact-social {
    background-color: #f08740;
    padding: 25px 25px;
    position: relative;
}

}

@media only screen and (max-width: 400px) {
 .footer-second-box ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}  
.donate-btn{
    width:42%;
}
.slide_left{
   width:42%;   
}

.contact-social ul li {
    flex-wrap: wrap;
    place-items: baseline;
}

}