@charset "UTF-8";
#livewire-notifications {
  position: fixed !important;
  top: 1rem;
  right: 1rem;
  z-index: 99999 !important; /* أعلى من أي هيدر */
}

.fi-no-notification {
  max-width: 40%;
  background: #fff;
  display: flex;
  align-items: center;
}

.fi-icon {
  width: 4rem;
  height: 4rem;
}

.fi-no-notification-title {
  font-size: 1.6rem;
}

.fi-no-notification-body {
  font-size: 1.4rem;
}

@font-face {
  font-family: "Furore";
  src: url("../webfonts/Furore-webfont.woff") format("woff"), url("../webfonts/Furore-webfont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
* {
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  direction: ltr;
  border: none;
  outline: none;
  font-family: "Roboto", sans-serif;
}

html {
  font-size: 63%;
}

::-webkit-scrollbar {
  width: 1.5rem;
  height: 1.5rem;
}

::-webkit-scrollbar-track {
  background: #c6c6c6;
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: #091302;
  border-radius: 1rem;
  border: 0.3rem solid #fff;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #f1ad00;
}

/* Corner (نقطة التقاطع بين scrolls) */
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  position: relative;
  overflow-x: hidden;
  background-color: #fff;
}

.session {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  color: rgb(74.5714285714, 157.4285714286, 16.5714285714);
  width: 100%;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  border: #091302;
  position: relative;
  z-index: 9000;
}

.image-404 {
  width: 100%;
  height: 100vh;
  position: relative;
}
.image-404 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
}
.image-404 .back {
  height: -moz-max-content;
  height: max-content;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}
.image-404 .back h2 {
  font-family: "Furore";
  font-size: 3.2rem;
}
.image-404 .back a {
  font-size: 2.6rem;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  background-color: #f1ad00;
  color: #fff;
}

.mobile-menu {
  display: none;
}

.header {
  min-height: 6rem;
  width: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
}
.header .navbar {
  width: 100%;
  min-height: 6rem;
  padding: 1rem 4rem;
  background-color: #091302;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .navbar .left-side {
  display: flex;
  align-items: center;
}
.header .navbar .left-side .container-logo {
  margin-right: 2rem;
  width: 18rem;
  height: 4rem;
  overflow: hidden;
}
.header .navbar .left-side .container-logo > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.header .navbar .left-side .links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.header .navbar .left-side .links .link {
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
}
.header .navbar .left-side .links .link > a {
  padding: 1rem;
  color: #fff;
  border-radius: 0.5rem;
}
.header .navbar .left-side .links .link.active > a, .header .navbar .left-side .links .link:hover > a {
  background: linear-gradient(to top, #f1ad00, #ff7b00, #091302);
  color: #fff;
  transition: 0.5s all;
}
.header .navbar .right-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header .navbar .right-side > .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.header .navbar .right-side > .links a {
  color: #fff;
  font-size: 1.8rem;
  position: relative;
}
.header .navbar .right-side > .links a .stars {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}
.header .navbar .right-side > .links a .stars .star {
  position: absolute;
  transform: scale(0.3) rotate(0);
  opacity: 0;
  visibility: hidden;
  animation: backwards 1s ease;
  font-size: 1.4rem;
  color: gold;
}
.header .navbar .right-side > .links a .stars .star:nth-child(1) {
  bottom: -0.5rem;
  right: 0.5rem;
}
.header .navbar .right-side > .links a .stars .star:nth-child(2) {
  animation-delay: 0.2s;
  top: 0;
  right: -1rem;
}
.header .navbar .right-side > .links a .stars .star:nth-child(3) {
  animation-delay: 0.4s;
  top: 0;
  left: 1rem;
}
.header .navbar .right-side > .links a:hover, .header .navbar .right-side > .links a.active {
  color: #f1ad00;
  transition: 0.3s color;
}
.header .navbar .right-side > .links a .count {
  display: inline-block;
}
.header .navbar .right-side .auth-user {
  margin-left: 1rem;
  position: relative;
}
.header .navbar .right-side .auth-user > button {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 0.1rem solid #fff;
  background-color: purple;
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
}
.header .navbar .right-side .auth-user .information-container {
  position: absolute;
  z-index: 101;
  width: 25rem;
  min-width: 60%;
  min-height: 10rem;
  top: 5.5rem;
  right: 0;
  padding: 1rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.2);
  background-color: #fff;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  transform: translateY(12rem);
  opacity: 0;
  visibility: hidden;
}
.header .navbar .right-side .auth-user .information-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}
.header .navbar .right-side .auth-user .information-container .short-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header .navbar .right-side .auth-user .information-container .short-info .img-profile {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.header .navbar .right-side .auth-user .information-container .short-info .img-profile img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.header .navbar .right-side .auth-user .information-container .short-info .text {
  text-align: center;
}
.header .navbar .right-side .auth-user .information-container .short-info .text h2 {
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: bold;
  color: #091302;
}
.header .navbar .right-side .auth-user .information-container .short-info .text > p {
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.header .navbar .right-side .auth-user .information-container > .links {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.header .navbar .right-side .auth-user .information-container > .links .link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-bottom: 0.1rem solid #eee;
  font-size: 1.5rem;
  font-weight: bold;
  color: #949494;
}
.header .navbar .right-side .auth-user .information-container > .links .link:hover {
  background-color: #eee;
  transition: background 0.3s;
}
.header .navbar .right-side .auth-user .information-container > .links .link i {
  font-size: 1.6rem;
}
.header .navbar .right-side .auth-user .information-container > .links .link:last-child {
  border: none;
}
.header .navbar .right-side .auth-user .information-container .sign-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 2rem;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #777;
  color: white;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
}
.header .navbar .right-side .auth-user .information-container .sign-button:hover {
  background-color: #555;
  transition: background 0.3s;
}
.header .navbar .right-side .auth {
  margin-left: 2rem;
  position: relative;
}
.header .navbar .right-side .auth::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
  width: 0.2rem;
  height: 50%;
  background-color: #fff;
}
.header .navbar .right-side .auth > a {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #fff;
  padding: 1rem 2rem;
}
.header .navbar .right-side .auth > a:last-of-type {
  background-color: #f1ad00;
  color: #fff;
  border-radius: 0.5rem;
}
.header .navbar .right-side .auth > a:last-of-type:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
  color: #fff;
  transition: all 0.2s ease-in-out;
}
.header .navbar .right-side .auth > a:hover, .header .navbar .right-side .auth > a.active {
  color: #f1ad00;
  transition: 0.3s color ease-in-out;
}
.header .navbar .right-side .menu-icon {
  display: none;
}

.empty {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  height: 20rem;
}
.empty h1,
.empty h2 {
  padding: 2rem 4rem;
  border: 0.3rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  border-radius: 1rem;
}

