* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	font-family: 'Poppins', sans-serif;
	
	
	/*
	background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url("pics/mainbg.jpg");
	 Set a specific height */
	background-image:  url(pics/mainbg2.jpg);
	min-height: 500px; 
  
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;

	min-height: 100vh;
    display: flex;
    flex-direction: column;
	margin: 0;

	
}

.navbar{
	display: flex;
	align-items: center;
	padding: 5px;
}

nav{
	flex: 1;
	text-align: right;
	font-size: 18px;
	z-index: 1;
}

nav ul{
	display: inline-block;
	list-style-type: none;
	z-index: 1;
}

nav ul li{
	display: inline-block;
	margin-right: 20px;
	font-size: 20px;
	z-index: 1;
}

a{
	text-decoration: none;
	color: #353635;
	z-index: 1;
}

nav a:hover {
	color: #bb4927;
	background-color: transparent;
  }

p{
	color: #555;
}

.container {
	max-width: 1300px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
}

.container_nav{
	max-width: 1300px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
	
}

.hbg{
	background-color:#f5f5f5;
	box-shadow: 1px 5px 5px #888888;
	position: fixed;
	width: 100%;
	overflow:visible;
	z-index: 5;
	position: relative;
	
}

.row{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content:center;
	justify-items: center;

}

.col-2{
	flex-basis: 50%;
	min-width: 300px;
	transition: transform .2s;
}

.col-2 img{
	max-width: 100%;
	padding: 50px 0;
	
}

.col-2 h1{
	font-size: 50px;
	line-height: 60px;
	margin: 25px 0 ;

}

.btn{
	position: relative;
	background: #459d50;
	color: #fff;
	padding: 8px 90px;
	/* margin: -400px 230px; */
	border-radius: 90px;
	transition: background 0.5s;
	margin-left: 58%;
	/* width: 50%; */
	/* right: 0%; */
}

.btn:hover{
	background: #37ff00;
	color: black;
}

.header .row{
	margin-top: 0px ;
	
}
  
.small-container{
	max-width: 1300px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
}

.col-4{
	flex-basis: 10%;
	padding: 0px;
	min-width: 200px;
	margin-bottom: 50px;
	transition: transform 0.5s;		
}

.col-4 img{
	width: 100%;
	cursor: pointer;
	border-radius: 25px;
}

.col-4:hover{
	transform: translateY(-10px);
}
 
.title{
	position: relative;
	text-align: center;
	margin: 0 auto 80px;
	line-height: 60px;
	color: #555;
	z-index: -1;

}

.title::after{
	content:'';
	background: #5fc96d;
	width: 80px;
	height: 5px;
	border-radius: 5px;
	position: absolute;
	bottom: 0;
	transform: translateX(-125%);
	z-index: -1;
}

.h4{
	color: #555;
	font-weight: normal;
}

.rating .fa{
	color: #ff1100;
}

.col-4 p{
	font-size: 14px;
}

.col-8{
	margin-top: 0px;
	flex-basis: auto;
	min-width: 300px;
	
	
}

.col-8 img{

	max-width: 100%;
	margin: auto;
}

/*----------testimonial------------*/
.testimonial{
	padding: 100px 100px;
}
.testimonial .col-3{
	text-align: center;
	padding: 40px 20px;
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: transform .5s;
	margin: 10px;
	
	
}

.testimonial h2{
	text-align: center;
	color: #555;
	z-index: 1000;
}
.testimonial h4{
	text-align: center;
	margin-top: 10px;
	font-size: 20px;
	color: #555;
	z-index: 1000;
}

.testimonial h3{
	text-align: center;
	margin-top: 17px;
	font-size: x-large;
	color: #555;
	z-index: 1000;
}

.testimonial .col-3 img{
	width: 50%;
	margin-top: 20px;
	border-radius: 50%;
}

.testimonial .col-3:hover{
	transform: translateY(-10px);
}

.col-3{
	flex-basis: 30%;
	min-width: 300px;
	min-height: 300px;
	background-color: white;
}


/*----------brands------------*/
.brands{
	margin: 60px auto;
}

.col-5{
	width: 160px;
	text-align: center;
}

.col-5 img{
	width: 100%;
	height: 80px;
	object-fit: contain;
	cursor: pointer;
	filter: grayscale(100%);
	vertical-align: middle;
}

.col-5 img:hover{
	filter: grayscale(0)
}



 
  /*FOOTER */
  footer {
	background-color: #2d5a30;
	color: #ffffff;
	padding: 30px 40px 20px;
	text-align: center;
	position: relative;
	bottom: 0;
	width: 100%;
}

.footer-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1300px;
	margin: 0 auto;
	gap: 20px;
}

.footer-section {
	flex: 1;
	padding: 10px;
	min-width: 180px;
	text-align: left;
}

.footer-section h3 {
	color: #a8e6a3;
	margin-bottom: 12px;
	font-size: 1rem;
}

.footer-section p {
	color: #e8f5e8;
	line-height: 1.5;
	margin-bottom: 6px;
	font-size: 0.9rem;
}

.footer-section a {
	color: #e8f5e8;
	text-decoration: none;
	transition: color 0.3s ease;
	font-size: 0.9rem;
}

.footer-section a:hover{
	color: #a8e6a3;
}

.footer-section ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
}

.footer-section ul li {
	margin-bottom: 6px;
}

.footer-section ul li a {
	display: block;
}

