/*---------------- VARIABLES CSS ----------------*/
	:root {
	--header-height: 3.5rem;
	

/*---------------- Colors ---------------*/
	/*Color mode HSL(hue, saturation, lightness)*/
	--first-color: hsl(17, 30%, 43%);
	--first-color-alt: hsl(29, 31%, 36%);
	--title-color: hsl(219, 8%, 95%);
	--text-color: hsl(219, 8%, 75%);
	--text-color-light: hsl(219, 4%, 55%);
	--white-color: #fff;
	--body-color: hsl(20, 12%, 5%);
	--container-color: hsl(30, 6%, 7%);
	

/*--------------- Font and typography ---------------*/
	/*.5rem = 8px | 1rem = 16px ...*/
	--body-font: 'Courier New', Courier, monospace ;
	--h1-font-size: 1.2rem;
	--h2-font-size: .70rem;
	--h3-font-size: 1rem;
	--normal-font-size: .938rem;
	--small-font-size: .813rem;
	--smaller-font-size: .75rem;
	

/*--------------- Font weight ---------------*/
	--font-medium: 200;
	--font-semi-bold: 100;
	

/*--------------- z index ----------------*/
	--z-tooltip: 10;
	--z-fixed: 100;
	}
	

	@media screen and (min-width: 968px) {
	    :root {
	--h1-font-size: 2.25rem;
	--h2-font-size: 1.5rem;
	--h3-font-size: 1.25rem;
	--normal-font-size: 1rem;
	--small-font-size: .875rem;
	--smaller-font-size: .813rem;
	    }
	}
	

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

	html {
	    scroll-behavior: smooth;
	}
	

	body {
	    font-family: var(--body-font);
	    font-size: var(--normal-font-size);
	    background-color: var(--body-color);
	    color: var(--text-color);
	}
	

	h1, h2, h3 {
	    color: var(--title-color);
	    font-weight: var(--font-semi-bold);
	}
	

	ul {
	    list-style: none;
	}
	

	a {
	    text-decoration: none;
	}
	

	img {
	    max-width: 100%;
	    height: auto;
	}
	

/*--------------- REUSABLE CSS CLASSES ----------------*/
	.container {
	    max-width: 1024px;
	    margin-right: 1.5rem;
	    margin-left: 1.5rem;
	}
	
	span {
		color: var(--first-color);
	}

	.grid {
	    display: grid;
	    gap: 1.5rem;
	}
	

	.section {
	    padding: 4.5rem 0 2rem;
	}
	

	.section_title {
	    font-size: var(--h1-font-size);
	    text-align: center;
	    margin-bottom: 2.5rem;
	}
	

	.main {
	    overflow: hidden;
	}

	.shape {
		background-color: rgba(170, 127, 86, 0.5);
		filter: blur(112px);
		border-radius: 50%;
	}

	.shape_big {
		width: 400px;
		height: 400px;
	}

	.shape_small {
		width: 300px;
		height: 300px;
	}

	.shape_smaller {
		width: 180px;
		height: 180px;
		filter: blur(64px);
	}
	

