.heroe-banner {
  padding: 0px 15px;
  border-radius: 0px 0px 40px 40px;
  display: flex;
  align-items: flex-end;
  height: 700px;
  width: 100%;
  & .heroe-banner-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    & .top-icons {
      display: none;
    }
    & h1 {
      font-family: "Playfair-Display", sans-serif;
      font-weight: 400;
      font-size: 70px;
      color: #ffffff;
      max-width: 787px;
      margin: 0;
    }
    & .banner-p {
      font-family: "Inter-Display", sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
    }
    & .line {
      border: 1px solid #ffffff;
      opacity: 30%;
      margin-top: 36px;
      margin-bottom: 24px;
    }
    & .button-icons-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
    }
  }
}
.heroe-banner.home-banner {
  height: 885px;
  & .heroe-banner-inner {
    & .banner-p {
      margin: 0;
    }
    & .line {
      margin-top: 24px;
      margin-bottom: 24px;
    }
  }
  & .banner-buttons {
    display: flex;
    gap: 12px;
    & a:first-child {
      /* padding: 25px 35px; */
      max-width: 100%;
      width: 238px;
      height: 64px;
      align-items: center;
    }
  }
}
.heroe-banner.object-banner {
  & .heroe-banner-inner {
    & h1 {
      max-width: 811px;
      font-size: 56px;
      @media (max-width: 580px) {
        font-size: 36px;
      }
    }
  }
}
@media (max-width: 768px) {
  .button-icons-container {
    & .banner-buttons {
      flex-direction: column;
      width: 100%;
      & a.green-right-arrow-btn {
        width: 100% !important;
        max-width: 100%;
      }
      & a.transparent-text-button {
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
      }
    }
    & .bottom-arrow {
      display: none;
    }
  }
}
@media (max-width: 585px) {
  .heroe-banner.heroe-banner {
    height: 640px;
    & .heroe-banner-inner {
      & .top-icons {
        display: flex;
        margin-bottom: 30px;
      }
      & .button-icons-container {
        & .custom-social-icons {
          display: none;
        }
        & .transparent-text-button {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}
@media (max-width: 568px) {
  .heroe-banner.heroe-banner {
    height: 640px;
    & .heroe-banner-inner {
      & h1 {
        font-size: 48px;
      }
    }
  }
}
@media (max-width: 385px) {
  .heroe-banner {
    & .heroe-banner-inner {
      & h1 {
        font-size: 43px;
      }
    }
  }
}