.copyright {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #4a7a4d;
	color: #a8e6a3;
	font-size: 0.85rem;
}

@media (max-width: 800px) {
	footer {
		padding: 25px 20px 15px;
	}
	
	.footer-container {
		flex-direction: column;
		gap: 20px;
	}
	
	.footer-section {
		flex: 100%;
		text-align: center;
		padding: 10px;
	}
	
	.footer-section ul li {
		text-align: center;
	}
}
 
  /*----------Products------------*/
.row-2{
	justify-content: space-between;
	margin: 100px auto 50px;
	margin-left: 100px;
	margin-right: 100px;
}

select{
	border: 2px solid #69cf4a ;
	padding: 5px;
}

select:focus{
	outline: none;
}

.line{
	width: 180px;
	height: 5px;
	background: #69cf4a;
}

.page-btn{
	margin: 0px auto 80px;
	margin-left: 120px;
}

.page-btn span{
	display: inline-block;
	border: 1px solid #69cf4a;
	margin left: 10px;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
}


.page-btn span:hover{
	background: #69ee64;
	color:cornsilk;
}


.prod{
	margin-top: 20px;
	text-align: center;
	margin-bottom: 50px;
	color: #555;
}

.small-container-details{
	
	max-width: 1300px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
}


/*PRODUCT NERW CSS*/

.single-product{
	margin-top: 80px;
}

.single-product .col-2 img{
	padding: 0;
}

.single-product .col-2{
	padding: 20px;
}

.single-product .h4{
	margin: 20px 0;
	font-size: 22px;
	font-weight: bold;	
}

.small-img-row{
	display: flex;
	justify-content: space-between;
}

.small-img-col{
	flex-basis: 24%;
	cursor: pointer;
}

@media only screen and (max-width: 800px){
	.single-product{
		margin-top: auto;
	}
	
	.single-product .col-2 img{
		padding: 0;
	}
	
	.single-product .col-2{
		padding: 20px;
	}
	
	.single-product .h4{
		margin: 20px 0;
		font-size: 22px;
		font-weight: bold;	
	}
	
	.small-img-row{
		display: flex;
		justify-content: space-between;
	}
	
	.small-img-col{
		flex-basis: 24%;
		cursor: pointer;
		
	}

	.single-product h1{
		margin: auto;
		font-size: 30px;
		
	}
}

.cart_num span{
	color: red;
}



/*-----add to cart button----------*/
#atc{
	display: inline-block;
	background: #69cf4a;
	color: #fff;
	padding: 8px 20px;
	margin: 10px 0px;
	border-radius: 90px;
	transition: background 0.5s;
	
}

.atc:hover{
	background: #69cf4aa6;
}

/*-----single product----------*/
.solo{
	margin-top: 0;
}

.solo .col-2 img{
	padding: 0;
	box-shadow: 5px 5px 20px;
}
.solo .col-2{
	padding: 20px;
}

.solo h4{
	margin: 20px 0;
	font-size: 22px;
	font-weight: bold;
}

/*--.solo select{
	display: block;
	padding: 10px;
	margin-top: 20px;
}
--*/

.solo input{
	width: 75px;
	height: 40px;
	padding-left: 10px;
	font-size: 20px;
	margin-right: 10px;
	border: 1px solid #3d2c19;
	outline: none;
}

/*--cart---*//*
.cart-page{
	margin: 80px auto;
}

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

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

.cart-info img{
	width: 80px;
	height: 80px;
	margin-right: 10px;
}

th{
	text-align: left;
	padding: 5px;
	color:rgb(255, 255, 255);
	background: #8CB402;
	font-weight: normal;
}

td{
	padding: 10px 5px;
	
}

td input{
	width: 60px;
	height: 30px;
	padding: 5px;
	border-radius: 10px;
}

td a{
	color:rgb(255, 0, 0);
	font-size: 12px;
}

td img{
	width: 80px;
	height: 80px;
	margin-right: 10px;
}

.cart-info p{
	text-align: left;
}
.total-price{
	display: flex;
	justify-content: flex-end;

}

.total-price table{
	border-top: 3px solid #8CB402;
	width: 100%;
	max-width: 350px;
}

.total-price td{
	text-align: left;
}
*/

/*CART CSS (2)*/
.cart-container {
	max-width: 100%;
	margin: 50px auto;
	padding: 50px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	
}

.delete-btn{
	color: red;
	margin: auto;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 800px){
	.cart-container{
		max-width: 100%;
		margin: 0;
		padding: 10px;
	}
}


table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

td input{
	width: 60px;
	height: 30px;
	padding: 5px;
	border-radius: 10px;
}

