body {
	font-family: 'Gaegu', cursive;
	background-color: #FDF3E1;
	color: #4A3A31;
	overflow-x: hidden;
}

.hero-section {
	background-image: url('img/0.webp');
	background-size: cover;
	background-position: center;
}

.section-title {
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
	transform: rotate(-2deg);
}

@media (min-width: 768px) {
	.section-title {
		font-size: 4.5rem;
	}
}

.hand-drawn-border {
	border: 3px solid #4A3A31;
	border-radius: 20px 255px 15px 255px / 255px 15px 225px 15px;
	box-shadow: 5px 5px 0px #4A3A31;
}

.h-screen {
	height: 85vh !important;
}

@media (max-width: 768px) {
	.h-screen {
		height: 50vh !important;
	}
}

#grug-walk {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	bottom: -13px;
	max-width: 700px;
}

@media (max-width: 768px) {
	#grug-walk {
		width: 70%;
		max-width: 350px;
		bottom: -13px;
		left: -10%;

		body {
			font-family: 'Gaegu', cursive;
			background-color: #FDF3E1;
			color: #4A3A31;
			overflow-x: hidden;
		}

		.hero-section {
			background-image: url('img/0.webp');
			background-size: cover;
			background-position: center;
			min-height: 85vh;
			height: 85vh;
			position: relative;
			transition: background-image 0.2s;
		}

		.section-title {
			font-size: 3rem;
			font-weight: 700;
			text-align: center;
			margin-bottom: 2rem;
			transform: rotate(-2deg);
		}

		@media (min-width: 768px) {
			.section-title {
				font-size: 4.5rem;
			}
		}

		.hand-drawn-border {
			border: 3px solid #4A3A31;
			border-radius: 20px 255px 15px 255px / 255px 15px 225px 15px;
			box-shadow: 5px 5px 0px #4A3A31;
		}

		.h-screen {
			height: 85vh !important;
		}

		/* --- MOBILE HERO SECTION --- */
		@media (max-width: 640px) {
			.hero-section {
				min-height: 60vh !important;
				height: 60vh !important;
				padding-top: 2rem !important;
				padding-bottom: 2rem !important;

			}

			.hero-content {
				top: 2.5rem !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				width: 100vw !important;
				padding: 0 0.5rem !important;
			}

			#grug-walk {
				max-width: 90vw !important;
				width: 90vw !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				bottom: 0 !important;
			}

			.hero-content h1 {
				font-size: 2.2rem !important;
			}

			.hero-content p {
				font-size: 1rem !important;
			}
		}

		@media (max-width: 400px) {
			.hero-content h1 {
				font-size: 1.5rem !important;
			}

			.hero-content p {
				font-size: 0.8rem !important;
			}
		}
	}
}

.curp{
    cursor: pointer;
}