/* stylelint-disable font-family-no-missing-generic-family-keyword */

/* fonts */

/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.mb-2 img {
	height: 200px !important;
	width: auto;
	display: block;
}

.gradient-area {
	background:
		radial-gradient(circle at 5% 15%, #ff1493, transparent 80%),
		/*top left*/ radial-gradient(circle at 90% 5%, #ffd1dc, transparent 60%),
		/*top right*/ radial-gradient(circle at 10% 60%, #ffc0cb, transparent 60%),
		/*bottom left*/ radial-gradient(circle at 90% 70%, #ff1493, transparent 60%); /* bottom right */

	background-blend-mode: screen;
	overflow: hidden;
	padding-bottom: 4rem;
}

/* Mobile nav-bar---hamburger */
.mobile-navbar {
	overflow: visible;
	position: relative;
	z-index: 1000;
	padding: 1rem;
}

.menu-toggle {
	background: #fe4da4;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1001; /* higher than menu */
}

.menu-toggle .bar {
	width: 24px;
	height: 3px;
	background-color: #fff;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.menu-toggle.open .bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open .bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Menu Styles */
.mobile-menu {
	position: fixed;
	top: 110px;
	left: 0;
	width: calc(100vw - 10px);
	margin: 0 5px;
	padding: 2rem 1rem;
	background-color: #fff0f5;
	border-radius: 1rem;
	box-sizing: border-box;
	z-index: 9999 !important;
	opacity: 0;
	transform: scale(0.95);
	pointer-events: none;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
}

.mobile-menu a {
	text-decoration: none !important;
	color: #ff69b4;
}

.material-icons {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	vertical-align: middle;
	margin-left: 5px;
	color: #ff69b4;
}

.mobile-menu.show {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.mobile-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-weight: 700;
	line-height: 2;
}

/* Show mobile menu on tablets too */
@media (width >= 992px) {
	/* mobile */
	.menu-toggle,
	.mobile-menu {
		display: none !important;
	}

	/* desktop */
	.navbar-header {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 2rem 0 1rem !important;
	}

	.navbar-expand-lg .navbar-nav {
		flex-direction: row;
		margin-top: 80px;
	}

	.navbar-header .navbar-brand {
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
	}

	.navbar-header .navbar-brand img {
		height: 200px !important;
		width: auto !important;
		display: block !important;
		margin-top: 50px;
	}

	.navbar-collapse {
		margin-top: 0 !important;
	}

	.navbar {
		flex-direction: column !important;
		align-items: center !important;
	}
}

/* HEADER */

.header {
	top: 2px;
	z-index: 1030;
	background: transparent;
	backdrop-filter: blur(6px);
	padding: 1rem 0;
	transition: all 0.3s ease;
}

/* Logo resizing on scroll */
.logo {
	height: 60px;
	transition: all 0.3s ease;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

/* hamburger menu adjustment */
.navbar-header {
	position: relative !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
}

.logo-wrapper {
	position: relative;
	z-index: 1;
	text-align: center;
}

.navbar-brand {
	margin: 0 auto;
	z-index: 1;
}

/* hamburger menu adjustment---END */

/* Center the logo */
.navbar-header .navbar-brand {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 35px));
}

/* Move hamburger to top right */
.navbar-header .menu-toggle {
	position: absolute;
	top: 50%;
	right: -10rem; /* the only way to keep the hamburger menu on the right side of the screen */
	transform: translateY(-50%);
}

.nav-links a:hover {
	color: #ff6ec4;
}

.nav-link .material-symbols-outlined {
	font-size: 28px;
	position: relative;
	display: inline-block;
}

/* Badge appearance */

.cart-link {
	position: relative !important;
}

.cart-badge {
	position: absolute !important;
	top: -8px !important;
	right: calc(100% - 110px) !important;
	background-color: red !important;
	color: white !important;
	font-weight: bold !important;
	font-size: 0.75rem !important;
	padding: 4px !important;
	border-radius: 50% !important;
	min-width: 18px !important;
	height: 18px !important;
	line-height: 18px !important;
	text-align: center !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 0 3px rgb(0 0 0 / 30%) !important;
}

.cart-icon {
	width: 50px;
	font-size: 24px;
	position: relative;
}

/* HERO */
.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 5% 6rem;
}

.hero-inner {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	max-width: 1200px;
}

.hero-text {
	max-width: 600px;
}

.hero-text h1 {
	font-family: Montserrat, sans-serif;
	font-weight: 800 !important;
	color: white !important;
	font-size: 3rem;
	margin-bottom: 1rem;
}

.hero-text p {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	color: #fff;
}

/* Hero h1 padding */
@media (width <= 767.98px) {
	.hero .container,
	.hero .row,
	.hero-text {
		padding-left: 0;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-text {
		text-align: center;
		width: 100%;
		max-width: 100%;
	}

	.hero-text h1,
	.hero-text p {
		text-align: center;
	}
}

.btn-primary.cta-button {
	font-family: Montserrat, sans-serif;
	padding: 0.75rem 3rem;
	font-size: 1rem;
	font-weight: 800;
	border: 2px solid #ff1493;
	background-color: #fff0f5;
	color: #ff1493;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Hover, Active, Focus Visible for desktop */
.btn-primary.cta-button:hover,
.btn-primary.cta-button:active,
.btn-primary.cta-button:focus-visible {
	background-color: #ff1493;
	color: #fff0f5;
	border-color: #ff1493;
}

/* style on mobile */
@media (width <= 991.98px) {
	.btn-primary.cta-button {
		padding: 0.75rem 4rem !important;
		border: 2px solid #ff1493 !important;
		background-color: #fff0f5 !important;
		color: #ff1493 !important;
	}
}

.hero-image {
	flex-shrink: 0;
	width: 400px;
	height: 400px;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 1.1rem;
}

/* ABOUT US--EXPERIENCE NAILS OUR WAY */
.features-section {
	background-color: #fff0f5;
}

.fa-spinner {
	color: #ffbdd3 !important;
}

.container h2 {
	font-family: Montserrat, sans-serif;
	font-weight: 800 !important;
	color: #ff1493 !important;
}

.feature-card img {
	height: 300px;
	object-fit: contain;
	width: 100%;
}

.feature-card .great-product {
	color: #e93a3d;
}

/* #FF939D */
.feature-card .fast-shipping {
	color: #ff939d;
}

/* #1FCBA5 */
.feature-card .customer-service {
	color: #1fcba5;
}

/* NEWSLETTER */

#news-letter {
	padding-top: 3rem;
	padding-bottom: 3rem;
	font-family: Montserrat, sans-serif;
}

/* Heading */
#news-letter h3 {
	font-weight: 800;
	margin-bottom: 1rem;
}

/* Paragraph */
#news-letter p {
	margin-top: 1rem;
	font-weight: 400;
}

/* Mobile view */
@media (width <= 991.98px) {
	#news-letter h3 {
		text-align: center;
		font-size: 2em;
	}

	#news-letter p {
		text-align: center;
	}

	/* Center the form and stack vertically */
	#news-letter form {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	#news-letter input.form-control {
		min-width: 100%;
	}

	#news-letter button {
		width: 100%;
	}
}

