*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root{
   --bonecolor: #f1f1f1;
   --white: white;
   --call: #002366;
   --red: red;
   --blue: blue;
   --crimson: #b90e0a;
   --world: #89cff0;
   --lightblack: #363636;
}
html{
  font-size: 14px;
}
body{
	font-family: 'Merriweather', serif!important;
}
.first_nav{
    background-color: var(--lightblack);
    padding-top: 4px;
    padding-bottom: -2px;
    font-size: 13px;
    line-height: 5%!important;
}

.globe{
  height: 95px!important;
  width: 95px!important;
  padding-top: 3px;
  padding-bottom: 3px;
}
.world_globe{
  position: absolute;
  top: 10px;
  left: 43px;
  color: var(--red);
  font-size: 40px;
  font-weight: 900;
}
.world_globes{
  position: absolute;
  top: 21px;
  left: 65px;
  color: var(--red);
  font-size: 40px;
  font-weight: 900;
}
.golbe_foundation{
  font-size: 30px;
  font-weight: 900;
  color: var(--red);
  font-family: 'Satisfy', cursive;
}
.hours{
  min-height: 3px;
}
.links_down{
  margin-top: 17%;
  padding-left: 1%;
}
.fa-phone{
	color: var(--white);
	background-color: var(--call);
	border-radius: 50%;
	padding: 5px;
  margin-left: 13%;
}
.fa-envelope-o{
	color: var(--white);
	background-color: var(--red);
	border-radius: 50%;
	padding: 5px;
	margin-left: 6%;
}
.fa-clock-o{
  color: red;
}
.opening_hours{
  padding-top: 5px;
}
.navbar{
	background-color: var(--crimson);
}
.nav-item{
  border-right: 1px dashed white;
  transition: all .4s;
}
.nav-item:last-child{
  border-right: none;
}
.nav-item:hover{
  background-color: var(--red);
}
.phone_call{
  margin-left: -7.7%!important;
}
.dropdown-toggle{
	color: var(--white)!important;
}
.dropdown-menu{
  background-color: var(--red)!important;
  transition: all 1s;
}
.dropdown-menu:hover a{
  color: black!important;
}
.caro_image{
	height: 535px;
	background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas6.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.caroo_image{
	height: 535px;
	background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.carooo_image{
	height: 535px;
	background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas8.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.health_awarness{
  height: 535px;
  background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas4.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.environment_awarness{
  height: 535px;
  background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.child_awarness{
  height: 535px;
  background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas7.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.women_awarness{
  height: 535px;
  background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas11.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.about_awarness{
  height: 500px;
  background: linear-gradient(to top,rgba(0, 0, 0, 0.7) 35%,rgba(0, 0, 0, 0.0)),url('images/aas9.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.mission{
  color: white;
  background-color: var(--red);
  padding: 5px;
}
.carousel-caption{
	margin-bottom: 5%;
	margin-left: 3%;
}
.donate{
	border: none;
	outline: none;
	border-radius: 50px;
	background-color: var(--crimson);
	color: var(--white);
	padding: 10px;
}
.donate_part{
	border: none;
	outline: none;
	border-radius: 50px;
	background-color: var(--crimson);
	color: var(--white);
	padding: 10px;
}
.donate_down{
	margin-top: 23%!important;
	margin-left: 39%;
}
.aas{
	font-size: 3rem;
	margin-left: 22%;
	font-weight: 800;
	width: 0ch;
	overflow: hidden;
	white-space: nowrap;
	animation: walking 4s linear infinite;
	transition: all 1s;
}
@keyframes walking {
	0%{
		width: 0ch;
	}
	100%{
		width: 15ch;
	}
}
.gap{
	margin-top: 6%;
}
.top_btn{
	margin-top: 6%;
}
.view_more{
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 3px solid var(--crimson);
	padding: 2%;
	color: var(--red);
}
.view_more:hover{
   color: var(--black);
   text-decoration: none;
}
.fa-long-arrow-right:hover{
   transform: translateX(15px);
   width: 100px;
}
.first_image{
	height: 100%;
	width: 100%;
}
.first_image{
  --c: var(--red);
  --b:0px; 
  --d: 20px;
  
  --_s: calc(var(--d) + var(--b));
  
  color: var(--c);
  border: solid #0000;
  border-width: var(--b) var(--b) var(--_s) var(--_s);
  background:
    conic-gradient(at left var(--d)  bottom var(--d),
      #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
      #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
  transform: translate(calc(var(--d)/-1),var(--d));
  clip-path: 
    polygon(
     var(--d) 0%, 
     var(--d) 0%, 
     100% 0%, 
     100% calc(100% - var(--d)),
     100% calc(100% - var(--d)),
     var(--d) calc(100% - var(--d))
    );
  transition: 1s;
}
.first_image:hover {
  transform: translate(0,0);
  clip-path: 
    polygon(
     0% var(--d), 
     var(--d) 0%, 
     100% 0%, 
     100% calc(100% - var(--d)), 
     calc(100% - var(--d)) 100%, 
     0% 100%
   );
}
.helping_hand {
   color: #0000;
  background: linear-gradient(90deg,red 50%,#000 0) 
    var(--_p,100%)/200% no-repeat;
  -webkit-background-clip: text;
   background-clip: text;
  transition: 3s;
}
.helping_hand:hover {
 --_p: 0%;
}
.center_buton{
	text-align: center;
}
.counter_line{
	background-color: var(--red);
}
.counter_lin{
  color: var(--red);
}
.counter_line_sec{
	text-align: center;
	padding: 30px;
	color: var(--bonecolor);
}
.counter-container{
	font-size: 30px;
}
.card-img-top:first-child{
	margin-left: 3.5%;
}
.we_do{
   background: linear-gradient(90deg, rgba(110,50,47,0.7631652490097601) 1%, rgba(142,60,48,0.9) 100%),url('images/as9.jpg'); 
   background-repeat: no-repeat;
   background-size: cover;
   padding: 30px;
   color: white;
}
.we_does{
   background: linear-gradient(90deg, rgba(110,50,47,0.7631652490097601) 1%, rgba(142,60,48,0.9) 100%),url('images/as11.jpg'); 
   background-repeat: no-repeat;
   background-size: cover;
   padding: 30px;
   color: white;
}
.we_did{
   background: linear-gradient(90deg, rgba(18,21,66,0.7631652490097601) 1%, rgba(33,48,87,0.9) 100%),url('images/as13.jpg'); 
   background-repeat: no-repeat;
   background-size: cover;
   padding: 30px;
   color: white;
}
.we_dids{
   background: linear-gradient(90deg, rgba(18,21,66,0.7631652490097601) 1%, rgba(33,48,87,0.9) 100%),url('images/as5.jpg'); 
   background-repeat: no-repeat;
   background-size: cover;
   padding: 30px;
   color: white;
}
.ngo_image{
	height: 80%;
	width: 100%;
}
.world{
	background-color: var(--world);
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 9.5%;
}
.thankyou:hover{
   text-decoration: none;
}
footer{
	background-color: var(--lightblack);
	font-size: 13px;
	padding-top: 3%;
}
footer a{
	color: white;
}
footer a:hover{
	text-decoration: none;
	color: white;
}
.fa-facebook{
	color: white;
	background-color: #3b5998;
	border-radius: 50%;
	padding: 10px;
}
.fa-twitter{
	color: white;
	background-color: #00acee;
	border-radius: 50%;
	padding: 10px;
}
.fa-instagram{
	color: white;
	background: linear-gradient(to bottom,blue,red,yellow);
	border-radius: 50%;
	padding: 10px;
}
.fa-youtube-play{
	color: white;
	background-color: #c4302b;
	border-radius: 50%;
	padding: 10px;
}
.invol{
  padding-left: 5%!important;
}
.gtop{
	position: fixed;
	width: 40px;
	height: 40px;
	background-color: var(--red);
	bottom: 20px;
	right: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	z-index: 99;
	color:white;
	font-size: 20px;
}
.whatsap{
    position: fixed;
	bottom: 85px;
	right: 15px;
	z-index: 10;
	border: 1px solid white;
	padding-top: 10px;
	padding-left: 4.2px;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: white;
	box-shadow: -5px -5px 5px gray;
}
.social{
	padding-left: 31%!important;
}
.loop{
  box-shadow: inset 0 0 0 0 var(--red);
  color: var(--red);
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.loop:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 var(--red);
  width: 65%;
}
.fa-heart-o{
	color: var(--red);
}
#time{
  padding-left: 3%;
}
.gall{
	padding-top: 8%;
	padding-left: 4%;
}
.heavy{
	background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.9)),url('images/gallery.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-top: 2%;
	padding-bottom: 9%;
}
.join_us_page{
  background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.9));
}
.zoom{
	transition: all 1s;
}
.zoom:hover{
	rotate: 4deg;
}
.contact_image{
	background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.9)),url('images/sky.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.joinbox{
  margin: 0 auto;
  width: 300px!important;
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 25px rgba(0,0,0,0.0);
  border-radius: 10px;
  margin-top: 30px!important;
  margin-bottom: 30px!important;

}
.joinbox .user-box {
  position: relative;
}
.joinbox .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.joinbox .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.joinbox form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}
.joinbox a:hover {
  background: red;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px red,
              0 0 25px red,
              0 0 50px red,
              0 0 100px red;
}
.joinbox a span {
  position: absolute;
  display: block;
}
.joinbox a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, white);
}
.joinbox a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, white);
}
.joinbox a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, white);
}
.joinbox a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, white);
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}
.joinbox a span:nth-child(1) {
  animation: btn-anim1 1s linear infinite;
}
.joinbox a span:nth-child(2) {
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}
.joinbox a span:nth-child(3) {
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}
.joinbox a span:nth-child(4) {
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

.login-box {
  margin: 0 auto;
  width: 300px!important;
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 25px rgba(0,0,0,0.0);
  border-radius: 10px;
  margin-top: 30px!important;
  margin-bottom: 30px!important;

}
.login-box .user-box {
  position: relative;
}
.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}
.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}
.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}
.login-box a span {
  position: absolute;
  display: block;
}
.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
}
.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
}
.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
}
.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}
.login-box a span:nth-child(1) {
  animation: btn-anim1 1s linear infinite;
}
.login-box a span:nth-child(2) {
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}
.login-box a span:nth-child(3) {
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}
.login-box a span:nth-child(4) {
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}
.colouring{
  color: var(--red);
}

