:root {
     --groups-primary: #73aefa;
     --groups-secondary: #7c3aed;
     --groups-bg-light: #f8f9fa;
     --groups-text-dark: #111827;
     --groups-text-light: #4b5563;
     --groups-border: #e5e7eb;
 }
 
 /* About Section Paragraph Styling */
.section.container .lead {
    font-size: 1rem;
    line-height: 1.7;
}

.section.container .lead + p {
    margin-top: 1rem;
}

 .bg-light-alt {
     background-color: var(--groups-bg-light);
 }
 
 /* Highlight Cards Section */
 .highlight-card {
     background-color: #fff;
     border-radius: 15px;
     padding: 30px;
     text-align: center;
     border: 1px solid #e5e7eb;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
    background-color: #f7faff;
 }
 
 .highlight-icon {
    font-size: 2.5rem;
    color: var(--eduskill-primary);
    margin: 0 auto 15px auto;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: var(--eduskill-soft);
    border-radius: 50%;
 }
 
 .highlight-icon i {
    font-size: 2.5rem; /* Increased icon size */
    color: var(--groups-primary);
 }
 
 .highlight-icon img {
     width: 36px;
     height: 36px;
 }
 
 .highlight-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--groups-text-dark) !important;
    margin-bottom: 0.5rem;
 }
 
 .highlight-card p {
     color: var(--groups-text-light);
     font-size: 1rem;
 }
 
 /* Core Functionalities - Grid Layout */
 .functionality-card {
     background-color: #fff;
     border-radius: 1rem;
     padding: 1.5rem;
     text-align: center;
     border: 1px solid var(--groups-border);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .functionality-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
 .functionality-card img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     border-radius: 0.75rem;
     margin-bottom: 1.5rem;
     cursor: zoom-in;
 }
 
 .functionality-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--groups-text-dark) !important;
    margin-bottom: 1rem;
 }
 
 .functionality-card p {
     color: var(--groups-text-light);
     font-size: 1rem;
 }
 
 /* Adaptive Insights Section */
 .insight-card {
     background-color: #fff;
     border-radius: 1rem;
     padding: 2rem;
     border: 1px solid var(--groups-border);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .insight-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0,0,0,0.08);
 }
 
 .insight-header {
     display: inline-block;
     padding: 0.25rem 0.75rem;
     border-radius: 999px;
     background-color: #dbeafe;
     color: #1e40af;
     font-size: 0.875rem;
     font-weight: 500;
     margin-bottom: 1rem;
 }
 
 .insight-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--groups-text-dark) !important;
    margin-bottom: 0.5rem;
 }
 
 .insight-card p {
     color: var(--groups-text-light);
 }
 
 /* Final CTA Section */
 .final-cta-section {
     background-color: #f0f8ff;
 }
 
 .final-cta-section h2 {
    color: var(--groups-text-dark) !important;
 }

.page-groups .page-hero .caption h1 {
    font-size: 2.5rem !important; /* Adjust font size to prevent it from being too large */
}