@font-face {
	font-family: 'Darleston';
	src: url('../assets/fonts/Darleston/Darleston.eot');
	src: url('../assets/fonts/Darleston/Darleston.eot?#iefix') format('embedded-opentype'),
				url('../assets/fonts/Darleston/Darleston.woff2') format('woff2'),
				url('../assets/fonts/Darleston/Darleston.woff') format('woff'),
				url('../assets/fonts/Darleston/Darleston.ttf')  format('truetype');
}

@font-face {
	font-family: 'CaviarDreams';
	src: url('../assets/fonts/CaviarDreams/CaviarDreams.eot');
	src: url('../assets/fonts/CaviarDreams/CaviarDreams.eot?#iefix') format('embedded-opentype'),
				url('../assets/fonts/CaviarDreams/CaviarDreams.woff2') format('woff2'),
				url('../assets/fonts/CaviarDreams/CaviarDreams.woff') format('woff'),
				url('../assets/fonts/CaviarDreams/CaviarDreams.ttf')  format('truetype');
}

@font-face {
	font-family: 'Inter';
	src: url('../assets/fonts/Inter/Inter.eot');
	src: url('../assets/fonts/Inter/Inter.eot?#iefix') format('embedded-opentype'),
				url('../assets/fonts/Inter/Inter.woff2') format('woff2'),
				url('../assets/fonts/Inter/Inter.woff') format('woff'),
				url('../assets/fonts/Inter/Inter.ttf')  format('truetype');
}

/* 
***************************************************************************************
** VARIABLES
***************************************************************************************
*/
:root {
	--header-height: 8rem;
	--background: black;
	--color: white;
	--color-a: #776b62;
	--border-color: #292622;
	--golden: #cba23e;
	--golden-light: #c8a958;

	--btn-color: #fc9149;
	--btn-color-hover: #fb8130;

	--font-weight: 200;
}


/* 
***************************************************************************************
** ELEMENTS
***************************************************************************************
*/
body {
	background-color: var(--background);
	color: var(--color);
	margin: 0;
	padding: 0;
}

h1 {
	font-family: 'Darleston', sans-serif;
	font-size: 10vw;
	color: var(--golden);
	text-align: center;
}

h2 {
	font-family: 'CaviarDreams', sans-serif;
	font-size: 2vw;
	text-transform: uppercase;
	text-align: center;
}

h3 {
	font-family: 'CaviarDreams', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--golden);
	margin: 4rem 0;
	font-weight: bold;
}

h4 {
	font-family: 'CaviarDreams', sans-serif;
	font-size: 1.4rem;
	text-transform: uppercase;
}

ul, ol {
	font-family: 'Inter', sans-serif;
	font-size: 1.1rem;
	margin-bottom: 0;
	font-weight: var(--font-weight);
}

p, span {
	font-family: 'Inter', sans-serif;
	font-size: 1.1rem;
	font-weight: var(--font-weight);
}

.bg-white {
	color: black;
	background-color: white;
}

.bg-grey {
	background-color: #f6f6f6;
}

.bg-grey p, .bg-grey span, .bg-grey ul, .bg-grey ol {
	color: black;
}

.text-lightgrey {
	color: lightgray;
}

.golden {
	color: var(--golden);
}

.form-group{
	margin-bottom: .8rem;
}
.form-label {
	margin-bottom: .2rem;
}
label.error {
	color: red;
	font-size: .8rem;
}
.btn-page {
	background-color: var(--golden);
	color: white;
}
.btn-page:hover {
	background-color: var(--golden-light);
	color: white;
}
.btn-page:active {
	--bs-btn-active-color: white;
	--bs-btn-active-bg: var(--golden-light);
	--bs-btn-active-border-color: var(--golden-light);
}

.icon {
	width: 40px;
	margin-right: 1rem;
}
.icon2 {
	width: 20px;
	margin-right: 1rem;
}

