:root {
  --color-green-main: #0b7809;
  --color-Lgreeb-bg: #e4ffda;
  --color-ULgreeb-bg: #f2f6f28f;
  --color-white-bg: #f2f6f2;
  --color-greeb-bg: #e5ffdc;
  --color-greeb-hover: #c9ffd7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #525252;
  --color-red-error: #d00027;
  --radius-image: 12px;
  --padding-1: 8vw;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition: all 0.4s ease-in-out;
}

@keyframes cameUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes scaleUp {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes growUp {
  0% {
    transform: translateY(200%) scale(0.8);
    opacity: 20%;
  }
  25% {
    transform: translate(0) scale(1);
    opacity: 100%;
  }
  75% {
    transform: translate(0) scale(1);
    opacity: 100%;
  }
  100% {
    transform: translateY(200%) scale(0.8);
    opacity: 20%;
  }
}

body {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
  background-color: var(--color-white-bg);
  color: var(--color-black);
  /* line-height: 1.4em; */
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body::-webkit-scrollbar {
  display: none;
}

main {
  background-color: var(--color-white);
  min-height: 90vh;
  align-content: center;
  padding: 20px max(10px, 2vw);
}

main#home{
  padding: 0px;
}

h1 {
  text-transform: uppercase;
  font-size: clamp(24px, 8vw, 60px);
  margin-bottom: 30px;
  margin-top: 10px;
  -webkit-text-stroke: 1px;
}

h2 {
  text-transform: capitalize;
  font-size: clamp(32px, 2.2vw, 50px);
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  color: green;
}

/* h2::after{
    content: "";
    display: block;
    width: 70px;
    height: 1px;
    margin-top: 10px;
    background: #ed143d;
    box-shadow: 0px 0px 7px 2px crimson;
    justify-self: inherit;
} */

h2 span {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
}

h2 span::after {
  content: "";
}

h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

h4 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

p {
  line-height: 1.4em;
  letter-spacing: 0.033em;
}

a {
  text-decoration: none;
  color: inherit;
}

i {
  font-style: normal;
  /* margin-top: 0.2em; */
  margin-right: 10px;
}

a i{
  font-size: inherit;
}

img {
  max-width: 100%;
  width: 100%;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(400px, 60vw);
  text-align: justify;
}

/* form button{
    margin-top: 20px;
} */

form div:has(div) {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

div:has(> input) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

label {
  text-align: justify;
  margin: 10px 0px 4px 0px;
}

input,
textarea, select {
  font-size: 1rem;
  width: 100%;
  min-width: 150px;
  padding: 10px 20px;
  min-height: 40px;
  border-radius: 4px;
  outline: none;
  border: 1px solid #000000;
}

input:focus,
textarea:focus {
  border: 2px solid var(--color-green-main);
}

div:has(> table) {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: justify;
}

td:not(:first-child),
th:not(:first-child) {
  text-align: end;
}

td,
th {
  padding: 6px 10px;
  /* border: 1px solid #000000; */
}

a.btn,
button {
  color: var(--color-white);
  /* min-width: 200px; */
  font-size: 1.1rem;
  padding: 8px 20px;
  border-radius: 12px 4px 12px 4px;
  box-shadow: 2px 2px 6px #000000;
  appearance: auto;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  background-color: crimson;
}

a.btn:hover,
button:hover,
.btn2:hover,
.btn1:hover {
  background-color: var(--color-green-main);
  color: #ffffff;
  transform: translateY(-0.4rem);
  border-color: var(--color-green-main);
}

.btn1,
form button {
  color: var(--color-white);
  background-color: crimson;
  padding: 8px 15px;
  font-size: 1.2rem;
  border-radius: 12px;
  border: 2px solid #000000;
  flex: 1;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
}

/*Class Base Css*/

.btn2,
a.btn2 {
  background: transparent;
  color: crimson;
  border: 2px solid crimson;
  /* flex: 1; */
  border-radius: 12px;
  box-shadow: none;
}

a.btn3 {
  padding: 4px 20px;
  font-size: 1rem;
}

details {
  background-color: var(--color-ULgreeb-bg);
  padding: max(2vw, 20px);
  /* margin-bottom: 20px; */
  min-width: min(500px, 90vw);
}

summary {
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 20px;
}

.mb1 {
  margin-bottom: 10px;
}
.mb2 {
  margin-bottom: 20px;
}

.mb3 {
  margin-bottom: 30px;
}

.mb4 {
  margin-bottom: 40px;
}

.mb5 {
  margin-bottom: 50px;
}

.active {
  display: flex !important;
}

.txt-ctr {
  text-align: center;
}

/*header start*/
header {
  color: var(--color-green-main);
  display: flex;
  justify-content: space-between;
  padding: 4px 2vw;
  border: 1px solid var(--color-green-main);
}

header div {
  display: flex;
  gap: 10px 20px;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}

header nav {
  display: inherit;
  gap: inherit;
  padding: 0.5em 1em;
  font-weight: 600;
  align-items: center;
}

header nav a {
  padding: 0.5em 1em;
  font-size: 1.1rem;
  color: var(--color-green-main);
}

header nav a:hover {
  color: var(--color-white);
  background-color: var(--color-green-main);
  border-radius: var(--radius-image);

}

header .subNav > div{
    gap: 0;
    min-width: 100%;
    background: #ffffff;
    padding: 0px;
    border-radius: 12px;
}

header .subNav:hover > div{
    display: flex;
    flex-direction: column;
}

header .subNav > div > a{
  box-shadow: 0px 3px 4px -4px #525252;
  padding: 10px 20px;
  width: 100%;
  font-size: 1rem;
}

.logo {
  max-height: 50px;
}

header div > i {
  /* color: var(--color-green-main); */
  font-size: 1.6rem;
  margin: 0px;
  cursor: pointer;
}

/*Popup Start*/
#popup-sec {
  display: none;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  background: #00000080;
  backdrop-filter: blur(2px);
  /* padding: 10px; */
  z-index: 100;
  align-items: center;
  justify-content: center;
}

#popup-sec > div {
  background-color: var(--color-Lgreeb-bg);
  border-radius: var(--radius-image);
  padding: max(12px, 2vw);
  text-align: center;
  position: relative;
  animation: scaleUp 1s ease-in-out;
  min-width: min(500px, 100%);
}

