@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');
@import url('/assets/css/responsive_layout.css');

*{
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  
}

input[type=checkbox], input[type=radio] {
  accent-color: #0aad0a;
}

.main-container {
  width: 1300px;
  margin: auto;
}

/* Top Menu */
.top-menu-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;  
  height: 12px;
  position: relative;
  padding: 5px 0;
}

.motto {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
}

.motto p {
  font-size: 14px;
  color: grey;
  font-weight: bold;
}

/* Language Dropdown */
.language-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
}

.lang-drop-btn {
  background: transparent;
  color: black;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
.lang-down-icon {
  margin-left: 10px;
  font-size: 12px;
  color: grey;
  }

.lang-dropdown {
  position: relative;
  display: inline-block;
  right: 0;
}
  
.lang-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  border: 0.2px black solid;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 8px;
  right: 0;
}
  
.lang-dropdown-content a {
  color: black;
  padding: 10px 14px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}
  
.lang-dropdown-content a:hover {
  background-color: #cfcccc
}
  
/* Header Bar */
.header-bar {
  display: flex;
  justify-content: space-between  ;
  align-items: center;
  width: 1300px;
}

.header-bar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-bar-menu {
  display: flex;
  align-items: center;
  column-gap: 120px;
  padding: 20px 0;
}

.header-center {
  display: flex;
  column-gap: 10px;
  position: relative;
  justify-items: center;
  align-items: center;
}

.header-bar-search {
  width: 600px;
  position: relative;
  display: flex;
  height: 40px;
}
  
.search-input {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  width: 600px;
  border: 1px solid grey;
  border-right: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
  
.search-input:focus{
  color: black;
  transition: 0.5s;
  border: 1px green solid;
  border-right: none;
}

.search-input:focus.search-btn{
  transition: 0.5s;
  border: 1px green solid;
  border-left: none;
  color: green;
}
  
.search-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius: 0 5px 5px 0;
  border-left: none;
  cursor: pointer;
  font-size: 20px;
}

.location-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  color: grey;
  background-color: transparent;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid darkgray;
  cursor: pointer;
}

.location-btn i {
  margin-right: 5px;
}

.location-btn:hover {
  background-color: darkgrey;
}

.header-right {
  display: flex;
  column-gap: 10px;
  position: relative;
  justify-items: center;
  align-items: center;
  width: 160px;
  justify-content: flex-end;
}

.favorites-icon {
  font-size: 20px;
  color: grey;
  cursor: pointer;
  position: relative;
}

.account-icon {
  font-size: 20px;
  color: grey;
  cursor: pointer;
  position: relative;
  margin-left: 5px;
}

.account-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
}

.account-drop-btn {
  background: transparent;
  color: black;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
.account-down-icon {
  margin-left: 10px;
  font-size: 12px;
  color: grey;
  }

.account-dropdown {
  position: relative;
  display: inline-block;
}
  
.account-dropdown-content {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  background-color: #f9f9f9;
  min-width: 120px;
  border: 1px #d3d3d3 solid;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 5px 0 10px 0;
  right: 0;
}

.account-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
  background: green;
  color: white;
  font-size: 16px;
}

.account-btn:last-of-type {
  margin-top: 10px;
}

.account-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}
  
.header-right i {
  font-size: 20px;
  color: grey;
  cursor: pointer;
  position: relative;
  margin-left: 5px;
}

.cart-icon {
  font-size: 20px;
  color: grey;
  cursor: pointer;
  position: relative;
  margin-left: 5px;
}

.menu-icon {
  display: none;
  font-size: 20px;
  color: grey;
  cursor: pointer;
  position: relative;
  margin-left: 5px;
}

.badge{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  background-color: green;
  padding: 5px 5px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  top: -5px;
  left: 20px;
}

/* Navbar */
/* Add a black background color to the top navigation */
nav {
  border-bottom: 1px solid #d3d3d3;
}

.topnav {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding-bottom: 10px;

}
  
.nav-item {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}

.nav-item:hover {
  color: green;
}

.dropdown {
  float: left;
  overflow: hidden;
  z-index: 3;
}
  
.dropdown .dropbtn {
  color: black;
  font-size: 14px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
}
  
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  border-radius: 15px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 5px 16px;
  font-size: 14px;
  text-decoration: none;
  display: block;
  text-align: left;
}
  
.dropdown:hover .dropbtn {
  color: black;
}
  
.dropdown-content a:hover {
  background-color: #ddd;
  color: green;
}
  
.dropdown:hover .dropdown-content {
  display: block;
}
  
.all-departments-btn {
  background-color: green;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  color: white;
  font-weight: 700;
  cursor: pointer;
}


/* Mega Dropdown */
.mega-dropdown {
  float: left;
  overflow: hidden;
}
  
.mega-dropdown .dropbtn {
  color: black;
  font-weight: 700;
  font-size: 14px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0 auto;
}
  
.mega-dropdown-content {
  width: 1130px;
  z-index: 6;
  display: none;
  position: absolute;
  margin-top: 40px;
  padding: 5px 15px;
  column-gap: 50px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.mega-dropdown-content ul {
  display: block;
  margin-top: 60px;
  width: 220px;
  text-align: center;
  padding: 5px 5px;
  color: green;
}

.mega-dropdown-content ul img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.mega-dropdown-content ul li {
  padding: 5px 5px;
  text-align: left;
}

.mega-dropdown-content ul li a{
  padding: 5px 10px;
  width: 220px;
  height: 10px;
  border-radius: 10px;
  color: black;
}
.mega-dropdown-content ul li:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
}

.mega-dropdown-content ul li:nth-child(2) {
  margin-top: 10px;
}

.mega-dropdown-content a:hover {
  background-color: #ddd;
}
  
.mega-dropdown:hover .mega-dropdown-content {
  display: flex;
}


/* Main Slider */
.swiper {
  display: flex;
  width: 1300px;
  margin-top: 20px;
  border-radius: 10px;
  z-index: 2;
}

