@import url('https://fonts.googleapis.com/css?family=DM+Serif+Text:400,400i&display=swap');
.wrapper{
    margin: 0 auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}
.shimmer{
    position: fixed;
    width: 100%;
    height: 100%;
    left : 0;
    top : 0px;
    background: rgba(0, 0, 0, 0.7);
    /* filter: blur(10px); */
    z-index: 50;
    visibility: hidden;


}
.popup{
    width : 85%;
    background: white;
    position: fixed;
    z-index: 600;
  
    transform: translate(-50%, -50%);
    left : 50%;
    top : 50%;
    box-shadow: 0px 0px 10px #3636364a;
    padding : 30px;
    visibility: hidden;
    opacity: 0;
    font-family: 'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
    overflow-y : scroll;
    display: none;
    
   
}

.popup::-webkit-scrollbar {
  width: 1px;
}

.popup::-webkit-scrollbar-track {
  background: #fff; 
}

.popup::-webkit-scrollbar-thumb {
  background: #fff; 
}
.bank_popup_close{
    position:absolute;
    width:25px;
    height:25px;
    top:10px;
    right:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    cursor:pointer;
}
.bank_close_line1{
    display:block;
    width:100%;
    height:2px;
    background:#d8d6d6;
    transform:rotate(47deg);
    margin-top:0px;
}
.bank_close_line2{
    display:block;
    width:100%;
    height:2px;
    background:#d8d6d6;
    transform:rotate(-47deg);
    margin-top:-2px;
}
.bank_details{
    width:100%;
    float:left;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.bank_betail_column{
    flex: 0 0 22%;
    display:flex;
    flex-direction:column;
    border:1px solid #eee;
    padding:10px;
}
.bank_logo{
    width:100%;
    height:40px;
    margin-bottom:10px;
}
.bank_logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.bank_betail_column h3{
    font-size:14px;
    margin-top:10px;
}
.bank_betail_column h3 span{
    font-size:15px;
    font-weight:600;
}
.bank_betail_column h2{
    font-size:16px;
    margin-top:10px;
    line-height:1.5;
}
/* .close-pop{
    height : 40px;
    margin-bottom : 20px;
} */
.pop-close-btn{
    display: block;
    width: 150px;
    text-align: center;
    /*background: var(--secondary-color);*/
    background: #eee;
    color : black;
    padding: 8px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 15px;
     font-size: 12px;
     display:flex;
     justify-content:center;
     align-items:center;
     height:35px;
}
.pop_donat_btn{
    width:155px;
    height:50px;
    margin-left:5px;
    background:#43c6ac;
    color:white;
     display:flex;
     justify-content:center;
     align-items:center;
    border-radius: 15px;
    text-decoration:none;
}
.close-pop span{
    float : right;
    margin-right : 10px;
    font-size : 20px;
    cursor: pointer;
}
.popup h1{
    font-size : 1.5rem;
    line-height : 30px;
    font-weight : 500;
    color : var(--primary-color);
}
.bank-tittle{
    color: var(--secondary-color);
    display: block;
    font-weight: bold;
    margin-top : 20px;
    font-size: 13px;
}


.pop_sbt_btn_section{
    width:100%;
    float:right;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    margin-bottom : 60px;
}



/* strip */
.strip{
    width: 100%;
    height: 25px;
    position : fixed;
    top : 0;
    z-index: 50;
}
/* navigation */
nav {
    width: 100%;
    height: 70px;
    position : absolute;
    /* top : 25px; */
    top : 0;
    z-index: 30;
    transition: 0.2s;
    /* -webkit-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
    -moz-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
    box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46); */
}
.style{
    background: white;
    transition: 0.2;
    top : 0;
     -webkit-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
     -moz-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
     box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
}
.logo{
    float: left;
    height: 70px;
    display : flex;
    padding-top : 10px;
}
.logo-name span{
    display: block;
}
.logo-name{
   padding-left: 15px;
   color: white;
}
.logo-name span:nth-child(1){
    font-size: 1.5rem;
}
.logo-name span:nth-child(2) {
    font-size: 14px;
    margin-top: 10px;
}
.logo img{
    width : 50px;

}
nav ul{
    width : auto;
    padding: 0;
}
nav ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}
nav ul li a {
    padding: 5px 0px;
    /* display: block; */
    text-decoration: none;
    font-size: 16px;
    color: white;
    font-weight: 400;
    letter-spacing: 0.02em;
    outline: none;
    margin-right: 20px;
    
}
a, a:active, a:focus {
   outline: none!important;
}
#drop-down{
    width: 180px;
    background: #eee;
    position: absolute;
    right: 10px;
    top : 100px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    visibility: hidden;
    box-shadow: 0px 0px 10px #3636364a;
    /* overflow: hidden; */
}
#drop-down::after{
    width: 10px;
    height: 10px;
    background: #eee;
    content: '';
    position: absolute;
    top : -5px;
    z-index: 5;
    transform: rotate(45deg);
    right : 10px;

}
#drop-down ul li a{
    display: block;
    width: 180px;
    padding:6px 15px;
    box-sizing: border-box;
    color : black;
    border-bottom: 1px #3636364a solid;
     border-left: 3px solid transparent;

}
#drop-down ul li a:hover{
    border-left: 3px solid var(--secondary-color);
    background:white;
}

