/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

/* Color Variables */
:root {
	--white: #fff;
	--black: #222;
	--green: #545ce4;
	--grey1: #abbcbf;
	--grey2: #d1f1ee;
}

/* Basic Reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
	background-color: var(--white);
	color: var(--black);
	font-weight: 400;
	font-style: normal;
}

a {
	text-decoration: none;
	color: var(--black);
}

li {
	list-style: none;
}

.container {
	max-width: 114rem;
	margin: 0 auto;
	padding: 0 3rem;
}

.d-flex {
	display: flex;
	align-items: center;
}

/* 
=================
Header
=================
*/

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background: white;
}

.top-nav {
	background-color: var(--green);
	font-size: 1.3rem;
	color: var(--white);
}

.top-nav div {
	justify-content: space-between;
	height: 4.5rem;
}

.top-nav a {
	color: var(--white);
	padding: 0 0.5rem;
}

/* 
=================
Navigation
=================
*/
.navigation {
	height: 6rem;
	line-height: 6rem;
}

.nav-center {
	justify-content: space-between;
}

.nav-list .icons {
	display: none;
}
.nav-list {
	position: relative;
}
.nav-item ul {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}
.nav-list li {
	position: relative;
}

.nav-list li:hover ul {
	background: white;
	opacity: 1;
	padding: 5px;
	box-shadow: 0 0 10px #ddd;
	padding: 10px 10px;
	text-align: left;
	position: absolute;
	z-index: 999;
	width: 250px;
	visibility: visible;
}
.nav-ite ul li a {
	text-align: left;
	display: block;
}
.nav-item:hover ul a:hover {
	color: #545ce4;
	width: 100%;
	text-decoration: underline;
}
/* .nav-item ul {
  display: none;
} */
/* .nav-list .nav-item:hover ul {
  display: block;
  position: absolute;
  background-color: var(--white);
  width: 100%;
  top: 100%;
  left: 0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
} */

.nav-center .nav-item:not(:last-child) {
	margin-right: 0.5rem;
}
.nav-center .nav-item:not(:last-child)::after {
	content: '|';
	margin-inline: 15px;
}

.nav-center .nav-link {
	font-size: 1.8rem;
	padding: 1rem;
}
/* .nav-center .nav-link .nav-dropdown-link {
  font-size: 1rem;
  padding: 10px;
} */

.nav-center .nav-link:hover {
	color: var(--green);
}

.nav-center .hamburger {
	display: none;
	font-size: 2.3rem;
	color: var(--black);
	cursor: pointer;
}

/* Icons */

.icon {
	cursor: pointer;
	font-size: 2.5rem;
	padding: 0 1rem;
	color: #555;
	position: relative;
}

.icon:not(:last-child) {
	margin-right: 0.5rem;
}

.icon span {
	position: absolute;
	top: 3px;
	right: -3px;
	background-color: var(--green);
	color: var(--white);
	border-radius: 50%;
	font-size: 1.3rem;
	height: 2rem;
	width: 2rem;
	justify-content: center;
}

@media only screen and (max-width: 768px) {
	.nav-list {
		position: fixed;
		top: 12%;
		left: -35rem;
		flex-direction: column;
		align-items: flex-start;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
		background-color: white;
		height: 100%;
		width: 0%;
		max-width: 35rem;
		z-index: 100;
		transition: all 300ms ease-in-out;
	}

	.nav-list.open {
		left: 0;
		width: 100%;
	}

	.nav-list .nav-item {
		margin: 0 0 1rem 0;
		width: 100%;
	}

	.nav-list .nav-link {
		font-size: 1rem;
		color: var(--black);
	}

	.nav-center .hamburger {
		display: block;
		color: var(--black);
		font-size: 3rem;
	}

	.icons {
		display: none;
	}

	.nav-list .icons {
		display: flex;
	}

	.top-nav ul {
		display: none;
	}

	.top-nav div {
		justify-content: center;
		height: 3rem;
	}
}

/* 
=================
Hero Area
=================
*/

.hero,
.hero .glide__slides {
	background-color: var(--grey2);
	position: relative;
	height: 600px;
	margin: 0 4rem;
	overflow: hidden;
}

.hero .center {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
	padding-top: 3rem;
}

.hero .left {
	position: absolute;
	top: 30%;
	left: 25rem;
	opacity: 1;
	transition: all 1000ms ease-in-out;
}