.popup-close {
  position: absolute;
  right: -1em;
  top: -15px;
  color: var(--color-black);
  background: var(--color-greeb-bg);
  border-radius: 12px;
  padding: 4px 6px;
  font-size: 1.5rem;
  cursor: pointer;
}

.popup-close:hover {
  background-color: var(--color-green-main);
  color: var(--color-Lgreeb-bg);
}

#popup-content span {
  font-weight: 600;
  color: var(--color-green-main);
  cursor: pointer;
}

#popup-content > div {
  display: none;
}

/*Login Form */

/*Main section*/
#main-section {
  background: #000000b0 url(files/header-bg.webp);
  background-position: center;
  background-size: cover;
  min-height: 600px;
  margin: 0px 10px;
  border-radius: 12px;
  padding: max(5vw, 50px);
  background-blend-mode: hard-light;
}

#main-section span {
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
}

#main-section > div {
  max-width: min(600px, 100%);
  color: #ffffff;
}

#main-section a {
  margin-top: 30px;
  padding: 6px 20px;
  /* min-width: 200px;
    font-size: 1.2rem;
    border-radius: 12px 4px 12px 4px;
    box-shadow: 2px 2px 6px #000000; */
}

/*Category Section Start*/
#cate-sec {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 3vw;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
}

#cate-sec > div {
  height: 180px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  width: 180px;
  align-content: end;
  text-align: center;
  border: 1px solid #000000;
  cursor: pointer;
}

#cate-sec > div:hover {
  transform: translateY(-0.5rem);
}

#cate-sec h2 {
  text-transform: uppercase;
  justify-self: center;
}

/*Product Section*/
div#filter, div#filter > div{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 1.2rem;
}

div#filter h3{
  margin: 0px;
  color: green;
  text-transform: uppercase;
}

#product-sec {
  padding: max(var(--padding-1), 50px) var(--padding-1);
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 30px;
}

#product-sec img {
  border-radius: 8px;
  min-height: 150px;
}

#banner-div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#banner-div > div:has(form) {
  padding-top: 50px;
  position: sticky;
  top: 0;
}

/* #banner-div img{
    max-height: 200px;
    border-radius: var(--radius-image);
} */

#products-div {
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: min(20px, 2vw);
    align-items: start;
}

#products-div img {
  height: 180px;
  object-fit: contain;
  background: #ffffff;
  padding: 20px;
}

#products-div p{
  text-transform: capitalize;
}

#products-div > div {
  background-color: var(--color-greeb-bg);
  padding: 10px;
  border-radius: 4px;
  position: relative;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: space-between;
}

#products-div > div:hover {
  background-color: var(--color-greeb-hover);
}

#products-div > div > div:first-child > span {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.88rem;
  background-color: var(--color-greeb-bg);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--color-green-main);
}

#products-div > div > div > small,
#products-div > div > div:nth-child(2) small {
  color: #7d7d7d;
  font-size: 0.95rem;
}

#products-div > div > div:nth-child(2) small {
  text-decoration: line-through;
}

#products-div > div > div:nth-child(2) small::before {
  content: "MRP: ₹";
}

#products-div > div > div:nth-child(2) p {
  font-size: 1.3rem;
}

#products-div > div > div:nth-child(2) p::before {
  content: "₹";
}

#products-div > div > div {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

#products-div > div > div:nth-child(2) {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

#products-div button {
  /* font-weight: 600; */
  /* border-radius: 10px 0px; */
  /* box-shadow: 2px 2px 2px #000000; */
  background-color: var(--color-green-main);
  min-width: 20px;
  font-size: 1rem;
}

#products-div button:hover {
  background-color: crimson;
}

