:root {
  --header-font: "Kufam", sans-serif;
  --text-font: "Cairo", sans-serif;
  --header-font-size1: 60px;
  --header-font-size2: 48px;
  --text-font-size: 24px;
  --text-font-size2: 22px;
}

html {
  overflow-x: hidden;
}

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

body {
  overflow-x: hidden;
  width: 100%;
}

.topLvlContainer {
  width: 100vw;
  overflow: hidden;
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed !important;
}


/*======================================================================================================*/
.section_1_container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: var(--BgColorSectionOne);
  display: flex;
  margin-bottom: 150px;
}

.section_1_text_container {
  width: 55%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section_1_text {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  direction: rtl;
  margin: auto;
}

.section_1_title_container {
  display: flex;
  flex-direction: column;
}
/* todo  delete --titleColorBody ... all the unused css variables  */
/* todo  make the font-size responsive */

.section_1_title {
  font-size: var(--TitleSizeSectionOne);
  font-family: var(--header-font);
  font-weight: 500;
  color: #5f4304 !important;
}

.section_1_subTitle {
  font-size: var(--SubTitleSizeSectionOne);
  font-family: var(--header-font);
  font-weight: 300;
  color: var(--SubTitleColorSectionOne);
}

.section_1_description {
  font-size: var(--DescriptionSizeSectionOne);
  font-family: var(--text-font);
  text-align: justify;
  color: var(--DescriptionColorSectionOne);
  max-height: 250px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.section_1_description::-webkit-scrollbar {
  background: transparent;
  width: 6px;
}

.section_1_description::-webkit-scrollbar-track {
  background: transparent;
}

.section_1_description::-webkit-scrollbar-thumb {
  background: var(--DescriptionColorSectionOne);
  border-radius: 4px;
}

.section_1_img_container {
  width: 45%;
  height: 100%;
}

.section_1_img {
  width: 100%;
  height: 100%;
}

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

.section_1_navigation {
  display: flex;
  flex-direction: column;
  margin: 20px 50px;
}

.section_1_navigation > svg {
  width: 70px;
  height: 70px;
  transform: rotate(125deg);
}

.section_1_navigation > svg path {
  fill: var(--ButtonBackgroundSectionOne);
}

.section_1_navigation p {
  color: #ffffff;
  font-size: var(--text-font-size2);
}

.section_1_navigation_text {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 90px;
  padding: 0px 20px;
  border: 2px solid var(--ButtonBackgroundSectionOne);
  border-radius: 50px;
  background-color: var(--ButtonBackgroundSectionOne);
  color: #5f4304;
  cursor: pointer;
}

.section_1_navigation_text:hover {
  background-color: var(--BgColorSectionOne);
}

.section_1_navigation_text:hover p {
  color: var(--ButtonBackgroundSectionOne);
}

.section_1_img_icons {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
}

.section_1_img_icons svg {
  width: 35px;
  height: 35px;
}




/*======================================================================================================*/
.section_2_container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  background-color: var(--BgColorSectionTwo);
  margin-bottom: 100px;
}

.section_2_left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  direction: rtl;
}

.section_2_left h1 {
  font-size: var(--TitleSizeSectionTwo);
  font-family: var(--header-font);
  font-weight: 300;
  color: var(--TitleColorSectionTwo);
}

.section_2_left p {
  font-size: var(--DescriptionSizeSectionTwo);
  font-family: var(--text-font);
  text-align: justify;
  margin-top: 20px;
  color: var(--DescriptionColorSectionTwo);
}

 .section_2_left div li {
  font-size: var(--ListSizeSectionTwo);
  font-family: var(--text-font);
  text-align: justify;
  margin-top: 20px;
  color: var(--ListColorSectionTwo);
 }

.section_2_left.ar div ul {
  list-style-type: disc !important;
  overflow: unset;
  padding-right: 50px;
  padding-left: 0;
}

.section_2_left.en div ul {
  list-style-type: disc !important;
  overflow: unset;
  padding-right: 0;
  padding-left: 50px;
}

.section_2_left div li {
  display: list-item;
}

.section_2_right {
  width: 400px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.section_2_right div {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.section_2_right div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}




/*======================================================================================================*/
.section_3_container {
  width: 100%;
  padding: 50px 10%;
  margin: auto auto 100px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 60px;
  background-color: var(--BgColorSectionThree);
}

.section_3_card {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.section_3_card:nth-child(2) {
  flex-direction: row-reverse;
}

.section_3_card_img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.section_3_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.section_3_card_text {
  width: 40%;
  direction: rtl;
}

.section_3_card_text p {
  font-family: var(--text-font);
  text-align: justify;
}

.section_3_card_text #DescriptionSectionThree1 {
  font-size: var(--DescriptionSizeSectionThree1);
  color: var(--DescriptionColorSectionThree1);
}
.section_3_card_text #DescriptionSectionThree2 {
  font-size: var(--DescriptionSizeSectionThree2);
  color: var(--DescriptionColorSectionThree2);
}
.section_3_card_text #DescriptionSectionThree3 {
  font-size: var(--DescriptionSizeSectionThree3);
  color: var(--DescriptionColorSectionThree3);
}




/*======================================================================================================*/
.section_4_container {
  width: 100%;
  margin-bottom: 50px;
  padding: 60px 60px 100px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
  background-color: var(--BgColorSectionFour);
}

.section_4_header {
  text-align: center;
  font-family: var(--header-font);
  font-size: var(--TitleSizeSectionFour);
  font-weight: 300;
  color: var(--TitleColorSectionFour);
}

.section_4_cards {
  height: 750px;
  display: flex;
  justify-content: center;
  position: relative;
}