/* responsive part start */
@media screen and (max-width: 768px){
html{
    font-size: 15px;
}
.caro_image,.caroo_image,.carooo_image{
  height: 450px;
  background-size: 100% 100%;
}
.about_awarness,.environment_awarness,.health_awarness,.child_awarness,.women_awarness{
   height: 300px;
  background-size: 100% 100%;
}
.carousel-caption{
  margin-bottom: -5%!important;
}
.aas {
  font-size: 20px;
  margin-left: 9%;
}
.res_p{
  text-align: justify;
}
.res_pro{
  margin-top: 7%;
}
.navbar-nav{
  margin-top: 6%;
}
.navbar-nav .nav-item{
  font-size: 13px;
}
.first_nav{
  padding-bottom: 5px;
}
.first_image{
  margin-top: 5%;
  margin-left: 3%;
}
.gap-1{
  margin-top: 10%!important;
}
.res_card{
  margin-left: 6.5%;
}
.we_do,.we_dids,.we_does,.we_did{
  margin-left: 4.3%;
  margin-bottom: 2%;
}
.res_event:first-child{
  margin-top: 1%!important;
}
.res_event:last-child{
  margin-top: 1%!important;
}
.res_event{
  margin-top: 9%;
}
.fa-heart-o{
  display: none;
}
.support{
  margin-top: 8%;
}
.reserved,.res_pic{
  text-align: center;
}
.orders{
  order: 1;
}
.order{
  order: 2;
}
.counter_lin{
  text-align: center;
}
.gall{
  margin-bottom: 15%;
}
.zoom-1{
  margin-top: 4%;
}
.zoom-2{
  margin-top: 8%;
}
.zoom-3{
  margin-top: 12%;
}
.zoom-4{
  margin-top: 9%;
  height: 130%;
}
.zoom-5{
  margin-top: 25%;
  height: 110%;
}
.zoom-6{
  margin-top: 30%;
  height: 100%;
}
.zoom-7{
  margin-top: 27%;
  height: 96%;
}
.zoom-8{
  margin-top: 13.5%;
  height: 115%;
}
.zoom-9{
  margin-top: 14%;
  height: 115%;
}
.zoom-10{
  margin-top: 14%;
  height: 115%;
}
.zoom-11{
  margin-top: 14%;
  height: 115%;
}
.res_ter{
  margin-top: 1%;
}
.heavy{
  padding-bottom: 29%;
}
.opening_hours{
  text-align: center;
}
#time{
   display: none;
}
.phone_call{
  margin-left: -12%!important;
  margin-bottom: 3%;
}
.donate_down{
  margin-bottom: 5%;
  margin-left: 35%;
}
.as_a{
  width: 100%;
  padding-left: 10%!important;
}
.res_address{
  height: 50%;
  width: 100%;
}
.golbe_foundation{
  font-size: 20px!important;
}
.globe_down{
  margin-top: 5%;
}
.donate_down{
  margin-top: 8%!important;
}
.links_down{
  margin-left: 21.5%;
  margin-top: 8%;
}
}