.hero .left h1 {
	font-size: 5rem;
	margin: 1rem 0;
}

.hero .left p {
	font-size: 2rem;
	margin-bottom: 1rem;
	font-weight: 300;
}

.hero .left .hero-btn {
	display: inline-block;
	padding: 1rem 3rem;
	font-size: 1.6rem;
	margin-top: 1rem;
	background-color: var(--green);
	color: white;
}

.hero .right {
	/* flex: 0 0 50%;
  height: 100%;
  position: relative;
  text-align: center; */
	display: flex;
	align-items: center;
	justify-content: end;
	width: 700px;
	height: 800px;
	margin-left: 300px;
	margin-top: 20px;
}

.hero .right img {
	/* position: absolute;
  width: 55rem; */
	width: 100%;

	height: 100%;
	transition: all 1000ms ease-in-out;
}

/* .center .right img.img1 {
  width: 100%;
 
} */

.center .right img.img2 {
	width: 90%;
	right: -40%;
	bottom: -40%;
}

.glide__slide--active .center .right img {
	bottom: -3%;
	opacity: 1;
}

.glide__slide--active .left {
	opacity: 1;
	top: 35%;
}

/*
======================
Hero Media Query
======================
*/
@media only screen and (max-width: 1500px) {
	.hero .left {
		left: 0;
	}
}
@media only screen and (max-width: 999px) {
	.glide__slide--active .left {
		top: 15%;
	}

	.center .right img.img1 {
		width: 90%;
	}

	.center .right img.img2 {
		width: 100%;
	}
}

@media only screen and (max-width: 567px) {
	.center .right img.img1 {
		width: 30rem;
	}

	.center .right img.img2 {
		width: 33rem;
	}

	.hero,
	.hero .glide__slides {
		margin: 0;
		padding: 0 3rem;
	}

	.hero .left h1 {
		font-size: 3rem;
	}

	.hero .left span {
		font-size: 1.4rem;
	}
	.hero .left p {
		font-size: 1.5rem;
		width: 80%;
	}
}

/* Category Section */
.section {
	padding: 10rem 0 5rem 0;
	overflow: hidden;
}

.cat-center {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 114rem;
	margin: auto;
	padding: 0 3rem;
}

.cat-center .cat {
	max-width: 37rem;
	height: 25rem;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	text-align: center;
}

.cat-center .cat:not(:last-child) {
	margin-right: 3rem;
}

.cat-center .cat img {
	width: 36.5rem;
	height: 100%;
	margin: auto;
	object-fit: cover;
	transition: all 2s ease;
}

.cat-center .cat:hover img {
	transform: scale(1.1);
}

.cat-center .cat div {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--white);
	width: 18rem;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
}

@media only screen and (max-width: 1200px) {
	.cat-center .cat img {
		width: 30rem;
	}
}

@media only screen and (max-width: 967px) {
	.cat-center .cat {
		max-width: 25rem;
		height: 20rem;
	}

	.cat-center .cat img {
		width: 25rem;
	}
}

@media only screen and (max-width: 768px) {
	.section {
		padding: 5rem 0;
	}

	.cat-center {
		flex-direction: column;
		padding: 3rem;
	}

	.cat-center .cat {
		max-width: 100%;
		height: 30rem;
	}

	.cat-center .cat:not(:last-child) {
		margin-right: 0rem;
		margin-bottom: 5rem;
	}

	.cat-center .cat img {
		width: 100%;
	}
}

/* New Arrivals */
.title {
	text-align: center;
	margin-bottom: 5rem;
}

.title h1 {
	font-size: 3rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
	font-weight: 500;
}

.product-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 120rem;
	margin: 0 auto;
	padding: 0 2rem;
	gap: 2rem;
}

.product-item {
	position: relative;
	width: 27rem;
	margin: 0 auto;
	margin-bottom: 3rem;
	box-shadow: 3px 3px 25px rgb(193, 191, 191);
	border-radius: 5px;
}
.product-item:hover {
	box-shadow: none;
	transition: 0.2s ease-in-out;
}

.product-thumb img {
	width: 100%;
	height: 31rem;
	object-fit: cover;
	transition: all 500ms linear;
}

.product-info {
	padding: 1rem;
	text-align: center;
	padding: 25px 0;
}

