* { 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; } }