@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
	--white: #fff;
	--black: #000;
	--blue: #14B1E7;
}

body {
	width: 100vw;
	height: 100vh;
	background-image: url('../images/main_background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	font-family: "Inter", sans-serif;
}

.main-nav {
	width: 100vw;
	top: 0;
	z-index: 1000;
	position: fixed;
	backdrop-filter: invert(20%);
	-webkit-backdrop-filter: invert(20%); 
}

p {
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 4%;
}
.content {
	height: 100vh;
}
.title p {
	border: 1px solid var(--white);
	border-radius: 25px;
	padding: 10px;
	width: 250px;
	margin: 2rem auto;	
}
.arrows {
	position: absolute;
	bottom: 18%;
	right: 10%;
	z-index: 1;
}

.headings {
	top: 30%;
	position: absolute;
	left: 10%;
}

.banner-heading {
	font-size: 35px;
	line-height: 30px;
}

.harveys-logo {
	height: 10vh;
}
.arrows img {
	margin-bottom: 1rem;
}

.nav-bar {
	.btn {
		color: white;
	}

	li {
		padding: 5px 10px;
	}

	a + a::before {
		content: "|";
		margin: 0 30px 0 0;
		color: white;
		font-weight: normal;
	}

	.dropdown-menu.show {
		padding: 10px 20px;
	}
}

.about-imgs {
	object-position: 70% 90%;
	object-fit: cover;
	width: 500px; 
	height: 500px;
	border-radius: 30px 30px 0 30px;
}

.swiper {
  height: 700px;
}

.swiper-slide {
	width: 350px !important;
	border-radius: 20px;
}

footer { 
	border: 1px black solid;
	border-radius: 20px;
	margin-bottom: 100px;
}

a.nav-bar {
	border-right: 1px solid white;
}

a.nav-bar:last-of-type {
	border-right: none;
}

.contact-button {
	background-color: #14B1E7;
	border-radius: 30px 30px 0 30px;
}

.btn:hover, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active  {
	background-color: #14B1E7;
	border-color: #14B1E7;
}

.service-photo-slides {
	width: 600px !important;
	height: inherit;
	border-radius:  20px;

	img {
		max-width: 600px;
		height: 700px;
	}
}

.service-panel-grey {
	background-color: #F5F5F5;
}

.service-panel-blue {
	background-color: #14B1E7;
}

.service-title-black {
	border-bottom: 1px solid black;
}

.service-title-white {
	border-bottom: 1px solid white;
}

.contact-form {
	background-color: var(--black);
	color: white;
	border-radius: 20px 20px;
}

.wpcf7-form-control {
	max-width: 80vw;
  box-sizing: border-box !important;
}

.wpcf7 {
	text-align: left;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"] {
	width: 70vw !important;
	border: 0;
	background: var(--black);
	border-bottom: 1px white solid;
	margin-bottom: 15px;
	color: white;
}

.wpcf7-submit {
	background-color: #14B1E7;
	border-radius: 30px 30px 30px 0;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-right: 3rem ;
	padding-left: 3rem ;
	margin-top: 1rem ;
	color: white;
	border: 0;
}

.contact-number {
	text-underline-offset: 5px;
}

footer li {
	list-style: none;
	margin-bottom: 3px;
}

footer li a {
	text-decoration: none;
	color: black;
}

.footer-details {
	margin: 0;
	padding-left: 0;
}

@media (max-width: 1200px) {
	body { 
		background-position: 0 -100px;
	}
	.arrows {
		bottom: 24%;
	}
	.arrows img {
		max-height: 60px;
	}
}

@media (max-width: 768px) {
	body {
		background-position: -150px -100px;
	}
	footer {
		padding: 1rem 0;
	}
	footer li:after {
		content: "";
	}
}

@media (min-width: 768px) {

	.about-outer-container {
		background-color: white;
		border-radius: 60px;
	}

	.about-texts {
		padding-top: 100px;
	}

	.headings {
		top: 40%;
	}

	.harveys-logo {
		width: 10vw;
	}
	
	.banner-heading {
		font-size: 55px;
		line-height: 40px;
	}

	.wpcf7 input[type="text"],
	.wpcf7 input[type="tel"] {
		width: 30vw !important;
	}
}

@media (min-width: 960px) {
	.nav-bar {
		max-height: 70px;
		width: 600px;
		padding: 0 50px;
	}

	.nav-container {
		background: #f4f4f4;
	}
}