/* Helpers */
.content-right {
    text-align: right;
}

.home-page-slider {
    /* height: 750px;  */
    height: 88vh; 
    max-height: 800px;
    position: relative;
}

.home-page-slider-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.home-page-slider-slide {
    height: 100%; 
    background-color: #eee;
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    display: none;
}


.home-page-slider-slide-content {
    margin-top: -5%;
    z-index: 2;
}

.home-page-slider-slide-content::after {
    content: '';
    background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8)50%, rgba(250, 250, 250, 0));
    /* background: rgb(0,32,96); */
    width: 90%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.home-page-slider-slide-content.content-right::after {
    background: linear-gradient(90deg,rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)50%, rgba(250, 250, 250, 0));
    background: linear-gradient(90deg,rgba(250, 250, 250, 0), rgba(255, 255, 255, 0.8)50%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.9) );
    /* background: rgb(0,32,96); */
    left: unset;
    right: 0;
    top: 0;
    z-index: -1;
}

.home-page-slider-slide-content-title {
    color: var(--secondary-color);
    text-shadow: var(--text-shadow-white);
}

.home-page-slider-slide-content-subtitle {
    font-size: 1.5rem;
    margin-top: 10px;
    text-shadow: var(--text-shadow-white);
    /* color: var(--text-color); */
}

.home-page-slider-slide-content-title,
.home-page-slider-slide-content-subtitle {
    width: 55%;
}

.home-page-slider-slide-content-btn {
    margin-top: 30px;
    border-radius: 3px;
    display: block;
}

/* Slider animation */
.home-page-slider-slide-content-title,
.home-page-slider-slide-content-subtitle, 
.home-page-slider-slide-content-btn {
    transform: translateY(50px);
    opacity: 0;
}


.home-page-slider-slide.show {
    display: flex;
}

.home-page-slider-slide.show .home-page-slider-slide-content-title {
    animation: slideUp .8s ease .5s 1 forwards;
}

.home-page-slider-slide.show .home-page-slider-slide-content-subtitle {
    animation: slideUp .8s ease .8s 1 forwards;
}

.home-page-slider-slide.show .home-page-slider-slide-content-btn {
    animation: slideUp .8s ease 1s 1 forwards;
}

@keyframes slideUp {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* Slider nav */
.homepage_slider_nav {
    width: 100%; 
    /* height: 100%; */
    position: absolute; 
    z-index: 9;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 0 20px;
    bottom: 0;
}

.homepage_slider_nav_prev,
.homepage_slider_nav_next {
    background-color: #00000028;
    padding: 10px; 
    display: none;
}

/* Slides btns */
.homepage_slider_nav_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    margin-bottom: 10px;
}

.homepage_slider_nav_btn {
    padding: 5px;
    background-color: #afa5a570;
    border-radius: 50%;
    transition: .8s ease all;
}

.homepage_slider_nav_btn:hover {
    cursor: pointer;
    background-color: #524c4ca6;
}

.homepage_slider_nav_btn.active {
    background-color: #1a71a4a8;
}

/* --------------------------------------------------
        - Mobile  
--------------------------------------------------- */
@media screen and (max-width: 480px) {
    .home-page-slider {
        height: 50vh; 
        max-height: 500px;
    }
    .home-page-slider-slide-content-title {
        font-size: 1.8rem;
    }

    .home-page-slider-slide-content-subtitle {
        font-size: 1rem;
    }

    .home-page-slider-slide-content-title, 
    .home-page-slider-slide-content-subtitle {
        width: 95%;
    }
}