html {
    scroll-behavior: smooth;
}
body,
code {
	font-family: Jost, sans-serif;
	margin: 0
}

a {
	color: #000;
	text-decoration: none
}

h1 {
	font-size: 46px;
	font-weight: 600
}

h1,
h2 {
	font-family: Playfair Display, sans-serif
}

h2 {
	font-size: 42px;
	font-weight: 500
}

h3 {
	font-family: Playfair Display, sans-serif;
	font-size: 38px;
	font-weight: 400
}

h4 {
	font-size: 34px
}

h4,
h5 {
	font-family: Playfair Display, sans-serif;
	font-weight: 300
}

h5 {
	font-size: 30px
}

h6 {
	font-family: Playfair Display, sans-serif;
	font-size: 26px;
	font-weight: 300
}

p {
	font-size: 22px;
	font-weight: 400
}

.App {
	text-align: center
}

.App-logo {
	/*height: 10vmin;*/
	pointer-events: none
}

@media (prefers-reduced-motion:no-preference) {
	.App-logo {
        animation: none;
        width: 140px;
    }
}

.App-header {
	align-items: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: calc(10px + 2vmin);
	justify-content: center;
	min-height: auto;
	padding: 20px 0;
    background: #fff
}

.App-link {
	color: #61dafb
}

@keyframes App-logo-spin {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(1turn)
	}
}

section.title-bar {
	background: #ffdc10;
	margin: 0;
	padding: 0;
	width: 100%
}

section.title-bar .title-progress-header p {
	font-family: Jost, sans-serif;
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 20px 0
}

section.title-bar .title-progress-header p span {
	font-weight: 600
}

section.Banner-section {
	margin: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%
}
.slick-slide {
    height: auto !important;
}

.Banner-img {
	position: relative;
	text-align: center
}
.Banner-img h1 {
	color: #fff;
	font-family: Playfair Display, serif;
	font-size: 3rem;
	font-weight: 600;
	left: 50%;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
	top: 80%;
	transform: translate(-50%, -50%)
}
.slick-dots {
    bottom: -35px !important;
}
.slick-dots li button:before {
    font-size: 12px !important;
}

section.Banner-section .Banner-img img {
	display: block;
	object-fit: cover;
	width: 100%
}

section.Banner-section .Banner-img h1 {
	color: #fff;
	font-family: Playfair Display, serif;
	font-size: 3rem;
	font-weight: 600;
	left: 50%;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
	top: 72%;
	transform: translate(-50%, -50%)
}

section.About .About-text p {
	font-family: Jost, sans-serif;
	font-size: 22px;
	font-weight: 400
}

section {
	margin: 88px auto;
	padding: 0;
	/*width: 1440px*/
}

section.Top-pick-section .Top-pick h2 {
	font-family: Playfair Display, serif;
	font-size: 44px
}

p.list-title {
	font-size: 25px;
	transition: .5s;
    margin-top: 10px;
}

p.list-title:hover {
	color: #9e8a35
}

.list {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: center
}

section.Click-section .Click h2 {
	font-family: Playfair Display, serif;
	font-size: 44px;
	margin: 0
}

section.Click-section .Click p {
	margin: 13px 0 57px
}

section.Click-section .Click .list {
	gap: 67px
}

.Introduction .introinr span {
	color: #fff;
	display: block;
	font-family: Jost, sans-serif;
	font-size: 28px
}

.Introduction {
	margin: 0 auto;
	position: relative
}

.Introduction img {
	width: 100%
}

.Introduction .introinr {
	position: absolute;
	right: 10%;
	top: 37%
}

.Introduction .introinr p {
	color: #fff
}

.Introduction .introinr h2 {
	font-family: Playfair Display, serif;
	margin: 10px 0
}

.boxes-list {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: space-between
}

.boxes-list .box {
	position: relative
}

.boxes-list .box .box-content {
	bottom: 20px;
	color: #fff;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center
}

.boxes-list .box .box-content h2 {
	margin: 0
}

.kitn-hyg-lst {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: center;
	text-align: center
}

footer {
	background-color: #fff8d2
}

section.footer-section {
	margin: 0 auto;
	padding: 82px 0;
	width: 100%;
}

.footer-inner {
	display: flex;
	justify-content: space-evenly;
	text-align: left;
}

.footer-inner p.footer-addr {
	width: 70%;
    margin-top: 20px;
}

.footer-inner a {
	color: #000;
	text-decoration: none
}

.footer-inner .footer-social a {
    border: 1px solid #000;
    border-radius: 100%;
    padding: 9px 9px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    display: inline-block;
    transition: .5s;
}
.footer-inner .footer-social a:hover {
    transform: scale(1.1);
}
.footer-social {
	margin-top: 20px
}

.footer-inner .footer-social a img {
	width: 20px;
}

.newsletter-form form {
	border: 1px solid #000;
	display: flex;
	justify-content: space-between
}

.newsletter-form form input {
	background: #0000;
	border: 0;
	outline: none;
	padding: 20px;
	width: 100%
}

.newsletter-form button.sub-btn {
	background-color: #ffdc10;
	border: 0;
	padding: 20px
}

.newsletter-form button.sub-btn:hover {
	background: #99840d;
	color: #fff
}

.footer-box h3 {
	margin: 0
}

.contact-inner {
	display: flex;
	gap: 30px
}

.contact-form form.cont-frm {
	border: 10px solid #fff19e;
	width: 100%
}

.contact-form form.cont-frm input,
.contact-form form.cont-frm textarea {
	border: 0;
	border-bottom: 1px solid #d4d4d4;
	display: block;
	margin: 20px 0;
	padding: 10px;
	width: 98%;
    outline: none;
}