th, td {
	padding: 12px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

th {
	background-color: #f2f2f2;
}

.checkout-btn {
	display: block;
	width: 100%;
	padding: 12px;
	background-color: #4caf50;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

@media only screen and (max-width: 800px) {
	th, td {
		padding: 8px;
		font-size: 14px;
	}

	.checkout-btn {
		padding: 10px;
		font-size: 16px;
	}
}

/*--account login/signup---*/
.account-page{
	display: flex;
	justify-content:center;
	align-items: center;
	padding: 50px;
	margin: auto;
}

@media only screen and (max-width: 700px){
	.account-page{
		display: flex;
		justify-content:center;
		align-items: center;
		padding: 50px;
		margin: 0;
	}

}



.account-page h1{
	text-align:center;
	font-size: 40px;
	margin-bottom: 40px;
	
	
}

.account-page form{

	width: 400px;
	border: 1px solid #ccc;
	padding: 20px;
	border-radius: 15px;
	position: relative;
	background-color: #ffffff;
	margin: auto;
	
}

input[type=text], input[type=password], input[type=email], input[type=number] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


.account-page label {
	color: #888;
	font-size: 18px;
	padding: 10px;
}

.account-page button {
	
	background-color: #69cf4a;
	padding: 10px 15px;
	color: #fff;
	border-radius: 5px;
	border: none;
	width: 100%;
}

.account-page button:hover{
	
}
.hover{
	background-color: #1b9b47;
	color: white;
}
.hover:hover{
	background-color:#69cf4a ;
	color: red;
}

.account-page hr{
	margin: 10px;
	color: #1b9b47;
}

.error {
	background: #F2DEDE;
	color: #A94442;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
 }
 
 .success {
	background: #D4EDDA;
	color: #40754C;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
 }

input[type=file] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
/*----*/
button {
  background-color: #69cf4a;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
 
}

.cancelbtn {
  width: auto;
  padding: 10px 15px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}


/*--about--*/
.col-6 {
	flex-basis: 40%;
	padding: 20px;
	min-width: 500px;
	margin-bottom: 10px;
	text-align: justify;
	width: 100%;

}

.col-6 h1{
	font-weight: normal;
	text-align: center;
	width: 100%;
	
}

.col-6 p{

	width: 100%;
	text-align: start;
}
.col-6 h1{

	width: 100%;
	height: 10%;
	
}
#abg{
	background: #ffffff;
	width: 200px;
	height: 450px;
	border-radius: 15px;
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}

#abg-1{
	background:transparent;
	width: 10%;
	height: auto;
	border-radius: 25px;
	margin-left: 2px;
	font-size: small;
	
}

#abg-2{

	background:transparent;
	position: absolute;
	width: 1px;;
	height: auto;
	
	
}
#abg-3{

	background:transparent;
	position: absolute;
	width: 200px;
	height: auto;
	border-radius: 25px;
	margin-left: 29%;	
}
#abg-4{

	background:transparent;
	width: 200px;
	height: auto;
	border-radius: 25px;
	margin-left: auto;	
	
}
.photo-1 img{
	margin-top: 50px;
	height: 30%;
    position: absolute;
	border-radius: 15%;
	margin-bottom: auto;
	margin-left: 8%;
	
}

.info-1{
	
	background-color: transparent;
	
	margin-top: 19%;
	position:absolute;
	width: 30%;
	text-align: center;
	
}
.photo-2 img{
	margin-top: 50px;
	height: 30%;
    position: absolute;
	border-radius: 15%;
	margin-bottom: auto;
	margin-left: 30%;	
	
}
.info-2{
	
	background-color:transparent;
	font-size: large;
	margin-top: 19%;
	position:absolute;
	width: 30%;
	text-align: center;
	margin-left: 22.5%;
	
}

.photo-3 img{
	margin-top: 50px;
	height: 30%;
    position: absolute;
	border-radius: 15%;
	margin-bottom: auto;
	margin-left: 52.5%;	
	
}
.info-3{

	background-color: transparent;
	font-size: large;
	margin-top: 19%;
	position:absolute;
	width: 30%;
	text-align: center;
	margin-left: 44.5%;
	
}
.photo-4 img{
	margin-top: 50px;
	height: 30%;
    position: absolute;
	border-radius: 15%;
	margin-bottom: auto;
	margin-left: 74.5%;	
	
}
.info-4{

	background-color: transparent;
	font-size: large;
	margin-top: 19%;
	position:absolute;
	width: 30%;
	text-align: center;
	margin-left: 66.5%;
	
}

.about_header img{
	width: 100%;
	height: auto;
}




/*--terms & conditons*/

.col-7{
	flex-basis: 100%;
	padding: 0px;
	min-width: 600px;
	margin-bottom: 50px;
}

.col-7 a{
	color: blue;
	text-decoration: underline;
}

.col-7 p{
	font-size: 15px;

}

.ind{
	margin-left: 50px;
	text-align: justify;
}

.col-7 h4{
	text-indent: 5%;
}

.ind ul{
	list-style-type: circle;
}

/* Slideshow container */
.slideshow-container {
	max-width: 1920px;
	max-height: 720;
	position:relative;
	margin: auto;
	

  }

  /* Caption text */
  .text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
  }
  
  .active {
	background-color: #69cf4a;
  }

  .active, .dot:hover {
	background-color: #717171;
  }
  /* Fading animation */
  .fade {
	animation-name: fade;
	animation-duration: 1.5s;
  }
  
  @keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
  }


/*Time*/

#time{
	font-size: larger;
	font-weight: bold;
	text-align: right;
	margin-top: 20px;
	margin-right: 50px;
	color: #555;

}


/*add to cart testing*/

.cart-header {
    font-weight: bold;
    font-size: 1.25em;
    color: #333;
	border: 1px solid #000000;
	border-left: none;
	border-right: none;
	z-index: 2;
}

.cart-column {
    display: flex;
    align-items: center;
    
    
    padding-bottom: 5px;
    margin-top: 5px;
}

.cart-row {
    display: flex;
}

.cart-item {
    width: 45%;
}

.cart-price {
    width: 20%;
    font-size: 1.2em;
    color: #333;
}

.cart-quantity {
    width: 35%;
}

