CSS cleanup and decrease padding on hero and section a bit

static/css/style.css

@@ -157,7 +157,7 @@ p {
 
 /* Hero Section */
 .hero {
-    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/TuxAinrom.webp');
+    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/images/TuxAinrom.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -226,6 +226,98 @@ p {
     }
 }
 
+/* Universal Card Base Class */
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid transparent;
+    display: flex;
+    flex-direction: column;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
+}
+
+.card h3 {
+    color: #047857;
+    margin-bottom: 1rem;
+}
+
+/* Card Variants */
+.card--benefit {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    text-align: center;
+}
+
+.card--benefit:hover {
+    border-color: #34d399;
+}
+
+.card--service {
+    background: #f0fdf4;
+    border-left: 4px solid #059669;
+    border-radius: 12px;
+}
+
+.card--service:hover {
+    transform: translateY(-3px);
+}
+
+.card--distro {
+    background: white;
+    border-radius: 16px;
+    min-height: 400px;
+    position: relative;
+    overflow: hidden;
+}
+
+.card--distro::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #059669, #10b981);
+}
+
+.card--distro:hover {
+    transform: translateY(-8px);
+    border-color: #a7f3d0;
+}
+
+.card--cta {
+    text-align: center;
+    border: 2px solid #bbf7d0;
+}
+
+/* Card Content Components */
+.card__icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.card--benefit .card__icon {
+    font-size: 3rem;
+}
+
+.card--cta .card__icon {
+    font-size: 3rem;
+}
+
+/* Clickable Card Utility */
+.card-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
 /* Buttons */
 .btn {
     padding: 12px 24px;
@@ -269,9 +361,61 @@ p {
     font-size: 1.1rem;
 }
 
-/* Benefits Section */
+/* Universal Section Classes */
+.section {
+    padding: 3.5rem 0;
+}
+
+.section--light {
+    background: #fff;
+}
+
+.section--light-green {
+    background: #f9fafb;
+}
+
+.section--hero {
+    padding: 4rem 0;
+    min-height: 80vh;
+}
+
+/* Section Headers */
+.section__title {
+    text-align: center;
+    margin-bottom: 3rem;
+    color: #047857;
+}
+
+.section__subtitle {
+    text-align: center;
+    font-size: 1.1rem;
+    color: #6b7280;
+    margin-bottom: 4rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Universal Grid Classes */
+.grid {
+    display: grid;
+    gap: 2rem;
+}
+
+.grid--2-col {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.grid--3-col {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.grid--responsive-cards {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+/* Legacy Section Classes - Cleaned Up */
 .benefits {
-    padding: 5rem 0;
     background: #fff;
 }
 
@@ -287,34 +431,8 @@ p {
     gap: 2rem;
 }
 
-.benefit-card {
-    background: #f0fdf4;
-    padding: 2rem;
-    border-radius: 12px;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    border: 1px solid #bbf7d0;
-}
-
-.benefit-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
-    border-color: #34d399;
-}
-
-.benefit-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-}
-
-.benefit-card h3 {
-    color: #047857;
-    margin-bottom: 1rem;
-}
-
 /* Windows EOL Section */
 .windows-eol {
-    padding: 5rem 0;
     background: #fffbeb;
     position: relative;
     overflow: hidden;
@@ -430,7 +548,6 @@ p {
 
 /* Distributions Section */
 .distros {
-    padding: 5rem 0;
     background: #f9fafb;
 }
 
@@ -458,36 +575,6 @@ p {
     align-items: stretch;
 }
 
-.distro-card {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
-    border: 2px solid transparent;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 400px;
-}
-
-.distro-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #059669, #10b981);
-}
-
-.distro-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
-    border-color: #a7f3d0;
-}
-
 .distro-header {
     display: flex;
     align-items: flex-start;
@@ -589,7 +676,6 @@ p {
 
 /* Services Section */
 .services {
-    padding: 5rem 0;
     background: #fff;
 }
 
@@ -605,26 +691,8 @@ p {
     gap: 2rem;
 }
 
-.service-card {
-    background: #f0fdf4;
-    padding: 2rem;
-    border-radius: 12px;
-    border-left: 4px solid #059669;
-    transition: transform 0.3s ease;
-}
-
-.service-card:hover {
-    transform: translateY(-3px);
-}
-
-.service-card h3 {
-    color: #047857;
-    margin-bottom: 1rem;
-}
-
 /* Linux Features Section */
 .linux-features {
-    padding: 5rem 0;
     background: #f9fafb;
 }
 
@@ -726,7 +794,6 @@ p {
 
 /* CTA Section */
 .cta {
-    padding: 5rem 0;
     background: linear-gradient(135deg, #059669 0%, #047857 100%);
     color: white;
     text-align: center;
@@ -744,12 +811,34 @@ p {
 }
 
 /* Contact Page Styles */
-.contact-hero {
+/* Deprecated: contact-hero replaced by .page-hero */
+
+/* Generic page hero reused across pages */
+.page-hero {
     background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
-    padding: 3rem 0;
+    padding: 2.25rem 0;
     text-align: center;
 }
 
+/* Match heading color for reusable hero */
+.page-hero h1 {
+    color: #047857;
+    margin-bottom: 1rem;
+}
+
+/* Keep heading links visually identical to headings */
+h2 a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Reusable link wrapper to make whole cards clickable */
+.card-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
 .contact-hero h1 {
     color: #047857;
     margin-bottom: 1rem;
@@ -882,7 +971,6 @@ p {
 }
 
 .contact-cta {
-    padding: 4rem 0;
     background: #f0fdf4;
 }
 
@@ -898,24 +986,6 @@ p {
     gap: 2rem;
 }
 
-.cta-benefit {
-    text-align: center;
-    padding: 2rem;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.cta-benefit .benefit-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-}
-
-.cta-benefit h3 {
-    color: #047857;
-    margin-bottom: 1rem;
-}
-
 /* Footer */
 footer {
     background: #f9fafb;
@@ -957,8 +1027,8 @@ footer {
 }
 
 /* About page */
-.about {
-    padding: 5rem 0;
+.section {
+    padding: 3.5rem 0;
 }
 
 .about-grid {
@@ -1067,9 +1137,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .benefit-card {
-        padding: 1.5rem;
-    }
+
     
     .eol-content {
         grid-template-columns: 1fr;
@@ -1081,9 +1149,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .distro-card {
-        padding: 1.5rem;
-    }
+
     
     .contact-grid {
         grid-template-columns: 1fr;
@@ -1112,8 +1178,11 @@ footer {
     }
     
     /* Section padding adjustments */
-    .benefits, .windows-eol, .distros, .services, .linux-features, .cta {
-        padding: 3rem 0;
+    .page-hero {
+        padding: 1.75rem 0;
+    }
+    .section {
+        padding: 2.25rem 0;
     }
     
     /* Typography adjustments */
@@ -1159,12 +1228,12 @@ footer {
     }
     
     /* Card padding adjustments */
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
         padding: 1.25rem;
     }
     
     /* Icon size adjustments */
-    .benefit-icon, .cta-benefit .benefit-icon {
+    .card__icon {
         font-size: 2.5rem;
     }
     
@@ -1196,8 +1265,11 @@ footer {
     }
     
     /* Section padding for very small screens */
-    .benefits, .windows-eol, .distros, .services, .linux-features, .cta {
-        padding: 2rem 0;
+    .page-hero {
+        padding: 1.5rem 0;
+    }
+    .section {
+        padding: 1.75rem 0;
     }
     
     /* Typography for very small screens */
@@ -1277,7 +1349,7 @@ footer {
         font-size: 1rem;
     }
     
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
         padding: 1rem;
     }
     
@@ -1299,9 +1371,7 @@ footer {
     }
 }
 
-.benefit-card,
-.service-card,
-.cta-benefit {
+.card {
     animation: fadeInUp 0.6s ease-out;
 }