: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;
}


body{
	background:var(--red-xxl-light);
}
a{
	color:var(--black);
	text-decoration:none;
}
a:hover{
	color:var(--red-dark);
}


.btn-imp{
	min-width:150px;
	background: var(--red);
	color:var(--white-orange);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:none;
	border-radius:var(--border-radius);
	
}
.btn-imp:hover{
	background: var(--red-dark);
}
.btn-nrm{
	min-width:150px;
	background: var(--red-x-light);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:none;
	border-radius:var(--border-radius);
}
.btn-nrm:hover{
	background: var(--red-xx-light);
}
.btn-igr{
	min-width:150px;
	background: var(--white);
	color:var(--red-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;
	}
}


.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-orange);
	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-orange);
	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{
	background:var(--red);
	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(--red);
	padding:10px 0px;
	color:var(--white-orange);
	font-weight:700;
	font-size:30px;
	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(--white-orange);
	font-size:30px;
	margin-right:20px;
}
.nav-brand-bar img{
	height:45px;
	margin-right:10px;
	border-radius:50%;
}

.nav-search{
	background:var(--red);
	padding:10px;
	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(--red);
	padding:10px;
	color:var(--red-x-light);
	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 a{
	color:var(--red-x-light);
}
.nav-stores{
	float:right;
}
.btn-close{
	color:black;
}
.side-cat{
	font-weight:700;
}
.side-cat:hover, .side-sub-cat:hover{
	color:var(--red-dark);
}
@media( max-width: 768px){
	.header{
		background:none;
	}
	.nav-brand-bar{
		padding:10px 15px;
		font-size:20px;
	}
	.nav-brand-bar img{
		height:35px;
	}
	.nav-search{
		background:none;
	}
	.nav-area{
		background:none;
		padding:0px 15px;
		color:var(--grey);
	}
	.nav-area a{
		color:var(--red-dark);
	}
	.nav-stores{
		float:left;
	}
}