.cart-item-title {
    color: #333;
    margin-left: .5em;
    font-size: 1.2em;
}

.cart-item-image {
    width: 75px;
    height: auto;
    border-radius: 10px;
}

.btnn-danger {
    color: white;
    background-color: #EB5757;
    border: none;
    border-radius: .3em;
    font-weight: bold;
	width: 90px;
	margin-left: auto;
	
}

.btn-danger:hover {
    background-color: #CC4C4C;
}

.cart-quantity-input {
    height: 34px;
    width: 50px;
    border-radius: 5px;
    border: 1px solid #000000;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    margin-right: 25px;
}

.cart-row:last-child {
    border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
    border: none;
}

.cart-total {
    text-align: end;
    margin-top: 10px;
    margin-right: 10px;
}

.cart-total-title {
    font-weight: bold;
    font-size: 1.5em;
    color: black;
    margin-right: 20px;
}

.cart-total-price {
    color: #333;
    font-size: 1.1em;
}

.btnn-purchase {
	width: 90px;
	color: white;
    background-color: #4c4e4d;
    border: none;
    border-radius: .3em;
	width: 90px;
}

.btnn-primary:hover {
    background-color: #2D9CDB;
}

.btnn {
    padding: .67em .67em;
    cursor: pointer;
}

.containerr {
    
    margin: 0 auto;
    padding: 0 1.5em;
}

.content-section {
    margin: 1em;
}

/*add to cart testing*/

.cat{
	background:  #44bebe;
	height: 5in;
	width: auto;
	padding: 10px;
	border-radius: 25px;
}

/*for add to cart css*/
.bg-cart{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
	display: flex;
    justify-content: center;
    align-items: center;
    display: none;
	z-index: 1;
}

.cart-content{
   position: relative;
   width: 50%;
   height: auto;
   background-color: white;
   border-radius: 25px;
   overflow-x: hidden;
   overflow-y: auto;
   margin: 50px;
}
/*
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey; 
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #4d9736; 
	border-radius: 10px;
}
*/
::-webkit-scrollbar-thumb:hover {
	background: #69cf4a; 
}

.closed{
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 40px;
    transform: rotate(45deg);
    cursor: pointer;
    background-color: none;
}

.btn-danger {
    color: white;
    background-color: #EB5757;
    border: none;
    border-radius: 25px;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #CC4C4C;
}

.cart-content{
	position: relative;
 }

 
.cart-row {
    display: flex;
}

.cart-item {
    width: 45%;
}

.cart-price {
    width: 20%;
    font-size: 1.2em;
    color: #333;
}

.cart-quantity {
    width: 35%;
}

.cart-item-title {
    color: #333;
    margin-left: .5em;
    font-size: 1.2em;
}

.cart-item-image {
    width: 75px;
    height: auto;
    border-radius: 10px;
}


.cart-quantity-input {
    height: 34px;
    width: 50px;
    border-radius: 5px;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    margin-right: 25px;
}

.cart-total {
    text-align: end;
    margin-top: 10px;
    margin-right: 10px;
}

.cart-total-title {
    font-weight: bold;
    font-size: 1.5em;
    color: black;
    margin-right: 20px;
}

.cart-total-price {
    color: #333;
    font-size: 1.1em;
}



/*new cart css*/
.delete{
	width: auto;
	height: auto;
	padding: 10px;
	color: white;
	background: red;
}
.delete_admin{
	width: 120px;
	height: auto;
	padding: 10px;
	color: white;
	background: red;
}
.subtotal{
	border: none;
}

.edit{
	width: auto;
	height: auto;
	padding: 10px;
	color: white;
	background: green;
}

.place{
	width: 100%;
	height: auto;
	padding: 10px;
	color: white;
	background: green;
}

.quantity{
	border:1px solid black;
	border-radius: 5px;
	text-align: center;
}
td input[type= "submit"]{
	border: none;
}
td input[type= "submit"]:hover{
	border: none;
	background-color: #353635;
	color: white;
}
/*--sort--*/

.btns {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btns:hover {
  background-color: #ddd;
}

.btns.active {
  background-color: #666;
  color: white;
}

/* sorting */

.sort_button{
  width: 10%;
  height: 30px;
  border: none;
  background-color: rgb(15, 136, 15);
  border-radius: 5px;
  font-size: medium;
  color: white;
  cursor: pointer;
}

.sort_button:hover{
	opacity: 80%;
}
.sort_button:focus {
	background: rgb(32, 99, 6);
}

/*dropdown of account name*/

.drop2{
	display: none;
}

.drop:hover .drop2{
	font-size: 15px;
	display: block;
	position: absolute;
	z-index: 1;
	background-color: #dfdede;
	padding: 3px;
	color: #5fc96d;
	text-align: left;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	
}

.interface{

	background-color: #dfdede;

}

.tab{

	width: 196px;
	height: auto;
	font-size: larger;
	text-align: center;
	background: rgba(73, 255, 0, 0.2);


}
.tab li{

	list-style: none;
	padding: 15px;
}
.totalproducts{

	width: 170px;
	height: 120px;
	background: #FFFFFF;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.88);
	border-radius: 10px;
}

/*-profile page-*/

.profile-container{
	max-width: 1000px;
	margin: auto;
	padding: 25px;
	padding-left: 10px;
	margin-top: 8%;
	margin-bottom: 5%;
	display: flex;
	
	border-radius: 15px;
}

.p-menu{
  height: auto;
  display: flex;
  align-items: left;
  overflow-x: hidden;
  padding-top: 16px;
 
  justify-content: center;
  text-align: center
}

.p-menu .but{
  
  text-decoration: none;
  font-size: 20px;
  width: 250px;
  display: block;
}

li:hover{
	color: green;
	cursor: pointer;
}

.p-menu i{
	padding-right: 10px;
}
.profile-bg{

}

.p-menu li{
	padding: 20px;
	
}

.p-menu img{
  width: 100px;
  height: 100px;
  border-radius: 50%;

}

.p-info{
	padding-top: 40px;
	padding-left: 10px;
	width: 700px;
	height: 400px;
	min-height: 400px;
	min-width: 400px;
	background-color:  #e4e2e2;
	border-radius: 15px;
}
.p-info label{
	font-size: 20px;
}

.p-info label h1{
	padding-left: 40px;
	
}

.add_item {
	position: absolute;
	width: 100%;
	max-width: 700px;
	margin: auto;
	text-align: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding-top: 80px;
  }
  
.add_item img {
	width: 100px;
	height: 100px;
	
	
  }

  
.add_item :hover {
	opacity: 75%;
  }


  /* add product/upload */

  
#upload_container{
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    width: 600px;
}