.navigation{
    height: 70px;
    max-width: 800px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.donate-btn {
    border: none;
    outline: none;
    background: rgb(31, 170, 31);
    color: white;
    padding: 6px 10px;
    border-radius: 15px;
    font-size: 13px;
    position: relative;
    top : -2px;
}
#hero{
    width: 100%;
    height: 75vh;
    background: var(--primary-color);
    position: relative;
    

}
#hero::after{
    content: '';
    position: absolute;
    left : 0;
    top : 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.38);
}
.hero-tittle{
    width: 1200px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
    text-align: left;
    margin-left: 0px;
    box-sizing: border-box;
    color: white;
    position: absolute;
    bottom: 0;
    margin-bottom: 40px;
    z-index: 10;
}
.hero-tittle span{
    display: block;
}
.hero-tittle span:nth-child(1){
    font-size: 2.5rem;
    font-weight: 400;
    font-family: 'DM Serif Text',
    serif;
}
.hero-tittle span:nth-child(2) {
    font-size: 1rem;

}
.front-page-section{
    margin-bottom: 30px;
}
.hero-social{
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 40px;
}
.hero-social ul li{
    list-style : none;
    display: inline-block;
    padding : 10px;
}
.hero-social ul li a{
    color: white;
    text-decoration: none;
    opacity: 0.5;
    transition: 0.2s;
}
.hero-social ul li a:hover{
    opacity: 1;
    transition: 0.2s;
}


