* {
  margin: 0;
  padding: 0;
}
:root {
  --color-blue-500: #2e3090;
  --color-blue-600: #28297b;

  --color-light-100: #ffffff;
  --color-light-200: #ebe0e0;

  --color-gray-400: #343438;
  --color-gray-500: #2b2727;

  --color-dark-500: #000000;
  --color-dark-400: #202020;

  --color-green-100: #23b24b;
  --color-green-500: #279646;
  --color-green-400: #23b24b;

  --color-red-500: #ce2127;
  --color-red-400: #ec252b;

  --color-yellow-600: #ea9c1c;
  --color-yellow-500: #f9a51b;
}
a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: var(--color-dark-400);
}
a:hover {
  color: var(--color-dark-500);
}

.a-on {
  text-decoration: underline;
  color: var(--color-light-100);
}
.a-on:hover {
  color: var(--color-light-200);
}

.bg-image {
  background-image: url(./components/Desktop.svg);
  max-width: 100%;
  background-size: cover;
  background-repeat: repeat-x;
}
.bg-blue {
  background-color: var(--color-blue-500);
}
.bg-blue-light {
  background-color: var(--color-blue-600);
}
.text-light {
  color: var(--color-light-100);
}
.card {
  width: 66.66%;
}
#cards {
  height: auto;
  min-height: 50vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
}
p {
  font-family: "Montserrat", sans-serif;
  font-size: larger;
}

.btn-blue {
  background-color: var(--color-blue-500);
  border: none;
  color: var(--color-light-100);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.btn-blue:hover {
  background-color: var(--color-blue-600);
  color: var(--color-light-100);
}
.btn-blue:active {
  background-color: var(--color-blue-500);
}
.btn-green {
  background-color: var(--color-green-400);
  border: none;
  color: var(--color-light-100);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.btn-green:hover {
  background-color: var(--color-green-500);
}
.btn-green:active {
  background-color: var(--color-dark-100);
}
.btn-yellow {
  background-color: var(--color-yellow-500);
  border: none;
  color: var(--color-light-100);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.btn-yellow:hover {
  background-color: var(--color-yellow-600);
  color: var(--color-light-100);
}
.btn-yellow:active {
  background-color: var(--color-yellow-500);
}
.card {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  min-width: 10rem;
}
#card-sec {
  min-width: 12rem;
  min-height: max-content;
}
footer {
  background-color: #2e3090;
  color: var(--color-light-100);
}
#hero {
  height: 100vh;
}
#topo {
  height: 20vh;
}
p{
  text-align: justify;
  
}



/* Querys */
@media (min-width: 1280px) {
  /*#body{
    background-image: url(./components/Desktop\ -\ 10no-text.svg);
    background-repeat: no-repeat;
  }*/
}
@media (min-width: 1024px) {
  #hero {
    height: 80vh;
  }
}
@media (min-width: 768px) {
  #hero {
    height: 80vh;
  }
}
@media (max-width: 768px) {
  #hero {
    height: 50vh;
  }
  .bg-image {
    background-image: none;
  }
  .btn {
    padding: 0 1rem;
  }
}