/*---------------- HEADER & NAV -----------------*/
	.header {
		width: 100%;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: var(--z-fixed);
	}

	.nav {
		height: var(--header-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nav_logo,
	.nav_toggle {
		color: var(--title-color);
		display: inline-flex;
	}

	.nav_logo {
		align-items: center;
		position: relative;
		column-gap: .35rem;
		font-weight: var(--font-medium);
		transition: .3s;
	}

	.nav_logo i {
		font-size: 1.15rem;
	}

	.nav_logo:hover {
		color: var(--first-color);
	}
	
	.nav_toggle {
		font-size: 1.25rem;
		cursor: pointer;
	}

	@media screen and (max-width: 767px) {
		.nav_menu {
			position: fixed;
			background-color: rgba(10, 10, 10, 0.952);
			top: 0;
			right: -100%;
			width: 100%;
			height: 100%;
			transition: .3s;
		}
	}

	.nav_list {
		display: flex;
		flex-direction: column;
		text-align: center;
		row-gap: 3rem;
		padding-top: 9rem;
	}

	.nav_link {
		text-transform: uppercase;
		color: var(--title-color);
		font-size: var(--h1-font-size);
		font-weight: var(--font-medium);
		transition: .3s;
	}

	.nav_link:hover {
		color: var(--first-color);
	}

	.nav_close {
		font-size: 2rem;
		color: var(--white-color);
		position: absolute;
		top: 1rem;
		right: 1rem;
		cursor: pointer;
	}

	/* Show menu */
	.show-menu {
		right: 0;
	}

	

	/* Change background header */
	.scroll-header {
		background-color: var(--body-color);
		box-shadow: 0 2px 4px rgb(26, 26, 26);
		
	}

	

	/* Active link */
	.active-link {
		color: var(--first-color);
	}

	

/*--------------- HOME ----------------*/
	.home {
		position: relative;
		overflow: hidden;
	}	

	.home_container {
		position: relative;
		padding-top: 6rem;
		row-gap: 3rem;
	}
	
	.home_data {
		text-align: center;
	}

	.home_title {
		font-size: var(--h1-font-size);
		margin-bottom: 1rem;
	}

	.home_subtitle {
		font-size: var(--h3-font-size);
		margin-bottom: .40rem;
	}

	.home_elec {
		font-size: var(--small-font-size);
		font-weight: 400;
		color: var(--text-color);
		display: inline-flex;
		align-items: center;
		column-gap: .25rem;
	}

	.home_elec i {
		color: var(--first-color);
	}

	.home_img {
		width: 280px;
		justify-self: center;
	}

	.home_car {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 4rem;
		margin-bottom: 2rem;
	}

	.home_car-name {
		font-size: .725rem;
		font-weight: 200;
		color: var(--text-color-light);
	}

	.home_car-data {
		text-align: center;
	}

	.home_car-number {
		font-size: var(--h1-font-size);
		font-weight: var(--font-medium);
		margin-bottom: .25rem;
	}

	.home_car-icon{
		background-color: var(--container-color);
		border-radius: 50%;
		padding: .376rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: .875rem;
		margin-bottom: .75rem;
		cursor: pointer;
	}

	.home_button {
		position: relative;
		border: 2px solid hsl(158, 89%, 30%);
		width: 70px;
		height: 70px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: center;
		font-size: var(--small-font-size);
		color: var(--white-color);
		font-weight: var(--font-medium);
	}

	.home_button::before {
		content: '';
		border: 2px solid hsl(158, 98%, 43%);
		width: 90px;
		height: 90px;
		position: absolute;
		border-radius: 50%;
		box-shadow: 0 0 12px hsl(158, 98%, 43%);
		transition: .3s;
		animation: button 3s infinite;
	}

	.home .shape_big,
	.home .shape_small {
		position: absolute;
	}

	.home .shape_big {
		left: -9rem;
		top: -4rem;
	}

	.home .shape_small {
		right: -10rem;
		bottom: 3rem;
	}

	.home_shape-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		mix-blend-mode: soft-light;
		opacity: .5;
	  }

	/* Button animate */
	@keyframes button {
		0% {
			box-shadow: 0 0 12px hsl(158, 98%, 43%);
		}
		50% {
			box-shadow: 0 0 24px hsl(158, 98%, 43%);
		}
	}

	

/*----------------- BUTTON ----------------*/
.button {
	display: inline-block;
	background-color: transparent;
	padding: 18px 32px;
	border: 1px solid transparent;
	color: var(--title-color);
	letter-spacing: 0.2rem;
	font-size: .7rem;
	cursor: pointer;
	transition: background .3s;
  }
  
  .button:hover {
	border: 1px solid var(--first-color);
	text-decoration: none;
	color: var(--title-color);
  }
  
  .button i {
	font-size: .6rem;
	transition: transform .5s;
  }

  .button:hover i {
	transform: translateX(.25rem);
  }
	

/*----------------- ABOUT ------------------*/
	.about_container {
		row-gap: 6rem;
	}
	
	.about_group {
		position: relative;
	}

	.about_img {
		width: 310px;
		border-radius: 0rem;
	}

	.about_img2 {
		width: 310px;
		border-radius: .5rem;
	}


	.about_card {
		width: 180px;
		position: absolute;
		right: 0;
		bottom: -2.5rem;
		background-color: hsla(0, 0%, 100%, .1);
		backdrop-filter: blur(16px);
		padding: 1rem .75rem;
		text-align: center;
		border-radius: 1.25rem;
	}

	.about_card-title {
		font-size: var(--h3-font-size);
		margin-bottom: .5rem;
	}

	.about_card-description {
		font-size: var(--smaller-font-size);
	}

	.about_title {
		text-align: initial;
		margin-bottom: 2rem;
	}

	.about_description {
		margin-bottom: 2rem;
	}

	

/*----------------- SKILLS -----------------*/
.skills_container {
	row-gap: 3.5rem;
}

.skills_title {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: .5rem;
	font-size: var(--small-font-size);
	font-weight: var(--font-semi-bold);
	margin-bottom: 2.5rem;
}

.skills_title i {
	font-size: .8rem;
}

.skills_info,
.skills_data,
.skills_blob {
	display: grid;
}

.skills_info {
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 2rem;
}

.skills_data {
	justify-content: center;
	text-align: center;
}

.skills_blob {
	width: 60px;
	height: 60px;
	background-color: var(--container-color);
	border-radius: .5rem;
	place-items: center;
	margin-bottom: .5rem;
}

.skills_blob .shape_smaller {
	position: absolute;
	top: -18.5rem;
	left: -18.5rem;
}

.skills_blob img {
	width: 30px;
	cursor: pointer;
	filter: saturate(0%);
}

.skills_name {
	font-size: .7rem;
}

/* Animation Skills */
.skills_blob:hover img {
	animation: bounce-skills 1.0s;
}

@keyframes bounce-skills {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(-6px);
	}
	40% {
		transform: translate(0);
	}
	60% {
		transform: translateY(-3px);
	}
	80% {
		transform: translate(0);
	}
}

