@font-face {

	font-family: Gotham-Book;

	src: url("../fonts/Gotham Book.otf");

}



* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

	font-family: Gotham-Book;

}



#line {

	width: 2px;

	height: 100px;

	background-color: #6d7a83;

}



.modal-controller {

	position: fixed;

	display: flex;

	justify-content: center;

	align-items: center;

	bottom: 10px;

	right: 10px;

	background-color: white;

	border-radius: 10%;

	padding: 5px;

	z-index: 10;

}



.modal-controller .wrapper {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	padding: 3px 20px;

	border: 1px solid #a6afb6;

	border-radius: 3px;

}



.modal-controller .wrapper a {

	text-decoration: none;

	color: black;

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

}



@media screen and (max-width: 768px) {

	.modal-controller {

		bottom: 0;

		left: 0;

		right: auto;

		width: 100%;

		padding: 2px 10px;

	}

}



.modal-controller button {

	display: flex;

	flex-direction: column;

	border: none;

	outline: none;

	width: 30px;

	height: 30px;

}





html,

body {

	scroll-behavior: smooth;

	display: flex;

	align-items: center;

	flex-direction: column;

	max-width: 100vw;

	overflow-x: hidden;

}



header {

	width: 100%;

	display: flex;

	padding: 20px 0;

	justify-content: center;

	align-items: center;

	z-index: 98;

	background-color: white;

}



header.sticky {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	background-color: white;

	opacity: 0.85;

	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 99;

}



header .container {

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 80%;

}



header nav {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 20px;

}



header nav a {

	text-decoration: none;

	color: black;

	font-weight: 700;

}



header svg {

	width: 30px;

	height: 30px;

}



header img {

	width: 150px;

}



.right-menu {

	opacity: 0;

	position: fixed;

	top: 0;

	right: -200px;

	width: 200px;

	height: 100vh;

	background-color: #308ac5ce;

	z-index: 99;

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	gap: 30px;

	/* transform: translateX(-200px); */

	transition: all 0.5s ease-in-out;

}



.right-menu a {

	text-decoration: none;

	color: white;

}



.right-menu .catalog {

	padding: 10px 20px;

	border-radius: 5px;

	border: 2px solid #fff;

}



.right-menu svg {

	width: 30px;

	height: 30px;

	position: absolute;

	top: 10px;

	right: 10px;

}



.top {

	position: relative;

}



/* 

.top .img-container {

	position: relative;

	width: 100%;

	height: 100%;

}



.top img {

	position: absolute;

	top: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	margin: 0;

	padding: 0;

	overflow: hidden;

	transition: all 0.5s ease-in-out;

}



.top img.active {

	width: 100%;

	height: 100%;

	opacity: 1;

} */



.discover-bar {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	background-color: #e9e9e95e;

	width: 100%;

	padding: 20px 0;

}



.discovery-btn {

	background-color: transparent;

	outline: none;

	border: none;

	cursor: pointer;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	text-decoration: none;

	color: #333333;

}



.discover-bar svg {

	width: 30px;

	height: 40px;

}



.discover-bar span {

	font-weight: 600;

}



.discover-bar .discover-bar-text {

	border-top: 3px solid #6d7a83;

	padding: 3px;

}



.about {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	gap: 20px;

}



.about .head-text {

	text-align: center;

}



.about img {

	width: 500px;

}



.about span {

	font-size: 20px;

	width: 50%;

	text-align: center;

}



.active-btn {

	cursor: pointer;

	background-color: transparent;

	padding: 10px 30px;

	border: 2px solid #181818;

}



.active-btn:hover {

	background-color: #181818;

	color: white;

}



.passive-btn {

	cursor: pointer;

	background-color: #181818;

	color: white;

	padding: 10px 20px;

}



.passive-btn:hover {

	color: #181818;

	background-color: transparent;

	border: 2px solid #181818;

}



.gallery {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	/* margin-top: 30px; */

	background-color: #e6e6e6;

	width: 100%;

	padding-bottom: 60px;

}



.gallery h1 {

	color: #333333;

	margin: 20px 0;

}



.gallery .buttons {

	margin-top: 10px;

}



.gallery .photos-container {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	grid-gap: 20px 20px;

	margin-top: 30px;

	width: 95%;

}



/* responsive grid */

@media (max-width: 768px) {

	.gallery .photos-container {

		grid-template-columns: repeat(2, 1fr);

	}

}



.gallery .photos-container a {

	display: flex;

	flex-direction: column;

	align-items: center;

	text-decoration: none;

	border-right: 8px solid white;

	border-left: 8px solid white;

	border-top: 5px solid white;

	border-bottom: 5px solid white;

}



.gallery .photos-container a span {

	color: #181818;

	font-weight: 700;

}



.gallery .photos-container img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.location {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	padding-bottom: 40px;

	width: 100%;

}



.location h1 {

	color: #333333;

	margin: 20px 0;

}



