/*
Theme Name: 	Mrs Buckets
Description: 	Mrs Buckets Wordpress theme!
Version: 		1.0
Author: 		Nathan Stanmore
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/*@import "css/reset.css";*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

@font-face {
  font-family: 'Playlist-Script';
    src:  url('fonts/Playlist-Script.ttf.woff') format('woff'),
    url('fonts/Playlist-Script.ttf.svg#Playlist-Script') format('svg'),
    url('fonts/Playlist-Script.ttf.eot'),
    url('fonts/Playlist-Script.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}


div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }


.navbar-toggler {
	background-color: #d0282a;
	outline:  none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

html {
	scroll-behavior: smooth;
}

body,
input,
textarea 			{ font-family: 'Poppins', sans-serif; color: #202020 /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }


.top-bar {
	color:  #d0282a;
	background:  #202020;
	text-align: center;
	font-size: 14px;
	padding:  10px 0;
}

.top-bar .contact-item {
	padding:  0 20px;
	border-left:  1px solid #fff;
}

.top-bar .contact-item:first-child {
	border-left:  none;
}

.top-bar .contact-item a {
	color:  #d0282a;
}

.top-bar .contact-item img {
	margin-right:  8px;
}

header .navbar-nav li {
	margin:  0 25px;
}

header .navbar-nav li a {
	padding: 5px 15px !important;
	font-size: 18px;
	color:  #202020;
	border-bottom:  3px solid #fff;
	transition: 0.3s;
}

header .navbar-nav li a:hover {
	border-bottom:  3px solid #d0282a;
}

#about {
	padding:  150px 0;
	color:  #fff;
}

#about h1 {
	font-family: 'Playlist-Script';
	color:  #d0282a;
	font-size:  55px;
	font-weight: normal;
	margin-bottom: 25px;
}

#about p {
	margin-bottom: 20px;
	font-weight: 300;
	line-height: 2em;
	z-index: 999;
	position: relative;
}

#about .container a {
	background:  #d0282a;
	color:  #fff;
	padding:  18px 45px;
	border-radius: 30px;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 5px;
	display: inline-block;
	text-decoration: none;
	transition: 0.3s;
}

#about .container a:hover {
	background:  #ab1d1f;
}

#about:after {
	content: '';
    background: url(img/about-overlay.png) no-repeat center right;
    height: 100%;
    position: absolute;
    background-size: contain;
    top: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
}

#about .phone-block {
	position: absolute;
    right: 4.5%;
    z-index: 99;
    top: 64%;
}

#about .phone-block img {
	float:  left;
}

#about .phone-block .text {
	float:  left;
	margin-left:  10px;
}

#about .phone-block h4 {
	font-family: 'Playlist-Script';
	font-size: 20px;
	margin-top: 25px;
	font-weight: normal;
}

#about .phone-block span {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

#about .phone-block a {
    color: #fff;
    text-decoration: none;
}


#services {
	background:  #f5f5f5;
	padding:  75px 0;
}

#services .introduction {
	text-align: center;
}

#services .introduction h3 {
	font-family: 'Playlist-Script';
	font-weight: normal;
	font-size: 26px;
}

#services .introduction h2 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color:  #d0282a;
}

#services .introduction h2:after {
	content: '';
	display:  block;
	width: 80px;
	height:  6px;
	background: #202020;
	margin: 35px auto;
}

#services .inner {
	background: #fff;
	border-radius: 25px;
	overflow:  hidden;
	box-shadow: 0 0 15px #00000012;
	margin:  15px 15px;
}

#services .inner .image {
	width:  100%;
	height:  200px;
}

#services .inner .text {
	padding:  30px 20px;
	text-align: center;
	font-size: 14px;
}

#services .inner .text h3 {
	font-size: 20px;
	color:  #c31e20;
	font-weight: 600;
	margin-bottom: 25px;
}

#services .inner .text a {
	display: inline-block;
    margin: 20px 15px 0;
    background: #d0282a;
    color: #fff;
    padding: 15px 25px;
    border-radius: 30px;
    transition: 0.3s;
    text-decoration: none;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}

#services .inner .text a:hover {
	background: #ab1d1f;
}

#services .inner .text a img {
	margin-right:  8px;
	display:  inline;
}

#services .slick-prev:before, 
#services .slick-next:before {
	color: #d0282a;
}

.modal-header {
	background: #d0282a;
	color:  #fff;
}

.modal-header .close {
	color:  #fff;
}

.modal-footer button {
	background: #d0282a;
	color:  #fff;
	border:  none;
}

.modal-footer button:hover {
	background: #ab1d1f;
}

.modal-body .button {
    background: #d0282a;
    color: #fff;
    padding: 16px 45px;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;
}

#testimonials {
	padding:  55px 0;
}

#testimonials .slick-slide {
	text-align: center;
}

#testimonials .slick-slide img {
	border-radius: 50%;
	margin:  25px auto;
}

#testimonials .slick-slide .text {
	padding:  0 150px;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.7em;
	margin-bottom: 15px;
}

#testimonials .slick-slide h3 {
	font-size: 22px;
	color: #d0282a;
}

#testimonials .slick-dots {
	top:  50%;
}

#testimonials .slick-dots li {
	display: block;
}

#testimonials .slick-dots li button:before {
	font-size: 12px;
	color: #d0282a;
}

#contact-us {
	background: #f9f9f9;
	padding-bottom: 50px;
}

#contact-us .top {
	background: url('img/contact-bg.jpg') no-repeat center center;
	background-size:  cover;
}

#contact-us .top .introduction {
	text-align: center;
	padding:  75px 0 150px;
}

#contact-us .introduction h3 {
	font-family: 'Playlist-Script';
	font-weight: normal;
	font-size: 26px;
	color:  #fff;
}

#contact-us .introduction h2 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color:  #fff;
}

#contact-us .introduction h2:after {
	content: '';
	display:  block;
	width: 80px;
	height:  6px;
	background: #d0282a;
	margin: 35px auto;
}

#contact-us .contact-wrapper {
	background: #fff;
    margin-top: -145px;
    border-radius: 10px;
    box-shadow: 0 0 15px #00000012;
    overflow: hidden;
}

#contact-us .contact-wrapper .contact-form {
	padding:  30px 0 30px 30px;
}

#contact-us .contact-wrapper iframe {
	height:  100%;
	width: 100%;
}

#contact-us .contact-wrapper .contact-form .form-control {
	margin-bottom: 15px;
	background: #f4f4f4;
	border:  none;
	height:  auto;
	padding:  15px 15px;
}

#contact-us .contact-wrapper .contact-form  .wpcf7-submit {
	display:  block;
	margin:  25px auto 0;
	padding:  15px 25px;
	color:  #fff;
	border-radius: 30px;
	background:  #d0282a;
	border:  none;
	transition: 0.3s;
}

#contact-us .contact-wrapper .contact-form  .wpcf7-submit:hover {
	background: #ab1d1f;
}

#contact-us .contact-item-wrapper {
	text-align: center;
	margin-top: 50px;
}

#contact-us .contact-item {
	border-left:  1px solid #202020;
	display: inline-block;
	padding:  5px 60px;
	font-size: 18px;
	color:  #d0282a;
}

#contact-us .contact-item:first-child {
	border-lefT:  0;
}

#contact-us .contact-item img {
	display: block;
	margin: 0 auto 10px;
}

#contact-us .contact-item a {
	color:  #d0282a;
	text-decoration: none;
}

footer .top {
	text-align: center;
	padding:  50px 0;
}

footer .top img {
	margin-bottom: 50px;
}

footer .top ul {
	padding:  0;
	margin-bottom:  0;
}

footer .top ul li {
	display:  inline-block;
	list-style: none;
	margin: 0 30px;
}

footer .top ul li a {
	color:  #202020;
	font-size: 18px;
	text-decoration: none;
	transition: 0.3s;
}

footer .top ul li a:hover {
	color:  #a90608;
}

footer .bottom {
	color:  #fff;
	background: #a90608;
	padding:  15px 0;
	font-size: 13px;
}

footer .bottom a {
	color:  #fff;
	font-weight: bold;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */


