@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");

/*--------------------------------------------------------------
# HexFashion
--------------------------------------------------------------*/
:root {
	--main-color-one: #fee600;
	--main-color-two: #754e1a;
	--main-color-three: #ff6a3a;
	--main-color-four: #ff695c;
	--heading-color: #140c02;
	--light-color: #787878;
	--extra-light-color: #999999;
	--btn-color: #1e1e1e;

	--inter-font: "Inter Tight", sans-serif;

	--heading-font: var(--inter-font);
	--body-font: var(--inter-font);
	--roboto-font: var(--inter-font);
	--rubik-font: var(--inter-font);
	--opensans-font: var(--inter-font);
	--montserrat-font: "Montserrat", sans-serif;
	--jost-font: "Jost", sans-serif;
	--playfair-font: "Playfair Display", serif;
}
@media (min-width: 1400px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1216px;
	}
}
.text-paragraph {
	color: var(--light-color);
}
.text-title {
	color: var(--heading-color);
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}
dl,
ol,
ul {
	margin-bottom: 0rem;
}
ol,
ul {
	padding-left: 0rem;
}
.o-hidden {
	overflow: hidden;
}
.g-x-24 {
	--bs-gutter-x: 24px;
}
.g-y-24 {
	--bs-gutter-y: 24px;
}
.text-title {
	color: var(--heading-color) !important;
}
.max-w-270 {
	max-width: 270px;
}
.max-w-300 {
	max-width: 300px;
}
.max-w-400 {
	max-width: 400px;
}
.text-20 {
	font-size: 20px;
}
.text-18 {
	font-size: 18px;
}
@media (max-width: 575px) {
	.max-w-sm-180 {
		max-width: 180px;
	}
	.max-w-sm-150 {
		max-width: 150px;
	}
	.max-w-sm-140 {
		max-width: 140px;
	}
}

.section-tittle {
	.title {
		color: var(--heading-color);
		text-transform: uppercase;
		font-size: 40px;
		display: block;
		font-weight: 900;
		line-height: 1.4;
		margin-bottom: 16px;
		position: relative;
		z-index: 0;
		@media (max-width: 575px) {
			font-size: 27px !important;
		}
	}
	.pera {
		color: var(--heading-title);
		font-size: 18px;
		font-weight: 400;
		line-height: 1.5;
		margin-bottom: 20px;
	}
}

