/* Salework Stock Landing Page Styles */

/* Feature Item Number Style */
.feature-item .w-8.h-8.rounded-full.gradient-primary {
    width: 3.9rem !important; /* Increased from 3rem to 3.9rem (1.3x bigger) */
    height: 3.9rem !important; /* Increased from 3rem to 3.9rem (1.3x bigger) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: bold !important;
    z-index: 5 !important;
    margin-right: 1.3rem !important; /* Increased margin to balance the larger icon */
    background: #f1f5f9 !important; /* Default gray background */
    transition: all 0.3s ease !important;
}

/* Make icons skinnier */
.feature-item .w-8.h-8.rounded-full.gradient-primary i {
    font-size: 1.725rem !important; /* Increased from 1.25rem to 1.625rem (1.3x bigger) */
    font-weight: 300 !important;
    color: #152c6f !important; /* Primary color for icons */
    transition: color 0.3s ease !important;
}

/* Update text padding to accommodate larger icon circle */
.feature-item p {
    padding-left: 5.2rem !important; /* Increased from 4rem to 5.2rem to align with title */
    margin-top: 0.2rem !important; /* Add some spacing between title and text */
}

.feature-item.active .w-8.h-8.rounded-full.gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
}

.feature-item.active .w-8.h-8.rounded-full.gradient-primary i {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 10000 !important;
}

.feature-item {
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent !important;
    box-shadow: none !important;
}

.feature-item.active {
    background: white !important;
    box-shadow: 0 10px 24px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 4%) !important;
    transform: translateX(5px) scale(1.02);
    z-index: 10;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.feature-item.active h3 {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-image {
    transition: all 0.5s ease;
}

.feature-image.hidden {
    display: none;
}

.feature-image.active {
    display: block;
}

/* Platform Card/Logo Transitions */
.platform-card-appear {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-card-appear.platform-card-visible {
    opacity: 1;
    transform: translateY(0);
}

.platform-logo {
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.platform-logo:hover, .platform-logo.focused {
    transform: scale(1.15);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}