.section_4_card {
  width: 450px;
  height: 600px;
  position: absolute;
  border: 3px solid #3C3C3C;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.section_4_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_4_card svg {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 50%);
  background-color: #ffffff;
  border-radius: 50%;
  padding: 10px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.section_4_card:nth-child(1) {
  transform: rotate(-6deg);
  top: 7%;
  right: 63%;
}

.section_4_card:nth-child(2) {
  z-index: 5;
}

.section_4_card:nth-child(3) {
  transform: rotate(6deg);
  top: 7%;
  left: 63%;
}




/*======================================================================================================*/
.section_5_container {
  width: 1400px;
  height: 900px;
  margin: auto auto 150px auto;
}

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




/*======================================================================================================*/
.section_6_container {
  width: 100%;
  margin-bottom: 60px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
  background-color: var(--BgColorSectionSix);
}

.section_6_card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.section_6_card:nth-child(2) {
  flex-direction: row-reverse;
}

.section_6_card_img {
  width: 800px;
  height: 500px;
  border-radius: 10px;
}

.section_6_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 15px rgba(0, 0, 0, 0.1);
}

.section_6_card_text {
  width: 40%;
  direction: rtl;
}

.section_6_card_text h1 {
  font-family: var(--header-font);
  font-weight: 300;
}

#TitleSectionSix1 {
  font-size: var(--TitleSizeSectionSix1);
  color: var(--TitleColorSectionSix1);
}

#TitleSectionSix2 {
  font-size: var(--TitleSizeSectionSix2);
  color: var(--TitleColorSectionSix2);
}

.section_6_card_text p {
  font-family: var(--text-font);
  text-align: justify;
}

#DescriptionSectionSix1 {
  font-size: var(--DescriptionSizeSectionSix1);
  color: var(--DescriptionColorSectionSix1);
}

#DescriptionSectionSix2 {
  font-size: var(--DescriptionSizeSectionSix2);
  color: var(--DescriptionColorSectionSix2);
}




/*======================================================================================================*/
.section_7_container {
  width: 100%;
  margin-bottom: 60px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  background-color: var(--BgColorSectionSeven);
}

.section_7_container h1 {
  font-family: var(--header-font);
  font-size: var(--TitleSizeSectionSeven);
  font-weight: 300;
  color: var(--TitleColorSectionSeven);
}

.section_7_card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 40px;
}

.section_7_card_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--text-font);
  font-size: 18px;
}

.section_7_card_img {
  width: 350px;
  height: 350px;
  border-radius: 10px;
}

.section_7_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}




/*======================================================================================================*/
.section_8_container {
  width: 100%;
  margin-bottom: 100px;
  padding: 20px 60px 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--BgColorSectionEight);
}

.section_8_text {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.section_8_text h1 {
  font-family: var(--header-font);
  font-size: var(--TitleSizeSectionEight);
  font-weight: 300;
  color: var(--TitleColorSectionEight);
}

.section_8_text p {
  font-size: var(--DescriptionSizeSectionEight);
  font-family: var(--text-font);
  text-align: justify;
  color: var(--DescriptionColorSectionEight);
  text-align: center;
  direction: rtl;
}

.section_8_content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.section_8_content div {
  width: 500px;
  height: 350px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(60, 67, 86, 0.3), 0 6px 6px rgba(0, 0, 0, 0.1);
}

.section_8_content div:nth-child(2) {
  margin-top: 100px;
}

.section_8_content div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}




/*======================================================================================================*/
section:has(> .section_9_container) {
  padding: 50px 0;
  margin-bottom: 10px;
  background-color: var(--BgColorSectionNine);
}

.section_9_container {
  width: max-content;
  margin: auto;
  /* margin-bottom: 100px; */
  display: grid;
  grid-template-columns: repeat(2, 500px);
  grid-template-rows: repeat(2, 375px);
  gap: 50px;
  grid-template-areas:
    "div1 div2"
    "div1 div3";
}

.section_9_left {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: div1;
}

.section_9_left div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.section_9_left div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_9_right {
  display: contents;
}

.section_9_right_img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  grid-area: div2;
}

.section_9_right_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_9_right_txt {
  width: 100%;
  height: 100%;
  grid-area: div3;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-scroll-container::-webkit-scrollbar {
  display: none;
}

.section_9_right_txt p {
  font-size: var(--DescriptionSizeSectionNine);
  font-family: var(--text-font);
  text-align: justify;
  color: var(--DescriptionColorSectionNine);
  direction: rtl;
}




/*======================================================================================================*/
.section_10_container {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: var(--BgColorSectionTen);
  margin-bottom: 100px;
}

.section_10_container h1 {
  font-family: var(--header-font);
  font-size: var(--TitleSizeSectionTen);
  font-weight: 300;
  color: var(--TitleColorSectionTen);
}

.section_10_imgs {
   display: grid;
  grid-template-columns: repeat(3, 500px);
  grid-template-rows: repeat(2, 375px);
  gap: 30px;
  grid-template-areas:
    "div1 div2 div4"
    "div1 div3 div4";
}

.section_10_img:nth-child(1) {
  width: 100%;
  height: 100%;
  grid-area: div1;
  border-radius: 10px;
}

.section_10_img:nth-child(1) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_10_img:nth-child(2) {
  width: 100%;
  height: 100%;
  grid-area: div2;
  border-radius: 10px;
}

.section_10_img:nth-child(2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_10_img:nth-child(3) {
  width: 100%;
  height: 100%;
  grid-area: div3;
  border-radius: 10px;
}

.section_10_img:nth-child(3) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section_10_img:nth-child(4) {
  width: 100%;
  height: 100%;
  grid-area: div4;
  border-radius: 10px;
}

.section_10_img:nth-child(4) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}




/*======================================================================================================*/

.section_11_container {
  margin-bottom: 100px;
  background-color: var(--BgColorSectionEleven);
  padding: 50px 0;
}

.section_11_text {
  width: 70%;
  font-family: var(--text-font);
  text-align: justify;
  text-align: center;
}

#TextSectionEleven1 {
  font-size: var(--TitleSizeSectionEleven1);
  color: var(--TitleColorSectionEleven1);
}

#TextSectionEleven2 {
  font-size: var(--TitleSizeSectionEleven2);
  color: var(--TitleColorSectionEleven2);
}

#TextSectionEleven3 {
  font-size: var(--TitleSizeSectionEleven3);
  color: var(--TitleColorSectionEleven3);
}


