/* =====================================
   LAYOUT
===================================== */

.order-card{
  width:100%;

  margin:48px auto;

  padding:56px;

  background:var(--surface);

  border:1px solid rgba(174,145,85,.18);

  border-radius:24px;

  box-shadow:
      0 10px 30px rgba(0,0,0,.06),
      0 2px 10px rgba(0,0,0,.04);

  transition:
      transform .25s ease,
      box-shadow .25s ease;
}

.order-card:hover{

  transform:translateY(-4px);

  box-shadow:
      0 20px 45px rgba(0,0,0,.10),
      0 8px 20px rgba(0,0,0,.05);

}

.order-logo{

  display:block;
  
  width:500px;
  
  margin:0 auto 32px;
  
  transition:transform .25s ease;
  
  }
  
  .order-logo:hover{
  
  transform:scale(1.04);
  
  }


.order-form{

  display:flex;

  flex-direction:column;

  gap:var(--space-6);

}
/* ===========================
   Container
=========================== */

.container {

  width: min(var(--container-width), calc(100% - 32px));

  margin-inline: auto;

}

/* ===========================
 Header
=========================== */

.header {

  height: var(--header-height);

}

.header-content {

  height: 100%;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

}

/* ===========================
   Footer
=========================== */

.site-footer {

  margin-top: var(--space-10);

  padding-block: var(--space-9) var(--space-6);

  background: var(--primary);

  color: rgba(255, 255, 255, .82);

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1fr;

  gap: var(--space-8);

  padding-bottom: var(--space-8);

  border-bottom: 1px solid rgba(255, 255, 255, .12);

}

.footer-logo {

  height: 32px;

  margin-bottom: var(--space-4);

  filter: brightness(0) invert(1);

}

.footer-tagline {

  color: rgba(255, 255, 255, .65);

  font-size: 14px;

  line-height: 1.7;

  max-width: 30ch;

}

.footer-col h4 {

  color: var(--surface);

  font-size: 15px;

  font-weight: 600;

  margin-bottom: var(--space-4);

}

.footer-col ul {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

}

.footer-col a {

  color: rgba(255, 255, 255, .65);

  font-size: 14px;

  text-decoration: none;

  transition: color var(--transition-fast);

}

.footer-col a:hover {

  color: var(--accent);

}

.footer-bottom {

  padding-top: var(--space-6);

  text-align: center;

  font-size: 13px;

  color: rgba(255, 255, 255, .5);

}

@media (max-width: 768px) {

  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }

}