#inner-circle-page
{
    background: #0a0a14;
}

.hero-section
{
    min-height: 90vh;
    padding-top: 100px;
}

.hero-bg
{
    z-index: 1;
}

.text-gradient
{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-success-gradient
{
    background: linear-gradient(90deg, #2bd369 0%, #1a9c4a 100%) !important;
}

.bg-info-gradient
{
    background: linear-gradient(90deg, #4de0ff 0%, #2a8ba3 100%) !important;
}

.bg-warning-gradient
{
    background: linear-gradient(90deg, #ffc107 0%, #d39e00 100%) !important;
}

.bg-danger-gradient
{
    background: linear-gradient(90deg, #dc3545 0%, #a71d2a 100%) !important;
}

.bg-purple-gradient
{
    background: linear-gradient(90deg, #6f42c1 0%, #4a2d8a 100%) !important;
}

.bg-teal-gradient
{
    background: linear-gradient(90deg, #20c997 0%, #13855c 100%) !important;
}

.scroll-line
{
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, #2bd369, transparent);
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse
{
    0%, 100%
    {
        opacity: 0.5;
    }

    50%
    {
        opacity: 1;
    }
}

.software-card
{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.software-card:hover
{
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(43, 211, 105, 0.2) !important;
}

.hero-bg-image
{
    object-fit: cover;
    object-position: center;
}

/* Mobile optimization */
@media (max-width: 768px)
{
    .hero-bg-image
    {
        object-fit: contain;
        max-height: 60vh; /* Limit height on mobile */
    }

    .hero-section
    {
        min-height: 70vh !important; /* Reduce height on mobile */
    }
}

@media (max-width: 576px)
{
    .hero-bg-image
    {
        max-height: 50vh;
    }

    .hero-section
    {
        min-height: 60vh !important;
    }
}