.section_11_cards {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.section_11_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.section_11_card_img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(60, 67, 86, 0.3), 0 6px 6px rgba(0, 0, 0, 0.1);
}

.section_11_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.section_11_card_text {
  font-size: var(--text-font-size);
  font-family: var(--text-font);
  text-align: center;
}




/*======================================================================================================*/
.product-details {
  font-family: var(--text-font);
  background-color: #fff7ef;
}

.modali {
  width: 50%;
  margin: auto auto 150px auto;
  /* border: 2px solid var(--FormBorderColor); */
  /* border-radius: 6px; */
  /* padding: 32px; */
  text-align: center;
  color: var(--FormTextColor);
  display: flex;
  flex-direction: column;
  row-gap: 24px;

  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 10px;
  background: #ffffff;
  border: 1px solid #eaecef;
  border-image: initial;
  border-radius: 10px;
  pad: 10px;
  padding: 14px;
  font-size: 14px;
}

.input_container {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.input_user_info, .input_address {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  flex-direction: row-reverse;
}

.input_user_info >*, .input_address >* {
  width: 50%;
}



#phone {
  width: 100%;
}
.input_container input,
.input_container select {
  text-align: left;
  border: 1px solid var(--FormBorderColor);
  height: 48px;
  /* width: 100%; */
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background-color: transparent;
  outline: none;
  color: var(--FormTextColor);
}

.input_container input::placeholder,
.input_container select {
  color: var(--FormTextColor);
}

.input_container input:focus, .input_container select:focus {
  border-color: red;
  box-shadow: 0 0 4px red;
}

.right-tr {
  direction: ltr !important;
  text-align: left;
}
.right-tr::placeholder {
  text-align: right;
}

.right-tr2 {
  direction: ltr !important;
  text-align: left;
}

.right-tr2::placeholder {
  text-align: left;
}

.line {
  /* margin-top: 20px; */
  height: 70px;
  position: relative;
}

.line span {
  width: 100%;
  border-bottom: 2px solid var(--FormBorderColor);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.label-span {
  padding: 0 10px;
  font-size: 22px;
  font-family: var(--text-font);
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 2;
  line-height: 1;
}


/* --- */
.quantity-wrapper {
  width: 20%;
  height: 48px;
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin: 5px 0;
}

.quantity-button {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: transparent;
  background-color: transparent;
  border-radius: 4px;
  user-select: none;
}

#decrease {
  left: 0;
}

#increase {
right: 0;
}

#quantity-input {
  width: 100%;
  height: 3rem;
  text-align: center;
  font-size: 1rem;
  padding: 0 27px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {   /* For Chrome, Safari, Edge, Opera */
-webkit-appearance: none;
margin: 0;
}

input[type=number] {    /* For Firefox */
-moz-appearance: textfield;
}


/* --- */
.price {
  display: flex;
  align-items: center;
  gap: 10px;
}

del {
  text-decoration: line-through;
}

/* --- */
.select-variants-container {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.select-variants-wrapper {
  display: flex;
  flex-direction: column;
}

.select-variants-disponibility {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.select-variants-img {
  width: 300px;
  height: 300px;
}

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

.select-variants-img2 {
  width: 300px;
  height: 300px;
}

.select-variants-img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select-variants-price {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  font-family: var(--text-font);
}

.name {
  font-size: 24px;
  font-weight: 700;
}

.stock-quantity {
  /* font-size: 20px; */
  display: flex;
  align-items: center;
  gap: 7px;
}

.price {
  font-size: 20px;
  font-weight: 600;
}

.full-price {
  position: relative;
  line-height: 1;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.full-price::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 60%;
  height: 2px;
  background: var(--additionalColor);
  transform: rotate(-20deg) translate(-50%, -50%);
  transform-origin: center;
}

.discount-price {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 5px;
}

.text-radio-group {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.text-radio-input {
  display: none;
}

.text-radio-label {
  min-width: 100px;
  cursor: pointer;
  padding: 8px 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-family: var(--text-font);
  font-weight: bold;
  color: var(--FormTextColor);
  transition: 0.3s;
}

.text-radio-input:checked + .text-radio-label {
  background-color: var(--additionalColor);
  color: white;
  border-color: var(--additionalColor);
}

.radio-group {
  color: var(--additionalColor);
}


/* --- */
.order-details-container {
  width: 80%;
  margin: auto;
}

.order-details{
  background: var(--bgColorBody);
  direction: rtl;
  border-radius: 10px;
}

#judecheckout_count_number {
  display: inline-block;
  font-size: 16px;
  padding: 2px 10px;
  border-radius: 3px;
  color: var(--white-text);
  font-weight: bold;
}

#judecheckout_count_number:before {
  content: 'x ';
}

.summary-product-title {
  font-weight: bold !important;
  color: var(--FormTextColor);
}

.summary-select-state {
  font-size: 16px;
  opacity: .8;
}

.pickup-container, .home-delivery-container {
  font-weight: 500;
}

.pickup-container, .home-delivery-container {
  font-weight: 700;
  font-size: 16px;
  color: var(--FormTextColor);
  margin: 10px 0;
  text-align: start;
}

.order-details table {
  width: 90%;
  margin: auto;
  padding: 20px;
}

.order-details td {
  border: none;
  border-bottom: 1px solid var(--FormBorderColor);
  padding: 10px 5px 10px;
  font-family: 'cairo', sans-serif;
  font-size: 20px;
}

.order-details td:first-child {
  width: 65%;
  text-align: right;
}

.order-details td:last-child {
  width: 35%;
  text-align: center;
}

.variant-price {
  font-weight: bold;
}


.square-radio {
  display: none;
}

.square-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  cursor: pointer;
  border-radius: 4px;
  width: fit-content;
  position: relative;
}

.square-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--additionalColor);
  display: inline-block;
  margin-right: 10px;
  background: white;
}

.square-radio:checked + .square-label::before {
  background-color: var(--additionalColor);
}

.remark-container {
  display: flex;
  flex-direction: column;
}

.remark-container label {
  font-size: 20px;
  font-family: var(--text-font);
}

