containers 
.container-wrapper {
  background-color: #EDF0F9;
}

.container {
  height: 100px;
}

.rating-wrapper {
  align-self: center;
  box-shadow: 7px 7px 25px rgba(198, 206, 237, .7),
              -7px -7px 35px rgba(255, 255, 255, .7),
              inset 0px 0px 4px rgba(255, 255, 255, .9),
              inset 7px 7px 15px rgba(198, 206, 237, .8); 
  border-radius: 5rem;
  display: inline-flex;
  direction: rtl !important;
  padding: 5px;
  margin-left: auto;
  margin-top: 10px;
  
}
  label {
    color: #e0d8d8;
    cursor: pointer;
    display: inline-flex;
    font-size: 3rem;
    padding: 1rem .6rem;
    transition: color 0.1s;
  }
  
   svg {
     -webkit-text-fill-color: transparent;
     -webkit-filter: drop-shadow (4px 1px 6px rgba(198, 206, 237, 1));
     filter:drop-shadow(5px 1px 3px rgba(198, 206, 237, 1));
  }

  input {
    height: 100%;
    width: 100%;
  }
  
  input {
    display: none;
  }

  label:hover,
  label:hover ~ label,
  input:checked ~ label  {
    color: #3b51a0;
  }

  label:hover,
  label:hover ~ label,
  input:checked ~ label  {
    color: #374a8d;
  }

  span.stars, span.stars span {
    display: block;
    background: url(images/star.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

.review-box {
    color: white;
    width: 300px;
    border: 2px solid #4d5c7b;
    border-radius: 15px;
    padding: 2px;
    margin-bottom: 10px;
    background-color: #435570;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: box-shadow 0.3s ease; /* Add smooth transition for hover effect */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
}

.review-box:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}


.user-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.feedback {
    margin-top: 10px;
}

.star-rate {
    margin-top: 10px;
}

.star {
    color: #d5d5d5; /* gold color */
    font-size: 20px;
}

.username {
    margin-top: 10px;
}