.product-info span {
	display: inline-block;
	font-size: 1.2rem;
	color: #666;
	margin-bottom: 1rem;
}

.product-info a {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 1rem;
	transition: all 300ms ease;
}

.product-info a:hover {
	color: var(--green);
}

.product-item .icons {
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}

.product-item .icons li {
	background-color: var(--white);
	text-align: center;
	padding: 1rem 1.5rem;
	font-size: 2.3rem;
	cursor: pointer;
	transition: 300ms ease-out;
	transform: translateY(20px);
	visibility: hidden;
	opacity: 0;
}

.product-item .icons li:first-child {
	transition-delay: 0.1s;
}

.product-item .icons li:nth-child(2) {
	transition-delay: 0.2s;
}

.product-item .icons li:nth-child(3) {
	transition-delay: 0.3s;
}

.product-item:hover .icons li {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.product-item .icons li:not(:last-child) {
	margin-right: 0.5rem;
}

.product-item .icons li:hover {
	background-color: var(--green);
	color: var(--white);
}

.product-item .overlay {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
}

.product-item .overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: 300ms ease-out;
}

.product-item:hover .overlay::after {
	visibility: visible;
	opacity: 1;
}

.product-item:hover .product-thumb img {
	transform: scale(1.1);
}

.product-item .discount {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background-color: var(--green);
	padding: 0.5rem 1rem;
	color: var(--white);
	border-radius: 2rem;
	font-size: 1.5rem;
}

@media only screen and (max-width: 567px) {
	.product-center {
		max-width: 100%;
		padding: 0 1rem;
	}

	.product-item {
		width: 40%;
		margin-bottom: 3rem;
	}

	.product-thumb img {
		height: 20rem;
	}

	.product-item {
		margin-right: 2rem;
	}

	.product-item .icons li {
		padding: 0.5rem 1rem;
		font-size: 1.8rem;
	}
}

/* Banner */

.banner {
	position: relative;
	background-color: var(--grey2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.banner .right {
	width: 400px;
	height: 500px;
	margin-left: 200px;
	margin-bottom: 10px;
}

.banner .right img {
	width: 100%;
	height: 100%;
}

.banner .trend,
.banner p {
	display: block;
	font-size: 2rem;
	font-weight: 300;
	margin-bottom: 1.5rem;
}

.banner h1 {
	font-size: 5.4rem;
	color: var(--black);
	margin-bottom: 1.5rem;
}

.banner .btn {
	display: inline-block;
	margin-top: 2rem;
}

@media only screen and (max-width: 1500px) {
	.banner {
		padding: 14rem;
	}

	.banner .right img {
		right: 3rem;
		width: 70rem;
	}
}

@media only screen and (max-width: 996px) {
	.banner {
		padding: 8rem 2rem;
	}

	.banner .trend,
	.banner p {
		font-size: 1.5rem;
	}

	.banner h1 {
		font-size: 4rem;
	}

	.banner .right img {
		right: -6%;
		width: 50rem;
	}
}

@media only screen and (max-width: 768px) {
	.banner {
		display: grid;
		grid-template-columns: 1fr;
		height: 80vh;
	}

	.banner .left {
		width: 100%;
		margin-bottom: 3rem;
	}

	.banner .right {
		flex: 0 0 50%;
	}

	.banner .right img {
		right: 0;
		width: 50rem;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media only screen and (max-width: 567px) {
	.banner {
		padding: 8rem 5rem;
	}

	.banner .trend,
	.banner p {
		font-size: 1.3rem;
		margin-bottom: 1rem;
	}

	.banner h1 {
		font-size: 3rem;
		margin-bottom: 1rem;
	}

	.banner .btn {
		padding: 0.8rem 1.7rem;
		font-size: 1.4rem;
	}

	.banner .right img {
		width: 45rem;
	}
}

/* Contact */
.contact {
	background-color: var(--black);
	color: var(--white);
	padding: 10rem 20rem;
}

.contact .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.contact .row .col h2 {
	margin-bottom: 1.5rem;
}

.contact .row .col p {
	width: 70%;
	margin-bottom: 2rem;
}

.btn-1 {
	background-color: var(--green);
	color: var(--white);
	display: inline-block;
	border-radius: 1rem;
	padding: 1rem 2rem;
}
.btn-1:hover {
	background-color: #045b64;
	color: var(--white);
}

.contact form div {
	position: relative;
	width: 80%;
	margin: 0 auto;
}

.contact form input {
	font-family: 'Roboto', sans-serif;
	text-indent: 2rem;
	width: 100%;
	border-radius: 1rem;
	padding: 1.5rem 0;
	outline: none;
	border: none;
}

.contact form a {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--green);
	color: white;
	margin: 0.5rem;
	padding: 1rem 3rem;
	border-radius: 1rem;
}

@media only screen and (max-width: 996px) {
	.contact {
		padding: 8rem 8rem;
	}
}

@media only screen and (max-width: 768px) {
	.contact .row {
		grid-template-columns: 1fr;
		gap: 5rem 0;
	}

	.contact form div {
		width: 100%;
	}
}

@media only screen and (max-width: 567px) {
	.contact {
		padding: 8rem 1rem;
	}
}

/* Footer */
.footer {
	padding: 7rem 1rem;
	background-color: var(--green);
}

footer .row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	max-width: 99.6rem;
	margin: 0 auto;
}

.footer .col {
	flex-direction: column;
	color: var(--white);
	align-items: flex-start;
}

.footer .col:last-child {
	flex-direction: row;
	justify-content: center;
}

.footer .col:last-child span {
	font-size: 2.5rem;
	margin-right: 0.5rem;
	color: var(--white);
}

.footer .col a {
	color: var(--white);
	font-size: 1.5rem;
	padding: 0.5rem;
	font-weight: 300;
}

.footer .col h4 {
	margin-bottom: 1rem;
}

@media only screen and (max-width: 567px) {
	footer .row {
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}
}

/* Popup */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	transition: 0.3s;
	transform: scale(1);
}

.popup-content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 110rem;
	margin: 0 auto;
	height: 55rem;
	transform: translate(-50%, -50%);
	padding: 1.6rem;
	display: table;
	overflow: hidden;
	background-color: var(--white);
}

