@import "style.css";
@import "preview.css";
@import "download.css";

section.home {
	background-size: 95%;
	background-position: top 0.9375rem right 1.5625rem;
	background-repeat: no-repeat;
}

section.home .container {
	display: flex;
	align-items: stretch;
	width: 100%;
}

section.home .home-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 15vh;
	padding-left: 10vw;
}

section.home .home-text p {
	margin-top: 0.625rem;
}

section.home .home-text .app {
	margin-top: 4.6875rem;
}

section.home .home-img {
	flex: 1;
	display: flex;
	justify-content: center;
}

section.home .home-img img {
	height: 80vh;
}

.text-underline {
	display: inline-block;
	padding-bottom: 0.9375rem;
	position: relative;
}

.text-underline:after {
	content: "";
	position: absolute;
	background-color: var(--secondary-color);
	bottom: 0.625rem;
	left: 0;
	height: 0.1875rem;
	width: 100%;
	animation: underline 4s infinite;
}

section.trip h5,
section.trip h2 {
	text-align: center;
}

section.trip {
	background-position: center;
	background-size: 60%;
	background-repeat: no-repeat;
}

.trip-carousel {
	transform: translateY(-1.875rem) perspective(62.5rem) rotateX(10deg);
	transform-origin: bottom center;
	backface-visibility: hidden;
	will-change: transform;
}

#tripSwiper {
	padding-top: 4.0625rem;
	padding-bottom: 3.125rem;
}

#tripSwiper .swiper-slide {
	height: 23.75rem;
	width: 15.625rem;
	background-color: white;
	border: 0.0625rem solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
	border-radius: 1.5625rem;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	will-change: transform;
}

#tripSwiper .swiper-wrapper {
	padding-left: 1.875rem;
}

#tripSwiper .swiper-slide .card-header {
	height: 80%;
	padding: 0.9375rem;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top 4.6875rem left 0.9375rem;
}

#tripSwiper .swiper-slide .card-header h5 {
	font-size: 1.25rem;
	margin-bottom: 0.3125rem;
	text-align: left;
}

#tripSwiper .swiper-slide .card-footer {
	height: 20%;
	color: #fff;
	background-color: var(--secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	letter-spacing: 0.075rem;
}

@media (max-width: 75rem) {
	#tripSwiper .swiper-wrapper {
		padding-left: 0rem;
	}

	section.home .home-img img {
		height: 55vh;
	}
	section.trip {
		padding-top: 10vh;
	}
}

@media (max-width: 51.25rem) {
	section.home {
		background-size: 200%;
		background-position: center;
		background-repeat: no-repeat;
	}
	section.trip {
		background-position: top 5rem left -1.875rem;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	section.home .container {
		flex-direction: column-reverse;
	}
	section.home .home-img {
		padding-top: 5vh;
	}
	section.home .home-img img {
		height: 45vh;
	}
	section.home .home-text {
		padding: 0.3125rem;
	}
	section.home .home-text .app {
		margin-top: 0.9375rem;
	}
	#tripSwiper .swiper-slide {
		height: 23.75rem;
		width: 15.625rem;
	}
}

@media (max-width: 37.5rem) {
	#tripSwiper .swiper-slide {
		height: 21.25rem;
		width: 13.125rem;
	}
	section.trip {
		background-position: center left -10rem;
		background-size: 180%;
		background-repeat: no-repeat;
	}
}

@keyframes underline {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}