header {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 99;
		font-family: 'Manrope', sans-serif;
		font-weight: bold;
		padding: 2vw 0;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	header.fixed {
		background: dodgerblue;
		padding: 0.7vw 0;
	}

	header a.logo {
		float: left;
		color: #fff;
		font-size: 3.2vw;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	header.fixed a.logo {
		font-size: 3.2vw;
	}

	header a.logo img {
		float: left;
		width: 320px;
		height: auto;
	}

	.menucontrols {
		float: right;
	}

	.menucontrols a {
		float: left;
		width: 4vw;
		height: 4vw;
		background: yellow;
		color: #000;
		font-size: 1.4vw;
	}

	a.hidemenu {
		position: fixed;
		right: 1vw;
		top: 1vw;
		width: 2vw;
		height: 2vw;
		color: #000;
		font-size: 2.2vw;
		transition: 1.6s;
		-webkit-transition: 1.6s;
		opacity: 0;
		visibility: hidden;
	}

	nav {
		position: fixed;
		right: -30vw;
		top: 0;
		background: #fff;
		z-index: 99;
		width: 25vw;
		height: 100%;
		padding: 5vw 5vw 5vw 5vw;
		overflow-y: auto;
		transition: 0.6s;
		-webkit-transition: 0.6s;
		opacity: 0;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	}

	nav.active {
		right: 0;
	}

	nav ul {}

	nav ul li {
		font-size: 1.2vw;
		margin-bottom: 2vw;
	}

	nav ul li a {
		color: #000;
		border-bottom: 1px solid rgba(0, 0, 0, 0);
		transition: 0.6s;
		-webkit-transition: 0.6s;
	}

	nav ul li a:hover,
	nav ul li.active a {
		color: dodgerblue;
		border-bottom: 1px solid dodgerblue;
	}

	.banner {
		padding: 20vw 0 14vw 0;
		background-size: cover !important;
		font-family: 'Manrope', sans-serif;
		position: relative;
		z-index: 1;
	}

	.banner:before {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
	}

	.banner .text {
		float: left;
		width: 65%;
	}

	.banner .text h1 {
		color: #fff;
		font-size: 5.8vw;
		line-height: 100%;
		margin-bottom: 3vw;
	}

	.banner .text h3 {
		color: #fff;
		font-size: 3vw;
		line-height: 120%;
		margin-bottom: 2vw;
		font-weight: bold;
	}

	.banner .text h1 span,
	.banner .text h3 span {
		color: #000;
	}

	.banner .text a {
		float: left;
		padding: 1.3vw 3vw;
		background: yellow;
		color: #000;
		font-size: 1.2vw;
		border-radius: 25px;
	}

	.banner .text a span {
		margin-left: 0.7vw;
	}

	.banner .text a:hover {
		background: #fff;
		color: #000;
	}

	.banner img {
		float: left;
		width: 100%;
		height: auto;
	}



	.brands {
		background: #fff;
		border-bottom: 1px solid #ddd;
		padding: 2vw 0;
	}

	.brands img {
		float: left;
		width: 12%;
		height: auto;
	}


	.about {
		padding: 6vw 0;
		font-family: 'Manrope', sans-serif;
		background: #ddd;
	}

	.about .text {
		float: left;
		width: 100%;
		text-align: center;
	}

	.about .text h2 {
		color: #000;
		font-size: 4.3vw;
		margin-bottom: 2vw;
	}

	.about .text p {
		font-size: 1.3vw;
		line-height: 150%;
		margin-bottom: 3vw;
	}

	.about .video {
		float: left;
		width: 100%;
		margin: 2vw 0 5vw 0;
		display: flex;
		justify-content: center;
	}

	.about .video video {
		float: left;
		width: 600px;
		height: auto;
		aspect-ratio: 16/9;
		object-fit: cover;
		object-position: center;
	}





	.services {
		padding: 6vw 0 6vw 0;
		font-family: 'Manrope', sans-serif;
	}

	.services h2 {
		text-align: center;
		color: #000;
		font-size: 4.3vw;
		margin-bottom: 1.5vw;
	}

	.services h4 {
		text-align: center;
		color: #000;
		font-size: 1.2vw;
		margin-bottom: 4vw;
		font-weight: 500;
		padding: 0 15%;
		line-height: 140%;
	}

	.servicesitemswrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 -30px;
	}

	.servicesitemswrap .item {
		flex-basis: 33.33%;
		margin-bottom: 5vw;
		padding: 0 30px;
	}

	.servicesitemswrap .item .itemcontent {
		position: relative;
		float: left;
		width: 100%;
		height: 100%;
		padding: 0;
		text-align: center;
	}

	.servicesitemswrap .item .itemcontent .thumb {
		float: left;
		width: 100%;
		margin-bottom: 1.5vw;
		overflow: hidden;
	}

	.servicesitemswrap .item .itemcontent .thumb a {
		cursor: zoom-in;
	}

	.servicesitemswrap .item .itemcontent .thumb img {
		float: left;
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
		object-fit: cover;
		object-position: center;
		transition: 0.6s;
		-webkit-transition: 0.6s;
		border-radius: 30%;
	}

	.servicesitemswrap .item .itemcontent .thumb:hover img {
		transform: scale(1.1);
	}

	.servicesitemswrap .item .itemcontent h3 {
		color: #000;
		font-size: 1.5vw;
		margin-bottom: 1vw;
	}

	.servicesitemswrap .item .itemcontent h3 a {
		color: #000;
		text-decoration: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0);
	}

	.servicesitemswrap .item .itemcontent h3 a:hover {
		border-bottom: 1px solid rgba(0, 0, 0, 1);
	}

	.servicesitemswrap .item .itemcontent p {
		color: #555;
		font-size: 1.2vw;
		line-height: 150%;
	}




	.contact {
		background: yellow;
		padding: 6vw 0 6vw 0;
		font-family: 'Manrope', sans-serif;
	}

	.contact h2 {
		text-align: center;
		color: #000;
		font-size: 4.3vw;
		margin-bottom: 1vw;
	}

	.contact h5 {
		text-align: center;
		color: #000;
		font-size: 1.3vw;
		margin-bottom: 1vw;
	}

	.contact h5 a {
		color: #000;
		border-bottom: 1px solid #000;
	}

	.contact form {
		margin-top: 2vw;
	}

	.contact form input[type="text"],
	.contact form input[type="email"],
	.contact form textarea {
		float: left;
		width: 30%;
		height: 4.5vw;
		background: #fff;
		border: none;
		padding: 0 0 0 1.5vw;
		border-radius: 0;
		-webkit-border-radius: 0;
		font-family: 'Manrope', sans-serif;
		font-size: 1.2vw;
		margin-bottom: 2vw;
	}

	.contact form input[type="text"]:focus,
	.contact form input[type="email"]:focus,
	.contact form textarea:focus {
		outline: 2px solid #2175f3;
	}

	.contact form textarea {
		width: 100%;
		height: 10vw;
		padding: 1.5vw;
	}

	.contact form button {
		float: left;
		width: auto;
		height: 6vw;
		cursor: pointer;
		background: #000;
		text-align: center;
		color: #fff;
		font-size: 1.2vw;
		font-family: 'Manrope', sans-serif;
		padding: 0 2vw;
		border-radius: 25px;
	}



	.map {
		float: left;
		width: 100%;
	}

	.map iframe {
		float: left;
		width: 100%;
		height: 400px;
	}


	footer {
		background: #fff;
		padding: 5vw 0;
		font-family: 'Manrope', sans-serif;
	}

	footer .copyright {
		float: left;
		color: #000;
		font-size: 1.3vw;
	}

	footer .copyright a {
		color: #000;
		border-bottom: 1px solid #000;
	}

	footer .copyright span.company {
		font-size: 1vw;
	}

	footer .copyright span.company a {
		border-bottom: none;
	}

	footer .social {
		float: right;
		color: #000;
		font-size: 1.3vw;
	}

	footer .social a {
		float: left;
		color: #000;
		margin-left: 1vw;
	}

	.image-container {
		display: inline-block;
	}

	.modal {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		bottom: 25%;
		transform: translate(-50%, -50%);
		background: white;
		padding: 20px;
		border: 1px solid #ddd;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		max-width: 90vw;
		text-align: center;
		height: 87%;
		margin-top: 10px;
		margin-bottom: 100px;
		overflow: auto;
		padding: 70px !important;
	}

	.modal img {
		width: 100px;
		height: auto;
		margin: 5px;
		display: inline-block;

		float: left;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: center;
		transition: 0.6s;
		-webkit-transition: 0.6s;
		border-radius: 30%;
	}

	.overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	/* .image-container:hover+.overlay,
	.image-container:hover+.overlay+.modal {
		display: block;
	} */

	.close-btn {
		display: block;
		margin-top: 10px;
		padding: 5px 10px;
		background: red;
		color: white;
		border: none;
		cursor: pointer;
	}

	h3 {
		color: #000;
		font-size: 1.5vw;
		margin-bottom: 1vw;
	}

	.read-more {
		width: 100%;
		display: grid;
		text-align: center;
	}

	.read-more-btn {
		float: left;
		padding: 1.3vw 3vw;
		background: yellow;
		color: #000;
		font-size: 2.2vw;
		border-radius: 25px;
		cursor: pointer;
	}

	.container {
		width: 100%;
		max-width: 1140px;
		margin: auto;
		padding: 0 15px;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: -15px;
	}

	.col-md-6 {
		width: 50%;
		padding: 15px;
		box-sizing: border-box;
	}

	@media (max-width: 768px) {
		.col-md-6 {
			width: 100%;
		}
	}

	.carousel-container {
		width: 80%;
		max-width: 1000px;
		overflow: hidden;
		position: relative;
		margin: auto;
	}

	.carousel-track {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}

	.carousel-item {
		min-width: 30%;
		margin: 0 10px;
		border-radius: 10px;
		overflow: hidden;
	}

	.carousel-item img {
		width: 80%;
		height: 80%;
		display: block;
		border-radius: 10px;
	}

	.carousel-item p {
		text-align: left;
	}

	.prev,
	.next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		padding: 10px;
		cursor: pointer;
		border-radius: 50%;
	}

	.prev {
		left: 10px;
		z-index: 99;
	}

	.next {
		right: 10px;
		z-index: 99;
	}

	.dots {
		text-align: center;
		margin-top: 10px;
	}

	.dot {
		width: 10px;
		height: 10px;
		margin: 5px;
		background-color: gray;
		display: inline-block;
		border-radius: 50%;
		cursor: pointer;
	}

	.dot.active {
		background-color: black;
	}