/* style sheet for Handyman Website */
/* resets and setups */
:root {
	--brick: #891E00;
	--silver: #CFD0DA;
	--yellow: #DFD400;
	--brown: #6D2A00;
	--white: #FFFFFF;
	--fawn: #C0A66C;
	--caramel: #CC894C;
	--gray-text: #81828a;
	--text-dark: #474747;
	
}

* , *::before, *::after {
	box-sizing: border-box;
}

* {
	font-family: "DM Serif Text", serif;
	margin: 0;
	padding: 0;
}

html { scroll-behaviour: smooth; }

body { line-height: 1.5; }

img, picture, video, canvas, svg {
	display: block;
	width: 100%;
}

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

	p {
		margin-bottom: 1rem;
		color: var(--text-dark);
	}
	
ul { list-style: none; }

.button {
	color: var(--white);
	padding: .75rem 2rem;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.3s;
}

section { margin-block-end: 2rem; }

.fw {
	width: 100%;
	background-color: var(--silver); 
}

.head_socials a {
    text-decoration: none;
    color: var(--brick);
    font-size: 1.3rem;
}
.head_socials a:hover { color: var(--fawn); }
.footer_socials a {
    text-decoration: none;
    font-size: 1.3rem;
}
.footer_socials a:hover { color: var(--fawn); }

/* header */
header {
	width: 100%;
	height: 200px;
}

.head_contact { display: none; }

@media (min-width: 1000px){
	.header {
		display: flex;
		justify-content: space-between;
		width: 1000px;
		margin-inline: auto;
		
	}
	
	.head_contact { display: block; margin-block: auto; }
	
}

.logo {
	margin-block-start: .25em;
	margin-inline: auto;
	width: 200px;
}

/* primary_navigation */
.primary_navigation {
	display: grid;
	justify-content: center;
	margin-block: auto;
}

.primary_navigation ul {
	display: flex;
	gap: 2rem;
	text-transform: capitalize;
}

.button { background-color: var(--fawn); }

.current, .button:hover { background-color: var(--brick); }

/* mobile menu */
.checkbtn {
	font-size: 30px;
	color: var(--fawn);
	cursor: pointer;
	display: none;
}

#check { display: none; }

@media only screen and (max-width: 750px) {
	header {
		height: 70px;
	}
	
	header .logo {
		position: absolute;
		left: .75em;
		top: 0;
		width: 70px;
	}
	
	
	
	.checkbtn {
		display: block;
		order: 1;
		position: absolute;
		top: 0;
		right: 1em;
	}
	
	.primary_navigation ul {
		position: fixed;
		z-index: 99;
		top: 70px;
		right: -100%;
		background-color: var(--brick);
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s;
	}
	
	.primary_navigation ul li { margin: 20px 0; }
	
	.primary_navigation ul li a {
		font-size: 20px;
		background-color: inherit;
	}
	
	#check:checked ~ ul { right: 0; }
		
}

/* banner */
.banner { width: 100%; }

.slide {
	display: none;
	grid-template: "container";
	place-items: center;
	place-content: center;
	overflow: hidden;
	animation: 
	     fade_in 1.5s Linear forwards,
	     fade_out 1.5s 8.5s linear forwards;
}

.slide > * { grid-area: container; }

.slide img {
	width: 100vw;
	height: auto;
	aspect-ratio: 14 / 5;
	object-fit: cover;
}

@keyframes fade_in {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@keyframes fade_out {
	0% { opacity: 1 }
	100% { opacity: 0 }
}

/* main */
main { padding-inline: 1rem; }

@media (min-width: 1100px) {
	main {
		margin-inline: auto;
		width: 1000px;
		padding-inline: 0;
		
	}
}

main h2 { margin-top: 1.5rem; }

main li { padding: .5rem 0 }

.about {
	max-width: 45%;
	aspect-ratio: 8/5;
	object-fit: cover;
	float: right;
	margin: 0 0 .5rem 1rem;
}

/* cards */
.cards {
	display: grid;
	gap: 2.5rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

	
.card-content { padding: .5rem }

.card img {
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

/* services */
.services {

}
.service {
	display: grid;
	gap: 1rem;
	grid-template-columns: 33% 1fr;
	margin-bottom: 1rem;
}
.service img {
	aspect-ratio: 8 / 5;
	object-fit: cover;
}


/* reviews */
.reviews {
	display: flex;
	gap: 2rem;
	margin-top: 1rem;
}

.reviews blockquote {
	padding: 3rem;
	position: relative;
	color: var(--gray-text);
}

.reviews blockquote::before {
	content: '“';
	position:absolute;
	left: -0.1em;
	top: 0.1em;
	font-size: 110px;
}

/* gallery */
.gallery {
	columns: 3 300px;
}
.gallery img { margin-bottom: 1rem; }


/* footer */
footer {
	background-color: var(--brown);
	color: var(--white);
	padding: 1rem;
}

.footer_content {
	display: grid;
	gap: 2.5rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

@media (min-width: 1000px) {
	.footer_content, .reviews {
		margin-inline: auto;
		width: 1000px;
	}
}

footer a { color: inherit; }

footer a:hover { color:var(--fawn); }