.appointment-section {
  background-color: var(--dark-violet);
  padding: ;
  text-align: ;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5.45rem;
}

@media screen and (min-width: 768px) {
  .appointment-section {
    padding: ;
  }
}

.appointment-title {
  font-size: var(--font-20);
  font-weight: 500;
  margin-bottom: ;
}

@media screen and (min-width: 768px) {
  .appointment-title {
    font-size: ;
    margin-bottom: ;
  }
}

.appointment-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media screen and (min-width: 768px) {
  .appointment-buttons {
    justify-content: ;
    gap: ;
  }
}

.call-button {
  padding: ;
  background-color: var(--brandLightClr);
  color: white;
  border-radius: 2.18rem;
  font-weight: 600;
  font-size: var(--font-16);
  cursor: pointer;
  height: 2.18rem;
  width: 7.9rem;
  border: 0;
}

@media screen and (min-width: 768px) {
  .call-button {
    height: 1.5rem;
    width: 9.81rem;
    font-size: var(--font-lg-24);
  }
}

.callback-button {
  height: 2.18rem;
  width: 8.81rem;
  font-weight: 500;
  font-size: var(--font-16);
  border-radius: 2.18rem;
  background-color: var(--brandClr);
  color: white;
  border: 0;
}

@media screen and (min-width: 768px) {
  .callback-button {
    height: 1.5rem;
    width: 9.81rem;
    font-size: var(--font-lg-24);
  }
}

.footer {
  background-color: ;
  text-align: ;
  padding: ;
  font-size: ;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: ;
    font-size: ;
  }
}