.elixir-homepage-banner {
background-image: url('/images/banner-image.svg');
background-size: cover;
height: calc(100vh - 360px);
background-repeat: no-repeat;
background-position: left bottom;
display: flex;
align-items: center;
justify-content: center;
min-height: 650px;
max-height: 650px;
}
header {
background-image: linear-gradient(90deg, #FD00570D, #FD005700 50%);
}
.landing-banner-heading {
padding: 10rem 0;
}
.landing-banner-heading>div {
display: flex;
align-items: center;
gap: 10px;
}
.landing-banner-heading button {
background-color: transparent;
}
.landing-banner-heading label {
font-size: 2rem;
}
.landing-banner-heading p {
margin: 2rem 0 3rem 0;
width: 80%;
transform: translateY(40px);
opacity: 0;
visibility: hidden;
transition: 1s ease-in-out;
}
.landing-banner-heading .cta-wrapper {
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: 1.3s ease-in-out;
}
.landing-banner-heading h1 {
transform: translateY(60px);
opacity: 0;
visibility: hidden;
transition: 0.8s ease-in-out;
}
.landing-banner-heading p.reveal-top,
.landing-banner-heading h1.reveal-top,
.landing-banner-heading .cta-wrapper.reveal-top {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.navigation-dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 2px;
border: 1px solid #8054F6;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.navigation-dot-active {
background-color: #8054F6;
}
.navigation-dot-wrapper {
margin-top: 4rem;
display: none;
}
.elixir-homepage-slider {
margin-top: -40px;
}
.elixir-homepage-slider-wrapper {
box-shadow: 0px 20px 40px #DF007126;
border-radius: 5px;
background: #fff;
padding: 0 40px;
overflow: hidden;
position: relative;
}
.elixir-data-slider-imageside-list,
.elixir-data-slider-textside-list {
opacity: 0;
visibility: hidden;
position: absolute;
transform: translateY(30px);
}
.elixir-data-slider-textside-list p:nth-of-type(1) {
font-size: 2.8rem;
font-weight: 700;
margin: 0 0 1rem 0;
color: #2b3751;
}
.elixir-data-slider-show {
opacity: 1;
visibility: visible;
position: relative;
transform: translateY(0px);
transition: 0.8s ease-in-out;
}
.elixir-data-slider-imageside-list img {
width: 170px;
}
.elixir-data-slider-imageside-wrapper,
.elixir-data-slider-textside-wrapper {
display: flex;
align-items: center;
height: 100%;
}
.elixir-data-slider-imageside-wrapper {
padding-right: 20px;
}
.elixir-data-slider-textside-wrapper {
justify-content: space-between;
}
.elixir-data-slider-imageside-wrapper .button-side {
margin-right: 30px;
}
.elixir-data-slider-textside-wrapper .button-side {
margin-left: 30px;
}
.elixir-data-slider-textside-list {
margin: 30px 0;
}
.elixir-data-slider-textside-list h2 {
margin-bottom: 0;
}

@media(max-width:1640px) and (min-width:1023px) {
.landing-banner-heading {
    padding: 5rem 0;
}
}

@media(max-width:1200px) and (min-width:1023px) {
.elixir-homepage-banner {
    min-height: 600px;
    max-height: 600px;
}

.landing-banner-heading {
    padding: 0 0 5rem;
}
}

@media (max-width:500px) {
.landing-banner-heading>div {
    flex-direction: column;
    align-items: flex-start;
}
}

@media(max-width:1023px) {
.elixir-homepage-banner {
    min-height: unset;
    height: unset;
    padding: 30px 0 8rem;
    background-image: none;
    background-image: linear-gradient(#FD005700, #FD00570D);
}

.landing-banner-heading p {
    width: 100%;
}
.landing-banner-heading h1 br {
    display: none;
}
.landing-banner-video {
    display: none;
}
.landing-banner-heading {
    padding-top: 2rem;
}
}

@media(max-width:767px) {
.elixir-data-slider-imageside-wrapper {
    display: none;
}
.elixir-homepage-slider-wrapper {
    box-shadow: 0px 4px 8px #DF007126;
}
.button-side {
    display: none;
}
.elixir-homepage-slider-wrapper {
    padding: 0 25px;
}
.navigation-dot-wrapper {
    display: block !important;
}

.elixir-data-slider-textside-list {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
    display: none;
}
.elixir-data-slider-show {
    display: block;
}
.elixir-data-slider-textside-list p:nth-of-type(1) {
    font-size: 3.8rem !important;
}
}