Rename style.css to styles.css

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

styles.css

@@ -0,0 +1,180 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+.logo-link {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 1;
+}
+
+.logo {
+    width: 50px;
+    height: auto;
+}
+
+.hero-section {
+    height: 100vh;
+    position: relative;
+}
+
+.hero-carousel .hero-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.hero-carousel .hero-slide.active {
+    opacity: 1;
+}
+
+.hero-carousel img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.hero-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: white;
+}
+
+.hero-content h1 {
+    font-size: 32px;
+}
+
+.hero-content p {
+    font-size: 16px;
+}
+
+.buttons {
+    display: flex;
+    gap: 8px;
+    flex-direction: column;
+}
+
+button {
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.carousel {
+    position: relative;
+    height: 250px;
+}
+
+.slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.slide.active {
+    opacity: 1;
+}
+
+.slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.caption {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: white;
+}
+
+.caption h2 {
+    font-size: 24px;
+}
+
+.offers {
+    padding: 20px;
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.offer-card {
+    background: #f4f4f4;
+    padding: 10px;
+    border-radius: 4px;
+}
+
+.offer-images {
+    display: flex;
+    gap: 5px;
+}
+
+.offer-images img {
+    width: 33%;
+    height: auto;
+}
+
+.fsd-carousel, .solar-carousel {
+    padding: 20px;
+}
+
+.charging iframe {
+    width: 100%;
+    height: 200px;
+}
+
+footer {
+    padding: 20px;
+    text-align: center;
+    font-size: 12px;
+    color: gray;
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+    .buttons {
+        flex-direction: row;
+    }
+
+    .offers {
+        flex-direction: row;
+    }
+
+    .carousel {
+        height: 400px;
+    }
+
+    .caption h2 {
+        font-size: 32px;
+    }
+
+    .hero-content h1 {
+        font-size: 48px;
+    }
+
+    .charging iframe {
+        height: 300px;
+    }
+}