.main-slide {
  display: flex;
  width: 1300px;
  height: 500px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

.slide-content {
  position: absolute;
  margin-top: 100px;
  margin-left: 60px;
  float: left;
  z-index: 2;
}

.discount-badge {
  background: orange;
  width: 220px;
  color: black;
  font-size: 14px;
  text-align: center;
  border-radius: 10px;
  padding: 3px;
}

.slide-head {
  font-size: 40px;
  color: black;
  margin-top: 10px;
}

.slide-text {
  width: 420px;
  color: grey;
  font-size: 20px;
  margin-top: 20px;
}

.slide-btn {
  width: 120px;
  height: 40px;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 20px;
  transition: 0.5s;
  cursor: pointer;
}

.slide-btn i {
  margin-left: 5px;
  font-size: 10px;
}

.slide-btn:hover {
  transition: 0.5s;
  background: grey;
}

.slide-image img{
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Featured Contaiener */
.featured-container {
  max-width: 1300px;
  margin: 40px auto;
}

.featured-container h2 {
  color: black;
  float: left;
  margin-bottom: 40px;
}

.featured-slide {
  display: flex;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  border: 1px lightgrey solid;
  transition: 0.2s;
}

.featured-slide-content {
  display: flex;
  width: 200px;
  height: 215px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.featured-slide:hover {
  border: 1px green solid;
  box-shadow: 0px 0px 100px 5px rgba(38, 240, 92,0.1);
  color: green;
  transition: 0.2s;
}

.featured-slide:hover .featured-slide-content h3 {
  color: green;
  transition: 0.2s;
}

.featured-slide-content img {
  width: 100;
  height: 100px;
  object-fit: cover;
}

.featured-slide-content h3 {
  font-size: 15px;
  color: black;
  margin-top: 15px;
  margin-bottom: 30px;
  transition: 0.2s;
}

/* Deals Style */
.deals-container {
  max-width: 1300px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  column-gap: 30px;
}

.deal {
  display: flex;
  width: 635px;
  height: 200px;
  position: relative;
  border-radius: 10px;
}

.deal-img {
  width: 635px;
  height: 200px;
  position: absolute;
  object-fit: cover;
  border-radius: 10px;
}

.deal-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
  margin: 50px 50px;
}


.deal-title {
  font-size: 20px;
}

.deal-amount {
  font-size: 14px;
  color: grey;
}

.deal-btn {
  width: 100px;
  height: 30px;
  padding: 3px;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px; 
  transition: 0.5s;
  cursor: pointer;
}

.deal-btn:hover {
  transition: 0.5s;
  background: grey;
}


/* Popular Products */
.pop-prod-container {
  max-width: 1300px;
  margin: 50px auto
}

.pop-prod {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  flex-wrap: wrap;
  width: 1300px;
  margin-top: 40px;
}

.pop-prod-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 210px;
  height: 300px;
  border: #d3d3d3 1px solid;
  border-radius: 10px;
  margin: 8px 8px 8px 0;
  padding: 20px;
  transition: 0.5s;
}

.pop-prod-img {
  width:  200px;
  height: 200px;
  object-fit: cover;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop-prod-img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.pop-prod-btn-group {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  width: 100px;
  height: 30px;
  margin-top: 80%;
  transition: 0.5s;
}

.pop-prod-btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 3px;
  font-size: 12px;
  border-radius: 5px;
  background: white;
  color: black;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transition: 0.5s;
  cursor: pointer;
}

.pop-prod-btn-menu:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.pop-prod-card:hover {
  border: 1px green solid;
}

.pop-prod-card:hover .pop-prod-btn-group {
  display: flex;
  transition: 0.5s;
}

.pop-prod-category {
  font-size: 12px;
  color: grey;
}

.pop-prod-title {
  font-size: 14px;

  margin-top: 10px;
}

.pop-prod-rating {
  display: flex;
  align-items: center;
}

.pop-prod-rating i {
  font-size: 12px;
  color: orange;
}

.pop-prod-comments {
  font-size: 14px;
  color: grey;
  margin-left: 5px;
}

.pop-prod-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.pop-prod-price {
  font-size: 16px;
  font-weight: 700;
}

.pop-prod-discount-price {
  font-size: 16px;
  color: grey;
  text-decoration: line-through;
}

.pop-prod-btn {
  width: 50px;
  height: 20px;
  padding: 3px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700; 
  transition: 0.5s;
  cursor: pointer;
}

.pop-prod-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.pop-prod-btn i {
  font-size: 10px;
}

/* Daily Best Sells */
.dbs-container {
  width: 1300px;
  margin: 40px auto;
}

.dbs {
  display: flex;
  grid-template-columns: 25% 25% 25% 25%;
  margin-top: 40px;
  column-gap: 12px;
}

.dbs-banner-card {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 460px;
  width: 300px;
}

.dbs-banner-img {
  width: 100%;
  height: 100%;
  border: #d3d3d3 1px solid;
  border-radius: 10px;
  transition: 0.5s;
}

.dbs-banner-title {
  width: 305px;
  font-size: 26px;
  color: white;
  position: absolute;
  margin-top: 50px;
  margin-left: 15px;
}

.dbs-banner-text {
  width: 305px;
  font-size: 16px;
  color: white;
  position: absolute;
  margin-top: 140px;
  margin-left: 15px;
}

.dbs-banner-btn {
  width: 120px;
  height: 40px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 20px;
  transition: 0.5s;
  cursor: pointer;
  position: absolute;
  margin-top: 200px;
  margin-left: 35px;
}

.dbs-banner-btn i {
  margin-left: 5px;
  font-size: 10px;
}

.dbs-banner-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.dbs-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: #d3d3d3 1px solid;
  border-radius: 10px;
  padding: 10px 20px;
  transition: 0.5s;
  max-height: 445px;
  width: 280px;
}

.dbs-img {
  width: 300px;
  height: 250px;
  object-fit: cover;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.dbs-btn-group {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  width: 100px;
  height: 30px;
  margin-top: 80%;
  transition: 0.5s;
}

.dbs-btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 3px;
  font-size: 12px;
  border-radius: 5px;
  background: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transition: 0.5s;
  cursor: pointer;
}

.dbs-btn-menu:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.dbs-card:hover {
  border: 1px green solid;
}

.dbs-card:hover .dbs-btn-group {
  display: flex;
  transition: 0.5s;
}

.dbs-category {
  font-size: 12px;
  color: grey;
}

.dbs-title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
}

.dbs-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  column-gap: 10px;
}

.dbs-rating {
  display: flex;
  align-items: center;
}

.dbs-rating i {
  font-size: 12px;
  color: orange;
}

.dbs-comments {
  font-size: 14px;
  color: grey;
  margin-left: 5px;
}

.dbs-footer {
  display: block;
  margin-top: 10px;
}

.dbs-price {
  font-size: 16px;
  font-weight: 700;
}

.dbs-discount-price {
  font-size: 16px;
  color: grey;
  text-decoration: line-through;
}

.dbs-btn {
  width: 100%;
  height: 30px;
  padding: 3px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700; 
  transition: 0.5s;
  cursor: pointer;
}

.dbs-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.dbs-btn i {
  font-size: 10px;
}

.dbs-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  margin-top: 20px;
}

.dbs-timer-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 60px;
  height: 40px;
  margin: 0 10px;
  border: 1px #d3d3d3 solid;
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
}

/* Features */
.features-container {
  width: 1300px;
  margin: 40px auto;
} 

.features-head {
  font-size: 26px;
  font-weight: 700;
  color: black;
  margin-bottom: 40px;
}

.features {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center ;
  border: #d3d3d3 1px solid;
  border-radius: 10px;
  padding: 10px 20px;
  transition: 0.5s;
  height: 300px;
  width: 280px;
}

.feature-card:hover {
  border: 1px green solid;
  transition: 0.5s;
}

.feature-icon {
  width: 100px;
  height: 100px;
  margin-top: 30px;
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 20px;
}

.feature-text {
  font-size: 16px;
  color: grey;
  text-align: center;
  margin-top: 10px;
}

/* Mobile App */
.app-container {
  width: 1300px;
  margin: 80px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  border-top: 1px #d3d3d3 solid;
  border-bottom: 1px #d3d3d3 solid;
}

.app-wrapper {
  display: flex;
  column-gap: 80px;
  width: 880px;
}

.app-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  column-gap: 20px;
  height: 300px;
  margin-top: 10%;
}

.app-title {
  font-size: 26px;
  font-weight: 700;
  color: black;
}

.app-text {
  font-size: 14px;
  color: grey;
  margin-top: 10px;
  font-weight: 700px;
}

.app-form {
  display: flex;
  flex-direction: column;
  column-gap: 10px;
  margin-top: 20px;
}

.app-form-radio {
  display: flex;
  column-gap: 10px;
}

.app-form-radio input {
  cursor: pointer;
}

.app-form-radio label {
  font-size: 14px;
  color: grey;
  cursor: pointer;
}

