#adaHero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #000 0%, #1a2e1a 50%, var(--app-main-dark-color) 100%);
    overflow: hidden;
    
    .hero-content {
        z-index: 2;
        position: relative;
    }

    .logo {
        margin-top: 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo img {
        max-height: 120px;
        width: auto;
        filter: drop-shadow(0 4px 15px rgba(var(--app-main-light-color-rgb), 0.3));
    }

    .tagline {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        color: var(--app-light-grey);
    }

    .subtitle {
        font-size: 1.1rem;
        color: var(--app-medium-grey);
        margin-bottom: 2rem;
    }

    .btn-container {
        display: flex;
        gap: 1.5rem;
        margin-top: 1.5rem;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 1rem;
    }

    .btn {
        display: inline-block;
        padding: 15px 25px;
        background-color: var(--app-main-dark-color);
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(var(--app-main-light-color-rgb), 0.3);
        min-width: 180px;
        text-align: center;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(var(--app-main-light-color-rgb), 0.4);
        background-color: var(--app-main-light-color);
    }

    @media (max-width: 767.97px) {
        .logo img {
            max-height: 60px;
        }

        .tagline {
            font-size: 1.2rem;
        }

        .btn-container {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding-bottom: 1rem;
        }

        .btn {
            width: 100%;
            max-width: 250px;
        }
    }

    @media (max-width: 480px) {
        .logo {
            padding: 0 10px;
        }
        .logo img {
            max-height: 50px;
        }
    }

     @media (max-width: 350px) {
        .logo img {
            max-height: 40px;
        }
    }
}