.notification-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}
.notification-box .box-form {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.4941176471);
  backdrop-filter: blur(2rem);
  padding: 1rem 2rem;
}
.notification-box .box-form .logo {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-box .box-form .logo > img {
  width: 50%;
  height: auto;
}
.notification-box .box-form .buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.notification-box .box-form .buttons > a,
.notification-box .box-form .buttons > button {
  width: 30%;
  text-align: center;
  padding: 1.5rem 2rem;
  background-color: #091302;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.notification-box .box-form .buttons > a:hover,
.notification-box .box-form .buttons > button:hover {
  background-color: black;
  transition: background 0.2s ease-in-out;
}
.notification-box .box-form .buttons > a {
  background-color: #f1ad00;
  transition: background 0.2s ease-in-out;
}
.notification-box .box-form .buttons > a:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
  transition: background 0.2s ease-in-out;
}

.footer {
  padding: 4rem;
  padding-bottom: 0;
  overflow: hidden;
  width: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer .col1,
.footer .col2,
.footer .col3 {
  width: calc((100% - 4rem) / 3);
}
.footer .col1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .col1 .logo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 2rem;
}
.footer .col1 .logo > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.footer .col2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .col2 .links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
}
.footer .col2 .links .link.active a {
  color: #f1ad00;
  padding-left: 1rem;
  transition: all 0.5s;
}
.footer .col2 .links .link a {
  color: #f9f9f9;
  text-transform: capitalize;
  font-size: 1.8rem;
  display: block;
  width: 100%;
}
.footer .col2 .links .link a:hover {
  color: #f1ad00;
  padding-left: 1rem;
  transition: all 0.5s;
}
.footer .col3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.footer .col3 .contact h2 {
  text-align: center;
  font-size: 3.2rem;
  text-transform: capitalize;
  font-weight: bold;
  color: #fff;
}
.footer .col3 .contact .row1,
.footer .col3 .contact .row2 {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer .col3 .contact .row1 a,
.footer .col3 .contact .row2 a {
  color: #f9f9f9;
  font-size: 1.6rem;
}
.footer .col3 .social .social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.footer .col3 .social .social-links .link a {
  padding: 0.5rem;
  color: rgb(52.7142857143, 111.2857142857, 11.7142857143);
  font-size: 2.2rem;
}
.footer .col3 .social .social-links .link a:hover i {
  color: #f1ad00;
  scale: 1.2;
  transition: 0.3s all;
}
.footer .col4 {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.footer .col4 p {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
  color: #fff;
}
.footer .col4 p > a {
  color: #f1ad00;
  font-size: 1.4rem;
  text-decoration: underline;
  line-height: 1;
}
.footer .col4 p > a:hover {
  color: aqua;
}

.main {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.main .multi-cards {
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 4rem;
  padding-top: 9rem;
  background: #f9f9f9;
}
.main .multi-cards .card {
  border-right: 1rem solid #cc5c00;
  width: calc((100% - 3rem) / 2);
  min-width: 20rem;
  height: 30rem;
  border-radius: 1rem;
  background-color: #091302;
  backdrop-filter: blur(1rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
.main .multi-cards .card.appointment-card > .img > img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.main .multi-cards .card > .img {
  width: calc((100% - 1rem) / 2);
  height: 100%;
  overflow: hidden;
}
.main .multi-cards .card > .img > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.3s linear;
}
.main .multi-cards .card .text {
  padding: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: calc((100% - 1rem) / 2);
  gap: 1rem;
}
.main .multi-cards .card .text h1 {
  font-family: "Furore", sans-serif !important;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  width: 100%;
  text-align: center;
}
.main .multi-cards .card .text p {
  font-size: 1.2rem;
  text-transform: capitalize;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main .rating-section {
  width: 100%;
  padding: 4rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  background-color: #f9f9f9;
}
.main .rating-section .comments-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.main .rating-section .comments-container .show-comment {
  width: 40rem;
}
.main .rating-section .comments-container .show-comment h3 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
  color: #091302;
  margin-bottom: 0.5rem;
}
.main .rating-section .comments-container .show-comment .comments {
  overflow-y: auto;
  width: 100%;
  height: 30rem;
  background-color: white;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}
.main .rating-section .comments-container .show-comment .comments .comment {
  margin: 0 0 1rem 0;
  background-color: #f9f9f9;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-bottom: 0.1rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main .rating-section .comments-container .show-comment .comments .comment:last-of-type {
  margin: 0;
  border: none;
}
.main .rating-section .comments-container .show-comment .comments .comment .user_name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main .rating-section .comments-container .show-comment .comments .comment .user_name > div {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.main .rating-section .comments-container .show-comment .comments .comment .user_name > div .user-img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #f1ad00;
}
.main .rating-section .comments-container .show-comment .comments .comment .user_name > div span {
  color: #000;
  font-weight: bold;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main .rating-section .comments-container .show-comment .comments .comment .user_name p {
  font-size: 1.2rem;
}
.main .rating-section .comments-container .show-comment .comments .comment ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.main .rating-section .comments-container .show-comment .comments .comment ul li {
  font-size: 1.2rem;
  color: #f1ad00 !important;
}
.main .rating-section .comments-container .show-comment .comments .comment > p {
  font-size: 1.4rem;
}

.main-terms {
  min-height: 100vh;
  width: 100%;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 4rem;
  padding-top: 12rem;
  background-color: #f9f9f9;
}
.main-terms h1,
.main-terms h2,
.main-terms h3,
.main-terms p,
.main-terms span {
  line-height: 1.5;
}
.main-terms h1 {
  font-size: 2.8rem;
  text-transform: capitalize;
  margin-bottom: 1rem;
}
.main-terms h1.head-term {
  font-size: 3.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #f1ad00;
  margin-bottom: 3rem;
}
.main-terms h2,
.main-terms h3 {
  font-size: 2.4;
  text-transform: capitalize;
  margin-bottom: 1rem;
}
.main-terms p,
.main-terms span {
  font-size: 1.6rem;
}
.main-terms a {
  color: #f1ad00;
  text-decoration: underline;
  font-size: 1.8rem;
  text-transform: capitalize;
  padding: 0 1rem;
}
.main-terms a:hover {
  color: darkcyan;
  transition: color 0.2s linear;
}
.main-terms button {
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  text-transform: capitalize;
  text-align: center;
  background-color: #f1ad00;
}
.main-terms button:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
  transition: background 0.2s linear;
}
.main-terms .body-term {
  flex: 1;
  width: 100%;
}

.main-appointment {
  width: 100%;
  min-height: 100vh;
}
.main-appointment .appointment {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 4rem;
}
.main-appointment .appointment .form-appointment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 80%;
  min-height: 30rem;
  border-radius: 1rem;
  backdrop-filter: blur(1rem);
  background-color: rgba(241, 241, 241, 0.0784313725);
  border: 0.1rem solid rgba(241, 241, 241, 0.4666666667);
  padding: 2rem 3rem;
  margin-top: 7rem;
  position: relative;
}
.main-appointment .appointment .form-appointment .wizard-step {
  width: 100%;
  margin: 3rem 0;
  position: relative;
}
.main-appointment .appointment .form-appointment .wizard-step .line {
  width: 100%;
  height: 0.2rem;
  background-color: rgba(241, 241, 241, 0.4666666667);
  border-radius: 20rem;
}
.main-appointment .appointment .form-appointment .wizard-step .steps {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.main-appointment .appointment .form-appointment .wizard-step .steps .step {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  cursor: not-allowed;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  background-color: #d8d8d8;
  color: #091302;
}
.main-appointment .appointment .form-appointment .wizard-step .steps .step.active {
  background-color: rgb(85.5, 180.5, 19);
  color: #fff;
}
.main-appointment .appointment .form-appointment > h1 {
  font-family: "Furore", sans-serif;
  font-size: 3.2rem;
  text-transform: capitalize;
  color: #091302;
  padding-bottom: 1.5rem;
  text-align: center;
  border-bottom: 0.2rem solid #091302;
}
.main-appointment .appointment .form-appointment .box-appointment {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  padding-bottom: 5rem;
}
.main-appointment .appointment .form-appointment .box-appointment .actions {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.main-appointment .appointment .form-appointment .box-appointment .actions > button {
  padding: 1rem 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  background-color: red;
  color: #fff;
  border-radius: 1rem;
  transition: background 0.3s ease;
  cursor: pointer;
}
.main-appointment .appointment .form-appointment .box-appointment .actions > button:hover {
  background-color: #ff3333;
  transition: background 0.3s ease;
}
.main-appointment .appointment .form-appointment .box-appointment .actions > button:last-of-type {
  background-color: rgb(85.5, 180.5, 19);
  color: #fff;
}
.main-appointment .appointment .form-appointment .box-appointment .actions > button:last-of-type:hover {
  background-color: rgb(63.6428571429, 134.3571428571, 14.1428571429);
  transition: background 0.3s ease;
}
.main-appointment .appointment .form-appointment .box-appointment .one,
.main-appointment .appointment .form-appointment .box-appointment .two,
.main-appointment .appointment .form-appointment .box-appointment .three,
.main-appointment .appointment .form-appointment .box-appointment .final {
  transform: translateX(100%);
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  width: 100%;
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-appointment .appointment .form-appointment .box-appointment .one .error,
.main-appointment .appointment .form-appointment .box-appointment .two .error,
.main-appointment .appointment .form-appointment .box-appointment .three .error,
.main-appointment .appointment .form-appointment .box-appointment .final .error {
  font-size: 1.2rem;
  color: red;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .one.active,
.main-appointment .appointment .form-appointment .box-appointment .two.active,
.main-appointment .appointment .form-appointment .box-appointment .three.active,
.main-appointment .appointment .form-appointment .box-appointment .final.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.main-appointment .appointment .form-appointment .box-appointment .two,
.main-appointment .appointment .form-appointment .box-appointment .three,
.main-appointment .appointment .form-appointment .box-appointment .final {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 2rem;
}
.main-appointment .appointment .form-appointment .box-appointment .two.active,
.main-appointment .appointment .form-appointment .box-appointment .three.active,
.main-appointment .appointment .form-appointment .box-appointment .final.active {
  transform: translateX(-100%);
}
.main-appointment .appointment .form-appointment .box-appointment .two .name,
.main-appointment .appointment .form-appointment .box-appointment .two .email,
.main-appointment .appointment .form-appointment .box-appointment .two .phone,
.main-appointment .appointment .form-appointment .box-appointment .two .address,
.main-appointment .appointment .form-appointment .box-appointment .two .country,
.main-appointment .appointment .form-appointment .box-appointment .two .city,
.main-appointment .appointment .form-appointment .box-appointment .two .state,
.main-appointment .appointment .form-appointment .box-appointment .two .zip,
.main-appointment .appointment .form-appointment .box-appointment .two .complex,
.main-appointment .appointment .form-appointment .box-appointment .two .street,
.main-appointment .appointment .form-appointment .box-appointment .three .name,
.main-appointment .appointment .form-appointment .box-appointment .three .email,
.main-appointment .appointment .form-appointment .box-appointment .three .phone,
.main-appointment .appointment .form-appointment .box-appointment .three .address,
.main-appointment .appointment .form-appointment .box-appointment .three .country,
.main-appointment .appointment .form-appointment .box-appointment .three .city,
.main-appointment .appointment .form-appointment .box-appointment .three .state,
.main-appointment .appointment .form-appointment .box-appointment .three .zip,
.main-appointment .appointment .form-appointment .box-appointment .three .complex,
.main-appointment .appointment .form-appointment .box-appointment .three .street,
.main-appointment .appointment .form-appointment .box-appointment .final .name,
.main-appointment .appointment .form-appointment .box-appointment .final .email,
.main-appointment .appointment .form-appointment .box-appointment .final .phone,
.main-appointment .appointment .form-appointment .box-appointment .final .address,
.main-appointment .appointment .form-appointment .box-appointment .final .country,
.main-appointment .appointment .form-appointment .box-appointment .final .city,
.main-appointment .appointment .form-appointment .box-appointment .final .state,
.main-appointment .appointment .form-appointment .box-appointment .final .zip,
.main-appointment .appointment .form-appointment .box-appointment .final .complex,
.main-appointment .appointment .form-appointment .box-appointment .final .street {
  width: calc((100% - 1rem) / 2);
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 0.5rem;
}
.main-appointment .appointment .form-appointment .box-appointment .two .name > label,
.main-appointment .appointment .form-appointment .box-appointment .two .email > label,
.main-appointment .appointment .form-appointment .box-appointment .two .phone > label,
.main-appointment .appointment .form-appointment .box-appointment .two .address > label,
.main-appointment .appointment .form-appointment .box-appointment .two .country > label,
.main-appointment .appointment .form-appointment .box-appointment .two .city > label,
.main-appointment .appointment .form-appointment .box-appointment .two .state > label,
.main-appointment .appointment .form-appointment .box-appointment .two .zip > label,
.main-appointment .appointment .form-appointment .box-appointment .two .complex > label,
.main-appointment .appointment .form-appointment .box-appointment .two .street > label,
.main-appointment .appointment .form-appointment .box-appointment .three .name > label,
.main-appointment .appointment .form-appointment .box-appointment .three .email > label,
.main-appointment .appointment .form-appointment .box-appointment .three .phone > label,
.main-appointment .appointment .form-appointment .box-appointment .three .address > label,
.main-appointment .appointment .form-appointment .box-appointment .three .country > label,
.main-appointment .appointment .form-appointment .box-appointment .three .city > label,
.main-appointment .appointment .form-appointment .box-appointment .three .state > label,
.main-appointment .appointment .form-appointment .box-appointment .three .zip > label,
.main-appointment .appointment .form-appointment .box-appointment .three .complex > label,
.main-appointment .appointment .form-appointment .box-appointment .three .street > label,
.main-appointment .appointment .form-appointment .box-appointment .final .name > label,
.main-appointment .appointment .form-appointment .box-appointment .final .email > label,
.main-appointment .appointment .form-appointment .box-appointment .final .phone > label,
.main-appointment .appointment .form-appointment .box-appointment .final .address > label,
.main-appointment .appointment .form-appointment .box-appointment .final .country > label,
.main-appointment .appointment .form-appointment .box-appointment .final .city > label,
.main-appointment .appointment .form-appointment .box-appointment .final .state > label,
.main-appointment .appointment .form-appointment .box-appointment .final .zip > label,
.main-appointment .appointment .form-appointment .box-appointment .final .complex > label,
.main-appointment .appointment .form-appointment .box-appointment .final .street > label {
  color: rgba(9, 19, 2, 0.6509803922);
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .two .name input,
.main-appointment .appointment .form-appointment .box-appointment .two .email input,
.main-appointment .appointment .form-appointment .box-appointment .two .phone input,
.main-appointment .appointment .form-appointment .box-appointment .two .address input,
.main-appointment .appointment .form-appointment .box-appointment .two .country input,
.main-appointment .appointment .form-appointment .box-appointment .two .city input,
.main-appointment .appointment .form-appointment .box-appointment .two .state input,
.main-appointment .appointment .form-appointment .box-appointment .two .zip input,
.main-appointment .appointment .form-appointment .box-appointment .two .complex input,
.main-appointment .appointment .form-appointment .box-appointment .two .street input,
.main-appointment .appointment .form-appointment .box-appointment .three .name input,
.main-appointment .appointment .form-appointment .box-appointment .three .email input,
.main-appointment .appointment .form-appointment .box-appointment .three .phone input,
.main-appointment .appointment .form-appointment .box-appointment .three .address input,
.main-appointment .appointment .form-appointment .box-appointment .three .country input,
.main-appointment .appointment .form-appointment .box-appointment .three .city input,
.main-appointment .appointment .form-appointment .box-appointment .three .state input,
.main-appointment .appointment .form-appointment .box-appointment .three .zip input,
.main-appointment .appointment .form-appointment .box-appointment .three .complex input,
.main-appointment .appointment .form-appointment .box-appointment .three .street input,
.main-appointment .appointment .form-appointment .box-appointment .final .name input,
.main-appointment .appointment .form-appointment .box-appointment .final .email input,
.main-appointment .appointment .form-appointment .box-appointment .final .phone input,
.main-appointment .appointment .form-appointment .box-appointment .final .address input,
.main-appointment .appointment .form-appointment .box-appointment .final .country input,
.main-appointment .appointment .form-appointment .box-appointment .final .city input,
.main-appointment .appointment .form-appointment .box-appointment .final .state input,
.main-appointment .appointment .form-appointment .box-appointment .final .zip input,
.main-appointment .appointment .form-appointment .box-appointment .final .complex input,
.main-appointment .appointment .form-appointment .box-appointment .final .street input {
  width: 100%;
  height: 4rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}
.main-appointment .appointment .form-appointment .box-appointment .two .name input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .email input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .phone input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .address input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .country input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .city input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .state input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .zip input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .complex input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .two .street input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .name input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .email input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .phone input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .address input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .country input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .city input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .state input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .zip input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .complex input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .three .street input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .name input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .email input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .phone input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .address input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .country input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .city input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .state input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .zip input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .complex input::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .final .street input::-moz-placeholder {
  color: gray;
  text-transform: capitalize;
  font-weight: normal;
}
.main-appointment .appointment .form-appointment .box-appointment .two .name input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .email input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .phone input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .address input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .country input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .city input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .state input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .zip input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .complex input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .two .street input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .name input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .email input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .phone input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .address input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .country input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .city input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .state input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .zip input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .complex input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .three .street input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .name input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .email input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .phone input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .address input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .country input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .city input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .state input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .zip input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .complex input::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .final .street input::placeholder {
  color: gray;
  text-transform: capitalize;
  font-weight: normal;
}
.main-appointment .appointment .form-appointment .box-appointment .three {
  height: 0;
}
.main-appointment .appointment .form-appointment .box-appointment .three.active {
  transform: translateX(-200%);
  height: -moz-max-content;
  height: max-content;
}
.main-appointment .appointment .form-appointment .box-appointment .three .address {
  width: 100%;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select {
  width: calc((100% - 1rem) / 2);
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select > label {
  color: rgba(9, 19, 2, 0.6509803922);
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .error {
  font-size: 1.2rem;
  color: red;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .select-box {
  width: 100%;
  background: white;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  transition: 0.3s;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .select-box .selected {
  font-size: 1.4rem;
  font-weight: bold;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .select-box:hover {
  border-color: #4f46e5;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .select-box .arrow {
  transition: transform 0.3s ease;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select.active .arrow {
  transform: rotate(180deg);
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select.active .options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .options {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.1);
  position: absolute;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: all 0.3s ease;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .options li {
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: 0.2s;
  font-size: 1.4rem;
  font-weight: 600;
}
.main-appointment .appointment .form-appointment .box-appointment .three .custom-select .options li:hover {
  background: #ececec;
  color: #4f46e5;
}
.main-appointment .appointment .form-appointment .box-appointment .final {
  height: 0;
}
.main-appointment .appointment .form-appointment .box-appointment .final.active {
  transform: translateX(-300%);
  height: -moz-max-content;
  height: max-content;
}
.main-appointment .appointment .form-appointment .box-appointment .final h2 {
  color: #091302;
  text-transform: capitalize;
  font-size: 1.6rem;
  font-weight: bold;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-name,
.main-appointment .appointment .form-appointment .box-appointment .final .info-date-time {
  width: calc((100% - 1rem) / 2);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-name .circle,
.main-appointment .appointment .form-appointment .box-appointment .final .info-date-time .circle {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background-color: #d6d6d6;
  color: #979797;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-name > div,
.main-appointment .appointment .form-appointment .box-appointment .final .info-date-time > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-date-time > div h2 {
  width: 100%;
  text-align: center;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-address {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-address h1 {
  width: 100%;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-address h2:first-of-type {
  width: 100%;
  line-height: 1.5;
}
.main-appointment .appointment .form-appointment .box-appointment .final .info-address h2 {
  width: calc((100% - 2rem) / 2);
  text-align: center;
}
.main-appointment .appointment .form-appointment .box-appointment .one {
  flex-direction: row;
  width: 100%;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.main-appointment .appointment .form-appointment .box-appointment .one .date,
.main-appointment .appointment .form-appointment .box-appointment .one .time {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
  width: calc((100% - 2rem) / 2);
  min-width: 28rem;
}
.main-appointment .appointment .form-appointment .box-appointment .one .date > label,
.main-appointment .appointment .form-appointment .box-appointment .one .date h3,
.main-appointment .appointment .form-appointment .box-appointment .one .time > label,
.main-appointment .appointment .form-appointment .box-appointment .one .time h3 {
  color: rgba(9, 19, 2, 0.6509803922);
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .one .date input[type=text],
.main-appointment .appointment .form-appointment .box-appointment .one .time input[type=text] {
  width: 100%;
  height: 4rem;
  padding: 1rem 2rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.6rem;
}
.main-appointment .appointment .form-appointment .box-appointment .one .date input[type=text]::-moz-placeholder, .main-appointment .appointment .form-appointment .box-appointment .one .time input[type=text]::-moz-placeholder {
  color: gray;
  font-size: 1.6rem;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .one .date input[type=text]::placeholder,
.main-appointment .appointment .form-appointment .box-appointment .one .time input[type=text]::placeholder {
  color: gray;
  font-size: 1.6rem;
  text-transform: capitalize;
}
.main-appointment .appointment .form-appointment .box-appointment .one .time .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: inset 0 0 3rem #1c4102;
  background-color: #091302;
  gap: 1rem;
}
.main-appointment .appointment .form-appointment .box-appointment .one .time .row .s-time {
  background-color: #fff;
  color: #091302;
  font-size: 1.6rem;
  width: 100%;
  min-width: 13rem;
  border-radius: 1rem;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.4);
}
.main-appointment .appointment .form-appointment .box-appointment .one .time .row .s-time label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
}
.main-appointment .appointment .form-appointment .box-appointment .one .time .row .s-time.active {
  background-color: #f1ad00;
  color: #fff;
}

.main-orders {
  padding: 4rem;
  padding-top: 12rem;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 30%;
  gap: 2rem;
  background-color: #f9f9f9;
}
.main-orders .reservation,
.main-orders .orders {
  grid-column: span 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.main-orders .reservation .table-container,
.main-orders .reservation .order-container,
.main-orders .orders .table-container,
.main-orders .orders .order-container {
  width: 100%;
  min-height: 15rem;
  padding: 2rem;
  border-radius: 1rem;
  background-color: rgba(204, 204, 204, 0.4235294118);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border: 0.1rem solid rgba(204, 204, 204, 0.4235294118);
  backdrop-filter: blur(1rem);
}
.main-orders .reservation .table-container h1,
.main-orders .reservation .order-container h1,
.main-orders .orders .table-container h1,
.main-orders .orders .order-container h1 {
  width: 100%;
  text-align: center;
  font-family: "Furore", sans-serif;
  font-weight: bold;
  font-size: 2.6rem;
  text-transform: capitalize;
  color: #fff;
  letter-spacing: 0.5rem;
  padding: 2rem;
  background-color: #000;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.main-orders .reservation .table-container .container,
.main-orders .reservation .order-container .container,
.main-orders .orders .table-container .container,
.main-orders .orders .order-container .container {
  width: 100%;
  overflow-x: auto;
}
.main-orders .reservation .table-container .container .table,
.main-orders .reservation .order-container .container .table,
.main-orders .orders .table-container .container .table,
.main-orders .orders .order-container .container .table {
  border-collapse: collapse;
  border-radius: 1rem;
  min-width: 100%;
}
.main-orders .reservation .table-container .container .table tr,
.main-orders .reservation .table-container .container .table th,
.main-orders .reservation .table-container .container .table td,
.main-orders .reservation .order-container .container .table tr,
.main-orders .reservation .order-container .container .table th,
.main-orders .reservation .order-container .container .table td,
.main-orders .orders .table-container .container .table tr,
.main-orders .orders .table-container .container .table th,
.main-orders .orders .table-container .container .table td,
.main-orders .orders .order-container .container .table tr,
.main-orders .orders .order-container .container .table th,
.main-orders .orders .order-container .container .table td {
  padding: 1rem;
  text-align: start;
}
.main-orders .reservation .table-container .container .table tr:nth-child(odd),
.main-orders .reservation .order-container .container .table tr:nth-child(odd),
.main-orders .orders .table-container .container .table tr:nth-child(odd),
.main-orders .orders .order-container .container .table tr:nth-child(odd) {
  background-color: #919191;
}
.main-orders .reservation .table-container .container .table tr:nth-child(even),
.main-orders .reservation .order-container .container .table tr:nth-child(even),
.main-orders .orders .table-container .container .table tr:nth-child(even),
.main-orders .orders .order-container .container .table tr:nth-child(even) {
  background-color: #c9c9c9;
}
.main-orders .reservation .table-container .container .table tr:first-of-type,
.main-orders .reservation .order-container .container .table tr:first-of-type,
.main-orders .orders .table-container .container .table tr:first-of-type,
.main-orders .orders .order-container .container .table tr:first-of-type {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  background-color: #091302;
  color: #fff;
}
.main-orders .reservation .table-container .container .table tr:last-of-type td:first-of-type,
.main-orders .reservation .order-container .container .table tr:last-of-type td:first-of-type,
.main-orders .orders .table-container .container .table tr:last-of-type td:first-of-type,
.main-orders .orders .order-container .container .table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 1rem;
}
.main-orders .reservation .table-container .container .table tr:last-of-type td:last-of-type,
.main-orders .reservation .order-container .container .table tr:last-of-type td:last-of-type,
.main-orders .orders .table-container .container .table tr:last-of-type td:last-of-type,
.main-orders .orders .order-container .container .table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 1rem;
}
.main-orders .reservation .table-container .container .table td,
.main-orders .reservation .order-container .container .table td,
.main-orders .orders .table-container .container .table td,
.main-orders .orders .order-container .container .table td {
  font-size: 1.6rem;
  color: #091302;
}
.main-orders .reservation .table-container .container .table td .deleteBtn,
.main-orders .reservation .order-container .container .table td .deleteBtn,
.main-orders .orders .table-container .container .table td .deleteBtn,
.main-orders .orders .order-container .container .table td .deleteBtn {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
  border-radius: 0.5rem;
  background-color: red;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s linear;
}
.main-orders .reservation .table-container .container .table td .deleteBtn:hover,
.main-orders .reservation .order-container .container .table td .deleteBtn:hover,
.main-orders .orders .table-container .container .table td .deleteBtn:hover,
.main-orders .orders .order-container .container .table td .deleteBtn:hover {
  background-color: rgb(229.5, 0, 0);
  transition: background 0.2s linear;
}
.main-orders .reservation .table-container .container .table tr td,
.main-orders .reservation .table-container .container .table tr th,
.main-orders .reservation .order-container .container .table tr td,
.main-orders .reservation .order-container .container .table tr th,
.main-orders .orders .table-container .container .table tr td,
.main-orders .orders .table-container .container .table tr th,
.main-orders .orders .order-container .container .table tr td,
.main-orders .orders .order-container .container .table tr th {
  white-space: nowrap;
}

.main-checkout {
  padding: 4rem;
  padding-top: 12rem;
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.main-checkout .form-checkout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  width: 70%;
  min-height: 30rem;
  border-radius: 1rem;
  backdrop-filter: blur(1rem);
  background-color: rgba(88, 88, 88, 0.5607843137);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1019607843);
  border: 0.1rem solid rgba(0, 0, 0, 0.2745098039);
  padding: 2rem 3rem;
  position: relative;
}
.main-checkout .form-checkout .wizard-step {
  width: 100%;
  margin: 3rem 0;
  position: relative;
}
.main-checkout .form-checkout .wizard-step .line {
  width: 100%;
  height: 0.2rem;
  background-color: rgba(241, 241, 241, 0.4666666667);
  border-radius: 20rem;
}
.main-checkout .form-checkout .wizard-step .steps {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.main-checkout .form-checkout .wizard-step .steps .step {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  cursor: not-allowed;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  background-color: #d8d8d8;
  color: #091302;
}
.main-checkout .form-checkout .wizard-step .steps .step.active {
  background-color: rgb(85.5, 180.5, 19);
  color: #fff;
}
.main-checkout .form-checkout > h1 {
  font-family: "Furore", sans-serif;
  font-size: 2.6rem;
  text-transform: capitalize;
  color: #091302;
  padding-bottom: 1.5rem;
  text-align: center;
  border-bottom: 0.2rem solid #091302;
}
.main-checkout .form-checkout .box-checkout {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  padding-bottom: 5rem;
}
.main-checkout .form-checkout .box-checkout .actions {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.main-checkout .form-checkout .box-checkout .actions > button {
  padding: 1rem 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  background-color: red;
  color: #fff;
  border-radius: 1rem;
  transition: background 0.3s ease;
  cursor: pointer;
}
.main-checkout .form-checkout .box-checkout .actions > button:hover {
  background-color: #ff3333;
  transition: background 0.3s ease;
}
.main-checkout .form-checkout .box-checkout .actions > button:last-of-type {
  background-color: rgb(85.5, 180.5, 19);
  color: #fff;
}
.main-checkout .form-checkout .box-checkout .actions > button:last-of-type:hover {
  background-color: rgb(63.6428571429, 134.3571428571, 14.1428571429);
  transition: background 0.3s ease;
}
.main-checkout .form-checkout .box-checkout .one,
.main-checkout .form-checkout .box-checkout .two,
.main-checkout .form-checkout .box-checkout .three,
.main-checkout .form-checkout .box-checkout .final {
  transform: translateX(100%);
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  width: 100%;
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-checkout .form-checkout .box-checkout .one .error,
.main-checkout .form-checkout .box-checkout .two .error,
.main-checkout .form-checkout .box-checkout .three .error,
.main-checkout .form-checkout .box-checkout .final .error {
  font-size: 1.2rem;
  color: red;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .one.active,
.main-checkout .form-checkout .box-checkout .two.active,
.main-checkout .form-checkout .box-checkout .three.active,
.main-checkout .form-checkout .box-checkout .final.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.main-checkout .form-checkout .box-checkout .two,
.main-checkout .form-checkout .box-checkout .three,
.main-checkout .form-checkout .box-checkout .final {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 2rem;
}
.main-checkout .form-checkout .box-checkout .two.active,
.main-checkout .form-checkout .box-checkout .three.active,
.main-checkout .form-checkout .box-checkout .final.active {
  transform: translateX(-100%);
}
.main-checkout .form-checkout .box-checkout .two .name,
.main-checkout .form-checkout .box-checkout .two .email,
.main-checkout .form-checkout .box-checkout .two .phone,
.main-checkout .form-checkout .box-checkout .two .address,
.main-checkout .form-checkout .box-checkout .two .country,
.main-checkout .form-checkout .box-checkout .two .city,
.main-checkout .form-checkout .box-checkout .two .state,
.main-checkout .form-checkout .box-checkout .two .zip,
.main-checkout .form-checkout .box-checkout .two .complex,
.main-checkout .form-checkout .box-checkout .two .street,
.main-checkout .form-checkout .box-checkout .three .name,
.main-checkout .form-checkout .box-checkout .three .email,
.main-checkout .form-checkout .box-checkout .three .phone,
.main-checkout .form-checkout .box-checkout .three .address,
.main-checkout .form-checkout .box-checkout .three .country,
.main-checkout .form-checkout .box-checkout .three .city,
.main-checkout .form-checkout .box-checkout .three .state,
.main-checkout .form-checkout .box-checkout .three .zip,
.main-checkout .form-checkout .box-checkout .three .complex,
.main-checkout .form-checkout .box-checkout .three .street,
.main-checkout .form-checkout .box-checkout .final .name,
.main-checkout .form-checkout .box-checkout .final .email,
.main-checkout .form-checkout .box-checkout .final .phone,
.main-checkout .form-checkout .box-checkout .final .address,
.main-checkout .form-checkout .box-checkout .final .country,
.main-checkout .form-checkout .box-checkout .final .city,
.main-checkout .form-checkout .box-checkout .final .state,
.main-checkout .form-checkout .box-checkout .final .zip,
.main-checkout .form-checkout .box-checkout .final .complex,
.main-checkout .form-checkout .box-checkout .final .street {
  width: calc((100% - 1rem) / 2);
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 0.5rem;
}
.main-checkout .form-checkout .box-checkout .two .name > label,
.main-checkout .form-checkout .box-checkout .two .email > label,
.main-checkout .form-checkout .box-checkout .two .phone > label,
.main-checkout .form-checkout .box-checkout .two .address > label,
.main-checkout .form-checkout .box-checkout .two .country > label,
.main-checkout .form-checkout .box-checkout .two .city > label,
.main-checkout .form-checkout .box-checkout .two .state > label,
.main-checkout .form-checkout .box-checkout .two .zip > label,
.main-checkout .form-checkout .box-checkout .two .complex > label,
.main-checkout .form-checkout .box-checkout .two .street > label,
.main-checkout .form-checkout .box-checkout .three .name > label,
.main-checkout .form-checkout .box-checkout .three .email > label,
.main-checkout .form-checkout .box-checkout .three .phone > label,
.main-checkout .form-checkout .box-checkout .three .address > label,
.main-checkout .form-checkout .box-checkout .three .country > label,
.main-checkout .form-checkout .box-checkout .three .city > label,
.main-checkout .form-checkout .box-checkout .three .state > label,
.main-checkout .form-checkout .box-checkout .three .zip > label,
.main-checkout .form-checkout .box-checkout .three .complex > label,
.main-checkout .form-checkout .box-checkout .three .street > label,
.main-checkout .form-checkout .box-checkout .final .name > label,
.main-checkout .form-checkout .box-checkout .final .email > label,
.main-checkout .form-checkout .box-checkout .final .phone > label,
.main-checkout .form-checkout .box-checkout .final .address > label,
.main-checkout .form-checkout .box-checkout .final .country > label,
.main-checkout .form-checkout .box-checkout .final .city > label,
.main-checkout .form-checkout .box-checkout .final .state > label,
.main-checkout .form-checkout .box-checkout .final .zip > label,
.main-checkout .form-checkout .box-checkout .final .complex > label,
.main-checkout .form-checkout .box-checkout .final .street > label {
  color: rgba(9, 19, 2, 0.6509803922);
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .two .name input,
.main-checkout .form-checkout .box-checkout .two .email input,
.main-checkout .form-checkout .box-checkout .two .phone input,
.main-checkout .form-checkout .box-checkout .two .address input,
.main-checkout .form-checkout .box-checkout .two .country input,
.main-checkout .form-checkout .box-checkout .two .city input,
.main-checkout .form-checkout .box-checkout .two .state input,
.main-checkout .form-checkout .box-checkout .two .zip input,
.main-checkout .form-checkout .box-checkout .two .complex input,
.main-checkout .form-checkout .box-checkout .two .street input,
.main-checkout .form-checkout .box-checkout .three .name input,
.main-checkout .form-checkout .box-checkout .three .email input,
.main-checkout .form-checkout .box-checkout .three .phone input,
.main-checkout .form-checkout .box-checkout .three .address input,
.main-checkout .form-checkout .box-checkout .three .country input,
.main-checkout .form-checkout .box-checkout .three .city input,
.main-checkout .form-checkout .box-checkout .three .state input,
.main-checkout .form-checkout .box-checkout .three .zip input,
.main-checkout .form-checkout .box-checkout .three .complex input,
.main-checkout .form-checkout .box-checkout .three .street input,
.main-checkout .form-checkout .box-checkout .final .name input,
.main-checkout .form-checkout .box-checkout .final .email input,
.main-checkout .form-checkout .box-checkout .final .phone input,
.main-checkout .form-checkout .box-checkout .final .address input,
.main-checkout .form-checkout .box-checkout .final .country input,
.main-checkout .form-checkout .box-checkout .final .city input,
.main-checkout .form-checkout .box-checkout .final .state input,
.main-checkout .form-checkout .box-checkout .final .zip input,
.main-checkout .form-checkout .box-checkout .final .complex input,
.main-checkout .form-checkout .box-checkout .final .street input {
  width: 100%;
  height: 4rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}
.main-checkout .form-checkout .box-checkout .two .name input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .email input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .phone input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .address input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .country input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .city input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .state input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .zip input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .complex input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .street input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .name input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .email input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .phone input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .address input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .country input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .city input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .state input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .zip input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .complex input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .street input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .name input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .email input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .phone input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .address input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .country input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .city input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .state input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .zip input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .complex input::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .street input::-moz-placeholder {
  color: gray;
  text-transform: capitalize;
  font-weight: normal;
}
.main-checkout .form-checkout .box-checkout .two .name input::placeholder,
.main-checkout .form-checkout .box-checkout .two .email input::placeholder,
.main-checkout .form-checkout .box-checkout .two .phone input::placeholder,
.main-checkout .form-checkout .box-checkout .two .address input::placeholder,
.main-checkout .form-checkout .box-checkout .two .country input::placeholder,
.main-checkout .form-checkout .box-checkout .two .city input::placeholder,
.main-checkout .form-checkout .box-checkout .two .state input::placeholder,
.main-checkout .form-checkout .box-checkout .two .zip input::placeholder,
.main-checkout .form-checkout .box-checkout .two .complex input::placeholder,
.main-checkout .form-checkout .box-checkout .two .street input::placeholder,
.main-checkout .form-checkout .box-checkout .three .name input::placeholder,
.main-checkout .form-checkout .box-checkout .three .email input::placeholder,
.main-checkout .form-checkout .box-checkout .three .phone input::placeholder,
.main-checkout .form-checkout .box-checkout .three .address input::placeholder,
.main-checkout .form-checkout .box-checkout .three .country input::placeholder,
.main-checkout .form-checkout .box-checkout .three .city input::placeholder,
.main-checkout .form-checkout .box-checkout .three .state input::placeholder,
.main-checkout .form-checkout .box-checkout .three .zip input::placeholder,
.main-checkout .form-checkout .box-checkout .three .complex input::placeholder,
.main-checkout .form-checkout .box-checkout .three .street input::placeholder,
.main-checkout .form-checkout .box-checkout .final .name input::placeholder,
.main-checkout .form-checkout .box-checkout .final .email input::placeholder,
.main-checkout .form-checkout .box-checkout .final .phone input::placeholder,
.main-checkout .form-checkout .box-checkout .final .address input::placeholder,
.main-checkout .form-checkout .box-checkout .final .country input::placeholder,
.main-checkout .form-checkout .box-checkout .final .city input::placeholder,
.main-checkout .form-checkout .box-checkout .final .state input::placeholder,
.main-checkout .form-checkout .box-checkout .final .zip input::placeholder,
.main-checkout .form-checkout .box-checkout .final .complex input::placeholder,
.main-checkout .form-checkout .box-checkout .final .street input::placeholder {
  color: gray;
  text-transform: capitalize;
  font-weight: normal;
}
.main-checkout .form-checkout .box-checkout .three {
  height: 0;
}
.main-checkout .form-checkout .box-checkout .three.active {
  transform: translateX(-200%);
  height: -moz-max-content;
  height: max-content;
}
.main-checkout .form-checkout .box-checkout .three .address {
  width: 100%;
}
.main-checkout .form-checkout .box-checkout .final {
  height: 0;
}
.main-checkout .form-checkout .box-checkout .final.active {
  transform: translateX(-300%);
  height: -moz-max-content;
  height: max-content;
}
.main-checkout .form-checkout .box-checkout .final h2 {
  color: #091302;
  text-transform: capitalize;
  font-size: 1.6rem;
  font-weight: bold;
}
.main-checkout .form-checkout .box-checkout .final .info-name,
.main-checkout .form-checkout .box-checkout .final .info-date-time {
  width: calc((100% - 1rem) / 2);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.main-checkout .form-checkout .box-checkout .final .info-name .circle,
.main-checkout .form-checkout .box-checkout .final .info-date-time .circle {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background-color: #d6d6d6;
  color: #979797;
}
.main-checkout .form-checkout .box-checkout .final .info-name > div,
.main-checkout .form-checkout .box-checkout .final .info-date-time > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
}
.main-checkout .form-checkout .box-checkout .final .info-date-time > div h2 {
  width: 100%;
  text-align: center;
}
.main-checkout .form-checkout .box-checkout .final .info-address {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.main-checkout .form-checkout .box-checkout .final .info-address h1 {
  width: 100%;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .final .info-address h2:first-of-type {
  width: 100%;
  line-height: 1.5;
}
.main-checkout .form-checkout .box-checkout .final .info-address h2 {
  width: calc((100% - 2rem) / 2);
  text-align: center;
}
.main-checkout .form-checkout .box-checkout .one {
  flex-direction: row;
  width: 100%;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.main-checkout .form-checkout .box-checkout .one .date,
.main-checkout .form-checkout .box-checkout .one .time {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
  width: calc((100% - 2rem) / 2);
  min-width: 28rem;
}
.main-checkout .form-checkout .box-checkout .one .date > label,
.main-checkout .form-checkout .box-checkout .one .date h3,
.main-checkout .form-checkout .box-checkout .one .time > label,
.main-checkout .form-checkout .box-checkout .one .time h3 {
  color: rgba(9, 19, 2, 0.6509803922);
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .one .date input[type=text],
.main-checkout .form-checkout .box-checkout .one .time input[type=text] {
  width: 100%;
  height: 4rem;
  padding: 1rem 2rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.6rem;
}
.main-checkout .form-checkout .box-checkout .one .date input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .one .time input[type=text]::-moz-placeholder {
  color: gray;
  font-size: 1.6rem;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .one .date input[type=text]::placeholder,
.main-checkout .form-checkout .box-checkout .one .time input[type=text]::placeholder {
  color: gray;
  font-size: 1.6rem;
  text-transform: capitalize;
}
.main-checkout .form-checkout .box-checkout .one .time .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: inset 0 0 3rem #1c4102;
  background-color: #091302;
  gap: 1rem;
}
.main-checkout .form-checkout .box-checkout .one .time .row .s-time {
  background-color: #fff;
  color: #091302;
  font-size: 1.6rem;
  width: 100%;
  min-width: 13rem;
  border-radius: 1rem;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.4);
}
.main-checkout .form-checkout .box-checkout .one .time .row .s-time label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
}
.main-checkout .form-checkout .box-checkout .one .time .row .s-time.active {
  background-color: #f1ad00;
  color: #fff;
}

.main-about-us {
  background-color: #f9f9f9;
  width: 100%;
  min-height: 100vh;
}
.main-about-us .about-us-container {
  width: 100%;
  overflow-x: hidden;
  padding: 4rem;
  padding-top: 13rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.main-about-us .about-us-container .who {
  width: 100%;
  padding: 3rem 0;
  color: #091302;
}
.main-about-us .about-us-container .who h1 {
  font-size: 3.2rem;
  font-weight: bold;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin-top: 6rem;
  margin-bottom: 4rem;
  padding: 2rem;
  position: relative;
}
.main-about-us .about-us-container .who h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 0.2rem;
  background-color: #091302;
}
.main-about-us .about-us-container .who p {
  padding: 3rem;
  background-color: white;
  font-size: 2.2rem;
  line-height: 1.5;
  border-radius: 0.5rem;
}
.main-about-us .about-us-container .what-we-do {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.main-about-us .about-us-container .what-we-do h2 {
  width: 100%;
  font-size: 2.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
}
.main-about-us .about-us-container .what-we-do .box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.main-about-us .about-us-container .what-we-do .box p {
  font-size: 1.8rem;
  line-height: 1.3;
  max-height: 30rem;
  overflow-y: scroll;
  color: #091302;
}
.main-about-us .about-us-container .what-we-do .box .img {
  width: 100%;
  height: 30rem;
}
.main-about-us .about-us-container .what-we-do .box .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.main-about-us .about-us-container .what-we-offer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.main-about-us .about-us-container .what-we-offer h2 {
  width: 100%;
  font-size: 2.8rem;
  font-weight: bold;
  color: #091302;
  text-transform: capitalize;
}
.main-about-us .about-us-container .what-we-offer p {
  font-size: 2rem;
  line-height: 1.3;
}
.main-about-us .about-us-container .what-we-offer .box-offer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  padding: 3rem;
  background-color: #091302;
  border-radius: 1rem;
  max-width: 100%;
}
.main-about-us .about-us-container .what-we-offer .box-offer h2 {
  color: #fff;
  grid-column: span 4;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service:hover .img {
  position: relative;
  z-index: 40;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service:hover .img img {
  scale: 1.1;
  transform: rotate(5deg);
  transition: scale 0.2s linear, transform 0.2s linear;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service:hover p {
  margin-top: -5rem;
  position: relative;
  z-index: 50;
  color: #f1ad00;
  font-size: 2.8rem;
  transition: margin 0.2s linear, color 0.2s linear, font-size 0.2s linear;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service .img {
  width: 100%;
  height: 20rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service .img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: scale 0.2s linear, transform 0.2s linear;
}
.main-about-us .about-us-container .what-we-offer .box-offer .service p {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
  transition: margin 0.2s linear, color 0.2s linear, font-size 0.2s linear;
}
.main-about-us .about-us-container .what-we-offer .box-offer .empty {
  grid-column: span 4;
}
.main-about-us .about-us-container .rating-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.main-about-us .about-us-container .rating-section h2 {
  width: 100%;
  font-size: 2.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
}
.main-about-us .about-us-container .rating-section .rating-us {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  align-items: center;
}
.main-about-us .about-us-container .rating-section .rating-us .box {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
}
.main-about-us .about-us-container .rating-section .rating-us .box .stars {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 2.8rem;
  color: #f1ad00;
  gap: 2rem;
}
.main-about-us .about-us-container .rating-section .rating-us .box p {
  width: 50%;
  font-size: 1.6rem;
  font-weight: bold;
  color: #091302;
}

.main-profile {
  padding: 4rem;
  padding-top: 13rem;
  min-height: 100vh;
  width: 100%;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}
.main-profile h1 {
  width: 100%;
  text-align: start;
  text-transform: capitalize;
  font-size: 2.8rem;
  color: #2c2c2c;
}
.main-profile .user-details {
  width: 100%;
  background-color: #2c2c2c;
  display: flex;
  align-items: center;
  gap: 3rem;
  border-radius: 1rem;
  padding: 3rem 2rem;
  overflow: hidden;
}
.main-profile .user-details .image-profile {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-profile .user-details .image-profile .circle-img,
.main-profile .user-details .image-profile .img {
  cursor: pointer;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  border: 0.5rem solid #2c2c2c;
  outline: 0.2rem solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  color: white;
  background-color: purple;
  overflow: hidden;
}
.main-profile .user-details .image-profile .img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
}
.main-profile .user-details .inputs {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.main-profile .user-details .inputs .box {
  width: calc((100% - 2rem) / 2);
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.main-profile .user-details .inputs .box label {
  line-height: 1;
  color: lightgray;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 1.8rem;
}
.main-profile .user-details .inputs .box input {
  width: 100%;
  height: 5rem;
  background-color: #474747;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  color: #fff;
}
.main-profile .user-details .inputs .box input::-moz-placeholder {
  color: lightgray;
  font-size: 1.6rem;
}
.main-profile .user-details .inputs .box input::placeholder {
  color: lightgray;
  font-size: 1.6rem;
}
.main-profile .user-details .inputs .btns,
.main-profile .user-details .inputs .status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.main-profile .user-details .inputs .btns .btn,
.main-profile .user-details .inputs .status .btn {
  font-size: 1.6rem;
  text-transform: capitalize;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  background-color: #7a7a7a;
  color: white;
  cursor: pointer;
  transition: background 0.2s linear;
}
.main-profile .user-details .inputs .btns .btn:hover,
.main-profile .user-details .inputs .status .btn:hover {
  background-color: rgb(147.5, 147.5, 147.5);
  transition: background 0.2s linear;
}
.main-profile .user-details .inputs .btns .btn.save,
.main-profile .user-details .inputs .status .btn.save {
  background-color: rgb(0, 153.5, 0);
}
.main-profile .user-details .inputs .btns .btn.save:hover,
.main-profile .user-details .inputs .status .btn.save:hover {
  background-color: #00b300;
  transition: background 0.2s linear;
}
.main-profile .user-details .inputs .status {
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
  gap: 1rem;
}
.main-profile .user-details .inputs .status p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #00b600;
  color: white;
}
.main-profile .address {
  width: 100%;
  background-color: #2c2c2c;
  border-radius: 1rem;
  padding: 3rem;
  overflow: hidden;
}
.main-profile .address .inputs {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.main-profile .address .inputs .box:first-child {
  width: 100%;
}
.main-profile .address .inputs .box {
  width: calc((100% - 2rem) / 2);
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.main-profile .address .inputs .box label {
  line-height: 1;
  color: lightgray;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 1.8rem;
}
.main-profile .address .inputs .box input,
.main-profile .address .inputs .box textarea {
  width: 100%;
  height: 4.5rem;
  background-color: #474747;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  color: #fff;
}
.main-profile .address .inputs .box input::-moz-placeholder, .main-profile .address .inputs .box textarea::-moz-placeholder {
  color: lightgray;
  font-size: 1.6rem;
}
.main-profile .address .inputs .box input::placeholder,
.main-profile .address .inputs .box textarea::placeholder {
  color: lightgray;
  font-size: 1.6rem;
}
.main-profile .address .inputs .box textarea {
  min-height: 10rem;
  max-height: 10rem;
}
.main-profile .address .inputs .btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-profile .address .inputs .btns .btn {
  font-size: 1.6rem;
  text-transform: capitalize;
  min-width: 20%;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: background 0.2s linear;
  background-color: rgb(0, 153.5, 0);
}
.main-profile .address .inputs .btns .btn:hover {
  background-color: #00b300;
  transition: background 0.2s linear;
}
.main-profile .section-more {
  width: 100%;
  background-color: #2c2c2c;
  border-radius: 1rem;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.main-profile .section-more .reset-password {
  background-color: #fff;
  padding: 3rem 2rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
}
.main-profile .section-more .reset-password h2 {
  width: 100%;
  font-size: 1.8rem;
  text-transform: capitalize;
  text-align: center;
}
.main-profile .section-more .reset-password .inputs-box {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.main-profile .section-more .reset-password .inputs-box .input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.main-profile .section-more .reset-password .inputs-box .input input {
  font-size: 1.6rem;
  padding: 1rem 2rem;
  width: 100%;
  height: 5rem;
  border-radius: 1rem;
  background-color: #f3f3f3;
}
.main-profile .section-more .reset-password .inputs-box .input .error {
  color: red;
  font-size: 1.3rem;
  text-transform: capitalize;
  font-weight: bold;
}
.main-profile .section-more .reset-password .btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-profile .section-more .reset-password .btns .forgot {
  color: #2c2c2c;
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
  text-decoration: underline;
}
.main-profile .section-more .reset-password .btns .forgot:hover {
  color: green;
  transition: 0.2s linear;
}
.main-profile .section-more .reset-password .btns .btn-reset {
  width: 30%;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #2c2c2c;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  cursor: pointer;
}
.main-profile .section-more .reset-password .btns .btn-reset:hover {
  background-color: rgb(69.5, 69.5, 69.5);
}
.main-profile .section-more .some-details {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  row-gap: 3rem;
  padding: 3rem 2rem;
  color: #fff;
}
.main-profile .section-more .some-details h2 {
  width: 100%;
  font-size: 2.2rem;
  text-transform: capitalize;
  text-align: center;
}
.main-profile .section-more .some-details a {
  color: aqua;
  text-decoration: underline;
}
.main-profile .section-more .some-details a:hover {
  color: #33ffff;
  transition: 0.2s linear;
}
.main-profile .section-more .some-details .col {
  width: calc((100% - 2rem) / 2);
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.main-profile .section-more .some-details .col span:first-child {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-profile .global-btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.main-profile .global-btns .btn {
  padding: 1rem 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 0.5rem;
  background-color: gray;
  color: #fff;
  cursor: pointer;
}
.main-profile .global-btns .btn:hover {
  background-color: rgb(153.5, 153.5, 153.5);
  transition: 0.2s linear;
}
.main-profile .global-btns .btn.delete {
  background-color: red;
}
.main-profile .global-btns .btn.delete:hover {
  background-color: #ff3333;
  transition: 0.2s linear;
}

.main-contact-us {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 0 4rem 4rem;
  padding-top: 13rem;
  background-color: #f9f9f9;
}
.main-contact-us .all-emails-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 80%;
  padding: 2rem;
  background-color: rgb(30.8571428571, 65.1428571429, 6.8571428571);
  border-radius: 0.5rem;
}
.main-contact-us .all-emails-section .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #091302;
}
.main-contact-us .all-emails-section .box h2 {
  font-size: 2.8rem;
  text-transform: capitalize;
  font-weight: bold;
  color: #fff;
}
.main-contact-us .all-emails-section .box p {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.6rem;
  font-weight: bold;
  color: lightgray;
  width: 80%;
  text-align: center;
}
.main-contact-us .all-emails-section .box a {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f1ad00;
}
.main-contact-us .all-emails-section .box a:hover {
  color: rgb(215.5, 154.6950207469, 0);
  transition: color 0.2s ease-in-out;
}
.main-contact-us .fast-mail-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  color: #091302;
  padding: 1rem;
  background-color: #091302;
  color: #fff;
  border-radius: 1rem;
}
.main-contact-us .fast-mail-section h2 {
  font-size: 2.8rem;
  font-weight: bold;
  text-transform: capitalize;
  position: relative;
  padding-bottom: 0.5rem;
}
.main-contact-us .fast-mail-section h2::after {
  content: "";
  width: 100%;
  height: 0.2rem;
  background-color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  bottom: 0;
  left: 0;
  position: absolute;
}
.main-contact-us .fast-mail-section p {
  font-size: 1.6rem;
  font-weight: bold;
}
.main-contact-us .fast-mail-section .form-mail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  width: 90%;
  margin-top: 2rem;
}
.main-contact-us .fast-mail-section .form-mail .mail-input,
.main-contact-us .fast-mail-section .form-mail .text-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.main-contact-us .fast-mail-section .form-mail .mail-input label,
.main-contact-us .fast-mail-section .form-mail .text-input label {
  width: 20rem;
  text-align: right;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #fff;
}
.main-contact-us .fast-mail-section .form-mail .mail-input input,
.main-contact-us .fast-mail-section .form-mail .text-input input {
  flex: 1;
  height: 5rem;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: #091302;
  background-color: white;
}
.main-contact-us .fast-mail-section .form-mail .mail-input input::-moz-placeholder, .main-contact-us .fast-mail-section .form-mail .text-input input::-moz-placeholder {
  font-size: 1.4rem;
  font-weight: normal;
  color: rgb(19.9285714286, 42.0714285714, 4.4285714286);
}
.main-contact-us .fast-mail-section .form-mail .mail-input input::placeholder,
.main-contact-us .fast-mail-section .form-mail .text-input input::placeholder {
  font-size: 1.4rem;
  font-weight: normal;
  color: rgb(19.9285714286, 42.0714285714, 4.4285714286);
}
.main-contact-us .fast-mail-section .form-mail .mail-input .error-validate,
.main-contact-us .fast-mail-section .form-mail .text-input .error-validate {
  font-size: 1.2rem;
  text-transform: capitalize;
  color: red;
  display: block;
  width: 100%;
  text-align: end;
}
.main-contact-us .fast-mail-section .form-mail .text-input {
  align-items: flex-start;
}
.main-contact-us .fast-mail-section .form-mail .text-input textarea {
  max-height: 20rem;
  min-height: 20rem;
  flex: 1;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  background-color: white;
  color: #000;
}
.main-contact-us .fast-mail-section .form-mail .text-input textarea::-moz-placeholder {
  font-size: 1.4rem;
  color: rgb(19.9285714286, 42.0714285714, 4.4285714286);
}
.main-contact-us .fast-mail-section .form-mail .text-input textarea::placeholder {
  font-size: 1.4rem;
  color: rgb(19.9285714286, 42.0714285714, 4.4285714286);
}
.main-contact-us .fast-mail-section .form-mail .submit {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 30%;
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem;
  background-color: #00d6d6;
  border-radius: 0.5rem;
  color: #fff;
  justify-content: center;
  text-transform: capitalize;
  gap: 1rem;
}
.main-contact-us .fast-mail-section .form-mail .submit:hover {
  background-color: rgb(0, 188.5, 188.5);
  transition: background 0.2s linear;
}

.main-products {
  position: relative;
  padding: 4rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.main-products .search-products-section {
  margin-top: 10rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.main-products .search-products-section > p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #091302;
}
.main-products .search-products-section .row-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
}
.main-products .search-products-section .row-search .back-btn {
  padding: 1rem 2rem;
  font-size: 2.8rem;
  color: #091302;
  transition: color 0.3s linear;
  cursor: pointer;
}
.main-products .search-products-section .row-search .back-btn:hover {
  color: #f1ad00;
  transition: color 0.3s linear;
}
.main-products .search-products-section .row-search .box {
  flex: 1;
  height: 6rem;
  border: 0.2rem solid #f1ad00;
  border-radius: 1.5rem;
  position: relative;
  padding: 1rem 2rem 1rem 6rem;
}
.main-products .search-products-section .row-search .box input {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: bold;
}
.main-products .search-products-section .row-search .box input::-moz-placeholder {
  color: rgba(9, 19, 2, 0.6431372549);
  font-size: 1.6rem;
  text-transform: capitalize;
  font-weight: normal;
}
.main-products .search-products-section .row-search .box input::placeholder {
  color: rgba(9, 19, 2, 0.6431372549);
  font-size: 1.6rem;
  text-transform: capitalize;
  font-weight: normal;
}
.main-products .search-products-section .row-search .box > span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2rem;
  font-size: 2.2rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-products .products-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.main-products .products-section .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}
.main-products .products-section .products .div-btn-filter {
  display: none;
  justify-content: flex-start;
}
.main-products .products-section .products .div-btn-filter .filter-pdt-mob {
  display: flex;
  font-size: 1.8rem;
  align-items: center;
  gap: 1rem;
  color: #091302;
  text-transform: capitalize;
  font-weight: bold;
}
.main-products .products-section .products .div-btn-filter .filter-pdt-mob:hover, .main-products .products-section .products .div-btn-filter .filter-pdt-mob:focus {
  color: #f1ad00;
  transition: color 0.2s ease-in-out;
}
.main-products .products-section .products .product-box {
  grid-column: span 3;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-products .products-section .products .product-box .loading-icon {
  width: 100%;
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.main-products .products-section .products .product-box .loading-icon .img-loading {
  width: 15rem;
  height: 15rem;
  overflow: hidden;
  animation: loading 2s infinite;
}
.main-products .products-section .products .product-box .loading-icon .img-loading img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-products .products-section .products .product-box .product-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
}
.main-products .products-section .products .product-box .product-container > .empty {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  height: 20rem;
}
.main-products .products-section .products .product-box .product-container > .empty h1 {
  padding: 2rem 4rem;
  border: 0.3rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  border-radius: 1rem;
}
.main-products .products-section .products .product-box .product-container .product {
  height: 25rem;
  min-height: 20rem;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.main-products .products-section .products .product-box .product-container .product .offer {
  position: absolute;
  top: 0;
  left: -3rem;
  transform: rotate(-40deg);
  padding: 1rem 2rem;
  width: 12rem;
  background-color: red;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
}
.main-products .products-section .products .product-box .product-container .product .head {
  height: 100%;
  width: 40%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.main-products .products-section .products .product-box .product-container .product .head .img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-products .products-section .products .product-box .product-container .product .body {
  flex: 1;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.main-products .products-section .products .product-box .product-container .product .body .row {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-name {
  font-size: 2.6rem;
  font-weight: bold;
  max-width: 100%;
  text-transform: capitalize;
  line-height: 1;
  color: #000;
  text-decoration: underline;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-disc {
  font-size: 1.4rem;
  flex: 1;
  max-width: 100%;
  line-height: 1.4;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-rate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-rate .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.2rem;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-rate p {
  font-weight: bold;
  font-size: 1.4rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  color: #000;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-price .price {
  text-decoration: line-through;
  font-size: 2rem;
}
.main-products .products-section .products .product-box .product-container .product .body .row .product-price .tax {
  font-size: 2.8rem;
  font-weight: bold;
}
.main-products .products-section .products .product-box .product-container .product .body .foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn {
  margin: 0.5rem 0;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn > button {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  padding: 1rem;
  text-align: center;
  color: white;
  text-transform: capitalize;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn > button.cart {
  background-color: #f1ad00;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn > button.cart:hover {
  background-color: rgb(255, 186.2946058091, 11.5);
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn .more {
  border: 0.3rem solid #f1ad00;
  border-radius: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn .more > button {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: bold;
  color: #f1ad00;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  line-height: 1;
}
.main-products .products-section .products .product-box .product-container .product .body .foot .btn .more .more-q {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1rem;
  line-height: 1;
}
.main-products .products-section .products .product-box .product-container .product .body .foot > .fee {
  text-align: center;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main-products .products-section .products .product-box .product-container .product .body .foot > .fee > span {
  font-size: 1.6rem;
  font-weight: bold;
  color: red;
}
.main-products .products-section .products .product-box .pagenation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  font-size: 2.2rem;
  color: #091302;
  font-weight: bold;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-box .pagenation .pagenation-btn {
  padding: 1rem 2rem;
  background-color: rgb(210.75, 210.75, 210.75);
  color: white;
  cursor: pointer;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-box .pagenation .pagenation-btn:hover {
  background-color: #091302;
  transition: all 0.3s ease-in-out;
}
.main-products .products-section .products .product-box .pagenation .page-numbers {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.main-products .products-section .products .product-box .pagenation .page-numbers .num {
  display: block;
  padding: 1rem 2rem;
  background-color: rgb(210.75, 210.75, 210.75);
  color: white;
  cursor: pointer;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-box .pagenation .page-numbers .num.active, .main-products .products-section .products .product-box .pagenation .page-numbers .num:hover {
  transition: all 0.3s;
  background-color: #091302;
}
.main-products .products-section .products .product-sort-by {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-products .products-section .products .product-sort-by .sorts {
  width: 100%;
  padding: 2rem 1rem;
  background-color: #091302;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.main-products .products-section .products .product-sort-by .sorts h2 {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid #f9f9f9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.main-products .products-section .products .product-sort-by .sorts h2 > span {
  font-size: 1.8rem;
  cursor: pointer;
  color: #f1ad00;
  transition: color 0.2s ease-in-out;
}
.main-products .products-section .products .product-sort-by .sorts h2 > span:hover {
  color: red;
}
.main-products .products-section .products .product-sort-by .sorts .row {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price > p,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating > p,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters > p,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company > p {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price > p > span,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating > p > span,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters > p > span,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company > p > span {
  cursor: pointer;
  color: #f1ad00;
  transition: color 0.2s ease-in-out;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price > p > span:hover,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating > p > span:hover,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters > p > span:hover,
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company > p > span:hover {
  color: red;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs {
  display: flex;
  align-items: center;
  gap: 0;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs input::-webkit-slider-runnable-track {
  height: 0.7rem;
  background: transparent;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgb(63.6428571429, 134.3571428571, 14.1428571429);
  margin-top: -0.4rem;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs-value {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #091302;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs-value span {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #f9f9f9;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.8rem;
  color: lightgray;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars i {
  cursor: pointer;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars i:hover, .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars i.active {
  color: orange;
  transition: color 0.3s ease-in-out;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters .a-z {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  position: relative;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.5rem;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters .a-z::before {
  content: "-";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters .a-z span {
  cursor: pointer;
  padding: 0.5rem 0;
  background-color: #f9f9f9;
  color: #091302;
  border-radius: 0.5rem;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters .a-z span:hover, .main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters .a-z span.active {
  background-color: #f1ad00;
  color: #fff;
  transition: background 0.3s;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies .company {
  min-width: calc((100% - 0.5rem) / 2);
  padding: 1rem;
  border-radius: 1rem;
  background-color: #f9f9f9;
  color: #091302;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies .company .img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f1ad00;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies .company .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies .company:hover, .main-products .products-section .products .product-sort-by .sorts .row .sort-by-company .companies .company.active {
  background-color: #091302;
  color: #fff;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.main-products .row-tags {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2rem;
  visibility: hidden;
}
.main-products .row-tags h2 {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-products .row-tags .tags {
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 1rem;
}
.main-products .row-tags .tags > a {
  padding: 0.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
  color: #3a3a3a;
  background-color: #f0f0f0;
  text-decoration: underline;
  font-size: 1.3rem;
  white-space: nowrap;
}
.main-products .row-tags .tags > a:hover {
  color: #f1ad00;
}

.main-single-product {
  position: relative;
  padding: 4rem;
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.main-single-product .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding-top: 8rem;
}
.main-single-product .container > .product-info {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.main-single-product .container > .product-info .imgs-pro {
  width: 50rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.main-single-product .container > .product-info .imgs-pro .full-img {
  grid-column: span 5;
  height: 50vh;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: white;
}
.main-single-product .container > .product-info .imgs-pro .full-img > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-single-product .container > .product-info .imgs-pro > label {
  display: block;
  grid-column: span 1;
  height: 6rem;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  background-color: white;
  transition: transform 0.5s ease-in-out;
}
.main-single-product .container > .product-info .imgs-pro > label:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}
.main-single-product .container > .product-info .imgs-pro > label > img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.main-single-product .container > .product-info .info {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.main-single-product .container > .product-info .info > h1 {
  flex: 1;
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  color: #091302;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.main-single-product .container > .product-info .info > h1 > a {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #fff;
  background-color: #f1ad00;
  font-size: 1.6rem;
  border-radius: 1rem;
  line-height: 1;
  transition: background 0.3s ease;
}
.main-single-product .container > .product-info .info > h1 > a:hover {
  background-color: rgb(255, 193.489626556, 37);
  transition: background 0.3s ease;
}
.main-single-product .container > .product-info .info > .rate {
  width: 40%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-single-product .container > .product-info .info > .rate li {
  font-size: 1.4rem;
}
.main-single-product .container > .product-info .info > .rate li.p {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: capitalize;
}
.main-single-product .container > .product-info .info > .short-disc {
  width: 100%;
  font-size: 1.4rem;
  text-transform: capitalize;
  line-height: 1.4;
  color: #000;
  min-height: 20rem;
  display: -webkit-box;
  -webkit-line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-single-product .container > .product-info .info > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.main-single-product .container > .product-info .info > .row > .reserve-product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.main-single-product .container > .product-info .info > .row > .reserve-product > h3 {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
}
.main-single-product .container > .product-info .info > .row > .reserve-product .box-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-single-product .container > .product-info .info > .row > .reserve-product .box-input > input {
  width: 12rem;
  height: 4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: white;
}
.main-single-product .container > .product-info .info > .row > .reserve-product .box-input > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.main-single-product .container > .product-info .info > .row > .reserve-product .box-input > button {
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  box-shadow: 0 0 1rem #f9f9f9;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  cursor: pointer;
  color: #091302;
  background-color: white;
}
.main-single-product .container > .product-info .info > .row .price {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  align-items: flex-end;
}
.main-single-product .container > .product-info .info > .row .price p {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
}
.main-single-product .container > .product-info .info > .row .price > div {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.main-single-product .container > .product-info .info > .row .price > div span {
  font-size: 2.4rem;
  text-decoration: line-through;
  color: #091302;
}
.main-single-product .container > .product-info .info > .row .price > div span.tax {
  font-size: 4.5rem;
  text-decoration: none;
  font-weight: bold;
}
.main-single-product .container > .product-info .info > .row-btns {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.main-single-product .container > .product-info .info > .row-btns > .btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  background-color: #f1ad00;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  width: 50%;
}
.main-single-product .container > .product-info .info > .row-btns > .btn:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
}
.main-single-product .container > .product-info .info > .row-btns > .btn.cart {
  background-color: rgb(85.5, 180.5, 19);
}
.main-single-product .container > .product-info .info > .row-btns > .btn.cart:hover {
  background-color: rgb(63.6428571429, 134.3571428571, 14.1428571429);
}
.main-single-product .container > .product-disc {
  display: grid;
  grid-template-columns: 1fr 45rem;
  gap: 2rem;
}
.main-single-product .container > .product-disc .disc {
  width: 100%;
}
.main-single-product .container > .product-disc .disc h4 {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  margin-bottom: 1rem;
  color: #091302;
}
.main-single-product .container > .product-disc .disc p {
  font-size: 1.4rem;
  text-transform: capitalize;
  line-height: 1.4;
  color: #000;
}
.main-single-product .container > .product-disc .rate-comment-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.main-single-product .container > .product-disc .rate-comment-product .rating h4 {
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 1rem;
  text-align: center;
  color: #091302;
}
.main-single-product .container > .product-disc .rate-comment-product .rating .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.main-single-product .container > .product-disc .rate-comment-product .rating .stars > li {
  font-size: 2rem;
  color: gray;
  cursor: pointer;
  transition: color 0.5s linear;
}
.main-single-product .container > .product-disc .rate-comment-product .rating .stars > li:hover {
  color: gold;
  transition: color 0.3s linear;
}
.main-single-product .container > .product-disc .rate-comment-product .comment {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  width: 100%;
}
.main-single-product .container > .product-disc .rate-comment-product .comment > textarea {
  min-width: 100%;
  max-width: 100%;
  max-height: 12rem;
  min-height: 12rem;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  padding: 1rem 2rem;
  background-color: white;
}
.main-single-product .container > .product-disc .rate-comment-product .comment > textarea::-moz-placeholder {
  font-size: 1.4rem;
  font-weight: normal;
  text-transform: capitalize;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-single-product .container > .product-disc .rate-comment-product .comment > textarea::placeholder {
  font-size: 1.4rem;
  font-weight: normal;
  text-transform: capitalize;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-single-product .container > .product-disc .rate-comment-product .comment > button {
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  color: #fff;
  background-color: #091302;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.3s linear;
}
.main-single-product .container > .product-disc .rate-comment-product .comment > button:hover {
  background-color: black;
  transition: background 0.3s linear;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment {
  width: 100%;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments {
  overflow-y: auto;
  width: 100%;
  height: 22rem;
  background-color: rgb(24.3, 51.3, 5.4);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment {
  margin: 0 0 1rem 0;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-bottom: 0.1rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment:last-of-type {
  margin: 0;
  border: none;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment .user_name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment .user_name > div {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment .user_name > div .user-img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #f1ad00;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment .user_name > div span {
  color: #000;
  font-weight: bold;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment .user_name p {
  font-size: 1.2rem;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment ul li {
  font-size: 1.2rem;
  color: #f1ad00 !important;
}
.main-single-product .container > .product-disc .rate-comment-product .show-comment .comments .comment > p {
  font-size: 1.4rem;
}
.main-single-product .container .tags {
  margin-top: 3rem;
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 1rem;
  visibility: hidden;
}
.main-single-product .container .tags > a {
  padding: 0.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
  color: #3a3a3a;
  background-color: #f0f0f0;
  text-decoration: underline;
  font-size: 1.3rem;
  white-space: nowrap;
}
.main-single-product .container .tags > a:hover {
  color: #f1ad00;
}
.main-single-product .container .suggested-products {
  width: 100%;
  position: relative;
}
.main-single-product .container .suggested-products h4 {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 1rem;
  color: #091302;
}
.main-single-product .container .suggested-products .flow {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
}
.main-single-product .container .suggested-products .flow .slider-btn {
  z-index: 5;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 0.1rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  background-color: rgba(239.016, 230.728, 196.984, 0.6);
  box-shadow: 0 0 1rem #f9f9f9;
  cursor: pointer;
}
.main-single-product .container .suggested-products .flow .slider-btn.prev {
  left: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-btn.next {
  right: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
}
.main-single-product .container .suggested-products .flow .slider-container > .product {
  flex-shrink: 0;
  width: calc((100% - 4rem) / 3);
  height: 25rem;
  min-height: 20rem;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.main-single-product .container .suggested-products .flow .slider-container > .product .offer {
  position: absolute;
  top: 0;
  left: -3rem;
  transform: rotate(-40deg);
  padding: 1rem 2rem;
  width: 12rem;
  background-color: red;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .head {
  height: 100%;
  width: 40%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .head .img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body {
  flex: 1;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-name {
  font-size: 2.6rem;
  font-weight: bold;
  max-width: 100%;
  text-transform: capitalize;
  line-height: 1;
  color: #000;
  text-decoration: underline;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-disc {
  font-size: 1.4rem;
  flex: 1;
  max-width: 100%;
  line-height: 1.4;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-rate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-rate .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.2rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-rate p {
  font-weight: bold;
  font-size: 1.4rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  color: #000;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price .price {
  text-decoration: line-through;
  font-size: 2rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price .tax {
  font-size: 2.8rem;
  font-weight: bold;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn {
  margin: 0.5rem 0;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn > button {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  padding: 1rem;
  text-align: center;
  color: white;
  text-transform: capitalize;
  border-radius: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn > button.cart {
  background-color: #f1ad00;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn > button.cart:hover {
  background-color: rgb(255, 186.2946058091, 11.5);
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn .more {
  border: 0.3rem solid #f1ad00;
  border-radius: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn .more > button {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: bold;
  color: #f1ad00;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  line-height: 1;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot .btn .more .more-q {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1rem;
  line-height: 1;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot > .fee {
  text-align: center;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main-single-product .container .suggested-products .flow .slider-container > .product .body .foot > .fee > span {
  font-size: 1.6rem;
  font-weight: bold;
  color: red;
}

.main-questions {
  position: relative;
  padding: 4rem;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.main-questions .container-q {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  padding-top: 5rem;
}
.main-questions .container-q > h1 {
  font-size: 3.2rem;
  text-transform: capitalize;
  font-weight: 600;
  text-align: center;
}
.main-questions .container-q > .categories {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.main-questions .container-q > .categories .category {
  padding: 1rem 1.5rem;
  cursor: pointer;
  position: relative;
  font-size: 1.8rem;
  font-weight: 500;
  text-transform: capitalize;
  border-radius: 0.5rem;
  box-shadow: inset 0 4rem 3rem rgba(94, 94, 94, 0.137254902);
}
.main-questions .container-q > .categories .category::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0.3rem;
  background-color: #f1ad00;
  transition: width 0.5s;
}
.main-questions .container-q > .categories .category:hover::after, .main-questions .container-q > .categories .category.active::after {
  width: 80%;
  transition: width 0.5s;
}
.main-questions .container-q > .box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}
.main-questions .container-q > .box > .q-a {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-left: 0.7rem solid #f1ad00;
  border-radius: 0.5rem;
}
.main-questions .container-q > .box > .q-a .q {
  position: relative;
}
.main-questions .container-q > .box > .q-a .q .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(0);
  right: 5%;
  font-size: 2.2rem;
  transition: transform 0.5s;
}
.main-questions .container-q > .box > .q-a .q .icon.active {
  transform: translateY(-50%) rotate(180deg);
  transition: transform 0.5s;
}
.main-questions .container-q > .box > .q-a .q {
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  padding: 3rem 2rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: capitalize;
  background-color: #e9e9e9;
}
.main-questions .container-q > .box > .q-a .a {
  height: 0;
  padding: 0 2rem;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 400;
  transition: height 0.5s;
}

.main-cart {
  position: relative;
  padding: 4rem;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.main-cart .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding-top: 7rem;
}
.main-cart .container > h1 {
  font-size: 3.2rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  color: #091302;
  position: relative;
  width: 100%;
  padding: 1rem;
}
.main-cart .container > h1 > span {
  font-size: 3.5rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-cart .container > h1 > span > div {
  display: inline-block;
}
.main-cart .container > h1 > span > div > span {
  font-size: 2.4rem;
}
.main-cart .container > h1 > button {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  cursor: pointer;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
  transition: color 0.2s ease-in-out;
}
.main-cart .container > h1 > button:hover {
  color: #f1ad00;
}
.main-cart .container .row-products-info {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.main-cart .container .row-products-info .empty {
  flex: 1;
}
.main-cart .container .row-products-info .products {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.main-cart .container .row-products-info .products .product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: calc((100% - 2rem) / 2);
  min-height: 25rem;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  padding: 1rem;
  flex-shrink: 0;
  background-color: #fff;
}
.main-cart .container .row-products-info .products .product .delete {
  position: absolute;
  top: -1rem;
  right: 0;
  padding: 1rem;
  color: red;
  font-weight: bold;
  font-size: 3.2rem;
  border-radius: 50%;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.main-cart .container .row-products-info .products .product .row {
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1rem;
}
.main-cart .container .row-products-info .products .product .row .img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}
.main-cart .container .row-products-info .products .product .row .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-cart .container .row-products-info .products .product .row .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  color: #091302;
}
.main-cart .container .row-products-info .products .product .row .info h3,
.main-cart .container .row-products-info .products .product .row .info > a {
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  color: #091302;
  line-height: 1.4;
}
.main-cart .container .row-products-info .products .product .row .info > p {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-cart .container .row-products-info .products .product .row .info .quantity-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.main-cart .container .row-products-info .products .product .row .info .quantity-box > button {
  height: 4rem;
  width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #aaa;
  background-color: white;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.main-cart .container .row-products-info .products .product .row .info .quantity-box > button:hover {
  background-color: #f9f9f9;
  transition: background 0.2s ease-in-out;
}
.main-cart .container .row-products-info .products .product .row .info .quantity-box .quantity {
  flex: 1;
  height: 4rem;
  padding: 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #091302;
}
.main-cart .container .row-products-info .products .product .btn-checkout {
  width: 100%;
  padding: 1rem;
  font-size: 1.8rem;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: bold;
  background-color: #f1ad00;
  color: #fff;
  border-radius: 0.5rem;
  text-align: center;
  transition: background 0.3s ease-in-out;
}
.main-cart .container .row-products-info .products .product .btn-checkout:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
  transition: background 0.3s ease-in-out;
}
.main-cart .container .row-products-info .tabel-info {
  overflow: hidden;
  height: 54rem;
  width: 30%;
  border: 0.1rem solid #091302;
  border-radius: 0.5rem;
  background-color: #091302;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 2rem;
  padding: 2rem;
}
.main-cart .container .row-products-info .tabel-info > h2 {
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
  background-color: white;
  padding: 1rem;
}
.main-cart .container .row-products-info .tabel-info .total-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-cart .container .row-products-info .tabel-info .total-info > div {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.1rem solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-cart .container .row-products-info .tabel-info .total-info > div span {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  border-radius: 0.5rem;
  color: #fff;
}
.main-cart .container .row-products-info .tabel-info .total-info > div span:first-of-type {
  background-color: white;
  width: 60%;
  color: #091302;
  font-size: 1.6rem;
}
.main-cart .container .row-products-info .tabel-info .total-info > div:last-of-type span:last-child {
  color: #f1ad00;
  font-weight: bold;
  font-size: 2.2rem;
}
.main-cart .container .row-products-info .tabel-info .checkout-all {
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: #f1ad00;
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  transition: background 0.3s ease-in-out;
}
.main-cart .container .row-products-info .tabel-info .checkout-all:hover {
  background-color: rgb(215.5, 154.6950207469, 0);
  transition: background 0.3s ease-in-out;
}
.main-cart .container .row-products-info .pagenation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  font-size: 2.2rem;
  color: #000;
  font-weight: bold;
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.5rem;
}
.main-cart .container .row-products-info .pagenation .pagenation-btn {
  padding: 1rem 2rem;
  background-color: #bbb;
  color: white;
  cursor: pointer;
  border-radius: 0.5rem;
}
.main-cart .container .row-products-info .pagenation .pagenation-btn:hover {
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.main-cart .container .row-products-info .pagenation .page-numbers {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.main-cart .container .row-products-info .pagenation .page-numbers .num {
  display: block;
  padding: 1rem 2rem;
  background-color: #bbbbbb;
  color: white;
  cursor: pointer;
  border-radius: 0.5rem;
}
.main-cart .container .row-products-info .pagenation .page-numbers .num.active, .main-cart .container .row-products-info .pagenation .page-numbers .num:hover {
  transition: all 0.3s;
  background-color: #000;
}

.main-register {
  position: relative;
  padding: 4rem;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.main-register .container {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 1rem;
}
.main-register .container .form-box {
  margin: 0 auto;
  border-radius: 0.7rem;
  width: 60rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #fff;
  padding: 2rem;
  position: relative;
}
.main-register .container .form-box::after {
  width: 100%;
  content: "";
  height: 1rem;
  background-color: #091302;
  top: 0;
  left: 0;
  position: absolute;
}
.main-register .container .form-box .other-auth {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.main-register .container .form-box .other-auth > a {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  transform: scale(0.95);
}
.main-register .container .form-box .other-auth > a:hover {
  transform: scale(1);
}
.main-register .container .form-box .other-auth > a > .icon {
  width: 2rem;
  height: 2rem;
}
.main-register .container .form-box .form .title {
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 1rem;
  color: #091302;
}
.main-register .container .form-box .form .inputs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-register .container .form-box .form .inputs .box-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.main-register .container .form-box .form .inputs .box-input > div {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.main-register .container .form-box .form .inputs .box-input > div > input {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.main-register .container .form-box .form .inputs .box-input > p {
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: bold;
  width: 70%;
  color: #091302;
}
.main-register .container .form-box .form .inputs .box-input > p > a {
  color: #f1ad00;
  text-decoration: underline;
}
.main-register .container .form-box .form .inputs .box-input > p > a:hover {
  color: rgb(215.5, 154.6950207469, 0);
}
.main-register .container .form-box .form .inputs .box-input > label {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
  flex: 1;
}
.main-register .container .form-box .form .inputs .box-input > input {
  height: 4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  padding: 0.5rem 2rem;
  width: 70%;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: white;
}
.main-register .container .form-box .form .inputs .box-input > input::-moz-placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
  font-weight: normal;
}
.main-register .container .form-box .form .inputs .box-input > input::placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
  font-weight: normal;
}
.main-register .container .form-box .form .inputs .box-input span {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  color: red;
  font-size: 1.2rem;
}
.main-register .container .form-box .form .inputs .btn-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-register .container .form-box .form .inputs .btn-submit button {
  width: 40%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #091302;
  color: #fff;
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.main-register .container .form-box .form .inputs .btn-submit button:hover {
  background-color: black;
  transition: color 0.2s ease-in-out;
}
.main-register .container .form-box .form .inputs .dont > p {
  text-align: center;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main-register .container .form-box .form .inputs .dont > p > a {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  color: #f1ad00;
  transition: color 0.3s linear;
}
.main-register .container .form-box .form .inputs .dont > p > a:hover {
  color: black;
  transition: color 0.2s ease-in-out;
}
.main-register .container .form-box .form > p {
  text-align: center;
  font-size: 1.4rem;
  color: #091302;
  margin-top: 1rem;
  font-weight: bold;
  text-transform: capitalize;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}

.main-login {
  position: relative;
  padding: 4rem;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.main-login .container {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 7rem;
}
.main-login .container .form-box {
  margin: 0 auto;
  border-radius: 0.7rem;
  width: 60rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #fff;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-login .container .form-box::after {
  width: 100%;
  content: "";
  height: 1rem;
  background-color: #091302;
  top: 0;
  left: 0;
  position: absolute;
}
.main-login .container .form-box .other-auth {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.main-login .container .form-box .other-auth > a {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  transform: scale(0.95);
}
.main-login .container .form-box .other-auth > a:hover {
  transform: scale(1);
}
.main-login .container .form-box .other-auth > a > .icon {
  width: 2rem;
  height: 2rem;
}
.main-login .container .form-box .form .title {
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 1rem;
  color: #091302;
}
.main-login .container .form-box .form .inputs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-login .container .form-box .form .inputs .box-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.main-login .container .form-box .form .inputs .box-input > label {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #091302;
  flex: 1;
}
.main-login .container .form-box .form .inputs .box-input > input {
  height: 4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  padding: 0.5rem 2rem;
  width: 80%;
  font-size: 1.6rem;
  background-color: white;
}
.main-login .container .form-box .form .inputs .box-input > input::-moz-placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
}
.main-login .container .form-box .form .inputs .box-input > input::placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
}
.main-login .container .form-box .form .inputs .box-input span {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  color: red;
  font-size: 1.2rem;
}
.main-login .container .form-box .form .inputs .btn-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-login .container .form-box .form .inputs .btn-submit button {
  width: 40%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #091302;
  color: #fff;
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.main-login .container .form-box .form .inputs .btn-submit button:hover {
  background-color: black;
  transition: background 0.2s ease-in-out;
}
.main-login .container .form-box .form .inputs .forgot-pass {
  text-align: end;
}
.main-login .container .form-box .form .inputs .forgot-pass > a {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  color: #f1ad00;
  transition: color 0.3s linear;
}
.main-login .container .form-box .form .inputs .forgot-pass > a:hover {
  color: rgb(215.5, 154.6950207469, 0);
  transition: color 0.2s ease-in-out;
}
.main-login .container .form-box .form .inputs .dont > p {
  text-align: center;
  font-size: 1.4rem;
  text-transform: capitalize;
  color: #091302;
}
.main-login .container .form-box .form .inputs .dont > p > a {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  color: #f1ad00;
  transition: color 0.3s linear;
}
.main-login .container .form-box .form .inputs .dont > p > a:hover {
  color: rgb(215.5, 154.6950207469, 0);
}
.main-login .container .form-box .form > p {
  text-align: center;
  font-size: 1.4rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  margin-top: 1rem;
  font-weight: bold;
  text-transform: capitalize;
}

.main-forgot-pass {
  position: relative;
  padding: 4rem;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.main-forgot-pass .container {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 7rem;
}
.main-forgot-pass .container .form-box {
  margin: 0 auto;
  border-radius: 0.7rem;
  width: 60rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #fff;
  padding: 2rem;
  position: relative;
}
.main-forgot-pass .container .form-box::after {
  width: 100%;
  content: "";
  height: 1rem;
  background-color: #091302;
  top: 0;
  left: 0;
  position: absolute;
}
.main-forgot-pass .container .form-box .form .title {
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 3rem;
  color: #091302;
}
.main-forgot-pass .container .form-box .form .inputs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-forgot-pass .container .form-box .form .inputs .box-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.main-forgot-pass .container .form-box .form .inputs .box-input > label {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  flex: 1;
  color: #091302;
}
.main-forgot-pass .container .form-box .form .inputs .box-input > input {
  height: 4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  background-color: white;
  padding: 0.5rem 2rem;
  width: 80%;
  font-size: 1.6rem;
}
.main-forgot-pass .container .form-box .form .inputs .box-input > input::-moz-placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
  text-transform: capitalize;
}
.main-forgot-pass .container .form-box .form .inputs .box-input > input::placeholder {
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  font-size: 1.4rem;
  text-transform: capitalize;
}
.main-forgot-pass .container .form-box .form .inputs .box-input span {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  color: red;
  font-size: 1.2rem;
}
.main-forgot-pass .container .form-box .form .inputs .btn-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-forgot-pass .container .form-box .form .inputs .btn-submit button {
  width: 40%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #091302;
  color: #fff;
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.main-forgot-pass .container .form-box .form .inputs .btn-submit button:hover {
  background-color: black;
  transition: 0.2s background ease-in-out;
}
.main-forgot-pass .container .form-box .form .remember-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2rem;
}
.main-forgot-pass .container .form-box .form .remember-btn > span {
  text-transform: capitalize;
  font-size: 1.4rem;
  margin-right: 1rem;
  color: #091302;
}
.main-forgot-pass .container .form-box .form .remember-btn > a {
  color: #f1ad00;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  transition: color 0.3s linear;
}
.main-forgot-pass .container .form-box .form .remember-btn > a:hover {
  color: black;
}

.main-reset-password {
  position: relative;
  padding: 4rem;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.main-reset-password .container {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 7rem;
}
.main-reset-password .container .form-box {
  margin: 0 auto;
  border-radius: 0.7rem;
  width: 60rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #fff;
  padding: 2rem;
  position: relative;
}
.main-reset-password .container .form-box::after {
  width: 100%;
  content: "";
  height: 1rem;
  background-color: #091302;
  top: 0;
  left: 0;
  position: absolute;
}
.main-reset-password .container .form-box .form .title {
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 3rem;
  color: #091302;
}
.main-reset-password .container .form-box .form .inputs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-reset-password .container .form-box .form .inputs .box-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.main-reset-password .container .form-box .form .inputs .box-input > label {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  flex: 1;
  color: #091302;
}
.main-reset-password .container .form-box .form .inputs .box-input > input {
  height: 4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #091302;
  padding: 0.5rem 2rem;
  width: 70%;
  background-color: white;
}
.main-reset-password .container .form-box .form .inputs .box-input > input::-moz-placeholder {
  font-size: 1.4rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-reset-password .container .form-box .form .inputs .box-input > input::placeholder {
  font-size: 1.4rem;
  color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
}
.main-reset-password .container .form-box .form .inputs .box-input span {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  color: red;
  font-size: 1.2rem;
}
.main-reset-password .container .form-box .form .inputs .btn-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-reset-password .container .form-box .form .inputs .btn-submit button {
  width: 40%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #091302;
  color: #fff;
  font-size: 1.6rem;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.main-reset-password .container .form-box .form .inputs .btn-submit button:hover {
  background-color: black;
  transition: background 0.3s ease-in-out;
}
.main-reset-password .container .form-box .form .remember-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2rem;
}
.main-reset-password .container .form-box .form .remember-btn > span {
  text-transform: capitalize;
  font-size: 1.4rem;
  margin-right: 1rem;
}
.main-reset-password .container .form-box .form .remember-btn > a {
  color: #f1ad00;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  transition: color 0.3s ease-in-out;
}
.main-reset-password .container .form-box .form .remember-btn > a:hover {
  color: rgb(215.5, 154.6950207469, 0);
  transition: color 0.2s ease-in-out;
}

@media (max-width: 1024px) {
  .header .navbar {
    padding: 1rem 3rem;
  }
  .header .navbar .left-side .container-logo {
    margin-right: 1rem;
    width: 12rem;
  }
  .header .navbar .left-side .links {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .header .navbar .left-side .links .link {
    font-size: 1.6rem;
  }
  .header .navbar .left-side .links .link > a {
    padding: 1rem;
  }
  .header .navbar .right-side .links {
    gap: 1rem;
  }
  .header .navbar .right-side .links a {
    font-size: 1.6rem;
  }
  .header .navbar .right-side .auth {
    margin-left: 1rem;
  }
  .header .navbar .right-side .auth::before {
    left: -0.5rem;
  }
  .header .navbar .right-side .auth > a {
    font-size: 1.6rem;
    padding: 0.5rem;
  }
  .footer {
    padding: 2rem 4rem;
  }
  .footer .col2,
  .footer .col3 {
    width: calc((100% - 2rem) / 2);
  }
  .footer .col1 {
    width: 100%;
  }
  .footer .col1 .logo {
    font-size: 3.8rem;
  }
  .footer .col3 {
    gap: 1rem;
  }
  .footer .col3 .contact h2 {
    font-size: 3.2rem;
  }
  .footer .col3 .contact .row1,
  .footer .col3 .contact .row2 {
    gap: 1rem;
  }
  .footer .col3 .social .social-links {
    gap: 1rem;
  }
  .footer .col3 .social .social-links .link a {
    padding: 0.5rem;
  }
  .main {
    padding-bottom: 3rem;
  }
  .main .experience-section > h2 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
  }
  .main .experience-section > p {
    font-size: 1.4rem;
  }
  .main .experience-section .ex .slider-btn {
    font-size: 1.6rem;
    padding: 1rem;
  }
  .main .experience-section .ex > .flow .experience-container {
    gap: 1rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience {
    width: calc((100% - 1rem) / 2);
  }
  .main .experience-section .your-experience {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  .main .experience-section .your-experience .box-ex {
    width: 90%;
  }
  .main .experience-section .your-experience button {
    padding: 1rem;
    width: 30%;
  }
  .main .rating-section .rating-container h3 {
    font-size: 2.2rem;
  }
  .main .rating-section .rating-container .stars .star {
    font-size: 2.6rem;
  }
  .main .rating-section .comments-container {
    gap: 1rem;
    align-items: center;
  }
  .main .rating-section .comments-container .show-comment {
    width: 30rem;
  }
  .main .rating-section .comments-container .show-comment h3 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
    text-decoration: underline;
  }
  .main .rating-section .comments-container .show-comment .comments {
    height: 25rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment {
    margin: 1rem 0;
    padding-bottom: 1rem;
    gap: 0.5rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name {
    gap: 0.5rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name span {
    font-size: 1.6rem;
  }
  .main .rating-section .comments-container .comment {
    gap: 1rem;
  }
  .main .rating-section .comments-container .comment .text-area {
    max-height: 20rem;
    min-height: 20rem;
  }
  .main .rating-section .comments-container .comment .comment-button {
    width: 40%;
  }
  .main-products {
    padding: 3rem;
  }
  .main-products .search-products-section {
    margin-top: 8rem;
  }
  .main-products .search-products-section .row-search {
    width: 90%;
  }
  .main-products .search-products-section > .div-out .category-container {
    display: flex;
    align-items: center;
    width: 95%;
  }
  .main-products .search-products-section > .div-out .category-container .category {
    width: calc((100% - 3rem) / 4);
    border-radius: 2rem;
    font-size: 1.3rem;
    gap: 0.5rem;
  }
  .main-products .search-products-section > .div-out .category-container .category .img {
    width: 3rem;
    height: 3rem;
  }
  .main-products .products-section .products {
    display: flex;
    align-items: flex-start;
    grid-template-columns: none;
  }
  .main-products .products-section .products .product-box {
    width: auto;
    flex: 1;
  }
  .main-products .products-section .products .product-box .product-container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .main-products .products-section .products .product-box .product-container .product {
    width: 100%;
    padding: 1rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-name {
    font-size: 2.4rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price {
    gap: 1.5rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price .price {
    font-size: 1.8rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price .tax {
    font-size: 2.4rem;
  }
  .main-products .products-section .products .product-box .product-container .product .foot {
    height: auto;
  }
  .main-products .products-section .products .product-box .product-container .product .foot .btn {
    gap: 0.5rem;
  }
  .main-products .products-section .products .product-box .product-container .product .foot .btn > button {
    font-size: 1.4rem;
  }
  .main-products .products-section .products .product-box .product-container .product .foot > p {
    font-size: 1.3rem;
  }
  .main-products .products-section .products .product-box .product-container .product .foot > p > span {
    font-size: 1.4rem;
  }
  .main-products .products-section .products .product-sort-by {
    width: 35%;
  }
  .main-products .products-section .products .product-sort-by .sorts h2 {
    font-size: 2rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-price,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-company {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-price > p,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating > p,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters > p,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-company > p {
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: capitalize;
    color: #fff;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars {
    font-size: 1.6rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs input {
    width: 50%;
  }
  .main-single-product {
    padding: 3rem;
  }
  .main-single-product .container {
    padding-top: 8.5rem;
  }
  .main-single-product .container > .product-info {
    gap: 1rem;
  }
  .main-single-product .container > .product-info .imgs-pro {
    width: 30rem;
    min-width: 30rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .main-single-product .container > .product-info .imgs-pro .full-img {
    grid-column: span 3;
    height: 50vh;
  }
  .main-single-product .container > .product-info .imgs-pro > label {
    height: 4rem;
  }
  .main-single-product .container > .product-info .info {
    padding: 0;
  }
  .main-single-product .container > .product-info .info > h1 {
    font-size: 2rem;
  }
  .main-single-product .container > .product-info .info > .rate li {
    font-size: 1.2rem;
  }
  .main-single-product .container > .product-info .info > .short-disc {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product {
    gap: 1rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product > h3 {
    font-size: 1.6rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input {
    gap: 0.5rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input > input {
    width: 11rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input > button {
    padding: 0.8rem 1.5rem;
    font-size: 1.2rem;
  }
  .main-single-product .container > .product-info .info > .row > .price {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .main-single-product .container > .product-info .info > .row > .price p {
    font-size: 1.1rem;
  }
  .main-single-product .container > .product-info .info > .row > .price > div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .main-single-product .container > .product-info .info > .row > .price > div span {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info .info > .row > .price > div span.tax {
    font-size: 3rem;
    text-decoration: none;
    font-weight: bold;
  }
  .main-single-product .container > .product-disc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .main-single-product .container > .product-disc .disc {
    width: 100%;
  }
  .main-single-product .container > .product-disc .disc h4 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product {
    gap: 1rem;
    width: 100%;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating h4 {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating .stars {
    gap: 1.5rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating .stars > li {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .comment {
    width: 80%;
  }
  .main-single-product .container .suggested-products h4 {
    font-size: 2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-btn {
    background-color: rgba(255, 255, 255, 0.6901960784);
  }
  .main-single-product .container .suggested-products .flow .slider-btn.prev {
    left: 0.5rem;
  }
  .main-single-product .container .suggested-products .flow .slider-btn.next {
    right: 0.5rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container {
    gap: 1rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product {
    width: calc((100% - 1rem) / 2);
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body > .product-name {
    font-size: 2.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body > .product-disc {
    font-size: 1.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price {
    gap: 1rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price .price {
    font-size: 1.8rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price .tax {
    font-size: 2.4rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot .btn > button {
    font-size: 1.4rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot > p {
    font-size: 1.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot > p > span {
    font-size: 1.4rem;
  }
  .main-cart {
    padding: 3rem;
  }
  .main-cart .container {
    gap: 3rem;
  }
  .main-cart .container > h1 {
    font-size: 3.2rem;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    color: #091302;
  }
  .main-cart .container > h1 > span {
    font-size: 3.5rem;
    color: rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  }
  .main-cart .container > h1 > span > span {
    font-size: 2.4rem;
  }
  .main-cart .container > h1 > button {
    display: block;
  }
  .main-cart .container .row-products-info {
    position: relative;
  }
  .main-cart .container .row-products-info .products {
    width: 100%;
    gap: 1rem;
  }
  .main-cart .container .row-products-info .tabel-info {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15rem);
    transition: all 0.3s ease-in-out;
  }
  .main-cart .container .row-products-info .tabel-info.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
  }
  .main-cart .container .row-mostPapular-products .flow .slider-btn {
    padding: 1rem;
  }
  .main-cart .container .row-mostPapular-products .flow .slider-container {
    gap: 1rem;
  }
  .main-cart .container .row-mostPapular-products .flow .slider-container > .product-slide {
    width: calc((100% - 2rem) / 3);
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .main-about-us .about-us-container {
    padding: 3rem;
    padding-top: 13rem;
    gap: 2rem;
  }
  .main-about-us .about-us-container .who {
    padding: 2rem 0;
  }
  .main-about-us .about-us-container .who h1 {
    font-size: 2.8rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
  }
  .main-about-us .about-us-container .who p {
    padding: 2rem;
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .main-about-us .about-us-container .what-we-do {
    gap: 1.5rem;
  }
  .main-about-us .about-us-container .what-we-do h2 {
    font-size: 2.2rem;
    text-align: center;
  }
  .main-about-us .about-us-container .what-we-do .box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
  .main-about-us .about-us-container .what-we-do .box p {
    font-size: 1.6rem;
    line-height: 1.2;
    max-height: 25rem;
  }
  .main-about-us .about-us-container .what-we-do .box .img img {
    max-height: 25rem;
  }
  .main-about-us .about-us-container .what-we-offer {
    gap: 1rem;
  }
  .main-about-us .about-us-container .what-we-offer h2 {
    font-size: 2.2rem;
    text-align: center;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service {
    gap: 1rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service .img {
    width: 100%;
    height: 20rem;
    border-radius: 0.5rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service p {
    font-size: 1.6rem;
  }
  .main-about-us .about-us-container .rating-section h2 {
    font-size: 2.2rem;
    text-align: center;
  }
  .main-about-us .about-us-container .rating-section .rating-us {
    gap: 2rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box {
    gap: 2rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box .stars {
    font-size: 2.2rem;
    gap: 1.5rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box p {
    font-size: 1.2rem;
  }
  .main-contact-us {
    gap: 2rem;
    padding: 0 3rem 2rem;
    padding-top: 13rem;
  }
  .main-contact-us .all-emails-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 1rem;
    width: 90%;
  }
  .main-contact-us .all-emails-section .box {
    gap: 0.5rem;
  }
  .main-contact-us .all-emails-section .box h2 {
    font-size: 2.4rem;
  }
  .main-contact-us .all-emails-section .box p {
    font-size: 1.4rem;
    text-align: center;
  }
  .main-contact-us .all-emails-section .box a {
    font-size: 1.6rem;
  }
  .main-contact-us .fast-mail-section {
    gap: 1rem;
  }
  .main-contact-us .fast-mail-section h2 {
    font-size: 2.2rem;
  }
  .main-contact-us .fast-mail-section p {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail {
    gap: 1rem;
    margin-top: 1rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input,
  .main-contact-us .fast-mail-section .form-mail .text-input {
    gap: 1rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input label,
  .main-contact-us .fast-mail-section .form-mail .text-input label {
    width: 10rem;
    font-size: 1.6rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input,
  .main-contact-us .fast-mail-section .form-mail .text-input input {
    height: 4rem;
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input::-moz-placeholder, .main-contact-us .fast-mail-section .form-mail .text-input input::-moz-placeholder {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input::placeholder,
  .main-contact-us .fast-mail-section .form-mail .text-input input::placeholder {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea {
    max-height: 15rem;
    min-height: 15rem;
    max-width: 70%;
    min-width: 70%;
    padding: 1rem 1rem;
    font-size: 1.6rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea::-moz-placeholder {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea::placeholder {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .submit {
    width: 30%;
    font-size: 1.8rem;
    padding: 1rem;
    justify-content: center;
    gap: 1rem;
    text-transform: capitalize;
  }
  .main-sign {
    padding: 3rem;
  }
  .main-sign .container .form-box .box {
    padding: 3rem;
  }
  .main-sign .container .form-box .box .change p {
    line-height: 1.2;
  }
  .main-sign .container .form-box .box .change .btn-login-signup {
    font-size: 1.6rem;
  }
  .main-sign .container .form-box .form,
  .main-sign .container .form-box .form-login {
    padding: 1rem;
  }
  .main-sign .container .form-box .form .title,
  .main-sign .container .form-box .form-login .title {
    font-size: 2.4rem;
  }
  .main-sign .container .form-box .form .inputs .row,
  .main-sign .container .form-box .form-login .inputs .row {
    padding-left: 3rem;
  }
  .main-sign .container .form-box .form .inputs .box-input label,
  .main-sign .container .form-box .form-login .inputs .box-input label {
    width: 8rem;
  }
  .main-sign .container .form-box .form .inputs .box-input input,
  .main-sign .container .form-box .form-login .inputs .box-input input {
    height: 3.5rem;
  }
  .main-sign .container .form-box .form .inputs .btn-submit > button,
  .main-sign .container .form-box .form-login .inputs .btn-submit > button {
    width: 50%;
  }
  .main-sign .container .form-box .form > span,
  .main-sign .container .form-box .form-login > span {
    font-size: 1.8rem;
  }
  .main-sign .container .form-box .form .google-auth > .btn,
  .main-sign .container .form-box .form-login .google-auth > .btn {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .fi-no-notification {
    max-width: 100% !important;
  }
  .mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(9, 19, 2, 0.8);
    backdrop-filter: blur(8px);
    width: 50%;
    height: 100%;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    margin-left: 1rem;
  }
  .mobile-menu.active {
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
  }
  .mobile-menu .menu-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem;
    overflow-y: auto;
  }
  .mobile-menu .menu-container .icon-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(228, 214, 157, 0.6);
  }
  .mobile-menu .menu-container .icon-logo .logo {
    width: 65%;
  }
  .mobile-menu .menu-container .icon-logo .logo a {
    width: 100%;
    height: 4rem;
    overflow: hidden;
  }
  .mobile-menu .menu-container .icon-logo .logo a > img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .mobile-menu .menu-container .icon-logo span {
    font-size: 2.4rem;
    color: #fff;
    cursor: pointer;
  }
  .mobile-menu .menu-container .icon-logo span:hover {
    color: #f1ad00;
    transition: color 0.2s ease-in-out;
  }
  .mobile-menu .menu-container .menu-box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .mobile-menu .menu-container .menu-box .links {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .mobile-menu .menu-container .menu-box .links .link {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: 0.2s background ease-in-out;
  }
  .mobile-menu .menu-container .menu-box .links .link:not(:last-child) {
    border-bottom: 0.1rem solid rgba(228, 214, 157, 0.6);
  }
  .mobile-menu .menu-container .menu-box .links .link.active, .mobile-menu .menu-container .menu-box .links .link:hover {
    background-color: #f1ad00;
    transition: 0.2s background ease-in-out;
  }
  .mobile-menu .menu-container .menu-box .links .link.active a, .mobile-menu .menu-container .menu-box .links .link:hover a {
    color: #fff;
    padding-left: 1.5rem;
    transition: padding 0.2s ease;
  }
  .mobile-menu .menu-container .menu-box .links .link a {
    display: block;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: capitalize;
    width: 100%;
    padding: 0.5rem 0;
  }
  .mobile-menu .menu-container .menu-box .button-signup,
  .mobile-menu .menu-container .menu-box .button-login {
    width: 100%;
  }
  .mobile-menu .menu-container .menu-box .button-signup > a,
  .mobile-menu .menu-container .menu-box .button-signup button,
  .mobile-menu .menu-container .menu-box .button-login > a,
  .mobile-menu .menu-container .menu-box .button-login button {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: rgb(52.7142857143, 111.2857142857, 11.7142857143);
    font-size: 1.8rem;
    padding: 1rem;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: bold;
  }
  .mobile-menu .menu-container .menu-box .button-signup > a:hover, .mobile-menu .menu-container .menu-box .button-signup > a:focus,
  .mobile-menu .menu-container .menu-box .button-signup button:hover,
  .mobile-menu .menu-container .menu-box .button-signup button:focus,
  .mobile-menu .menu-container .menu-box .button-login > a:hover,
  .mobile-menu .menu-container .menu-box .button-login > a:focus,
  .mobile-menu .menu-container .menu-box .button-login button:hover,
  .mobile-menu .menu-container .menu-box .button-login button:focus {
    background-color: #f1ad00;
    transition: 0.2s color ease-in-out;
  }
  .mobile-menu .menu-container .menu-box .button-login > a {
    background-color: rgb(255, 193.489626556, 37);
    transition: background 0.3s ease;
  }
  .mobile-menu .menu-container .menu-box .button-login > a:hover, .mobile-menu .menu-container .menu-box .button-login > a:focus {
    background-color: #f1ad00;
    transition: background 0.3s ease;
  }
  .mobile-menu .menu-container .fast-contact {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    text-transform: capitalize;
    gap: 1rem;
    border-bottom: 1px solid rgba(30.8571428571, 65.1428571429, 6.8571428571, 0.6431372549);
  }
  .mobile-menu .menu-container .fast-contact .fast-phone {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 1.2rem;
    color: #091302;
    gap: 1rem;
    width: 100%;
  }
  .mobile-menu .menu-container .fast-contact .fast-phone p {
    text-align: center;
    width: 100%;
    color: #fff;
  }
  .mobile-menu .menu-container .fast-contact .fast-phone div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu .menu-container .fast-contact .fast-phone div .num {
    color: #f1ad00;
    font-size: 1.4rem;
  }
  .mobile-menu .menu-container .fast-contact .fast-phone div .num:hover {
    color: rgb(215.5, 154.6950207469, 0);
    transition: 0.3s all;
  }
  .mobile-menu .menu-container .fast-contact .fast-phone div span {
    margin: 0 0.5rem;
    color: #f1ad00;
  }
  .mobile-menu .menu-container .fast-contact .fast-email {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.2rem;
    color: #fff;
  }
  .mobile-menu .menu-container .fast-contact .fast-email .f-email {
    color: #f1ad00;
    font-size: 1.4rem;
  }
  .mobile-menu .menu-container .fast-contact .fast-email .f-email:hover {
    color: rgb(215.5, 154.6950207469, 0);
    transition: 0.3s all ease-in-out;
  }
  .mobile-menu .menu-container .created-at {
    width: 100%;
  }
  .mobile-menu .menu-container .created-at p {
    text-align: center;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1.2rem;
    text-transform: capitalize;
  }
  .mobile-menu .menu-container .created-at p a {
    color: #f1ad00;
    font-size: 1.4rem;
  }
  .mobile-menu .menu-container .created-at p:first-of-type {
    margin-bottom: 0.5rem;
  }
  .header .fast-contact {
    display: none;
  }
  .header .navbar {
    padding: 1rem 2rem;
    background-color: #091302;
  }
  .header .navbar .left-side .container-logo {
    margin-right: 0;
    width: 20rem;
    height: 5rem;
  }
  .header .navbar .left-side .links {
    display: none;
  }
  .header .navbar .right-side {
    gap: 0;
  }
  .header .navbar .right-side .links {
    gap: 0;
  }
  .header .navbar .right-side .links a {
    color: #fff;
    font-size: 2rem;
    padding: 1rem;
  }
  .header .navbar .right-side .auth {
    display: none;
  }
  .header .navbar .right-side .auth-user button {
    padding: 0.6rem;
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: bold;
    color: #fff;
  }
  .header .navbar .right-side .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #fff;
    padding: 1rem;
    cursor: pointer;
  }
  .main-profile {
    padding: 2rem;
    padding-top: 9rem;
    gap: 1.5rem;
  }
  .main-profile h1 {
    font-size: 1.8rem;
  }
  .main-profile .user-details {
    width: 100%;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem 2rem;
  }
  .main-profile .user-details .image-profile .circle-img,
  .main-profile .user-details .image-profile .img {
    width: 15rem;
    height: 15rem;
    font-size: 7rem;
  }
  .main-profile .user-details .image-profile .img img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: center;
       object-position: center;
  }
  .main-profile .user-details .inputs {
    gap: 1.5rem;
  }
  .main-profile .user-details .inputs .box {
    width: 100%;
  }
  .main-profile .user-details .inputs .btns .btn,
  .main-profile .user-details .inputs .status .btn {
    font-size: 1.4rem;
    padding: 0.8rem 1.5rem;
  }
  .main-profile .user-details .inputs .status {
    font-size: 1.2rem;
  }
  .main-profile .address {
    padding: 3rem 2rem;
  }
  .main-profile .address .inputs {
    gap: 1.5rem;
  }
  .main-profile .address .inputs .box {
    width: 100%;
  }
  .main-profile .address .inputs .box label {
    font-size: 1.6rem;
  }
  .main-profile .address .inputs .box input,
  .main-profile .address .inputs .box textarea {
    width: 100%;
  }
  .main-profile .address .inputs .box textarea {
    min-height: 8rem;
    max-height: 8rem;
  }
  .main-profile .address .inputs .btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-profile .address .inputs .btns .btn {
    width: 40%;
  }
  .main-profile .section-more {
    flex-direction: column;
  }
  .main-profile .section-more .reset-password {
    width: 100%;
    padding: 3rem 2rem;
  }
  .main-profile .section-more .reset-password h2 {
    font-size: 1.6rem;
  }
  .main-profile .section-more .reset-password .inputs-box .input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .main-profile .section-more .reset-password .inputs-box .input input {
    height: 4.5rem;
  }
  .main-profile .section-more .reset-password .inputs-box .input .error {
    font-size: 1.2rem;
  }
  .main-profile .section-more .reset-password .btns .forgot {
    font-size: 1.2rem;
  }
  .main-profile .section-more .reset-password .btns .btn-reset {
    width: 30%;
    padding: 0.8rem 1.8rem;
    font-size: 1.6rem;
  }
  .main-profile .section-more .some-details {
    gap: 1.5rem;
    row-gap: 2rem;
  }
  .main-profile .section-more .some-details h2 {
    font-size: 1.8rem;
    font-weight: 900;
  }
  .main-profile .section-more .some-details .col {
    font-size: 1.2rem;
  }
  .main-profile .section-more .some-details .col span:first-child {
    font-size: 1.4rem;
  }
  .main-profile .global-btns {
    gap: 1.5rem;
  }
  .main-profile .global-btns .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1.6rem;
  }
  .main-orders {
    padding: 2rem;
    padding-top: 9rem;
    min-height: 50vh;
  }
  .main-orders .reservation .table-container,
  .main-orders .reservation .order-container,
  .main-orders .orders .table-container,
  .main-orders .orders .order-container {
    padding: 1rem;
  }
  .main-orders .reservation .table-container h1,
  .main-orders .reservation .order-container h1,
  .main-orders .orders .table-container h1,
  .main-orders .orders .order-container h1 {
    font-size: 2.4rem;
    padding: 1rem;
  }
  .main-orders .reservation .table-container .container .table tr:first-of-type,
  .main-orders .reservation .order-container .container .table tr:first-of-type,
  .main-orders .orders .table-container .container .table tr:first-of-type,
  .main-orders .orders .order-container .container .table tr:first-of-type {
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: capitalize;
    background-color: #091302;
    color: #fff;
  }
  .main-orders .reservation .table-container .container .table td,
  .main-orders .reservation .order-container .container .table td,
  .main-orders .orders .table-container .container .table td,
  .main-orders .orders .order-container .container .table td {
    font-size: 1.4rem;
  }
  .main-orders .reservation .table-container .container .table td .deleteBtn,
  .main-orders .reservation .order-container .container .table td .deleteBtn,
  .main-orders .orders .table-container .container .table td .deleteBtn,
  .main-orders .orders .order-container .container .table td .deleteBtn {
    padding: 0.7rem 1.5rem;
  }
  .main-checkout {
    padding: 2rem;
    padding-top: 9rem;
  }
  .main-checkout .form-checkout {
    width: 100%;
    padding: 1rem;
  }
  .main-checkout .form-checkout .wizard-step {
    margin: 2rem 0;
  }
  .main-checkout .form-checkout .wizard-step .steps .step {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
  .main-checkout .form-checkout > h1 {
    font-size: 2.2rem;
  }
  .main-checkout .form-checkout .box-checkout .actions > button {
    padding: 1rem 2rem;
    font-size: 1.6rem;
  }
  .main-checkout .form-checkout .box-checkout .one,
  .main-checkout .form-checkout .box-checkout .two,
  .main-checkout .form-checkout .box-checkout .three,
  .main-checkout .form-checkout .box-checkout .final {
    gap: 1rem;
  }
  .main-checkout .form-checkout .box-checkout .one .error,
  .main-checkout .form-checkout .box-checkout .two .error,
  .main-checkout .form-checkout .box-checkout .three .error,
  .main-checkout .form-checkout .box-checkout .final .error {
    font-size: 1.2rem;
    color: red;
    text-transform: capitalize;
  }
  .main-checkout .form-checkout .box-checkout .one .date > label,
  .main-checkout .form-checkout .box-checkout .one .date h3,
  .main-checkout .form-checkout .box-checkout .one .time > label,
  .main-checkout .form-checkout .box-checkout .one .time h3,
  .main-checkout .form-checkout .box-checkout .two .date > label,
  .main-checkout .form-checkout .box-checkout .two .date h3,
  .main-checkout .form-checkout .box-checkout .two .time > label,
  .main-checkout .form-checkout .box-checkout .two .time h3,
  .main-checkout .form-checkout .box-checkout .three .date > label,
  .main-checkout .form-checkout .box-checkout .three .date h3,
  .main-checkout .form-checkout .box-checkout .three .time > label,
  .main-checkout .form-checkout .box-checkout .three .time h3,
  .main-checkout .form-checkout .box-checkout .final .date > label,
  .main-checkout .form-checkout .box-checkout .final .date h3,
  .main-checkout .form-checkout .box-checkout .final .time > label,
  .main-checkout .form-checkout .box-checkout .final .time h3 {
    font-size: 1.8rem;
  }
  .main-checkout .form-checkout .box-checkout .one .date input[type=text],
  .main-checkout .form-checkout .box-checkout .one .time input[type=text],
  .main-checkout .form-checkout .box-checkout .two .date input[type=text],
  .main-checkout .form-checkout .box-checkout .two .time input[type=text],
  .main-checkout .form-checkout .box-checkout .three .date input[type=text],
  .main-checkout .form-checkout .box-checkout .three .time input[type=text],
  .main-checkout .form-checkout .box-checkout .final .date input[type=text],
  .main-checkout .form-checkout .box-checkout .final .time input[type=text] {
    width: 100%;
  }
  .main-checkout .form-checkout .box-checkout .one .date input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .one .time input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .date input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .two .time input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .date input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .three .time input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .date input[type=text]::-moz-placeholder, .main-checkout .form-checkout .box-checkout .final .time input[type=text]::-moz-placeholder {
    font-size: 1.4rem;
  }
  .main-checkout .form-checkout .box-checkout .one .date input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .one .time input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .two .date input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .two .time input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .three .date input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .three .time input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .final .date input[type=text]::placeholder,
  .main-checkout .form-checkout .box-checkout .final .time input[type=text]::placeholder {
    font-size: 1.4rem;
  }
  .main-checkout .form-checkout .box-checkout .two,
  .main-checkout .form-checkout .box-checkout .three,
  .main-checkout .form-checkout .box-checkout .final {
    row-gap: 1rem;
  }
  .main-checkout .form-checkout .box-checkout .two .name,
  .main-checkout .form-checkout .box-checkout .two .email,
  .main-checkout .form-checkout .box-checkout .two .phone,
  .main-checkout .form-checkout .box-checkout .two .address,
  .main-checkout .form-checkout .box-checkout .two .country,
  .main-checkout .form-checkout .box-checkout .two .city,
  .main-checkout .form-checkout .box-checkout .two .state,
  .main-checkout .form-checkout .box-checkout .two .zip,
  .main-checkout .form-checkout .box-checkout .two .complex,
  .main-checkout .form-checkout .box-checkout .two .street,
  .main-checkout .form-checkout .box-checkout .three .name,
  .main-checkout .form-checkout .box-checkout .three .email,
  .main-checkout .form-checkout .box-checkout .three .phone,
  .main-checkout .form-checkout .box-checkout .three .address,
  .main-checkout .form-checkout .box-checkout .three .country,
  .main-checkout .form-checkout .box-checkout .three .city,
  .main-checkout .form-checkout .box-checkout .three .state,
  .main-checkout .form-checkout .box-checkout .three .zip,
  .main-checkout .form-checkout .box-checkout .three .complex,
  .main-checkout .form-checkout .box-checkout .three .street,
  .main-checkout .form-checkout .box-checkout .final .name,
  .main-checkout .form-checkout .box-checkout .final .email,
  .main-checkout .form-checkout .box-checkout .final .phone,
  .main-checkout .form-checkout .box-checkout .final .address,
  .main-checkout .form-checkout .box-checkout .final .country,
  .main-checkout .form-checkout .box-checkout .final .city,
  .main-checkout .form-checkout .box-checkout .final .state,
  .main-checkout .form-checkout .box-checkout .final .zip,
  .main-checkout .form-checkout .box-checkout .final .complex,
  .main-checkout .form-checkout .box-checkout .final .street {
    width: 100%;
  }
  .footer {
    padding: 2rem;
    gap: 1rem;
  }
  .footer .col1 {
    width: 100%;
  }
  .footer .col1 .logo {
    font-size: 3.2rem;
  }
  .footer .col2 {
    width: calc((100% - 1rem) / 2);
  }
  .footer .col2 .links {
    gap: 0.5rem;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
  .footer .col2 .links .link a {
    font-size: 1.4rem;
    padding: 0.5rem;
    font-weight: bold;
  }
  .footer .col3 {
    width: calc((100% - 1rem) / 2);
    gap: 0.5rem;
  }
  .footer .col3 .contact h2 {
    font-size: 1.8rem;
  }
  .footer .col3 .contact .row1,
  .footer .col3 .contact .row2 {
    margin: 0.5rem 0;
    gap: 1rem;
    font-size: 1.3rem;
  }
  .footer .col3 .social .social-links {
    gap: 1rem;
  }
  .footer .col3 .social .social-links .link a {
    font-size: 1.6rem;
  }
  .image-404 img {
    width: 100%;
  }
  .image-404 .back {
    width: 100%;
    flex-direction: row-reverse;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    top: 95%;
    transform: translateY(-95%);
  }
  .image-404 .back h2 {
    font-size: 2.6rem;
  }
  .image-404 .back a {
    font-size: 1.8rem;
    padding: 0.5rem 1.5rem;
  }
  .main {
    padding-bottom: 0;
  }
  .main .multi-cards {
    padding-top: 9rem;
    gap: 1rem;
  }
  .main .multi-cards .card {
    width: 100%;
    position: relative;
  }
  .main .experience-section {
    padding: 2rem;
  }
  .main .experience-section > h2 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
  }
  .main .experience-section > p {
    font-size: 1.3rem;
  }
  .main .experience-section .ex .slider-btn {
    top: 82%;
  }
  .main .experience-section .ex .slider-btn.next {
    right: 0.5rem;
  }
  .main .experience-section .ex .slider-btn.prev {
    left: 0.5rem;
  }
  .main .experience-section .ex > .flow .experience-container {
    gap: 0.5rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience {
    width: calc((100% - 0.5rem) / 2);
    height: 20rem;
    padding: 1rem;
    gap: 1rem;
    justify-content: flex-start;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-head h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-head p {
    -webkit-line-clamp: 3;
    font-size: 1.3rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-body .solution {
    margin: 0;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-body .solution h4 {
    margin-bottom: 0.5rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-body .solution p {
    -webkit-line-clamp: 2;
    font-size: 1.3rem;
  }
  .main .experience-section .ex > .flow .experience-container .experience .experience-body .read-more button {
    font-size: 1.3rem;
  }
  .main .experience-section .your-experience .box-ex {
    width: 100%;
  }
  .main .experience-section .your-experience button {
    width: 40%;
  }
  .main .rating-section {
    padding: 2rem;
    gap: 1rem;
  }
  .main .rating-section .rating-container h3 {
    font-size: 1.8rem;
  }
  .main .rating-section .rating-container .stars {
    margin: 0.5rem;
    gap: 1rem;
  }
  .main .rating-section .rating-container .stars .star {
    font-size: 2.2rem;
  }
  .main .rating-section .comments-container {
    gap: 1rem;
    flex-direction: column;
  }
  .main .rating-section .comments-container .show-comment {
    width: 100%;
  }
  .main .rating-section .comments-container .show-comment h3 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
    text-decoration: underline;
  }
  .main .rating-section .comments-container .show-comment .comments {
    height: 25rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment {
    margin: 1rem 0;
    padding-bottom: 1rem;
    gap: 0.5rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name {
    gap: 0.5rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name span {
    font-size: 1.6rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name span:first-of-type {
    width: 2rem;
    height: 2rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment > p {
    font-size: 1.3rem;
  }
  .main .rating-section .comments-container .comment {
    gap: 1rem;
    width: 100%;
  }
  .main .rating-section .comments-container .comment .text-area {
    max-height: 14rem;
    min-height: 14rem;
  }
  .main .rating-section .comments-container .comment .text-area::-moz-placeholder {
    font-size: 1.4rem;
  }
  .main .rating-section .comments-container .comment .text-area::placeholder {
    font-size: 1.4rem;
  }
  .main .rating-section .comments-container .comment .comment-button {
    width: 40%;
    padding: 1rem;
  }
  .main-products {
    padding: 2rem;
  }
  .main-products .search-products-section {
    margin-top: 6rem;
  }
  .main-products .search-products-section > p {
    font-size: 1.6;
    text-align: center;
  }
  .main-products .search-products-section .row-search {
    width: 100%;
  }
  .main-products .search-products-section .row-search .box,
  .main-products .search-products-section .row-search .btn-filter {
    height: 4.2rem;
  }
  .main-products .search-products-section .row-search .box input {
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
  }
  .main-products .search-products-section .row-search .box input::-moz-placeholder {
    font-size: 1.3rem;
    line-height: 1rem;
  }
  .main-products .search-products-section .row-search .box input::placeholder {
    font-size: 1.3rem;
    line-height: 1rem;
  }
  .main-products .search-products-section .row-search .btn-filter .select-filter p {
    font-size: 1.8rem;
  }
  .main-products .search-products-section .row-search .btn-filter .select-filter p span {
    font-size: 1.8rem;
  }
  .main-products .search-products-section .row-search .btn-filter .check-box {
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .main-products .search-products-section .row-search .btn-filter .check-box .check label {
    font-size: 1.6rem;
  }
  .main-products .search-products-section .row-search .btn-filter .check-box .check input + label {
    width: 1.7rem;
    height: 1.7rem;
  }
  .main-products .search-products-section > .div-out .category-container {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
  }
  .main-products .search-products-section > .div-out .category-container .category {
    width: calc((100% - 2rem) / 3);
    padding: 0.5rem;
  }
  .main-products .products-section .products {
    flex-wrap: wrap;
  }
  .main-products .products-section .products .div-btn-filter {
    display: flex;
    width: 100%;
  }
  .main-products .products-section .products .div-btn-filter .filter-pdt-mob {
    cursor: pointer;
  }
  .main-products .products-section .products {
    position: relative;
  }
  .main-products .products-section .products .product-box {
    flex: 1;
  }
  .main-products .products-section .products .product-box .product-container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
  }
  .main-products .products-section .products .product-box .product-container .product {
    width: calc((100% - 1rem) / 2);
    padding: 0;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-name {
    font-size: 2rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price {
    gap: 1.5rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price .price {
    font-size: 1.8rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .product-price .tax {
    font-size: 2.4rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .foot {
    height: auto;
  }
  .main-products .products-section .products .product-box .product-container .product .body .foot .btn {
    gap: 0.5rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .foot .btn > button {
    font-size: 1.4rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .foot > p {
    font-size: 1.2rem;
  }
  .main-products .products-section .products .product-box .product-container .product .body .foot > p > span {
    font-size: 1.3rem;
  }
  .main-products .products-section .products .product-box .pagenation {
    gap: 1rem;
    font-size: 1.8rem;
    padding: 0.5rem;
  }
  .main-products .products-section .products .product-box .pagenation .pagenation-btn {
    padding: 1rem;
  }
  .main-products .products-section .products .product-box .pagenation .page-numbers {
    gap: 0.5rem;
  }
  .main-products .products-section .products .product-sort-by {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 6cqb;
    transition: all 0.3s ease-in-out;
    z-index: 6;
  }
  .main-products .products-section .products .product-sort-by.active {
    opacity: 1;
    visibility: visible;
    margin-top: 3rem;
    transition: all 0.3s ease-in-out;
  }
  .main-products .products-section .products .product-sort-by .sorts h2 {
    font-size: 2rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row {
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating {
    width: calc((100% - 1rem) / 2);
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating .stars {
    font-size: 1.6rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters {
    width: calc((100% - 1rem) / 2);
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-price {
    width: 100%;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-price .inputs input {
    width: 50%;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-company {
    width: 100%;
  }
  .main-products .products-section .products .product-sort-by .last-offer {
    display: none;
  }
  .main-single-product {
    padding: 2rem;
  }
  .main-single-product .container {
    padding-top: 7rem;
  }
  .main-single-product .container > .product-info {
    width: 100%;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .main-single-product .container > .product-info .imgs-pro {
    width: 100%;
    min-width: 20rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .main-single-product .container > .product-info .imgs-pro .full-img {
    grid-column: span 3;
    height: 45vh;
  }
  .main-single-product .container > .product-info .imgs-pro > label {
    height: 5.5rem;
  }
  .main-single-product .container > .product-info .info {
    width: 100%;
  }
  .main-single-product .container > .product-info .info h1 {
    font-size: 2.2rem;
  }
  .main-single-product .container > .product-info .info > .short-disc {
    font-size: 1.4rem;
    line-height: 1.3;
    min-height: 10rem;
    overflow-y: auto;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product {
    gap: 1rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product > h3 {
    font-size: 2rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input {
    gap: 0.5rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input > input {
    width: 10rem;
    height: 4rem;
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info .info > .row > .reserve-product .box-input > button {
    height: 4rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
  }
  .main-single-product .container > .product-info .info > .row .price {
    justify-content: space-between;
  }
  .main-single-product .container > .product-info .info > .row .price p {
    font-size: 1.3rem;
    text-align: center;
  }
  .main-single-product .container > .product-info .info > .row .price > div span {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info .info > .row .price > div span.tax {
    font-size: 2.8rem;
  }
  .main-single-product .container > .product-info .info > .row-btns {
    gap: 0.5rem;
  }
  .main-single-product .container > .product-info .info > .row-btns > .btn {
    padding: 1rem 0;
    font-size: 1.6rem;
  }
  .main-single-product .container > .product-disc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .main-single-product .container > .product-disc .disc {
    width: 100%;
    min-height: 10rem;
  }
  .main-single-product .container > .product-disc .disc h4 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .main-single-product .container > .product-disc .disc p {
    font-size: 1.4rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product {
    gap: 1rem;
    width: 100%;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating h4 {
    font-size: 2rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating .stars {
    gap: 1.5rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .rating .stars > li {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-disc .rate-comment-product .comment {
    width: 100%;
  }
  .main-single-product .container .suggested-products .flow .slider-container {
    gap: 0.5rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product {
    width: calc((100% - 2rem) / 2);
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body > .product-name {
    font-size: 2.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body > .product-disc {
    font-size: 1.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price {
    gap: 1rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price .price {
    font-size: 1.8rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product > .body .product-price .tax {
    font-size: 2.4rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot .btn > button {
    font-size: 1.4rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot > p {
    font-size: 1.2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .foot > p > span {
    font-size: 1.4rem;
  }
  .main-cart {
    padding: 2rem;
    min-height: 120vh;
  }
  .main-cart .container {
    gap: 2rem;
  }
  .main-cart .container > h1 {
    font-size: 2.8rem;
  }
  .main-cart .container > h1 > span {
    font-size: 2.6rem;
  }
  .main-cart .container > h1 > span > span {
    font-size: 2.2rem;
  }
  .main-cart .container > h1 > button {
    left: 50%;
    bottom: -4rem;
    transform: translateX(-50%);
  }
  .main-cart .container .row-products-info .products .product {
    width: 100%;
  }
  .main-cart .container .row-products-info .products .pagenation {
    gap: 1rem;
    font-size: 1.8rem;
    padding: 0.5rem;
  }
  .main-cart .container .row-products-info .products .pagenation .pagenation-btn {
    padding: 1rem;
  }
  .main-cart .container .row-products-info .products .pagenation .page-numbers {
    gap: 0.5rem;
  }
  .main-cart .container .row-products-info .tabel-info {
    width: 100% !important;
    height: auto;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  .main-cart .container .row-products-info .tabel-info > h2 {
    font-size: 1.8rem !important;
  }
  .main-cart .container .row-products-info .tabel-info .total-info > div {
    gap: 1rem;
  }
  .main-cart .container .row-products-info .tabel-info .total-info > div span {
    font-size: 1.6rem;
    height: 4rem;
  }
  .main-cart .container .row-products-info .tabel-info .total-info > div span:first-of-type {
    width: 50%;
    font-size: 1.4rem;
  }
  .main-cart .container .row-products-info .tabel-info .total-info > div:last-of-type span:last-child {
    font-size: 2.2rem;
  }
  .main-cart .container .row-products-info .tabel-info .checkout-all {
    padding: 1rem;
    font-size: 1.6rem;
  }
  .main-about-us .about-us-container {
    padding: 2rem;
    padding-top: 11rem;
    gap: 1rem;
  }
  .main-about-us .about-us-container .who {
    padding: 0;
  }
  .main-about-us .about-us-container .who h1 {
    font-size: 2rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    padding: 1rem;
  }
  .main-about-us .about-us-container .who p {
    padding: 1rem;
    font-size: 1.6rem;
    line-height: 1.1;
  }
  .main-about-us .about-us-container .what-we-do {
    gap: 1rem;
  }
  .main-about-us .about-us-container .what-we-do h2 {
    font-size: 1.8rem;
  }
  .main-about-us .about-us-container .what-we-do .box {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
  .main-about-us .about-us-container .what-we-do .box p {
    font-size: 1.4rem;
    line-height: 1.1;
    max-height: 20rem;
  }
  .main-about-us .about-us-container .what-we-do .box .img img {
    max-height: 20rem;
  }
  .main-about-us .about-us-container .what-we-offer {
    gap: 1rem;
  }
  .main-about-us .about-us-container .what-we-offer h2 {
    font-size: 1.8rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service {
    gap: 0.5rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service .img {
    height: 15rem;
  }
  .main-about-us .about-us-container .what-we-offer .box-offer .service p {
    font-size: 1.6rem;
  }
  .main-about-us .about-us-container .rating-section h2 {
    font-size: 1.8rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us {
    gap: 1rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box {
    gap: 1rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box .stars {
    font-size: 1.8rem;
    gap: 1rem;
  }
  .main-about-us .about-us-container .rating-section .rating-us .box p {
    font-size: 1rem;
  }
  .main-contact-us {
    gap: 2rem;
    padding: 0 2rem 1rem;
    padding-top: 11rem;
  }
  .main-contact-us .all-emails-section {
    width: 100%;
  }
  .main-contact-us .all-emails-section .box {
    gap: 0.5rem;
  }
  .main-contact-us .all-emails-section .box h2 {
    font-size: 1.8rem;
  }
  .main-contact-us .all-emails-section .box p {
    font-size: 1.2rem;
  }
  .main-contact-us .all-emails-section .box a {
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section {
    gap: 0.5rem;
  }
  .main-contact-us .fast-mail-section h2 {
    font-size: 1.8rem;
  }
  .main-contact-us .fast-mail-section p {
    font-size: 1.3rem;
  }
  .main-contact-us .fast-mail-section .form-mail {
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input,
  .main-contact-us .fast-mail-section .form-mail .text-input {
    gap: 0.5rem;
    flex-direction: column;
    align-items: center;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input label,
  .main-contact-us .fast-mail-section .form-mail .text-input label {
    width: 100%;
    text-align: start;
    font-size: 1.6rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input,
  .main-contact-us .fast-mail-section .form-mail .text-input input {
    width: 100%;
    height: 3.5rem;
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input::-moz-placeholder, .main-contact-us .fast-mail-section .form-mail .text-input input::-moz-placeholder {
    font-size: 1.3rem;
  }
  .main-contact-us .fast-mail-section .form-mail .mail-input input::placeholder,
  .main-contact-us .fast-mail-section .form-mail .text-input input::placeholder {
    font-size: 1.3rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea {
    max-height: 13rem;
    min-height: 13rem;
    max-width: 100%;
    min-width: 100%;
    padding: 1rem;
    font-size: 1.4rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea::-moz-placeholder {
    font-size: 1.3rem;
  }
  .main-contact-us .fast-mail-section .form-mail .text-input textarea::placeholder {
    font-size: 1.3rem;
  }
  .main-contact-us .fast-mail-section .form-mail .submit {
    width: 15rem;
    font-size: 1.6rem;
    padding: 1rem;
  }
  .main-appointment .appointment {
    padding: 2rem;
  }
  .main-appointment .appointment .form-appointment {
    width: 100%;
    min-height: auto;
    padding: 2rem;
    margin-top: 7rem;
  }
  .main-appointment .appointment .form-appointment .wizard-step .steps .step {
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
  }
  .main-appointment .appointment .form-appointment > h1 {
    font-size: 2.8rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment {
    padding-bottom: 4rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final {
    row-gap: 1rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-name .circle,
  .main-appointment .appointment .form-appointment .box-appointment .final .info-date-time .circle {
    display: none;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-name,
  .main-appointment .appointment .form-appointment .box-appointment .final .info-date-time {
    gap: 1rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-name > div h2,
  .main-appointment .appointment .form-appointment .box-appointment .final .info-date-time > div h2 {
    width: 100%;
    text-align: center;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .date,
  .main-appointment .appointment .form-appointment .box-appointment .one .time {
    width: 100%;
    min-width: 24rem;
  }
  .main-register {
    padding: 2rem;
  }
  .main-register .container {
    padding-top: 5rem;
  }
  .main-register .container .form-box {
    width: 90%;
  }
  .main-register .container .form-box .form .inputs .box-input {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .main-register .container .form-box .form .inputs .box-input > p {
    width: 90%;
  }
  .main-register .container .form-box .form .inputs .box-input > label {
    font-size: 1.6rem;
  }
  .main-register .container .form-box .form .inputs .box-input > input {
    width: 100%;
  }
  .main-register .container .form-box .form .inputs .box-input.agr {
    flex-direction: row;
  }
  .main-login {
    padding: 2rem;
  }
  .main-login .container .form-box {
    width: 90%;
  }
  .main-login .container .form-box .form .inputs {
    gap: 3rem;
  }
  .main-login .container .form-box .form .inputs .box-input {
    align-items: flex-start;
    flex-direction: column;
  }
  .main-login .container .form-box .form .inputs .box-input > label {
    font-size: 1.6rem;
  }
  .main-login .container .form-box .form .inputs .box-input > input {
    height: 4.5rem;
    width: 100%;
  }
  .main-forgot-pass {
    padding: 2rem;
  }
  .main-forgot-pass .container .form-box {
    width: 90%;
    position: absolute;
  }
  .main-forgot-pass .container .form-box .form .inputs {
    gap: 3rem;
  }
  .main-forgot-pass .container .form-box .form .inputs .box-input {
    align-items: flex-start;
    flex-direction: column;
  }
  .main-forgot-pass .container .form-box .form .inputs .box-input > label {
    font-size: 1.6rem;
  }
  .main-forgot-pass .container .form-box .form .inputs .box-input > input {
    height: 4.5rem;
    width: 100%;
  }
  .main-reset-password {
    padding: 2rem;
  }
  .main-reset-password .container .form-box {
    width: 90%;
  }
  .main-reset-password .container .form-box .form .inputs {
    gap: 3rem;
  }
  .main-reset-password .container .form-box .form .inputs .box-input {
    align-items: flex-start;
    flex-direction: column;
  }
  .main-reset-password .container .form-box .form .inputs .box-input > label {
    font-size: 1.6rem;
  }
  .main-reset-password .container .form-box .form .inputs .box-input > input {
    height: 4.5rem;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .main .experience-section > .flow .experience-container {
    gap: 0;
  }
  .main .experience-section > .flow .experience-container .experience {
    width: 100%;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product {
    width: 100%;
  }
  .main-products .products-section .products .product-box .product-container .product {
    width: 100%;
    height: 28rem;
  }
}
@media (max-width: 480px) {
  .mobile-menu {
    width: 100%;
    margin: 0;
  }
  .tags {
    width: 100% !important;
  }
  .empty {
    height: 8rem !important;
    font-size: 1rem !important;
    margin: 1rem 0 !important;
  }
  .empty h1 {
    padding: 1rem !important;
    text-align: center !important;
  }
  .header .navbar {
    padding: 1rem;
  }
  .header .navbar .left-side .container-logo {
    width: 14rem;
    height: 3.5rem;
  }
  .header .navbar .right-side .links > a {
    padding: 0.5rem;
    font-size: 1.6rem;
  }
  .header .navbar .right-side .auth-user > button {
    width: 3rem;
    height: 3rem;
    font-size: 1.4rem;
  }
  .header .navbar .right-side .menu-icon {
    padding: 0.5rem;
    font-size: 1.8rem;
  }
  .footer {
    padding: 1rem !important;
  }
  .footer .col2,
  .footer .col3 {
    width: 100% !important;
  }
  .footer .col1 > .logo {
    padding: 0;
  }
  .footer .col2 .links .link {
    text-align: center;
  }
  .footer .col2 .links .link > a {
    font-size: 1.6rem;
  }
  .footer .col3 .contact h2 {
    font-size: 2.2rem;
  }
  .footer .col3 .contact .row1,
  .footer .col3 .contact .row2 {
    font-size: 1.6rem;
  }
  .footer .col3 .social .social-links .link a {
    font-size: 2.2rem;
  }
  .main {
    padding: 0;
  }
  .main .multi-cards {
    margin-top: 8rem;
    gap: 1.5rem;
  }
  .main .multi-cards .card .text h1 {
    font-size: 2rem;
  }
  .main .multi-cards .card .text p {
    font-size: 1.2rem;
  }
  .main .multi-cards .card.appointment-card .text h1 {
    font-size: 1.6rem;
  }
  .main .multi-cards .card.appointment-card .text p {
    font-size: 1.2rem;
    display: block;
  }
  .main section {
    padding: 1rem !important;
  }
  .main section > h2 {
    font-size: 2.6rem !important;
  }
  .main .experience-section .ex .flow .experience-container .experience {
    width: 100%;
    height: 22rem;
    padding: 2rem;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name > div {
    width: 70%;
  }
  .main .rating-section .comments-container .show-comment .comments .comment .user_name > div span {
    flex: 1;
  }
  .main-questions {
    padding: 1rem;
  }
  .main-questions .container-q {
    gap: 1.5rem;
    padding-top: 7rem;
  }
  .main-questions .container-q > h1 {
    font-size: 2.6rem;
  }
  .main-questions .container-q > .categories {
    gap: 1.5rem;
  }
  .main-questions .container-q > .categories .category {
    padding: 0.7rem 1rem;
    font-size: 1.4rem;
  }
  .main-questions .container-q > .box {
    gap: 1.5rem;
    margin-top: 1rem;
  }
  .main-questions .container-q > .box > .q-a .q {
    padding: 2rem 1.5rem;
    font-size: 1.4rem;
  }
  .main-orders {
    padding: 1rem;
    padding-top: 8rem;
    min-height: 60vh;
  }
  .main-orders .reservation .table-container h1,
  .main-orders .reservation .order-container h1,
  .main-orders .orders .table-container h1,
  .main-orders .orders .order-container h1 {
    font-size: 2rem;
  }
  .main-appointment .appointment .form-appointment {
    gap: 1rem;
    min-height: 30rem;
    padding: 2rem 1rem;
  }
  .main-appointment .appointment .form-appointment .wizard-step {
    margin: 2rem 0;
  }
  .main-appointment .appointment .form-appointment .wizard-step .steps .step {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }
  .main-appointment .appointment .form-appointment > h1 {
    font-size: 3.2rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment {
    padding-bottom: 5rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .actions > button {
    padding: 1rem 2rem;
    font-size: 1.6rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .date > label,
  .main-appointment .appointment .form-appointment .box-appointment .one .date h3,
  .main-appointment .appointment .form-appointment .box-appointment .one .time > label,
  .main-appointment .appointment .form-appointment .box-appointment .one .time h3,
  .main-appointment .appointment .form-appointment .box-appointment .two .date > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .date h3,
  .main-appointment .appointment .form-appointment .box-appointment .two .time > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .time h3,
  .main-appointment .appointment .form-appointment .box-appointment .three .date > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .date h3,
  .main-appointment .appointment .form-appointment .box-appointment .three .time > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .time h3,
  .main-appointment .appointment .form-appointment .box-appointment .final .date > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .date h3,
  .main-appointment .appointment .form-appointment .box-appointment .final .time > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .time h3 {
    font-size: 1.6rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .date input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .one .time input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .two .date input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .two .time input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .three .date input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .three .time input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .final .date input[type=text],
  .main-appointment .appointment .form-appointment .box-appointment .final .time input[type=text] {
    width: 100%;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .time .row,
  .main-appointment .appointment .form-appointment .box-appointment .two .time .row,
  .main-appointment .appointment .form-appointment .box-appointment .three .time .row,
  .main-appointment .appointment .form-appointment .box-appointment .final .time .row {
    gap: 0.5rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .time .row .s-time,
  .main-appointment .appointment .form-appointment .box-appointment .two .time .row .s-time,
  .main-appointment .appointment .form-appointment .box-appointment .three .time .row .s-time,
  .main-appointment .appointment .form-appointment .box-appointment .final .time .row .s-time {
    font-size: 1.4rem;
    min-width: 11rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .one .time .row .s-time label,
  .main-appointment .appointment .form-appointment .box-appointment .two .time .row .s-time label,
  .main-appointment .appointment .form-appointment .box-appointment .three .time .row .s-time label,
  .main-appointment .appointment .form-appointment .box-appointment .final .time .row .s-time label {
    padding: 1rem 0.5rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .two,
  .main-appointment .appointment .form-appointment .box-appointment .three,
  .main-appointment .appointment .form-appointment .box-appointment .final {
    row-gap: 1rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .two .name,
  .main-appointment .appointment .form-appointment .box-appointment .two .email,
  .main-appointment .appointment .form-appointment .box-appointment .two .phone,
  .main-appointment .appointment .form-appointment .box-appointment .two .address,
  .main-appointment .appointment .form-appointment .box-appointment .two .country,
  .main-appointment .appointment .form-appointment .box-appointment .two .city,
  .main-appointment .appointment .form-appointment .box-appointment .two .state,
  .main-appointment .appointment .form-appointment .box-appointment .two .zip,
  .main-appointment .appointment .form-appointment .box-appointment .two .complex,
  .main-appointment .appointment .form-appointment .box-appointment .three .name,
  .main-appointment .appointment .form-appointment .box-appointment .three .email,
  .main-appointment .appointment .form-appointment .box-appointment .three .phone,
  .main-appointment .appointment .form-appointment .box-appointment .three .address,
  .main-appointment .appointment .form-appointment .box-appointment .three .country,
  .main-appointment .appointment .form-appointment .box-appointment .three .city,
  .main-appointment .appointment .form-appointment .box-appointment .three .state,
  .main-appointment .appointment .form-appointment .box-appointment .three .zip,
  .main-appointment .appointment .form-appointment .box-appointment .three .complex,
  .main-appointment .appointment .form-appointment .box-appointment .final .name,
  .main-appointment .appointment .form-appointment .box-appointment .final .email,
  .main-appointment .appointment .form-appointment .box-appointment .final .phone,
  .main-appointment .appointment .form-appointment .box-appointment .final .address,
  .main-appointment .appointment .form-appointment .box-appointment .final .country,
  .main-appointment .appointment .form-appointment .box-appointment .final .city,
  .main-appointment .appointment .form-appointment .box-appointment .final .state,
  .main-appointment .appointment .form-appointment .box-appointment .final .zip,
  .main-appointment .appointment .form-appointment .box-appointment .final .complex {
    width: 100%;
  }
  .main-appointment .appointment .form-appointment .box-appointment .two .name > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .email > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .phone > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .address > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .country > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .city > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .state > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .zip > label,
  .main-appointment .appointment .form-appointment .box-appointment .two .complex > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .name > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .email > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .phone > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .address > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .country > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .city > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .state > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .zip > label,
  .main-appointment .appointment .form-appointment .box-appointment .three .complex > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .name > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .email > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .phone > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .address > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .country > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .city > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .state > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .zip > label,
  .main-appointment .appointment .form-appointment .box-appointment .final .complex > label {
    font-size: 1.6rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final h2 {
    color: #091302;
    text-transform: capitalize;
    font-size: 1.6rem;
    font-weight: bold;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-name,
  .main-appointment .appointment .form-appointment .box-appointment .final .info-date-time {
    width: 100%;
    gap: 1rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-address h1 {
    font-size: 2rem;
  }
  .main-appointment .appointment .form-appointment .box-appointment .final .info-address h2 {
    width: 100%;
  }
  .main-products {
    padding: 1rem;
    gap: 1rem;
  }
  .main-products .search-products-section {
    margin-top: 6rem;
  }
  .main-products .search-products-section .row-search .box {
    padding: 0;
    padding-left: 4rem;
  }
  .main-products .search-products-section .row-search .box .icon-search {
    font-size: 1.6rem;
    left: 1rem;
  }
  .main-products .search-products-section .row-search .box input {
    padding: 0.5rem 0;
  }
  .main-products .products-section .products .product-sort-by {
    height: auto;
  }
  .main-products .products-section .products .product-sort-by .sorts .row {
    gap: 2rem;
  }
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-letters,
  .main-products .products-section .products .product-sort-by .sorts .row .sort-by-rating {
    width: 100%;
  }
  .main-products .products-section .products .product-box .product-container .product {
    width: 100%;
  }
  .main-cart .container h1 > button {
    bottom: -7rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product {
    width: 100%;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-name {
    font-size: 2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price {
    gap: 1rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price .price {
    font-size: 1.6rem;
  }
  .main-single-product .container .suggested-products .flow .slider-container > .product .body .row .product-price .tax {
    font-size: 2rem;
  }
  .main-single-product .container .suggested-products .flow .slider-btn {
    padding: 0.7rem;
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info {
    flex-direction: column-reverse;
  }
  .main-single-product .container > .product-info .info h1 {
    width: 100%;
  }
  .main-single-product .container > .product-info .info .rate {
    width: 100%;
    justify-content: flex-end;
  }
  .main-single-product .container > .product-info .info .row {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .main-single-product .container > .product-info .info .row .reserve-product h3 {
    font-size: 1.8rem;
  }
  .main-single-product .container > .product-info .info .row .reserve-product .box-input > input {
    width: 8rem;
    height: 3.5rem;
    font-size: 1.6rem;
  }
  .main-single-product .container > .product-info .info .row .reserve-product .box-input > button {
    height: 3.5rem;
  }
  .main-single-product .container > .product-info .info .row .price {
    width: 100%;
    justify-content: flex-end;
  }
  .main-single-product .container > .product-info .info .row .price > p {
    display: none;
  }
  .main-single-product .container > .product-disc .rate-comment-product .comment > textarea {
    max-height: 10rem;
    min-height: 10rem;
  }
  .main-contact-us {
    padding-top: 10rem;
  }
  .main-contact-us .all-emails-section {
    gap: 1;
    grid-template-columns: 1fr;
  }
  .main-login .container .form-box .other-auth > a,
  .main-register .container .form-box .other-auth > a {
    width: 100%;
    gap: 1rem;
  }
  .main-about-us .about-us-container {
    padding-top: 9rem;
  }
}
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes stars {
  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(380deg);
  }
}/*# sourceMappingURL=main.css.map */