.app-form-input{
  width: 600px;
  display: flex;
  column-gap: 10px;
  margin-top: 10px;
}

.app-form-input-contact {
  width: 300px;
  height: 40px;
  border: 1px #d3d3d3 solid;
  border-radius: 10px;
  padding-left: 5px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
}

.app-form-input-contact:focus {
  border: 1px green solid;
  transition: 0.5s;
  outline: none;
}

.app-form-btn {
  width: 170px;
  height: 40px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;

  transition: 0.5s;
  cursor: pointer;
}

.app-form-btn:hover {
  transition: 0.5s;
  background: darkgreen;
} 

.app-download {
  display: flex;

  flex-direction: column;
  margin-top: 20px;
}

.download-text {
  font-size: 14px;
  color: grey;
  font-weight: 700;
}

.download-options {
  display: flex;
  column-gap: 10px;
  width: 500px;
  height: 40px;
  margin-top: 10px;
}

.download-option  {
  height: 40px;
}

.download-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: 0.5s;
}

/*CART PAGE*/

.cart-container {
  width: 1300px;
  margin: 40px auto;
}

.cart-head {
  font-size: 26px;
  font-weight: 700;
  color: black;
  margin-bottom: 40px;
}

.cart {
  display: flex;
  justify-content: center;
  column-gap: 60px;
  width: 1300px;
}

.cart-items {
  display: flex;
  width: 1000px;
  height: 600px;
  flex-direction: column;
  align-items: center;
  column-gap: 20px;
  border: 1px #d3d3d3 solid;
  border-radius: 15px;
  padding: 0 20px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.cart-items::-webkit-scrollbar {
  width: 10px;
}

.cart-items::-webkit-scrollbar-track {
  background: rgb(165, 221, 165);
  border-radius: 15px;
}

.cart-items::-webkit-scrollbar-thumb {
  background: green;
  border-radius: 15px;
  transition: 0.5s;
}

.cart-items::-webkit-scrollbar-thumb:hover{
  background: darkgreen;
  transition: 0.5s;
}

.cart-item {
  display: flex;
  width: 100%;
  height: 100px;
  border-bottom: 1px #d3d3d3 solid;
  padding: 10px;
  column-gap: 20px;
}

.cart-item:last-of-type {
  border-bottom: none;
}

.cart-item-left-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

.cart-item-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.cart-item-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 20px;
}

.cart-item-trash-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #d3d3d3 solid;
  border-radius: 15px;
  padding: 10px;
  height: 30px;
  font-size: 18px;
  color: green;
  cursor: pointer;
  transition: 0.5s;
}

.cart-item-trash-btn:hover {
  transition: 0.5s;
  color: red;
  border: 1px green solid;
}

.cart-center-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 500px;
  margin-left: 15px;
}

.cart-item-title {
  font-size: 20px;
  font-weight: regular;
}

.cart-item-menu {
  display: flex;
  column-gap: 20px;
  margin-top: 10px;
}

.cart-item-menu-btn {
  font-size: 16px;
  color: black;
  cursor: pointer;
  transition: 0.5s;
}

.cart-item-menu-btn:hover {
  color: green;
  transition: 0.5s;
}


.cart-center-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 200px;
}

.cart-item-quantity-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart-item-quantity-input {
  width: 50px;
  height: 30px;
  border: 1px #d3d3d3 solid;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.cart-item-quantity-input:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.cart-item-quantity-btn-minus {
  width: 30px;
  height: 30px;
  border: 1px #d3d3d3 solid;
  border-radius: 25px 0  0 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: 0.5s;
}

.cart-item-quantity-btn-minus:hover {
  background: #d3d3d3;
  transition: 0.5s;
  color: green;
  border: 1px green solid;
}

.cart-item-quantity-btn-plus {
  width: 30px;
  height: 30px;
  border: 1px #d3d3d3 solid;
  border-radius: 0 25px 25px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: 0.5s;
}

.cart-item-quantity-btn-plus:hover {
  background: #d3d3d3;
  transition: 0.5s;
  color: green;
  border: 1px green solid;
}

.cart-item-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 200px;
}

.cart-item-price {
  font-size: 20px;
  font-weight: 700;
}

.cart-item-discount {
  margin-top: 5px;
  font-size: 14px;
  color: grey;
  text-decoration: line-through;
}

.cart-item-saving {
  margin-top: 5px;
  font-size: 14px;
  color: green;
}

.saving-badge {
  background: rgb(165, 221, 165);
  color: green;
  padding: 4px;
  font-size: 10px;
  font-weight: 700;
}

.cart-checkout {
  display: flex;
  width: 300px;
  height: 320px;
  flex-direction: column;
  column-gap: 20px;
  border: 1px #d3d3d3 solid;
  border-radius: 15px;
  padding: 10px;
}

.subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #d3d3d3 solid;
  padding-bottom: 10px;
}

.subtotal-title {
  font-size: 16px;
  font-weight: 700;
}

.subtotal-title span {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.subtotal-price {
  font-size: 14px;
  font-weight: 800;
  color: grey;
  text-decoration: line-through;
}

.savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #d3d3d3 solid;
  padding-bottom: 10px;
  margin-top: 10px;
}

.savings-title  {
  font-size: 14px;
  font-weight: 700;
  margin-top: -30px;
}

.savings-discount {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}

.savings-badge {
  background: rgb(165, 221, 165);
  color: green;
  padding: 4px;
  font-size: 14px;
  font-weight: 700;
}

.savings-price {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 800;
  color: green;
}

.shipping {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #d3d3d3 solid;
  padding-bottom: 10px;
  margin-top: 10px;
}

.shipping-title {
  font-size: 12px;
  font-weight: 700;
}

.shipping-price {
  font-size: 14px;
  font-weight: 800;
  color: green;
}

.taxes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #d3d3d3 solid;
  padding-bottom: 10px;
  margin-top: 10px;
}

.taxes-title {
  font-size: 12px;
  font-weight: 700;
}

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

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #d3d3d3 solid;
  padding-bottom: 10px;
  margin-top: 10px;
}

.total-title {
  font-size: 16px;
  font-weight: 700;
}

.total-price {
  font-size: 20px;
  font-weight: 800;
  color: green;
}

.checkout-btn {
  width: 280px;
  padding: 10px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 700;

  transition: 0.5s;
  cursor: pointer;
}

.checkout-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.coupon-code {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  margin-top: 10px;
  width: 300px;
}

.coupon-input {
  width: 260px;
  height: 30px;
  border: 1px #d3d3d3 solid;
  border-radius: 15px 0 0 15px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: 0.5s;
}

.coupon-input:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.coupon-btn {
  width: 40px;
  height: 32px;
  color: green;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 15px 15px 0;
  border: 1px #d3d3d3 solid;
  border-left: 0;
  font-size: 18px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
}

.coupon-btn:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

/*Footer*/

footer {
  width: 100%;
  background: #f0f3f2;
  display: flex;
  flex-direction: column;
}

.footer-top-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 100px auto 10px auto;
  width: 1300px;
}

.footer-category-list-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  height: 290px;
  width: 435px;
}

.footer-category-head {
  font-size: 14px;
  font-weight: 700; 
  display: flex;
  width: 435px;
}

.footer-category-lists {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 350px;
}

.footer-category-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: 10px;
}

.footer-list-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  height: 290px;
}

.footer-list-container:first-of-type {
  flex: 2;
  flex-wrap: wrap;
}

.footer-list-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: 10px;
}