.slider {
    width: 100%;
    height: 200px;
    /* margin: 20px auto; */
    position: relative;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slidee5 
.slide6{
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide1 {
    background: url('../client_images/gmb.jpeg')no-repeat center;
    background-size: cover;
    animation: fade 8s infinite;
    -webkit-animation: fade 8s infinite;

}

.slide2 {
    background: url('../client_images/gmb.jpeg')no-repeat center;
    background-size: cover;
    animation: fade2 8s infinite;
    -webkit-animation: fade2 8s infinite;
}

.slide3 {
    background: url('../client_images/amala13.jpeg')no-repeat center;
    background-size: cover;
    animation: fade3 8s infinite;
    -webkit-animation: fade3 8s infinite;
}
.slide4 {
    background: url('../client_images/amala3.jpeg')no-repeat center;
    background-size: cover;
    animation: fade4 8s infinite;
    -webkit-animation: fade4 8s infinite;
}
.slidee5 {
    background: url('../client_images/amala1.jpeg')no-repeat center;
    background-size: cover;
    animation: fade5 8s infinite;
    -webkit-animation: fade5 8s infinite;
}
.slide6 {
    background: url('../client_images/amala1.jpeg')no-repeat center;
    background-size: cover;
    animation: fade 8s infinite;
    -webkit-animation: fade 8s infinite;
}

@keyframes fade {
    0% {
        opacity: 1
    }

    33.333% {
        opacity: 0
    }

    66.666% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade2 {
    0% {
        opacity: 0
    }

    33.333% {
        opacity: 1
    }

    66.666% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes fade3 {
    0% {
        opacity: 0
    }

    33.333% {
        opacity: 0
    }

    66.666% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fade4 {
    0% {
        opacity: 0
    }

    33.333% {
        opacity: 0
    }

    66.666% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@keyframes fade5 {
    0% {
        opacity: 0
    }

    33.333% {
        opacity: 0
    }

    66.666% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.termspop {
  width : 45%;
  position : fixed;
  transform : translate(-50%, -50%) scale(0);
  left : 50%;
  top : 50%;
  box-shadow : 0px 0px 10px #3636364a;
  opacity : 0;
  transition : 0.3s;
  z-index : 10000;

}
.pop-active{
  transform : translate(-50%, -50%) scale(1);
  left : 50%;
  top : 50%;
  opacity : 1;
  transition : 0.3s;
}
.close-pop{
  width : 100%;
  height : 40px;
  background : #3c2c50;
}
.close-pop span{
  display : block;
  width : 40px;
  height : 40px;
  float : right;
  display :flex;
  justify-content : center;
  align-items : center;
  font-family : sans-serif;
  color :white;
}
.pop-content {
  width : 100%;
  height : 400px;
  background : #eee;
  overflow-y : scroll;
    padding : 20px;
    box-sizing : border-box;
}
.submit-term{
  width : 100%;
  height : 50px;
  display : flex;
  justify-content:flex-end;
  padding-right : 20px;
  padding : 10px;
  background : #3c2c50;
  box-sizing : border-box;
}
.submit-term button{
  padding : 0px 10px;
  margin-left : 10px;
  border : none;
  font-size : 12px;
  opacity : 0.5;
  cursor : pointer;
}
.sumbit-term-btn{
  background : green;
  color : white;
}

@media(max-width: 768px) {
   .termspop{
       width : 95%;
   }
   .pop-content{
       height : 300px;
   }
}



.index-activity{
    margin-top: 100px;
    width: 100%;
    display: flex;
    border-radius: 10px;
    /* padding: 15px; */
    box-sizing: border-box;
    overflow: hidden;
    
}
.activities{
    display: flex;
    justify-content: space-between;
    width: calc(100% - 76px);
}
.activity-holder{
    width: calc(100% / 3 - 10px);
    /* padding: 40px; */
}
.activity-short-tittle {
    visibility: visible;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    color : var(--secondary-color);
    text-transform: uppercase;
   
}
.activity-big-tittle {
    visibility: visible;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.38095;
     margin-bottom: 10px;
}
.activity-description {
    margin-bottom: 15px;
    visibility: visible;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.46667;
    opacity: 0.9;
}
.activity-img{
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    height:250px;
}
.activity-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.activity-main-heading{
    display: block;
    width: 76px;
    position: relative;
   
}
.activity-date{
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 500;
    opacity: 0.4;
}
.activity-main-heading span{
    position: absolute;
    height: 100%;
    font-size: 2rem;
    writing-mode: vertical-lr;
    text-orientation: sideways;
    transform: rotate(180deg);
    display: flex;
    justify-content: center;
    left : 7px;
    align-items: center;
    font-weight: bold;
     color : var(--primary-color);
    
}

.activity-main-heading span::after{
    width: 58px;
    height: 50%;
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(60, 44, 80, 1) 100%);
    content: '';
    position: absolute;
    /* transform: rotate(90deg); */
    bottom : 0;
    z-index: -1;
    opacity: 0.3;
 
}





/* project-section */
#project-section {
    width: 100%;
    margin-top: 100px;
    /* padding: 60px 0px; */
    padding: 30px;
    box-sizing: border-box;
     background: var(--primary-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
#project-section::after{
    position: absolute;
    width: 100%;
    height: 110%;
   background: var(--primary-shade-color);
    content: '';
    transform: rotate(45deg) scale(1.2);
    top : 30px;
    z-index: -1;

}
.project-flex-wrapper{
    width: 100%;
    display: flex;
    height: 100%;
}
.project-image{
    width: 30%;
    border-radius: 5px;
    overflow: hidden;
    margin-top : 10px;
}
.project-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-content{
    width: 70%;
    box-sizing: border-box;
    padding-right: 25px;
}
.main-project-tittle span{
    font-size: 24px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0px;
    display: block;
}
.main-project-tittle p {
    font-size: 34px;
    margin-bottom: 10px;
    font-weight: 500;
    color: white;
}
.project-description{
    line-height: 30px;
    color: white;
    opacity: 0.8;
    font-weight: normal;
}



/* picture gallery */
.picture-gallery{
    margin-top: 100px;
    /* padding : 16px; */
    box-sizing: border-box;
    display: flex;
}
.gallery-holder{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.picture-holder{
    width: calc(100% / 4 - 2px);
    margin-bottom: 2px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.picture-holder img {
    width: 100%;
    height : 100%;
    object-fit: cover;
    transition: 0.3s;
}
.gallery-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top : 0;
    background:rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size : 1.8rem;
    color: var(--secondary-color);
    opacity: 0;
    transition: 0.2s;
}
.picture-holder:hover .gallery-overlay{
    opacity: 1;
    cursor: pointer;
    transition: 0.2s;
}
.picture-holder:hover.picture-holder img{
    transform: scale(1.3);
    transition: 0.3s;
}

/* index-contact */
#index-contact{
    width: 100%;
    box-sizing: border-box;
     background: var(--primary-color);
     float : left;
    
}
.contact-holder{
    display: flex;
    width: 100%;
}
.address-section{
    width: 100%;
    position: relative;
    overflow: hidden;
    /* padding-top: 37px; */
    padding: 22px 0px;
    box-sizing: border-box;
    z-index: 1;
    justify-content: space-between;
    display: flex;
}
.adjust-top {
    margin-top : -21px;
}
.address-holder {
    width: calc(100% / 4 - 40px);
    display: flex;
    justify-content: center;
    flex-direction : column;
}

.address-holder p {
    font-size: 1.8rem;
    color: white;
    font-weight: bold;
}
.contact-address-tittle {
    color: white;
    font-size: 13px !important;
    display : block;
    margin-bottom: 10px;
    opacity: 0.9;
    font-weight: 300;
}

.contact-address-description {
    font-size: 13px !important;
    color: white;
    display : block;
    line-height: 25px;
    
}
.contact-address-description a{
    text-decoration : none;
    color :white;
}
.contact-address-description ul li{
    display: inline-block;
}
.contact-address-description ul li a{
    color: white;
    padding: 5px;
    margin-right: 10px;
    font-size: 14px;
}
.form-section{
    width: 72%;
    min-height: 50vh;
    background: white;
    padding: 0px 0px 0px 10px;
    box-sizing : border-box;
}
.form-holder{
    margin-bottom: 20px;
}
.form-holder textarea {
    width: 100%;
    background: rgb(240, 240, 240);
    border: none;
    padding: 10px;
    font-family: sans-serif;
    box-sizing: border-box;
    font-weight : bold;
}
.form-holder input {
    width: 100%;
    height: 40px;
    border: none;
    background: rgb(240, 240, 240);
    text-indent: 10px;
    font-weight : bold;
}
::placeholder {
    font-size: 14px;
    opacity: 0.9;
    font-weight: normal;
}
.form-section p:nth-child(1){
    font-size: 2.6rem;
    font-weight: normal;
    margin-bottom: 0px;
    color: var(--primary-color);
}
.form-section p:nth-child(2) {
    font-weight: normal;
    margin-bottom: 20px;
    opacity: 0.6;
    font-size: 18px;
}
.split-holder{
    display: flex;
    justify-content: space-between;
}
.split{
    width: calc(100% / 2 - 20px);

}
.form-holder label{
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    font-weight: 400;
}
.address-holder span{
    display: block;
    font-size: 1.2rem;
}

#testimonials{
    width: 100%;
    margin-top: 100px;
    background: url('../media/images/grady2.png');
    background-size: cover;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.testi-holder{
    width: 100%;
    margin-top: -80px;
    padding : 0px 135px;
    box-sizing: border-box;
}
.testi-holder .item {
    background: rgb(247, 247, 247);
    padding: 15px;
     -webkit-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
     -moz-box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
     box-shadow: 0px 4px 22px -13px rgba(0, 0, 0, 0.46);
     border-radius: 5px;
    
}
.testi-holder .item span {
    display: block;
}
.quotes-symbol{
    font-size : 1.2rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}
.testi-author{
    margin-bottom: 30px;
    font-weight : bold;
    font-size: 12px;
}
.testi-content{
    font-weight: 400;
    opacity: 0.7;
    font-size: 14px;
}
.testi-nav{
    width: 1200px;
    position: absolute;
    /* top: 30%; */
    /* left: 0; */
    transform: translate(-50%, -50%);
    left: 50%;
    top: 35%;
    z-index: 100;
}
.testi-nav button{
    width: 40px;
    height : 40px;
    border-radius: 40px;
    border: none;
    background: var(--secondary-color);
    color: white;
}
.testi_prev{
    float: left;

}
.testi_next {
    float: right;
   
}




.news-nav {
    width: 1200px;
    position: absolute;
    /* top: 30%; */
    /* left: 0; */
    transform: translate(-50%, -50%);
    left: 50%;
    top: 35%;
    z-index: 40;
}

.news-nav button {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: none;
    background: var(--secondary-color);
    color: white;
}

.news_prev {
    float: left;

}

.news_next {
    float: right;

}






/* acitvity page */
.page-hero{
    width: 100%;
    height: 45vh;
    /*background: var());*/
    position: relative;
    
}
.about-hero{
    height: 450px!important;
    background: url(../media/images/amala2.jpeg);
    background-size: cover;
    background-position-y: -168px;
    background-repeat: no-repeat;
}
@media(max-width : 768px) {
    .about-hero{
    height: 300px!important;
    background: url(../media/images/amala2.jpeg);
    background-size: cover;
    background-position-y: 0px;
    background-repeat: no-repeat;
}
.amala-cont{
    padding : 60px 15px!important;
}
}
.page-hero-content-holder {
    position: absolute;
    bottom: 0;
    padding: 30px 0px;
    color : white;
}

.page-tittle{
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 10px;
    display: block;
    position: relative;
    left : 45px;
    z-index: 5;
}
.page-tittle::after{
    content: '';
    position: absolute;
    width: 10px;
    height : 10px;
    background: var(--secondary-color);
    top : 16px;
    left : -45px;
    border-radius: 10px;

}
.page-tittle::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--secondary-color);
    top: 16px;
    left: -25px;
    border-radius: 10px;

}
.quotes {
    display: block;
    font-weight: 400;
    opacity: 0.9;
    color: white;

}

.activity-inside{
    padding: 0px 16%;
    margin-top : 60px;
    padding-bottom: 60px;
  

}
.activity-inner-holder{
    width: 100%;
    margin-bottom: 60px;
      /* background: rgb(245, 245, 245); */
      padding: 10px;
      box-sizing: border-box;
}
.activity-inside span{
    display :block;
}
.single-tittle{
    color : var(--secondary-color);
    font-weight: bold;
    margin-bottom : 10px;
}
.main-tittle{
    font-weight : 400;
    color : var(--primary-color);
}
.activity-inner-images{

}
.activity-inner-description{
    margin-top: 20px;
}
.activity-inner-description p{
    font-weight: 400;
    font-size: 16px;
    opacity: 0.8;
}


.page-hero-content-holder{
    z-index: 5;
}

.admin-list{
    width : 100%;
    display : flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.administration-holder {
    width: calc(100% / 4 - 50px);
    margin : 25px;
    position: relative;
    overflow: hidden;
    background : #eee;
}
.admin-image{
    transform: scale(0.9);
    height: 270px;
    overflow: hidden;
}
.admin-image img{
    width: 100%;
}
.admin-list{
    padding: 30px 0px;
}
.admin-content{
    padding: 0px;
    height : 120px;
}
.admin-more{
    padding: 20px;
    position: absolute;
    bottom : -65%;
    height: 100%;
    width : 100%;
    z-index: 5;
    background: #eee;
    box-sizing: border-box;
    transition: 0.2s;
}
.admin-name{
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 16px;
}
.possession{
    display: block;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
    opacity: 0.8;
    font-size: 11px;
}
.ocu{
    display: block;
    font-size: 13px;
}
.admin-des ul li{
    margin-top: 10px;
    font-size: 13px;
    color: rgb(48, 48, 48);
    font-weight: 500;
    cursor : pointer;
}
.admin-des ul li a{
    text-decoration :none;
    color : black;
}
.admin-des p{
    font-size: 14px;
}
.readmore{
    display: block;
    margin-top: 10px;
    position: absolute;
    bottom: 0;
    z-index: 5;
    background: #eee;
    width: 100%;
    left : 0;
    padding : 10px 0px;
    text-align: center;
    text-transform: uppercase;
    font-size : 12px;
    font-weight: bold;
    cursor: pointer;
    color: #a29c9c;

}
.readmore:hover {
    color :black;
}




/* gallery floder page */
.gallery-flex-wrapper{
    width: 100%;
    display : flex;
    margin-top : 40px;
    justify-content: space-between;
    flex-wrap: wrap;
}
    .gallery-folder{
        flex : 0 0 calc(50% - 15px);
        margin-bottom: 30px;
    }
        .gallery-folder-thumbnail{
            width: 100%;
            height : 300px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
 
            box-sizing: border-box;
        }
        .gallery-folder-thumbnail::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left : 0;
            top : 0;
            background: rgba(0, 0, 0, 0.4);
        }
            .gallery-folder-thumbnail img{
                width: 100%;
                height : 100%;
                object-fit: cover;
                object-position: center;
            }

        .gallery-folder-content{
            width : 100%;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            left : 0;
            padding: 10px;
            color: white;
            z-index: 5;
            
        }
            .gallery-folder-tittle{
                font-weight: 500;
                font-size: 25px;
                border-left: 4px solid var(--secondary-color);
                padding-left: 10px;
                line-height: 25px;
                margin-bottom: 20px;
            }
        .folder-icon{
            width: 30px;
            height : 30px;
            background: var(--primary-color);
            position: absolute;
            z-index: 10;
            right : 0;
            top : 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
        .explore-btn{
            width: 60px;
            height: 60px;
            transform: translate(-50%, -50%);
            left : 50%;
            top : 50%;
            position: absolute;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--secondary-color);
            font-size: 30px;
            opacity: 0;
            transition: .2s;
        }
    .gallery-folder:hover .explore-btn {
        opacity: 1;
        transition: .2s;
    }

.inner-gallery-holder{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*margin-top: 70px;*/
}
footer{
    width : 100%;
    background: var(--primary-shade-color);
    height : auto;
    padding: 20px 0px;
    box-sizing: border-box;
    float :left;
}
.footer-flex-wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer-section {
    width: calc(100% / 4 - 40px);
    height : 100%;
    color: whitesmoke;
    /* background: red; */
}
.footer-section-company{
    font-size: 20px;
    margin-bottom: 10px;
}
.footer-section-tittle{
    margin-bottom: 15px;
}
.footer-section-company-description {
    font-size: 13px;
    font-weight: 300;
    opacity: 0.6;
    line-height: 16px;
}
.footer-section-tittle{
    display: flex;

}
.footer-section-description{
    display: flex;

}
.footer-section-description ul li{
    list-style-type: none;
    line-height: 21px;
}
.footer-section-description ul li a {
    text-decoration: none;
    color: white;
    font-size: 13px;
    opacity: 0.6;
}
.footer-section-description ul li a:hover{
    opacity: 1;
}
.footer-section-regi-tittle {
    font-size: 30px;
    margin-bottom: 10px;
    margin-top : -5px;
    
}
.footer-section-regi-description{
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 13px;
    line-height: 17px;
}
.regi-footer-btn{
    border: 1px solid var(--secondary-color);
    color: white;
    text-decoration: none;
    font-weight: 300;
    padding: 6px;
    box-sizing: border-box;
    margin-top: 10px;
    display: block;
    width: 120px;
    text-align: center;
    border-radius: 15px;
    font-size: 13px;
    transition: 0.3s;
}
.regi-footer-btn:hover{
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    transition: 0.3s;
}
.allright_section{
    width:100%;
    float:left;
    /*padding:10px;*/
    background:#22182d;
    text-align:center;
    padding:10px 0px;
}
    .allright_section p{
        color:#b5b5b5;
        font-size:10px;
    }
        .allright_section p a{
            text-decoration:none;
            color:#b5b5b5;
        }
        .allright_section i{
            position: relative;
            top:-1px;
            animation: bounce 0.5s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            color:red;
        }
        @keyframes bounce {
            from {transform: scale(0.8); }
            to   { transform: scale(1.2); }
        }



#spotlight .header{
    background: none;
}
#spotlight .arrow{
    background-color: var(--secondary-color);
}
#spotlight.show{
    background: rgba(0, 0, 0, 0.9);
}








/* news section */
#news{
    width: 100%;
    margin-top : 100px;

}
.news-owl .item{
    background: rgb(247, 247, 247);
    ;
    border-radius: 5px;
    overflow: hidden;
}
.news-content{
    width: 100%;
    /* min-height : 150px; */
    padding: 20px 10px;
    box-sizing: border-box;
}
.news-content .news-tittle h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 25px;
    color : var(--primary-color)
    /* text-transform: uppercase; */
}
.news-content .news-description p{
    font-size: 15px;
    font-weight: 400;
    opacity: 0.8;
    line-height: 20px;
    height:60px;     
  
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
} 
.news-thumbnail{
    height: 200px;
}
.news-thumbnail img{
    height : 100%;
    width : 100%;
    object-fit: cover;
}
.new-owl-container{
    position: relative;
    padding: 0px 60px;
    box-sizing: border-box;
}

