@font-face {
	font-family: LexendRegular;
	src: url(../fonts/Lexend/Lexend-Regular.ttf);
}

@font-face {
	font-family: LexendMedium;
	src: url(../fonts/Lexend/Lexend-Medium.ttf);
}

@font-face {
	font-family: LexendBold;
	src: url(../fonts/Lexend/Lexend-Bold.ttf);
}

@font-face {
	font-family: LexendExtraBold;
	src: url(../fonts/Lexend/Lexend-ExtraBold.ttf);
}

@font-face {
	font-family: LexendBlack;
	src: url(../fonts/Lexend/Lexend-Black.ttf);
}

@font-face {
	font-family: OutfitRegular;
	src: url(../fonts/Outfit/Outfit-Regular.ttf);
}

@font-face {
	font-family: OutfitMedium;
	src: url(../fonts/Outfit/Outfit-Medium.ttf);
}

@font-face {
	font-family: OutfitBold;
	src: url(../fonts/Outfit/Outfit-Bold.ttf);
}

@font-face {
	font-family: OutfitExtraBold;
	src: url(../fonts/Outfit/Outfit-ExtraBold.ttf);
}

@font-face {
	font-family: OutfitBlack;
	src: url(../fonts/Outfit/Outfit-Black.ttf);
}

@font-face {
	font-family: Bastliga;
	src: url(../fonts/Bastliga/Bastliga-One.otf);
}

:root {
	--primary-color: #d7d6d1;
	--secondary-color: #121212;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	text-decoration: none !important;
	list-style: none;
	outline: none;
	font: normal 18px/24px OutfitRegular, "Sans-serif";
	resize: none !important;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	background: #f2f2f2;
}

a {
	color: #1a1a1a !important;
	&:hover {
		color: #b80101 !important;
	}
}

section {
	scroll-snap-align: start;
	scroll-padding-top: 250px;
	scroll-margin-top: 155px;
}

input,
textarea,
select {
	width: 100%;
	border-color: #000 !important;
	transition: 300ms ease-in;
	font-size: 16px !important;
	
	&:focus {
		border-color: b80101 !important;
	}
}

input[type="checkbox"] {
	scale: 1;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;

	&:invalid {
		color: gray !important;
	}
}

select::-ms-expand {
	display: none;
}

input[type="date"]:invalid::-webkit-datetime-edit {
	color: gray !important;
}

button {
	&:focus {
		outline: none !important;
		box-shadow: none !important;
	}
}

:is(ul, ol):not(:is(header, footer) :is(ul, ol)) {
	padding: 0 !important;
	margin: 0 !important;

	li {
		margin-bottom: 5px;
	}
}

img,
video,
svg {
	max-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

input,
textarea {
	border: 1px solid red;
	padding: 6px;
}

#mainContainer {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0;
}

.buttonNav {
	background-color: #d7d6d1;
	color: #1a1a1a;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0.4;
	transition: 300ms ease-in;

	&:hover {
		background-color: #000000;
		color: #fff;
		opacity: 1;
	}

	i {
		font-size: 20px;
	}
}

.call-button {
	small {
		font: normal 10px/12px OutfitRegular, "Sans-serif";
	}

	.icon {
		background-color: #d7d6d1;
		color: #1a1a1a;
		display: grid;
		place-items: center;
		min-width: 35px;
		height: 35px;
		border-radius: 50%;
	}
}

header {
	top: 0;
	width: 100%;
	height: auto;
	position: sticky;
	z-index: 99;
	background-color: #fff;

	img {
		max-width: 150px;
		height: auto;
	}

	.header-menu {
		li {
			a {
				color: #1a1a1a;
				opacity: .75;
				transition: color 300ms ease-in;
				position: relative;
				padding: 0 4px;

				&:hover {
					color: #000000;
					opacity: 1;
				}

				&.active {
					color: #b80101 !important;
					opacity: 1;
				}

				&.active::after {
					content: '';
					position: absolute;
					bottom: -10px;
					left: 50%;
					transform: translateX(-50%);
					width: 25px;
					height: 2px;
					background-color: #b80101 !important;
				}
			}
		}
	}

	article {
		background-color: #121212;

		p {
			font: normal 16px/16px OutfitRegular, "Sans-serif";
		}
	}

	.scroller__inner {
		gap: 5rem;
	}
}

footer {
	.line {
		display: inline-block;
		width: 75px;
		height: 3px;
		background-color: #d7d6d1;
	}
	li {
		width: 35px;
		height: 35px;
		display: grid;
		place-items: center;
		border-radius: 50%;
		background-color: #d7d6d1;
		transition: outline 300ms ease-in;
		i {
			font-size: 20px;
			transition: outline 300ms ease-in;
		}
		&:hover {
			background-color: #000000;
			i {
				color: #fff;
			}
		}
	}
	.copywrite, .copywrite a {
		font-size: 14px !important;
	}
}

#BannerArea {
	.container {
		color: #fff;
		p {
			line-height: 125% !important;
		}
		p.fs-4 {
			line-height: 125% !important;
		}
		p.para {
			max-width: 500px;
		}
	}
	img {
		min-height: 420px;
		max-height: 720px;
		width: 100%;
		object-position: left;
	}
}

