:root {
  
  --reviews-hero-max: 1489px; 
  --reviews-hero-pad-x: 14px; 
}

.reviews-section {
  background: linear-gradient(180deg, #3C766F 0%, #096F64 44.71%, #113834 100%);
  color: #fff;
  padding-top: 280px;
  padding-bottom: 48px;
  
  margin-top: -180px;
  padding-inline: var(--reviews-hero-pad-x);
  
}


.reviews-shell {
  width: 100%;
  max-width: var(--reviews-hero-max);
  margin-inline: auto;
}

.reviews-hero {
  position: relative;
  height: 546px; 
  border-radius: 20px;
  overflow: hidden;
  background: url('../img/article.jpg') center/cover no-repeat;
}

.reviews-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  
  background: rgba(0, 0, 0, 0.45);
}

.reviews-hero__content {
  position: absolute;
  left: 37px; 
  bottom: 58px;
  z-index: 1;
  max-width: 840px;
}

.reviews-heading {
  font-family: "Inter", sans-serif;
  font-weight: 400; 
  font-size: 62px;
  line-height: 75px; 
  letter-spacing: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.reviews-sub {
  margin-top: 18px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px; 
  letter-spacing: 0;
  color: rgba(255, 255, 255, 1);
}


.reviews-rail {
  margin-top: 79px;
  
  padding-left: max(0px, calc((100vw - var(--reviews-hero-max)) / 2 ));
  
  overflow: hidden;
}

.reviews-viewport {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-viewport { scrollbar-width: none; }

.reviews-track {
  display: flex;
  gap: 23px; 
  padding-bottom: 2px; 
}

.review-card {
  position: relative;
  flex: none;
  width: 428px;   
  height: 628px; 
  overflow: hidden;
  scroll-snap-align: start;
}

.review-card__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-card__overlay {
  content: "";
  position: absolute;
  inset: 0;
  
  background: rgba(0, 0, 0, 0.4);
}

.review-card__content {
  position: absolute;
  left: 24px;
  bottom: 55px;
  color: #fff;
  z-index: 1;
  max-width: 389px;
}

.review-card__name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24px;
  line-height: 29px; 
  letter-spacing: 0;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 1);
}

.review-card__text {
  font-family: "Inter", sans-serif;
  font-weight: 500; 
  font-size: 20px;
  line-height: 24px; 
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
}

.reviews-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  
  padding-left: max(0px, calc((100vw - var(--reviews-hero-max)) / 2 + var(--reviews-hero-pad-x)));
}

.reviews-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.reviews-btn:hover { opacity: 1; transform: translateY(-1px); }

.reviews-btn img { width: 28px; height: 16px; display: block; }
.reviews-btn--next img { transform: rotate(180deg); }


@media (max-width: 768px) {
  .reviews-section{
    margin-top: 176px;
    padding-top: 0;
  }
  .reviews-shell{
        top: -76px;
    position: relative;
  }
  .reviews-rail{
    margin-top: 0;
  }
  .reviews-heading{
    font-size: 32px;
    line-height: 39px;
  }
  .reviews-hero__content{
    left: 19px;
    bottom: 58px;
    max-width: 100%;
  }
  .reviews-sub{
    margin-top: 22px;
  }
}

@media (min-width:800px) and (max-width:1600px){
  :root { --reviews-hero-max: 1191px; }
  .reviews-section{ padding-top: 224px; padding-bottom: 38px; margin-top: -144px; }
  .reviews-hero{ height: 437px; border-radius: 16px; }
  .reviews-hero__content{ left: 30px; bottom: 46px; max-width: 672px; }
  .reviews-heading{ font-size: 50px; line-height: 60px; }
  .reviews-sub{ font-size: 16px; line-height: 20px; }
  .reviews-rail{ margin-top: 63px; }
  .reviews-track{ gap: 18px; }
  .review-card{ width: 342px; height: 502px; }
  .review-card__content{ left: 19px; bottom: 44px; max-width: 311px; }
  .review-card__name{ font-size: 19px; line-height: 24px; }
  .review-card__text{ font-size: 16px; line-height: 20px; }
  .reviews-btn{ width: 29px; height: 29px; }
  .reviews-btn img{ width: 22px; height: 13px; }
}