.news-nav{
    margin-top: 70px;
}
.news-section-heading{
    font-weight: 600;
    margin-bottom: 30px;
    color : var(--primary-color);
}
.news-info{
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
}
.publish-date {
    font-size: 11px;
    opacity: 0.7;
    height: 100%;
    padding-top: 5px;
}

.publish-date i {
    color: var(--secondary-color);
}
.share-news{
    height : 100%;
    padding-top : 5px;
    margin-right: 10px;
    font-size: 12px;
    opacity: 0.8;
    cursor: pointer;
}
.share-option{
    width: 100%;
    height : 0px;
    background: red;
    margin-top : 20px;
    display: flex;
    transition: 0.3s;
    overflow : hidden;
}
.share-active{
    height : 40px;
    transition: 0.3s;
    overflow : inherit;
}
.share-option a {
    width: calc(100% / 3);
    height : 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eaeaea;
    text-decoration: none;
    font-size: 14px;
}
.share-option a:nth-child(1) {
    background: var(--primary-color);
}
.share-option a:nth-child(2) {
    background: var(--primary-shade-color);
}
.share-option a:nth-child(3) {
    background: var(--primary-shade2-color);
}



#memebers{
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
}
.members-option{
    /*display: flex;*/
    /*justify-content: space-between;*/
    width : 100%;
    float :left;
    margin-bottom : 30px;
}
.search-holder{
    display: flex;
}
.sort-member{
    float :left;
}

