.btn-default {
	font-size: .8rem;
	padding: .5rem 1rem;
	margin-block: 1rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	line-height: 1rem;
	width: max-content;
	border-radius: 30px;
	border: 2px solid #ff4438;
	color: #ff4438 !important;
	background-color: transparent;
	transition: all 250ms ease-in-out;
	cursor: pointer
}

.btn-default svg {
	margin-left: .5rem
}

.btn-default svg path {
	fill: #ff4438;
	transition: all 250ms ease-in-out
}

.btn-default:hover {
	background-color: #ff4438;
	color: #181717 !important;
	opacity: 1
}

.btn-default:hover svg path {
	fill: #181717;
	transition: all 250ms ease-in-out
}

body>header {
	position: absolute;
	width: 100%;
	z-index: 999;
	opacity: 0;
	transition: all .25s ease-in-out;
	animation: fade-in 2.5s forwards
}

body>header:hover {
	opacity: 1;
	transition: all .25s ease-in-out
}

#intro {
	height: 100vh;
	position: relative
}

#intro::before,
#intro::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 40%;
	width: 100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
	pointer-events: none
}

#intro::after {
	bottom: 0;
	top: unset;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
	z-index: -1
}

#intro .video-container {
	border-radius: 0;
	width: 0%;
	height: 80%;
	border-radius: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%)translateY(-50%);
	z-index: -1;
	animation: expand-width 1s forwards, expand-both 1.5s 1s forwards
}

#intro .video-container video {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover
}

#intro .content {
	position: absolute;
	bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8rem;
	width: 100%;
	opacity: 0;
	animation: fade-in 2.5s forwards
}

#intro .content a {
	max-width: 350px;
	color: #f8f5ee
}

#intro .content a svg {
	transition: all .25s ease-in-out
}

@media screen and (max-width:998px) {
	#intro .content a {
		display: none
	}
}

#intro .content a figure {
	margin-bottom: .5rem
}

#intro .content a figure img {
	opacity: .9;
	transition: all .25s ease-in-out
}

#intro .content a svg {
	margin-left: .5rem;
	transition: all .25s ease-in-out
}

#intro .content a:hover span {
	border-bottom: 1px solid #f8f5ee;
	transition: all .25s ease-in-out;
	color: #f8f5ee
}

#intro .content a:hover img {
	opacity: 1
}

#intro .content a:hover svg {
	transition: all .25s ease-in-out;
	transform: translateX(.5rem)
}

#clients {
	padding-block: 2rem;
	background-color: #000;
	position: relative
}

#clients::after {
	content: "";
	background: linear-gradient(90deg, #000 0%, #000 10%, rgba(38, 36, 36, 0) 20%, rgba(38, 36, 36, 0) 90%, #000 100%);
	z-index: 5;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0
}

@media screen and (max-width:998px) {
	#clients::after {
		background: linear-gradient(90deg, #000 0%, rgba(38, 36, 36, 0) 20%, rgba(38, 36, 36, 0) 90%, #000 100%)
	}
}

#clients .content {
	display: flex;
	gap: 4rem
}

@media screen and (max-width:998px) {
	#clients .content {
		flex-direction: column;
		gap: 2rem
	}

	#clients .content h3 {
		text-align: center
	}
}

#clients .content h3 {
	font-weight: 400;
	white-space: nowrap;
	margin-bottom: 0;
	padding-right: 25vw;
	background: linear-gradient(90deg, #000 0%, #000 60%, rgba(38, 36, 36, 0) 100%);
	z-index: 10
}

@media screen and (max-width:998px) {
	#clients .content h3 {
		padding-right: 0
	}
}

#clients .content .logo-list {
	display: flex;
	align-items: center
}

#clients .content .logo-list li {
	flex-shrink: 0;
	width: 6rem;
	height: 3rem;
	display: flex;
	align-items: center;
	margin-right: 6rem
}

@media screen and (max-width:1440px) {
	#clients .content .logo-list li {
		margin-right: 6rem
	}
}

@media screen and (max-width:480px) {
	#clients .content .logo-list li {
		margin-right: 4rem
	}
}

#clients .content .logo-list li img {
	max-width: 6rem;
	max-height: 3rem;
	height: auto;
	width: auto;
	margin: auto
}

#plus-de-300 {
	text-align: center;
	padding-block: 3rem
}

#plus-de-300 .content p {
	max-width: 80%;
	margin-inline: auto
}

#plus-de-300 .content .btn-default {
	margin-inline: auto;
	margin-bottom: 2rem
}

