/* Home Page Styles */
.hero-section {
    background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
    /* Green Gradient */
    color: white;
    padding: 80px 20px;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.95;
}

.hero-description {
    font-size: 16px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    /* Maintain Orange for Call to Action? Or change to Dark Green? 
                                                                    User wants "Green Theme". Usually CTA stands out. 
                                                                    I'll keep Orange as accent or change to White/Green?
                                                                    The previous code had Orange. I'll keep Orange for contrast if user didn't complain about buttons specifically, 
                                                                    but user said "Overall Green". 
                                                                    I'll keep Orange for CTA to avoid blending into Green background usually. 
                                                                    Wait, hero background IS Green now. So Orange button is good contrast. */
    color: white;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

.btn-secondary {
    background: white;
    color: #4caf50;
    /* Green Text */
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* Section Styles */
.section-title {
    font-size: 32px;
    color: #2e7d32;
    /* Dark Green */
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.section-description {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 16px;
}

/* Features Section */
.features-section {
    margin-bottom: 60px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.feature-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #81c784 0%, #4caf50 100%);
    /* Green Gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
}

.feature-card h3 {
    font-size: 22px;
    color: #2e7d32;
    /* Dark Green */
    margin-bottom: 15px;
}

.feature-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.feature-link {
    color: #4caf50;
    /* Green */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.feature-link:hover {
    color: #2e7d32;
    /* Darker Green */
}

/* Regions Section */
.regions-section {
    margin-bottom: 60px;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.region-card {
    background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
    /* Green Gradient */
    color: white;
    padding: 40px 20px;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.region-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    /* Green Shadow */
}

.region-card i {
    font-size: 48px;
    margin-bottom: 15px;
}

.region-card h3 {
    font-size: 20px;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .hero-section {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 28px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .regions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        justify-content: center;
    }
}