.footer-list-item a {
  font-size: 14px;
  font-weight: 600;
  color: grey;
  cursor: pointer;
  transition: 0.5s;
}

.footer-list-item a:hover {
  color: green;
  transition: 0.5s;
}

.footer-center-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px auto;
  width: 1300px;
  height: 60px;
  padding: 5px 0;
  border-top: 1px #d3d3d3 solid;
  border-bottom: 1px #d3d3d3 solid;
}

.footer-center-left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: 20px;
}

.footer-payment-title {
  font-size: 14px;
  font-weight: 700;
}

.payment-partners {
  display: flex;
  column-gap: 10px;
}

.payment-partner {
  width: 50px;
  height: 30px;
  object-fit: cover;
}

.footer-center-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: 20px;
}

.footer-app-title {
  font-size: 14px;
  font-weight: 700;
}

.footer-download-options {
  display: flex;
  column-gap: 10px;
}

.footer-download-option  {
  height: 40px;
}

.footer-download-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: 0.5s;
}

.footer-bottom-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 50px auto;
  width: 1300px;
  height: 60px;
  padding: 5px 0;
}

.footer-bottom-left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: 20px;
}

.footer-bottom-text {
  font-size: 12px;
  font-weight: 700;
  color: grey;
}

.footer-bottom-text span a {
  color: green;
  transition: 0.3s;
}

.footer-bottom-text span a:hover {
  color: grey;
  transition: 0.3s;
}

.footer-bottom-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: 20px;
}

.social-title {
  font-size: 14px;
  font-weight: 700;
}

.footer-socials {
  display: flex;
  column-gap: 10px;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 5px;
  border: 1px #d3d3d3 solid;
  transition: 0.5s;
  cursor: pointer;
}

.footer-social a {
  font-size: 18px;
  color: grey;
  cursor: pointer;
  transition: 0.5s;
}

.footer-social:hover {
  transition: 0.5s;
  border: 1px green solid;
}
.footer-social:hover.footer-social a { 
  color: green;
  transition: 0.5s;
}

/*Login Page*/
.login-container {
  width: 1300px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 100px;
  flex: 50%; 
}

.login-banner-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  transition: 0.5s;
}

.login-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 430px;
  height: 400px;
  border-radius: 10px;
  padding: 20px;
  transition: 0.5s;
}

.login-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  transition: 0.5s;
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  color: black;
  margin-bottom: 10px;
}

.login-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
  margin-top: 30px;
}

.login-mail-form-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.login-mail-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:5px 0 0 5px;
  border-right: none;
  font-size: 14px;
}

.login-mail-input {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  border-radius: 0 5px 5px 0;
  border-left: none;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.login-mail-input:focus {
  outline: none;
  border: 1px green solid;
  border-left: none;
  transition: 0.5s;
}

.login-mail-input:focus .login-mail-icon {
  border: 1px green solid;
  border-right: none;
  transition: 0.5s;
  color: green;
}

.login-pass-form-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.login-pass-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:5px 0 0 5px;
  border-right: none;
  font-size: 14px;
}

.login-pass-input {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  border-left: none;
  border-right: none;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.login-pass-input:focus {
  outline: none;
  border: 1px green solid;
  border-left: none;
  border-right: none;
  transition: 0.5s;
}

.login-pass-input:focus .login-pass-icon {
  border: 1px green solid;
  border-right: none;
  transition: 0.5s;
  color: green;
}

.login-hide-pass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:0 5px 5px 0;
  border-left: none;
  font-size: 14px;
  cursor: pointer;
  transition: 0.5s;
}

.login-remember-reset-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: -10px;
}

.login-remember {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.login-remember input {
  cursor: pointer;
}

.login-reset{
  display: flex;
  justify-content: center;  
  align-items: center;
  column-gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: grey;
  transition: 0.5s;
}

.login-reset a {
  color: green;
  transition: 0.5s;
}

.login-reset a:hover {
  color: darkgreen;
  transition: 0.5s;
}

.login-btn-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

}

.login-btn {
  width: 100%;
  height: 40px;
  background: green;
  border: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
  outline: none;
}

.login-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.login-form-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 5px;
  width: 100%;
}

.login-form-footer p {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.login-form-footer a {
  font-size: 14px;
  font-weight: 700;
  color: green;
  transition: 0.5s;
}

.login-form-footer a:hover {
  color: darkgreen;
  transition: 0.5s;
}


/*About Page*/
.about-us-container {
  width: 1300px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.about-us-header {
  display: flex;
  justify-content: space-evenly;
  column-gap: 100px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.about-us-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
}

.about-us-title {
  font-size: 34px;
  font-weight: bolder;
  color: black;
  margin-bottom: 10px;
}

.about-us-text {
  font-size: 20px;
  font-weight: 500;
  color: grey;
}

.about-us-image {
  display: flex;
  width: 500px;
  height: 400px;
  border-radius: 10px;
}

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

.about-us-learn-more {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: 500px;
  margin-top: 60px;
}

.learnMoreTitle {
  font-size: 34px;
  font-weight: bolder;
  color: black;
  margin-top: 60px;
  margin-bottom: 10px;
  margin-left: 60px;
}

.learnMoreWrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  column-gap: 20px;
}

.learnMoreCard {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 300px;
  height: 450px;
  padding: 0 20px 0 20px;
  background-color: #f0f3f2;
  border-radius: 10px;
}

.learnMoreCardImage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 300px;
  border-radius: 10px;
}

.learnMoreCardContent {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 260px;
  border-radius: 10px;
}

.learnMoreCardTitle {
  font-size: 20px;
  font-weight: 700;
  color: black;
  margin-top: 10px;
}

.learnMoreCardText {
  font-size: 14px;
  font-weight: 700;
  color: grey;
  margin-top: 10px;
}

.learnMoreCardButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  background: #001E2B;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.5s;
}

.learnMoreCardButton a {
  text-decoration: none;
  color: white;
}

.learnMoreCardButton:hover {
  transition: 0.5s;
  background: #26404B;
  color: white;
}

.learnMoreBottomText {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 700;
  color: grey;
  margin-left: 60px;
}

.learnMoreBottomText a {
  text-decoration: none;
  color: green;
  transition: 0.5s;
  margin-left: 3px;
}

.learnMoreBottomText a:hover {
  color: darkgreen;
  transition: 0.5s;
}

.about-us-trustedBy {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 1260px;
  margin: 120px auto;
  margin-top: -120px;
  background-color: #f0f3f2;
  border-radius: 10px;
  padding: 40px;
}

.trustedByWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 400px;
}

.trustedByContent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 1200px;
}

.trustedByTitle {
  font-size: 28px;
  font-weight: bolder;
  color: #001E2B;
  margin-bottom: 10px;
}

.trustedByText {
  font-size: 20px;
  font-weight: 500;
  color: grey;
  margin-bottom: 10px
}

.trustedByStatistics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  height: 100px;
  margin-top: 55px;
  gap: 50px;
}

.trustedByStatisticUnit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 210px;
  height: 78px;
  padding: 20px;
  background-color: #001E2B;
  border-radius: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.trustedByStatisticUnit:hover {
  transition: 0.5s;
  background-color: #26404B;
  scale: 1.1;
}

.trustedByStatisticCount {
  font-size: 35px;
  font-weight: bolder;
  color: white;
}

.trustedByStatisticType {
  font-size: 16px;
  font-weight: 500;
  color: white;
}