#plus-de-300 .featured {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .5rem;
	transition: all .5s ease-in-out
}

@media screen and (min-width:768px) {
	#plus-de-300 .featured:has(a:nth-child(1):hover) {
		grid-template-columns: 2fr 1fr 1fr
	}

	#plus-de-300 .featured:has(a:nth-child(1):hover) path {
		fill: #ff4438
	}

	#plus-de-300 .featured:has(a:nth-child(1):hover) a:nth-child(2) svg,
	#plus-de-300 .featured:has(a:nth-child(1):hover) a:nth-child(3) svg {
		width: 0
	}

	#plus-de-300 .featured:has(a:nth-child(1):hover) a:nth-child(2) div,
	#plus-de-300 .featured:has(a:nth-child(1):hover) a:nth-child(3) div {
		gap: 0
	}

	#plus-de-300 .featured:has(a:nth-child(2):hover) {
		grid-template-columns: 1fr 2fr 1fr
	}

	#plus-de-300 .featured:has(a:nth-child(2):hover) path {
		fill: #ff4438
	}

	#plus-de-300 .featured:has(a:nth-child(2):hover) a:nth-child(1) svg,
	#plus-de-300 .featured:has(a:nth-child(2):hover) a:nth-child(3) svg {
		width: 0
	}

	#plus-de-300 .featured:has(a:nth-child(2):hover) a:nth-child(1) div,
	#plus-de-300 .featured:has(a:nth-child(2):hover) a:nth-child(3) div {
		gap: 0
	}

	#plus-de-300 .featured:has(a:nth-child(3):hover) {
		grid-template-columns: 1fr 1fr 2fr
	}

	#plus-de-300 .featured:has(a:nth-child(3):hover) path {
		fill: #ff4438
	}

	#plus-de-300 .featured:has(a:nth-child(3):hover) a:nth-child(1) svg,
	#plus-de-300 .featured:has(a:nth-child(3):hover) a:nth-child(2) svg {
		width: 0
	}

	#plus-de-300 .featured:has(a:nth-child(3):hover) a:nth-child(1) div,
	#plus-de-300 .featured:has(a:nth-child(3):hover) a:nth-child(2) div {
		gap: 0
	}
}

#plus-de-300 .featured figure {
	height: 20rem
}

#plus-de-300 .featured div {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem
}

@media screen and (max-width:767px) {
	#plus-de-300 .featured {
		grid-template-columns: 1fr
	}
}

#testimonials {
	padding-bottom: 4rem;
	position: relative;
	padding-right: 0
}

#testimonials::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 33vw;
	background: linear-gradient(270deg, #181717 0%, rgba(24, 23, 23, 0) 100%);
	pointer-events: none
}

#testimonials ul {
	width: 100%;
	display: flex;
	align-items: center;
	align-items: stretch;
	height: max-content;
	position: relative;
	margin-top: 2rem;
	gap: 12px
}

@media screen and (max-width:767px) {
	#testimonials ul::after {
		width: 10rem
	}
}

#testimonials ul li {
	background: #0c0c0c;
	min-width: calc(10rem + 15vw);
	padding: 2rem;
	border-radius: 30px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: transform .3s ease
}

@media screen and (max-width:767px) {
	#testimonials ul li {
		padding: 1rem
	}
}

#testimonials ul li p:first-of-type {
	font-style: italic;
	line-height: 1.4rem
}

#testimonials ul li h4 {
	margin-bottom: .4rem;
	font-weight: 400
}

#testimonials ul li p:last-of-type {
	font-size: .7rem
}

#testimonials .slider-buttons {
	margin-top: 1rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	width: fit-content;
	margin-inline: auto 2rem
}

@media screen and (max-width:575px) {
	#testimonials .slider-buttons {
		margin-top: 2rem
	}
}

#testimonials .slider-buttons div {
	opacity: .6;
	cursor: pointer;
	z-index: 5
}

#testimonials .slider-buttons div:hover {
	opacity: 1
}

#testimonials .slider-buttons div svg {
	width: 3rem
}

#image-block {
	padding-inline: 0
}

#image-block figure {
	max-height: 32rem
}

#reference {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-block: -6rem 4rem
}

#reference .content {
	order: 2;
	margin-top: 9rem;
	max-width: 30rem
}

#reference figure {
	max-width: 30rem;
	margin-inline: auto 0
}

@media screen and (max-width:767px) {
	#reference {
		grid-template-columns: 1fr
	}

	#reference .content {
		order: 0
	}
}