@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

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

:root {
  --primary-font: "Poppins", sans-serif;
  --primary-color: #fff;
  --secondary-color: #fcb420;
  --ternary-color: #2a6c44;
  --border-radius-ten: 10px;
  --box-shadow-light: 2px 2px 3px -2px rgba(0, 0, 0, 0.5);
}

body {
  font-family: var(--primary-font);
  overflow-x: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section {
  width: 75vw;
  margin: auto;
}

nav {
  display: grid;
}

.navbarOne {
  background: var(--secondary-color);
  padding: 0.5rem 0 0.5rem 0;
}

.navbarOne .section {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  column-gap: 2rem;
  align-items: center;
}

.navbarOne .section figure {
  width: 7rem;
  display: grid;
  border-radius: var(--border-radius-ten);
  overflow: hidden;
}

.navbarOne .section .address {
  position: relative;
}

.navbarOne .section .address i {
  position: absolute;
  top: 25%;
  left: 0;
  font-size: 1.25rem;
  transform: translateX(100%);
  color: var(--ternary-color);
}

.navbarOne .section .address input,
.navbarOne .section .search input {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 3rem;
  border: none;
  outline: none;
  border-radius: var(--border-radius-ten);
  box-shadow: var(--box-shadow-light);
  font-weight: bold;
}

.navbarOne .section .telphone {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: center;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.navbarOne .section .search {
  position: relative;
}

.navbarOne .section .search i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-70%, -50%);
  cursor: pointer;
}

.navbarTwo {
  box-shadow: 0 1px 10px -1px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.navbarTwo .section {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.navbarTwo .section ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.navbarTwo .section ul li {
  list-style-type: none;
  display: grid;
  column-gap: 1rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ternary-color);
  font-weight: bold;
  padding: 1rem;
  cursor: pointer;
}

.navbarTwo .section ul li i {
  font-size: 1.5rem;
}

.navbarTwo .section ul li span {
  font-size: 1rem;
  font-weight: 700;
}

.navbarTwo .section .not-cart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  align-items: center;
  font-size: 1.5rem;
  padding: 1rem;
  color: var(--ternary-color);
}

.navbarTwo .section .not-cart i {
  cursor: pointer;
}

.navbarTwo .section .profile {
  border-left: 1px solid #ebebeb;
  display: grid;
  padding: 1rem;
}

.navbarTwo .section .profile .profile-name {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  font-size: 1.5rem;
  column-gap: 0.5rem;
  color: #ebebeb;
}

.navbarTwo .section .profile .profile-name i {
  background: #ebebeb;
  overflow: hidden;
  padding: 0.25rem 0.25rem 0 0.25rem;
  border-radius: 5px;
  color: var(--secondary-color);
  cursor: pointer;
}

.navbarTwo .section .profile .profile-name h6 {
  color: var(--ternary-color);
  cursor: pointer;
}

#downarrow {
  background: transparent;
  padding: 0;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1rem;
}

.navbarThree {
  display: grid;
  padding: 1rem 1rem 1rem 1rem;
  background: #ebebeb;
}

.navbarThree .navigation {
  display: flex;
  align-items: center;
}

.navbarThree .navigation span,
.navbarThree .navigation a {
  padding-right: 1rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  color: black;
}

/* ============================================= */
/* Footer */
/* ============================================= */

.footerOne {
  background-color: #ebebeb;
  padding: 1rem 0 1rem 0;
}

.footerOne ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 1rem;
}

.footerOne ul li {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
  list-style-type: none;
}