/*Contact Page*/
.contact-container {
  width: 1300px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contact-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.contact-left {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 500px;
  height: 600px;
  border-radius: 10px;
  background-color: #f0f3f2;
  padding: 30px;
}

.contactHeader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.contact-title {
  color: #21313c;
  font-size: 26px;
  font-weight: 900;
}

.contact-subtitle {
  color: grey;
  font-size: 16px;
  font-weight: 800;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}

.contactFormRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.contact-form-group label {
  font-size: 16px;
  color: #21313c;
  font-weight: 600;
}

.contactFormInput {
  width: 230px;
  height: 40px;
  border: 1px solid grey;
  border-radius: 5px;
  padding-left: 5px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
}

.contactFormInput:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.contactFormInputFull {
  width: 500px;
  height: 40px;
  border: 1px solid grey;
  border-radius: 5px;
  padding-left: 5px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
}

.contactFormInputFull:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.contactFormTextarea {
  width: 500px;
  height: 100px;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
}

.contactFormTextarea:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.contact-btn {
  width: 510px;
  height: 40px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
  outline: none;
  border: 0;
}

.contact-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}


.contact-right {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 650px;
  height: 660px;
  border-radius: 10px;
  background-color: #f0f3f2;

}

.googleMapWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.googleMapWrapper iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}


/*Products Page*/

.products-container {
  width: 1300px;
  margin: 50px auto;
  display: flex;
}

.products-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.productsActivateFilterButton {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100px;
  height: 40px;
  background: #d3d3d3;
  color: #001E2B;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
}

.productsActivateFilterButton:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.productsFilterContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  height: 100%;
}

.productsAccordionCategories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.productAccordionCategory {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
}

.productsAccordionCategoryTitle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  background-color: #f0f3f2;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.productsAccordionInput {
  display: none;
}

.productsAccordionLabel {
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  align-items: center;
  width: 220px;
  height: 20px;
  padding: 8px 10px;
  border-bottom: grey 1px solid;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsAccordionLabel:hover {
  color: green;
  transition: 0.5s;
  border-bottom: green 1px solid;
}

.productsAccordionContent {
  display: none;
  padding-left: 20px;
}

.productsAccordionList {
  list-style-type: none;
}

.productsAccordionListItem {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #001E2B;
  cursor: pointer;
  transition: 0.5s;
}

.productsAccordionListItem a {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
  cursor: pointer;
  transition: 0.5s;
}

.productsAccordionListItem a:hover {
  color: green;
  transition: 0.5s;
}

.productsAccordionInput:checked + .productsAccordionLabel + .productsAccordionContent {
  display: block;
}

.productsAccordionInput:checked + .productsAccordionLabel {
  color: green;
  transition: 0.5s;
  border-bottom: green 1px solid;
}

.productsStoresWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10px;
  width: 240px;
  gap: 15px;
}

.productsStoresTitle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  background-color: #f0f3f2;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.productsStoresSearch {
  display: flex;
  align-items: center;
  width: 260px;
  height: 40px;
}

.productsStoresSearchInput {
  width: 100%;
  height: 100%;
  border: 1px solid grey;
  padding: 3px 10px 3px 3px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsStoresSearchInput:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.productsStoresChecks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 230px;
  margin-top: 10px;
  gap: 5px;
}

.productsStoresCheck {
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  gap: 5px;
  font-size: 18px;
  cursor: pointer;
}

.productsStoresCheck input {
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.productsPriceRange {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100px;
  margin-top: 10px;
}

.productsPriceRangeTitle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  background-color: #f0f3f2;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.productsPriceRangeContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 40px;
  gap: 10px;
}

.productsPriceRangeContainerLeftInput {
  width: 100px;
  height: 100%;
  border: 1px solid grey;
  padding: 3px 10px 3px 3px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsPriceRangeContainerLeftInput:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.productsPriceRangeContainerRightInput {
  width: 100px;
  height: 100%;
  border: 1px solid grey;
  padding: 3px 10px 3px 3px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsPriceRangeContainerRightInput:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.productsFilterButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 40px;
  background-color: green;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: white;
  transition: 0.5s;
}

.productsFilterButton:hover {
  transition: 0.5s;
  background-color: darkgreen;
}

.productsMainContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1000px;
  height: 100%;
}

.productsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}

.productsCount {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsSort {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 100%;
  gap: 5px;
}

.productsSortTitle {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.productsSortSelect {
  width: 200px;
  height: 100%;
  border: 1px solid grey;
  padding: 3px 10px 3px 5px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  color: #001E2B;
}

.productsSortSelect:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.productsMainWrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 1000px;
  gap: 10px;
}

.products-pop-prod-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 210px;
  height: 300px;
  border: #d3d3d3 1px solid;
  border-radius: 10px;
  padding: 15px 15px 20px 15px;
  transition: 0.5s;
}

.products-pop-prod-img {
  width: 210px;
  height: 200px;
  margin-bottom: 10px;
  position: relative;
  background-color: #cbcdcd;
  border-radius: 10px;
}

.products-pop-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.products-pop-prod-btn-group {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  width: 100px;
  height: 30px;
  margin-bottom: 100px;
  transition: 0.5s;
  left: 26%;
}

.products-pop-prod-btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 3px;
  font-size: 12px;
  border-radius: 5px;
  background: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transition: 0.5s;
  cursor: pointer;
}

.products-pop-prod-btn-menu:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.products-pop-prod-card:hover {
  border: 1px green solid;
  transition: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transform: scale(1.03);
}

.products-pop-prod-card:hover .products-pop-prod-btn-group {
  display: flex;
  transition: 0.5s;
}

.products-pop-prod-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 50px;
  position: relative;
}

.products-pop-prod-category {
  font-size: 12px;
  color: grey;
  text-align: start;
}

.products-pop-prod-title {
  font-size: 14px;
  margin-top: 10px;
}

.products-pop-prod-rating {
  display: flex;
  align-items: center;
}

.products-pop-prod-rating i {
  font-size: 12px;
  color: orange;
}

.products-pop-prod-comments {
  font-size: 14px;
  color: grey;
  margin-left: 5px;
}

.products-pop-prod-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.products-pop-prod-price {
  font-size: 16px;
  font-weight: 700;
}

.products-pop-prod-discount-price {
  font-size: 16px;
  color: grey;
  text-decoration: line-through;
}

.products-pop-prod-btn {
  width: 50px;
  height: 20px;
  padding: 3px;
  background: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700; 
  transition: 0.5s;
  cursor: pointer;
}

.products-pop-prod-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.products-pop-prod-btn i {
  font-size: 10px;
}

.productsFooter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 10px;
}

.productsPagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
}

.productsPaginationPage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 5px;
  background-color: #f0f3f2;
  cursor: pointer;
  transition: 0.5s;
}

.productsPaginationPage:hover {
  transition: 0.5s;
  background-color: green;
  color: white;
}


/*Register Page*/
.register-container {
  width: 1300px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 100px;
  flex: 50%; 
}

.register-banner-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  transition: 0.5s;
}

.register-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 430px;
  height: 400px;
  border-radius: 10px;
  padding: 20px;
  transition: 0.5s;
}

.register-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  transition: 0.5s;
}

.register-title {
  font-size: 26px;
  font-weight: 700;
  color: black;
  margin-bottom: 10px;
}

.register-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.register-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
  margin-top: 30px;
}