.popup-close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 2rem;
	right: 2rem;
	padding: 0.5rem;
	background-color: var(--green);
	border-radius: 50%;
	cursor: pointer;
}

.popup-close {
	font-size: 3rem;
	color: white;
}

.popup-left {
	display: table-cell;
	width: 50%;
	height: 100%;
	vertical-align: middle;
}

.popup-right {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	padding: 3rem 5rem;
}

.popup-img-container {
	width: 100%;
	overflow: hidden;
}

.popup-img-container img.popup-img {
	display: block;
	width: 60rem;
	height: 45rem;
	max-width: 100%;
	border-radius: 1rem;
	object-fit: cover;
}

.right-content {
	text-align: center;
	width: 85%;
	margin: 0 auto;
}

.right-content h1 {
	font-size: 4rem;
	color: #000;
	margin-bottom: 1.6rem;
}

.right-content h1 span {
	color: var(--green);
}

.right-content p {
	font-size: 1.6rem;
	color: #555;
	margin-bottom: 1.6rem;
}

.popup-form {
	width: 100%;
	padding: 1.5rem 0;
	text-indent: 1rem;
	margin-bottom: 1.6rem;
	border-radius: 3rem;
	background-color: var(--green);
	color: white;
	font-size: 1.8rem;
	border: none;
}

.popup-form::placeholder {
	color: white;
}

.popup-form:focus {
	outline: none;
}

.right-content a:link,
.right-content a:visited {
	display: inline-block;
	padding: 1.8rem 5rem;
	border-radius: 3rem;
	font-weight: 700;
	color: var(--white);
	background-color: var(--black);
	border: 1px solid var(--grey2);
	transition: 0.3s;
}

.right-content a:hover {
	background-color: var(--green);
	border: 1px solid var(--grey2);
	color: var(--black);
}

.hide-popup {
	transform: scale(0.2);
	opacity: 0;
	visibility: hidden;
}

@media only screen and (max-width: 1200px) {
	.right-content {
		width: 100%;
	}

	.right-content h1 {
		font-size: 3.5rem;
		margin-bottom: 1.3rem;
	}
}

@media only screen and (max-width: 998px) {
	.popup-right {
		width: 100%;
	}

	.popup-left {
		display: none;
	}

	.right-content h1 {
		font-size: 5rem;
	}
}