.sort-member select{
    height: 45px;
    width: 80px;
    border: none;
    background: #eee;
    outline: none;
    font-size: 13px;
    text-indent: 8px;
}
.sort-member label{
    font-size: 13px;
    font-weight: bold;
}
#reset{
    float: left;
    margin-left: 15px;
    /* background: #a2a2a2; */
    padding: 13px;
    font-size: 14px;
    cursor : pointer;
    display :none;
}
.search-holder{
    float : right;
}
.search-holder input{
    height: 30px;
    border: none;
    text-indent: 10px;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    background: #eee;
}
.search-holder button{
    background : var(--secondary-color);
    color: white;
    border: none;
    font-size: 13px;
    width: 60px;
}
.search-holder input::placeholder{
    font-size: 13px;
}


.member-container{
    width : 100%;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    
}
.member-container::after {
    height: 0;
    width: 50%;
    content: "";
}
.member-holder {
    width: calc(100% / 6 - 10px);
    margin-bottom: 30px;
    margin : 5px;
    background : #eee;
    padding-bottom : 20px;
}
.member-thumb{
    width: 100%;
    height : 210px;
    overflow: hidden;
    border-radius: 5px;
}
.member-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.member-name{
    font-weight: bold;
    font-size: 14px;
}
.member-desig{
    font-size : 13px;
}
.member-details{
    margin-top: 15px;
    text-align: center;
}

