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



/* first media query for mobile responsiveness */

@media(max-width:767px){

	#banner-content br{
		display: none !important;
	}

	#banner-content h1 {
	    line-height: 40px;
	    font-size: 26px;
	    margin-bottom: 30px;
	}

	.custom-row-text p{
		text-align: justify;
	}

	.navbar-brand{
		width: 230px;
	}

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

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

	.custom-nav{
		flex-direction: row;
		margin-top: 10px;
	}

	h1{
		font-size: 28px;
        line-height: 40px;
	}

	h2{
		line-height: 36px;
	}

	#topbar .col-md-12{
		text-align: center !important;
	}

	#banner{
		padding: 76px 0px;
	}

	#documentation .col-md-4{
		text-align: center;
	}

	#documentation .col-md-6{
		text-align: center;
		margin-top: 30px;
	}

    .line{
		margin: auto;
	}

	#medical-software .col-md-6{
		text-align: center;
		margin-bottom: 30px;
	}

	.carousel-item{
		text-align: center;
	}

	.carousel-item img{
		margin-bottom: 30px;
	}

	#software-features .card {
		width: 44%;
		height: auto;
	}

	#interuptions .col-md-6{
		text-align: center;
		margin-top: 30px;
	}

	#footer .col-md-2{
		margin-bottom: 40px;
	}

	#footer .col-md-2 img{
		width: 40%;
	}

	#footer .col-md-3{
		margin-bottom: 40px;
	}

	#documentation .card{
	  width: 100%;
	  margin: 0px 0px 20px 0px;
	}

	#map iframe{
		height: 300px;
	}

}


/* second media query for tablet responsiveness */

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

	#bottom .col-md-4{
		width: 50%;
	}

	#documentation .card{
	  width: 33.33333333%;
	  margin: 0px 15px;
	}

	.sm-img{
		margin-bottom: 30px;
	}

	.top-sm-img{
		margin-top: 30px;
	}

	.carousel-item .col-md-6{
		width: 100%;
		text-align: center;
	}

	.carousel-item img{
		margin-bottom: 30px;
	}

	.line{
		margin: auto;
	}

	.custom-nav{
		flex-direction: row;
		margin-top: 10px;
	}

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

	.col-sm-6{
		width: 50%;
		margin-bottom: 40px;
	}

	.col-sm-3{
		width: 25%;
	}

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

	.form-check{
		display: flex;
		justify-content: center;
	}

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

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

	#software-features .card {
		width: 30%;
	}

	#footer .custom-col-sm-12{
		text-align: left !important;
		width: 100%;
		margin-bottom: 20px;
		display: flex;
		text-align: center;
		justify-content: space-between;
	}

	#footer p{
		margin-top: 30px;
	}

	#banner{
		padding: 160px 0px;
	}


}



/* third media query for laptop responsiveness */

@media(min-width:992px) and (max-width:1200px){
	#banner{
		padding: 210px 0px;
	}
}

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

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

@media(min-width:1367px) and (max-width:1600px){
	#banner{
		padding: 310px 0px;
	}
}

@media(min-width:1601px) and (max-width:1920px){
	#banner{
		padding: 350px 0px;
	}
}

@media(min-width:1921px) and (max-width:3000px){
	#banner{
		padding: 570px 0px;
	}
}