@media only screen and (max-width: 768px) {
	.right-content h1 {
		font-size: 4rem;
	}

	.right-content p {
		font-size: 1.6rem;
	}

	.popup-form {
		width: 90%;
		margin: 0 auto;
		padding: 1.8rem 0;
		margin-bottom: 1.5rem;
	}

	.goto-top:link,
	.goto-top:visited {
		right: 5%;
		bottom: 5%;
	}
}

@media only screen and (max-width: 568px) {
	.popup-right {
		padding: 0 1.6rem;
	}

	.popup-content {
		height: 35rem;
		width: 90%;
		margin: 0 auto;
	}

	.right-content {
		width: 100%;
	}

	.right-content h1 {
		font-size: 3rem;
	}

	.right-content p {
		font-size: 1.4rem;
	}

	.popup-form {
		width: 100%;
		padding: 1.5rem 0;
		margin-bottom: 1.3rem;
	}

	.right-content a:link,
	.right-content a:visited {
		padding: 1.5rem 3rem;
	}

	.popup-close {
		top: 1rem;
		right: 1rem;
		padding: 0.5rem;
	}
}

/* All Products */
.section .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4rem;
}

.all-products .top select {
	font-family: 'Poppins', sans-serif;
	width: 20rem;
	padding: 1rem;
	border: 1px solid #ccc;
	appearance: none;
	outline: none;
}

form {
	position: relative;
	z-index: 1;
}

form span {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	font-size: 2rem;
	z-index: 0;
}

@media only screen and (max-width: 768px) {
	.all-products .top select {
		width: 15rem;
	}
}

/* Pagination */
.pagination {
	display: flex;
	align-items: center;
	padding: 3rem 0 5rem 0;
}

.pagination span {
	display: inline-block;
	padding: 1rem 1.5rem;
	border: 1px solid var(--green);
	font-size: 1.8rem;
	margin-bottom: 2rem;
	cursor: pointer;
	transition: all 300ms ease-in-out;
}

.pagination span:hover {
	border: 1px solid var(--green);
	background-color: var(--green);
	color: #fff;
}

/* Cart Items */
.cart {
	margin: 10rem auto;
}

table {
	width: 100%;
	border-collapse: collapse;
}

.cart-info {
	display: flex;
	flex-wrap: wrap;
}

th {
	text-align: left;
	padding: 10px;
	color: #fff;
	background-color: var(--green);
	font-weight: normal;
}

td {
	padding: 1rem 0.5rem;
}

td input {
	width: 5rem;
	height: 3rem;
	padding: 0.5rem;
}

td a {
	color: orangered;
	font-size: 1.4rem;
}

td img {
	width: 8rem;
	height: 8rem;
	margin-right: 1rem;
}

.total-price {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	margin-top: 2rem;
}

.total-price table {
	border-top: 3px solid var(--green);
	width: 100%;
	max-width: 35rem;
}

td:last-child {
	text-align: right;
}

th:last-child {
	text-align: right;
}

.checkout {
	display: inline-block;
	background-color: var(--green);
	color: white;
	padding: 1rem;
	margin-top: 1rem;
}

@media only screen and (max-width: 567px) {
	.cart-info p {
		display: none;
	}
}

/* Product Details */
.product-detail .details {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 7rem;
}

.product-detail .left {
	display: flex;
	flex-direction: column;
}

.product-detail .left .main {
	text-align: center;
	background-color: #f6f2f1;
	margin-bottom: 2rem;
	height: 45rem;
}

