@media (max-width: 767px){
	.social
	{
		text-align: center
	}
	.social a
	{
		font-size: 15px
	}
	.name
	{
		font-size: 21px !important;
	}
	.name .en,
	.name .ar
	{
		font-size: 17px !important
	}
	.social i
	{
		margin-left: 5px;
		font-size: 17px
	}
	.navbar-default
	{
		margin-bottom: 0
	}
	.navbar-default .navbar-toggle,
	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form
	{
		border-color: transparent
	}
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > li > a
	{
		font-weight: 500
	}
	.navbar-default .navbar-nav > .active > a:hover,
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > .active > a:focus,
	.navbar-default .navbar-nav > .active > a:focus
	{
		background-color: white;
		color: #F7B733;
	}
	.navbar-nav .open .dropdown-menu
	{
		background-color: #F9B271;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a
	{
		color: black
	}
	.navbar-nav
	{
		margin-left: 20px
	}	
	.flex-it
	{
		display: flex;
		flex-direction: column
	}
	.flex-one
	{
		order: 1
	}
	.flex-two
	{
		order: 2
	}
	details
	{
		margin-top: 20px
	}
	.heading-visible
	{
		font-size: 20px !important;
		text-align: center;
		text-decoration: underline
	}
	.img-mobile
	{
		margin-bottom: 30px
	}
	.moving-bar
	{
		margin-top: 0;
		width: 600%;
		position: relative;
		left: 105%;
		-webkit-animation: 20s linear infinite bar;
		-moz-animation: 20s linear infinite bar;
		-ms-animation: 20s linear infinite bar;
		-o-animation: 20s linear infinite bar;
		animation: 20s linear infinite bar;
	}
	@keyframes bar {
		0% {
		left: 98%
		}
		100% {
		left: -680%
		}
	}
	.to-top
	{
		bottom: 30px;
		right: 25px
	}
	footer .footer-map
	{
	padding-top: 10px
	}
	footer ul
	{
		margin-top: 20px
	}
	footer details a
	{
		margin-left: 0 
	}
	footer .fa-facebook
	{
		margin-left: 40px
	}
	footer .contact-details p
	{
		text-align: left
	}
	footer .copyrights p
	{
		text-align: left;
		font-size: 12px
	}
	footer .social-bottom
	{
		margin-bottom: 20px
	}
	.thumbnail h3 a
	{
		color: black;
		
	}
	.thumbnail .btn
	{
		text-transform: capitalize;
		text-align: center
	}
	.service-content
	{
		width: 94%;
		margin: 20px auto;
		border: 1px solid #ccc;
		box-shadow: 2px 2px 10px grey
	}
	.services-breif .clearfix
	{
		margin-bottom: 20px
	}
	.services-breif .service-content a
	{
		display: block;
		text-align: center;
		margin-bottom: 20px
	}
	.services-breif .service-content .lead
	{
		text-align: justify
	}
	.services-breif .service-content img
	{
		max-width: 100%;
		margin-left: 0
	}
	/*start slider */
	.slider
	{
		height: auto
	}
	.slider .container
	{
	margin-left: 0;
	margin-right: 0;
	padding-left: 0; 
	padding-right: 0 
	}
	.carousel
	{
		width: 100%;
		min-height: 100px;
		left: 0;
		margin-top: 0 
	}
	.carousel-control.left,
	.carousel-control.right
	{
		background: none
	}
	.carousel-caption
	{
		position: absolute;
		top: 51%;
		left: 20%;
		z-index: 999;
		background-color: transparent
	}
	.carousel-caption > a h2
	{
		font-size: 20px !important;
		margin-top: 0
	}
	.carousel-caption > a p
	{
		font-size: 15px !important;
		color: white;
		text-align: center
	}
	.overlay
	{
		background-color: rgba(169, 169, 169, 0.4)
	}
	/* end slider */
	
	/* home page end */
	
	/* about us page start */
	.about-section img
	{
		width: 170px;
		height: 170px;
		margin-top: 10%
	}
	.about-section p
	{
		text-align: justify
	}
	.brief, .message
	{
		margin-bottom: 10%
	}
	.brief p, .message p, .vision p, .features p
	{
		margin: 0 auto;
	}
	.brief h3, .message h3, .vision h3, .features h3
	{
		text-align: center;
	}
	/*home page end */
	/* about page start */
	.about-content
	{
		margin: 40px 0
	}
	.about-section img
	{
		width: 100%;
		height: 100%;
		margin-top: 0
	}
	/* about page end */
	
	/* services start */
	.breadcrumb
	{
		text-align: left
	}
	.service-details img
	{
		height: 250px;
		padding-top: 0;
		margin-top: 0;
		margin-bottom: 30px
	}
	.service-details h3
	{
		margin-top: 0
	}
	.service-details p
	{
		margin-bottom: 0;
		padding-bottom: 0
	}
	.points
	{
	margin-left: 20px;
	}
	/* services end */
	.lds-dual-ring
	{

    position: relative;
	left: 50%;
	top: 50%;
	margin: -90px 0 0 -80px
	}
	.lds-dual-ring div 
	{
		position: absolute;
		width: 120px;
		height: 120px
	}
	.lds-dual-ring div:nth-child(2) 
	{
  		width: 100px;
  		height: 100px;
	}
}

@media (min-width: 767px) and (max-width: 991px){
	
	.heading-visible
	{
		font-size: 30px !important
	}
	.img-mobile
	{
		margin-bottom: 30px
	}
	footer details a
	{
		margin-left: 0
	}
	.service-content a
	{
		display: block;
		text-align: center;
		margin-bottom: 20px
	}
	.service-content
	{
		width: 90%;
		margin: 20px auto;
		border: 1px solid #ccc;
		box-shadow: 2px 2px 5px 2px grey;
	}
	.service-content img
	{
		max-width: 100%;
		margin-left: 0
	}
	.service-content,
	.flex-it
	{
		display: flex;
		flex-direction: column
	}
	.service-details img
	{
		height: 250px;
		padding-top: 0;
		margin-top: 0;
		margin-bottom: 30px
	}
	.service-details h3
	{
		margin-top: 0
	}
	.service-details p
	{
		margin-bottom: 0;
		padding-bottom: 0
	}
	.flex-one
	{
		order: 1
	}
	.flex-two
	{
		order: 2
	}
	.moving-bar
	{
		margin-top: 0;
		width: 1500%;
		position: relative;
		left: 105%;
		-webkit-animation: 20s linear infinite bar;
		-moz-animation: 20s linear infinite bar;
		-ms-animation: 20s linear infinite bar;
		-o-animation: 20s linear infinite bar;
		animation: 20s linear infinite bar;
	}
	@keyframes bar {
		0% {
		left: 98%
		}
		100% {
		left: -370%
		}
	}
}

/* medium screen */
@media (min-width: 992px) and (max-width: 1199px){
	.navbar-inverse .navbar-nav > li > a
	{
		font-size: 14px
	}
	.social i
	{
		margin-left: 5px;
		font-size: 17px
	}

}

@media (min-width: 1200px){
	.moving-bar
	{
		margin-top: 0;
		width: 230%;
		position: relative;
		left: 105%;
		-webkit-animation: 23s linear infinite bar;
		-moz-animation: 23s linear infinite bar;
		-ms-animation: 23s linear infinite bar;
		-o-animation: 23s linear infinite bar;
		animation: 23s linear infinite bar;
	}
	@keyframes bar {
		0% {
		left: 98%
		}
		100% {
		left: -240%
		}
	}

}
