.coupon-tablets {
  font-family: 'Titillium Web', sans-serif;
}
.coupon-row {
  display: flex;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}
.coupon-body {
  display: flex;
  flex: 1;
  padding: 20px 0;
}
.coupon-discount {
  background: #fff url('https://essayrating.com/wp-content/uploads/2023/07/discount.svg') no-repeat center center;
  background-size: cover;
  width: 120px;
  min-width: 120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 10px;
  margin-left: 10px;
}
.coupon-discount .label {
  color: #f6861e;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.coupon-discount .value {
  font-size: 40px;
  color: #f6861e;
  font-weight: 700;
}
.coupon-col {
  flex: 1;
  padding: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.coupon-col + .coupon-col {
  border-left: 1px solid #d7dce1;
}
.coupon-logo {
  width: 50px;
  height: 50px;
  margin: 0 auto 6px;
}
.coupon-name {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.coupon-rating {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}
.coupon-stars {
  font-size: 25px;
  color: #F6A700;
  letter-spacing: 2px;
}
.coupon-label {
  font-size: 14px;
  color: #576d81cc;
  margin-bottom: 4px;
}
.coupon-value {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}
.coupon-code-wrap {
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 600;
  min-width: 90px;
  text-align: center;
}
.coupon-code-wrap .label {
  font-size: 14px;
  font-weight: 500;
  color: #576d81cc;
  margin-bottom: 2px;
}
.coupon-code-wrap .code {
  font-size: 18px;
  color: #111;
}
.coupon-btn {
  padding: 10px 20px;
  font-size: 15px;
  border: 1px solid #367FD3;
  border-radius: 8px;
  color: #367FD3;
  background: #F2F8FF;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  margin-top: 4px;
}
.coupon-btn:hover {
  background: #367FD3;
  color: #fff;
}
@media (max-width: 768px) {
  .coupon-row {
    flex-direction: column;
  }
  .coupon-body {
    flex-direction: column;
    padding: 10px 20px;
  }
  .coupon-col {
    border-left: none !important;
    padding: 12px 0;
    border-top: none;
  }
  .coupon-col.rating + .coupon-col {
    border-top: 1px solid #d7dce1;
  }
  .coupon-col.deadline {
    border-top: 1px solid #d7dce1;
  }
  .coupon-discount {
    width: 100%;
    min-width: 100%;
    padding: 16px 0;
    margin: 10px 0 0;
    border-radius: 0 0 12px 12px;
  }
}