/*--------------- FEATURES ---------------*/
	.features {
		overflow: hidden;
		position: relative;
	}
	
	.features_container {
		padding-top: 2rem;
		grid-template-columns: 285px;
		justify-content: center;
	}

	.features_group {
		display: grid;
		position: relative;
		z-index: 10;
	}

	.features_img {
		width: 150px;
		justify-self: center;
	}

	.features_card {
		width: 112px;
		background-color: hsla(0, 0%, 100%, .1);
		backdrop-filter: blur(16px);
		border-radius: 1.25rem;
		padding: .75rem 2rem;
		text-align: center;
		color: var(--title-color);
		position: absolute;
	}

	.features_card-1 {
		top: 4rem;
		left: 1.5rem;
	}

	.features_card-2 {
		top: 8rem;
		right: 1rem;
	}

	.features_card-3 {
		left: 1.5rem;
		bottom: 2rem;
	}

	.features_card-title {
		font-size: var(--h1-font-size);
		margin-bottom: .25rem;
	}

	.features_card-description {
		font-size: var(--smaller-font-size);
	}

	.features_map {
		max-width: initial;
		width: 450px;
		position: absolute;
		top: 8rem;
		left: 4rem;
		margin: auto;
		transform: rotate(-22deg);
	}

	.container .main-video{
		background: transparent;
		border-radius: 5px;
		padding: 100px;
	}
	
	.container .main-video video{
		width: 100%;
	}
	