.register-name-surname-form-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.register-name-input {
  width: 50%;
  height: 40px;
  border: 1px solid grey;
  padding-left: 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.register-name-input:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.register-surname-input {
  width: 50%;
  height: 40px;
  border: 1px solid grey;
  padding-left: 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.register-surname-input:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.register-mail-form-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.register-mail-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:5px 0 0 5px;
  border-right: none;
  font-size: 14px;
}

.register-mail-input {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  border-radius: 0 5px 5px 0;
  border-left: none;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.register-mail-input:focus {
  outline: none;
  border: 1px green solid;
  border-left: none;
  transition: 0.5s;
}

.register-mail-input:focus.register-mail-icon {
  border: 1px green solid;
  border-right: none;
  transition: 0.5s;
  color: green;
}

.register-pass-form-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.register-pass-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:5px 0 0 5px;
  border-right: none;
  font-size: 14px;
}

.register-pass-input {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  border-left: none;
  border-right: none;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.register-pass-input:focus {
  outline: none;
  border: 1px green solid;
  border-left: none;
  border-right: none;
  transition: 0.5s;
}

.register-pass-input:focus .register-pass-icon {
  border: 1px green solid;
  border-right: none;
  transition: 0.5s;
  color: green;
}

.register-hide-pass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  background: transparent;
  text-align: center;
  color: grey;
  border-radius:0 5px 5px 0;
  border-left: none;
  font-size: 14px;
  cursor: pointer;
  transition: 0.5s;
}

.register-btn-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.register-btn {
  width: 100%;
  height: 40px;
  background: green;
  border: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  cursor: pointer;
  outline: none;
}

.register-btn:hover {
  transition: 0.5s;
  background: darkgreen;
}

.register-form-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 5px;
  width: 100%;
}

.register-form-footer p {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.register-form-footer a {
  font-size: 14px;
  font-weight: 700;
  color: green;
  transition: 0.5s;
}

.register-form-footer a:hover {
  color: darkgreen;
  transition: 0.5s;
}

/* Favorites Page */
.favorites-container {
  width: 1300px;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.favoritesHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.favoritesHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.favoritesTitle {
  font-size: 24px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 10px;
}

.favoritesSubtitle {
  font-size: 16px;
  font-weight: 700;
  color: grey;
}

.favoritesSort {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 100%;
  gap: 5px;
}

.favoritesSortTitle {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.favoritesSortSelect {
  width: 200px;
  height: 100%;
  border: 1px solid grey;
  padding: 3px 10px 3px 5px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  color: #001E2B;
}

.favoritesSortSelect:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.favoritesWrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 1300px;
  gap: 25px;
}

.favoritesCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 206px;
  padding: 15px;
  border: 2px solid #d5d5d5;
  border-radius: 10px;
  gap: 15px;
  transition: 0.5s;
  position: relative;
}

.favoritesCard:hover {
  transition: 0.5s;
  border: 2px solid green;
  transform: scale(1.05);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.favoritesCardHeader {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 220px;
  height: 10px;
  position: absolute;
  z-index: 1;
}

.favoritesCardFavoriteButton {
  display: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: white;
  color: red;
  text-decoration: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.favoritesCardFavoriteButton:hover {
  transition: 0.5s;
  background: red;
  color: white;
}

.favoritesCard:hover .favoritesCardFavoriteButton {
  display: flex;
  transition: 0.5s;
}

.favoritesCardImage {
  width: 178px;
  height: 200px;
  position: relative;
  background-color: #cbcdcd;
  border-radius: 10px;
}

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

.favoritesCardInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 210px;
  gap: 10px;
}

.favoritesCardTitle {
  font-size: 18px;
  font-weight: 700;
  color: #001E2B;
}

.favoritesCardPrice {
  font-size: 18px;
  font-weight: 700;
  color: grey;
}

.favoritesCardStatus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 20px;
}

.favoritesCardAddCartButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 40px;
  gap: 5px;
  padding: 0 5px;
  background: green;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.favoritesCardAddCartButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

.productDetails {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.productCategory {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: green;
  margin-bottom: 20px;
}

.productTitle {
  font-size: 30px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.productReviews {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  gap: 5px;
}

.productRating {
  font-size: 16px;
  color: grey;
  font-weight: 700;
}

.productReviewStars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100px;
  font-size: 16px;
  color: orange;
}

.productReviewCount {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.productPriceWrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 200px;
  border: 2px solid green;
  border-radius: 10px;
  margin-bottom: 63px;
  font-size: 24px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 20px;
  padding-bottom: 10px;
  gap: 10px;
}

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

.productDiscountPrice {
  font-size: 16px;
  font-weight: 700;
  color: grey;
  text-decoration: line-through;
  margin-left: 5px;
}

.productDiscountRate {
  background: #c9f5c9;
  border-radius: 10px;
  margin-top: 5px;
  display: flex;
  width: 176px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: green;
  align-items: center;
  justify-content: center;
}

.productAmountOptions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.productAmountOption {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 700;
  color: grey;
  cursor: pointer;
  transition: 0.5s;
}

.productAmountOption:hover {
  transition: 0.5s;
  background-color: grey;
  color: white;
}

.productAmountOption label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.productAmountOption input {
  display: none;
}

.productAmountOption input:checked.productAmountOption {
  transition: 0.5s;
  background-color: grey;
  color: white;
}

.productQuantity {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(201, 201, 201);
  padding-bottom: 30px;
}

.productQuantityLeftBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  border: 1px solid grey;
  border-radius: 5px 0 0 5px;
  background-color: white;
  color: grey;
  cursor: pointer;
  transition: 0.5s;
}

.productQuantityLeftBtn:hover {
  transition: 0.5s;
  background-color: grey;
  color: white;
}

.productQuantityInput {
  width: 30px;
  height: 30px;
  font-size: 12px;
  border: 1px solid grey;
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: grey;
  outline: none;
  transition: 0.5s;
}

.productQuantityInput:focus {
  outline: none;
  border: 1px green solid;
  border-left: none;
  border-right: none;
  transition: 0.5s;
}

.productQuantityRightBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  border: 1px solid grey;
  border-radius: 0 5px 5px 0;
  background-color: white;
  color: grey;
  cursor: pointer;
  transition: 0.5s;
}

.productQuantityRightBtn:hover {
  transition: 0.5s;
  background-color: grey;
  color: white;
}

.productButtonGroup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  gap: 10px;
}

.productAddCartButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  gap: 5px;
  padding: 0 5px;
  background: green;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.productAddCartButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

.productAddFavoriteButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 40px;
  background: #f0f3f2;
  color: #001E2B;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.productAddFavoriteButton:hover {
  transition: 0.5s;
  background: red;
  color: white;
}

.productDescription {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.productDescriptionFeatures {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}

.productFeature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 80px;
  gap: 5px;
  padding: 15px 15px;
  background: #f0f3f2;
  color: #001E2B;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.productFeature:hover {
  transition: 0.5s;
  background: rgb(206, 205, 205);
}

.productFeature:hover .productFeatureTitle {
  transition: 0.5s;
  color: white;
}

.productFeatureTitle {
  font-size: 12px;
  font-weight: 700;
  color: grey;
  transition: 0.5s;
}

.productFeatureValue {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
  transition: 0.5s;
}

.hidden-tab {
  display: none;
}

.active-tab {
  border-bottom: 2px solid green !important;
  color: green !important;
}

.productWrapperBottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 1300px;
  margin-bottom: 20px;
  margin-top: -180px;
  z-index: 99;
}

.productDetailsTabWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.productDetailsTab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgb(201, 201, 201);
  cursor: pointer;
  transition: 0.5s;
  margin-bottom: 20px;
}