.member-container {
    width: 100%;
    background: white;
}
/*.current{*/
/*    background: var(--secondary-color);*/
/*    color: white!important;*/
/*}*/


/* about-container */
.about-holder{


}
.about-menu{
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    float: left;
    background: #eee;
}
.about-menu h3{
    border-left: 3px solid var(--secondary-color);
    display: block;
    padding-left: 10px;
    font-weight: 500;
}
.about-menu ul{
    margin-top: 30px;
}
.about-menu ul li{
    list-style : none;
}
.about-menu ul li a{
    display: block;
    padding: 5px 0px;
    margin-bottom: 10px;
    text-decoration: none;
    color: rgb(110, 110, 110);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
}
.about-menu ul li a:hover{
    color: black;
}
.about-menu-nav{
    background: white;
    padding : 10px;
    box-sizing: border-box;
}
.about-social ul li{
    display: inline-block;
}
.about-social ul li a{
    padding-left: 10px;
    font-size: 20px;
    margin-right: 15px;
}
.about-social ul li a:hover{
    color : var(--secondary-color);
}
.about-container{
    width: calc(100% - 300px);
    float: right;
    min-height: 100vh;
    background: white;
    padding : 20px;
    box-sizing: border-box;
    padding-top : 30px;
}
.overview-heading {
    font-weight: 500;
    opacity: 0.8;
    color :var(--secondary-color);
}
.overview-conent{
    font-weight: 400;
    font-size: 16px;
    color: #272727!important;
}
.objective-holder{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 60px;

}
.objective{
    width: calc(100% / 2 - 30px);
}
.objective h3{
    margin-bottom: 10px;
    color :var(--secondary-color);
    font-size: 18px;
    font-weight: 500;
}
.objective p{
    font-size: 16px;
    font-weight: 400;
}

