:root {
  --bg-theme: #0A0A0A;
  --bg-white: #F8F8F9;
  --bg-amar: #FFCA02;
  --txt-w: #E6E9E8;
  --txt-b: #111111;
  --font-size: 18px 
}
body {
  font-size: var(--font-size);
  color: var(--txt-b);
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  min-width: 320px
}
.bg-bl {
  background-color: var(--bg-theme);
  color: var(--txt-w)
}
.bg-am {
  background-color: var(--bg-amar)
}
.bg-am-25 {
  background-image: linear-gradient(var(--bg-amar) 0px, var(--bg-amar) 40%, transparent 40%, transparent 80%, var(--bg-amar) 80%, var(--bg-amar))
}
.bg-head {
  background-image: url("../img/head.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-head .teard {
  opacity: .65;
  object-fit: fill;
  overflow: hidden;
  width: 100%
}
.vh-50 {
  height: 50vh !important
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px
}
.grid-2 {
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 50px
}
.gelem {
  border: none;
  border-radius: 8px;
  background-color: var(--bg-white);
  color: var(--txt-b);
  padding: 1rem 1.5rem
}
.br-c {
  border-radius: 50%
}
.tipri {
  letter-spacing: 1px
}
form {
  width: 75% !important
}
.form-control:focus, .form-check-input:focus {
  box-shadow: none;
  border-color: var(--bg-amar);
}
.form-check-input:checked[type="checkbox"] {
  background-color: var(--bg-amar)
}
.btn-vdp {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: var(--bg-amar);
  border-color: var(--bg-amar) !important;
}
.btn-vdp:hover {
  background-color: none
}
.pols {
  font-size: 14px;
  text-align: center;
  margin-top: 1.5rem
}
.pols a {
  text-decoration: none;
  color: var(--txt-w);
}
.borde-abajo {
  border-bottom: 1px solid var(--bg-amar)
}
@media(max-width:767.98px) {
  .bg-am-25 {
    background-color: var(--bg-amar);
  }
  .grid-3 {
    grid-template-columns: 1fr
  }
  .grid-2 {
    grid-template-columns: 1fr
  }
  form {
    width: 100%
  }
}