body {
	height: 100vh;
}

/**********************
		HEADER 
**********************/
nav ul li a,
.submenu li a {
	padding: 10px 0;
	text-wrap: nowrap;
	transition: color .2s ease;
}

nav ul li a:hover,
.submenu li a:hover {
	color: var(--primary);
}

.fixed-header .nav-logo img {
	width: 34px;
}

.fixed-header .hamburger-menu-btn img {
	width: 34px;
	filter: blur(0);
	-webkit-filter: blur(0);
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.menu-item {
	position: relative;
}

.submenu {
	visibility: hidden;
	opacity: 0;
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: absolute;
	top: 30px;
	left: -15px;
	background-color: var(--white);
	border-radius: 3px;
	border: 1px solid var(--grey-4);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	transition: opacity 0.3s ease;
}

.menu-item:hover .submenu {
	visibility: visible;
	opacity: 1;
}

.fixed-header {
	background-color: var(--white);
	z-index: 10;
	width: 100%;
	padding: 10px 16px;
	border-bottom: 1px solid var(--grey-4);
}

.hamburger-menu-btn {
	background-color: transparent;
	border: 1px solid transparent;
	padding: 3px;
	border-radius: 3px;
}

.fixed-header .offcanvas .offcanvas-title img {
	width: 36px;
	height: auto;
}

.fixed-header .offcanvas ul li a {
	padding: 0;
}

.fixed-header .offcanvas ul li {
	padding: 0;
}

.fixed-header .offcanvas-menu-item a i::before {
	transition: transform .2s ease;
}

.fixed-header .offcanvas-menu-item a[aria-expanded=true] i::before {
	transform: rotate(90deg);
}

@media (min-width: 768px) {
	.fixed-header .nav-logo img {
		width: 38px;
	}

	.fixed-header .hamburger-menu-btn img {
		width: 38px;
	}
}

@media (min-width: 992px) {
	.fixed-header .nav-logo img {
		width: 58px;
	}

	.fixed-header .hamburger-menu-btn img {
		width: auto;
	}
}

/**********************
		CONTENT 
**********************/

.wrapper {
	padding: 24px 16px;
	margin-top: 60px;
}

.fixed-carousel {
	width: 50%;
}

.carousel-inner .carousel-item img {
	height: 100%;
	object-fit: cover;
}

.carousel-indicators {
	margin-bottom: 24px;
}

.carousel-indicators [data-bs-target] {
	border-radius: 500px;
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	padding: 0;
	margin-right: 6px;
	margin-left: 6px;
	text-indent: -999px;
	cursor: pointer;
	background-color: #fff;
	border: 0;
	opacity: 0.5;
	transition: opacity 0.6s ease;
}

.carousel-indicators .active {
	opacity: 1;
}

.carousel-caption {
	right: 30px;
	bottom: 100px;
	left: auto;
	text-align: right;
	padding-left: 24px;
}

.centered-logo img:nth-child(1) {
	width: 80%;
	height: auto;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.show-password-icon {
	color: var(--grey-2);
}

.show-password-icon:hover {
	color: var(--grey-1);
}

.show-password-icon.active {
	color: var(--primary);
}

@media (min-width: 768px) {
	.fixed-header {
		padding: 16px 16px;
	}

	.wrapper {
		padding: 40px 32px;
	}

	.carousel-caption {
		padding-left: 24px;
	}
}

@media (min-width: 992px) {
	/* .fixed-header > nav {
		max-width: 992px;
		margin: 0 auto;
	}
 */
	.wrapper {
		padding: 64px 64px;
	}

	.carousel-caption {
		padding-left: 24px;
	}

	.carousel-caption h3 {
		max-width: 80%;
		margin-left: auto;
	}
}

@media (min-width: 1200px) {
	/* .fixed-header > nav {
		max-width: 1200px;
	} */

	.wrapper {
		padding: 64px 100px 24px 100px;
	}

}

@media (min-width: 1400px) {
	/* .fixed-header > nav {
		max-width: 1620px;
	} */

	.wrapper {
		padding: 64px 150px 24px 150px;
	}
}

/* VERIFY ACCOUNT */
#verify_account_input {
	display: flex;
	gap: 12px;
}

#verify_account_input input {
	width: 40px;
	height: 40px;
	padding: 8px 0;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	border: 2px solid var(--grey-3);
}

#verify_account_input input:focus {
	border: 2px solid var(--black);
}

#verify_account_input input::-webkit-outer-spin-button,
#verify_account_input input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#verify_account_input input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.error-message {
	display: none;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-radius: 3px;
	background-color: var(--error);
}

.verify-wrapper.error .error-message {
	display: flex;
}

.error-message p {
	color: var(--white);
}

.error-message i {
	color: var(--white);
}

@media (min-width: 480px) {
	#verify_account_input {
		display: flex;
		gap: 16px;
	}
	
	#verify_account_input input {
		width: 50px;
		height: 50px;
		padding: 8px 0;
		font-size: 24px;
	}
}

@media (min-width: 768px) {
	#verify_account_input {
		display: flex;
		gap: 10px;
	}
	#verify_account_input input {
		width: 60px;
		height: 60px;
	}
}
@media (min-width: 1400px) {
	#verify_account_input {
		gap: 24px;
	}

	#verify_account_input input {
		width: 60px;
		height: 60px;
	}
}