.split-3{
   width: calc(100% / 4 - 10px);
   background: #eee;
}

#registration{
    width: 100%;

}
.form-holder{
    width: 50%;
    margin: 0 auto;
    margin-top : 30px;
}

.split-form{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.split-form .forms{
    width: calc(100% / 2 - 40px);
}
.single-form{
    width: 100%;
    margin-top: 20px;
}
.number{
    display: flex;
    justify-content: space-between;
}
.number input:nth-child(1){
    width: 100%;
}
.number input:nth-child(2) {
    width: calc(100% - 70px);
}
.form-holder ::placeholder{
    opacity: 0.5;
    font-size: 13px;
}
.form-holder label{
    font-size: 13px;
    font-weight: 500;
    color: #272727;
}
.regi-terms{
    width: 100%;
    margin-top: 30px;
    display: flex;
}
.regi-check{
    width: 35px;
    margin-right : 5px;
}
.regi-check input{
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.regi-text{
    font-size : 12px;
}
.regi-text span {
    font-weight: 500;
    font-size: 13px;
}
.regi-button{
    width: 100%;
    height: 40px;
    margin : 30px 0px;
    background: rgb(26, 189, 26);
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    font-weight: 400;
    opacity : 0.5;
}
.form-holder input, textarea{
    font-weight: 200!important;
}
.news-read{
    text-decoration: none;
    font-size: 13px;
    display: block;
    margin-top : 15px;
    font-weight : 500;
    color : #555555;

}

.readMore-container{
    width: 40%;
    height: 100%;
    background: white;
    position: fixed;
    right: 0;
    /* display: none; */
    bottom: -100%;
    opacity: 0;
    z-index: 500;
    box-shadow: 0px 0px 10px #3636364a;

 
}
.readMore-container.active::after{
    content: 'scroll to read';
    text-align: center;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    box-sizing: border-box;
    font-weight: bold;
    color: var(--primary-color);
    width: 100%;
    height: 80px;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
    position: absolute;
    bottom: 0;
}
.close-readmore{
    width: 100%;
    height : 35px;
    
}
.close-readmore span{
    float: right;
    cursor: pointer;
}
.news-wrapper{
    height: 95%;
    margin: 0 auto;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;

}
.news-pop-image{
    width: 100%;
}
.news-wrapper h1{
    font-size: 25px;
    font-weight: 500;
    display : block;
    color: var(--primary-color);
    margin: 15px 0px;
}
.news-wrapper p {
    font-size: 15px;
    font-weight : 400;
}
.mobile-menu-trigger{
    width : 25px;
    /* height : px; */
    float : right;
    margin-right : 15px;
    margin-top: 28px;
    display: none;
}
.mobile-menu-trigger span{
    width: 100%;
    height: 3px;
    background: black;
    display: block;
    margin-bottom: 4px;
    background: var(--primary-color);
    opacity: 0.8;
}

.top-menu{
    width: 100%;
    background: var(--primary-color);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0px 25px;
    padding-top: 34px;
    position: absolute;
    z-index: 500;
    top : -100%;
    height: 300px;
   


}
.close-x-top{
    position: absolute;
    color: white;
    z-index: 5;
    top: 20px;
    right: 20px;
}

.top-menu a{
    display: block;
    width: 45%;
    height: 30px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    color: rgb(209, 209, 209);
    text-decoration: none;
    /* background: var(--primary-shade2-color); */
    font-size: 13.5px;
    text-transform: uppercase;
    font-weight: 500;
    /* border-bottom: 1px solid rgb(167, 167, 167); */
}
.donate-menu-btn{
    background: rgb(31, 170, 31);
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 30px;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.admin-page{
    /*background: url(../media/images/slidedummy3.jpg);*/
    /* background-position-y: -100px; */
    background-size: cover;
    background-repeat: no-repeat;
}
.page-hero{
    position: relative;
}
.page-hero::after{
    content: '';
    position: absolute;
    width: 100%;
    height : 100%;
    left : 0;
    top : 0;
    background: rgb(0, 0, 0, 0.6);
}
.activity-page {
    /*background: url(../media/images/feeding-India.jpg);*/
    background: url(../media/images/amala6.jpeg);
    /* background-position-y: -100px; */
    background-size: cover;
    background-repeat: no-repeat;
}

.regi-page {
    background: url(../media/images/join.jpg);
    /* background-position-y: -100px; */
    background-size: cover;
    background-repeat: no-repeat;
}


/* #contactpage */
#contactpage{
    width: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
  
}
.contact-flex-wrapper{
    width: 100%;
    height: auto;
    display: flex;
      padding : 0px 10%;
      box-sizing: border-box;
}
.contact-details{
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    background: rgb(245, 245, 245);
}
.contact-tittle span:nth-child(1) {
    font-size : 40px;
    display: block;
    color : var(--primary-color);
    font-weight: bold;
}
.contact-tittle span:nth-child(2) {
    font-size: 16px;
    display: block;
    font-weight: 400;
    display: block;
    margin-bottom: 30px;
    opacity: 0.8;
}

.contact-details-holder{
    width: 100%;
    display: flex;
    margin-bottom: 30px;
}
.details-part{
    display: flex;
}
.detail-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.detail-icon img{
    width: 30px;
}
.details-info span{
    display: block;
    padding-left: 20px;
    line-height: 25px;
    font-weight: 500;
    /* opacity: 0.8; */
    font-size: 14px;
}
.details-info span a{
    text-decoration: none;
    color: black;
    font-weight: 500;
    opacity: 0.8;
    font-size: 14px;
}


.contact-forms{
    width: 50%;
    padding: 20px;
    padding-top: 40px;
    background: var(--primary-color);
    box-sizing: border-box;
}
.contact-form-wrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contact-input-holder {
    width: 49%;
}
.contact-input-holder label{
    display: block;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
    font-size : 13px;
}
.contact-input-holder input{
    height: 30px;
    text-indent: 10px;
    width: 100%;
    background :none;
    border : none;
    outline : none;
    border-bottom : 1px solid var(--secondary-color);
    color : white;
    font-size : 14px;
    font-weight :bold;
}
.contact-input-holder ::placeholder{
    color: white;
    opacity: 0.4;
}
.contact-textarea-holder{
    width: 100%;
    margin-top: 30px;
}
.contact-textarea-holder ::placeholder {
    color: white;
    opacity: 0.4;
    font-family: sans-serif;
}
.contact-textarea-holder label{
    display: block;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
    font-size : 13px;
}
.contact-textarea-holder textarea{
    width: 100%;
    background :none;
    border : none;
    outline : none;
    border-bottom : 1px solid var(--secondary-color);
    color : white;
    font-family: sans-serif;
    font-weight : bold!important;
}

.contact-form-wrapper button{
    margin-top: 30px;
    display: block;
    width: 100%;
    height: 35px;
    border: none;
    background: var(--secondary-color);
    color: white;
}

.active-menu{
    border-bottom: 2px solid var(--secondary-color)!important;
}



/*approve page*/
.approve-form{
    display : flex;
    flex-wrap : wrap;
    justify-content : space-between;
}
.approve-form-holder{
    width : 47%;
    margin-bottom : 30px;
}
.pay-btn-approve{
    width : 100%;
    background : green;
    padding : 10px 0px;
    color : white;
    border : none;
    outline : none;
    font-weight : bold;
}

.book{
    text-decoration : none;
    border : 1px solid var(--secondary-color);
    padding : 5px 10px;
    background : none;
    font-size : 13px;
    color : white;
    border-radius : 15px;
}



.popupVideo {
  position: fixed;
  z-index: 20;
  width: 70%;
  background: black;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

@media (max-width: 768px) {
  .popupVideo {
    width: 85%;
  }
}

@media (max-width: 480px) {
  .popupVideo {
    width: 95%;
  }
}

.popupVideo iframe {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 1800px) {
  .popupVideo iframe {
    height: 75vh;
  }
}

@media (max-width: 768px) {
  .popupVideo iframe {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .popupVideo iframe {
    height: 250px;
  }
}

.popupVideo .closePopupVideo {
  position: absolute;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 18px;
  color: white;
  background: rgba(0, 0, 0, 0.185);
  right: -40px;
  top: 0;
  z-index: 21;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
}

@media (max-width: 480px) {
  .popupVideo .closePopupVideo {
    right: 0px;
    top: -40px;
  }
}

.popupVideo .closePopupVideo:hover {
  -webkit-transition: .3s;
  transition: .3s;
  background: black;
}

.popupVideo .closePopupVideo .bank_close_line1{
    position: absolute;
    width:50%;
    height:2px;
    background:#d8d6d6;
    transform:rotate(47deg);
    margin-top:0px;
}
.popupVideo .closePopupVideo .bank_close_line2{
    position: absolute;
    width:50%;
    height:2px;
    background:#d8d6d6;
    transform:rotate(-47deg);
    margin-top:-2px;
}