:root {
	/* color */
	--brand-color: #d65108;
	--primary-bg-color: #ffe6d8;
	--sec-bg-color: #ffede2;
	--ter-bg-color: #fdf7f4;
	--white-color: #fff7f7;
	--primary-text: #191212;
	--secondary-text: #664848;
	--tertiary-text: #cc9191;
	--quaternary-text: #ffd1d1;

	/* font size*/
	--font-h1: 3.2rem;
	--font-h2: 4rem;
	--font-h3: 2rem;
	--font-h4: 1.5rem;
	--font-h5: 1.2rem;
	--font-body: 1.25rem;
	/* --font-body: 1.125rem; */
	--font-button: 0.75rem;
	--font-pre-title: 0.75rem;
	--font-small: 0.625rem;
	--font-navbar: 0.875rem;

	/* width and height */
	--header-height: 100px;
	--max-width: 1440px;
	--width: 1280px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
	/* background-color: var(--primary-bg-color); */
	/* max-width: var(--max-width); */
	/* margin: 0 auto; */
	color: var(--primary-text);
	/* margin-inline: auto; */
	position: relative;
	background-color: #fbfbfb;
}

h1 {
	font-size: var(--font-h1);
	line-height: 1.1;
}

h2 {
	font-size: var(--font-h2);
}

h3 {
	font-size: var(--font-h3);
	font-weight: 500;
	text-transform: uppercase;
}

h4 {
	font-size: var(--font-h4);
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 1.4rem;
}

h5 {
	font-size: var(--font-h5);
}

h4 {
	font-size: var(--font-h4);
}

p {
	font-size: var(--font-body);
	letter-spacing: 0.4px;
	line-height: 1.4;
	/* text-align: justify; */
}

small {
	font-size: var(--font-small);
	letter-spacing: 0.8px;
}

a {
	text-decoration: none;
	color: var(--primary-text);
}

img {
	width: 100%;
	height: auto;
	display: block;
	/* mix-blend-mode: luminosity; */
}

/*********************
----- Utilities ------
**********************/
.btn {
	/* width: min(50% - 1rem, 100%); */
	padding-inline: 1rem;
	padding-block: 0.5rem;
	background-color: var(--brand-color);
	/* border-radius: 0.5rem; */
	font-size: var(--font-button);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 1;
	transition: background-color 0.25s ease-in-out;
}

button {
	border: 1px solid transparent;
	color: var(--ter-bg-color);
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
}

.btn-clr {
	background-color: var(--primary-bg-color);
}

.btn:hover,
.btn:focus {
	/* background-color: hsl(var(--tertiary-text), 0.5); */
	/* background-color: hsla(0, 100%, 91%, 0.9); */
	/* background-color: hsla(var(--brand-color)/0.5); */
	border: 1px solid var(--brand-color);
	background-color: transparent;
	color: var(--brand-color);
}

.flex {
	display: flex;
}

.max-width {
	/* max-width: var(--max-width); */
	width: min(100% - 2rem, var(--max-width));
	margin-inline: auto;
}

/******************
----- Header ------
********************/