.remark-input {
  width: 80%;
  padding: 10px;
  border: 1px solid var(--FormBorderColor);
  border-radius: 4px;
  font-size: 17px;
  resize: none;
  margin: 10px auto;
  text-align: right;
  color: var(--FormTextColor);
}

.remark-input::placeholder {
  color: var(--FormTextColor);
}

.remark-input:focus {
  border: 2px solid var(--FormBorderColor);
  outline: none;
}

.add-to-cart {
  padding: 14px 16px;
  font-family: var(--header-font);
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  background-color: var(--FormBorderColor);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 40%;
  height: 48px;
}



.loader_container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 49;
  pointer-events: none;
  display: none;
}

.loader_container.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  width: 48px;
  height: 48px;
  border: 3px solid #FFF;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 50;
}

.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #4693ff transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader.running {
  display: inline-block;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #c62828;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  opacity: 0;
  z-index: 100;
  transition: transform 0.5s ease, opacity 0.5s ease;
  -webkit-transition: transform 0.5s ease, opacity 0.5s ease;
}

#snackbar.show {
  visibility: visible;
  transform: translate(-50%, -30%);
  opacity: 1;
}

.grecaptcha-badge {
  position: absolute !important;
  bottom: 0 !important;
}

.shipping-cost {
  font-weight: bold;
}

.no-shipping {
  line-height: 2;
}

header, .grdfooter {
  display: none;
}


/*
"https://i.ibb.co/rK5LFK0K/refund-2-svgrepo-com.png","https://i.ibb.co/VWVJ49RQ/gui-shipping-svgrepo-com.png","https://i.ibb.co/rfXwX72z/24-hours-support.png"
*/
.terms {
  max-height:60vh;
  overflow-y:auto;
  font-size: 15px;
  text-align: justify;
  font-family: var(--text-font);
  text-transform: lowercase;
  direction: ltr;
  padding-right: 10px;
}

.terms p {
  margin-bottom: 15px;
  font-weight: 600;
}

.payment-method {
  width: 80%;
  margin: 20px auto auto;
}



/********** paiment *****/
/* Payment Methods Styles */
.payment-methods-container {
  background: var(--background-color);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
}

/* Animation for selection */
@keyframes select-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--primary-color-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
  }
}

.payment_logo {
  width: 18px;
  object-fit: contain;
  margin-left: 4px;
}

.payment-name {
  font-family: var(--text-font);
  font-size: 18px;
  font-weight: 500;
  /* color: var(--FormBorderColor); */
  text-align: center;
  margin-left: 10px;
}

.payment-method-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  padding: 0 5px;
  gap: 10px;
}
#cib-conditions-container {
  display: none;
  margin: 8px 15px;
  padding: 12px 15px;
  border-radius: 3px;
  background-color: transparent;
  border: 1px solid rgb(232, 232, 232);
  transition: 0.3s;
  margin-bottom: 0px;
}

/*
 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 ┃   responsive design for all sections   ┃
 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
*/

@media (max-width: 1680px) {
  .section_4_container {
    padding: 60px;
  }

  .section_8_content div {
    width: 450px;
    height: 315px;
  }
}




/*======================================================================================================*/
@media (max-width: 1440px) {
  .section_2_right div {
    width: 340px;
    height: 340px;
  }

  .section_2_right {
    width: 340px;
  }

  .section_3_card_img {
    width: 340px;
    height: 340px;
  }

  .section_4_cards {
    height: 650px;
  }

  .section_4_card {
    width: 405px;
    height: 540px;
  }

  .section_4_card svg {
    width: 90px;
    height: 90px;
  }

  .section_5_container {
    width: 1120px;
    height: 720px;
  }

  .section_6_container {
    padding: 40px;
  }

  .section_6_card_img {
    /* width: 715px;
    height: 450px; */
    width: 680px;
    height: 425px;
  }

  .section_7_card_img {
    width: 315px;
    height: 315px;
  }

  .section_8_content {
    gap: 60px;
  }

  .section_8_content div {
    width: 400px;
    height: 280px;
  }

  .section_9_container {
    grid-template-columns: repeat(2, 400px);
    grid-template-rows: repeat(2, 300px);
  }

  .section_10_imgs {
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(2, 300px);
  }

  .section_11_card_img {
    width: 270px;
    height: 270px;
  }

  .modali {
    width: 70%;
  }
}