/*--------------- FEATURED ---------------*/
	.featured_container {
		padding-top: 1rem;
	}
	
	.featured_filters {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 1rem;
		margin-bottom: 3.5rem;
	}

	.featured_item {
		width: 48px;
		height: 48px;
		border: none;
		outline: none;
		padding: .75rem;
		border-radius: .75rem;
		background-color: var(--container-color);
		color: var(--white-color);
		font-size: var(--normal-font-size);
		cursor: pointer;
		transition: .3s;
	}

	.featured_item img {
		width: 1.5rem;
	}

	.featured_item span,
	.featured_item img {
		opacity: .3;
		transition: .3s;
	}

	.featured_item:hover {
		background-color: var(--first-color);
	}

	.featured_item:hover span,
	.featured_item:hover img {
		opacity: 1;
	}

	.featured_content {
		grid-template-columns: 228px;
		row-gap: 2.5rem;
		justify-content: center;
	}

	.featured_card {
		position: relative;
		background-color: var(--container-color);
		padding: 2rem 1.5rem 1.5rem;
		border-radius: 1rem;
	}

	.featured_card .shape_smaller {
		position: absolute;
		inset: 0;
		margin: auto;
	}

	.featured_title,
	.featured_subtitle,
	.featured_img {
		position: relative;
	}

	.featured_title {
		font-size: var(--h1-font-size);
		margin-bottom: .25rem;
	}

	.featured_subtitle {
		font-size: var(--small-font-size);
		color: var(--text-color);
	}

	.featured_img {
		width: 180px;
		margin: 1.5rem 0;
		transition: .3s;
	}

	.featured_price {
		font-size: var(--h3-font-size);
	}

	.featured_button {
		border: none;
		outline: none;
		padding: .75rem 1rem;
		position: absolute;
		right: 0;
		bottom: 0;
		border-radius: 1rem 0 1rem 0;
		cursor: pointer;
	}

	.featured_button i {
		font-size: 1.25rem;
	}

	.featured_card:hover .featured_img {
		transform: translateX(-.25rem);
	}

	

	/* Active link featured */
	.active-featured {
		background-color: var(--first-color);
	}

	.active-featured span,
	.active-featured img {
		opacity: 1;
	}

	

/*--------------- OFFER ---------------*/
	.offer {
		position: relative;
	}
	
	.offer_container {
		grid-template-rows: max-content 224px;
	}

	.offer_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.offer_data,
	.offer_img {
		position: relative;
	}

	.offer_data {
		text-align: center;
	}

	.offer_title {
		margin-bottom: 2rem;
	}

	.offer_description {
		margin-bottom: 3rem;
	}

	.offer_img {
		position: absolute;
		max-width: initial;
		width: 400px;
		bottom: 2rem;
		right: -5.5rem;
	}