/*---------------------------------------------
    :: Header 01
-----------------------------------------------*/
.header-transparent {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
@media (max-width: 991px) {
	.header-area-one {
		.logo {
			padding-top: 20px;
			padding-bottom: 20px;
			max-width: 150px;
		}
	}
}

.header-area {
	.main-menu {
		.listing {
			.single-list {
				display: inline-block;
				position: relative;
				z-index: 9;
				cursor: pointer;

				/* &:not(:last-child) {
					margin-right: 12px;

					@media (max-width: 1399px) {
						margin-right: 0;
					}
				} */

				.single {
					transition: 0.2s;
					font-size: 16px;
					font-weight: 600;
					line-height: 1.3;
					color: #fff;
					display: block;
					padding: 32px 11px;
					margin-top: 5px;
					padding-top: 27px;
					border-radius: 4px 4px 0 0;
					text-transform: capitalize;

					@media (max-width: 1199px) {
						font-size: 14px;
						padding: 32px 8px;
					}

					&.active {
						position: relative;

						> .single {
							color: var(--main-color-one);
						}
					}
				}
				&:first-child {
					.single {
						padding-left: 0;
					}
				}
				.link-active {
					color: var(--main-color-one);
				}

				&:hover {
					> .single {
						color: var(--main-color-one);
					}

					> .submenu {
						visibility: visible;
						opacity: 1;
						top: 100%;

						> .single-list > .single {
							transition: 0.4s;
							color: var(--heading-color);
							display: block;
							padding: 4px 18px;
							background-color: transparent;
							box-shadow: none;
						}

						.submenu {
							left: 100%;
							top: 0;
						}
					}
				}
			}

			.submenu {
				position: absolute;
				width: 260px;
				background: #fff;
				padding: 21px 0;
				left: 0;
				right: 0;
				top: 105%;
				opacity: 0;
				visibility: hidden;
				box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
				transition: 0.2s;
				z-index: 2;

				> .single {
					padding: 0;
				}

				> .single-list {
					margin: 0;
					background-color: transparent;
					display: block;

					> .single {
						font-size: 15px;
						text-transform: capitalize;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						margin-bottom: 0;
						padding: 6px 18px;
						color: var(--primary-paragraph);

						&::after {
							content: "";
							background-image: none;
						}

						&:hover {
							color: var(--main-color-one);
							letter-spacing: 0.3px;
						}

						i {
							margin-right: 0;
							line-height: 1;
							position: absolute;
							right: 13px;
							top: 9px;
							color: var(--primary-paragraph);
							font-size: 16px;

							@media (max-width: 991px) {
								display: none;
							}
						}
					}
				}
			}
		}
	}

	.header-right {
		display: flex;
		gap: 12px;
		align-items: center;
		/* @media (max-width: 1199px) {
			margin-right: 55px;
		} */
		.single {
			font-size: 24px;
			color: #fff;
		}
	}

	.mobile_menu {
		position: unset;
		right: 0;
		width: 100%;
		z-index: 99;

		.slicknav_menu {
			background: transparent;
			margin-top: 0;

			.slicknav_icon {
				top: 2px;
			}

			.slicknav_btn {
				position: absolute;
				top: 17px;
				right: auto;
				left: 0;
				.slicknav_icon-bar {
					background-color: #fff;
					height: 2px;
					margin: 5px 0;
					width: 21px;
				}
			}

			.slicknav_nav {
				margin-top: 0px;
				left: 0;
				right: 0;
				position: absolute;
				z-index: 999;
				padding: 19px;

				ul {
					margin: 0 0 0 11px;
				}

				.btn-primary-fill {
					color: var(--white);
					padding: 11px 16px;
				}

				.single {
					transition: 0.3s;
					color: var(--heading-color);
					font-weight: 600;
					display: block;
					font-size: 16px;
					text-transform: capitalize;

					&.active {
						position: relative;
						transition: 0.3s;
						color: var(--main-color-one);

						> .single {
							color: var(--main-color-one);
						}
					}
				}

				a:hover {
					background: transparent;
					color: var(--main-color-one);
				}

				.header-btn2 {
					display: inline-block;
					border-radius: 30px;
					margin-left: 0;
				}

				.btn-secondary-sm {
					color: #fff;
					border-radius: 4px;

					&:hover {
						color: var(--main-color-two);
					}
				}

				.slicknav_item {
					a {
						padding: 0;

						i {
							display: none;
						}
					}
				}
				.slicknav_arrow {
					color: var(--heading-color);
					top: -30px;
				}
			}
		}
	}
}
/*---------------------------------------------
    :: Header 02
-----------------------------------------------*/

.header-area.two {
	& .main-menu {
		& .listing {
			& .single-list {
				.single {
					color: var(--heading-color);
				}
			}
		}
	}
	@media (max-width: 991px) {
		.logo {
			padding-top: 20px;
			padding-bottom: 20px;
			max-width: 150px;
		}
	}

	& .mobile_menu {
		& .slicknav_menu {
			& .slicknav_btn {
				.slicknav_icon-bar {
					background-color: var(--heading-color);
					height: 2px;
					margin: 5px 0;
					width: 21px;
				}
			}
		}
	}
}
.header-area.two {
	& .header-right {
		.single {
			color: var(--heading-color);
		}
	}
}
/*---------------------------------------------
    :: Hero 01
-----------------------------------------------*/

.hero-bg-one {
	background: #e7e7e7;
}
.hero-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.max-w-240 {
	max-width: 240px;
}
.border-bottom {
	border-bottom: 1px solid #b0b0b0 !important;
}
.margin-lr-50 {
	margin: 0 50px;
	@media (max-width: 1300px) {
		margin: 0 30px;
	}
	@media (max-width: 1199px) {
		margin: 0 0px;
	}
	@media (max-width: 576px) {
		margin: 0 0px;
	}
}
.padding-lr-144 {
	padding-left: 144px;
	padding-right: 144px;
	@media (max-width: 1400px) {
		padding-left: 120px;
		padding-right: 120px;
	}
	@media (max-width: 1400px) {
		padding-left: 78px;
		padding-right: 78px;
	}
	@media (max-width: 1199px) {
		padding-left: 30px;
		padding-right: 30px;
	}
	@media (max-width: 576px) {
		padding-left: 12px;
		padding-right: 12px;
	}
}
.hero-padding-one {
	position: relative;
	padding: 148px 145px 204px 145px;
	@media (max-width: 1450px) {
		padding: 80px;
	}
	@media (max-width: 1300px) {
		padding: 120px 80px;
	}
	@media (max-width: 1199px) {
		padding: 120px 30px;
	}
	@media (max-width: 576px) {
		padding: 80px 12px;
	}
}

.hero-caption-one {
	.highlights {
		font-size: 28px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--heading-color);
		font-family: var(--body-font);
		@media (max-width: 576px) {
			font-size: 18px;
		}
	}
	.title {
		margin: 20px 0;
		color: #fff;
		font-size: 80px;
		font-weight: 900;
		line-height: 1;
		transition: 0.4s;
		@media (max-width: 1700px) {
			font-size: 70px;
		}
		@media (max-width: 1500px) {
			font-size: 60px;
		}
		@media (max-width: 1400px) {
			font-size: 60px;
		}
		@media (max-width: 1300px) {
			font-size: 60px;
		}
		@media (max-width: 1199px) {
			font-size: 55px;
		}
		@media (max-width: 992px) {
			font-size: 48px;
		}
		@media (max-width: 768px) {
			font-size: 50px;
		}
		@media (max-width: 576px) {
			font-size: 50px;
		}
		@media (max-width: 440px) {
			font-size: 30px;
		}
		@media (max-width: 320px) {
			font-size: 30px;
		}
	}
	.pera {
		margin-bottom: 60px;
		color: #fff;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;

		@media (max-width: 1199px) {
			font-size: 14px;
		}
	}
	.button-section {
		.hero-book-btn {
			padding: 12px 24px;
		}
	}
}

