diff --git a/servercss/2026-06-20_14.54.54.png b/servercss/2026-06-20_14.54.54.png
new file mode 100644
index 0000000..dcacd81
Binary files /dev/null and b/servercss/2026-06-20_14.54.54.png differ
diff --git a/servercss/2026-06-20_14.55.12.png b/servercss/2026-06-20_14.55.12.png
new file mode 100644
index 0000000..6b64f4d
Binary files /dev/null and b/servercss/2026-06-20_14.55.12.png differ
diff --git a/servercss/2026-06-20_14.55.41.png b/servercss/2026-06-20_14.55.41.png
new file mode 100644
index 0000000..4a3e51b
Binary files /dev/null and b/servercss/2026-06-20_14.55.41.png differ
diff --git a/servercss/css.css b/servercss/css.css
new file mode 100644
index 0000000..21e4ac9
--- /dev/null
+++ b/servercss/css.css
@@ -0,0 +1,128 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #ffffff;
+    color: #ffffff;
+}
+
+.showcase-container {
+    max-width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.showcase-card {
+    position: relative;
+    height: 100vh; /* Gives sections look consistent with vertical scrolling aspect ratio */
+    min-height: 450px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: flex-start;
+    padding: 4rem;
+}
+
+/* Image protection overlay for readability */
+.showcase-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.card-content {
+    position: relative;
+    z-index: 2;
+    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
+}
+
+/* --- Alignment Switches --- */
+.text-right {
+    justify-content: flex-end;
+    text-align: right;
+}
+
+.text-left {
+    justify-content: flex-start;
+    text-align: left;
+}
+
+/* --- Image Assignments --- */
+/* --- Corrected Image Assignments --- */
+.bg-inet-server   { background-image: url('2026-06-20_14.33.12.png'); }
+.bg-inetia        { background-image: url('2026-06-20_14.53.31.png'); }
+.bg-britannica    { background-image: url('2026-06-20_14.54.00.png'); }
+.bg-desertia      { background-image: url('2026-06-20_14.54.16.png'); }
+.bg-north-itlasia { background-image: url('2026-06-20_14.54.30.png'); }
+.bg-south-itlasia { background-image: url('2026-06-20_14.54.54.png'); }
+.bg-cittia        { background-image: url('2026-06-20_14.55.12.png'); }
+.bg-stevefield    { background-image: url('2026-06-20_14.55.41.png'); }
+/* --- Typography & Specific Colors --- */
+h1, h2 {
+    font-size: 2.8rem;
+    font-weight: 600;
+    margin-bottom: 0.4rem;
+}
+
+p {
+    font-size: 1.6rem;
+    font-weight: 300;
+}
+
+/* Color definitions perfectly matching layout elements */
+.text-white     { color: #ffffff; }
+.text-red       { color: #ff0000 ; }
+.text-green     { color: #00ff00; }
+.text-yellow    { color: #f1c40f; }
+.text-light-red { color: #ff4d4d; }
+.text-teal      { color: #1abc9c; }
+.text-blue   { color: #0000ff; }    
+/* --- Footer / CTA Styles --- */
+.footer-cta {
+    background-color: #ffffff;
+    text-align: center;
+    padding: 5rem 2rem;
+}
+
+.text-explore {
+    color: #000000;
+    font-size: 1.3rem;
+    font-weight: 400;
+    margin-bottom: 0.6rem;
+}
+
+.text-apply {
+    color: #000000;
+    font-size: 1.3rem;
+    font-weight: 400;
+}
+
+/* --- Mobile Responsiveness --- */
+@media (max-width: 768px) {
+    .showcase-card {
+        height: 55vh;
+        padding: 2rem;
+        text-align: center !important;
+        justify-content: center !important;
+        align-items: center;
+    }
+
+    h1, h2 {
+        font-size: 2.2rem;
+    }
+
+    p {
+        font-size: 1.3rem;
+    }
+}
\ No newline at end of file