/*--------------- CONTACT ---------------*/	
	.contact_container {
		row-gap: 3.5rem;
	}

	.contact_title {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: .5rem;
		font-size: var(--small-font-size);
		font-weight: var(--font-semi-bold);
		margin-bottom: 2.5rem;
	}

	.contact_title i {
		font-size: .7rem;
		
	}

	.contact_info,
	.contact_data,
	.contact_form {
		display: grid;
	}

	.contact_info {
		row-gap: 2rem;
	}

	.contact_data {
		row-gap: .75rem;
	}

	.contact_data-title {
		font-size: var(--small-font-size);
		color: var(--text-color-light);
	}

	.contact_data-info {
		font-size: var(--small-font-size);
		font-family: var(--title-font);
		color: var(--title-color);
	}

	.contact_button {
		width: max-content;
		display: inline-flex;
		align-items: center;
		column-gap: .5rem;
		color: var(--title-color);
		font-size: var(--small-font-size);
	}

	.contact_button i {
		font-size: .7rem;
		transition: transform .3s;
	}

	.contact_button:hover i {
		transform: translateX(.25rem);
	}

	.contact_form {
		position: relative;
		row-gap: 2rem;
	}

	.contact_form-div {
		position: relative;
		height: 4rem;
	}

	.contact_form-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid var(--text-color-light);
		border-radius: 2rem;
		padding: 1.5rem;
		font-size: var(--normal-font-size);
		font-family: var(--title-font);
		color: var(--title-color);
		background: none;
		outline: none;
		z-index: 1;
	}

	.contact_form-tag {
		position: absolute;
		top: -.75rem;
		left: 1.25rem;
		z-index: 10;
		background-color: var(--body-color);
		color: var(--title-color);
		font-size: var(--smaller-font-size);
		font-weight: var(--font-medium);
		padding: .35rem;
	}

	.contact_form-area {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid var(--text-color-light);
		border-radius: 2rem;
		padding: 1.5rem;
		font-size: var(--normal-font-size);
		font-family: var(--title-font);
		color: var(--title-color);
		background: none;
		outline: none;
		z-index: 1;
	}

	.contact_form-area {
		height: 10rem;
	}

	.contact_form-area textarea {
		resize: none;
	}

	.contact_form .contact_button {
		border: none;
		background: none;
		margin-top: 8rem;
		font-size: 1rem;
		font-family: var(--title-font);
		font-weight: var(--font-semi-bold);
		cursor: pointer;
		outline: none;
		margin-left: 1.5rem;
	}

	.contact_form .contact_button i {
		font-size: .9rem;
	}

	.contact__message {
		font-size: var(--small-font-size);
		position: absolute;
		bottom: 3rem;
		left: 1.5rem;
	}

	/* Status color */
	.color-red {
		color: hsl(4, 71%, 50%);
	}

	.color-blue {
		color: hsl(207, 56%, 45%);
	}


/*--------------- LOGOS ---------------*/
	.logos_img {
		width: 80px;
		opacity: .4;
		transition: .3s;
	}

	.logos_container {
		grid-template-columns: repeat(3, max-content);
		justify-content: center;
		align-items: center;
		gap: 4rem;
		padding-bottom: 2rem;
	}

	.logos_img:hover {
		opacity: 1;
		cursor: pointer;
	}

	

/*--------------- FOOTER ---------------*/
	.footer {
		position: relative;
		overflow: hidden;
	}
	
	.footer .shape_big,
	.footer .shape_small {
		position: absolute;
	}

	.footer .shape_big {
		width: 300px;
		height: 300px;
		left: -19rem;
		top: 6rem;
	}

	.footer .shape_small {
		right: -13rem;
		bottom: -6rem;
	}

	.footer_container {
		row-gap: 2.5rem;
		position: relative;
		margin-top: 7rem;
	}

	.footer_logo {
		display: inline-flex;
		align-items: center;
		column-gap: .25rem;
		color: var(--title-color);
		font-size: var(--h3-font-size);
		font-weight: var(--font-semi-bold);
		margin-bottom: 1.25rem;
		transition: .3s;
	}

	.footer_logo i {
		font-size: 1rem;
	}

	.footer_logo:hover {
		color: var(--first-color);
	}

	.footer_title {
		font-size: var(--h3-font-size);
		margin-bottom: 1.25rem;
	}

	.footer_links {
		display: flex;
		flex-direction: column;
		row-gap: .5rem;
	}

	.footer_link,
	.footer_social-link {
		color: var(--text-color);
		transition: .3s;
	}
	
	.footer_link:hover,
	.footer_social-link:hover {
		color: var(--title-color);
	}

	.footer_social {
		display: flex;
		column-gap: 1.5rem;
	}

	.footer_social-link {
		font-size: 1rem;
	}

	.footer_copy {
		display: block;
		margin-top: 4.5rem;
		text-align: center;
		font-size: var(--smaller-font-size);
		color: var(--text-color-light);
	}
	

/*--------------- SCROLL BAR ---------------*/
	::-webkit-scrollbar {
		width: .8rem;
		background-color: transparent;
	}
	
	::-webkit-scrollbar-thumb {
		background-color: hsl(25, 14%, 24%);
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: hsl(31, 16%, 37%);
	}

	

