@import url("variables.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

.success-hero{
  background-image: url("../images/hero-background.png");
  background-size: cover;
  padding: var(--spacing-0) var(--spacing-70) var(--spacing-64) var(--spacing-70);
  margin-bottom: var(--spacing-48);
}

.success-hero h2{
  text-align: center;
  margin: 5px var(--spacing-0) var(--spacing-24) var(--spacing-0);
}

.success-hero p{
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.conf-container {
  background-color: var(--color-backround);
  padding: var(--spacing-0) var(--spacing-0) var(--spacing-80) var(--spacing-0);
}

.order-info{
  display: flex;
  flex-direction: column;
  align-items:start;
  border-radius: var(--card-border-radius);
  border: var(--border);
  padding: var(--spacing-32);
  max-width: 1100px;
  margin: var(--spacing-0) var(--spacing-70) var(--spacing-32) var(--spacing-70);
}

.order-info h4{
  margin-bottom: var(--spacing-24);
}

.deliveri-info{
  display: flex;
  flex-direction: column;
  gap: 12px
}

.deliveri-info p{
  font-weight: var(--font-weight-semibold);
}

.deliveri-info span{
  font-weight: var(--font-weight-regular);
}

.conf-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}