#ArrivalArea {
	.product-card {
		width: calc(25% - 15px);
		
		img {
			aspect-ratio: 5/3;
		}
		
		.badger {
			inset: 10px auto auto 10px;
			background-color: #ff0000;
			font: normal 14px/14px OutfitRegular, "Sans-serif";
		}

		.btn {
			text-wrap: nowrap;
			font: normal 14px/14px OutfitRegular, "Sans-serif";

			&.btn-primary {
				width: 45%;
			}

			&.btn-secondary {
				width: 55%;
			}
		}
	}
}

#CollectionArea {
	.item {
		img {
			max-width: 100%;
			aspect-ratio: 1;
			border-radius: 50%;
		}
	}
}

#ProductArea {
	.product-card {
		width: calc(25% - 15px);

		img {
			aspect-ratio: 3/2;
		}

		.badger {
			inset: 10px auto auto 10px;
			background-color: #ff0000;
			font: normal 14px/14px OutfitRegular, "Sans-serif";
		}

		.btn {
			text-wrap: nowrap;
			font: normal 14px/14px OutfitRegular, "Sans-serif";

			&:hover {
				color: #fff !important;
				background: var(--secondary-color) !important;
			}

			&:focus {
				color: #fff !important;
				background: var(--secondary-color) !important;
			}

			&.btn-primary {
				width: 45%;
			}

			&.btn-secondary {
				width: 55%;
			}
		}
	}
}

#GemstoneArea {
	.item {
		img {
			max-width: 135px;
			aspect-ratio: 1/1;
		}
	}
}

#WhyUsArea {
	.row {
		background-color: #d7d6d1;
	}
	.sign {
		font: normal 56px/68px Bastliga, "Sans-serif";
	}
}

#OfferArea {
	background: transparent url(../images/offer-pic-3.jpg) no-repeat center center / cover;
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		width: 100%;
		background: #000000;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
		z-index: 2;
	}
	.box-bg {
		min-height: 380px;
		width: 100%;
		.box {
			max-width: 580px;
			top: 50%;
			transform: translateY(-50%);
			p.fs-lg-1 {
				line-height: 125%;
			}
			p:nth-child(2) {
				line-height: 125%;
			}
		}
	}
}

#QualityArea {
	.quality-card {
		background: transparent;
		span {
			background-color: #121212;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			place-items: center;
			color: #fff;
		}
	}
}

#ReviewArea {
	background-color: #ede3e2;
	.review-card {
		span {
			place-items: center;
			padding: 6px;
			background-color: #000000;
			img {
				max-width: 40px;
			}
		}
		i {
			color: #ababab;
			&.fa-gold {
				color: gold;
			}
		}
	}
}

#BlogArea {
	.blog-card {
		.blog-content {
			background: #fff;
			div {
				p {
					font: normal 16px/16px OutfitRegular, "Sans-serif";
				}
			}
		}
	}
}

#SocialArea {
	.scroller {
		img {
			max-width: 200px;
		}

		li {
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background-color: rgba(0, 0, 0, .25);
				display: none;
				z-index: 2;
			}

			img {
				max-width: 175px;
				height: auto;
				aspect-ratio: 1/1;
			}

			a {
				display: none;
				color: #fff !important;
			}

			&:hover {
				&::after {
					display: block;
				}

				a {
					display: block;
					color: #d7d6d1;
				}
			}
		}
	}
}

#ContactArea {
	iframe {
		min-height: 400px;
		border: 1px solid #999;
	}
}

#ContactArea,
.modal {
	img {
		min-height: 100%;
	}
    div.wpcf7 {
        min-height: auto !important;
    }
    .wpcf7-form {
		.wpcf7-response-output {
			display: none !important;
		}
		.recaptcha {
			display: none;
		}
		.accept label {
			display: flex;
			gap: 12px;
			input[type="checkbox"] {
				max-width: 25px;
			}
		}
		.submit {
			p {
				text-align: end;
			}
		}
        p {
            margin: 0 !important;
			br {
				display: none !important;
			}
        }
		.wpcf7-not-valid-tip {
			color: #dc3232;
			font-size: 14px !important;
			font-weight: normal;
			display: block;
			padding: 4px;
		}
        .wpcf7-response-output {
            margin: 0 !important;
            padding: 10px 0 0 0 !important;
            border: 0 !important;
            text-align: center;
        }
        .col-12.text-end {
            p {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 24px;
                .wpcf7-spinner{
                    order: 1!important;
                    margin: auto 20px !important;
                }
                input.wpcf7-form-control {
                    order: 0;
                }
            }
        }
    }
}

.offcanvas {
	img {
		max-width: 150px;
		height: auto;
	}
	ul {
		li {
			margin: 5px;
			a {
				display: inline-block;
				padding: 10px;
				color: #999 !important;
				&.active {
					color: #b80101 !important;
				}
				&:hover {
					color: #000 !important;
				}
			}
		}
	}
}