.btn-primary-fill {
	background-color: var(--btn-color);
	border: 1px solid transparent;
	padding: 19px 56px;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.3;
	border-radius: 30px;
	color: #fff;
	display: inline-block;
	text-transform: uppercase;
	@media (max-width: 768px) {
		padding: 15px 40px;
		font-size: 14px;
	}
	&:hover {
		transition: 0.3s;
		background-color: transparent;
		border: 1px solid var(--main-color-two);
		color: var(--main-color-two);
	}
}
.btn-primary-fill-two {
	position: relative;
	/* background-color: #fbb040; */
	color: #3d0f00;
	padding: 12px 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	border: 3px solid #3d0f00;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	text-transform: capitalize;
	cursor: pointer;
	z-index: 1;
	color: var(--heading-color);
	.arrow {
		margin-left: 12px;
		font-size: 22px;
		font-weight: 400;
		transition: 0.3s;
	}
	&::after {
		content: "";
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #fbb040;
		z-index: -1;
	}
	&::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 6px;
		width: 100%;
		height: 100%;
		background-color: #3d0f00;
		z-index: -1;
		transition: 0.3s;
	}
	&:hover {
		.arrow {
			margin-left: 16px;
		}
		&::before {
			top: -6px;
			left: -6px;
		}
	}
}
/* End of Hero */

/*---------------------------------------------
    :: Hero 02
-----------------------------------------------*/
.hero-padding-two {
	position: relative;
	padding: 206px 0px 100px;
	/* @media (max-width: 1450px) {
		padding: 80px;
	} */
	@media (max-width: 1400px) {
		/* padding: 170px 0px 41px; */
	}
	@media (max-width: 1199px) {
		padding: 180px 0px 41px;
	}
	@media (max-width: 768px) {
		padding: 120px 0px 41px;
	}
	@media (max-width: 576px) {
		padding: 88px 0px 64px;
	}
}
.hero-padding-one {
	position: relative;
	padding: 172px 0px 120px;
	/* @media (max-width: 1450px) {
		padding: 80px;
	} */
	@media (max-width: 1400px) {
		/* padding: 170px 0px 41px; */
	}
	@media (max-width: 1199px) {
		padding: 180px 0px 41px;
	}
	@media (max-width: 768px) {
		padding: 120px 0px 41px;
	}
	@media (max-width: 576px) {
		padding: 110px 0px 65px;
	}
}

@media (max-width: 768px) {
	.fs-md-22 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 32px;
	}
}