.map-container {

	display: flex;

	justify-content: center;

	align-items: center;

	background-color: #f7f7f7;

	width: 100%;

	padding: 60px 0;

	max-height: 500px;

	position: relative;

}



.map-container .map_info {

	position: absolute;

	display: none;

	padding: 30px;

	border-radius: 5px;

	background-color: rgba(255, 255, 255, 0.9);

	max-width: 435px;

	top: 20px;

	left: 20px;

}



.map {

	display: flex;

	justify-content: center;

	align-items: center;

	background-color: #f7f7f7;

	width: 100%;

	padding: 60px 0;

	max-height: 500px;

}



.contact {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

}



.contact h1 {

	color: #333333;

	margin-top: 20px;

}



.contact .info {

	width: 80%;

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	margin-top: 30px;

	gap: 35px;

}



@media screen and (max-width: 768px) {

	.contact .info {

		grid-template-columns: repeat(1, 1fr);

	}

}



.contact .info svg {

	width: 30px;

	height: 30px;

}



.contact .info div {

	display: flex;

	align-items: center;

	flex-direction: column;

	margin-top: 10px;

	text-align: center;

}



.contact .info a {

	text-decoration: none;

	cursor: pointer;

	color: black;

}



.contact-form {

	z-index: 9;

	/* width: 20%; */

	/* position: absolute; */

	right: 0;

	top: 0;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 20px;

	margin: 30px 0;

	padding: 10px 20px;

	background-color: #ffffffc0;

}



.contact-form textarea {

	width: 100%;

	padding: 10px;

	border: 1px solid #6d7a83;

	resize: none;

}



.contact-form input {

	width: 100%;

	padding: 10px;

	border: 1px solid #6d7a83;

}



.contact-form button {

	max-width: 300px;

	cursor: pointer;

	background-color: #181818;

	color: white;

	padding: 10px 30px;

	border: 2px solid #181818;

}



.contact-form button:hover {

	max-width: 300px;

	background-color: transparent;

	padding: 10px 30px;

	border: 2px solid #181818;

	color: #181818;

}



.contact-form .inputs {

	width: 100%;

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 10px;

}



.contact-form .success-message {

	display: none;

	background-color: rgb(85, 138, 5);

	padding: 20px;

	max-width: 300px;

	color: white;

}



.footer {

	display: flex;

	align-items: center;

	flex-direction: column;

	background-color: #333333;

	width: 100%;

	padding: 60px 0;

	position: relative;

}



.footer .footer-map {

	display: flex;

	justify-content: center;

	align-items: center;

	margin-bottom: 48px;

	width: 100%;

}



.footer .footer-map iframe {

	width: 80%;

	height: 300px;

	border: none;

}



.footer .logos {

	display: flex;

}



.footer a {

	display: flex;

	justify-content: center;

	align-self: center;

}



.footer img {

	width: 150px;

	margin: 0 20px;

}



.footer .social {

	margin-top: 50px;

	color: white;

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 40px;

}



/* .footer .social a {

	border-bottom: 1px solid transparent;

	color: white;

	text-decoration: none;

	cursor: pointer;

	font-weight: 500;

	font-size: 13px;

}



.footer .social a:hover {

	border-bottom: 1px solid white;

} */



.footer .line {

	margin-top: 90px;

	width: 100%;

	border-top: 1px solid grey;

}



.swiper {

	width: 100vw;

	height: 65vh;

}



.swiper-slide {

	text-align: center;

	font-size: 18px;

	background: #fff;

	display: flex;

	justify-content: center;

	align-items: center;

}



.swiper-slide img {

	display: block;

	width: 100%;

	height: 100%;

}



/* responsive */

@media screen and (max-width: 768px) {

	header img {

		width: 100px;

	}



	.swiper {

		height: 30vh;

	}



	.discover-bar span {

		font-size: 12px;

	}



	.discover-bar svg {

		width: 17px;

	}



	.about img {

		width: 350px;

	}



	.about span {

		width: 75%;

	}



	.gallery .buttons {

		display: grid;

		grid-template-columns: repeat(2, 1fr);

		gap: 10px;

	}



	.gallery .photos-container {

		padding: 15px;

		margin-top: 0;

	}



	.location .buttons {

		display: grid;

		grid-template-columns: repeat(2, 1fr);

		gap: 10px;

		padding: 0 10px;

	}



	.map-container {

		flex-direction: column;

		max-height: fit-content;

		padding: 10px 0;

	}



	.map-container .map_info {

		position: unset;

	}



	.contact .info {

		width: 250px;

	}



	.contact .contact-form {

		width: 80vw;

	}



	.contact .contact-form .inputs {

		grid-template-columns: 1fr;

	}



	.footer img {

		width: 150px;

	}

}

.swiper .swiper-button-next, .swiper .swiper-button-prev {
	color: white;
}


/* 
.cumslide-mobile {
    display:none
  }

@media only screen and (max-width: 768px) {
  .cumslide-mobile {
    display:block
  }
  .cumslide-desktop {
    display:none
  }
} */