header {

  background-color: var(--bs-secondary);

  padding: 1rem 0;

  border-radius: 0 0 32px 32px;

  position: fixed;

  width: 100%;

  filter: drop-shadow(2px 2px 24px #0000002d);

  z-index: 999999;

}



header .logo {

  max-height: 30px;

  height: 100%;

}



header .social-icons {

  max-width: 20px;

  width: 100%;

  margin: 0 1rem;

}



@media only screen and (min-width: 556px) {

  main section .bg-hero {

    background-image: url(../images/bg-hero.png);

    background-repeat: no-repeat;

    background-position: bottom;

    background-size: cover;

  }



  header .logo {

    max-height: 40px;

    height: 100%;

  }

}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 992px) {

}

@media only screen and (min-width: 1200px) {

}

@media only screen and (min-width: 1400px) {

}

@media only screen and (min-width: 1600px) {

}