#upload_container form{
    display: flex;
    flex-direction: column;
	padding-left: 60px;
}
#upload_container form input{
    padding: 8px;
    outline: none;
    border: 1px solid #5fc96d;
    margin-bottom: 8px;
}

#upload_container form button{
    padding: 8px;
    outline: none;
    background-color: #5fc96d;
    border: none;
    margin-bottom: 8px;
    cursor: pointer;
}

#upload_container form input [type= "submit"]{
    background-color: #5fc96d;
    border: none;
}

#upload_container form input[type="submit"]:hover{

    background-color: white;
    cursor: pointer;
    border: 1px solid lightblue;
}

#upload_container form input[type="file"]{
	display: none;
}

/*products*/

.main{
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    /* flex-basis: 220px; */
    justify-content:center;
}

.main .card{
	
    max-width: 600px;
    height: 600px;
    flex: 1 1 10px;
    margin: 10px;
	
}

.main .card .image{
    height: 50%;
    margin-bottom: 20px;
}

.main .card .caption{
    padding-left: 1em;
    text-align: left;
    line-height: 3em;
    height: 25%;
	
}





/*-profile page try for new design-*/

.profile-container-new{
	max-width: 1580px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
	margin-top: 8%;
	margin-bottom: 5%;
	display: flex;
	border-radius: 15px;
}

.p-menu{
  height:100%;
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  color: white;
  background-color: #423d3d;
  padding-top: 20px;
}
.p-menu ul{
	margin-top: 100px;
	text-align: left;
}

#users, 
#profile, 
#products, 
#add_product,
#dashboard,
#purchase{
  margin-left: 120px; 
  padding: 0px 10px;
  margin-top: 30px;
}
.users, 
.profile, 
.products, 
.add_product,
.dashboard,
.purchase{
  margin-left: 120px; 
  padding: 0px 10px;
}
.profile, .products{
	width: 100%;
}

.hr{
	width: 70%;
	margin: auto;
	border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, green, #ccc);
}
.profile p{
	margin-left: 50px;
	
}
/*    ADMIN PAGE CSS BAKA BAGUHIN NA LATER
table{
	margin-top: 30px;
	right: 0;
	align-items: right;
	justify-content: right;
	margin-left: 50px;
}
th{
	text-align: center;
	padding: 10px;
}
td{
	text-align: center;
}
*/
.p-menu .but{
  
  text-decoration: none;
  font-size: 20px;
  width: 250px;
  display: block;
}

li:hover{
	color: green;
	cursor: pointer;
}

.p-menu i{
	padding-right: 10px;
}
.profile-bg{

}

.p-menu li{
	padding: 20px;
	text-align: left;
}

.add_item {
	position: absolute;
	width: 100%;
	max-width: 700px;
	margin: auto;
	text-align: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding-top: 80px;
  }
  
.add_item img {
	width: 100px;
	height: 100px;

  }

.add_item :hover {
	opacity: 75%;
  }

.profile_admin{
	margin-left: 100%;
	margin-bottom: 100%;
	position:relative;
	width: 200%;


}


.box1{
    height: 100%;
    width: 100%;
	background-position: center;
	background-attachment: fixed;
	background-repeat: repeat;
	

}
#qoute{
	margin-left: 22%;
	margin-top: 20%;
	color: #fff;
	font-weight:bolder;
	position: relative;
	color: yellow;
	font-size: xx-large;
	text-decoration-line:underline;
	text-decoration-color: yellow;
	-webkit-text-stroke: #000000 2px;
	font-family: sans-serif;
}