/*======================================================================================================*/
@media (max-width: 1366px) {
  .section_1_title {
    font-size: calc(var(--TitleSizeSectionOne) * 0.8);
  }

  .section_1_subTitle {
    font-size: calc(var(--SubTitleSizeSectionOne) * 0.9);
  }

  .section_1_description {
    font-size: calc(var(--DescriptionSizeSectionOne) * 0.8);
  }

  .section_1_navigation p {
    font-size: calc(var(--text-font-size2) * 0.9);
  }

  .section_1_text {
    row-gap: 15px;
  }

  .section_2_left div li {
    margin-top: 14px;
  }

  .section_2_right div, .section_3_card_img {
    width: 306px;
    height: 306px;
  }

  .section_2_left h1 {
    font-size: calc(var(--TitleSizeSectionTwo) * 0.8);
  }

  .section_2_left p {
    font-size: calc(var(--DescriptionSizeSectionTwo) * 0.9);
  }

  .section_2_left div li {
    font-size: calc(var(--ListSizeSectionTwo) * 0.9);
  }

  .section_3_container {
    margin: auto auto 50px auto;
  }

  .section_3_card_text #DescriptionSectionThree1 {
    font-size: calc(var(--DescriptionSizeSectionThree1) * 0.9);
  }

  .section_3_card_text #DescriptionSectionThree2 {
    font-size: calc(var(--DescriptionSizeSectionThree2) * 0.9);
  }

  .section_3_card_text #DescriptionSectionThree3 {
    font-size: calc(var(--DescriptionSizeSectionThree3) * 0.9);
  }

  .section_4_header {
    font-size: calc(var(--TitleSizeSectionFour) * 0.8);
  }

  .section_6_card_img {
    width: 612px;
    height: 382px;
  }

  #TitleSectionSix1 {
    font-size: calc(var(--TitleSizeSectionSix1) * 0.8);
  }

  #TitleSectionSix2 {
    font-size: calc(var(--TitleSizeSectionSix2) * 0.8);
  }

  #DescriptionSectionSix1 {
    font-size: calc(var(--DescriptionSizeSectionSix1) * 0.9);
  }

  #DescriptionSectionSix2 {
    font-size: calc(var(--DescriptionSizeSectionSix2) * 0.9);
  }

  .section_7_container h1 {
    font-size: calc(var(--TitleSizeSectionSeven) * 0.8);
  }

  .section_7_card_img {
    width: 261px;
    height: 261px;
  }

  .section_8_content {
    gap: 30px;
  }

  .section_8_text h1 {
    font-size: calc(var(--TitleSizeSectionEight) * 0.9);
  }

  .section_8_text p {
    font-size: calc(var(--DescriptionSizeSectionEight) * 0.9);
  }

  .section_9_right_txt p {
    font-size: calc(var(--DescriptionSizeSectionNine) * 0.9);
  }

  .section_9_container {
    grid-template-columns: repeat(2, 350px);
    grid-template-rows: repeat(2, 262px );
  }

  .section_10_imgs {
    grid-template-columns: repeat(3, 350px);
    grid-template-rows: repeat(2, 262px );
  }

  .section_10_container h1 {
    font-size: calc(var(--TitleSizeSectionTen) * 0.8);
  }

  #TextSectionEleven1 {
    font-size: calc(var(--TitleSizeSectionEleven1) * 0.9);
  }

  #TextSectionEleven2 {
    font-size: calc(var(--TitleSizeSectionEleven2) * 0.9);
  }

  #TextSectionEleven3 {
    font-size: calc(var(--TitleSizeSectionEleven3) * 0.9);
  }
}




/*======================================================================================================*/
@media (max-width: 1024px) {
  .section_1_text {
    /* margin-top: 0; */
    row-gap: 10px;
  }

  .section_1_title {
    font-size: calc(var(--TitleSizeSectionOne) * 0.65);
  }

  .section_1_subTitle {
    font-size: calc(var(--SubTitleSizeSectionOne) * 0.8);
  }

  .section_1_description {
    font-size: calc(var(--DescriptionSizeSectionOne) * 0.7);
  }

  .section_1_navigation {
    margin: 20px;
  }

  .section_1_navigation p {
    font-size: calc(var(--text-font-size2) * 0.8);
  }

  .section_1_navigation > svg {
    width: 50px;
    height: 50px;
  }

  .section_2_right {
    width: 272px;
  }
  .section_2_right div {
    width: 272px;
    height: 272px;
  }

  .section_2_left p, .section_2_left div li {
    margin-top: 10px;
  }

  .section_2_left h1 {
    font-size: calc(var(--TitleSizeSectionTwo) * 0.7);
  }

  .section_2_left p {
    font-size: calc(var(--DescriptionSizeSectionTwo) * 0.8);
  }

  .section_2_left div li {
    font-size: calc(var(--ListSizeSectionTwo) * 0.8);
  }

  .section_3_card_img {
    width: 272px;
    height: 272px;
  }

  .section_3_card_text #DescriptionSectionThree1 {
    font-size: calc(var(--DescriptionSizeSectionThree1) * 0.8);
  }

  .section_3_card_text #DescriptionSectionThree2 {
    font-size: calc(var(--DescriptionSizeSectionThree2) * 0.8);
  }

  .section_3_card_text #DescriptionSectionThree3 {
    font-size: calc(var(--DescriptionSizeSectionThree3) * 0.8);
  }

  .section_4_header {
    font-size: calc(var(--TitleSizeSectionFour) * 0.7);
  }

  .section_4_card:nth-child(1) {
    top: 5%;
    right: 57%;
  }

  .section_4_card:nth-child(3) {
    top: 5%;
    left: 57%;
  }

  .section_4_card {
    width: 360px;
    height: 480px;
    padding: 10px;
  }

  .section_4_card svg {
    width: 72px;
    height: 72px;
  }

  .section_5_container {
    width: 896px;
    height: 576px;
  }

  .section_6_card_img {
    width: 467px;
    height: 305px;
  }

  #TitleSectionSix1 {
    font-size: calc(var(--TitleSizeSectionSix1) * 0.7);
  }

  #TitleSectionSix2 {
    font-size: calc(var(--TitleSizeSectionSix2) * 0.7);
  }

  #DescriptionSectionSix1 {
    font-size: calc(var(--DescriptionSizeSectionSix1) * 0.8);
  }

  #DescriptionSectionSix2 {
    font-size: calc(var(--DescriptionSizeSectionSix2) * 0.8);
  }

  .section_7_container {
    padding: 40px;
  }

  .section_7_container h1 {
    font-size: calc(var(--TitleSizeSectionSeven) * 0.7);
  }

  .section_7_card_img {
    width: 212px;
    height: 212px;
  }

  .section_8_container {
    gap: 30px;
  }

  .section_8_content {
    flex-wrap: wrap;
  }

  .section_8_text h1 {
    font-size: calc(var(--TitleSizeSectionEight) * 0.7);
  }

  .section_8_text p {
    font-size: calc(var(--DescriptionSizeSectionEight) * 0.8);
  }

  .section_8_content div {
    width: 350px;
    height: 245px;
  }

  .section_8_content div:nth-child(2) {
    margin-top: 0;
  }

  .section_9_container {
    grid-template-columns: repeat(2, 315px);
    grid-template-rows: repeat(2, 236px);
  }

  .section_9_right_txt p {
    font-size: calc(var(--DescriptionSizeSectionNine) * 0.8);
  }

  .section_10_container h1 {
    font-size: calc(var(--TitleSizeSectionTen) * 0.7);
  }

  .section_10_imgs {
    grid-template-columns: repeat(2, 315px);
    grid-template-rows: repeat(3, 236px);
    grid-template-areas:
      "div1 div3"
      "div1 div4"
      "div2 div4";
  }

  .section_11_card_img {
    width: 216px;
    height: 216px;
  }

  #TextSectionEleven1 {
    font-size: calc(var(--TitleSizeSectionEleven1) * 0.8);
  }

  #TextSectionEleven2 {
    font-size: calc(var(--TitleSizeSectionEleven2) * 0.8);
  }

  #TextSectionEleven3 {
    font-size: calc(var(--TitleSizeSectionEleven3) * 0.8);
  }

  .modali {
    width: 80%;
  }

  .text-radio-group {
    width: 100%;
  }

  .select-variants-img {
    width: 235px;
    height: 235px;
  }

  .select-variants-img2 {
    width: 235px;
    height: 235px;
  }
}




