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

:root{
	/* --primary: #CC1318;  Red */
	--primary: #022c65; /* Blue  */
	--primary-dark: #12CC43;  /* Dark Red */
	--light: #F0F0F0;
	--dark: #191B1C;
}

/* Initialize */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	font-family: 'Montserrat', sans-serif;
}
a{
	text-decoration: none;
	color: inherit;
}
li{
	list-style: none;
}
main{
	min-height: 100vh;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	padding-top: 60px;
	background-color: var(--light);
}
.layout{
	width: 100%;
	height: 100%;
	display: inline-block;
	padding: 1.5rem;
}
.motion-container{
	width: 100%;
	margin-inline: auto;
	padding-top: 0.5rem;
	display: flex;
	align-items: start;
	justify-content: start;
	overflow: hidden;
}
.motion{
	display: inline-block;
	width: 100%;
	font-weight: 700;
	text-transform: capitalize;
}
.motion span{
	display: inline-block;
	animation: animatedText .9s ease-in-out;
}
.services .service-motion{
	width: 100%;
	position: relative;
 	animation: animatedAccordion .6s ease-in-out;
}


/* WHATSAPP */
#whatsapp{
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 999;
	width: 3.5rem;
	height: 3.5rem;
	cursor: pointer;
}
#whatsapp img{
	width: 100%;
	height: 100%;
}

/* NAVBAR */
header{
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	padding: 1.5rem;
	font-weight: 500;
	font-size: 0.75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: black;
	border-bottom: 2px solid var(--primary);
	z-index: 10;
	background-color:#e5e7eb;
}
header .logo-container{
	position: absolute;
	left: 50%;
	top: 0.75rem;
	transform: translateX(-50%);
}
header .logo-container a{
	display: inline-block;
	width: 6rem;
	height: 6rem;
	border-radius: 9999px;
	overflow: hidden;
}
.logo{
 width: 100%;
 height: 100%;
}
#hamburger{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: transparent;
}
#hamburger span:nth-child(1),
#hamburger span:nth-child(2),
#hamburger span:nth-child(3){
	background-color: black;
	width: 1.5rem;
	height: 0.125rem;
	border-radius: 0.125rem;
	transition: all 0.3s ease-out;
	display: block;
}
#hamburger span:nth-child(1){
	transform: translate(0,-0.125rem);
}
#hamburger span:nth-child(2){
	margin-top: .125rem;
	margin-bottom: .125rem;
	opacity: 1;
}
#hamburger span:nth-child(3){
	transform: translateY(0.125rem);
}
#hamburger span:nth-child(1).open{
	transform: translate(0,0.25rem) rotate(45deg);
}
#hamburger span:nth-child(2).open{
	opacity: 0;
}
#hamburger span:nth-child(3).open{
	transform: translate(0,-0.25rem) rotate(-45deg);
}
#motion-div{
	min-width: 70vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 30;
	padding: 8rem 0;
	backdrop-filter: blur(12px);
	background-color: hsla(0,0%,94%,.6);
	border-radius: 0.5rem;
	box-shadow: 
	0 0 #0000,
	0 0 #0000,
	0 4px 6px -1px rgba(0,0,0,.1), 
	0 2px 4px -2px rgba(0,0,0,.1);
	visibility: hidden;
}
#motion-div.open{
	visibility: visible;
}
.mobile-nav{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	
}
.mobile-nav a{
	position: relative;
	margin: 0.5rem 0;
}
.desktop-nav a::after,
.mobile-nav a::after{
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	display: inline-block;
	left: 0;
	bottom: -0.125rem;
	background-color: black;
	transition: width 0.3s ease;
}
.mobile-nav a:hover::after,
.mobile-nav a.active::after,
.desktop-nav a:hover::after,
.desktop-nav a.active::after{
	width: 100%;
}
header h1{
	text-transform: uppercase;
	width: 100%;
	font-size: 0.75rem;
	
	font-weight: bold;
	display: none;
}
.desktop-nav-container{
	width: 100%;
	display: none;
	justify-content: space-between;
	align-items: center;
}
.desktop-nav-container a{
	margin-right: 1rem;
	display: inline-block;
	position: relative;
	font-weight: bold;
}

