/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Sakhi Charity & Donations / .section 
6. core-features / .core-features
7. Join Charity / .section 
8. Footer / .footer 
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color codes]

Background: #ffffff (white)
Content:    #222 (light black)
Header h1:  #222 (green)
Header h2:  #222 (red)
Footer:     #324148 (dark black)

a (standard):   #222 (dark black)
a (visited):    #0b8e26 (light green)
a (active): #000 (black)
-------------------------------------------------------------------*/

.counter {
padding:50px 0!important
}
.counter h1 {
font-size:50px
}
.counter span {
text-transform:uppercase;
letter-spacing:1px
}
/*core-features*/
.core-features {
box-shadow: 0 0 10px 0 rgba(83, 82, 82, 0.1);
margin-bottom: 30px;
padding: 50px 0;
text-align: center;
background: #fff;
}
.circle {
border: 5px solid #f3f3f5;
border-radius: 50%;
box-shadow: 0 0 0 2px #e7e8ec inset;
color: #27ae60;
display: inline-block;
height: 120px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
width: 120px;
}
.core-features h3 {
color: #232323;
font-size: 19px;
padding: 10px 0 0 5px;
margin:0;
text-transform: capitalize;
}
.core-features p {
color: #000;
font-size:14px;
padding: 0 15px;
font-weight:400;
margin-bottom: 0;
min-height: 40px;
}
.circle img {
display: table;
margin: 18px auto;
width: 70px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3 s ease-in-out;
}
.gray {
background-color: #f7f8fb;
padding: 30px 0;
}
.core-features:hover .circle {
border: 10px solid #009c37;
}
.core-features:hover .circle img {
display: table;
margin: 18px auto;
width: 60px;
}
/*core-features*/
.bg-imgg {
background:url(../images/bg.jpg) top left repeat;
background-size:100% 100%;
padding:100px 0
}
/* #Counter
================================================== */

.counter-wrap {
position:relative;
width:100%;
}
.counter-wrap.ver-2 {
height: 7rem;
}
.counter-wrap.ver-2.land {
height: 6rem;
}
.counter-wrap.ver-2.land em {
font-style: normal;
}
.counter-wrap.ver-2.land sup {
font-size: 3.8rem;
font-weight: 100;
}
.counter-wrap.ver-2.land p span.small-2 {
opacity: 0.3;
font-size:6rem;
line-height:6rem;
height:6rem;
}
.counter-wrap.ver-2 p span.small-2 {
position: absolute;
top:0;
left:0;
width: 100%;
font-size:7rem;
line-height:7rem;
height:7rem;
opacity: 0.5;
font-weight: 100;
z-index: 1;
}
.counter-wrap.ver-2 h6 {
position: absolute;
top:50%;
left:0;
margin-top: -0.5rem;
font-weight: 600;
width: 100%;
z-index: 2;
}
.counter-wrap.ver-3 {
height: 9rem;
}
.counter-wrap.ver-3 p span.small-2 {
position: absolute;
top:0;
left:0;
width: 100%;
font-size:9rem;
line-height:9rem;
height:9rem;
opacity: 0.6;
font-weight: 100;
z-index: 1;
}
.counter-wrap.ver-3 h6 {
position: absolute;
top:50%;
left:0;
font-size: 1.2rem;
margin-top: -0.6rem;
font-weight: 600;
width: 100%;
color: #444;
z-index: 2;
}
.counter-wrap h6 {
text-align:center;
padding-bottom: 0;
margin-bottom:0;
font-size:1rem;
font-weight: 400;
letter-spacing: 2px;
color: #999;
}
.counter-wrap.dark h6 {
color: #fff;
}
.counter-wrap p {
text-align:center;
}
.counter-wrap p span {
text-align:center;
font-size:150px;
line-height:120px;
vertical-align: top;
height:120px;
font-weight: 100;
}
.counter-wrap p span.med {
text-align:center;
font-size:80px;
line-height:70px;
height:70px;
font-weight: 200;
}
.counter-wrap p span.med-2 {
text-align:center;
font-size:70px;
line-height:60px;
height:60px;
font-weight: 200;
}
.counter-wrap p span.small {
text-align:center;
font-size:40px;
line-height:30px;
height:30px;
font-weight: 400;
}
.counter-wrap p span.small-2 {
text-align:center;
font-size:37px;
line-height:32px;
height:32px;
font-weight: 300;
}
.counter-wrap p span.small.dec {
text-align:center;
font-size:26px;
line-height:20px;
height:20px;
font-weight: 300;
}

.temp-img a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.template {position: relative; -webkit-transition:all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease;	transition:all 3s ease;}
.template:hover{background-position:left bottom;}
.template {position:relative; background-size:100%!important; background-repeat:no-repeat!important; height:600px; box-shadow:0 4px 8px rgba(0,0,0,0.4);}

.demo1{background:url(../images/layouts/demo1.jpg) top center}
.demo2 {background:url(../images/layouts/demo2.jpg) top center}
.demo3 {background:url(../images/layouts/demo3.jpg) top center}
.demo4 {background:url(../images/layouts/demo4.jpg) top center}




@media (max-width:768px) {
.display-4 {
font-size: 1.8rem;
font-weight: 300;
line-height: 1.5385;
}
.bg-imgg {
padding:50px 0
}
.bg-dark-alpha {
text-align:center
}
.bg-dark-alpha .text-right {
text-align:center!important
}
.bg-dark-alpha .navbar-text {
padding-top:5px;
padding-bottom:5px;
}
.navbar-nav-link {
padding-top:5px;
padding-bottom:5px;
}
}
@media (max-width:375px) {
.display-4 {
font-size:1.3rem;
font-weight: 300;
line-height: 1.5385;
}
}
@media (max-width: 360px) {
.display-4 {
font-size:1.5rem;
font-weight: 300;
line-height: 1.5385;
}
}