/*======================================================================================================*/
@media (max-width: 991px) {
  .section_1_container {
    max-height: 600px;
  }

  .section_2_left.ar div ul {
    padding-right: 30px;
    padding-left: 0;
  }

  .section_2_left.en div ul {
    padding-right: 0;
    padding-left: 30px;
  }

  .section_2_right div {
    width: 244px;
    height: 244px;
  }

  .section_3_card_img {
    width: 244px;
    height: 244px;
  }

  .section_6_card_img {
    width: 420px;
    height: 274px;
  }

  .section_8_text {
    width: 90%;
  }
}


.controls{
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*======================================================================================================*/
@media (max-width: 800px) {
  .section_1_navigation {
    margin: 10px;
  }

  .section_4_container {
    padding: 35px 35px 0 35px;
  }

  .section_4_card:nth-child(1) {
    right: 47%;
  }

  .section_4_card:nth-child(3) {
    left: 47%;
  }

  .section_5_container {
    width: 716px;
    height: 460px;
  }

  .section_6_card_img {
    width: 373px;
    height: 244px;
  }

  .section_7_card {
    width: 90%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
  }

  .section_8_content {
    width: 80%;
  }

  .section_8_content div:nth-child(1) {
    margin-left: auto;
  }

  .section_8_content div:nth-child(3) {
    margin-right: auto;
  }

  .section_9_container {
    gap: 30px;
  }

  .section_10_imgs {
    grid-template-columns: repeat(2, 283px);
    grid-template-rows: repeat(3, 212px);
  }

  .section_11_card_img {
    width: 174px;
    height: 174px;
  }

  .input_user_info, .input_address {
    width: 100%;
  }

  .select-variants-container {
    width: 100%;
  }

  .order-details-container {
    width: 100%;
  }

  .label-span {
    font-size: 20px;
  }

  .name {
    font-size: 22px;
  }

  .discount-price, .stock-quantity, .order-details td {
    font-size: 18px;
  }

  .section_1_title {
    font-size: calc(var(--TitleSizeSectionOne) * 0.6);
  }

  .section_1_subTitle {
    font-size: calc(var(--SubTitleSizeSectionOne) * 0.7);
  }

  .section_1_description {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionOne) * 0.6), 99px);
    max-height: 200px;
  }

  .section_1_navigation p {
    font-size: clamp(16px, calc(var(--text-font-size2) * 0.7), 99px);
  }

  .section_2_left h1 {
    font-size: calc(var(--TitleSizeSectionTwo) * 0.6);
  }

  .section_2_left p {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionTwo) * 0.7), 99px);
  }

  .section_2_left div li {
    font-size: clamp(16px, calc(var(--ListSizeSectionTwo) * 0.7), 99px);
  }

  .section_3_card_text #DescriptionSectionThree1 {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionThree1) * 0.7), 99px);
  }

  .section_3_card_text #DescriptionSectionThree2 {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionThree2) * 0.7), 99px);
  }

  .section_3_card_text #DescriptionSectionThree3 {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionThree3) * 0.7), 99px);
  }

  .section_4_header {
    font-size: calc(var(--TitleSizeSectionFour) * 0.6);
  }

  #TitleSectionSix1 {
    font-size: calc(var(--TitleSizeSectionSix1) * 0.6);
  }

  #TitleSectionSix2 {
    font-size: calc(var(--TitleSizeSectionSix2) * 0.6);
  }

  #DescriptionSectionSix1 {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionSix1) * 0.7), 99px);
  }

  #DescriptionSectionSix2 {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionSix2) * 0.7), 99px);
  }

  .section_7_container h1 {
    font-size: calc(var(--TitleSizeSectionSeven) * 0.6);
  }

  .section_8_text h1 {
    font-size: clamp(16px, calc(var(--TitleSizeSectionEight) * 0.7), 99px);
  }

  .section_8_text p {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionEight) * 0.7), 99px);
  }

  .section_9_right_txt p {
    font-size: clamp(16px, calc(var(--DescriptionSizeSectionNine) * 0.7), 99px);
  }

  .section_10_container h1 {
    font-size: calc(var(--TitleSizeSectionTen) * 0.6);
  }

  #TextSectionEleven1 {
    font-size: clamp(16px, calc(var(--TitleSizeSectionEleven1) * 0.7), 99px);
  }

  #TextSectionEleven2 {
    font-size: clamp(16px, calc(var(--TitleSizeSectionEleven2) * 0.7), 99px);
  }

  #TextSectionEleven3 {
    font-size: clamp(16px, calc(var(--TitleSizeSectionEleven3) * 0.7), 99px);
  }

  .select-variants-img {
    width: 180px;
    height: 180px;
  }

  .select-variants-img2 {
    width: 180px;
    height: 180px;
  }

  .controls {
    gap: 10px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 10px 20px;
    background: #fff;
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
  }

  .quantity-wrapper{
    width: 25%;
  }

  .add-to-cart{
    width: 50%;
  }
}




/*======================================================================================================*/
@media (max-width: 768px) {
  .section_6_card_img {
    width: 335px;
    height: 219px;
  }

}