.footerOne ul li i {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

.footerOne ul li span {
  font-weight: bold;
}

.footerTwo {
  background: var(--secondary-color);
}

.footerTwo .section {
  display: grid;
  grid-template-columns: 0.5fr auto auto auto;
  align-items: center;
  padding: 4rem 0 4rem 0;
  column-gap: 2rem;
}

.footerTwo .section .info {
  display: grid;
}

.footerTwo .section .info h4 {
  color: #fff;
}

.footerTwo .section .inputsOne {
  display: grid;
  row-gap: 1rem;
  align-items: start;
}

.footerTwo .section .inputsOne input {
  padding: 1rem;
  border: none;
  outline: none;
  border-radius: 10px;
}

.footerTwo .section .textArea {
  display: grid;
}

.footerTwo .section .textArea textarea {
  width: 100%;
  height: 100%;
  border: none;
  padding: 1rem;
  outline: none;
  border-radius: 10px;
}

.footerTwo .section .submitButton {
  display: grid;
}

.footerTwo .section .submitButton button {
  padding: 1rem;
  border: none;
  color: #fff;
  background: var(--ternary-color);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.15);
}

.footerTwo .section .submitButton button:hover {
  box-shadow: none;
  transform: scale(1.02);
  border-radius: 0;
}

.footerThree {
  background: #ebebeb;
}

.footerThree .section {
  padding: 3rem 0 3rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
}

.footerThree .section .left {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: "a a a" "b c d" "b e e";
}

.footerThree .section .left .heading {
  grid-area: a;
  display: grid;
  row-gap: 0.5rem;

  padding: 1rem;
}

.footerThree .section .left .heading ul {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.5rem 0;
}

