:root {
  --orange: #f79421;
  --orange-hover: #e6891f;
  --grey: #7c7d7d;
  --lightorange: #fdd0af;
  --salmon: #FDD0AF;
  --brown: #903F01;
  --purple: #6D3576;
  --purple-hover: #582b5f;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bg-image {
  background-image: url(../img/background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image-1 {
  background-image: url(../img/bg-image-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image-2 {
  background-image: url(../img/bg-image-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  margin-top: auto;
}

main {
  padding-top: 86px;
}

.btn-orange {
  color: white;
  background-color: var(--orange) !important;
}

.btn-orange:hover {
  color: white;
  background-color: var(--orange-hover) !important;
}

.btn-outline-orange {
  color: var(--orange);
  border: solid 1px var(--orange);
}

.btn-outline-orange:hover {
  color: white;
  border: solid 1px var(--orange);
  background-color: var(--orange);
}

#iti-0__country-listbox {
  color: black !important;
}

.iti {
  width: 100%;
}

.bg-salmon {
  background-color: var(--salmon);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-purple {
  background-color: var(--purple);
}

.text-brown {
  color: var(--brown);
}

.border-brown {
  border-color: var(--brown) !important;
}

.text-purple {
  color: var(--purple);
}

.text-orange {
  color: var(--orange);
}

.border-purple {
  border-color: var(--purple) !important;
}

.btn-orange {
  color: white;
  background-color: var(--orange) !important;
}

.btn-orange:hover {
  color: white;
  background-color: var(--orange-hover) !important;
}

.btn-purple {
  color: white;
  background-color: var(--purple) !important;
}

.btn-purple:hover {
  color: white;
  background-color: var(--purple-hover) !important;
}

.hero {
  background-image: url(../img/banner.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 780px;
}


@media screen and (max-width: 768px) {
  .hero {
    background-image: unset;
    background-color: darkslategrey;
  }
}


::backdrop {
  background-image: linear-gradient(45deg,
      #999,
      #222);
  opacity: 0.75;
}

dialog {
  width: 100%;
  max-width: 400px;
  margin: auto;
  animation: surgir 0.3s ease-out forwards;
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-oliv{
  color: #1DC256;
}

.text-success-subtle{
  color: #b1e6c4;
}

.bg-darkgreen{
  background-color: #024123;
}

.bg-lightgreen{
  background-color: #146531;
}

.fixed-size{
  height: 300px;
}

.card-body{
  min-height: 240px;
}

.is-invalid{
  border: #c23636 2px solid;
}