@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&family=Saira+Semi+Condensed:wght@700&display=swap");

:root {
	--head-font: "Saira Semi Condensed", sans-serif;
	--text-font: "Quicksand", sans-serif;
	--primary-color: #006400;
	--secondary-color: #70e000;
	--color-white: #fff;
}
.cart-btn {
	position: fixed	 !important;
	right: 1rem !important;
	top: 50% !important;
	width: 70px;
	height: 70px;		
	font-size: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255);
	box-shadow: 1px 1px 10px 1px rgba(97, 97, 97, 0.2);
	transition: .5s;
}

.cart-btn:hover,.cart-btn:active{
	transform: scale(0.9);
	transition: .5s;
	background-color: rgba(145, 145, 145, 0.2);
}

.cart-button  {
	color: white !important;
	position: fixed;
}
.badgeCart {
	position: absolute;
	top: -12px;
	right: -6px;
	font-size: 2rem;
	background-color: var(--primary-color);
	color: var(--color-white);
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 50%;
	font-family: var(--text-font);
}

.cart {
	width: 50%;
	height: 100vh;
	background-color: white;
	position: fixed !important;
	right: 0;
	top: 0;
	z-index: 10000;
	transition: .3s;
}

.cart.hidden {
	visibility: hidden !important;
}

.close-cart {
	background-color: rgb(228, 227, 227);
	position: absolute;
	right: 5rem;
	top: 4rem;
	border: none;
	font-size: 2rem;
	height: 3.5rem;
	width: 3.5rem;
	border-radius: 50%;
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-cart:hover {
	transform: scale(0.9);
	transition: 0.3s;
	background-color: rgb(252, 249, 249);
}

.cart-content {
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
	padding: 5rem 3rem;
}

.cart-no-item {
	width: 100%;
	text-align: center;
	font-size: 3.5rem;
	margin: 0 auto;
	margin-top: 45%;
	font-family: var(--text-font);
}

.cart-head h3 {
	font-size: 3rem;
	font-family: var(--head-font);
}

.cart-items {
	height: 80%;
	width: 100%;
	overflow-y: scroll;
}

.cart-items.hidden {
	display: none;
}

.cart-item {
	width: 100%;
	height: 13rem;
	background-color: lavender;
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	gap: 0.5rem;
}

.cart-item .img-cont {
	width: 20%;
	height: 100%;
	background-color: black;
}

.cart-item .img-cont img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	object-position: center;
}

.cart .name-cont {
	width: 40%;
	height: 100%;
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--text-font);
	font-weight: 900;
	text-transform: uppercase;
}
.cart .number-cont {
	width: 20%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart .price-cont {
	width: 20%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

.cart .number-cont .add-subtract {
	width: 90%;
	height: fit-content;
	background-color: rgb(240, 249, 230);
	border-radius: 30px;
	display: flex;
	border-radius: 20px;
}

.cart .number-cont .add-subtract > div {
	font-size: 2rem;
	width: 33.33%;
	justify-content: center;
	display: flex;
	align-items: center;
}

.cart .number-cont .add-subtract > .oparation {
	font-size: 2rem;
	cursor: pointer;
}

.cart .price-cont .remove {
	font-size: 1.5rem;
	text-decoration: underline !important;
	font-family: var(--text-font);
	color: red;
}

.cart.hidden {
	visibility: hidden;
}

.cart-no-item.hidden {
	display: none;
}

.cart-total {
	height: 15%;
	font-size: 2rem;
	padding: 0rem 4rem;
	display: flex;
	align-items: center;
	
}

.total{
	width: 40%;
	font-family: var(--text-font);
}

.total-text{
	margin: 0;
	font-size: 2rem;
	color: #000;
	font-family: var(--text-font);
}

.total-price{
	margin: 0;
	font-size: 2.6rem;
	font-family: var(--head-font);
	color: var(--primary-color);
}

.checkout-cont{
	margin-left: auto;
	display: flex;
	align-items: center;
	width: 50%;
	justify-content: center;
}
.checkout_btn{
	background-color: var(--primary-color);
	color: white;
	padding: 0.5rem 2.6rem;
	font-size: 1.6rem;
	margin-left: auto;
	margin-top: 2rem;
	transition: .5s;
	font-family: var(--head-font);
}

.checkout_btn:hover{
	background-color: rgba(0,100,0,0.9);
	transition: .5s;
	transform: scale(0.95);
}

.cart-total.hidden{
	visibility: hidden;
}