/* Define the font */
@font-face {
	font-family: 'garamond';
	src: url('~/fonts/garamond.ttf') format('truetype');
}

/* Use the font */
body {
	font-family: 'garamond', sans-serif;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.7rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.2rem;
}

.bg-brown {
	background-color: #E5E0DA;
}

.bg-grey {
	background-color: #454B50;
}

.text-brown {
	color: #E5E0DA;
}

.vertical-center {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

.btn-atelier {
			background-color: transparent; /* Transparent background */
			border: 2px solid black; /* Black border */
			border-radius: 10px;
			color: black; /* Text color */
			font-weight: bold; /* Optional: Make text bold */
			padding: 0.3rem 1.5rem; /* Adjust padding as needed */
			transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
			width: auto;
			max-width: 200px;
		}

		.btn-atelier:hover {
			background-color: black; /* Black background on hover */
			color: #fff; /* White text on hover */
		}

		.btn-atelier:focus, .btn-atelider:active {
			box-shadow: none; /* Remove default Bootstrap box shadow on focus/active */
		}

.btn-atelier-brown {
			background-color: transparent; /* Transparent background */
			border: 2px solid #E5E0DA; /* Black border */
			border-radius: 10px;
			color: #E5E0DA; /* Text color */
			font-weight: bold; /* Optional: Make text bold */
			padding: 0.3rem 1.5rem; /* Adjust padding as needed */
			transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
			width: auto;
			max-width: 200px;
		}

		.btn-atelier-brown:hover {
			background-color: #F4F2F0; /* Black background on hover */
			color: #000; /* White text on hover */
		}

		.btn-atelier-brown:focus, .btn-atelider:active {
			box-shadow: none; /* Remove default Bootstrap box shadow on focus/active */
		}

.logo img {
			height: 35px; /* Adjust the height as needed */
			width: auto; /* Maintain aspect ratio */
		}
		.row-nowrap {
			flex-wrap: nowrap; /* Prevent wrapping */
			overflow-x: auto; /* Enable horizontal scrolling if needed */
		}

.btn-subscribe {
	background-color: #454B50; /* Button background color */
	border: 2px solid #E5E0DA; /* Button border color */
	border-radius: 0; /* Remove border-radius to align with the input field */
	color: #E5E0DA; /* Text color */
	font-size: 0.8rem; /* Font size */
	padding: 0.5rem 0.8rem; /* Adjust padding as needed */
	transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
	width: auto; /* Button width */
	max-width: 200px; /* Maximum width of the button */
	margin-left: -3px; /* Remove space between input and button */
}

.btn-subscribe:hover {
	background-color: #949494; /* Background color on hover */
	color: #fff; /* Text color on hover */
}

.btn-subscribe:focus, .btn-subscribe:active {
	box-shadow: none; /* Remove default box shadow on focus/active */
	outline: none; /* Remove default outline on focus */
}
.circle {
	width: 150px;
	height: 150px;
	border-radius: 50%; /* Make the image circular */
	object-fit: cover; /* Ensure image fills the circle */
	margin-bottom: 10px; /* Add spacing below the image */
}

.whatsapp {
			height: 30px;
			margin-left: 50px; /* Default margin for desktop */
		}
@media (max-width: 1199px) {
			/* Tablets and small desktops */
			.whatsapp {
				margin-left: 0px; /* Adjust margin for tablets and smaller desktops */
			}
		}
@media (max-width: 768px) {
	.whatsapp {
		margin-left: 0; /* Remove margin on mobile */
	}
}