@use '../../../abstracts/functions' as fn;
@use '../../../abstracts/flex' as fx;

.hero {
  background: url('../images/hero.webp') top center no-repeat;
  background-size: cover;
  padding-top: fn.rem(130px);
  min-height: fn.rem(700px);
  position: relative;
  z-index: 1;
  margin-bottom: fn.rem(-20px);

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: -1;
    pointer-events: none;
  }

  .container {
    position: relative;
  }

  &__title {
    width: 100%;
    max-width: fn.rem(746px);
  }

  &__information {
    // margin-top: fn.rem(75px);
    margin-top: fn.rem(190px);
    width: 100%;
    max-width: fn.rem(535px);
    // margin-left: auto;
  }

  &__description {
    margin-bottom: fn.rem(50px);
    width: 100%;
    max-width: fn.rem(390px);
  }

  &__button {}

  &__buttons {}

  &__scroll {
    @extend .flex-center;
    gap: fn.rem(12px);
    position: absolute;
    left: 0;
    bottom: 0;

    &::after {
      content: '';
      width: fn.rem(18px);
      height: fn.rem(24px);
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTgnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAxOCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNOC4zNjM5MyAxNy4xMzI1QzguNTMyNjggMTcuMzAxMSA4Ljc2MTQzIDE3LjM5NTcgOC45OTk5MyAxNy4zOTU3QzkuMjM4NDMgMTcuMzk1NyA5LjQ2NzE4IDE3LjMwMTEgOS42MzU5MyAxNy4xMzI1TDEyLjMzNTkgMTQuNDMzN0MxMi40OTQ5IDE0LjI2MzEgMTIuNTgxNSAxNC4wMzc1IDEyLjU3NzMgMTMuODA0M0MxMi41NzMyIDEzLjU3MTEgMTIuNDc4OCAxMy4zNDg3IDEyLjMxMzkgMTMuMTgzOEMxMi4xNDkgMTMuMDE4OSAxMS45MjY1IDEyLjkyNDQgMTEuNjkzNCAxMi45MjAzQzExLjQ2MDIgMTIuOTE2MiAxMS4yMzQ1IDEzLjAwMjcgMTEuMDYzOSAxMy4xNjE3TDguOTk5OTMgMTUuMjIyMUw2LjkzNTkzIDEzLjE1OTNDNi44NTI4NiAxMy4wNzM0IDYuNzUzNTIgMTMuMDA0OSA2LjY0MzcgMTIuOTU3OEM2LjUzMzg3IDEyLjkxMDcgNi40MTU3NiAxMi44ODU5IDYuMjk2MjYgMTIuODg0OUM2LjE3Njc2IDEyLjg4MzkgNi4wNTgyNiAxMi45MDY4IDUuOTQ3NjcgMTIuOTUyMUM1LjgzNzA5IDEyLjk5NzQgNS43MzY2MyAxMy4wNjQyIDUuNjUyMTcgMTMuMTQ4OEM1LjU2NzcxIDEzLjIzMzMgNS41MDA5MyAxMy4zMzM4IDUuNDU1NzMgMTMuNDQ0NUM1LjQxMDUzIDEzLjU1NTEgNS4zODc4MSAxMy42NzM2IDUuMzg4OSAxMy43OTMxQzUuMzkgMTMuOTEyNiA1LjQxNDg4IDE0LjAzMDcgNS40NjIxIDE0LjE0MDVDNS41MDkzMiAxNC4yNTAzIDUuNTc3OTMgMTQuMzQ5NSA1LjY2MzkzIDE0LjQzMjVMOC4zNjM5MyAxNy4xMzI1Wk04Ljk5OTkzIDguNDY0OTJDOC43NDUzMiA4LjQ2NDkyIDguNTAxMTQgOC4zNjM3OCA4LjMyMTExIDguMTgzNzVDOC4xNDEwNyA4LjAwMzcxIDguMDM5OTMgNy43NTk1MyA4LjAzOTkzIDcuNTA0OTJDOC4wMzk5MyA3LjI1MDMyIDguMTQxMDcgNy4wMDYxNCA4LjMyMTExIDYuODI2MUM4LjUwMTE0IDYuNjQ2MDcgOC43NDUzMiA2LjU0NDkyIDguOTk5OTMgNi41NDQ5MkM5LjI1NDU0IDYuNTQ0OTIgOS40OTg3MSA2LjY0NjA3IDkuNjc4NzUgNi44MjYxQzkuODU4NzggNy4wMDYxNCA5Ljk1OTkzIDcuMjUwMzIgOS45NTk5MyA3LjUwNDkyQzkuOTU5OTMgNy43NTk1MyA5Ljg1ODc4IDguMDAzNzEgOS42Nzg3NSA4LjE4Mzc1QzkuNDk4NzEgOC4zNjM3OCA5LjI1NDU0IDguNDY0OTIgOC45OTk5MyA4LjQ2NDkyWk04LjAzOTkzIDEwLjg4NDFDOC4wMzk5MyAxMS4wMTAyIDguMDY0NzYgMTEuMTM1IDguMTEzIDExLjI1MTVDOC4xNjEyNSAxMS4zNjggOC4yMzE5NiAxMS40NzM4IDguMzIxMTEgMTEuNTYyOUM4LjQxMDI1IDExLjY1MjEgOC41MTYwOCAxMS43MjI4IDguNjMyNTUgMTEuNzcxQzguNzQ5MDIgMTEuODE5MyA4Ljg3Mzg2IDExLjg0NDEgOC45OTk5MyAxMS44NDQxQzkuMTI2IDExLjg0NDEgOS4yNTA4MyAxMS44MTkzIDkuMzY3MyAxMS43NzFDOS40ODM3OCAxMS43MjI4IDkuNTg5NjEgMTEuNjUyMSA5LjY3ODc1IDExLjU2MjlDOS43Njc4OSAxMS40NzM4IDkuODM4NjEgMTEuMzY4IDkuODg2ODUgMTEuMjUxNUM5LjkzNTEgMTEuMTM1IDkuOTU5OTMgMTEuMDEwMiA5Ljk1OTkzIDEwLjg4NDFDOS45NTk5MyAxMC42Mjk1IDkuODU4NzggMTAuMzg1MyA5LjY3ODc1IDEwLjIwNTNDOS40OTg3MSAxMC4wMjUzIDkuMjU0NTQgOS45MjQxMiA4Ljk5OTkzIDkuOTI0MTJDOC43NDUzMiA5LjkyNDEyIDguNTAxMTQgMTAuMDI1MyA4LjMyMTExIDEwLjIwNTNDOC4xNDEwNyAxMC4zODUzIDguMDM5OTMgMTAuNjI5NSA4LjAzOTkzIDEwLjg4NDFaJyBmaWxsPSd3aGl0ZScgZmlsbC1vcGFjaXR5PScwLjcnIC8+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J005IDBDNi42MTMwNSAwIDQuMzIzODcgMC45NDgyMTEgMi42MzYwNCAyLjYzNjA0QzAuOTQ4MjExIDQuMzIzODcgMCA2LjYxMzA1IDAgOVYxNUMwIDE3LjM4NjkgMC45NDgyMTEgMTkuNjc2MSAyLjYzNjA0IDIxLjM2NEM0LjMyMzg3IDIzLjA1MTggNi42MTMwNSAyNCA5IDI0QzExLjM4NjkgMjQgMTMuNjc2MSAyMy4wNTE4IDE1LjM2NCAyMS4zNjRDMTcuMDUxOCAxOS42NzYxIDE4IDE3LjM4NjkgMTggMTVWOUMxOCA2LjYxMzA1IDE3LjA1MTggNC4zMjM4NyAxNS4zNjQgMi42MzYwNEMxMy42NzYxIDAuOTQ4MjExIDExLjM4NjkgMCA5IDBaTTEuOCA5QzEuOCA3LjA5MDQ0IDIuNTU4NTcgNS4yNTkwOSAzLjkwODgzIDMuOTA4ODNDNS4yNTkwOSAyLjU1ODU3IDcuMDkwNDQgMS44IDkgMS44QzEwLjkwOTYgMS44IDEyLjc0MDkgMi41NTg1NyAxNC4wOTEyIDMuOTA4ODNDMTUuNDQxNCA1LjI1OTA5IDE2LjIgNy4wOTA0NCAxNi4yIDlWMTVDMTYuMiAxNi45MDk2IDE1LjQ0MTQgMTguNzQwOSAxNC4wOTEyIDIwLjA5MTJDMTIuNzQwOSAyMS40NDE0IDEwLjkwOTYgMjIuMiA5IDIyLjJDNy4wOTA0NCAyMi4yIDUuMjU5MDkgMjEuNDQxNCAzLjkwODgzIDIwLjA5MTJDMi41NTg1NyAxOC43NDA5IDEuOCAxNi45MDk2IDEuOCAxNVY5WicgZmlsbD0nd2hpdGUnIGZpbGwtb3BhY2l0eT0nMC43JyAvPjwvc3ZnPg==") center no-repeat;
      background-size: cover;
    }

    p {
      font-size: fn.rem(14px);
      opacity: .85;
    }
  }

  &__logo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: fn.rem(123px);
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTQ0MCcgaGVpZ2h0PScxMjMnIHZpZXdCb3g9JzAgMCAxNDQwIDEyMycgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMi40NDczIDBIODAuNDE1M0wxMjUuNTE4IDMyLjM0MUwxNzAuNjIgMEgyNDguNTg4TDE2NC41MDIgNjAuMzExNkwyNTEuMDM2IDEyMi4zNzFIMTczLjA2OEwxMjUuNTE4IDg4LjI4MjFMNzcuOTY3OSAxMjIuMzcxSC0wLjAwMDEyMjA3TDg2LjUzMzkgNjAuMzExNkwyLjQ0NzMgMFonIGZpbGw9J3doaXRlJyAvPjxwYXRoIGQ9J00yNjEuNTQxIDEyMi4zNzFWMEgzMTYuNzgzVjY3LjEyOTRMNDEzLjk4MSAwSDQ5NC4wNDdMNDA1LjQxNSA2MS4xODU2TDQ5NC4wNDcgMTIyLjM3MUg0MTMuOTgxTDM2NS4zODIgODguODA2NkwzMTYuNzgzIDEyMi4zNzFIMjYxLjU0MVonIGZpbGw9J3doaXRlJyAvPjxwYXRoIGQ9J002MjcuODgzIDM4LjQ1OTVMNjAyLjM2IDY5LjkyNjRINjUzLjQwN0w2MjcuODgzIDM4LjQ1OTVaTTU5Ni43NjYgMEg2NTkuMDAxTDc1OC4xMjEgMTIyLjM3MUg2OTUuODg3TDY4MS43MjcgMTA0Ljg5SDU3NC4wNEw1NTkuODggMTIyLjM3MUg0OTcuNjQ1TDU5Ni43NjYgMFonIGZpbGw9J3doaXRlJyAvPjxwYXRoIGQ9J004MDguMjA4IDEyMi4zNzFWNDEuOTU1OUg3MTkuNzUxVjBIOTUyLjI1NlY0MS45NTU5SDg2My40NVYxMjIuMzcxSDgwOC4yMDhaJyBmaWxsPSd3aGl0ZScgLz48cGF0aCBkPSdNOTY2LjI2OSAxMjIuMzcxVjBIMTE5My41M1YzMS40NjY5SDEwMjEuNTFWNDUuNDUyMkgxMTkzLjUzVjc2LjkxOTFIMTAyMS41MVY5MC45MDQ0SDExOTMuNTNWMTIyLjM3MUg5NjYuMjY5WicgZmlsbD0nd2hpdGUnIC8+PHBhdGggZD0nTTEzNzcuMDcgNDEuOTU1OUgxMjYyLjc0VjU1Ljk0MTJIMTM3Ny4wN0MxMzgxLjk2IDU1Ljk0MTIgMTM4NC43NiA1My4zMTg5IDEzODQuNzYgNDguOTQ4NUMxMzg0Ljc2IDQ0LjU3ODEgMTM4MS45NiA0MS45NTU5IDEzNzcuMDcgNDEuOTU1OVpNMTI2Mi43NCAxMjIuMzcxSDEyMDcuNDlWMEgxMzkxLjA1QzE0MjEuNjQgMCAxNDQwIDI0LjQ3NDMgMTQ0MCA0OC45NDg1QzE0NDAgNzAuMTAxMyAxNDI2LjE5IDkxLjI1NCAxNDAyLjc2IDk2LjY3MzNMMTQ0MCAxMjIuMzcxSDEzNjguNjdMMTMzMy4xOSA5Ny44OTdIMTI2Mi43NFYxMjIuMzcxWicgZmlsbD0nd2hpdGUnIC8+PC9zdmc+") center no-repeat;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      bottom: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 fn.rem(-30px) fn.rem(50px) 0 rgba(0, 0, 0, 0.7);
      z-index: -1;
    }
  }
}