/*======================================================================================================*/
@media (max-width: 600px) {

  .section_1_container {
    height: initial;
    max-height: max-content;
    flex-direction: column-reverse;
  }

  .section_1_img_container {
    width: 100%;
  }

  .section_1_text_container {
    width: 100%;
    position: relative;
    padding: 25px;
    top: auto;
    left: auto;
    transform: none;
    gap: 20px;
  }

  .section_2_container {
    flex-direction: column-reverse;
  }

  .section_2_right {
    width: 100%;
    flex-direction: row;
  }

  .section_2_left {
    width: 100%;
    padding: 0 50px 50px;
  }

  .section_3_container {
    padding: 50px 5%;
  }

  .section_3_card_text {
    width: 50%;
  }

  .section_3_card_img {
    width: 195px;
    height: 195px;
  }

  .section_4_container {
    gap: 50px;
  }

  .section_4_cards {
      height: 470px;
  }

  .section_4_card {
    width: 270px;
    height: 360px;
  }

  .section_4_card svg {
    width: 64px;
    height: 64px;
  }

  .section_5_container {
    /* width: 572px;
    height: 327px; */
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .section_6_container {
    gap: 50px;
    padding: 30px 40px;
  }

  .section_6_card {
    flex-direction: column-reverse !important;
    gap: 20px;
  }

  .section_6_card_text {
    width: 90%;
  }

  .section_7_card_img {
    width: 190px;
    height: 190px;
  }

  .section_7_card {
    gap: 30px;
  }

  .section_8_content div:nth-child(1) {
    margin-left: 0 !important;
  }

  .section_8_content div:nth-child(3) {
    margin-right: 0 !important;
  }

  .section_9_container {
    grid-template-columns: repeat(2, 252px);
    grid-template-rows: repeat(2, 188px);
    gap: 20px;
  }

  .section_10_container {
    padding: 30px 30px 50px;
  }

  .section_10_imgs {
    grid-template-columns: repeat(2, 252px);
    grid-template-rows: repeat(3, 188px);
  }

  .section_11_cards {
    flex-wrap: wrap;
  }

  .modali {
    width: 90%;
    padding: 15px;
  }

  .select-variants-disponibility {
    width: 90%;
  }

  .name {
    font-size: 22px;
  }

  /* .price, .stock-quantity {
    font-size: 18px;
  } */

  .payment-name {
    font-size: 16px;
  }

  .section_1_container, .section_2_container, .section_4_container, .section_6_container,
  .section_7_container, .section_8_container, .section_10_container, .section_11_container {
    margin-bottom: 50px;
  }

  .section_3_container, .section_5_container {
    margin: auto auto 50px auto;
  }

  .label-span {
    font-size: 18px;
  }

  .name {
    font-size: 20px;
  }

  .discount-price, .stock-quantity, .order-details td {
    font-size: 16px;
  }

  .square-label::before {
    width: 10px;
    height: 10px;
  }

  .whatsapp-order-section {
    display: none !important;
  }

  .whatsapp-order-section-2 {
    display: flex !important;
    justify-content: center;
  }

  .whatsapp-order-section-2 #whatsapp-orders {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(37, 211, 102);
    color: #fff !important;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px 0px;
    font-size: 28px;
  }

  .stock-quantity {
    flex-direction: column;
    align-items: flex-start;
  }

  .price {
    flex-direction: column;
    align-items: flex-end;
  }

  .full-price {
    font-size: 16px;
  }

  .discount-price {
    font-size: 20px;
  }

  #check-input-pickup, #check-input-home {
    width: 100% !important;
  }

  #snackbar {
    padding: 8px;
  }

  #snackbar.show {
    bottom: 20%;
    transform: translate(-50%, 60%);
  }

  .add-to-cart {
    width: 60%;
    padding: 10px 12px;
  }
}




/*======================================================================================================*/
@media (max-width: 480px) {

  .section_1_title {
    font-size: 36px;
  }

  .section_1_navigation {
    margin: 0;
  }

  .section_1_navigation_text {
    margin: 0 60px;
  }

  .section_2_right div {
    width: 162px;
    height: 162px;
  }

  .section_2_right {
    padding: 30px;
  }

  .section_2_left {
    padding: 0 30px 50px;
  }

  .section_3_container {
    padding: 0 40px;
    gap: 30px;
  }

  .section_3_card {
    flex-direction: column-reverse !important;
    gap: 20px;
  }

  .section_3_card_img {
    width: 175px;
    height: 175px;
  }

  .section_3_card_text {
    width: 100%;
  }

  .section_4_cards {
    height: 700px;
  }

  .section_4_card:nth-child(1) {
    top: 40%;
    right: 33%;
  }

  .section_4_card:nth-child(3) {
    top: 20%;
    left: 33%;
  }

  .section_4_container {
    gap: 20px;
  }

  .section_6_card_text {
    width: 100%;
  }

  .section_7_container {
    padding: 20px 10px;
  }

  .section_7_card {
    width: 100%;
    gap: 20px;
  }

  .section_8_container {
    padding: 0 40px 40px 40px;
  }

  .section_8_text {
    width: 100%;
    gap: 10px;
  }

  .section_9_container {
    grid-template-columns: repeat(2, 189px);
    grid-template-rows: repeat(3, 141px);
    grid-template-areas:
      "div3 div3"
      "div1 div2"
      "div1 div2";
  }

  .section_10_imgs {
    grid-template-columns: repeat(2, 189px);
    grid-template-rows: repeat(3, 141px);
    gap: 20px;
  }

  .section_11_cards {
    gap: 20px;
  }

  .input_user_info, .input_address {
    flex-direction: column;
  }
  .input_user_info >*, .input_address >* {
    width: 100%;
  }

  .text-radio-group {
    width: 90%;
  }

  .text-radio-label {
    flex: 1 1 0;
  }



  .whatsapp-order-section-2 #whatsapp-orders {
    width: 40px;
    height: 40px;
  }

  .select-variants-disponibility {
    width: 100%;
    justify-content: space-between;
  }

  .payment-method {
    width: 100%;
  }

  .add-to-cart {
    height: 40px;
    padding: 8px 0;
  }

  .label-span {
    font-size: 16px;
  }

  #quantity-input {
    height: 40px;
  }

  .controls {
    gap: 5px;
    padding: 8px;
  }
}