.contact-inner .contact-form {
	width: 70%
}

.contact-inner .contact-text {
	width: 30%
}

section.contact-section h2 {
	text-align: center
}

.contact-form form.cont-frm textarea {
	height: 100px
}

.contact-form form.cont-frm label {
	padding: 10px;
	text-align: left
}

input#file {
	background-color: #fff8cf;
	border: 1px dashed #ffdc10;
	height: 100px;
	margin: 10px auto;
	width: 96%
}

.contact-form form.cont-frm p {
	font-size: 16px;
	padding: 10px
}

.contact-form form.cont-frm a {
	color: #000;
	font-weight: 600;
	text-decoration: none
}

.contact-form form.cont-frm button.submit-btn:hover {
	background-color: #fff
}

.contact-form form.cont-frm button.submit-btn {
	background-color: #ffdc10;
	border: 1px solid #ffdc10;
	display: table;
	font-size: 18px;
	font-weight: 600;
	margin: 0 auto 40px;
	padding: 10px 60px;
	transition: .5s;
	    color: #000;
}

.file-upload-wrapper {
	margin-bottom: 20px;
	position: relative
}

.file-upload {
	background-color: #fff8c7;
	border: 1px dashed #f3cd00;
	cursor: pointer;
	font-family: Jost, sans-serif;
	font-size: 14px;
	margin: 10px;
	padding: 20px;
	position: relative;
	text-align: center
}

.file-upload:hover {
	background-color: #fff4ad
}

.file-upload span {
	color: #bbb;
	display: block;
	margin-top: 5px
}

.file-upload input[type=file] {
	cursor: pointer;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%
}

.file-name {
	color: #333;
	font-size: 14px;
	margin-top: 8px;
	text-align: left;
	word-break: break-word
}

.file-label {
	display: block;
	font-weight: 700;
	margin: 20px 0 10px
}

.file-error {
	color: red
}

.file-error,
.file-success {
	margin: 10px;
	text-align: left
}

.file-success {
	color: #333;
	font-size: 14px;
	word-break: break-word
}

.contact-text,
.filling-out {
	text-align: left
}

.dialog {
	all: unset;
	animation: fadeIn .3s ease-in-out;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px #00000040;
	font-family: Arial, sans-serif;
	left: 50%;
	max-height: 90vh;
	max-width: 400px;
	overflow-y: auto;
	padding: 2rem 1.5rem;
	position: fixed;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
	z-index: 1000
}

.dialog::backdrop {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: #0006;
	z-index: 999
}

@media (min-width:480px) {
	.dialog {
		max-width: 400px;
		padding: 2rem 1.5rem
	}
}

@media (min-width:768px) {
	.dialog {
		max-width: 500px
	}
}

@media (min-width:1024px) {
	.dialog {
		max-width: 600px
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -48%)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%)
	}
}

.dialog h1 {
	font-size: 1.5rem;
	margin-bottom: 1rem
}

.dialog p {
	color: #333;
	font-size: 1rem;
	margin-bottom: 1.25rem
}

.dialog .btn,
.dialog button {
	background-color: #FFDC10;
	border: none;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	margin-top: 1rem;
	padding: .75rem 1.5rem;
	text-decoration: none;
    color: #000;
    border: 1px solid #FFDC10;
}

.dialog .btn:hover,
.dialog button:hover {
	background-color: #fff;
}

.modal-overlay {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: #0000004d;
	cursor: pointer;
	inset: 0;
	position: fixed;
	z-index: 999
}
.boxes-list .box img, .Top-pick-section .list img, .kitn-hyg-inr img, section.Click-section img, .list-inner img {
    width: 100%;
}
.two-boxes-section .boxes-list {
    justify-content: center;
} 
.footer-box h3 {
    font-family: Jost, sans-serif;
}
header.App-header .row {
    width: 100%;
    align-items: center;
}
nav.menu-wrapper ul li {
    display: inline-block;
    margin: 0 0 0 16px;
}
nav.menu-wrapper {
    text-align: right;
}
.logo-wrapper {
    text-align: left;
}
nav.menu-wrapper ul li a {
    font-size: 20px;
}
nav.menu-wrapper ul li a:hover {
    color: #9e8a35;
    border-bottom: 2px solid;
}
a.cntctBtn {
    background-color: #FFDC10;
    padding: 10px 20px;
    border: 1px solid #FFDC10;
    transition: .5s;
}
a.cntctBtn:hover {
    background-color: #fff;
    color: #000 !important;
}
nav.menu-wrapper ul {
    margin: 0;
}
nav.menu-wrapper ul li:focus-visible {
    outline: none;
}
.sticky {
  position: relative;
  transition: top 0.3s ease-in-out; 
}

.fixed {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
}
.boxes-list .box, .img-box-wrapper { 
    overflow: hidden;
    position: relative;
}
.boxes-list .box img, .img-box-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.boxes-list .box:hover img, .img-box-wrapper:hover img {
    transform: scale(1.1);
}
.Click-section .img-box-wrapper {
    overflow: visible;
}
form.cont-frm .error-message {
    color: #ff0000;
    text-align: left;
    font-size: 14px;
    padding: 0 0 0 6px;
}

.error-message-msg {
    color: #ff0000;
}
.alert-success-msg {
    color: #008000;
    font-size: 20px;
}
section.slick {
    margin: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.slick-slide img {
    width: 100%;
}
.footer-social img {
    border: 1px solid #000;
    border-radius: 100%;
    padding: 9px 9px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    display: inline-block;
    transition: .5s;
}
.footer-inner .footer-social img:hover {
    transform: scale(1.1);
}