div#no-product {
  display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 100%;
    background: transparent;
    align-self: center;
    position: sticky;
    top: 0;
}

div#no-product img {
  max-width: 400px;
  height: auto;
}

/*About Sec*/
#about-sec {
  padding: 50px var(--padding-1);
}

#about-sec a {
  min-width: 200px;
  justify-self: center;
  display: block;
  margin-top: 20px;
  padding: 6px 20px;
  /* border-radius: 12px 2px 12px 2px; */
}

#fixed-div {
  display: flex;
  gap: 20px;
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #ffffff;
  align-items: center;
}

#wa-btn {
  font-size: 2.2rem;
  background-color: green;
  border-radius: 50%;
  text-align: center;
  align-content: center;
  width: 50px;
  height: 50px;
}

#wa-btn i {
  margin: 0;
}

#cart-sec {
  display: none;
  flex-direction: column;
  gap: 20px;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #ffffff;
  width: 450px;
  max-width: 100vw;
  padding: 50px 10px 10px 10px;
  border-radius: 12px;
  box-shadow: 0px 0px 13px #000000;
  animation: 0.5s cameUp ease-in-out;

  div:has(button) {
    display: flex;
    gap: 5px;
  }

  button {
    flex: 1;
  }
}

div.qtyAdjust {
  display: flex;
  background: #c9ffd7;
  color: #0b7809;
  border: 1px solid #0b7809;
  border-radius: 4px;
  height: 30px;
  justify-self: end;

  span,
  p {
    align-content: center;
    padding: 0px 10px;
  }

  span {
    cursor: pointer;
    font-size: 1.4rem;
  }

  p {
    color: #ffffff;
    background: green;
  }
}

#cart-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;

  div:has(> img) {
    width: 40px;
  }

  div:nth-child(2) {
    flex: 1;
  }
}

/*CheckOut Sec */
#checkout-sec {
  /* padding: 4vw var(--padding-1); */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  > div {
    background-color: var(--color-ULgreeb-bg);
    padding: max(20px, 3vw);
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--radius-image);
    min-width: min(100%, 450px);
  }

  > div:first-child {
    flex: 1;
  }

  div:has(> a) {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  a {
    flex: 1;
  }
}

div#checkout-items {
  border-width: 2px 0px;
  border-style: solid;
  border-color: #d3d3d3;
  padding: 20px 0px;
  margin-bottom: 20px;
}

div#checkout-summery {
  text-align: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#total-saving {
  color: var(--color-green-main);
  font-weight: 600;
}

/*Message Div*/

#message-div {
  display: none;
  color: #ffffff;
  width: fit-content;
  background-color: green;
  max-width: 500px;
  text-align: center;
  padding: 8px 20px;
  font-size: 1.1rem;
  border-radius: 4px;
  align-self: center;
  position: fixed;
  bottom: 15px;
  animation: growUp ease-in-out;
}

#message-div.error {
  background-color: var(--color-red-error);
}

/*Thanks Section*/
#thanks-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}

/*Profile Page sec*/
section.profile {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;

  #orders {
    flex: 1;
    min-width: min(600px, 100%);
    /* background-color: var(--color-ULgreeb-bg); */
    /* padding: 20px; */
  }

  >div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: var(--radius-image);
    /* overflow: hidden; */
  }

  h3{
    color: var(--color-green-main);
    margin: 0px;
    text-align: justify;
  }
}

/*Order List*/
#orderList a > div{
  display: flex;
    gap: 10px;
    background: var(--color-ULgreeb-bg);
    padding: 10px;
    border-radius: 8px;
    font-size: .8rem;
    color: var(--color-text);
}

#orderList a > div:hover{
  background-color: var(--color-greeb-hover);
}

#orderList a img{
    aspect-ratio: 1 / 1;
    width: 100px;
    object-fit: contain;
    background-color: var(--color-white);
}

#orderList a > div h4{
  font-size: .9rem;
  font-weight: 400;
  margin: 0;
}

#orderList a > div small{
  margin-bottom: 12px;
  display: block;
}

#orderList:has(>a){
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

/*Footer section start*/
footer {
  padding: max(50px, 5vw) var(--padding-1);
  box-shadow: 0px -1px 4px 0px #0b7809;
  padding-bottom: 20px;
}

footer > div:first-child {
  display: flex;
  gap: max(40px, 5vw);
  flex-wrap: wrap;
  justify-content: space-between;
}

footer h5 {
  color: var(--color-green-main);
  font-size: 1.4rem;
  margin-bottom: 1.2vw;
}

footer img {
  max-width: 180px;
  margin-bottom: 20px;
}

/* footer p {
  font-size: 0.9rem;
  text-align: justify;
} */

footer a {
  display: flex;
  line-height: 1.4em;
  align-items: center;
}

footer a:hover {
  color: var(--color-green-main);
  font-weight: 600;
}

footer > div > div {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  min-width: 200px;
}

footer > div > div > div {
  display: flex;
  margin-top: 12px;
  font-size: 1.8rem;
}

#copyright {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0px -3px 4px -4px #525252;
}