new

assets/scss/why-amperion.scss

@@ -0,0 +1,140 @@
+/* 1) Container, z. B. 80% Seitenbreite */
+.my-container {
+    width: 80%;
+    margin: 0 auto;
+    padding: 40px 0; /* Abstand oben & unten */
+  }
+  
+  /* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */
+  .why-title {
+    font-size: 2rem;
+    margin-bottom: 10px;
+  }
+  
+  .why-subtitle {
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 40px;
+  }
+  
+  /* 3) Warum-Blocks (linke + rechte Spalte) */
+  .why-block p {
+    text-align: justify;
+    margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */
+  }
+  
+  .why-block h4 {
+    margin: 100px 0;
+    font-weight: bold;
+  }
+  
+  /* 4) Icon + Logo-Größen anpassen */
+  .why-icon {
+    width: 50px; /* Iconbreite */
+    height: auto;
+
+    margin: 200px;
+  }
+  
+  .why-logo {
+    max-width: 500px; /* Logo in der Mitte */
+    height: auto;
+    margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */
+
+  }
+  
+  /* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier: 
+  .why-title, .why-subtitle, .why-block, .why-logo {
+    text-align: center;
+  } 
+  */
+  
+
+
+.section-title1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px; /* Abstand zwischen Icon und Titel */
+}
+
+
+
+.why-title1 {
+  margin: 0; /* Entfernt zusätzliche Ränder */
+}
+
+.icon-heading {
+  display: flex;
+  align-items: center;
+  
+}
+
+.col-icon {
+  width: 10px;
+  flex: 0 0 10px;
+  max-width: 10px;
+}
+
+.col-heading {
+  width: 100px; /* Beispiel: 100px für die Überschrift */
+  flex: 0 0 100px;
+  max-width: 100px;
+  
+  white-space: nowrap; /* verhindert Zeilenumbruch */
+
+}
+
+
+.why-icon1 {
+  width: 10px; /* Breite des Icons */
+  height: auto; /* Höhe automatisch anpassen */
+}
+
+.heading-text {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.why-block h4 {
+  margin: 0; /* Entfernt zusätzliche Ränder */
+}
+
+.section-title1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px; /* Abstand zwischen Icon und Titel */
+}
+
+.title-icon1 {
+  width: 30px; /* Breite des Icons */
+  height: auto; /* Höhe automatisch anpassen */
+}
+
+.why-title1 {
+  margin: 0; /* Entfernt zusätzliche Ränder */
+  font-size: 2rem;
+}
+
+.col-md-4.text-center .why-logo {
+  margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */
+}
+
+
+/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */
+.why-amperion {
+  margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */
+}
+
+/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */
+.about {
+  margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */
+}
+
+.col-fixed {
+  width: 10px;
+  flex: 0 0 10px;
+  max-width: 10px;
+}
+