.navbar-container {
	padding-block: 2rem;
	background-color: var(--primary-bg-color);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar img {
	max-width: 8rem;
}

nav {
	font-size: var(--font-navbar);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

nav ul li a {
	padding: 0.5rem;
	/* margin-inline: 0.5rem; */
	border-bottom: 4px solid transparent;
}

nav ul li a:last-child {
	margin-right: 0;
}

nav ul li a:hover {
	border-bottom: #d65108 4px solid;
}

/* Hero */

.hero-container {
	max-width: var(--max-width);
	margin-inline: auto;

	/* height: 80vh; */
	aspect-ratio: 4/3;
	overflow: hidden;
	position: relative;

	background-image: url(../images/Hero\ 1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

}

.hero-section {
	/* display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-items: end; */
	height: 100%;
	/* gap: 2rem; */
	max-width: var(--max-width);
}

.hero-content {
	z-index: 1;
	display: flex;
	gap: 1rem;
	/* padding-inline: 4rem; */
	padding-bottom: 3rem;
	position: absolute;
	bottom: 0;
	/* left: 4rem; */
}

.hero-content h1 {
	/* margin-bottom: 2rem; */
	/* font-size: clamp(2.25rem, 0.20000000000000018rem + 6.406249999999999vw, 4.3rem); */
}

/* .hero-content p {
	padding-right: 10%;
	padding-top: 1rem;
} */

.hero-content a {
	color: var(--ter-bg-color);
	border: 1px solid transparent;
	align-self: center;
	margin-right: auto;
}

/* .design-section {
	position: absolute;
} */

.circle-design {
	/* max-width: var(--max-width); */
	/* width: min(100%, 100%); */
	/* width: 100%;
	height: 80vh;
	position: absolute;
	overflow: hidden; */
}

.hero-images {
	/* object-fit: cover;
	background-image: url('../images/Hero\ 1.png');
	background-repeat: no-repeat;
	background-size: cover; */
	/* top: 0;
	width: 100%;
	height: 100%; */
	/* position: relative; */
	/* padding-block: 4rem; */

	/* display: grid;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: repeat(2, auto);
	gap: 2rem; */
}

.image-one,
.image-two {
	/* overflow: hidden; */
	/* border-radius: 1rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1; */
}

/* .image-one {
	background-image: url('../images/pexels-pixabay-270557.jpg');
	grid-column: 2 / -1;
}

.image-two {
	background-image: url('../images/pexels-moose-photos-1586973.jpg');
	grid-column: 1 / 4;
} */

.svg-one,
.svg-two,
.svg-three {
	/* height: 10rem;
	width: 10rem; */
	/* border-radius: 50%; */
	/* background-color: var(--brand-color); */

	/* position: absolute; */
}

.svg-one {
	/* background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center; */
	/* bottom: -5%;
	left: 25%;
	height: 24rem;
	width: 24rem;
	background-color: #ffb181; */
}

.svg-two {
	/* right: -5%;
	top: 40%;
	width: 18rem;
	height: 18rem;
	background-color: #ffceaf; */
}

.svg-three {
	/* background-color: #ff8f49;
	height: 14rem;
	width: 14rem;
	top: -5%; */
}

/******************
----- Main ------
********************/
main section {
	padding-block: 10rem;
}

main section h3 {
	margin-bottom: 2rem;
}

/* About */
.about-container {
	background-color: var(--ter-bg-color);
	z-index: 1;
}

.column-container {
	column-count: 2;
	column-gap: 4rem;
}

.column-container p {
	text-indent: 2rem;
	margin-bottom: 1rem;
}

.p-link {
	color: var(--brand-color);
}

.column-container a.p-link:focus .column-container a.p-link:hover {
	/* color: var(--brand-color); */
	outline: var(--brand-color);
	color: #191212;
}

.founder {
	padding-top: 8rem;
}

.about-content {
	padding-block: 1rem;
	padding-left: 2rem;
}

.about-content p {
	padding: 0;
	margin: 0;
	/* text-align: justify; */
	/* line-height: 1.6; */
}

.about-content ul li {
	padding-top: 1rem;
	/* padding-left: 1.2rem; */
	/* Indents the bullets */
	/* line-height: 1.4; */
	/* color: var(--secondary-text); */
	/* list-style-type: disc; */
	/* Adds the actual bullet dot */

}

/* Services */
.services-container {
	background-color: var(--sec-bg-color);
}

.services {
	/* padding: 4rem 2rem 0rem 2rem; */
	padding: min(1rem, 2%) min(1rem, 2%) 0 min(1rem, 2%);

	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
	grid-template-columns: 1fr;
	gap: 4rem;
}

.services article {
	/* border: 1px solid coral; */
	/* border-radius: 8px; */
	/* padding: 2rem 2rem 4rem 2rem; */
	/* display: flex; */
	/* flex-direction: column; */
	/* gap: 4rem; */
}

.services article svg {
	/* width: 30%; */
	/* width: 10%; */
	/* width: clamp(6rem, 30%, 8rem); */
	/* color: var(--brand-color); */
	/* align-self: flex-start; */
}

.service-content {
	/* display: flex; */
	/* flex-direction: column; */
}

/* =========================================
   Service Cards - Grid Layout
   ========================================= */

/* 1. Define the Grid on the Article */
.services article {
	border: 1px solid coral;
	padding: min(2rem, 4%) min(2rem, 4%) min(4rem, 8%) min(2rem, 4%);

	display: grid;
	/* First row has 2 columns: 60px for the icon, and '1fr' (the rest of the space) for the title */
	grid-template-columns: clamp(6rem, 20%, 8rem) 1fr;
	grid-template-rows: auto auto;
	/* Two rows that size automatically */
	column-gap: 1.5rem;
	row-gap: 1rem;
	align-items: start;
	/* Vertically centers the icon and the title */
}

/* 2. The Magic Trick */
.service-content {
	/* This makes the browser treat the <h4> and <p> as if they were directly inside the <article> grid */
	display: contents;
}

/* 3. Position the Icon (Row 1, Col 1) */
.services article svg {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: clamp(6rem, 30%, 8rem);
	/* It will perfectly fill the 60px column we set above */
	color: var(--brand-color);
}

/* 4. Position the Title (Row 1, Col 2) */
.service-content h4,
.service-content p {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	margin-bottom: 0;
	/* Let the grid row-gap handle the spacing instead */
}

.service-content p {
	font-style: italic;
	padding-top: 1rem;
}

/* 5. Position the Text (Row 2, Spanning both columns) */
.service-content ul {
	grid-column: 1 / -1;
	/* The '-1' tells it to span all the way to the end of the card */
	grid-row: 2 / 3;
	align-self: start;
}


/* =========================================
   Service Sub-List Styles 
   ========================================= */
.service-sub-list {
	padding-top: 1.5rem;
	/* padding-left: 1.2rem; */
	/* Indents the bullets */
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* Adds space between each bullet point */
}

.service-sub-list li {
	font-size: 1.1rem;
	/* Slightly smaller than the main paragraph */
	line-height: 1;
	color: var(--secondary-text);
	/* list-style-type: disc; */
	/* Adds the actual bullet dot */
}

.service-sub-list strong {
	color: var(--primary-text);
	font-weight: 600;
}

/* Contact */

dialog {
	top: 50%;
	left: 50%;
	padding: 4rem;
	border: 2px solid var(--brand-color);

	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.modal::backdrop {
	background: rgb(0 0 0 / 0.4);
}

.contact-locations-container {
	background-color: var(--ter-bg-color);
}

.contact-locations {
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
	gap: 4rem;
}

/* .locations, */
.contact {
	width: 100%;
	max-width: 40rem;
	justify-self: center;
}

/* .location-container,
form {
	padding-top: 4rem;
} */

/* .location-container {
	display: flex;
	gap: 4rem;
	padding-left: 2rem;
} */

/* .location {
	text-align: center;
	padding-bottom: 2rem;
} */

/* .location h5 {
	padding-bottom: 0.1rem;
	border-bottom: 2px solid var(--brand-color);
	margin-bottom: 1rem;
} */

/* Form */

form {
	width: min(100% - 2rem, 100%);
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	gap: 3rem;
}

label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--font-button);
	text-transform: capitalize;
}

input,
textarea {
	width: 100%;
	padding: 0.8rem 0.4rem;
	border: 1px solid transparent;
	font-size: var(--font-button);
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
	transition: all ease-out 0.2s;
}

textarea {
	text-align: justify;
}

form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus {
	border: 1px solid var(--brand-color);
}

/******************
----- Footer ------
********************/
footer {
	background-color: var(--primary-bg-color);
}

.footer-logo {
	width: 15%;
	margin-inline: auto;
	padding-block: 1rem;
	/* padding-block-end: 1rem; */
	border-bottom: 2px solid var(--brand-color);
}

.footer-content {
	margin-block: 4rem;
	display: grid;
	/* grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-items: center;

	gap: 2rem;
}

.footer-services ul {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	text-transform: capitalize;
}

.contact-detail {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.contact-detail-phone,
.contact-detail-email {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.contact-detail-email {
	align-self: baseline;
}

.contact-detail-email .emails {
	height: 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: start;
	gap: 0.4rem;
}

.footer .copyright {
	text-align: center;
	padding: 1rem;
	text-transform: uppercase;
	font-weight: 600;
}

.scroll-top,
.floating-contact {
	background-color: rgba(214, 81, 8, 0.5);
	padding: .5rem;
	position: fixed;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.scroll-top svg,
.floating-contact svg {
	color: var(--sec-bg-color);
	width: 2rem;
	height: 2rem;
}

.scroll-top {
	bottom: 1rem;
	right: 1rem;
}

.floating-contact {
	bottom: 1rem;
	right: 4.5rem;
}

/******************
----- Media Query ------
********************/

@media screen and (max-width: 991px) {
	.hero-container {
		/* padding-top: 10%; */
		/* height: 90vh;
		overflow: hidden; */

	}

	/* .circle-design {
		height: 90vh;
	} */

	.hero-section {
		/* grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		justify-content: center;
		align-items: center;
		height: 100%; */
	}

	/* .hero-content {
		width: min(100% - 2rem, 100%);
		text-align: center;
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	} */

	.hero-content h1 {
		/* margin-bottom: 4rem; */
		/* font-size: clamp(2rem, -0.15625rem + 7.187499999999999vw, 4.3rem); */
		/* font-size: clamp(2.25rem, 0.20000000000000018rem + 6.406249999999999vw, 4.3rem);
		width: min(80% - 4rem); */
	}

	/* .hero-content p {
		padding-right: 0rem;
		padding-inline: 4rem;
		max-width: 100%;
	} */

	/* .hero-content a {
		margin-right: 0;
	} */

	/* .hero-images {
		background-image: none;
		display: block;
	} */

	/* .image-one,
	.image-two {
		background-image: none;
	} */

	/* .svg-two {
		top: -10rem;
		right: 0;
	} */

	/* .svg-one {
		left: 0;
	} */
}

@media screen and (max-width: 666px) {
	.hero-container {
		/* overflow: hidden; */
		padding-inline: 0;
		width: 100%;
		background-image: url(../images/Hero\ 2.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		height: 80vh;
	}

	.hero-content {
		flex-direction: column;
	}

	.navbar {
		flex-direction: column;
		gap: 2rem;
	}

	/* 
	.circle-design {
		overflow: hidden;
		height: 90vh;
	} */

	/* .hero-content {
		width: min(100% - 2rem);
	}

	.hero-content p {
		padding-inline: 0;
	}

	.svg-one {
		left: -1rem;
	} */

	form {
		/* width: 80%; */
		margin-inline: auto;
	}

	.column-container {
		column-count: 1;
		column-gap: 0rem;
		padding-inline: 1rem;
	}

	.footer-content {
		justify-items: baseline;
		padding-inline-start: 2rem;
	}
}

/* =========================================
   Dropdown Menu Styles 
   ========================================= */

/* Make the parent li the reference point for the absolute positioned dropdown */
.dropdown {
	position: relative;
}

.dropdown:hover>a {
	border-bottom: 4px solid transparent;
}

/* The actual dropdown box */
ul.dropdown-menu {
	display: none;
	/* Hidden by default */
	position: absolute;
	top: 1.5rem;
	left: 0;
	background-color: var(--ter-bg-color);
	/* border: 1px solid var(--brand-color); */
	/* min-width: 16rem; */
	width: max-content;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	z-index: 100;
	/* Keeps it on top of the hero image */
	padding-block: 0.5rem;
	border-radius: 0.5rem;
}

/* Ensure the list items stack vertically */
.dropdown-menu li {
	display: block;
	width: 100%;
}

/* Style the links inside the dropdown */
.dropdown-menu li a {
	display: block;
	padding: 0.8rem 1.5rem;
	color: var(--primary-text);
	text-transform: uppercase;
	font-size: 12px;
	/* font-size: var(--font-navbar); */
	border-bottom: none;
	margin: 0;
	/* Overrides your main navbar hover border */
	transition: background-color 0.2s ease;
}

/* Hover effect for the dropdown items */
.dropdown-menu li a:hover {
	background-color: var(--sec-bg-color);
	color: var(--brand-color);
	border-bottom: none;
}

/* The Magic Trick: Show the menu when hovering over the parent li */
.dropdown:hover .dropdown-menu {
	display: block;
}