.review-container {
  width: 100%;
  max-width: 1400px;
  margin: 120px auto;
  padding: 0 20px;
}

/* Heading */

.review-container h1 {
  text-align: center;
  font-size: 54px;
  margin-bottom: 40px;

  background: linear-gradient(
    90deg,
    #00ffe1,
    #00b3ff
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 20px rgba(0,255,225,0.4);
}

/* Review Button */

#openReviewBtn {
  display: block;
  margin: auto;

  width: fit-content;

  padding: 16px 34px;

  border-radius: 14px;

  border: 1px solid #00ffe1;

  background:
    rgba(0,255,225,0.08);

  color: #00ffe1;

  font-size: 17px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.3s ease;

  box-shadow:
    0 0 15px rgba(0,255,225,0.25);
}

#openReviewBtn:hover {

  transform: translateY(-3px);

  background:
    rgba(0,255,225,0.15);

  box-shadow:
    0 0 25px rgba(0,255,225,0.5);
}

/* Popup */

.review-popup {
  margin-top: 35px;

  background:
    rgba(18,18,18,0.9);

  border:
    1px solid rgba(0,255,225,0.25);

  border-radius: 22px;

  padding: 30px;

  backdrop-filter: blur(18px);

  box-shadow:
    0 0 30px rgba(0,255,225,0.08);

  animation: fadeIn 0.35s ease;
}

.hidden {
  display: none;
}

/* Form */

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Inputs */

input,
textarea,
select {

  width: 100%;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(0,255,225,0.12);

  border-radius: 14px;

  padding: 15px;

  color: white;

  font-size: 15px;

  outline: none;

  transition: 0.3s;
}

/* Focus */

input:focus,
textarea:focus,
select:focus {

  border-color: #00ffe1;

  box-shadow:
    0 0 15px rgba(0,255,225,0.25);
}

/* Textarea */

textarea {
  height: 140px;
  resize: none;
}

/* Submit */

button[type="submit"] {

  background:
    linear-gradient(
      90deg,
      #00ffe1,
      #00b3ff
    );

  color: black;

  border: none;

  border-radius: 14px;

  padding: 16px;

  font-size: 16px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.3s;

  box-shadow:
    0 0 20px rgba(0,255,225,0.35);
}

button[type="submit"]:hover {

  transform: translateY(-3px);

  box-shadow:
    0 0 30px rgba(0,255,225,0.6);
}

/* Reviews Slider */
#reviews {

  margin-top: 60px;

  display: flex;

  gap: 24px;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-behavior: smooth;

  padding-bottom: 15px;

  width: 100%;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  cursor: grab;
}
#reviews:active {

  cursor: grabbing;
}
/* Hide Scrollbar */

#reviews::-webkit-scrollbar {
  display: none;
}

/* Review Card */
.review-card {

  min-width: 300px;
  max-width: 300px;

  padding: 22px;

  border-radius: 20px;

  background:
    rgba(20,20,20,0.95);

  border:
    1px solid rgba(0,255,225,0.15);

  backdrop-filter: blur(15px);

  box-shadow:
    0 0 25px rgba(0,255,225,0.06);

  flex-shrink: 0;

flex: 0 0 auto;

  transition: 0.3s ease;
}

/* Hover */

.review-card:hover {

  transform: translateY(-6px);

  border-color:
    rgba(0,255,225,0.4);

  box-shadow:
    0 0 30px rgba(0,255,225,0.15);
}

/* Stars */

.review-stars {

  font-size: 26px;

  margin-bottom: 18px;

  color: #00ffe1;

  text-shadow:
    0 0 12px rgba(0,255,225,0.45);
}

/* Message */
.review-card p {

  color: #d9d9d9;

  line-height: 1.7;

  font-size: 15px;

  margin: 12px 0;

  word-wrap: break-word;
}
/* Name */

.review-name {

  margin-top: 20px;

  color: #00ffe1;

  font-weight: bold;

  opacity: 0.85;
}

.review-subtitle {

  text-align: center;

  margin-top: -20px;
  margin-bottom: 40px;

  color: rgba(255,255,255,0.7);

  font-size: 16px;
}

.char-count {

  text-align: right;

  margin-top: -8px;

  color: rgba(255,255,255,0.5);

  font-size: 13px;
}
/* Animation */

@keyframes fadeIn {

  from {

    opacity: 0;

    transform:
      translateY(-12px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}
/* Mobile */

@media (max-width: 768px) {

  .review-container {

    margin: 80px auto;

    padding: 0 14px;
  }

  /* Heading */

  .review-container h1 {

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 18px;
  }

  /* Subtitle */

  .review-subtitle {

    font-size: 14px;

    margin-top: -8px;

    margin-bottom: 28px;

    padding: 0 10px;
  }

  /* Review Button */

  #openReviewBtn {

    width: 100%;

    padding: 14px;

    font-size: 15px;
  }

  /* Popup */

  .review-popup {

    padding: 18px;

    border-radius: 18px;
  }

  /* Inputs */

  input,
  textarea,
  select {

    padding: 13px;

    font-size: 14px;
  }

  textarea {

    height: 120px;
  }

  /* Submit */

  button[type="submit"] {

    padding: 14px;

    font-size: 15px;
  }

  /* Slider */

  #reviews {

    gap: 16px;

    margin-top: 40px;
  }

  /* Cards */

  .review-card {

    min-width: 84%;

    max-width: 84%;

    padding: 18px;

    border-radius: 18px;
  }

  /* Stars */

  .review-stars {

    font-size: 22px;

    margin-bottom: 12px;
  }

  /* Review Text */

  .review-card p {

    font-size: 14px;

    line-height: 1.6;
  }

  /* Name */

  .review-name {

    font-size: 13px;

    margin-top: 14px;
  }
}