.column {
	float: left;
	width: 20%;
	padding: 20px;
	height: 80px; 
	border-radius: 20px;
  }
  .row:after {
	content: "";
	display: table;
	clear: both;

  }
 .column p {
	font-size: 20px;
	text-align: center;
	font-family: 'Courier New', Monospace;
	color: rgb(151, 150, 150);
 }
 
 /**/

 .message{
	position: sticky;
	top:0; left:0;
	border-radius: 5px;
	background-color: #323835;
	padding:10px;
	margin:auto;
	max-width: 800px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
 }
 
 .message span{
	font-size: 20px;
	color: rgb(255, 255, 255);
 }
 
 .message i{
	font-size: 20px;
	color:rgb(255, 255, 255);
	cursor: pointer;
 }
 
 .message i:hover{
	color:red;
 }

 .bbtt{
	display: inline-block;
	background: #69cf4a;
	color: #fff;
	padding: 8px 20px;
	margin: 10px 0px;
	border-radius: 90px;
	transition: background 0.5s;
	width: 130%;
 }

 /*CHECKOUT FORM*/
 
 .edit-form-container{
	top:0;
	left:0;
	z-index: 1100;
	/* background-color: rgba(0,0,0,.7); */
	padding:20px;
	display: none;
	align-items: center;
	justify-content: center;
	/* min-height: 100vh; */
	width: 100%;
	margin-left: -228px;
	float: right;
	background-color: #f1f4f9;
	}


 
.edit-form-container form{
	width: 500px;
	float: right;
	border-radius: 25px;
	background-color: #fff;
	
	padding: 20px;
	}
 
 .edit-form-container form .box{
	width: 100%;
	background-color: #eee;
	border-radius: .5rem;
	margin:1rem 0;
	
	color:black;
	padding:20px;
	text-transform: none;
 }

 .edit-form-container form h1{
	text-align: center;
 }

 .option-btn{
   display: block;
   width: 100%;
   text-align: center;
   background-color: tomato;
   color: white;
   /* font-size: 1.7rem; */
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 1rem;
   border: none;
 }

.update-btn{
   display: block;
   width: 100%;
   text-align: center;
   background-color: #407f4b;
   color: white;
   /* font-size: 1.7rem; */
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 1rem;
   border: none;
}

.edit-btn{
	display: block;
	text-align: center;
	background-color: #407f4b;
	color: white;
	/* font-size: 1.7rem; */
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 1rem;
	border: none;
 }
 
.shop_btn{
	display: inline-block;
	width: 50%;
	text-align: center;
	background-color: green;
	color: white;
	/* font-size: 1.7rem; */
	padding: 10px;
	border-radius: 37px;
	cursor: pointer;
	margin-top: 1rem;
	border: none;
}

.shop_btn:hover{
	background-color: rgb(49, 180, 49)  ;
	color: rgba(255, 255, 255, 1);
  	box-shadow: 0 5px 15px green;
}



.sts{
padding: 5px;
}

.check_btn{
	background-color: #459d50;
	padding: 10px;
	color: white;
	font-size: 15px;
	border-radius: 30px;
}

.add_btn{
	display: block;
   width: 100%;
   text-align: center;
   background-color: rgb(15, 136, 15);
   color: white;
   /* font-size: 1.7rem; */
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 1rem;
   border: none;
}

/*asdasdad*/

.menu-icon{
	width: 28px;
	margin-left: 20px;
	display: none;
}

.burger, #burger{
	display: none;
}

.orig{
	display: block;
}
@media only screen and (max-width: 800px){
	

	nav ul{
		position: absolute;
		top: 105px;
		left: 0;
		background: #333;
		width: 100%;
		overflow: hidden;
		transition: max-height 0.5s;
	}

	nav ul li{
		display: block;
		margin-right: 50px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	nav ul li a{
		color: white;
	}

	.menu-icon{
		display: block;
		cursor: pointer;
	}

	.burger, #burger{
		display: block;
	}

	.orig, #orig{
		display: none;
	}

	.shop_btn{
		width: 50%;
	}

	
/* SLIDESHOW */
	.dot {
		height: 10px;
		width: 10px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	  }

	  .active, .dot:hover {
		background-color: #717171;
	  }
	  /* Fading animation */
	  .fade {
		animation-name: fade;
		animation-duration: 1.5s;
	  }
	  
	  @keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
	  }
	  
	
 


}

