:root {
  --basf-blue      : #004A96;
  --basf-light-blue: #d6dce5;
  --column-gap     : 2rem;
  --row-gap        : 4rem;
  --header-height  : 10rem;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size      : 100%;
  overflow-x     : hidden !important;
}

a {
  text-decoration: none !important;
  cursor         : pointer;
}

ul {
  list-style: none;
}

body {
  margin    : 0;
  padding   : 0;
  overflow-x: hidden !important;
  font-family    : "Roboto", sans-serif;
  color     : #000;
  line-height: 1.6;
}

button {
  border       : 0;
  border-radius: 0.25rem;
  cursor       : pointer;
}

h1, h2, h3 {
  color: var(--basf-blue);
}

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

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

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

.btn {
  height          : 3rem;
  width           : 13rem;
  background-color: var(--basf-blue);
  border-radius   : 0.5rem;
  color           : #ffffff;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-weight     : 600;
  opacity         : 0.7;
  transition      : opacity 0.3s;
  font-size       : 0.9rem;
}

.btn:hover {
  opacity: 1;
}

/* header */
.bgWhite {
  background-color: #ffffff;
}

.header {
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.headerWrap {
  padding-top: var(--header-height);
}

.headerContainer {
  display   : flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 4rem;
  padding: 2rem;
}

.headerLogo,
.headerCta {
  width: 13rem;
  flex: 0 0 auto;
}

.headerLogo img {
  width: 11rem;
}

.headerLinks {
  flex: 1 1 100%;
}

.headerLinks ul {
  display : flex;
  align-items: center;
  justify-content: center;
  column-gap: 2.5rem;
  padding: 0;
}

.headerLinks ul li a {
  font-weight: 600;
  font-size  : 1.2rem;
  opacity    : 0.7;
  transition : opacity 0.3s;
  color      : black;
}

.headerLinks ul li a:hover {
  opacity: 1;
}
/* header end */

/* layout */
.container {
  width    : 1200px;
  max-width: 100%;
  margin   : 0 auto;
  padding  : 0 1rem;
}

@media (min-width: 1600px) {
  .container {
    width: 1440px;
  }
}

.section {
  padding-top: var(--row-gap);
  padding-bottom: var(--row-gap);
}

.sectionAnchor {
  position: relative;
  top: calc(-1 * var(--header-height) - 2rem);
}

.sectionHeading {
  font-weight: 500;
  font-size  : 3rem;
  line-height: normal;
}

.lVerticalGroup {
  display        : flex;
  flex-direction : column;
  row-gap        : var(--row-gap);
}
/* layout end */

/* main container */
body,
.headerContainer,
.firstSection,
.secondSection {
  background: rgb(168, 168, 168);
  background: linear-gradient(90deg, rgba(168, 168, 168, 1) 0%, rgba(253, 253, 253, 1) 59%);
}

.firstSection {
  padding-top: 0;
  padding-bottom: 0;
}

.firstSection .sectionHeading {
  font-size  : 6rem;
  font-weight: 500;
}

.firstSectionGroup {
  min-height: calc(clamp(0px, 100vh, 1080px) - var(--header-height));
  display        : flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding-top: var(--row-gap);
}

.firstSectionImage {
  flex: 0 0 auto;
  width       : 38%;
  height: auto;
  margin-right: var(--column-gap);
}

.firstSectionText p {
  font-size    : 1.1rem;
  margin-top   : 1rem;
  margin-bottom: 0;
}

.firstSectionText img {
  width: 100%;
}

@media (min-width: 1600px) {
  .firstSectionText img {
    width: 75%;
  }
}

.secondSection .sectionHeading {
  text-align : center;
}

.secondSection iframe {
  margin: 1rem auto 0;
}

.thirdSection {
  background     : linear-gradient(to bottom, #ffffff 35%, #e8e3de 35%);
  padding-bottom: var(--row-gap);
}

.imageTextItems {
  display        : flex;
  justify-content: space-between;
  row-gap : var(--row-gap);
}

.imageTextItem {
  width         : 25%;
}

.imageTextItem img {
  width        : 100%;
  object-fit   : cover;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.imageTextItem h3 {
  text-align: center;
  margin    : 0.5rem auto;
  height    : 3.5rem;
}

.knowMore {
  display        : flex;
  justify-content: center;
  padding        : 0.5rem 0 1rem;
  align-items    : center;
}

.knowMore .btn {
  margin-left     : 5rem;
}

.horizontalItem {
  display: flex;
  height : 40%;
}

.horizontalItem div {
  padding: 1rem 2rem;
}

.reversed {
  flex-direction: row-reverse;
  background    : #e8e3de;
}

.horizontalItem img {
  width     : 30rem;
  object-fit: cover;
}

.sixthBanner {
  display: block;
  width: 100%;
  margin-bottom: 0;
  object-fit: cover;
  max-height: 15rem;
}

.containerSection {
  width  : 100%;
  display: flex;
}

.containerSection .leftSide {
  width     : 50%;
  padding        : 1rem;
  background: linear-gradient(to bottom, transparent 0%, #e8e3de 0%);
}

.containerSection .rightSide {
  width          : 50%;
  padding        : 1rem;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
}

.containerSection .rightSide img {
  margin-top  : 1rem;
  width       : 100%;
  height      : auto;
}

.expertsSection {
  padding: 0;
}

.expertsSectionSubsection {
  padding: var(--row-gap) 0;
}

.expertsSectionSubsection:nth-child(even) {
  background: #e8e3de;
}

.expertsContainer {
  display        : flex;
  justify-content: space-between;
  column-gap     : var(--column-gap);;
  row-gap        : var(--row-gap);
}

.expert {
  width         : 18rem;
}

.expert img {
  display: block;
  margin: 0 auto;
  width          : 100%;
  object-fit     : cover;
  object-position: center;
  border-radius  : 0.5rem;
  aspect-ratio: 1 / 1;
}

.expert h3 {
  margin-top: 1rem;
  font-size : 1.4rem;
}

.expert h3,
.expert p:first-of-type {
  color      : var(--basf-blue);
  font-weight: 600;
  text-align : center;
}

.expert p:first-of-type {
  margin-top: 0;
  font-size : 1.1rem;
}

.expert p b {
  color: var(--basf-blue);
}

.placeholder {
  width: 18rem;
}

.contactSection .subtitle {
  font-size : 1.1rem;
  width     : 80%;
}
/* main container end */

/* contact form */
.contactForm h3 {
  font-weight: 500;
}

.contactForm .row {
  width         : 100%;
  display       : flex;
  column-gap: 4rem;
}

.contactForm .row.last {
  flex-flow: column;
}

.contactForm .column {
  flex: 1 1 0%;
}

.contactForm .formGroup {
  margin-bottom: 2rem;
}

.contactForm .formGroup fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.contactForm .formGroup legend {
  font-size: 0.75rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
}

.contactForm .formGroup label {
  font-size: 0.75rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
}

#input_captcha_code,
.contactForm .formGroup input,
.contactForm .formGroup select {
  text-overflow: ellipsis !important;
  width  : 100%;
  padding: 0;
  border: 0.0625rem solid #555;
  border-radius: 0;
  background-color: transparent;
  font-size: 1rem;
  font-family: inherit;
  padding: 1.5ex 1ex;
}

.contactForm .formGroup input:focus,
.contactForm .formGroup select:focus {
  outline: 0;
}

.contactForm .formGroup select[multiple] {
  height: 7rem;
}

.contactForm .formCheck {
  display: flex;
  align-items: start;
}

.contactForm .formCheck label {
  font-size: inherit;
  font-weight: inherit;
  padding-bottom: 0.5rem;
}

.contactForm .formCheck input {
  width: auto;
  margin-right: 2ex;
}

.contactForm .formCheck p {
  margin-top: 0;
}

.contactForm .formConsent {
  margin-top: 0.5rem;
}

.contactForm .submit {
  width : auto;
  height: 5rem;
  padding: 1rem 2rem;
  font-size       : 1.2rem;
  margin-top: 2rem;
  cursor          : pointer;
  transition      : color 0.3s;
}

#captcha_region {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#captcha_region button {
  padding: 1rem;
  margin-right: 1rem;
}
.captcha_input {
  margin-top: 0.75rem;
  width: 14rem;
}

.captcha_input label {
  margin-bottom: 0.375rem !important;
}

.arrow {
  margin-left: 1em;
  width     : 2.5vmin;
  height    : 2.5vmin;
  position  : relative;
  top: -0.8rem;
  left      : 0;
  margin-top: 1.6rem;
  transform : rotate(45deg);
  cursor    : pointer;
}

.arrow::before {
  content         : '';
  width           : 100%;
  height          : 100%;
  border-width    : .6vmin .6vmin 0 0;
  border-style    : solid;
  border-color    : currentColor;
  transition      : .3s ease;
  display         : block;
  transform-origin: 100% 0;
}

.arrow:after {
  content         : '';
  float           : left;
  position        : relative;
  top             : -100%;
  width           : 100%;
  height          : 100%;
  border-width    : 0 .6vmin 0 0;
  border-style    : solid;
  border-color    : currentColor;
  transform-origin: calc(100% - .69vmin) .15vmin;
  transition      : .3s ease;
}

.submit:hover .arrow:after {
  transform   : rotate(45deg);
  border-color: currentColor;
  height      : 120%;
}

.submit:hover .arrow::before {
  border-color: currentColor;
  transform   : scale(.8);
}
/* contact form end */

/* footer */
.footer {
  padding   : 5rem 0 0;
  border-top   : 0.0625rem solid rgb(168, 168, 168);
  background-color: #ffffff;
}

.footer .wrapper {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: flex-start;
  position       : relative;
}

.footer .social,
.footer .legal {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  margin-bottom  : 2rem;
}

.footer .social {
  font-weight: 600;
}

.footer .legal {
  font-weight: 500;
}

.footer .social a {
  padding-left: 1rem;
  font-size   : 1.2rem;
  font-weight : 500;
  color       : var(--basf-blue);
}

.footer .legal a {
  font-size   : 1rem;
  font-weight : 500;
  margin-right: 2rem;
  margin-left : 1rem;
  color       : var(--basf-blue);
}

.footer .legal {
  margin-top: 3rem;
}
/* footer end */

@media (max-width: 959px) {
  :root {
    --row-gap        : 2rem;
    --header-height: 6.5rem;
  }

  .header {
    position: absolute;
  }

  .headerContainer {
    padding: 1rem;
  }

  .sectionHeading {
    font-size : 2.5rem;
  }

  .headerLogo,
  .headerCta {
    width: auto;
  }

  .headerLogo img {
    width       : 8rem;
  }

  .headerLinks {
    display: none;
  }

  .firstSection .sectionHeading {
    font-size: 3rem;
  }

  .firstSectionGroup {
    flex-direction: column-reverse;
  }

  .firstSectionImage {
    width : 75%;
    margin: 0.5rem auto;
  }

  .firstSectionText p {
    font-size    : 1rem;
  }

  .secondSection iframe {
    margin: 0.5rem auto 0;
    width : 100%;
    height: 15rem;
  }

  .thirdSection {
    background    : #e8e3de;
  }

  .imageTextItems {
    flex-direction: column;
  }

  .imageTextItem {
    width         : 100%;
  }

  .imageTextItem img {
    height       : 17rem;
  }

  .knowMore {
    flex-direction : column;
    justify-content: space-evenly;
  }

  .knowMore h3 {
    font-size: 1.3rem;
  }

  .knowMore .btn {
    width     : 15rem;
    margin    : 1rem auto 0;
  }

  .horizontalItem {
    display       : flex;
    flex-direction: column;
    height        : auto;
    margin-top    : 2rem;
  }

  .horizontalItem div {
    margin-top: 1rem;
    padding   : 0;
  }

  .reversed {
    flex-direction: column;
    background    : #e8e3de;
  }

  .horizontalItem img {
    width     : 100%;
    object-fit: cover;
  }

  .horizontalItem h3 {
    padding: 0.5rem;
  }

  .horizontalItem p {
    font-size: 1rem;
    padding  : 0.5rem;
  }

  .containerSection {
    flex-direction: column;
  }

  .containerSection .leftSide {
    width     : 100%;
  }

  .containerSection .rightSide {
    width          : 100%;
  }

  .expertsSection .sectionHeading {
    text-align: center;
  }

  .expertsContainer {
    flex-direction: column;
  }

  .expert {
    width         : 100%;
    max-width: 30rem;
    margin: 0 auto;
  }

  .expert img {
    width : 70%;
  }

  .expert h3 {
    margin-top: 1rem;
    font-size : 1.5rem;
  }

  .expert p {
    font-size : 1rem;
    margin-top: 0.5rem;
  }

  .expert p b {
    color: var(--basf-blue);
  }

  .placeholder {
    width: 0;
  }

  .contactSection .subtitle {
    width     : 100%;
  }

  .contactForm .row {
    flex-direction: column;
  }

  .contactForm .column {
    width: 100%;
  }

  /* contact form */
  .arrow {
    margin-top: 2rem !important;
  }

  /* footer */
  .footer .social,
  .footer .legal {
    flex-wrap: wrap;
  }

  .footer .social span,
  .footer .legal span {
    width        : 100%;
    margin-bottom: 1rem;
  }

  .footer .social a {
    margin-left : 0;
    margin-right: 2rem;
    padding-left: 0 !important;
  }

  .footer .legal a {
    width        : 100%;
    margin-bottom: 1rem;
    margin-left  : 0 !important;
  }
}