/* Desktop view */
@media (width >= 992px) {
	#news-letter {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	#news-letter h3 {
		text-align: left;
		font-size: 2.5em;
	}

	/* Form aligned to right */
	#news-letter form {
		flex-direction: row;
		justify-content: flex-end;
		gap: 1rem;
	}

	#news-letter input.form-control {
		min-width: 250px;
	}

	#news-letter button {
		width: auto;
	}

	/* Align paragraph under form, right-aligned */
	#news-letter .row.mt-4 .col {
		display: flex;
		justify-content: flex-end;
	}

	#news-letter p {
		text-align: right;
		max-width: 300px;
	}
}

/* FAQs */

/* Cart icon size */
.faq-modal-icon {
	width: 50px;
	font-size: 3em;
	color: #fff0f5;
}

.faq-section {
	background-color: #fff0f5;
}

.faq-card {
	background-color: #ffbdd3;
	transition: transform 0.3s;
	box-shadow: 8px 8px #969394;
	border-radius: 6rem;
	text-align: center;
}

.faq-card:hover {
	transform: translateY(-5px);
}

.btn-link.text-pink {
	color: #ff6ec4;
	font-weight: 500;
	text-decoration: none;
}

.btn-link.text-pink:hover {
	text-decoration: underline;
}

/* Modal */
.modal-content {
	background-color: #ffbdd3;
	color: #fff;
	border: none;
}

/* Centered, large icon */
.modal-header .faq-icon {
	font-size: 2.5rem;
	color: #fff;
}

/* Modal title/question */
.modal-title {
	font-weight: 600;
	font-family: Montserrat, sans-serif;
}

/* Spacing for body text */
.modal-body {
	font-size: 1rem;
	line-height: 1.6;
	color: #333;
}

.modal-fail {
	background-color: red;
	border: none;
}

.modal-success {
	background-color: #4bba4b;
	border: none;
}

/* PRODUCTS */

.product-section {
	background-color: #fff0f5 !important;
}

.carousel-wrapper {
	text-align: center;
	background-color: #ffbdd3 !important;
	max-width: calc(4 * 240px + 3rem);
	margin: 0 auto;
	box-shadow: 10px 10px #969394 !important;
	padding: 1.5rem;
	border-radius: 1rem;
	position: relative;
	overflow: hidden;
}

.scroll-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 1rem;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
}

.scroll-carousel::-webkit-scrollbar {
	display: none;
}

.product-card {
	flex: 0 0 240px;
	background-color: #f0e3e8;
}

.product-image-fixed {
	height: 200px !important;
}

/* Scroll buttons */
.scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgb(15 15 15 / 10%);
	color: rgb(0 0 0);
	border: none;
	font-size: 3rem;
	padding: 0.5rem;
	cursor: pointer;
	z-index: 10;
	border-radius: 0.5rem;
}

.scroll-btn.left {
	left: 10px;
}

.scroll-btn.right {
	right: 10px;
}

.scroll-hint {
	font-style: italic;
	opacity: 0.7;
}

@media (width <= 767px) {
	.carousel-wrapper {
		max-width: 90%;
	}
}

/* FOOTER */