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

body {
	font-family: "Montserrat", sans-serif;
	background-image: url('../img/background10.webp');
	background-repeat: no-repeat;
	background-size: cover;
/*	background-position: center;*/
	position: relative;

/*	font-size: 18px;*/
}

p, li {
	font-size: 16px;
}

li {
	list-style: none;
}


:root {
	--primary: #B4942E;
	--secondary: #999999;
	--accent: #102E50;
}

.nav {
	/*position: fixed;*/
	background-color: black;
	z-index: 3;
	width: 100%;

}

.text-my-primary {
	color: var(--primary);
}

/*#services {
	background-image: url('../img/background2.avif');
	background-repeat: no-repeat;
	background-size: cover;
}*/

#hero {
	background-image: url("../img/background5.jpg");
	backgruond-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: fit-content;
	position: relative;
	align-content: center;
	text-align: center;
	padding: 7rem 2rem ;
}

#hero::before {
	position: absolute;
	content: '';
	background-color: black;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.8;
	z-index: 1;
}

#hero > div {
	z-index: 2;
	position: relative;
}

#hero > div:not(first-child) {
	padding-top: .7rem;
}

#hero > div > h1 {
	font-size: 3rem;
	font-weight: bold;
}

#hero > div > h5 {
	padding: 0 1.6rem;
}

#hero > div > a {
	text-decoration: none;
}

.btn-gold-1 {
	background-color: goldenrod;
}

.btn-gold-1:hover {
	background-color: var(--accent);
	color: whitesmoke;
}

.btn-gold-2 {
	background-color: palegoldenrod;
}

.btn-gold-2:hover {
	background-color: var(--accent);
	color: whitesmoke;
}

.left-border {
	border-left: 10px solid var(--accent);
	padding: 0 5px;
	width: fit-content;;
}

.text-accent {
	color: var(--accent);
}

.footer-icons > a:not(last-child), .footer-links > a:not(last-child) {
	margin-right: 5px;
	text-decoration: none;
}

.footer-icons > a:hover , .footer-links > a:hover {
	color: var(--primary);
	cursor: pointer;
	transform: scale(1.2);
}

/*about us page*/
#featured-image > div {
    width: 100%;
    height: auto;
    position: relative;
}

#featured-image > div::before {
    content: 'ABOUT US';
    position: absolute;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: white;
    background-color: black;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    align-items: center;
    align-content: center;
    z-index: 5;
    opacity: 0.8;
    font-weight: bold;
}

#featured-image > div >img {
    width: 100%;
    height: 100%;
}




/*animations*/
.fade-in {
	animation: fadeIn 2s ease-in-out;
	animation-timeline: view();
	animation-range-start: entry;
	animation-range-end: 20%;
}

.scale-in {
	animation: scaleIn 2s ease-in-out;
	animation-timeline: view();
	animation-range-start: entry;
	animation-range-end: 40%;
}

.slide-in-top, .slide-in-top-2, .slide-in-top-3 {
	animation: slide_in_top 2s ease-in-out forwards;
	animation-range-start: entry;
}

.slide-in-top-2{
	opacity: 0;
	animation-delay: 1s;
}

.slide-in-top-3{
	opacity: 0;
	animation-delay: 2s;
}

@keyframes slide_in_top {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate(-50px, -50px);
	}

	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes scaleIn {
	from{
		opacity: 0.5;
		transform: scale(0.5);
	}

	to {
		opacity: 1;
		transform: scale(1.0);
	}
}