/* HOME */
main.home{
	background-image: url("/Images/home.jpg");
	color: var(--light);
}
.home .layout{
	padding-top: 6rem;
}
.hero{
	width: 100%;
	padding-left: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.hero-title{
	display: flex;
	flex-direction: column;
	width: fit-content;
	border-bottom: 4px solid var(--primary);
	padding-bottom: 0.5rem;
}
.hero-title span{
	font-size: 2.25rem;
	
	font-weight: bold;
}
.hero .motion{
	width: 100%;
	font-weight: 700;
	font-size: 2.25rem;
	
	display: inline-block;
	text-transform: capitalize;
}
.hero .motion span{
	display: inline-block;
	animation: animatedText .9s ease-in-out;
}
.hero-link{
	padding-inline: 1.5rem;
	padding-block: 0.5rem;
	background-color: var(--primary);
	opacity: 0.9;
	width: fit-content;
	cursor: pointer;
}
.hero-link:hover{
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ABOUT */
.about .layout{
	padding-top: 60px;	
}
.about .motion{
	color: var(--dark);
	text-align: center;
	font-size: 2.25rem;
}
.about img{
	width: 100%;
	height: 500px;
	margin: 2.5rem auto;
	object-fit: cover;
	object-position: center;
	overflow: hidden;
}
.about .text{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--dark);
	font-size: 1.125rem;
	text-align: justify;
	line-height: 1.75rem;
}


/* SERVICES */
.services .layout{
	padding-top: 60px;	
}
.services .motion{
	color: var(--dark);
	text-align: center;
	font-size: 2.25rem;
}
.services .text{
	margin-top: 3rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 500;
	text-align: justify;
}
.services ul{
	margin-top: 3rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.services .service-motion{
	width: 100%;
	position: relative;
	opacity: 0;
	transform: translateY(3rem);
	transition: transform 0.5s ease, opacity 0.5s ease;
}
.services .service-motion.animate{
	opacity: 1;
	transform: translateY(0);
}
.services .accordion{
	background-color: #FFF;
	color: rgba(0, 0, 0, 0.87);
	transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	border-radius: 4px;
	box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
	transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}
.accordion-title{
	align-items: center;
	position: relative;
	box-sizing: border-box;
	vertical-align: middle;
	display: flex;
	flex-grow: 1;
	min-height: 3rem;
	padding: 0 1rem;
	cursor: pointer;
}
.accordion-title h2{
	display: flex;
	flex-grow: 1;
	margin: 12px 0;
	transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.75;
	letter-spacing: 0.00938em;
}
.accordion-body{
	display: grid;
	grid-template-rows: 0fr;
	transition: 250ms grid-template-rows ease;
}
.accordion .text-wrapper{
	overflow: hidden;
	text-align: justify;
	padding-inline: 1rem;
}
.accordion.open .accordion-body{
	grid-template-rows: 1fr;
}
.accordion.open .text-wrapper{
	padding-bottom: 1rem;
}
.accordion .text-wrapper p{
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
}

/* CONTACT */
.contact .layout{
	padding-top: 60px;	
}
.contact .layout > div:nth-child(2){
	margin: 3rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	color: var(--dark);
	font-size: 1.125rem;
	line-height: 1.75rem;
}
.contact .motion{
	color: var(--dark);
	text-align: center;
	font-size: 2.25rem;
}
.contact .text{
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 500;
	text-align: justify;
}
.contact .card{
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	width: 100%;
	background-color: rgb(25 27 28 / 0.2 );
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card h2{
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.card div{
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.card i{
	color: var(--primary);
}
form{
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	width: 100%;
	margin-inline: auto;
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
form h2{
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	margin-bottom: 1rem;
	align-self: center;
}
form label{
	font-weight: 700;
}
form input,
form textarea{
	background-color: rgb(25 27 28 / 0.1);
	border-radius: 6px;
	border: transparent;
	margin-bottom: 1rem;
	padding-inline: 0.5rem;
	padding-block: 0.25rem;
	font-size: 1rem;
	line-height: 1.5rem;
}
form input:focus,
form textarea:focus{
	outline: none;
}
form button{
	margin-top: 1rem;
}
form button{
	background-color: var(--primary);
	width: fit-content;
	align-self: center;
	padding: 0.5rem 1.5rem;
	border-radius: 8px;
	color: var(--light);
	cursor: pointer;
}
form button:hover{
	transform: scale(1.05);
}



/* FOOTER */
footer{
	width: 100%;
	border-top: 2px solid var(--primary);
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--light);
	background-color: var(--dark);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	position: relative;
}
footer .logo-container{
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
}
footer .logo{
	display: inline-block;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	overflow: hidden;
}

footer .services{
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
}

footer .title,
footer .title{
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-bottom: 0.5rem;
}

footer .social{
 display: flex;
 gap: 0.75rem;	
}

footer .social a{
	width: 1.5rem;
	height: 1.5rem;
	cursor: pointer;
}

footer .social img{
	width: 100%;
	height: 100%;
}

footer .information{
	width: max-content;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
}


/* sm screens */
@media (min-width: 600px) {
	.motion-container{
		padding-block: 0;
	}
}

/* md screens */
@media (min-width: 800px) {
	main{
		padding-top: 80px;
	}
	.layout{
		padding-top: 80px;
		padding-inline: 2.5rem;
	}
	header{
		height: 80px;
	}
	#hamburger{
		display: none;
	}
	header h1{
		display: inline-block;
	}
	.desktop-nav-container{
		display: flex;
		justify-content: end;
	}
	/* HOME */
	.hero-title{
		flex-direction: row;
	}
	.hero-title span:nth-child(2){
		margin-left: 1.25rem;
	}
	/* ABOUT */
	/* ... */
	
	/* SERVICES */
	/* ... */

	/* FOOTER */
	footer{
		flex-direction: row;
		align-items: start;
		gap: 2.5rem;
	}
	footer .services,
	footer .information{
		align-items: start;
	}
}

/* lg screens */
@media (min-width: 1024px) {
	main{
		padding-top: 90px;
	}
	.layout{
		padding-top: 90px;
		padding-bottom: 6rem;
	}
	header{
		height: 90px;
	}
	header .logo-container a{
		width: 8rem;
		height: 8rem;
	}
	header h1{
		font-size: 1rem;
	}
	.desktop-nav a{
		font-size: 1rem;
	}

	/* HOME */
	.home .layout{
		padding-top: 8rem;
	}
	.hero .motion{
		font-size: 3rem;
	}

	/* ABOUT */

	/* SERVICES */
	.services ul{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.accordion-title h2{
		font-size: 1rem;
		line-height: 1.5rem;
	}

	/* CONTACT */
	.contact .card{
		width: 400px;
	}
	form{
		width: 60%;
	}
}

/* xl screens */
@media (min-width: 1366px) {
	.layout{
		padding-bottom: 7rem;
	}
	/* HOME */
	.home .layout{
		padding-top: 9rem;
	}
	.hero{
		gap: 3rem;
	}
	.hero-title span{
		font-size: 3rem;
	}
	.hero-link{
		padding-inline: 2rem;
		padding-block: 1rem;
	}

	/* ABOUT */
	.about .motion{
		font-size: 3rem;
	}
	.about .text{
		font-size: 1.25rem;
	}

	/* SERVICES */
	.services .motion{
		font-size: 3rem;
	}
	.accordion-title h2{
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
	.services .text{
		font-size: 1.25rem;
	}

	/* CONTACT */
	.contact .motion{
		font-size: 3rem;
	}
	.contact .text{
		font-size: 1.25rem;
	}
	.card h2{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	form h2{
		font-size: 1.5rem;
		line-height: 2rem;
	}
}


/* Animations */
@keyframes animatedText {
	0%{
		opacity: 0;
		transform: translateY(1rem);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}