@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
	scroll-padding-top:1rem;
	scroll-behavior:smooth;
	list-style-type:none;
	text-decoration:none;
	font-family: 'Poppins', sans-serif;
}

:root{
	--main-color:#d90429;
	--bg-color:#ffffff;
	--bg-color2:#fff6f8;
	--text-color:#020102;
}

/*  Scrollbar personalizada  */

body::-webkit-scrollbar {
    width:5px;              
}

body::-webkit-scrollbar-track {
    background:var(--bg-color);        
}

body::-webkit-scrollbar-thumb {
    background-color:var(--text-color);    
}

/*button*/

.btn{
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	background-color:var(--main-color);
	color:var(--bg-color2);
	font-size:15px;
	padding:10px 22px;
	text-decoration:none;
}

.btn:hover{
	background-color:#e3052b;
	color:var(--bg-color2);
	transition:0.6s ease;
}

/*fonts-weights*/

.bold{
	font-weight:700;
}

.semibold{
	font-weight:600;
}

.medium{
	font-weight:500;
}

.regular{
	font-weight:400;
}

/* css */

img{
	width:100%;
}

body{
	color:var(--text-color);
}

.container{
	max-width:950px;
	margin-left:auto;
	margin-right:auto;
}

section{
	padding:4rem 0 2rem;
}

/* navbar */

header{
	display:block;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}

header.shadow{
	background-color:var(--bg-color);
	box-shadow:4px 4px 20px rgb(15 54 55 / 10%);
	transition:0.5s ease;
}

header.shadow #search-icon{
	color:var(--text-color);
}

.nav{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:20px 35px;
}

#menu-icon{
	display:none;
	font-size:24px;
	cursor:pointer;
	color:var(--text-color);
}

.logo{
	font-size:1.2rem;
	color:var(--text-color);
}

.logo span, .navbar a:hover, .navbar .active{
	color:var(--main-color);
	transition:0.3s ease;
}

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

.navbar a{
	color:var(--text-color);
	font-size:1rem;

}

#search-icon{
	font-size:24px;
	cursor:pointer;
	color:var(--bg-color2);
}

.search-box{
	position:absolute;
	top:110%;
	left:0;
	right:0;
	background-color:var(--bg-color);
	box-shadow:4px 4px 20px rgb(15 54 55 / 10%);
	border-radius:0.5rem;
	clip-path:circle(0% at 100% 0%);
	transition:0.2s ease;
}

.search-box.active{
	clip-path:circle(144% at 100% 0%);
	transition:0.2s ease;
}

.search-box input{
	width:100%;
	padding:20px;
	border:none;
	outline:none;
	background:transparent;
	font-size:1rem;
}

/* section-home */