.modal-title, .modal-body {
	color: black;
}
.center {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 
***************************************************************************************
** HEADER
***************************************************************************************
*/
.header {
	position: relative;
	width: 100%;
	background-color: black;
	z-index: 999;
}

.header a {
	font-family: 'CaviarDreams', sans-serif;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: .1rem;
}

.header a:hover {
	color: linear-gradient(to right, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
}

.header img {
	margin: 2rem;
	width: 80px;
}

.header__items {
	font-size: 1.2rem;
	text-align: right;
}


/* 
***************************************************************************************
** MAIN / SECTIONS
***************************************************************************************
*/
.main .work, .about, .contact {
	padding-top: var(--header-height);
}


/* 
***************************************************************************************
** HERO
***************************************************************************************
*/
section.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 600px;
	background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,1) 100%), url('../assets/img/bg.webp');
	background-size: cover;
	background-position: center;
}


#time p {
	margin: 0;
}
/* 
***************************************************************************************
** SERVICES
***************************************************************************************
*/
.services_wrapper {
	display: grid;
	grid-template-columns: 50% 50%;
}

.services_white {
	border: 1px solid var(--golden);
	background-color: white;
	border-radius: 20px;
	transition: 0.6s;
}
.services_white:hover {
	transition: 0.6s;
	box-shadow: 5px 5px 20px lightgray;
}

.services_white_content {
	color: #454545;
	border-radius: 20px;
}

.services_black {
	background-color: black;
	border-radius: 20px 20px 0 0;
}


/* 
***************************************************************************************
** TEAM
***************************************************************************************
*/

.team_img {
	width: 100%;
	max-width: 260px;
	transition: 0.6s;
	border-radius: 20px;
	border: 1px solid var(--golden);
}
.team_img:hover {
	transition: 0.6s;
	box-shadow: 1px 1px 10px lightgray;
}


/* 
***************************************************************************************
** LINKS
***************************************************************************************
*/
.links_url a {
	text-decoration: none;
	font-size: 1.2rem;
	color: var(--golden);
}
.links_url a:hover {
	color: var(--golden-light);
}


/* 
***************************************************************************************
** CONTACT
***************************************************************************************
*/

.contact_white {
	border: 1px solid var(--golden);
	border-radius: 20px;
	background-color: white;
	color: black;
	
}

.contact-40 {
	width: 40%;
}

.contact-60 {
	width: 60%;
}

.contact .map {
	width: 100%;
	height: auto;
	min-height: 600px;
}

.contact p {
	color: black;
	margin: 0;
}

.contact a {
	color: var(--golden);
	text-decoration: none;
}

.contact a:hover {
	color: var(--golden-light);
}


/* 
***************************************************************************************
** MAP
***************************************************************************************
*/
#map {
	width: 100%;
	height: 100%;
}

/* 
***************************************************************************************
** SWIPER
***************************************************************************************
*/
.swiper {
	cursor: grabbing;
}

.swiper-content {
	float: right;
}

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


/* 
***************************************************************************************
** FOOTER
***************************************************************************************
*/
.footer {
	padding-bottom: 2rem;
}

.footer ul {
	list-style: none;
	padding: 0;
}

.footer hr {
	margin: 4rem 0;
}

.footer .text-copy, .footer .nkt {
	font-size: .8rem;
	font-weight: var(--font-weight);
	line-height: 2rem;
}

.footer .very-small {
	color: gray;
}

.footer a {
	color: white;
	text-decoration: none;
}

.footer .nkt {
	color: white;
	text-decoration: none;
	font-size: .8rem;
}

.footer a:hover {
	color: var(--golden-light);
}


@media screen and (max-width: 992px) {
	.services_wrapper {
		grid-template-columns: 100%;
	}
	h1 {
		font-size: 6rem;
	}
	h2 {
		font-size: 1.4rem;
	}
	h3 {
		font-size: 1.6rem;
	}
	h4 {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 768px) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 1.2rem;
	}
	h3 {
		font-size: 1.4rem;
	}
	h4 {
		font-size: 1.2rem;
	}

	.team_img {
		max-width: 340px;
	}

	.contact_white {
		max-width: 100%;
	}
	.contact-40 {
		width: 100%;
	}
	.contact-60 {
		width: 100%;
	}

	.contact .map {
		height: 600px;
	}
}

/* 
***************************************************************************************
** LOADER
***************************************************************************************
*/
.loader {
	display: flex;
  	align-items: center;
  	justify-content: center;

	position: fixed;
	background-color: rgb(241, 241, 241, .5);
	border: 1px solid gray;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}