fix: remove cards background of skill, achievement and education section in light mode

src/components/EducationSection.module.css

@@ -7,7 +7,7 @@
 
 .card {
   width: 1320px;
-  background-color: var(--bg-surface);
+  background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   padding: 24px 32px;
@@ -83,3 +83,7 @@
   line-height: var(--line-height-body-default);
   color: var(--text-secondary);
 }
+
+[data-theme="dark"] .card {
+  background-color: var(--bg-surface);
+}

src/components/MilestonesSection.module.css

@@ -13,7 +13,7 @@
 
 .certCard {
   width: 1320px;
-  background-color: var(--bg-surface);
+  background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   padding: 24px 32px;
@@ -113,3 +113,7 @@
 .viewCertLink:hover {
   gap: 10px;
 }
+
+[data-theme="dark"] .certCard {
+  background-color: var(--bg-surface);
+}

src/components/SkillsSection.module.css

@@ -7,7 +7,7 @@
 
 .mainCard {
   width: 1320px;
-  background-color: var(--bg-surface);
+  background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   padding: 36px 40px;
@@ -109,7 +109,7 @@
   justify-content: center;
   width: 132px;
   height: 136px;
-  background-color: var(--bg-raised);
+  background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   padding: 16px 8px;
@@ -160,3 +160,11 @@
 .filterButton {
   min-width: 180px;
 }
+
+[data-theme="dark"] .mainCard {
+  background-color: var(--bg-surface);
+}
+
+[data-theme="dark"] .toolTile {
+  background-color: var(--bg-raised);
+}