.home{
	max-width:1920px;
	margin:0 auto;
	width:100%;
	min-height:680px;
	display:flex;
	align-items:center;
	background-image:url("../images/car-home.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center left;
}

/* tirar o width, caso ele não funcione na responsividade*/

.home-text{
	padding:130px;
	width:750px;
}

.home-text h1{
	font-size:2.4rem;
}

.home-text p{
	font-size:0.938rem;
	margin:0.5rem 0 1.2rem;
	color:var(--text-color);
}

/* cars section */

.header-cars, .header-parts, .header-blog{
	text-align:center;
}

.header-cars span{
	color:var(--main-color);
}

.header-cars h2{
	color:var(--text-color);
	font-size:30px;
}

.header-cars p{
	font-size:0.938rem;
	color:var(--text-color);
}

.cars-container{
	display:flex;
	flex-wrap:wrap;
	gap:2rem;
}

.cars-container .box{
	flex:1 1 17rem;
	position:relative;
	height:200px;
	overflow:hidden;
	border-radius:0.5rem;
}

.cars-container .box img{
	width:100%;
	height:100%;
	object-fit:cover;
	overflow:hidden;
	cursor:pointer;
}

.cars-container .box img:hover{
	transform:scale(1.1);
	transition:0.5s;
}

.cars-container .box h2{
	position:absolute;
	bottom:1rem;
	left:1rem;
	font-weight:400;
	background-color:var(--bg-color2);
	padding:8px;
	font-size:15px;
	border-radius:0.5rem;
	cursor:pointer;
}

.cars-container .box h2:hover{
	background-color:var(--main-color);
	color:var(--bg-color2);
	transition:0.4s;
}

/* section-about */

.about{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1.5rem;
}

.about-img{
	flex:1 1 21rem;
}

.about-text{
	flex:1 1 21rem;
}

.about-text span{
	color:var(--main-color);
}

.about-text h1{
	font-size:1.7rem;
}

.about-text p{
	font-size:0.938rem;
	color:var(--text-color);
	margin:0.5rem 0 1.4rem;
}

/* section-parts */

.pecas-container{
	display:flex;
	flex-wrap:wrap;
	gap:2rem;
	margin-top:2rem;
}

.pecas-container .box{
	flex:1 1 17rem;
	position:relative;
	padding:20px;
	display:flex;
	flex-direction:column;
	background:#f6f6f6;
	border-radius:0.5rem;
}

.pecas-container .box img{
	width:100%;
	height:150px;
	object-fit:contain;
	object-position:center;
	margin-bottom:1rem;
}

.pecas-container .box h3{
	font-size:1.1rem;
	font-weight:600;
}

.pecas-container .box .bx{
	color:var(--text-color);
	margin:0.5rem 0;
	font-size:17px;
	font-weight:400;
}

.pecas-container .box .btn{
	max-width:120px;
	font-size:10px;
}

.pecas-container .box .details{
	display:flex;
	align-items:center;
	position:absolute;
	bottom:1.8rem;
	right:1rem;
	font-size:1rem;
	color:var(--text-color);
	font-size:13px;
}

.pecas-container .box .details:hover{
	color:var(--main-color);
	transition:0.5s;
	text-decoration:underline;
}

.pecas-container .box span{
	font-size:1.1rem;
	font-weight:600;
	color:var(--main-color);
}

.header-parts span{
	color:var(--main-color);
}

.header-parts p{
	font-size:0.938rem;
	color:var(--text-color);
}

.header-blog span{
	color:var(--main-color);
}

.header-blog p{
	font-size:0.938rem;
	color:var(--text-color);
}

/* section-blog */

.blog-container{
	display:flex;
	flex-wrap:wrap;
	gap:2rem;
	margin-top:2rem;
}

.blog-container .box{
	flex:1 1 13rem;
	padding:20px;
	cursor:pointer;
}

.blog-container .box img{
	border-radius:0.5rem;
}

.blog-container .box:hover{
	transition:0.4s;
	border-radius:0.5rem;
	background-color:#f6f6f6;
}

.blog-container .box span{
	font-size:1rem;
	color:var(--main-color);
}

.blog-container .box p{
	font-size:0.938rem;
	margin:4px 0;
	color:var(--text-color);
}

.blog-container .box .btn-blog{
	display:flex;
	align-items:center;
	column-gap:4px;
	color:var(--text-color);
}

.blog-container .box .btn-blog .bx{
	font-size:15px;
}

.blog-container .box .btn-blog:hover{
	color:var(--main-color);
	column-gap:0.7rem;
	transition:0.4s;
}

/* footer */

.footer{
	padding:20px;
	background-color:var(--text-color);
	color:#f6f6f6;
	border-top:2px solid var(--main-color);
}

.footer-container{
	display:flex;
	justify-content:space-between;
	gap:2rem;
}

.footer-container .logo{
	color:var(--bg-color2);
	margin-bottom:1rem;
}

.footer-container .footer-box{
	display:flex;
	flex-direction:column;
}

.social-medias{
	display:flex;
	align-items:center;
}

.social-medias a{
	font-size:19px;
	color:var(--bg-color2);
	margin-right:1rem;
}

.social-medias a:hover{
	color:var(--main-color);
	transition:0.5s;
}

.footer-box h3{
	font-size:1.1rem;
	font-weight:400;
	margin-bottom:1rem;
}

.footer-box a, .footer-box p{
	margin-bottom:10px;
	color:#989899;
}

.footer-box a:hover{
	color:var(--main-color);
	transition:0.5s;
}

/* responsive */

@media (max-width:1080px){
	.container{
		margin-left:1rem;
		margin-right:1rem;
	}
}

@media (max-width:991px){
	.nav{
		padding:15px 20px;
	}

	section{
		padding:3rem 0 1rem;
	}

	.home-text{
		padding-left:2rem;
	}

	.home-text h1{
		font-size:2.1rem;
	}
}

@media (max-width:950px){
	#search-icon{
		color:var(--text-color);
	}
}

@media (max-width:768px){
	.search-box input{
		padding:15px;
	}

	.nav{
		padding:10px 0;
	}

	#menu-icon{
		display:initial;
	}

	.navbar{
		position:absolute;
		top:100%;
		right:0;
		left:0;
		display:flex;
		flex-direction:column;
		background-color:var(--bg-color);
		row-gap:0.5rem;
		text-align:center;
		box-shadow:4px 4px 20px rgb(15 54 55 / 20%);
		clip-path:circle(0% at 0% 0%);
		transition:0.6s;
	}

	.navbar a{
		display:block;
		padding:15px;
	}

	.navbar a:hover, .navbar .active{
		background-color:var(--main-color);
		color:var(--bg-color);
	}

	.navbar.active{
		clip-path:circle(144% at 0% 0%);	
	}

	.blog-container .box{
		padding:4px;
	}
}

@media (max-width: 727px){
	.header-cars, .header-parts, .header-blog{
		font-size:0.9rem;
	}

	.header-cars h2, .header-parts h2, .header-blog h2{
		font-size:1.4rem;
	}

	.about{
		background-color:#f6f6f6;
		border-radius:0.5rem;
	}

	.about-text{
		text-align:center;
	}

	.about-text p{
		padding:10px;
	}

	.about-text h2{
		font-size:1.4rem;
	}

	.about-img{
		display:none;
	}
}

@media (max-width: 607px){
	.footer-container{
		display:grid;
		grid-template:1fr 1fr;
	}
}

@media (max-width: 360px){
	.search-box input{
		padding:11px;
	}

	.home{
		min-height:500px;
	}

	.home-text h1{
		font-size:1.5rem;
		margin-bottom:1px;
	}

	.header-cars p{
		font-size:12px;
		padding:10px;
	}

	.about-text h2, .header-parts h2, .header-blog h2{
		font-size:13px;
		padding:10px;
	}

	.about-text p, .header-parts p, .header-blog p{
		font-size:10px;
		padding:10px;
	}

	.about-text a{
		font-size:13px;
	}

	.blog .box p{
		font-size:13px;
	}

	.home-text{
		text-align:left;
	}

	.pecas-container .box{
		padding:none;
	}
}