.hero-product-images {
	position: absolute;
	top: 136px;
	right: 0px;
	text-align: center;
	margin: 0 auto;
	z-index: 1;
	max-width: 700px;
	max-height: 586px;
	transition: 0.4s;
	/* &.hero-product-images2 {
		position: absolute;
		top: auto;
		bottom: 200px;
		right: 0px;
		text-align: center;
		margin: 0 auto;
		max-width: 773px;
		max-height: 586px;
		left: 0;
	} */
	@media (max-width: 1400px) {
		max-width: 600px;
		max-height: 460px;
	}
	@media (max-width: 1199px) {
		max-width: 600px;
		max-height: 460px;
	}
	@media (max-width: 992px) {
		max-width: 300px;
		max-height: 400px;
		/* position: unset;
		transform: unset; */
	}
	@media (max-width: 768px) {
		max-width: 300px;
		max-height: 400px;
		top: 80px;
	}
	@media (max-width: 576px) {
		max-width: 253px;
		max-height: 338px;
		right: -42px;
	}
	&.hero-product-images2 {
		position: absolute;
		top: auto;
		bottom: 80px;

		right: 0px;
		text-align: center;
		margin: 0 auto;
		max-width: 773px;
		max-height: 586px;
		left: 0;
		@media (max-width: 1400px) {
			max-width: 600px;
			max-height: 460px;
		}
		@media (max-width: 992px) {
			max-width: 400px;
			max-height: 400px;
			bottom: 100px;
			/* position: unset;
			transform: unset; */
		}
		@media (max-width: 768px) {
			max-width: 300px;
			max-height: 400px;
			top: auto;
			bottom: 140px;
		}
		@media (max-width: 576px) {
			max-width: 366px;
			max-height: 334px;
			top: auto;
			bottom: 183px;
		}
	}
}
.hero-caption-two {
	.main-title {
		color: var(--main-color-one);
		font-size: 123px;
		font-weight: 900;
		line-height: 0.9;
		padding-bottom: 16px;
		margin-bottom: 258px;
		text-transform: uppercase;
		/* @media (max-width: 1199px) {
			font-size: 34px;
		} */

		@media (max-width: 1400px) {
			font-size: 113px;
			margin-bottom: 120px;
		}
		@media (max-width: 1199px) {
			font-size: 90px;
		}
		@media (max-width: 992px) {
			font-size: 60px;
		}
		@media (max-width: 768px) {
			font-size: 70px;
			margin-bottom: 40px;
		}
		@media (max-width: 576px) {
			font-size: 60px;
		}
		@media (max-width: 440px) {
			font-size: 50px;
			margin-bottom: 0;
		}
		@media (max-width: 320px) {
			font-size: 40px;
		}
		&.main-title2 {
			@media (max-width: 1400px) {
				font-size: 113px;
				margin-bottom: 240px;
			}
			@media (max-width: 1199px) {
				font-size: 100px;
				margin-bottom: 300px;
			}
			@media (max-width: 992px) {
				font-size: 90px;
				margin-bottom: 100px;
			}
			@media (max-width: 768px) {
				font-size: 70px;
				margin-bottom: 104px;
			}

			@media (max-width: 576px) {
				font-size: 60px;
			}
			@media (max-width: 440px) {
				font-size: 58px;
				margin-bottom: 157px;
			}
			@media (max-width: 320px) {
				font-size: 40px;
				margin-bottom: 152px;
			}
		}
	}
	.pera {
		margin-bottom: 60px;
		color: #fff;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;

		@media (max-width: 1199px) {
			font-size: 14px;
		}
	}
	.button-section {
		.hero-book-btn {
			padding: 12px 24px;
		}
	}
}
/* .hero-buttons {
	gap: 20px;
	@media (max-width: 768px) {
		margin-top: 220px;
	}
	@media (max-width: 576px) {
		margin-top: 180px;
	}
	.buttons {
		color: #42150d66;
		font-size: 18px;
		font-weight: 500;
		line-height: 1.3;
		min-width: 200px;
		@media (max-width: 768px) {
			min-width: 100%;
		}
		display: flex;
		justify-content: space-between;
		&:not(:last-child) {
			border-bottom: 1px solid rgba(66, 21, 13, 0.4);
			margin-bottom: 1px;
			padding-bottom: 15px;
		}
		&.active {
			color: var(--heading-color);
		}
	}
} */
/* Product Image  */
@keyframes animated-img {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}

.animated-images {
	.main-title {
		position: relative;

		.main-title-one {
			z-index: 5;
			opacity: 1;
			visibility: visible;
			transition: 0.5s;
			color: var(--heading-color);
		}
		.main-title-two {
			z-index: 99;
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 0;
			transition: 0.5s;
			color: var(--heading-color);
		}
	}
	&:hover {
		.main-title {
			/* animation: animated-img 1.5s ease-in-out; */
			transition: 0.4s;
			opacity: 1;
			visibility: visible;
			.main-title-two {
				opacity: 1;
				visibility: visible;
			}
			.main-title-one {
				opacity: 0;
				visibility: hidden;
			}
		}

		.hero-product-images {
			z-index: 2;
			transition: 0.4s;
		}
	}
	.main-title {
		animation: none;
	}
}

/* RTL */
/* .hero-padding-one .hero-caption-one {
	text-align: right !important;
}
.animated-images {
	& .main-title {
		& .main-title-two {
			left: auto;
			right: 0px;
		}
	}
} */