Init

res/css/header-logo-anim.css

@@ -0,0 +1,59 @@
+#big-gear {
+    animation: big-gear 10s linear infinite;
+    transform-origin: center;
+    transform-box: fill-box;
+}
+
+#tr-gear {
+    animation: gear-left 2s linear infinite;
+    transform-origin: center;
+    transform-box: fill-box;
+}
+
+#br-gear {
+    animation: gear-left 2s linear infinite;
+    transform-origin: center;
+    transform-box: fill-box;
+}
+
+#tl-gear {
+    animation: gear-left 2s linear infinite;
+    transform-origin: center;
+    transform-box: fill-box;
+}
+
+#bl-gear {
+    animation: gear-left 2s linear infinite;
+    transform-origin: center;
+    transform-box: fill-box;
+}
+
+@keyframes big-gear {
+    from {
+        rotate: 0deg;
+    }
+
+    to {
+        rotate: 180deg;
+    }
+}
+
+@keyframes gear-right {
+    from {
+        rotate: 0deg;
+    }
+
+    to {
+        rotate: 180deg;
+    }
+}
+
+@keyframes gear-left {
+    from {
+        rotate: 0deg;
+    }
+
+    to {
+        rotate: -180deg;
+    }
+}

res/css/main.css

@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
+
+body {
+    background-color: #2a2a2a;
+    color: #f0f0f0;
+    font-family: 'Lora', serif;
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* Typography */
+h1, h2, h3 {
+    font-family: 'League Gothic', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: 400;
+}
+
+/* Header & Logo Animation */
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem 1rem;
+    flex-direction: column;
+    text-align: center;
+}
+
+#logo {
+    width: 100%;
+    max-width: 450px; /* Adjusted for the wider logo */
+    height: auto;
+}
+
+.company-title h1 {
+    font-size: 3rem;
+    margin: 0.5rem 0 0 0;
+    color: #ffffff;
+}
+
+.company-title p {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #a0a0a0;
+    font-family: 'Lora', serif;
+}
+
+/* Main Content & Sections */
+main {
+    padding: 2rem 1rem;
+}
+
+.sections-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.section-card {
+    background-color: #333333;
+    border-radius: 12px;
+    padding: 2.5rem;
+    text-align: center;
+    flex: 1 1 300px; /* Flex properties for responsive columns */
+    max-width: 350px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    border: 1px solid #444;
+}
+
+.section-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.section-card h2 {
+    font-size: 2.5rem;
+    margin-top: 0;
+    color: #ffffff;
+}
+
+.section-logo {
+    height: 180px;
+    width: 180px;
+    margin: 1rem auto;
+    color: #a0a0a0; /* Icon color */
+    transition: color 0.3s ease;
+}
+
+.section-card:hover .section-logo {
+    color: #ffffff;
+}
+
+.section-card p {
+    color: #c0c0c0;
+    font-size: 1rem;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    margin-top: 3rem;
+    font-size: 0.9rem;
+    color: #777;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .company-title h1 {
+        font-size: 2.5rem;
+    }
+
+    .section-card {
+        flex-basis: 100%; /* Full width on smaller screens */
+        max-width: none;
+    }
+}