/* Symmetry Fixes - Better Grid Layouts */

/* Fix features grid to be 2x3 or 3x2 instead of 3+3 */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* For 6 items, make it 2 rows of 3 */
.features-grid .feature-card:nth-child(n+4) {
    /* Second row items */
}

/* Footer grid - 4 columns or 2x2 */
.footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3rem !important;
    max-width: 1200px !important;
    margin: 0 auto 3rem !important;
}

/* Stats grid - 4 columns for better symmetry */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* FAQ grid - 2x2 for 4 items */
.faq-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Values grid on about page */
.values-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Tablet responsive - 2 columns */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile responsive - 1 column */
@media (max-width: 640px) {
    .features-grid,
    .footer-grid,
    .stats-grid,
    .faq-grid,
    .values-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Add visual balance to feature cards */
.feature-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
}

.feature-card p {
    flex-grow: 1;
}

/* Ensure all stat items are same height */
.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
}

/* Balance the join buttons */
.join-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.join-buttons .btn {
    min-width: 200px;
}

/* Tech badges - ensure even distribution */
.tech-badges {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    max-width: 800px !important;
    margin: 2rem auto 0 !important;
}

@media (max-width: 768px) {
    .tech-badges {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Process steps - ensure even layout */
.process-steps {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr !important;
    }
}