.text-blk {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 25px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
  }
  
  .responsive-cell-block {
	min-height: 75px;
  }
  
  .responsive-container-block {
	min-height: 75px;
	height: fit-content;
	width: 100%;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	justify-content: flex-start;
  }
  
  .responsive-container-block.bigContainer {
	padding-top: 0px;
	padding-right: 50px;
	padding-bottom: 0px;
	padding-left: 50px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 50px;
	margin-left: 0px;
  }
  
  .responsive-container-block.Container {
	max-width: 1320px;
	justify-content: space-evenly;
	align-items: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
  }
  
  .mainImg {
	width: 100%;
	height: 800px;
	object-fit: cover;
  }
  
  .blueDots {
	position: absolute;
	top: 150px;
	right: 15%;
	z-index: -1;
	left: auto;
	width: 80%;
	height: 500px;
	object-fit: cover;
  }
  
  .imgContainer {
	position: relative;
	width: 48%;
  }
  
  .responsive-container-block.textSide {
	width: 48%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

  }
  
  .text-blk.heading {
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	text-align: center;
  }
  
  .text-blk.subHeading {
	font-size: 18px;
	line-height: 26px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
  }
  
  .cardImg {
	width: 31px;
	height: 31px;
  }
  
  .cardImgContainer {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: rgb(229, 229, 229);
	border-right-color: rgb(229, 229, 229);
	border-bottom-color: rgb(229, 229, 229);
	border-left-color: rgb(229, 229, 229);
	border-image-source: initial;
	border-image-slice: initial;
	border-image-width: initial;
	border-image-outset: initial;
	border-image-repeat: initial;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
  }
  
  .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 0px;
  }
  
  .text-blk.cardHeading {
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
  }
  
  .text-blk.cardSubHeading {
	color: rgb(153, 153, 153);
	line-height: 22px;
  }
  
  .explore {
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	color: white;
	background-color: rgb(244, 152, 146);
	box-shadow: rgba(244, 152, 146, 0.25) 0px 10px 20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: initial;
	border-right-style: initial;
	border-bottom-style: initial;
	border-left-style: initial;
	border-top-color: initial;
	border-right-color: initial;
	border-bottom-color: initial;
	border-left-color: initial;
	border-image-source: initial;
	border-image-slice: initial;
	border-image-width: initial;
	border-image-outset: initial;
	border-image-repeat: initial;
	padding-top: 17px;
	padding-right: 40px;
	padding-bottom: 17px;
	padding-left: 40px;
  }
  
  .explore:hover {
	background-image: initial;
	background-position-x: initial;
	background-position-y: initial;
	background-size: initial;
	background-repeat-x: initial;
	background-repeat-y: initial;
	background-attachment: initial;
	background-origin: initial;
	background-clip: initial;
	background-color: rgb(244, 182, 176);
  }
  
  #ixvck {
	margin-top: 60px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
  }
  
  .redDots {
	position: absolute;
	bottom: -350px;
	right: -100px;
	height: 500px;
	width: 400px;
	object-fit: cover;
	top: auto;
  }
  
  @media (max-width: 1024px) {
	.responsive-container-block.Container {
	  position: relative;
	  align-items: flex-start;
	  justify-content: center;
	}
  
	.mainImg {
	  bottom: 0px;
	}
  
	.imgContainer {
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
	  height: auto;
	  width: 60%;
	}
  
	.responsive-container-block.textSide {
	  margin-top: 0px;
	  margin-right: 0px;
	  margin-bottom: 0px;
	  margin-left: auto;
	  width: 70%;
	}
  
	.responsive-container-block.Container {
	  flex-direction: column-reverse;
	}
  
	.imgContainer {
	  position: relative;
	  width: auto;
	  margin-top: 0px;
	  margin-right: auto;
	  margin-bottom: 0px;
	  margin-left: auto;
	}
  
	.responsive-container-block.textSide {
	  margin-top: 0px;
	  margin-right: 0px;
	  margin-bottom: 20px;
	  margin-left: 0px;
	  width: 100%;
	}
  
	.responsive-container-block.Container {
	  flex-direction: row-reverse;
	}
  
	.responsive-container-block.Container {
	  flex-direction: column-reverse;
	}
  }
  
  @media (max-width: 768px) {
	.responsive-container-block.textSide {
	  width: 100%;
	  align-items: center;
	  flex-direction: column;
	  justify-content: center;
	}
  
	.text-blk.subHeading {
	  text-align: center;
	  font-size: 17px;
	  max-width: 520px;
	}
  
	.text-blk.heading {
	  text-align: center;
	}
  
	.imgContainer {
	  opacity: 0.8;
	}
  
	.imgContainer {
	  height: 500px;
	}
  
	.imgContainer {
	  width: 30px;
	}
  
	.responsive-container-block.Container {
	  flex-direction: column-reverse;
	}
  
	.responsive-container-block.Container {
	  flex-wrap: nowrap;
	}
  
	.responsive-container-block.textSide {
	  width: 100%;
	  margin-top: 0px;
	  margin-right: 0px;
	  margin-bottom: 20px;
	  margin-left: 0px;
	}
  
	.imgContainer {
	  width: 90%;
	}
  
	.imgContainer {
	  height: 450px;
	  margin-top: 5px;
	  margin-right: 33.9062px;
	  margin-bottom: 0px;
	  margin-left: 33.9062px;
	}
  
	.redDots {
	  display: none;
	}
  
	.explore {
	  font-size: 16px;
	  line-height: 14px;
	}
  }
  
  @media (max-width: 500px) {
	.imgContainer {
	  position: static;
	  height: 450px;
	}
  
	.mainImg {
	  height: 100%;
	}
  
	.blueDots {
	  width: 100%;
	  left: 0px;
	  top: 0px;
	  bottom: auto;
	  right: auto;
	}
  
	.imgContainer {
	  width: 100%;
	}
  
	.responsive-container-block.textSide {
	  margin-top: 0px;
	  margin-right: 0px;
	  margin-bottom: 0px;
	  margin-left: 0px;
	}
  
	.responsive-container-block.Container {
	  padding-top: 0px;
	  padding-right: 0px;
	  padding-bottom: 0px;
	  padding-left: 0px;
	  overflow-x: visible;
	  overflow-y: visible;
	}
  
	.responsive-container-block.bigContainer {
	  padding-top: 10px;
	  padding-right: 20px;
	  padding-bottom: 10px;
	  padding-left: 20px;
	  padding: 0 30px 0 30px;
	}
  
	.redDots {
	  display: none;
	}
  
	.text-blk.subHeading {
	  font-size: 16px;
	  line-height: 23px;
	}
  
	.text-blk.heading {
	  font-size: 28px;
	  line-height: 28px;
	}
  
	.responsive-container-block.textSide {
	  margin-top: 40px;
	  margin-right: 0px;
	  margin-bottom: 50px;
	  margin-left: 0px;
	}
  
	.imgContainer {
	  margin-top: 5px;
	  margin-right: auto;
	  margin-bottom: 0px;
	  margin-left: auto;
	  width: 100%;
	  position: relative;
	}
  
	.explore {
	  padding-top: 17px;
	  padding-right: 0px;
	  padding-bottom: 17px;
	  padding-left: 0px;
	  width: 100%;
	}
  
	#ixvck {
	  width: 90%;
	  margin-top: 40px;
	  margin-right: 0px;
	  margin-bottom: 0px;
	  margin-left: 0px;
	  font-size: 15px;
	}
  
	.blueDots {
	  bottom: 0px;
	  width: 100%;
	  height: 80%;
	  top: 10%;
	}
  
	.text-blk.cardHeading {
	  font-size: 16px;
	  margin-top: 0px;
	  margin-right: 0px;
	  margin-bottom: 8px;
	  margin-left: 0px;
	  line-height: 25px;
	}
  
	.responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
	  padding-top: 10px;
	  padding-right: 0px;
	  padding-bottom: 10px;
	  padding-left: 0px;
	}
  }

  *,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }

 

	








}
/*PREVIEW CSS*/