/*======================================================================================================*/
@media (max-width: 420px) {
  .section_4_card:nth-child(1) {
    right: 20%;
  }

  .section_4_card:nth-child(3) {
    left: 20%;
  }

  .section_7_card_img {
    width: 145px;
    height: 145px;
  }

  .section_8_container {
    margin-bottom: 20px;
  }

  .section_9_container, .section_10_imgs {
    grid-template-columns: repeat(2, 170px);
    grid-template-rows: repeat(3, 126px);
    gap: 10px;
  }

  .text-radio-group {
    width: 100%;
    gap: 9px;
  }

  .text-radio-label {
    padding: 3px;
    font-size: 14px;
  }

  .order-details td, .remark-container label, .add-to-cart {
    font-size: 14px;
  }

  .remark-input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }

  .summary-select-state, .payment-name {
    font-size: 14px;
  }

  .input_container input, .input_container select {
    font-size: 14px;
  }

  .order-details table {
    width: 100%;
    padding: 10px;
  }

  .input_user_info, .input_address {
    flex-direction: column !important;
  }

  .section_2_left h1 {
    font-size: calc(var(--TitleSizeSectionTwo) * 0.5);
  }

  .section_2_left p {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionTwo) * 0.6), 99px);
  }

  .section_2_left div li {
    font-size: clamp(14px, calc(var(--ListSizeSectionTwo) * 0.6), 99px);
  }

  .section_3_card_text #DescriptionSectionThree1 {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionThree1) * 0.6), 99px);
  }

  .section_3_card_text #DescriptionSectionThree2 {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionThree2) * 0.6), 99px);
  }

  .section_3_card_text #DescriptionSectionThree3 {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionThree3) * 0.6), 99px);
  }

  .section_4_header {
    font-size: calc(var(--TitleSizeSectionFour) * 0.5);
  }

  #TitleSectionSix1 {
    font-size: calc(var(--TitleSizeSectionSix1) * 0.5);
  }

  #TitleSectionSix2 {
    font-size: calc(var(--TitleSizeSectionSix2) * 0.5);
  }

  #DescriptionSectionSix1 {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionSix1) * 0.6), 99px);
  }

  #DescriptionSectionSix2 {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionSix2) * 0.6), 99px);
  }

  .section_7_container h1 {
    font-size: calc(var(--TitleSizeSectionSeven) * 0.5);
  }

  .section_8_text h1 {
    font-size: clamp(14px, calc(var(--TitleSizeSectionEight) * 0.6), 99px);
  }

  .section_8_text p {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionEight) * 0.6), 99px);
  }

  .section_9_right_txt p {
    font-size: clamp(14px, calc(var(--DescriptionSizeSectionNine) * 0.6), 99px);
  }

  .section_10_container h1 {
    font-size: calc(var(--TitleSizeSectionTen) * 0.5);
  }

  #TextSectionEleven1 {
    font-size: clamp(14px, calc(var(--TitleSizeSectionEleven1) * 0.6), 99px);
  }

  #TextSectionEleven2 {
    font-size: clamp(14px, calc(var(--TitleSizeSectionEleven2) * 0.6), 99px);
  }

  #TextSectionEleven3 {
    font-size: clamp(14px, calc(var(--TitleSizeSectionEleven3) * 0.6), 99px);
  }

  .select-variants-img {
    width: 140px;
    height: 140px;
  }

  .select-variants-img2 {
    width: 140px;
    height: 140px;
  }
}




/*======================================================================================================*/
@media (max-width: 380px) {

  /* .section_1_text {
    margin-top: 0;
  } */

  .section_2_left {
    padding: 0 20px 40px;
  }

  .section_2_right {
    padding: 20px 10px;
  }

  .section_2_right div {
    width: 145px;
    height: 145px;
  }

  .section_6_card_img {
    width: 300px;
    height: 195px;
  }

  .section_8_container {
    padding: 0 20px 30px 20px;
  }

  .section_9_container, .section_10_imgs {
    grid-template-columns: repeat(2, 153px);
    grid-template-rows: repeat(3, 120px);
  }

  .payment-method {
    width: 100%;
  }

  .modali {
    width: 95%;
    padding: 10px;
  }
}




/*======================================================================================================*/
@media (max-width: 320px) {
  .section_1_title {
    font-size: 32px;
  }

  .section_1_img_icons {
    gap: 10px;
  }

  .section_7_card {
    gap: 10px;
  }
}



















.whatsapp-order-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-order-section-2 {
  display: none;
}

.whatsapp-order-section #whatsapp-orders {
  width: 54px;
  height: 54px;
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(37, 211, 102);
  color: #fff !important;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
}


.whatsapp-order-section #whatsapp-orders:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.grecaptcha-badge {
  display: none;
}

.product-available {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(25, 118, 210, .08);
  color: #0d47a1;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: inherit !important;
  box-shadow: 0 0 0 3px #1976d2 inset;
  height: 30px;
}

.stockleft {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(25,118,210,.08);
  color: #0d47a1;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 0 0 3px #1976d2 inset;
  text-align: center;
  gap: 5px;
  height: 30px;
}

.input-radio {
 position: relative;
  display: block;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 10px 12px;
  background: #fcfcfc;
}

.input-radio input {
  appearance: none;
  position: absolute;
  line-height: 0;
	margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-radio input::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
}

.input-radio input:checked::after {
  background-color: #000;
}



#pickup-options .input-radio, #home-delivery-options .input-radio {
  position: relative;
  display: block;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 6px 14px;
  background: #fafbfc;
  font-size: 16px;
}


#pickup-options .input-radio input,
#home-delivery-options .input-radio input {
  appearance: none;
  position: absolute;
  line-height: 0;
	margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#pickup-options .input-radio input::after,
#home-delivery-options .input-radio input::after {
  content: "";
  position: relative !important;
  display: block;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
  top: 0;
  left: 0;
}

#pickup-options .input-radio input:checked::after,
#home-delivery-options .input-radio input:checked::after {
  background-color: var(--additionalColor);
}

#check-input-pickup, #check-input-home {
  width: 60%;
}