.footerThree .section .left .heading ul li {
  list-style-type: none;
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.footerThree .section .left .heading ul li i:hover {
  transition: all 0.2s linear;
  color: #77778a;
}

.footerThree .section .left .heading ul li i {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: var(--ternary-color);
}

.footerThree .section .left .categories {
  padding: 1rem;
  grid-area: b;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 1rem;
}

.footerThree .section .left .categories ul {
  display: flex;
  flex-direction: column;
}

.footerThree .section .left .categories ul li {
  list-style: none;
  font-size: 12px;
  cursor: pointer;
}

.footerThree .section .left .categories ul li:hover,
.footerThree .section .left .medicines ul li:hover,
.footerThree .section .left .others ul li:hover {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
}

.footerThree .section .left .medicines {
  padding: 1rem;
  grid-area: c;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 1rem;
}

.footerThree .section .left .medicines ul li {
  list-style-type: none;
  font-size: 12px;
  cursor: pointer;
}

.footerThree .section .left .others {
  padding: 1rem;
  grid-area: d;
  display: grid;
  row-gap: 1rem;
}

.footerThree .section .left .others ul li {
  list-style-type: none;
  font-size: 12px;
  cursor: pointer;
}

.footerThree .section .left .summary {
  padding: 1rem;
  grid-area: e;
  color: #77778a;
  display: grid;
  row-gap: 0.25rem;
}

.footerThree .section .left .summary p {
  font-size: 12px;
  color: #77778a;
}
.footerThree .section .left .summary p:last-child {
  font-size: 10px;
  font-weight: bold;
}

.footerThree .section .right {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.footerThree .section .right .help,
.footerThree .section .right .email {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0rem 0 1rem 0;
}

.footerThree .section .right .help i,
.footerThree .section .right .email i {
  font-size: 1.25rem;
}

.footerThree .section .right .help h6,
.footerThree .section .right .email h6 {
  font-size: 0.75rem;
}

.footerThree .section .right .help h6 span,
.footerThree .section .right .email h6 span {
  color: var(--ternary-color);
}

.footerThree .section .right .playstore {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  padding: 1rem 0 1rem 0;
}

.footerThree .section .right .playstore button {
  border: none;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  cursor: pointer;
}

.footerThree .section .right .playstore button:hover {
  background: var(--ternary-color);
}

.footerThree .section .right .mobileApp {
  display: grid;
  row-gap: 1rem;
}

.footerThree .section .right .mobileApp input {
  padding: 1rem;
  border: none;
  outline: none;
  border-radius: 10px;
}

.footerThree .section .right .mobileApp span {
  justify-self: center;
  font-size: 14px;
  font-weight: bold;
}

.mainCardContainer {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;
}

.mainCardContainer .section {
  padding: 6rem 2rem 6rem 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 1rem;
  row-gap: 2rem;
}

.mainCardContainer .section .card {
  border-radius: var(--border-radius-ten);
  overflow: hidden;
  padding: 0.5rem;
  background: #fff4e0;
  display: grid;
  row-gap: 0.5rem;
}

.mainCardContainer .section .card:hover {
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.5);
  transform: scale(1.01);
}

.mainCardContainer .section .card figure {
  border-radius: var(--border-radius-ten);
  background: var(--primary-color);
  display: grid;
  border: 2px solid var(--secondary-color);
  overflow: hidden;
}

.mainCardContainer .section .card .cardInfo {
  padding: 0.5rem;
  display: grid;
  row-gap: 1rem;
}

.mainCardContainer .section .card .cardInfo .cardHeading {
  font-size: 1.25rem;
}

.mainCardContainer .section .card .cardInfo .cardPrice {
  display: grid;
  row-gap: 0rem;
}
.mainCardContainer
  .section
  .card
  .cardInfo
  .cardPrice
  .prespcription {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
}

.mainCardContainer
  .section
  .card
  .cardInfo
  .cardPrice
  .prespcription
  i {
  color: var(--ternary-color);
}

.mainCardContainer
  .section
  .card
  .cardInfo
  .cardPrice
  .prespcription
  p {
  font-size: 10px;
  color: red;
  font-weight: bold;
}

.mainCardContainer
  .section
  .card
  .cardInfo
  .cardPrice
  .cardActualPrice {
  font-size: 1.5rem;
}

.mainCardContainer .section .card .cardInfo .cardPrice .cardDelivery {
  color: var(--ternary-color);
  font-size: 14px;
  font-style: italic;
}

.mainCardContainer
  .section
  .card
  .cardInfo
  .cardPrice
  .cardDelivery
  span {
  color: #f4081f;
  font-size: 14px;
}

.mainCardContainer .section .card .cardInfo .cardButtons {
  align-self: flex-end;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
  border-top: 1px solid var(--secondary-color);
  padding-top: 0.75rem;
}

.mainCardContainer .section .card .cardInfo .cardButtons a {
  font-size: 10px;
  color: #2a6c44;
  font-weight: bold;
  text-underline-offset: 2px;
}

.mainCardContainer .section .card .cardInfo .cardButtons .addToCart {
  display: grid;
  justify-self: flex-end;
}

.mainCardContainer
  .section
  .card
  .cardInfo
  .cardButtons
  .addToCart
  button {
  border: none;
  background: var(--secondary-color);
  padding: 0.75rem;
  justify-self: flex-end;
  border-radius: 5px;
  color: var(--primary-color);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.counter {
  display: none;
  grid-template-columns: auto 2rem auto;
  column-gap: 0.25rem;
  align-items: center;
  justify-content: space-between;
}

.counter input {
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  outline: none;
  height: 100%;
  text-align: center;
  font-weight: bold;
}

.counter button {
  background: var(--secondary-color) !important;
  cursor: pointer;
  display: grid;
  padding: 0.5rem !important;
}

.counter button:hover {
  box-shadow: var(--box-shadow-light);
  transition: all 0.2s linear;
  transform: scale(1.01);
}

.cart {
  text-decoration: none;
  position: relative;
  color: var(--ternary-color);
}

.cartItemsQuantity {
  position: absolute;
  top: -25%;
  right: -25%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 13px;
  text-align: center;
  background: var(--secondary-color);
  color: var(--primary-color);
  display: none;
  align-items: center;
}

/* ======================================================== */
/* screen 02 Description page */
/* ========================================================= */

.descriptionMainContainer {
  width: 100%;
  min-height: 100vh;
}

.descriptionMainContainer .section {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  column-gap: 2rem;
  padding: 4rem 2rem 4rem 2rem;
}

.descriptionMainContainer .section .leftSection {
  padding: 1rem;
  display: grid;
  grid-template-rows: 0.5fr 0.5fr;
  row-gap: 1rem;
}

.descriptionMainContainer .section .leftSection figure {
  border-radius: var(--border-radius-ten);
  overflow: hidden;
  background: #fffbf5;
  border: 1px solid var(--secondary-color);
  box-shadow: 5px 5px 1px -1px var(--secondary-color);
  transition: all 0.2s ease-in-out;
}

.descriptionMainContainer .section .leftSection figure:hover {
  transform: scale(1.01);
  box-shadow: 1px 1px 5px -1px var(--secondary-color);
  transition: all 0.2s ease-in-out;
}

.descriptionMainContainer .section .leftSection .pictureRoll {
  background: #fffbf5;
  width: 100%;
  height: 20rem;
  display: grid;
  grid-template-columns: repeat(6, auto);
  column-gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
  border-radius: 10px;
  /* border: 1px solid var(--secondary-color) */
}

.descriptionMainContainer .section .leftSection .pictureRoll figure {
  width: 20rem;
  background: white;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
}

.descriptionMainContainer .section .rightSection {
  padding: 2rem 2rem 2rem 4rem;
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 2rem;
  border-radius: 10px;
  background: #fffbf5;
  box-shadow: 3px 0 0px 1px var(--secondary-color);
  transition: all 0.2s ease-in-out;
}

.descriptionMainContainer .section .rightSection:hover {
  transform: scale(1.01);
  transition: all 0.2s ease-in-out;
}

.descriptionMainContainer .section .rightSection .medicineheading {
  display: grid;
}

.descriptionMainContainer .section .rightSection .medicineheading h1 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1.5rem;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineheading
  h1
  i {
  color: var(--ternary-color);
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineheading
  #price {
  font-size: 2rem !important;
  font-weight: bold;
}

.descriptionMainContainer .section .rightSection .medicineheading p {
  color: gray;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineheading
  p
  span {
  color: red;
  font-weight: bold;
}

.descriptionMainContainer .section .rightSection .medicineInfo {
  display: grid;
  row-gap: 2rem;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoOne {
  display: grid;
  row-gap: 1rem;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoOne
  h4 {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoOne
  p {
  font-size: 14px;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoTwo {
  display: grid;
  row-gap: 1rem;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoTwo
  h4 {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineInfo
  .infoTwo
  p {
  font-size: 14px;
}

.descriptionMainContainer .section .rightSection .medicineAddToCart {
  display: grid;
  justify-content: start;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineAddToCart
  .medicineAddToCartTextButton {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: center;
  column-gap: 1rem;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 10px;
  border: none;
  background: var(--secondary-color);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: bold;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineAddToCart
  .medicineAddToCartTextButton:hover {
  box-shadow: var(--box-shadow-light);
  transition: all 0.2s ease-in-out;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineAddToCart
  .medicineCounter {
  display: none;
  grid-template-columns: auto auto auto;
  column-gap: 1rem;
  align-items: center;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineAddToCart
  .medicineCounter
  button {
  padding: 1rem;
  display: grid;
  color: white;
  background: var(--secondary-color);
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
}

.descriptionMainContainer
  .section
  .rightSection
  .medicineAddToCart
  .medicineCounter
  input {
  width: 4rem;
  height: 100%;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  border: 2px solid var(--secondary-color);
}

/* ======================================================== */
/* screen 03 Checkout */
/* ========================================================= */
.checkoutMainContainer {
  width: 100vw;
  min-height: 100vh;
}

.checkoutMainContainer .section {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 4rem 0rem 4rem 0;
}

.checkoutMainContainer .section .checkoutLeftSection {
  display: grid;
  row-gap: 2rem;
  padding: 1rem;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2rem;
  background: blue;
  border-radius: 10px;
  padding: 2rem;
  background: #fff4e0;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer
  figure {
  background: white;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  padding: 1rem;
  color: var(--ternary-color);
  box-shadow: var(--box-shadow-light);
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer
  .address {
  display: grid;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer
  .address
  h6 {
  color: #77778a;
  font-size: 1rem;
  border-right: 2px solid #fffbf5;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer
  .address
  p {
  color: black;
  font-size: 14px;
  font-weight: bold;
  border-right: 2px solid #fffbf5;
  padding: 0.25rem 0.25rem 0.25rem 0;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .addressContainer
  button {
  border: none;
  background: none;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: bold;
  color: #fcb420;
}
.checkoutMainContainer .section .checkoutLeftSection .invoice {
  padding: 1rem;
  text-align: center;
  font-size: 12px;
  color: #77778a;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer {
  display: grid;
  row-gap: 1rem;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemsSummary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  background: #ebebeb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: var(--box-shadow-light);
}

.checkbox {
  justify-self: flex-end;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.25rem;
  align-items: center;
  font-size: 12px;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemCardContainer {
  display: grid;
  align-items: flex-start;
  row-gap: 2rem;
  padding: 1rem;
  background: #fffbf5;
  overflow-y: auto;
  max-height: 30rem;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemCardContainer
  .cardItemCard {
  display: grid;
  grid-template-columns: 10rem 1fr;
  column-gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: #fff4e0;
  box-shadow: var(--box-shadow-light);
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemCardContainer
  .cardItemCard
  figure {
  display: grid;
  border-radius: 10px;
  background-color: white;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemCardContainer
  .cardItemCard
  .cardItemInfo {
  display: grid;
  row-gap: 0.5rem;
  padding: 1rem;
}

.checkoutMainContainer
  .section
  .checkoutLeftSection
  .cartItemsContainer
  .cartItemCardContainer
  .cardItemCard
  .cardItemInfo
  .firstInfo {
  display: grid;
  grid-template-columns: 1fr auto;
}

.firstInfoOne {
  display: flex;
  flex-direction: column;
}

.firstInfoOne h6 {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: center;
  font-size: 14px;
  color: var(--ternary-color);
}

.firstInfoOne h6 span {
  color: black;
}

#singleItemPrice {
  padding: 1rem 0 0 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.firstInfoTwo {
  justify-self: flex-end;
  display: grid;
  row-gap: 1rem;
}

.buttonInfo {
  display: grid;
  grid-template-columns: auto 2rem auto;
  column-gap: 0.25rem;
  align-items: center;
  cursor: pointer;
}

.buttonInfo button {
  padding: 0.45rem;
  background: var(--secondary-color);
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.buttonInfo input {
  text-align: center;
  border: none;
  height: 100%;
  outline: none;
}

.firstInfoTwo h6 {
  justify-self: flex-end;
  font-size: 1rem;
}

.totalprice {
  justify-self: flex-end;
}

.extraOption {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  justify-content: start;
}

.extraOption button {
  border: none;
  background: none;
  text-align: center;
  color: gray;
  cursor: pointer;
}

.extraOption button:nth-child(2) {
  color: var(--ternary-color);
  font-weight: bold;
}

.checkoutRightSection {
  padding: 1rem;
}

.checkoutRightSection form {
  padding: 1rem;
  border-radius: 10px;
  display: grid;
  row-gap: 1rem;
  box-shadow: 0 0 15px -1px rgba(0, 0, 0, 0.15);
}

.checkoutRightSection form p {
  font-size: 1.25rem;
}

.checkoutItems {
  display: grid;
  row-gap: 0.75rem;
}

.checkoutItems .star {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.25rem;
  align-items: center;
  font-size: 1rem;
  color: gold;
}

.checkoutItemsTotal,
.checkoutItemsDiscount,
.checkoutItemsPriority,
.checkoutItemsOrderTotal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.checkoutItemsTotal h6,
.checkoutItemsDiscount h6,
.checkoutItemsPriority h6,
.checkoutItemsOrderTotal h6 {
  font-size: 16px;
  padding: 0.25rem;
  color: #77778a;
}

.checkoutItemsOrderTotal {
  border-top: 2px solid gray;
}

.checkoutItems .offers {
  font-size: 12px;
  padding: 1rem 0 1rem 0;
  font-weight: bold;
}

.checkoutItemsButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

.checkoutItemsButtons button {
  padding: 1rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
}

.checkoutItemsTotal span,
.checkoutItemsDiscount span,
.checkoutItemsPriority span,
.checkoutItemsOrderTotal span {
  justify-self: flex-end;
  padding: 0.25rem;
}

#proceedToCheckoutButton {
  background: var(--secondary-color);
  color: white;
  cursor: pointer;
}

#proceedToCheckoutButton:hover {
  box-shadow: var(--box-shadow-light);
  transform: scale(1.01);
}

#addMoreButton {
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  background: white;
  cursor: pointer;
}

#addMoreButton:hover {
  box-shadow: var(--box-shadow-light);
  transform: scale(1.01);
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
  .mainCardContainer .section {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ======================================================== */
/* Mobile Responsive Styles */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* General adjustments for smaller screens */
  .section {
    width: 90vw;
  }

  /* Navbar adjustments */
  .navbarOne .section {
    grid-template-columns: 1fr;
    row-gap: 1rem;
    padding: 1rem;
  }

  .navbarOne .section .address,
  .navbarOne .section .search,
  .navbarOne .section .telphone {
    justify-self: center;
  }

  .navbarTwo .section {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .navbarTwo .section ul {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1rem;
  }

  .navbarTwo .section .not-cart {
    justify-self: center;
  }

  .navbarTwo .section .profile {
    justify-self: center;
  }

  .navbarThree .navigation {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Main card container adjustments */
  .mainCardContainer .section {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1rem;
  }

  .mainCardContainer .section .card {
    padding: 0.5rem;
  }

  .mainCardContainer .section .card .cardInfo .cardButtons {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .mainCardContainer .section .card .cardInfo .cardButtons a {
    justify-self: center;
  }

  .mainCardContainer
    .section
    .card
    .cardInfo
    .cardButtons
    .addToCart {
    justify-self: center;
  }

  /* Description page adjustments */
  .descriptionMainContainer .section {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
  }

  .descriptionMainContainer .section .leftSection {
    grid-template-rows: auto;
    row-gap: 1rem;
  }

  .descriptionMainContainer .section .leftSection .pictureRoll {
    grid-template-columns: repeat(3, auto);
    height: auto;
  }

  .descriptionMainContainer .section .rightSection {
    padding: 1rem;
  }

  .descriptionMainContainer
    .section
    .rightSection
    .medicineAddToCart {
    justify-content: center;
  }
}
/* ======================================================== */
/* Mobile Responsive Styles */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Center-align footer content */
  .footerOne ul,
  .footerTwo .section,
  .footerThree .section {
    justify-content: center; /* Center-align content */
    text-align: center; /* Center-align text */
  }

  /* Adjust footerOne for mobile mode */
  .footerOne ul {
    grid-template-columns: 1fr; /* Stack items vertically */
    row-gap: 1rem; /* Add spacing between items */
  }

  .footerOne ul li {
    justify-self: center; /* Center-align list items */
  }

  /* Adjust footerTwo for mobile mode */
  .footerTwo .section {
    grid-template-columns: 1fr; /* Stack items vertically */
    row-gap: 1rem; /* Add spacing between items */
    padding: 2rem 1rem; /* Adjust padding */
  }

  .footerTwo .section .info,
  .footerTwo .section .inputsOne,
  .footerTwo .section .textArea,
  .footerTwo .section .submitButton {
    justify-self: center; /* Center-align items */
  }

  .footerTwo .section .inputsOne input,
  .footerTwo .section .textArea textarea {
    width: 100%; /* Ensure inputs take full width */
    max-width: 300px; /* Limit input width for better readability */
  }

  /* Adjust footerThree for mobile mode */
  .footerThree .section {
    grid-template-columns: 1fr; /* Stack items vertically */
    row-gap: 1rem; /* Add spacing between items */
    padding: 2rem 1rem; /* Adjust padding */
  }

  .footerThree .section .left {
    grid-template-columns: 1fr; /* Stack items vertically */
    grid-template-areas: "a" "b" "c" "d" "e"; /* Reorder grid areas */
  }

  .footerThree .section .left .heading,
  .footerThree .section .left .categories,
  .footerThree .section .left .medicines,
  .footerThree .section .left .others,
  .footerThree .section .left .summary {
    justify-self: center; /* Center-align items */
    text-align: center; /* Center-align text */
  }

  .footerThree .section .right {
    align-items: center; /* Center-align items */
    text-align: center; /* Center-align text */
  }

  .footerThree .section .right .playstore {
    justify-content: center; /* Center-align buttons */
  }

  .footerThree .section .right .mobileApp {
    justify-content: center; /* Center-align inputs */
  }
}

@media screen and (max-width: 480px) {
  /* Further adjustments for very small screens */
  .mainCardContainer .section {
    grid-template-columns: 1fr;
  }

  .navbarTwo .section ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .descriptionMainContainer .section .leftSection .pictureRoll {
    grid-template-columns: repeat(2, auto);
  }

  .footerOne ul {
    grid-template-columns: 1fr;
  }
}
/* ======================================================== */
/* Mobile Responsive Styles */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Adjust navbarOne for mobile mode */
  .navbarOne .section {
    grid-template-columns: auto 1fr; /* Logo and Search Bar */
    align-items: center;
    padding: 0.5rem;
    gap: 1rem; /* Add spacing between logo and search bar */
  }

  /* Hide address and phone number in mobile mode */
  .navbarOne .section .address,
  .navbarOne .section .telphone {
    display: none;
  }

  /* Ensure the search bar takes up remaining space */
  .navbarOne .section .search {
    width: 100%;
    margin: 0;
  }

  /* Adjust the search bar input */
  .navbarOne .section .search input {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem; /* Adjust padding for search icon */
  }

  /* Ensure the logo is properly sized */
  .navbarOne .section figure {
    width: 6rem; /* Adjust logo size if needed */
  }
}

/* ======================================================== */
/* Mobile Responsive Styles */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Adjust navbarTwo for mobile mode */
  .navbarTwo .section {
    display: flex;
    justify-content: space-between; /* Space between hamburger and cart */
    align-items: center;
    padding: 0.5rem;
    position: relative; /* Ensure the dropdown is positioned relative to navbarTwo */
  }

  /* Ensure the hamburger icon is visible */
  .navbarTwo .section .hamburger {
    display: block;
    font-size: 2rem; /* Increase the size of the hamburger icon */
    cursor: pointer;
    color: var(--ternary-color);
    padding: 0.5rem;
    z-index: 1001; /* Ensure it's above other elements */
  }

  /* Ensure the hamburger icon has a proper clickable area */
  .navbarTwo .section .hamburger i {
    pointer-events: none; /* Ensure clicks are registered on the parent */
  }

  /* Ensure the cart button is visible and aligned to the right */
  .navbarTwo .section .not-cart {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1002; /* Ensure it's above the hamburger menu */
  }

  /* Adjust the cart icon and quantity */
  .navbarTwo .section .not-cart .cart {
    position: relative;
    color: var(--ternary-color);
    text-decoration: none;
  }

  .navbarTwo .section .not-cart .cart .cartItemsQuantity {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--secondary-color);
    color: white;
    border-radius: 50%;
    padding: 0.25rem;
    font-size: 0.75rem;
  }

  /* Hide the default navbarTwo menu items */
  .navbarTwo .section ul {
    display: none;
    position: absolute; /* Position the dropdown absolutely */
    top: 100%; /* Position below the navbar */
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure the menu appears above other content */
  }

  /* Style the dropdown menu when active */
  .navbarTwo .section ul.active {
    display: flex; /* Show the dropdown menu */
    flex-direction: column;
  }

  .navbarTwo .section ul.active li {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    color: var(--ternary-color);
    cursor: pointer;
  }

  .navbarTwo .section ul.active li:hover {
    background: #f5f5f5;
  }

  /* Hide profile section on mobile */
  .navbarTwo .section .profile {
    display: none;
  }
}
/* ======================================================== */
/* Mobile Responsive Styles */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Adjust navbarThree for mobile mode */
  .navbarThree .navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Prevent wrapping into multiple lines */
    align-items: center;
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
    white-space: nowrap; /* Prevent text from wrapping */
  }

  .navbarThree .navigation span,
  .navbarThree .navigation a {
    padding-right: 0.5rem; /* Reduce spacing between items */
    font-size: 14px; /* Adjust font size if needed */
  }

  .navbarThree .navigation i {
    font-size: 12px; /* Adjust icon size if needed */
  }
}

/* ======================================================== */
/* Mobile Responsive Styles for Checkout Page Body */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden !important; /* Hide horizontal scrollbar */
  }

  /* Adjust the main checkout container */
  .checkoutMainContainer {
    width: 100vw !important; /* Ensure it takes full viewport width */
    max-width: 100% !important; /* Prevent overflow */
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer .section {
    grid-template-columns: 1fr !important; /* Stack columns vertically */
    padding: 1rem !important; /* Add padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  /* Adjust the left section (cart items) */
  .checkoutMainContainer .section .checkoutLeftSection {
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .addressContainer {
    grid-template-columns: 1fr !important; /* Stack address container items vertically */
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .addressContainer
    figure {
    display: none !important; /* Hide the icon in mobile mode */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .addressContainer
    .address {
    text-align: center !important; /* Center-align address text */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer {
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cartItemCardContainer {
    max-height: none !important; /* Remove max-height for scrolling */
    overflow-y: visible !important; /* Allow content to flow naturally */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cardItemCard {
    grid-template-columns: 1fr !important; /* Stack cart item cards vertically */
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cardItemCard
    figure {
    width: 100% !important; /* Make the image take full width */
    height: auto !important; /* Adjust height automatically */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cardItemCard
    .cardItemInfo {
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cardItemCard
    .cardItemInfo
    .firstInfo {
    grid-template-columns: 1fr !important; /* Stack first info items vertically */
  }

  .checkoutMainContainer
    .section
    .checkoutLeftSection
    .cartItemsContainer
    .cardItemCard
    .cardItemInfo
    .extraOption {
    grid-template-columns: 1fr !important; /* Stack extra options vertically */
    gap: 0.5rem !important; /* Add spacing between buttons */
  }

  /* Adjust the right section (checkout summary) */
  .checkoutMainContainer .section .checkoutRightSection {
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer .section .checkoutRightSection form {
    padding: 0.5rem !important; /* Reduce padding */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItems {
    row-gap: 1rem !important; /* Add spacing between items */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsTotal,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsDiscount,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsPriority,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsOrderTotal {
    grid-template-columns: 1fr !important; /* Stack checkout items vertically */
    text-align: center !important; /* Center-align text */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsButtons {
    grid-template-columns: 1fr !important; /* Stack buttons vertically */
    gap: 1rem !important; /* Add spacing between buttons */
    width: 100% !important; /* Ensure it takes full width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 !important; /* Remove margin */
  }

  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsButtons
    button {
    width: 100% !important; /* Make buttons full width */
  }
}

/* ======================================================== */
/* Mobile Responsive Styles for Checkout Items */
/* ======================================================== */

@media screen and (max-width: 768px) {
  /* Center-align all elements under checkoutItems */
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItems {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center-align horizontally */
    text-align: center !important; /* Center-align text */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Center-align individual items */
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsTotal,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsDiscount,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsPriority,
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsOrderTotal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center-align horizontally */
    text-align: center !important; /* Center-align text */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Center-align the itemTotal */
  #itemTotal {
    text-align: center !important; /* Center-align text */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Center-align the orderTotal */
  #orderTotal {
    text-align: center !important; /* Center-align text */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Center-align the checkout buttons */
  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsButtons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center-align horizontally */
    text-align: center !important; /* Center-align text */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .checkoutMainContainer
    .section
    .checkoutRightSection
    .checkoutItemsButtons
    button {
    width: 80% !important; /* Make buttons slightly smaller than full width */
    margin: 0.5rem 0 !important; /* Add spacing between buttons */
  }
}