: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/background_home_v1.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 780px;
  color: #522459 !important;
}

::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);
    }
}

.gradient-blue-135 {
  background: #153581;
  background: linear-gradient(135deg, #153581 0%, #5296fe00 100%);
}