.preview{
	/* The image used */
	background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url("pics/ch5 bg.jpg");
	

	/* Set a specific height */
	min-height: 500px; 
  
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	 
  }


  .preview .col-2{
	flex-basis: 50%;
	min-width: 300px;
	transition: transform .2s;
}

.preview .col-2 img{
	max-width: 100%;
	padding: 50px 0;
	
}

.preview  .col-2 h1{
	font-size: 50px;
	line-height: 60px;
	margin: 25px 0 ;
	color: #1b9b47;
	text-shadow: 2px 2px black;
}

.preview p{
	font-weight: 500px;
	text-shadow: 1px 1px white;
	color: black;
}

/*QOUTE*/

.qoute{

	/* The image used */
	background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("pics/donationbg.jpg");
	

	/* Set a specific height */
	min-height: 500px; 
  
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
  }

.qoute img{
	width: 300px;
	height: 100px;
	justify-content: center;
	align-items: center;
}


.qoute h1 {
	font-family: 'Pattaya', sans-serif;
	text-shadow: 3px 3px #1d1717;
	text-align: center;
	font-size: 70px;
	color: #1b9b47;
	padding: 200px 0 0px 0;
	text-align: center;
	margin: 10px;
}

.qoute p{
	text-align: center;
	color: #000000;
	text-align: center;
	padding: 0 25px 200px 25px;
	font-size: 20px;
	

}

@media only screen and (max-width: 800px){
	
	.qoute{
		min-height: 100px; 
	}
	
	.qoute h1{
		font-size: 45px;
		padding: 50px 0;
	}

	.brands{
		margin: 60px auto;
	}
	
	.col-5{
		width: 100px;
		text-align: center;
	}
	
	.col-5 img{
		width: 100%;
		filter: grayscale(0%)
	}

}

/*CHECKOUT*/
.order-message-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: 1000;
}

/* Styles for the pop-up message box */
.message-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

/* Styles for the heading */
.message-container h3 {
    color: #333;
}

/* Styles for the order details */
.order-detail {
    margin-top: 10px;
    font-size: 16px;
}

.order-detail span.total {
    font-weight: bold;
    
}

/* Styles for customer details */
.customer-details {
    margin-top: 20px;
}

.customer-details p {
    margin-bottom: 5px;
}

.customer-details p span {
    font-weight: bold;
}

/* Styles for the note */
.customer-details p[style] {
    color: red;
    font-size: small;
    margin-top: 10px;
}

/* Styles for the continue shopping button */
.check_btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

.check_btn:hover {
    background-color: #45a049;
}


/* SIGNUP CSS */

	.signup_page{
		display: flex;
		justify-content:center;
		align-items: center;
		padding: 50px;
		margin: auto;
	}
	.signup_form{
		max-width: 800px;
		margin: auto;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);	
	}

	.signup form {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
 
	.flex_signup {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
 
	.inputBox_signup {
		width: calc(50% - 20px);
		margin-bottom: 15px;
	}
 
	.inputBox_signup span {
		display: block;
		font-size: 0.9em;
		color: #888;
		margin-bottom: 5px;
	}
 
	.signup_form input[type='text'],
	.signup_form input[type='email'],
	.signup_form input[type='number'],
	select {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	}
 
	input[type='submit'] {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 5px;
	background-color: #54ad39;
	color: #fff;
	font-size: 1em;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}
 
	input[type='submit']:hover {
	background-color: green;
	}

	.signup_page button {
		background-color: #69cf4a;
		color: rgb(255, 255, 255);
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: 40%;
		margin-left: 192px;
	  }
	  
	.signup_page button:hover {
		background-color: #1b9b47;
	   
	  }

.norm{
	display: block;
}

.cp{
	display: none;
}

@media only screen and (max-width: 800px){
	.norm{
		display: none;
	}
	
	.cp{
		display: block;
	}

	.signup_page button {
		background-color: #69cf4a;
		color: rgb(255, 255, 255);
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: 100%;
		
	  }
}


/*OVERVIEW*/

.main_overview{
	display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem;
	max-width: 1200px;
	margin: auto;
}

.analytics-card {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
	width: 200px;
    border-radius: 8px;
    padding: 30px;
    margin: 10px;
    text-align: center;
	box-shadow: 5px 10px 8px #888888;
}

.analytics-card h2 {
    color: #333;
}

.metric {
    font-size: 30px;
    font-weight: bold;
    color: #007BFF;
}