/* _content/UserManagementClient/Pages/Index.razor.rz.scp.css */
#hero[b-28m753ud65] {
    width: 100%;
    height: 84vh;
    overflow: hidden;
    position: relative;
}

    #hero[b-28m753ud65]::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        width: 130%;
        height: 95%;
        background: rgb(47 69 80) center top no-repeat;
        z-index: 0;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    #hero[b-28m753ud65]::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        width: 130%;
        height: 96%;
        background: #ff6d41;
        opacity: 1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) translateY(18px) rotate(2deg);
    }

    #hero .carousel-container[b-28m753ud65] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    #hero h2[b-28m753ud65] {
        color: #fff;
        margin-bottom: 30px;
        font-size: 48px;
        font-weight: 700;
    }

    #hero p[b-28m753ud65] {
        width: 80%;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
        margin: 0 auto 30px auto;
        color: #fff;
    }

    #hero .carousel-control-prev[b-28m753ud65], #hero .carousel-control-next[b-28m753ud65] {
        width: 10%;
    }

    #hero .carousel-control-next-icon[b-28m753ud65], #hero .carousel-control-prev-icon[b-28m753ud65] {
        background: none;
        font-size: 48px;
        line-height: 1;
        width: auto;
        height: auto;
    }

    #hero .btn-get-started[b-28m753ud65] {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 32px;
        border-radius: 50px;
        transition: 0.5s;
        line-height: 1;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
        border: 2px solid #68A4C4;
    }

        #hero .btn-get-started:hover[b-28m753ud65] {
            background: #68A4C4;
            color: #fff;
            text-decoration: none;
        }

@media (min-width: 1024px) {
    #hero p[b-28m753ud65] {
        width: 60%;
    }

    #hero .carousel-control-prev[b-28m753ud65], #hero .carousel-control-next[b-28m753ud65] {
        width: 5%;
    }
}

@media (max-width: 768px) {
    #hero[b-28m753ud65]::after {
        width: 180%;
        height: 95%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    #hero[b-28m753ud65]::before {
        top: 0;
        width: 180%;
        height: 94%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) translateY(20px) rotate(4deg);
    }
}

@media (max-width: 575px) {
    #hero h2[b-28m753ud65] {
        font-size: 30px;        
    }

    #carouselExampleIndicators[b-28m753ud65] {
        display: none;
    }

    #hero[b-28m753ud65]::after {
        left: 40%;
        top: 0;
        width: 200%;
        height: 95%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    #hero[b-28m753ud65]::before {
        left: 50%;
        top: 0;
        width: 200%;
        height: 95%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) translateY(20px) rotate(4deg);
    }
}