:root {
  --basf-blue      : #004A96;
  --basf-light-blue: #e7f8ff;
}

html {
  scroll-behavior: smooth;
  font-family    : "Roboto", sans-serif;
  box-sizing     : border-box;
}

a {
  text-decoration: none !important;
  color          : blue;
  font-weight    : 600;
}

ul {
  list-style: none;
}

body {
  color     : #000;
  font-size : 12px;
  height    : 100vh;
  overflow-x: hidden;
  margin    : 0 !important;
  padding   : 0 !important;
}

main {
  width: 100%;
}

body,
html {
  position   : relative;
  line-height: 1.6;
}

header {
  width  : 100%;
  z-index: 9999;
}

button {
  border       : 0;
  border-radius: 1rem;
}

input,
select {
  border       : 1px solid transparent;
  border-radius: 1rem;
}

input:hover,
select:hover {
  border: 1px solid black;
}

h1 {
  font-size: 1.9rem;
  margin   : 0;
}

h2 {
  font-size: 1.6rem;
  margin   : 0;
}

h3 {
  font-size: 1.4rem;
  margin   : 0;
}

@media only screen and (max-width: 480px) {
  .headerContainer .logoContainer img {
    margin-left: 0rem !important;
    width      : 150px !important;
    height     : auto !important;
  }

  .headerContainer .logoContainer {
    height   : auto !important;
    max-width: 100vw !important;
  }

  .mainContainer {
    width         : 100%;
    display       : flex !important;
    flex-direction: column !important;
    margin        : 2rem auto 4rem !important;
  }

  .mainContainer h2:first-of-type {
    color     : var(--basf-blue);
    text-align: center;
    margin    : 1rem auto 1.5rem !important;
    font-size : 1.7rem !important;
  }

  .mainContainer .section {
    display       : flex !important;
    flex-direction: column !important;
    margin-bottom : 1.5rem !important;

  }

  .mainContainer .sectionReversed {
    display       : flex;
    flex-direction: column !important;
    margin-bottom : 1.5rem !important;

  }

  .mainContainer img {
    width: 17rem !important;
    margin:
      0.5rem auto 0 !important;
  }

  .mainContainer p {
    padding: 2rem !important;
  }
}

/* Header */

.headerContainer {
  width           : 100%;
  height          : auto;
  display         : flex;
  flex-direction  : column;
  background-color: var(--basf-blue);
}

.headerContainer .logoContainer {
  padding  : 0.5rem 0.5rem 0.5rem 0;
  max-width: 930px;
  width    : 100%;
  height   : 5rem;
  margin   : 0 auto;
}

.headerContainer .logoContainer img {
  width : 255px;
  height: 80px;
}

/*  */

/* Main content */

.mainContainer {
  max-width     : 930px;
  display       : flex;
  flex-direction: column;
  margin        : 2rem auto 4rem;
}

.mainContainer h2:first-of-type {
  color     : var(--basf-blue);
  text-align: center;
  margin    : 1rem auto 4rem;
  font-size : 1.7rem;
}

.mainContainer .section {
  display      : flex;
  margin-bottom: 5rem;
}

.mainContainer p {
  font-size: 1rem;
  padding  : 1rem 2rem;
}

.section img {
  width: 28rem;
}

.mainContainer .sectionReversed {
  display       : flex;
  flex-direction: row-reverse;
}

.sectionReversed img {
  width        : 28rem;
  margin-bottom: 5rem;
}

.mainContainer h3 {
  color     : var(--basf-blue);
  text-align: center;
  margin    : 1rem auto 2rem;
}