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

*{
	font-family: "Lato", sans-serif;
	font-style: normal;
}
:root {
	--black: #1f1f1f;
	--grey: #737373;
	--grey-light: #a1a1a1;
	
	--white: #fff;
	--white-orange: #fffafa;

	--red: #db0404;
	--red-dark:#a31526;
	--red-light: #e34053;
	--red-x-light: #ffc2c9;
	--red-xx-light: #ffedf5;
	--red-xxl-light:#fff2f8;
	
	--green: #00b530;
	
	--border-radius:5px;
	--box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
	--box-shadow-1: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	
	--transition: all 0.2s linear;
	
	
	--background-color: #f2f2f2;
	--background-color-dark:#0b0b17;
	--black: #1f1f1f;
	--grey: #5c5c5c;
	--grey-dark: #333;
	--grey-light: #cdcdcd;
	--grey-x-light: #ebebeb;
	--white: #fefefe;

	--orange: #ff713e;
	--orange-dark: #e3501b;
	--orange-light: #ff9563;
	--orange-x-light: #ffc5ab;
	--orange-xx-light: #fff2ec;

	--red: #991212;
	--red-light: #ffdbdb;
	--red-x-light: #ffeded;

	--green: #0b732a;
	--green-light: #bdffd1;
	--green-x-light: #e7ffee;

	--border-radius: 9px;
	--transition: all 0.2s ease-in-out;
}


body{
	background:var(--background-color);
}
a{
	color:var(--black);
	text-decoration:none;
}
a:hover{
	color:var(--orange-dark);
}
@media (prefers-color-scheme: dark) {
	select {
		color: #ffffff; /* White text */
		background-color: #333333; /* Dark background */
	}
	option {
		color: #ffffff; /* White text */
		background-color: #333333; /* Dark background */
	}
}

.btn-imp{
	min-width:150px;
	padding:9px 20px;
	font-size:16px;
	border-radius:var(--border-radius);
	color: var(--white);
	font-weight:500;
	background: #ff4000;
	background: linear-gradient(90deg, var(--orange-dark) 0%, var(--orange) 50%, var(--orange-light) 100%);
	border: none;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transition: var(--transition);
	
}
.btn-imp:hover{
	background-color: var(--orange);
	border: none;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}
.btn-nrm{
	min-width:150px;
	background: var(--orange-x-light);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:none;
	border-radius:var(--border-radius);
}
.btn-nrm:hover{
	background: var(--orange-xx-light);
}
.btn-igr{
	min-width:150px;
	background: var(--white);
	color:var(--orange-dark);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:none;
	border-radius:var(--border-radius);
}
.btn-igr:hover{
	color: var(--grey);
}
@media( max-width: 768px){
	.btn-imp{
		font-size:16px;
		min-width:100px;
	}
	.btn-nrm{
		font-size:16px;
		min-width:100px;
	}
	.btn-igr{
		font-size:16px;
		min-width:100px;
	}
}

.form-label{
	font-size:0.875rem;
	color:var(--grey)
}
.form-control, .form-select{
	color:var(--black);
	font-size:0.875rem;
	font-weight:500;
	border:1px solid var(--grey-light);
	outline:none;
	border-radius: var(--border-radius);
	padding:9px 11px;
	transition: var(--transition);
	background: var(--white);
}
.form-control:focus, .form-select:focus, .form-check-input:focus{
	outline:1px solid var(--orange);
	border-color:var(--orange);
    box-shadow:0 0 0 4px var(--orange-xx-light);
	background: var(--white);
}
.form-check-input:checked{
    background-color:var(--orange);
    border-color:var(--orange);
}

@media (max-width:768px){
	.form-control, .form-select{
		padding:7px 11px;
	}
}

.heading-1{
	font-size:45px;
	font-weight:700;
}
.heading-2{
	font-size:35px;
	font-weight:700;
}
.heading-3{
	font-size:20px;
	font-weight:700;
}
.animate-heading{
	animation: myAnim 1s ease 0s 1 normal forwards;
}
.title-1{
	font-size:16px;
	font-weight:700;
}
.text-1{
	font-size:16px;
	color:var(--black);
}
.text-2{
	font-size:14px;
	color:var(--black);
}
.text-3{
	font-size:12px;
	color:var(--black);
}
@media( max-width: 768px){
	.heading-1{
		font-size:35px;
	}
	.heading-2{
		font-size:25px;
	}
	.heading-3{
		font-size:18px;
	}
}


.card-box{
	background:var(--white);
	padding:45px;
	border-radius:var(--border-radius);
	animation: myAnim 2s ease 0s 1 normal forwards;
}
.box-name{
	color:var(--grey);
}
.box-count{
	color:var(--red-dark);
}
.card-box-small{
	background:var(--white);
	padding:15px 25px;
	border-radius:var(--border-radius);
	animation: myAnim 2s ease 0s 1 normal forwards;
}
@media( max-width: 768px){
	.card-box{
		padding:25px;
	}
	.card-box-small{
		padding:10px 15px;
	}
}


/* Animation Kit */
@keyframes myAnim {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*Header*/
.header{
	background:var(--white);
	/*background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;*/
	animation: myAnim 1s ease 0s 1 normal forwards;
}
.nav-brand-bar{
	background:var(--white);
	padding:15px 0px;
	color:var(--black);
	font-weight:700;
	font-size:25px;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;*/
}
.nav-brand-bar .bar a{
	color:var(--grey);
	font-size:25px;
	margin-right:30px;
}
.nav-brand-bar img{
	height:35px;
	margin-right:10px;
}

.nav-search{
	background:var(--white);
	padding:7px;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;*/
}
.nav-area{
	background:var(--white);
	padding:7px;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;*/
	text-align:right;
}
.nav-area a{
	color:var(--grey);
}
.nav-stores{
	float:right;
}
.btn-close{
	color:black;
}
.side-cat{
	font-weight:700;
}
.side-cat:hover, .side-sub-cat:hover{
	color:var(--orange-dark);
}
.offcanvas-title{
	font-size:18px;
	font-weight:700;
}
.offc-login-button{
	margin-bottom:20px;
}
.offc-pdc-name{
	margin-bottom:15px;
	font-size:16px;
	font-weight:700;
}
.offc-pdc-name a{
	color:var(--orange-dark);
}
.side-cat{
	margin-top:10px;
	margin-left:20px;
}
.side-sub-cat{
	margin-left:30px;
	margin-top:10px;
	font-size:14px;
}
.side-cat-ch{
	margin-top:10px;
	margin-left:30px;
}
.side-sub-cat-ch{
	margin-left:40px;
	margin-top:10px;
	font-size:14px;
}
@media( max-width: 768px){
	.header{
		background:var(--white);
	}
	.nav-brand-bar{
		padding:7px 15px;
		font-size:18px;
	}
	.nav-brand-bar img{
		height:30px;
	}
	.nav-search{
		background:var(--white);
		padding:5px 7px;
	}
	.nav-search .input-group{
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}
	.nav-search ::placeholder{
		color:rgba(0,0,0,0.5);
	}
	.nav-search .input-group-text{
		color:rgba(0,0,0,0.5);
	}
	.nav-area{
		background:var(--white);
		padding:0px 15px 5px 15px;
		text-align:left;
	}
	.nav-area a{
		color:var(--grey);
		font-size:14px;
	}
	.nav-stores{
		float:left;
	}
	.offcanvas-title{
		font-size:16px;
	}
	.offc-pdc-name{
		font-size:14px;
	}
}