/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap');

/* COLORS
orange: #f16531
dark gray: #323232
light gray: #969696

FONTS:
font-family: 'Roboto Condensed', sans-serif;
*/

/*
============
UNIVERSAL 
============
*/

html, body {
  font-family: 'Roboto Condensed', sans-serif;
  overflow-x: hidden;
  }

a:hover, #contact .btn:hover, .btn-services:hover,
 #contact-info a:hover .fa-phone, #contact-info a:hover .fa-envelope,
 footer a:hover, .modal .btn-close:hover, #thankyou .btn:hover, modal .btn-close:hover,
.fa-cloud-download-alt:hover {
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}


#about h2, #services h2, #reviews h2, #contact h2 {
	text-align: center;
	color: #323232;
	font-weight: 800;
	padding-bottom: 10px;
	text-transform: uppercase;
	font-size: 3.5em;
}

#services p, #reviews p, #contact p {
	color: #3d3d3d;
	font-size: 1.2em;
	line-height: 2em;
	padding: 0 10px 25px 10px;
}

.anchor {
	position: absolute;
	margin-top: -35px;
}

.flip {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}


/*
============
NAVIGATION 
============
*/

.navbar-brand img {
  width: 220px;
  height: auto;
 }

.navbar {
  font-weight: 600;
  background: #fff;
  text-transform: uppercase;
  font-size: 1em;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
  border-bottom: 3px solid #f16531;
  color: #f16531;
 }

 .navbar-collapse {
	margin-top: 5px;
 	border-top: 1px solid rgba(250,250,250,0.4);
 }

.navbar-toggler .fa-ellipsis-v { color: #323232;}

.navbar-nav a { color: #323232;}


.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}

.nav-link .fa-phone {color: #f16531;}

/*
HOVER FX
*/

.navbar-nav a:hover, .navbar-nav a:focus, 
.navbar-nav a:active {
  color: #f16531;
}

/*
=======================
	HERO
=======================
*/

#hero {
    background: url("../img/hero-sm.jpg") center no-repeat;
    width: 100%;    
    height: 100vh;
    background-size: cover !important;
}


#hero .header {
	position: absolute;
	bottom: 25px;
	margin: auto;
	display: block;
	left: 0;
	right: 0;
}

.header-logo {
	width: 250px;
	height: auto;
	padding-bottom: 15px;
}

#hero .btn {
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 1.5em;
	padding: 10px 25px;
	border: 1px solid #f16531;
}

.btn-hero:hover {
	background:#f16531 !important;
}

/*
===========
SERVICES SECTION
===========
*/

#services {
	margin-top: 75px;
}

.services-links {
	margin-top: 15px;
}

#services-anchor {margin-top: -50px !important;}

.filter-button {
    font-size: 1em;
    font-weight: 300;
    border: 2px solid #323232;
    border-radius: 5px;
    text-align: center;
    color: #323232;
	background: #fff;
	margin: 2px;
	text-transform: uppercase;
}

.filter-button:hover, .filter-button:focus, .filter-button:active {
	background: #323232;
	color: #fff;
	border: 2px solid #323232 !important;
}

.services-list h3 {
	font-weight: 700;
}


.services-list {
	margin-top: 55px;
	max-width: 900px;
}

.services-list p {
	color: #969696 !important;
}

.services-sm {
	position: relative;
	font-size: 0.9em !important;
	margin-top: -50px;
}

.hijabi {
    position: relative;
    margin-top: -35px;
    margin-bottom: 25px;
}

.cut a {
    color: #f16531;
    font-weight: bold;
}

/*
============
GALLERY SECTION
============
*/

#gallery {
	background: #fafafa;
	padding: 50px 0;
}

/*
============
ABOUT SECTION
============
*/

#about {
	margin-top: 75px;
}

#about img {
	width: 250px;
	height: auto;
}

#about p {
	text-align: left;
	padding: 15px;
}

/*
============
REVIEWS SECTION
============
*/

#reviews {
	padding: 75px 20px;
	background: #fafafa;
}

.stars {
    width: 300px;
    height: 50px;
    }

#reviews h2 {
	margin: 25px 0;
}

#reviews-content img {
	width: 150px;
	padding-bottom: 15px;
	margin-top: -15px;
}

#reviews p {
    text-align: left;
    font-size: 1em;
    line-height: 1.75em;
}

#reviews h3 {
font-family: 'Asap', sans-serif;
font-weight: 700;
text-transform: uppercase;
}

#reviews a {
    background: #d32323;
    color: #fff;
    margin: auto;
    padding: 15px 35px;
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 1em;
}

#reviews a img {
	width: 30px; 
	height: auto;
	padding-bottom: 10px;
}

#reviews a:hover, #reviews a:focus, #reviews a:active {
    opacity: 0.4;
}

/*
============
CONTACT SECTION 
============
*/

#contact {
	padding: 75px 15px;
	text-align: left;
	background: url('../img/contact-sm.jpg') center no-repeat;
	background-size: cover;
	width: 100%;
}

#contact h2 {color: #fff;}

#contact p {
	text-align: center;
	font-size: 1.5em;
	line-height: 1.5em;
	color: #fff;
	}

#freshta-form {
	max-width: 900px;
	margin: auto;
	font-size: 1.5em;
	margin-top: -25px;
}

.help-block, .text-danger {
	padding: 10px !important;
	color: #f16531 !important;
	font-weight: 300 !important;
	font-size: 0.9em !important;
	list-style-type: none !important;
}

