#Product-Description

.product-description {
    margin: 0 auto;
    max-width: 1300px;
    padding: 20px 40px;
}

.product-description-content {
    display: flex;
    justify-content: space-between; /* Distributes space between elements */
    align-items: flex-start;
    margin-bottom: 20px;
     margin-top: 35px;
}

.product-description-image {
    flex: 0 0 40%; /* Reduces to 40% */
    max-width: 40%;
    margin-right: 0; /* Removes right margin */
}

.product-description-text {
    flex: 0 0 55%; /* Increases to 55% */
    max-width: 55%;
    padding-left: 5%; /* Adds left padding to center the text */
}

.product-description-details {
    clear: both;
}

@media (max-width: 767px) {
    .product-description {
        padding: 10px 20px;
    }

    .product-description-content {
        flex-direction: column;
    }

    .product-description-image,
    .product-description-text {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0; /* Removes padding on smaller screens */
    }

    .product-description-image img,
    .product-description-details img {
        float: none !important;
        margin: 0 0 20px 0 !important;
        display: block;
    }
}

.product-description p {
    font-size: 1.1rem;
    line-height: 1.6; /* Increases line spacing */
}

.product-description h2 {
    font-size: 1.75rem;
    line-height: 1.3; /* Adds some spacing for headers */
}

.product-description h3 {
    font-size: 1.375rem;
    line-height: 1.4; /* Adds some spacing for subheaders */
}

.sensorial {
  max-width: 1200px; /* Increased to give more space */
  margin: 0 auto;
  padding: 0 20px; /* Added padding for smaller screens */
}

.sensorial h2 {
  font-size: 1.75rem;
  margin-bottom: 20px;
  text-align: center; /* Center the title */
}

.sensorial-content {
  display: flex;
  justify-content: center; /* Center the columns */
  align-items: flex-start; /* Align items to the top */
  gap: 10%; /* Creates space between columns */
}

.sensorial-description,
.sensorial-bars {
  flex: 0 0 45%; /* Each column takes 45% of the container width */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
}

.sensorial-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  width: 100%; /* Ensure full width of parent */
}

.label-sensorial {
  flex: 0 0 100px; /* Increased to accommodate "MADEIRA" */
  font-size: 0.9rem;
  text-transform: uppercase;
  color: white;
  background-color: #333;
  padding: 6px 10px;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap; /* Prevents text wrapping */
}

.bar-container {
  flex: 1;
  background-color: #f0f0f0;
  height: 35px;
  margin-left: 10px;
  border-radius: 17.5px;
  overflow: hidden;
}

.bar {
  height: 100%;
  background-color: #333;
  color: white;
  text-align: right;
  padding-right: 10px;
  line-height: 35px;
  font-size: 0.9rem;
  border-radius: 17.5px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .sensorial-content {
    flex-direction: column;
    align-items: center;
  }

  .sensorial-description,
  .sensorial-bars {
    flex: 0 0 100%;
    max-width: 500px;
    width: 100%;
  }

  .sensorial-bars {
    margin-top: 20px;
  }
}