@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

nav, div.offcanvas-header {
background-color: var(--blue);
}

.offcanvas-header {
  font-size: 1.1rem;
}

.offcanvas-body {
  background-color: var(--phantom-blue);
}

a.nav-link {
  color: var(--white);
  font-weight: 500;
  font-size: 1.1rem;

}

.offcanvas-title {
  color: var(--white);
}


a.nav-link:hover, a.nav-link.active {
  color: var(--dark-blue) !important;
}

ul.navbar-nav {
  margin-left: auto;
}

.fa-solid {
  margin-right: 0.5rem;
}

.fa-solid.fa-bars, .fa-solid.fa-xmark {
  color: var(--white);
  margin-right:0;
}

button.btn-close.custom {
  all: unset;
  background-color: transparent;
}

button.navbar-toggler.custom, button.navbar-toggler.custom:focus {
  border: 1px solid var(--white);
  box-shadow: unset;
}

:root {
  --blue: #4c8bf5;
  --phantom-blue: #4c8bf580;
  --orange: #f8c060;
  --lilac: #bdb2ff;
  --purple: #6038c0;
  --dark-blue: #4036b1;
  --green: #adeacb;
  --white: #ffffff;
}

/*Seperação de estilização do menu para o corpo principal*/

body {
  padding-top: 115px;
  background-color: var(--lilac) !important;
}

section {
  border-radius: 20px;
  margin: 0px 40px 35px;
  color: white;
  background-color: var(--dark-blue);
}

section h4 {
  padding: 15px 0px;
}


.card-body {
  background-color: var(--green);
}

a{
  color: var(--white) !important;
}

#efeito {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 40px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}

#efeito:hover,
#efeito:focus,
#efeito:active {
  box-shadow: 0 0 40px white;
}

.efeito {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 40px white;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}

section .card {
  width: 100%;
  height: 100%;
}

footer {
  color: var(--white);
  background-color: var(--blue);
}

footer i {
  color: var(--blue);
}

#busca {
  background-color: white;
}

@media (max-width:768px) {
  body {
    padding-top: 70px;
  }
  section {
    width: 100%;
    border-radius: 0px;
    margin: 0px;
    padding: 0px;
  }
  #advertising {
    display: none;
  }
}