/*--------------- SCROLL UP ---------------*/
	.scrollup {
		position: fixed;
		right: 1rem;
		bottom: -30%;
		background-color: hsla(0, 0%, 100%, .1);
		backdrop-filter: blur(16px);
		display: inline-flex;
		padding: .45rem;
		border-radius: .5rem;
		font-size: 1.15rem;
		color: var(--white-color);
		z-index: var(--z-tooltip);
		transition: .4s;
	}

	.scrollup:hover {
		transform: translateY(-.25rem);
	}

	

	/* Show Scroll Up*/
	.show-scroll {
		bottom: 3rem;
	}

	

/*--------------- BREAKPOINTS ---------------*/
	/* For small devices */
	@media screen and (max-width: 320px){
		.container{
			margin-left: 1rem;
			margin-right: 1rem;
		}

		.home_container {
			position: relative;
			padding-top: 1rem;
			row-gap: 3rem;
		}

		.home_car{
			column-gap: 2rem;
		}

		.about_card{
			width: 150px;
		}

		.featured_filters {
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: .2rem;
			margin-bottom: 3.5rem;
		}

		.featured_item {
			width: 38px;
			height: 38px;
			border: none;
			outline: none;
			padding: .75rem;
			border-radius: .75rem;
			background-color: var(--container-color);
			color: var(--white-color);
			font-size: var(--normal-font-size);
			cursor: pointer;
			transition: .3s;
		}

		.skills_info {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem 2rem;
		}

		.offer_container{
			grid-template-rows: max-content 180px;
		}

		.offer_img{
			width: 340px;
		}

		.logos_container{
			gap: 2.5rem;
		}

	}



	@media screen and (max-width: 375px){
		.home_container {
			position: relative;
			padding-top: 1rem;
			row-gap: 1rem;
		}

		.features_map {
			max-width: initial;
			width: 450px;
			position: absolute;
			top: 8rem;
			left: 4rem;
			margin: auto;
			transform: rotate(-22deg);
		}

		.skills_content{
			padding-bottom: 120px;
		}

		.skills_info {
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5rem 2rem;
		}

		.container .main-video{
			background: transparent;
			border-radius: 5px;
			padding: 70px;
			
		}
		
		.container .main-video video{
			display: none;
		}


	}

	@media screen and (max-width: 414px){
		.home_container {
			position: relative;
			padding-top: 1rem;
			row-gap: 1rem;
		}

		.features_map {
			max-width: initial;
			width: 450px;
			position: absolute;
			top: 8rem;
			left: -.7rem;
			margin: auto;
			transform: rotate(-22deg);
		}

		.skills_content{
			padding-bottom: 120px;
		}

		.container .main-video{
			background: transparent;
			border-radius: 5px;
			padding: 70px;
			
		}
		
		.container .main-video video{
			width: 350%;
			padding-right: 500px;
		}


	}

	

	/* For medium devices */
	@media screen and (min-width: 576px){
		.home_container {
			position: relative;
			padding-top: 1rem;
			row-gap: 1rem;
		}
		
		.about_group{
			width: 350px;
			justify-self: center;
		}

		.skills_content{
			padding-bottom: 120px;
		}

		.featured_content{
			grid-template-columns: repeat(2, 228px);
		}

		.offer_container{
			grid-template-rows: initial;
			grid-template-columns: .5fr;
			justify-content: center;
		}

		.offer_img{
			position: relative;
			bottom: initial;
			right: initial;
		}

		.offer_data{
			margin-bottom: 4rem;
		}

	}

	@media screen and (min-width: 767px){
		.section{
			padding: 7rem 0 2rem;
		}

		.nav{
			height: calc(var(--header-height) + 1.5rem);
		}

		.nav_toggle,
		.nav_close{
			display: none;
		}

		.nav_list{
			flex-direction: row;
			column-gap: 3rem;
			padding-top: 0;
		}

		.nav_link{
			font-size: var(--normal-font-size);
			text-transform: initial;
		}

		.home_container {
			position: relative;
			padding-top: 1rem;
			row-gap: 3rem;
		}

		.about_container,
		.contact_container,
		.skills_container{
			grid-template-columns: repeat(2, 1fr);
		}

		.skills_container{
			column-gap: 5rem;
		}


		.logos_container{
			gap: 4rem 8rem;
		}

		.footer_container{
			grid-template-columns: repeat(2, 1fr);
		}

		.home_shape-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			mix-blend-mode: soft-light;
			opacity: .5;
		  }
	}
	

	/* For large devices */
	@media screen and (min-width: 1040px){
		.container{
			margin-left: auto;
			margin-right: auto;
		}

		.shape_big{
			width: 500px;
			height: 500px;
		}

		.shape_small{
			width: 400px;
			height: 400px;
		}

		.home_container{
			padding-top: 2rem;
		}

		.home_img{
			width: 280px;
		}

		.home_car{
			column-gap: 7rem;
		}

		.home_car-icon{
			font-size: 1.2rem;
			margin-bottom: 1rem;
		}

		.about_container{
			column-gap: 6rem;
			align-items: center;
			padding-bottom: 60px;
		}

		.about_group,
		.about_img{
			width: 450px;
		}

		.about_group-main,
		.about_img-main{
			width: 550px;
		}

		.about_card{
			width: 198px;
			padding: 1rem 1.25rem;
		}

		.about_description{
			padding-right: 4rem;
			margin-bottom: 3rem;
		}

		.popular_container{
			width: 875px;
			padding-top: 3rem;
		}

		.popular_card{
			width: 180px;
			border-radius: 1.25rem;
			margin-bottom: 5rem;
		}

		.popular_img{
			width: 60px;
			margin: .75rem 0 1.25rem 2rem;
		}

		.features_container{
			padding: 2rem 0 3rem;
		}

		.features_img{
			width: 200px;
		}

		.features_card{
			width: 127px;
			padding: .75rem 2.5rem;
		}

		.features_card-1{
			left: -1rem;
		}

		.features_card-2{
			right: -2.5rem;
		}

		.features_card-3{
			bottom: 7rem;
			left: -1rem;
		}

		.features_map{
			width: 650px;
			top: 11rem;
			right: 80px;
		}

		.features_card-title{
			font-size: 1.5rem;
		}

		.features_card-description{
			font-size: .9rem;
		}

		.featured_container{
			padding-bottom: 2.5rem;
		}

		.featured_filters{
			column-gap: 2rem;
			margin-bottom: 4.5rem;
		}

		.featured_item{
			width: 52px;
			height: 52px;
		}

		.featured_item img{
			width: 2rem;
		}

		.featured_content{
			grid-template-columns: repeat(3,248px);
			gap: 4rem;
		}

		.featured_title{
			font-size: 1.5rem;
		}

		.featured_subtitle{
			font-size: .9rem;
		}

		.offer_container{
			grid-template-columns: repeat(2, 1fr);
			column-gap: 5rem;
			align-items: center;
			padding-bottom: 2rem;
		}

		.offer_data,
		.offer_title{
			text-align: initial;
		}

		.offer_data{
			margin-bottom: 0;
		}

		.offer_description{
			padding-right: 6rem;
		}

		.offer_img{
			width: 450px;
		}

		.logos_container{
			grid-template-columns: repeat(6, max-content);
		}

		.logos_img{
			width: 120px;
		}

		.footer_container{
			margin-top: 15rem;
			grid-template-columns: repeat(4, max-content);
			justify-content: space-between;
		}

		.footer_logo{
			column-gap: .5rem;
		}

		.footer_logo i{
			font-size: 1rem;
		}

		.footer_title{
			margin-bottom: 1.5rem;
		}

		.footer_social-link{
			font-size: 1.5rem;
		}

		.footer_copy{
			margin-top: 8rem;
			padding-bottom: 1rem;
		}

		.scrollup{
			right: 2.5rem;
		}

	}