.product-detail .left .main img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.product-detail .right span {
	display: inline-block;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.product-detail .right h1 {
	font-size: 4rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.product-detail .right .price {
	font-size: 600;
	font-size: 2rem;
	color: var(--green);
	margin-bottom: 2rem;
}

.product-detail .right div {
	display: inline-block;
	position: relative;
	z-index: -1;
}

.product-detail .right select {
	font-family: 'Poppins', sans-serif;
	width: 20rem;
	padding: 0.7rem;
	border: 1px solid #ccc;
	appearance: none;
	outline: none;
}

.product-detail form {
	margin-bottom: 2rem;
	z-index: 0;
}

.product-detail form span {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	font-size: 2rem;
	z-index: 0;
}

.product-detail .form {
	margin-bottom: 3rem;
}

.product-detail .form input {
	padding: 0.8rem;
	text-align: center;
	width: 3.5rem;
	margin-right: 2rem;
}

.product-detail .form .addCart {
	background: var(--green);
	padding: 0.8rem 4rem;
	color: #fff;
	border-radius: 3rem;
}

.product-detail h3 {
	text-transform: uppercase;
	margin-bottom: 2rem;
}

@media only screen and (max-width: 996px) {
	.product-detail .left {
		width: 30rem;
		height: 45rem;
	}

	.product-detail .details {
		gap: 3rem;
	}
}

@media only screen and (max-width: 650px) {
	.product-detail .details {
		grid-template-columns: 1fr;
	}

	.product-detail .right {
		margin-top: 1rem;
	}

	.product-detail .left {
		width: 100%;
		height: 45rem;
	}

	.product-detail .details {
		gap: 3rem;
	}
}

/* Login Form */
.login-form {
	padding: 5rem 0;
	max-width: 50rem;
	margin: 5rem auto;
}

.login-form form {
	display: flex;
	flex-direction: column;
}

.login-form form h1 {
	margin-bottom: 1rem;
}
.login-form form p {
	margin-bottom: 2rem;
}

.login-form form label {
	margin-bottom: 1rem;
}

.login-form form input {
	border: 1px solid #ccc;
	outline: none;
	padding: 1.5rem 0;
	text-indent: 1rem;
	font-size: 1.6rem;
	margin-bottom: 2rem;
	border-radius: 0.5rem;
}

.login-form form input::placeholder {
	font-size: 1.6rem;
	color: #222;
}

.login-form form .buttons {
	margin-top: 1rem;
}

.login-form form button {
	outline: none;
	border: none;
	font-size: 1.6rem;
	padding: 1rem 3rem;
	margin-right: 1.5rem;
	background-color: var(--green);
	color: white;
	cursor: pointer;
}

.login-form form p a {
	color: dodgerblue;
}

.logo.svelte-1vl3wa1.svelte-1vl3wa1{width:50px;height:50px;display:flex;align-items:center;margin-right:160px}.logo.svelte-1vl3wa1 img.svelte-1vl3wa1{width:100%;height:100%}
.success.svelte-1j097dz{position:absolute;top:10px;left:10px;background:#4caf50;color:#fff;padding:5px 10px;border-radius:5px;font-size:12px}
.cart-item-remove-btn.svelte-9r97vg{background:transparent;border:none;color:red;cursor:pointer}
.btn-checkout.svelte-r87t1s.svelte-r87t1s{background-color:#045b64;color:white;border:none;border-radius:5px;padding:10px 20px;font-size:16px;font-weight:500;cursor:pointer;display:block;width:100%;margin-top:30px}.content.svelte-r87t1s.svelte-r87t1s{display:flex;justify-content:space-between;max-width:1000px;margin:0 auto}.checkout-form.svelte-r87t1s.svelte-r87t1s{width:50%}.qty.svelte-r87t1s.svelte-r87t1s{margin-top:10px;font-size:12px;font-weight:500;color:#828282}form.svelte-r87t1s h6.svelte-r87t1s{font-size:25px;font-weight:500}.form-control.svelte-r87t1s.svelte-r87t1s{margin:10px 0px;position:relative}label.svelte-r87t1s.svelte-r87t1s:not([for='checkout-checkbox']){display:block;font-size:10px;font-weight:500;margin-bottom:2px}input.svelte-r87t1s.svelte-r87t1s:not([type='checkbox']){width:100%;padding:10px 10px 10px 40px;border-radius:10px;outline:none;border:0.2px solid #4e515085;font-size:12px;font-weight:700}input.svelte-r87t1s.svelte-r87t1s:not([type='checkbox'])::placeholder{font-size:12px;font-weight:500}.form-control.svelte-r87t1s label.svelte-r87t1s{font-size:14px;font-weight:300;margin-bottom:10px}.form-control.svelte-r87t1s>div.svelte-r87t1s{position:relative}.form-group.svelte-r87t1s.svelte-r87t1s{display:flex;column-gap:25px}.form-control-btn.svelte-r87t1s.svelte-r87t1s{display:flex;align-items:center;justify-content:flex-end;color:#fff}.form-control-btn.svelte-r87t1s button.svelte-r87t1s{padding:10px 25px;font-size:16px;color:#fff;background-color:var(--green);border:0;border-radius:7px;letter-spacing:0.5px;font-weight:200;cursor:pointer}.form-control-btn.svelte-r87t1s button.svelte-r87t1s:hover{background-color:#045b64}.checkout-details.svelte-r87t1s.svelte-r87t1s{width:40%}.order-summary.svelte-r87t1s h1.svelte-r87t1s{font-size:25px;font-weight:500;margin-bottom:30px}.checkout-details-inner.svelte-r87t1s.svelte-r87t1s{background:#f2f2f2;border-radius:10px;padding:20px}.checkout-lists.svelte-r87t1s.svelte-r87t1s{display:flex;flex-direction:column;row-gap:15px;margin-bottom:40px}.card.svelte-r87t1s.svelte-r87t1s{width:100%;display:flex;column-gap:15px}.card-image.svelte-r87t1s.svelte-r87t1s{width:150px;height:200px}.card-image.svelte-r87t1s img.svelte-r87t1s{width:100%;height:100%;object-fit:fill;border-radius:10px}.card-details.svelte-r87t1s.svelte-r87t1s{display:flex;flex-direction:column}.card-name.svelte-r87t1s.svelte-r87t1s{font-size:16px;font-weight:400}.card-price.svelte-r87t1s.svelte-r87t1s{font-size:14px;font-weight:500;color:#f2994a;margin-top:5px}.checkout-shipping.svelte-r87t1s.svelte-r87t1s,.checkout-total.svelte-r87t1s.svelte-r87t1s{display:flex;padding:5px 0px;border-top:1px solid #bdbdbd;justify-content:space-between}.checkout-shipping.svelte-r87t1s h5.svelte-r87t1s,.checkout-total.svelte-r87t1s h5.svelte-r87t1s{font-size:18px;font-weight:400}.checkout-total.svelte-r87t1s p.svelte-r87t1s{font-size:16px;font-weight:500}@media screen and (max-width: 768px){.content.svelte-r87t1s.svelte-r87t1s{flex-direction:column;height:auto;margin-bottom:50px;padding:5px}.checkout-form.svelte-r87t1s.svelte-r87t1s{width:100%;margin-top:35px}.checkout-details.svelte-r87t1s.svelte-r87t1s{width:100%}}
.contact-container.svelte-xqnql4{max-width:114rem;margin:0 auto}.content.svelte-xqnql4{box-shadow:20px 7px 32px  #cccc;border-top-left-radius:25px;border-bottom-left-radius:25px;display:flex;align-items:center;justify-content:space-between}.right-col.svelte-xqnql4{width:450px;height:600px}.right-image.svelte-xqnql4{width:100%;height:100%}.left-col.svelte-xqnql4{display:flex;flex-direction:column;justify-content:center;width:400px;height:600px}#contact-form.svelte-xqnql4{display:flex;flex-direction:column;gap:1rem}input.svelte-xqnql4,textarea.svelte-xqnql4{color:#010712;font-weight:500;background:#FCFDFD;border:none;border-bottom:1px solid #818386;padding:0.5rem 0;margin-bottom:1rem;outline:none}h1.svelte-xqnql4{color:#3F444C;text-transform:uppercase;font-size:4.5rem;letter-spacing:0.5rem;font-weight:300;margin-bottom:3rem}textarea.svelte-xqnql4{resize:none}button.svelte-xqnql4{text-transform:uppercase;font-weight:300;background:#3B3636;color:#FCFDFD;width:100%;height:5.25rem;border:none;border-radius:5px;outline:none;cursor:pointer;margin-top:5px}input.svelte-xqnql4:hover,textarea.svelte-xqnql4:hover,button.svelte-xqnql4:hover{opacity:0.5}button.svelte-xqnql4:active{opacity:0.8}label.svelte-xqnql4{font-size:2rem;margin:0.25rem 0}@media only screen and (max-width: 768px){.content.svelte-xqnql4{flex-direction:column;padding:5px;box-shadow:none}.right-col.svelte-xqnql4{margin-top:4rem;width:100%;height:400px}.left-col.svelte-xqnql4{width:100%;height:400px}h1.svelte-xqnql4{font-size:3rem;margin-bottom:1rem}input.svelte-xqnql4,textarea.svelte-xqnql4{width:100%}button.svelte-xqnql4{width:100%;height:3.5rem}}
h1.svelte-1skoslh.svelte-1skoslh,h2.svelte-1skoslh.svelte-1skoslh{text-align:center}.order-summary.svelte-1skoslh table.svelte-1skoslh{width:100%;border-collapse:collapse;margin-bottom:20px}.order-summary.svelte-1skoslh th.svelte-1skoslh,.order-summary.svelte-1skoslh td.svelte-1skoslh{padding:10px;text-align:left}.order-summary.svelte-1skoslh th.svelte-1skoslh{background-color:#8e8e8e}.customer-info.svelte-1skoslh.svelte-1skoslh{margin-bottom:20px}.info-row.svelte-1skoslh.svelte-1skoslh{display:flex;align-items:center;margin-bottom:10px}.info-label.svelte-1skoslh.svelte-1skoslh{width:120px;font-weight:bold}.info-value.svelte-1skoslh.svelte-1skoslh{flex-grow:1}th.svelte-1skoslh.svelte-1skoslh,td.svelte-1skoslh.svelte-1skoslh{text-align:left;border-bottom:1px solid #ddd}
.container.svelte-dzd1gu{height:650px}.my-sp.svelte-dzd1gu{margin-bottom:20px}table.svelte-dzd1gu{width:100%;border-collapse:collapse}th.svelte-dzd1gu,td.svelte-dzd1gu{padding:8px;text-align:left;border-bottom:1px solid #ddd}th.svelte-dzd1gu{background-color:#5d5d5d}tr.svelte-dzd1gu{padding:5px}tr.svelte-dzd1gu:hover{background-color:#f5f5f5}
.success.svelte-1ivfy2q.svelte-1ivfy2q{color:green;position:absolute;top:0;right:0;font-size:14px;display:flex;align-items:center;gap:5px;z-index:1}.flex-box.svelte-1ivfy2q.svelte-1ivfy2q{display:flex;justify-content:space-between;gap:80px;width:1000px;margin:20px auto;position:relative}.left.svelte-1ivfy2q.svelte-1ivfy2q{width:40%}.big-img.svelte-1ivfy2q.svelte-1ivfy2q{width:100%}.big-img.svelte-1ivfy2q img.svelte-1ivfy2q{width:inherit}.right.svelte-1ivfy2q.svelte-1ivfy2q{display:flex;flex-direction:column}.pname.svelte-1ivfy2q.svelte-1ivfy2q{font-size:22px;font-weight:600;margin-top:20px}.pdescription.svelte-1ivfy2q.svelte-1ivfy2q{font-size:16px;margin-top:20px}.ratings.svelte-1ivfy2q i.svelte-1ivfy2q{color:rgb(255, 136, 0);margin-top:20px}.price.svelte-1ivfy2q.svelte-1ivfy2q{font-size:24px;font-weight:500;margin:20px 0;margin-left:5px}.btn-box.svelte-1ivfy2q.svelte-1ivfy2q{display:flex;margin-top:40px;gap:20px}.btn-box.svelte-1ivfy2q button.svelte-1ivfy2q{font-size:18px;padding:8px 25px;border:none;outline:none;border-radius:6px;cursor:pointer;color:white}@media only screen and (max-width: 768px){.flex-box.svelte-1ivfy2q.svelte-1ivfy2q{flex-direction:column;width:100%;padding:5px}.left.svelte-1ivfy2q.svelte-1ivfy2q{width:100%}.right.svelte-1ivfy2q.svelte-1ivfy2q{width:100%;margin-top:20px}.big-img.svelte-1ivfy2q.svelte-1ivfy2q{width:100%}.pname.svelte-1ivfy2q.svelte-1ivfy2q{font-size:24px}.pdescription.svelte-1ivfy2q.svelte-1ivfy2q{font-size:18px}.price.svelte-1ivfy2q.svelte-1ivfy2q{font-size:22px}.btn-box.svelte-1ivfy2q.svelte-1ivfy2q{display:flex;gap:10px;align-items:center;justify-content:center}.btn-box.svelte-1ivfy2q button.svelte-1ivfy2q{font-size:16px;padding:8px 20px;margin:10px 0}}
.about.svelte-1ovbjdm{padding-top:100px;margin:auto 0;text-align:center}.section-title.svelte-1ovbjdm{margin-bottom:20px;font-size:34px}.section-text.svelte-1ovbjdm{margin-block:12px 45px}