.form-control, .form-control:hover, .form-control:focus,
.form-control:active {
	margin: 0 auto;
	font-size: 1em;
	font-weight: 300;
	border: 1px solid #f16531;
	color: #fff !important;
	border-radius: 0;
	padding: 15px 10px;
	background: rgba(0,0,0,0.4);
}

.text-area .form-control {
	height: 200px;
}

.alert-success, .alert-danger {
	color: #f16531;
	background-color: rgba(0,0,0,0);
	border: none;
	margin-top: -50px;
	margin-left: -25px;
}

#contact .btn {
	color: #fff;
	border-radius: 0;
	padding: 15px 25px;
	margin-top: -35px;
	margin-bottom: 25px;
	border: 1px solid #f16531;
	background: rgba(0,0,0,0.4);
	font-size: 1em;

}

#contact .btn-success {
	margin-right: 10px;
}

#contact .btn:hover, #contact .btn:focus,
#contact .btn:active {
	background: #f16531;
	color: #fff;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff !important;
}

#contact a {
	color: #3d3d3d;
	text-decoration: none;
}
#contact a:hover, #contact a:focus,
#contact a:active {color: #f16531;}


/*
============
FOOTER SECTION
============
*/

footer {
	padding-top: 55px;
	background: #000;
	color: #fff;
	font-weight: 500;
}

footer a, footer img {
	color: #fff;
	width: 75px;
	height: auto;
	margin: auto;
	padding-bottom: 10px;
}

#social {
	left: 0;
	right: 0;
	margin: auto;
	margin-bottom: 25px;
}

#social .rounded-circle {
	background: #f16531;
	padding: 10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

#social .fa-facebook-f, #social .fa-instagram {
	font-size: 1.25em;
	margin-top: 5px;
}

/*
#social .col-6 {
	font-size: 1.2em;
	line-height: 2em;
}


#social .col-6:first-of-type {
	margin-left: -10px;
}
*/

footer p {
	font-size: 1.5em;
	padding: 5px 5px 0 5px;
}

footer a:hover, footer a:focus, footer a:active {
	color: #fff;
	opacity: .2;
}

/*
============
MEDIA QUERIES 
============
*/


@media (min-width: 325px){
	.header-logo {
		width: 350px;
		height: auto;
		padding-bottom: 15px;
	}
}


@media (min-width: 425px){

	#hero {
		background: url("../img/hero-md.jpg") center no-repeat;
	}

}


@media (min-width: 767px){
	  .navbar-brand .logo {
		width: 300px;
	  }

	  .navbar { font-size: 1.35em; }

  	   .navbar-collapse {border-top: none; 	}

		.header-logo {
		width: 650px;
		height: auto;
		padding-bottom: 15px;
		}

	#hero .btn {
		background: rgba(0,0,0,0.6);
		color: #fff;
		font-size: 2em;
		padding: 10px 25px;
		border: 1px solid #f16531;
		}

	#about img {
		margin-top: -15px;
		margin-left: 15px;
	}

	#about p {padding: 10px 0;}


	.filter-button {
		font-size: 1.5em;
		margin: 10px;
	}

	.services-list h3 {
		font-size: 1.5em;
	}

	.services-sm {
		font-size: 0.75em !important;
	}

	#reviews p {
		max-width: 550px;
		margin: auto;
	}

		
	#freshta-form, #contact p {padding: 25px;	}

	#contact-info .text {
		font-size: 1.1em;
	}
	
}

@media (min-width: 1024px){
	  .navbar-brand .logo {
		width: 375px;
	  }

	  .navbar-nav { 
	   margin: auto; 	  
	   }

	  .nav-right {
	  	position: absolute;
	  	right: 10px;
	  }


	#hero {	background: url("../img/hero-lg.jpg") center no-repeat;	}


	#about p {
		max-width: 700px;
		margin: auto;
		}
              
        h2 { font-size: 2.5em; }

		.services-sm {
			font-size: 1em !important;
			padding: 0 55px !important;
			line-height: 1.25em !important;
		}

		#contact-info .text {
		font-size: 1.5em;
		}
	        
        #reviews h4 {font-size: 1.3em;}

		#contact {
			background: url('../img/contact-md.jpg') center no-repeat;
			background-size: cover;
			width: 100%;
		}

}

@media (min-width: 1200px){
        
		
	  .navbar-nav { 
	   margin: auto; 	  
	   }

		#about {padding: 35px 0;}

	   .about-content {
	   	margin: auto;
	   	margin-top: -25px;
	   }

		#about img {
			margin-top: 25px;
		}

		#about p {
			font-size: 1.25em;
		}

		#reviews p {
			padding: 0;
			font-size: 1.35em;
		}
        
        #reviews h4 {font-size: 1.6em;}

		#contact {
			background: url('../img/contact-lg.jpg') center no-repeat;
			background-size: cover;
			width: 100%;
		}
}

/*
============
Thank You Modal
============
*/

#thankyou {	background: rgba(250,250,250,0.9);}

#thankyou .btn {
	border: none;
	background: #ed9c23;
	color: #fafafa;
	text-transform: uppercase;
}

#thankyou .btn:hover, #thankyou .btn:focus, #thankyou .btn:active {
	opacity: 0.4;
}


/*
============
OVERRIDE
============
*/

.navbar-nav a:active > .offcanvas-collapse {
	display: none !important;
}

.navbar-toggler, .navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler:active {
	color: #323232;
}

.navbar-brand, .navbar-brand:hover, .navbar-brand:focus, .navbar-brand:active {
	color: #323232;
}

.fa-bars {
	color: #f16531;
}