@media(max-width: 1200px) {

	header .navbar-nav li {
	    margin: 0px 12px;
	}

	#about {
		overflow: hidden;
	}

	#about:after {
		right:  -60px;
	}

	#services .inner .text a {
		margin-left:  0;
		margin-right: 0;
	}

}


@media(max-width: 991px) {

	#about .phone-block {
		display:  none;
	}

	#testimonials .slick-slide .text {
	    padding: 0 100px;
	    font-size: 18px;
	}

	#contact-us .contact-wrapper .contact-form {
		padding:  30px 30px 0;
	}

	#contact-us .contact-wrapper iframe {
		height:  350px;
	}

	#contact-us .contact-item {
		padding: 5px 30px;
    	font-size: 16px;
	}

	footer .top ul li {
		margin:  0 20px;
	}

}

@media(max-width: 767px) {

	#testimonials {
	    padding: 45px 0;
	}

	.top-bar .contact-item {
		display:  block;
		margin:  10px 0;
		border:  none;
	}

	#about {
    	padding: 50px 0;
	}

	#about:after {
		display:  none;
	}

	.slick-prev {
		left:  -10px;
	}

	.slick-next {
		right:  -10px;
	}

	#testimonials .slick-slide .text {
		padding:  0;
	}

	#testimonials .slick-dots {
		top:  auto;
	}

	#testimonials .slick-dots li {
		display:  inline-block;
	}

	#contact-us .contact-item {
		border:  none;
		padding: 15px 30px;
	}

	footer .top ul li {
	    margin: 10px 20px;
	    display: block;
	}

	footer .bottom .float-left {
		margin-bottom: 15px;
	}

	footer .bottom .float-right,
	footer .bottom .float-left {
		display:  block;
		width:  100%;
		text-align: center;
	}

}