/* Fida Marwat (Sr. UXUI and Front End Developer) */



/* first media query for mobile responsiveness */

@media(max-width:767px){

	.custom-col-sm-6{
		width: 50%;
	}

	.volunteer-and-support .card{
		margin-bottom: 30px;
	}

	.custom-volunteer-and-support .card{
		width: 100% !important;
		margin-bottom: 30px;
	}

	.volunteer-and-support .card{
		margin-bottom: 30px;
	}

	#top-header a{
	  width: 100%;
	}

	#top-header img{
	  width: 70%;
	  margin: auto;
	  display: block;
	}

	#top-header h1{
	   text-align: center;
	   line-height: 36px;
	   font-size: 22px;
	   margin-top: 16px;
	}

	#about,
	#cause,
	#kindness,
	#story-mission,
	#news,
	#quenching,
	#footer{
	  margin-top: 40px;
	}

	.navbar-toggler{
	 	padding: 5px;
	 	overflow: hidden;
	}

	#about .img-box{
    	display: none;
    }

	h2 {
	    font-size: 26px;
	    line-height: 34px;
    }

    #cause .card{
    	margin-top: 16px;
    }

    #kindness .img-box-bottom{
    	margin-top: 24px;
    	height: 350px;
    }

    #kindness .img-box-top{
    	height: auto;
    	margin-bottom: 24px;
    }

    #story-mission .w-50{
    	width: 100% !important;
    }

    #story-mission .h-100{
    	height: auto !important;
    }

    #story-mission .d-custom-none{
    	display: none;
    }

    #news .card{
    	margin-top: 16px;
    }

    #footer ul{
    	margin-bottom: 24px !important;
    }
}


/* second media query for tablet responsiveness */

@media(min-width:768px) and (max-width:991px){

	.custom-volunteer-and-support .card{
		width: 33.33333333% !important;
		margin: 0px 12px;
	}

	.volunteer-and-support .card{
		margin-bottom: 30px;
	}

	#top-header a {
	   width: 26%;
	}
   
   #top-header h1{
   	font-size: 32px;
      line-height: 48px;
   }

	.navbar-toggler{
	 	padding: 5px;
	 	overflow: hidden;
	}

	.d-sm-none{
		display: none !important;
	}

	.d-sm-flex{
		display: flex !important;
	}

	h2 {
	    font-size: 28px;
	    line-height: 36px;
    }

    #about .img-box{
    	display: none;
    }

    .col-sm-12{
    	width: 100%;
    }

    .col-sm-6{
    	width: 50%;
    }

    #kindness .img-box-bottom{
    	height: 350px;
    }

    #kindness .img-box-top{
    	height: 350px;
    }

    #story-mission .img-fluid{
    	height: 100%;
    }

    #story-mission .btn-success{
    	margin-bottom: 32px !important;
    }

}



/* third media query for laptop responsiveness */

@media(min-width:992px) and (max-width:1200px){}

@media(min-width:1024px) and (max-width:1280px){
   .carousel-caption {
	    top: 24%;
	}

	#kindness .img-box-bottom{
    	height: 450px;
    }

    #kindness .img-box-top{
    	height: 450px;
    }

    #story-mission .img-fluid{
    	height: 100%;
    }

    #story-mission .btn-success{
    	margin-bottom: 32px !important;
    }
}

@media(min-width:1201px) and (max-width:1280px){}