.productDetailsTabItem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 39px;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: grey;
  transition: 0.5s;
}

.productDetailsTabItem:hover {
  transition: 0.5s;
  color: green;
  border-bottom: 1px solid green;
}

.productDetailsTabContent {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.productDetailsTabContent h3 {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.productDetailsTabContent p {
  font-size: 16px;
  font-weight: 700;
  color: grey;
  margin-top: 10px;
  margin-bottom: 20px;
}

.productInfoTableWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1000px;
  margin-bottom: 20px;
  margin-top: 20px;
  gap: 60px;
}

.productInfoTable1 {
  width: 500px;
  border-collapse: collapse;
}

.productInfoTable2 {
  width: 500px;
  border-collapse: collapse;
}

.productInfoTable1 tr {
  color: grey;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid rgb(201, 201, 201);
}

.productInfoTable1 tr:nth-of-type(odd), .productInfoTable2 tr:nth-of-type(odd) {
  background-color: #f0f3f2;
}


.productInfoTable1 tr td {
  padding: 15px 10px;
}

.productInfoTable2 {
  width: 500px;
  border-collapse: collapse;
}

.productInfoTable2 tr {
  color: grey;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid rgb(201, 201, 201);
}

.productInfoTable2 tr td {
  padding: 15px 10px;
}

.productDetailsReviewsWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.reviewsLeft {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 400px;
}

.reviewsTitle {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 20px;
}

.reviewsTotalRating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  gap: 10px;
}

.reviewsTotalRatingStars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: orange;
}

.totalRatingPoint {
  font-size: 16px;
  font-weight: 700;
  color: grey;
}

.totalRatingCount {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.reviewsRatings {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  gap: 10px;
}

.reviewsRating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  gap: 5px;
}

.reviewsRatingPoint {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 700;
  color: grey;
}

.reviewsRatingPoint i {
  font-size: 12px;
  color: orange;
}

.reviewsRatingBar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 6px;
  background-color: #f0f3f2;
  border-radius: 5px;
}

.reviewsRatingBarFill {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  height: 100%;
  background-color: orange;
  border-radius: 5px;
}

