/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-height: var(--max-height-desktop);

    &::before {

        display: block;
        width: 1px;
        height: 13rem;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        content: '';
        z-index: 2;
    }

    /*  &::after {

        display: block;
        width: 13rem;
        height: 1px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        bottom: 6.5rem;
        content: 'Scroll';
        color: #fff;
        transform: translateX(-50%) rotate(-90deg);
        z-index: 2;
    }*/

    .scroll-indicator {
        position: absolute;
        width: 13rem;
        height: 1px;
        background-color: transparent;
        left: 50%;
        bottom: 6.5rem;
        transform: translateX(-50%) rotate(90deg);
        z-index: 2;
    }

    .scroll-indicator::after {
        content: '';
        display: block;
        width: 13rem;
        height: 1px;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        z-index: 1;
    }

    .scroll-indicator span {
        position: absolute;
        right: 0;
        top: -1.5rem;
        transform: translateX(-50%) rotate(-180deg);
        color: #fff;
        z-index: 2;
        padding-left: 0px;
        ;
    }

    .background {

        &.desktop {

            &::after {
                display: none !important;
                /*content: "";
                /*position: absolute;
                /*bottom: -2px;
                /*left: 0;
                /*width: 100%;
                /*height: 10rem;
                /* Adjust the height of the fade effect */
                /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--e-global-color-text));
                /* Gradient: Transparent to solid background color */
                /*pointer-events: none;
                /* Prevent interaction */
                /*z-index: 2;
                /* Ensure the fade effect sits on top */
            }



        }


        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;

        .background-image,
        .background-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        text-align: center;
        color: white;
        font-size: 2rem;
        padding: 0 20px;
        z-index: 10;

        .title {

            font-size: 96px;
            font-family: "Caudex", sans-serif;
            line-height: 90px;
            font-weight: 400;

            /* &::before,
            &::after {
                content: "";
                content: '';
                display: block;
                width: 2px;
                height: 10rem;
                background-color: #fff;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            &::before {
                top: -13rem;
            }

            &::after {
                bottom: -13rem;
            }*/

        }
    }
}

@media only screen and (min-width: 1025px) {
    .hero-section {
        .background {
            &.mobile {
                display: none
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .hero-section {
        max-height: var(--max-height-mobile);

        .background {
            &.desktop {
                display: none
            }
        }
    }
}

@media screen and (max-width: 767.98px) {
	.hero-section .title{
		font-size: 36px!important;
    	line-height: 46px!important;
	}
	.hero-section .title p{
		margin-bottom: 0px;
	}
}