.reviewsWrite {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.reviewsWriteTitle {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.reviwsWritet p {
  font-size: 16px;
  font-weight: 700;
  color: grey;
  margin-top: 10px;
}

.reviewsWriteButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  gap: 5px;
  border: 1px solid grey;
  color: grey;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.reviewsWriteButton:hover {
  transition: 0.5s;
  background: grey;
  color: white;
}

.reviewsRight {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 800px;
}

.reviewsRightHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.reviewsRightTitle {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
}

.reviewsSort select {
  width: 150px;
  height: 40px;
  border: 1px solid grey;
  padding: 3px 10px 3px 5px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.5s;
  color: #001E2B;
}

.reviewsSort select:focus {
  border: 1px green solid;
  transition: 0.5s;
}

.reviewsWrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.reviewCard {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(201, 201, 201);
}

.reviewCardLeft {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 60px;
  height: 100%;
}

.reviewCardAvatar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 60px;
  height: 60px;
}

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

.reviewCardRight {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.reviewCardUsername {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.reviewCardDetails {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  gap: 15px;
}

.reviewCardDate {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.reviewCardVerified {
  color: green;
  font-size: 12px;
  font-weight: 700;
}

.reviewCardUnverified {
  color: red;
  font-size: 12px;
  font-weight: 700;
}

.reviewCardRating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  gap: 5px;
}

.reviewCardStars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.reviewCardStars i {
  font-size: 14px;
  color: orange;
}

.reviewCardTitle {
  font-size: 14px;
  font-weight: 900;
  color: #001E2B;
}

.reviewCardDescription {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.reviewCardImages {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 200px;
  margin-top: 10px;
  gap: 10px;
}

.reviewCardImage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid rgb(218, 214, 214);
  overflow: hidden;
}

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

.reviewCardFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
}

.reviewCardButton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 30px;
  color: grey;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.reviewCardButton:hover {
  transition: 0.5s;
  color: darkgrey;
}

.reviewsReadMore {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  gap: 5px;
  border: 1px solid grey;
  color: grey;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.reviewsReadMore:hover {
  transition: 0.5s;
  background: grey;
  color: white;
}

.reviewsForm {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}

.reviewsFormTitle {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 20px;
}

.reviewsFormRating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}


.reviewsFormRatingStars i {
  float: right;
  color: darkgrey;
  font-size: 20px;
  transition: 0.3s;
  float:right;
}

.reviewsFormRatingStars i:hover,
.reviewsFormRatingStars i:hover ~ i {
    color: orange;
  transition: 0.3s;
}

.reviewsFormHeadline {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.reviewsFormHeadline h3{
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 10px;
}

.reviewsFormHeadline input {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  padding: 5px 20px 5px 20px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.reviewsFormHeadline input:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.reviewsFormFileInput {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.reviewsFormFileInput h3 {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 10px;
}

.drop-container {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  padding: 20px;
  border-radius: 10px;
  border: 2px dashed #555;
  color: #444;
  cursor: pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover,
.drop-container.drag-active {
  background: #eee;
  border-color: #111;
}
.drop-container:hover,
.drop-container.drag-active {
  background: #eee;
  border-color: #111;
}

.reviewsFormFileInput input::file-selector-button {
  margin-right: 20px;
  border: none;
  background: green;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.reviewText {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-direction: column;
}

.reviewText h3 {
  font-size: 20px;
  font-weight: 700;
  color: #001E2B;
  margin-bottom: 10px;
}

.reviewText textarea {
  width: 100%;
  height: 50px;
  border: 1px solid grey;
  padding: 5px 20px 5px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.reviewText textarea:focus {
  outline: none;
  border: 1px green solid;
  transition: 0.5s;
}

.reviewSubmitButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  gap: 5px;
  background-color: green;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.reviewSubmitButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

/* Checkout Page */
.checkout-container {
  width: 1300px;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.checkoutWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.checkoutWrapperLeft {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 800px;
}

.checkoutTitle {
  font-size: 24px;
  font-weight: 700;
  color: #001E2B;
}

.checkoutSubtitle {
  font-size: 16px;
  font-weight: 700;
  color: grey;
  margin-bottom: 20px;
}

.checkoutAccordionWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.checkoutAccordion {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgb(201, 201, 201);
  cursor: pointer;
  transition: 0.5s;
  margin-bottom: 20px;
}

.checkoutAddNewAddressButton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  height: 30px;
  gap: 5px;
  border: 1px solid green;
  color: green;
  text-decoration: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
  margin-left: 384px;
}

.checkoutAddNewAddressButton:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.checkoutAddnewAddressIcon {
  display: none;
}

.checkoutAccordionInput {
  display: none;
}

.checkoutAccordionInput:checked + .checkoutAccordionLabel + .checkoutAccordionContent {
  display: block;
}

.checkoutAccordionInput:checked + .checkoutAccordionLabel {
  color: green;
  transition: 0.5s;
  border-bottom: green 1px solid;
}

.checkoutAccordionLabel {
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #001E2B;
  gap: 10px;
}

.checkoutAccordionLabel:hover {
  transition: 0.5s;
  color: green;
}

.checkoutAccordionContent {
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.checkoutFooterButtons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.checkoutNextButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 30px;
  gap: 5px;
  padding: 5px;
  background-color: green;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.checkoutNextButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

.checkoutPrevButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 30px;
  gap: 5px;
  padding: 4px;
  border: 1px solid grey;
  color: grey;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.checkoutPrevButton:hover {
  transition: 0.5s;
  background: grey;
  color: white;
}

.checkoutPlaceOrderButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  gap: 5px;
  padding: 0 5px;
  background: green;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.checkoutPlaceOrderButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}

.checkoutAccordionInput:checked ~ .checkoutAccordionContent {
  display: flex;
  transition: 0.5s;
}
.checkoutDeliveryAddress {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
  gap: 10px;
}

.checkoutDeliveryAddressCard {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 400px;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  padding: 30px;
  gap: 10px;
  transition: 0.5s;
}

.checkoutDeliveryAddressCardHead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.checkoutCardDetails {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 5px;
}

.checkoutCardName {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.checkoutCardAddress {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.checkoutCardCityCountry {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.checkoutCardPhone {
  font-size: 13px;
  font-weight: 700;
  color: grey;
  text-decoration: underline dotted;
  cursor:help;
}

.checkoutAddressStatus {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
  color: red;
  font-size: 14px;
  font-weight: 700;
}

.checkoutDeliveryTime {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.deliveryTimeTabNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.deliveryTimeTabItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  padding-bottom: 4px;
  background-color: #d3d3d3;
  border-radius: 10px;
  transition: 0.5s;
}

.deliveryTimeTabItem:hover {
  transition: 0.5s;
  background-color: green;
}

.deliveryTimeTabItem:hover .deliveryTimeTabItemTitle, .deliveryTimeTabItem:hover .deliveryTimeTabItemSubtitle {
  transition: 0.5s;
  color: white;
}

.deliveryTimeTabItemTitle {
  color: #001E2B;
  font-size: 16px;
  font-weight: 700;
}

.deliveryTimeTabItemSubtitle {
  color: #001E2B;
  font-size: 14px;
  font-weight: 700;
}

.deliveryTimeTab {
  display: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
  animation: fadeEffect 1s;

}

.deliveryTimeTab:first-of-type{
  display: flex;
}

.deliveryTimeTabContent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.deliveryTimeTabTable {
  width: 100%;
  border-collapse: collapse;
}

.deliveryTimeTabTable tr {
  color: grey;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid #d3d3d3;
  width: 100%;
}

.deliveryTimeTabTable tr {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.deliveryTimeTabTable tr:nth-of-type(odd) {
  background-color: #f0f3f2;
}

.deliveryTimeTabTable tr td {
  padding: 15px 10px;
  color: #001E2B;
  font-size: 14px;
}

.deliveryTimeTabTable tr td:nth-child(4) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.deliveryTimeHourBadgePaid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  background-color: red;
  color: white;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.deliveryTimeHourBadgeFree {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  background-color: green;
  color: white;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.deliveryTimeChooseButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 30px;
  color: grey;
  border: #d3d3d3 1px solid;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.deliveryTimeChooseButton:hover {
  transition: 0.5s;
  background: #d3d3d3;
  color: white;
}

.checkoutDeliveryInstructions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}

.deliveryInstructionsTitle {
  font-size: 16px;
  font-weight: 700;
  color: grey;
}

.deliveryInstructionsTextarea {
  width: 778px;
  height: 50px;
  border: 1px solid #d3d3d3;
  padding: 5px 0 5px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.deliveryInstructionsText {
  font-size: 12px;
  font-weight: 700;
  color: grey;
}

.checkoutPaymentMethod {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.paymentMethodCard {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 740px;
  gap: 10px;
  padding: 30px;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  transition: 0.5s;
}

.paymentMethodCardHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.paymentMethodCardLabel {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.paymentMethodText {
  font-size: 12px;
  font-weight: 700;
  color: grey;
}

.paymentMethodCardNumber {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.paymentMethodLabel {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.paymentMethodInputCardNumber {
  width: 100%;
  height: 20px;
  border: 1px solid #d3d3d3;
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

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

.paymentMethodLabelCardName {
  width: 57%;
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.paymentMethodLabelCardExpiry {
  width: 20%;
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.paymentMethodLabelCardCvv {
  width: 20%;
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.paymentMethodInputWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.paymentMethodInputCardName {
  width: 60%;
  height: 20px;
  border: 1px solid #d3d3d3;
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.paymentMethodInputCardExpiry {
  width: 20%;
  height: 20px;
  border: 1px solid #d3d3d3;
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.paymentMethodInputCardCvv {
  width: 20%;
  height: 20px;
  border: 1px solid #d3d3d3;
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.5s;
}

.checkoutWrapperRight {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 440px;
}

.checkoutOrderDetails {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
}

.orderDetailsHead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 400px;
  padding: 10px 20px;
  gap: 5px;
  border-bottom: 1px solid #d3d3d3;
  font-size: 18px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsProducts {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 440px;
  gap: 10px;
}

.orderDetailsProduct {
  display: flex;
  align-items: center;
  width: 420px;
  padding: 10px 10px;
  border-bottom: 1px solid #d3d3d3;
}

.orderDetailsProductImage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
}

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

.orderDetailsProductDetail {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 200px;
  height: 50px;
  margin-left: 10px;
}

.orderDetailsProductName {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsProductWeight {
  font-size: 12px;
  font-weight: 700;
  color: grey;
}

.orderDetailsProductQuantity {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  color: grey;
}

.orderDetailsProductPrice {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  width: 100px;
  height: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsProductPriceDiscount {
  font-size: 12px;
  font-weight: 700;
  color: grey;
  text-decoration: line-through;
}

.orderDetailsPriceCalculations {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 400px;
  padding: 10px 20px;
  border-bottom: 1px solid #d3d3d3;
}

.orderDetailsCalculationsSubtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.orderDetailsCalculationsSubtotalTitle {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsCalculationsSubtotalPrice {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsFee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.orderDetailsFeeTitle {
  font-size: 14px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsFeePrice {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsSubtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  padding: 10px 20px;
  margin-bottom: 10px;
}

.orderDetailsSubtotalTitle {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.orderDetailsSubtotalPrice {
  font-size: 16px;
  font-weight: 700;
  color: #001E2B;
}

.addressModal {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 1000;

}

.addressModalContent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 400px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  gap: 10px;
  transition: 0.5s;
  overflow: auto;
}

.addressModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.addressModalHead {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.addressModalTitle {
  font-size: 18px;
  font-weight: 700;
  color: #001E2B;
}

.addressModalSubtitle {
  font-size: 14px;
  font-weight: 700;
  color: grey;
}

.addressModalClose {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  transition: 0.5s;
}

.addressModalClose:hover {
  transition: 0.5s;
  color: red;
}

.addressForm {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.addressFormInput {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 390px;
  height: 30px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #d3d3d3;
  transition: 0.5s;
  outline: none;
}

.addressFormInput:focus {
  transition: 0.5s;
  box-shadow: 0 0 5px green;
}

.addressFormInputSelect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 402px;
  height: 30px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #d3d3d3;
  transition: 0.5s;
  outline: none;
}

.addressFormGroup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.addressFormFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.addressFormFooterCancelButton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: green;
  border: 1px solid green;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.addressFormFooterCancelButton:hover {
  transition: 0.5s;
  background: green;
  color: white;
}

.addressFormFooterSaveButton {
  display: flex;
  justify-content: center;
  align-items: center; 
  padding: 11px;
  color: white;
  background-color: green;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.5s;
}

.addressFormFooterSaveButton:hover {
  transition: 0.5s;
  background: darkgreen;
  color: white;
}