new

assets/scss (2)/style.scss

@@ -0,0 +1,96 @@
+// Color Variables
+{{ with site.Params.variables }}
+$color-primary: {{.color_primary | default "#777"}};
+$color-secondary: {{.color_secondary | default "#0AA8A7"}};
+$text-color: {{.text_color | default "#004753"}};
+$text-dark: {{.text_dark | default "#004753"}};
+$text-light: {{.text_light | default "#999"}};
+$body-bg: {{.body_color | default "#fff"}};
+$border-color: {{.border_color | default "#ECECEC"}};
+$black: {{.black | default "#777"}};
+$white: {{.white | default "#fff"}};
+$light: {{.light | default "#EDF6F5"}};
+
+
+// Font Variables
+$font-size: {{.font_size | default "16px"}};
+$font-scale: {{.font_scale | default "1.25"}};
+$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
+$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
+$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
+{{ end }}
+
+$h1: 80px;
+$h1-md: 34px;
+$h2: 28px;
+$h2-md: 26px;
+$h2-sm: 22px;
+$h3: 20px;
+$h4: 16px;
+
+@import 'mixins.scss';
+
+@import 'media-query.scss';
+
+@import 'typography.scss';
+
+@import 'common.scss';
+
+@import 'main.scss';
+
+@import 'templates/_header.scss';
+
+@import 'templates/_navigation.scss';
+
+@import 'templates/_slider.scss';
+
+@import 'templates/_call-to-action.scss';
+
+@import 'templates/_service.scss';
+
+@import 'templates/_feature.scss';
+
+@import 'templates/_portfolio.scss';
+
+@import 'templates/_testimonial.scss';
+
+@import 'templates/_contact.scss';
+
+@import 'templates/_pricing.scss';
+
+@import 'templates/_products.scss';
+
+@import 'templates/_single-product.scss';
+
+@import 'templates/_clients.scss';
+
+@import 'templates/_about.scss';
+
+@import 'templates/_instagram.scss';
+
+@import 'templates/_user-dashboard.scss';
+
+@import 'templates/_single-post.scss';
+
+@import 'templates/_backgrounds.scss';
+
+@import 'templates/_blog-sidebar.scss';
+
+@import 'templates/_blog.scss';
+
+@import 'templates/_coming-soon.scss';
+
+@import 'templates/_shopping.scss';
+
+@import 'templates/_404.scss';
+
+@import 'templates/_message-sent.scss';
+
+@import 'templates/_footer.scss';
+
+@import 'custom.scss';
+
+
+html {
+    scroll-behavior: smooth;
+  }

assets/scss/_common.scss

@@ -0,0 +1,788 @@
+ul {
+  margin: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+iframe {
+  border: 0;
+}
+
+img{
+  max-width: 100%;
+  height: auto;
+}
+
+a,
+a:focus,
+a:hover {
+  text-decoration: none;
+  outline: 0;
+  color: $color-primary;
+}
+
+blockquote {
+  font-size: 18px;
+  border-color: $color-primary;
+  padding: 20px 40px;
+  text-align: left;
+  color: darken( $light, 50.98);
+}
+
+.navbar-toggle .icon-bar {
+  background: $color-primary;
+}
+
+input[type="email"],
+input[type="password"],
+input[type="text"],
+input[type="tel"] {
+  box-shadow: none;
+  height: 45px;
+  outline: none;
+  font-size: 14px;
+
+  &:focus {
+    box-shadow: none;
+    border: 1px solid $color-primary;
+  }
+}
+
+
+.form-control {
+  box-shadow: none;
+  border-radius: 0;
+
+  &:focus {
+    box-shadow: none;
+    border: 1px solid $color-primary;
+  }
+}
+
+
+.slick-slide {
+  outline: 0
+}
+
+
+// Button Style
+
+.btn-main {
+  background: $color-primary;
+  color: $white;
+  display: inline-block;
+  font-size: 12px;
+  letter-spacing: 1px;
+  padding: 20px 20px;
+  
+  text-transform: uppercase;
+  border-radius: 10px;
+  text-align: center;
+  @include transition (all, 0.2s, ease);
+
+  &.btn-icon {
+    i {
+      font-size: 16px;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+  }
+
+  &:hover {
+    background: darken($color-primary, 100%);
+    color: $white;
+  }
+}
+
+
+.btn-solid-border {
+  border: 2px solid $white;
+  background: transparent;
+  color: $white;
+
+  &:hover {
+    background: whitesmoke;
+  }
+}
+
+
+.btn-transparent {
+  @extend .btn-main;
+  background: transparent;
+  padding: 0;
+  color: $color-primary;
+
+  &:hover {
+    background: transparent;
+    color: $color-primary;
+  }
+}
+
+.btn-large {
+  padding: 20px 45px;
+
+  &.btn-icon {
+    i {
+      font-size: 16px;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+  }
+}
+
+.btn-small {
+  @extend .btn-main;
+  padding: 10px 25px;
+  font-size: 12px;
+}
+
+.btn-round {
+  border-radius: 2px;
+}
+
+.btn-round-full {
+  border-radius: 50px;
+}
+
+
+.btn.active:focus,
+.btn:active:focus,
+.btn:focus {
+  outline: 0;
+}
+
+
+
+
+
+
+
+
+
+
+.mt-10 {
+  margin-top: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-30 {
+  margin-top: 30px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.mt-50 {
+  margin-top: 50px;
+}
+
+.btn:focus {
+  color: darken( $light, 10.9);
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.margin-0 {
+  margin: 0 !important;
+}
+
+
+/* preloader */
+
+.preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $white;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bg-shadow {
+  background-color: $white;
+  box-shadow: 0 16px 24px rgba(0, 0, 0, .08);
+  padding: 20px;
+}
+
+.bg-gray {
+  background: $light;
+}
+
+.bg-primary {
+  background: $color-primary;
+}
+
+.bg-primary-dark {
+  background: darken($color-primary, 10%);
+}
+
+.bg-primary-darker {
+  background: darken($color-primary, 20%);
+
+}
+
+.bg-dark {
+  background: #202122;
+}
+
+
+.section {
+  padding: 10px 0;
+
+  @include tablet {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+
+.section-sm {
+  padding: 70px 0;
+}
+
+.title {
+  padding: 20px 0 30px;
+
+  h2 {
+    font-size: 18px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+}
+
+.section-title {
+  margin-bottom: 20px;
+
+  @include tablet {
+    margin-bottom: 10px;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0px;
+    padding: 10px 0px;
+    font-size: 3em; /* Standard Schriftgröße für h2 */
+
+    @media (max-width: 768px) {
+      font-size: 1.5em; /* Kleinere Schriftgröße für mobile Geräte */
+    }
+
+    @media (max-width: 480px) {
+      font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
+    }
+  }
+
+  p {
+    font-style: italic;
+    color: darken($light, 57.64);
+    font-family: $font-secondary;
+    font-size: 1em; /* Standard Schriftgröße für p */
+
+    @media (max-width: 768px) {
+      font-size: 0.9em; /* Kleinere Schriftgröße für mobile Geräte */
+    }
+
+    @media (max-width: 480px) {
+      font-size: 0.8em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
+    }
+  }
+}
+
+
+
+.section-subtitle {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 30px;
+
+  @include mobile-xs {
+    font-size: 22px;
+  }
+
+  @include mobile {
+    font-size: 20px;
+  }
+}
+
+
+.page-title {
+  height: auto; /* Höhe basierend auf Inhalt */
+  padding: 85px 0;
+  @extend .overly;
+
+  .block {
+    text-align: center;
+
+    h1 {
+      color: $white;
+      font-weight: 200;
+      letter-spacing: 0.5em;
+      margin-top: 20;
+      margin-bottom: 10;
+      text-transform: capitalize;
+    }
+
+    p {
+      color: $white;
+    }
+  }
+}
+
+
+.heading {
+  padding-bottom: 60px;
+  text-align: center;
+
+  h2 {
+    color: $black;
+    font-size: 30px;
+    line-height: 40px;
+    font-weight: 400;
+  }
+
+  p {
+    font-size: 18px;
+    line-height: 40px;
+    color: lighten( $black, 16.078);
+    font-weight: 300;
+  }
+}
+
+
+
+
+
+
+
+
+
+.page-wrapper {
+  padding: 70px 0;
+
+  @include tablet {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+
+// Social Media Icons
+.social-media-icons {
+  ul {
+    li {
+      display: inline-block;
+
+      a {
+        font-size: 18px;
+        color: lighten( $black, 20 );
+        display: inline-block;
+        padding: 7px 12px;
+        color: $white;
+
+      }
+
+      .twitter {
+        background: #00aced;
+      }
+
+      .facebook {
+        background: #3b5998;
+        padding: 7px 18px;
+      }
+
+      .googleplus {
+        background: #dd4b39;
+      }
+
+      .dribbble {
+        background: #ea4c89;
+      }
+
+      .instagram {
+        background: #bc2a8d;
+      }
+    }
+  }
+}
+
+
+
+.dropdown-slide {
+  position: static;
+
+  .open>a,
+  .open>a:focus,
+  .open>a:hover {
+    background: transparent;
+  }
+
+  &.full-width {
+    .dropdown-menu {
+      left: 0 !important;
+      right: 0 !important;
+    }
+  }
+
+  &:hover .dropdown-menu {
+    display: none;
+    opacity: 1;
+    display: block;
+    transform: translate(0px, 0px);
+    opacity: 1;
+    visibility: visible;
+    color: darken( $light, 50.98);
+    transform: translateY(0px);
+  }
+
+  .dropdown-menu {
+    border-radius: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    padding: 15px;
+    border: 1px solid #ebebeb;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    position: absolute;
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(30px);
+    transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
+    @include mobile {
+      transform: none;
+    }
+  }
+}
+
+
+
+
+.commonSelect {
+  margin-left: 10px;
+  padding-right: 6px;
+  position: relative;
+
+  &:before {
+    content: '\f3d0';
+    font-family: $font-icon;
+    position: absolute;
+    right: -4px;
+    top: 4px;
+    font-size: 10px;
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    height: auto;
+    color: lighten( $black, 33.3 );
+
+    &:focus {
+      box-shadow: none;
+      border: none;
+    }
+  }
+}
+
+.tabCommon {
+  .nav-tabs {
+    border-bottom: 0;
+    margin-bottom: 10px;
+
+    li {
+      margin-right: 5px;
+    }
+
+    li.active a {
+      background-color: $color-primary;
+      border: 1px solid $color-primary;
+      color: $white;
+    }
+
+    a {
+      border-radius: 0;
+      background: $light;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: $color-primary;
+        color: $white;
+      }
+    }
+  }
+
+  .tab-content {
+    padding: 20px;
+    border: 1px solid $border-color;
+  }
+}
+
+
+.commonAccordion {
+  .panel {
+    border-radius: 0;
+    box-shadow: none;
+
+    .panel-heading {
+      background: transparent;
+      padding: 0;
+    }
+
+    .panel-title {
+      position: relative;
+
+      a {
+        display: block;
+        font-size: 14px;
+        text-transform: uppercase;
+        padding: 10px 10px;
+      }
+
+      a:before {
+        color: lighten( $black, 33.3 );
+        content: "\f209";
+        position: absolute;
+        right: 25px;
+        font-family: $font-icon;
+      }
+
+      a.collapsed:before {
+        content: "\f217";
+      }
+    }
+  }
+}
+
+.commonAccordion-2 {
+  @extend .commonAccordion;
+}
+
+
+.list-circle {
+  padding-left: 20px;
+
+  li {
+    list-style-type: circle;
+  }
+}
+
+
+.play-icon {
+  border: 1px solid $border-color;
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  border-radius: 50px;
+  font-size: 30px;
+
+  i {
+    line-height: 60px;
+  }
+}
+
+
+.alert-common {
+  border-radius: 0;
+  border-width: 2px;
+
+  i {
+    margin: 0 5px;
+    font-size: 16px;
+  }
+}
+
+.alert-solid {
+  background: transparent;
+  color: $color-primary;
+}
+
+.buttonPart {
+  li {
+    @include mobile {
+      margin-bottom: 8px;
+    }
+
+    @include tablet {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+
+
+.overly {
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(42, 68, 71, 0.5); /* Helleres Overlay */
+    opacity: 0.3; /* Weniger Opazität */
+  }
+}
+
+
+.owl-dots .owl-dot.active span,
+.owl-theme .owl-dots .owl-dot:hover span {
+  background: $color-primary !important;
+}
+
+
+
+#success,
+#error {
+  display: none;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  @include desktop {
+    position: static;
+  }
+}
+
+
+span.cloaked-e-mail:before {
+  content: attr(data-domain) "\0040" attr(data-user);
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+
+@media (min-width: 992px) {
+  .row .no-float {
+      display: table-cell;
+      float: none;
+  }
+}
+/* copy from here */
+.scrolldown {
+  --color: white;
+  --sizeX: 30px;
+  --sizeY: 50px;
+  position: relative;
+  width: var(--sizeX);
+  height: var(--sizeY);
+  margin-left: calc(50% - var(--sizeX) / 2); /* Korrigiert für Zentrierung */
+  margin-top: 100px;
+  border: calc(var(--sizeX) / 10) solid var(--color);
+  border-radius: 50px;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+}
+
+.scrolldown::before {
+  content: "";
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background-color: var(--color);
+  border-radius: 100%;
+  animation: scrolldown-anim 2s infinite;
+  box-sizing: border-box;
+  box-shadow: 0px -5px 3px 1px #ffffff66;
+}
+
+@keyframes scrolldown-anim {
+  0% {
+    opacity: 0;
+    height: 6px;
+  }
+  40% {
+    opacity: 1;
+    height: 10px;
+  }
+  80% {
+    transform: translate(0, 20px);
+    height: 10px;
+    opacity: 0;
+  }
+  100% {
+    height: 3px;
+    opacity: 0;
+  }
+}
+
+.chevrons {
+  padding: 6px 0 0 0;
+  margin-left: -3px; /* Überprüfen, ob dies benötigt wird */
+  margin-top: 48px;
+  width: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.chevrondown {
+  margin-top: -6px;
+  position: relative;
+  border: solid var(--color);
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 0; /* Stellt sicher, dass kein zusätzliches Padding hinzugefügt wird */
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+}
+
+.chevrondown:nth-child(odd) {
+  animation: pulse 500ms ease infinite alternate;
+}
+
+.chevrondown:nth-child(even) {
+  animation: pulse 500ms ease infinite alternate 250ms;
+}
+
+@keyframes pulse {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+/*copy until here */
+
+.logo-up {
+  margin-top: -50px; /* Adjust the value as needed */
+}
+
+
+.section-title1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px; /* Abstand zwischen Icon und Titel */
+}
+
+.title-icon1 {
+  width: 10px; /* Breite des Icons */
+  height: 10px; /* Höhe automatisch anpassen */
+}
+
+.why-title1 {
+  margin: 0; /* Entfernt zusätzliche Ränder */
+}

assets/scss/_main.scss

@@ -0,0 +1,78 @@
+#wrapper-work {
+  overflow: hidden;
+  padding-top: 100px;
+
+  ul {
+    li {
+      width: 50%;
+      float: left;
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .items-text {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        color: $white;
+        background: rgba(0, 0, 0, 0.60);
+        padding-left: 44px;
+        padding-top: 140px;
+
+        h2 {
+          padding-bottom: 28px;
+          padding-top: 75px;
+          position: relative;
+
+          &:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 75px;
+            height: 3px;
+            background: $white;
+          }
+        }
+
+        p {
+          padding-top: 30px;
+          font-size: 16px;
+          line-height: 27px;
+          font-weight: 300;
+          padding-right: 80px;
+        }
+      }
+    }
+  }
+}
+
+
+/*--
+  features-work Start 
+--*/
+
+#features-work {
+  padding-top: 50px;
+  padding-bottom: 75px;
+
+  .block {
+    ul {
+      li {
+        width: 19%;
+        text-align: center;
+        display: inline-block;
+        padding: 40px 0px;
+      }
+    }
+  }
+}
+
+

assets/scss/_media-query.scss

@@ -0,0 +1,26 @@
+/*=== MEDIA QUERY ===*/
+@mixin mobile-xs {
+  @media(max-width: 400px) {
+    @content;
+  }
+}
+@mixin mobile {
+  @media(max-width: 480px) {
+    @content;
+  }
+}
+@mixin tablet {
+  @media(max-width: 768px) {
+    @content;
+  }
+}
+@mixin desktop {
+  @media(max-width: 992px) {
+    @content;
+  }
+}
+@mixin large-desktop {
+  @media(max-width: 1200px) {
+    @content;
+  }
+}

assets/scss/_mixins.scss

@@ -0,0 +1,54 @@
+// Transition
+@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
+  -webkit-transition: $what $time $how;
+  -moz-transition: $what $time $how;
+  -ms-transition: $what $time $how;
+  -o-transition: $what $time $how;
+  transition: $what $time $how;
+}
+
+@mixin transition-multi($x...){
+  -webkit-transition: $x;
+  -moz-transition: $x;
+  -ms-transition: $x;
+  -o-transition: $x;
+  transition: $x;
+}
+
+// Transform
+@mixin transform($transforms) {
+  -moz-transform: $transforms;
+  -o-transform: $transforms;
+  -ms-transform: $transforms;
+  -webkit-transform: $transforms;
+  transform: $transforms;
+}
+
+// rotate
+@mixin rotate ($deg) {
+  @include transform(rotate(#{$deg}deg));
+}
+
+// scale
+@mixin scale($scale) {
+  @include transform(scale($scale));
+}
+
+// translate
+@mixin translate ($x, $y) {
+  @include transform(translate($x, $y));
+}
+
+// skew
+@mixin skew ($x, $y) {
+  @include transform(skew(#{$x}deg, #{$y}deg));
+}
+
+//transform origin
+@mixin transform-origin ($origin) {
+  moz-transform-origin: $origin;
+  -o-transform-origin: $origin;
+  -ms-transform-origin: $origin;
+  -webkit-transform-origin: $origin;
+  transform-origin: $origin;
+}

assets/scss/_typography.scss

@@ -0,0 +1,87 @@
+// Fonts
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Semibold';
+  src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+
+
+// Using Variables for Font Families
+$font-primary: 'Open Sans', sans-serif;
+$font-secondary: 'Open Sans Semibold', sans-serif;
+
+ 
+
+body {
+  line-height: 1.5;
+  font-family: $font-primary;
+  -webkit-font-smoothing: antialiased;
+
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-secondary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+}
+
+h1 {
+  font-size: $h1;
+
+  @include tablet {
+    font-size: $h1-md;
+  }
+
+  @include mobile {
+    font-size: $h2;
+  }
+
+  @include mobile-xs {
+    font-size: $h2-md;
+  }
+}
+
+h2 {
+  font-size: $h2;
+
+  @include mobile {
+    font-size: $h2-sm;
+  }
+}
+
+h3 {
+  font-size: $h3;
+}
+
+h4 {
+  font-size: $h4;
+}
+
+p {
+  color: darken( $light, 49.41);
+  font-size: $font-size;
+  font-family: $font-secondary;
+}

assets/scss/custom.scss

@@ -0,0 +1,305 @@
+// Add your custom code
+
+.title-custom {
+    color: #046e6e;
+}
+
+.text-center {
+    text-align: center;
+  }
+  
+  .text-justify {
+    text-align: justify;
+  }
+
+
+  
+
+/* Reduziert den Abstand zwischen den Sections */
+section {
+    margin-bottom: 0px; /* Anpassung nach Bedarf */
+  }
+  
+  /* Zusätzliche optionale Stile für eine bessere Darstellung */
+  #welcome.section, #service.section {
+    padding-top: 90px;  /* Anpassung nach Bedarf */
+    padding-bottom: 4px; /* Anpassung nach Bedarf */
+  }
+
+  .text-justify {
+    text-align: justify;
+  }
+  
+  .description {
+    font-size: 22px; /* Standard Schriftgröße */
+    line-height: 1.5;
+    padding-top: 90px;  /* Anpassung nach Bedarf */
+    padding-bottom: 1px; /* Anpassung nach Bedarf */
+  
+    @media (max-width: 768px) {
+      font-size: 18px; /* Kleinere Schriftgröße für Tablets */
+      padding-top: 70px;  /* Anpassung nach Bedarf */
+      padding-bottom: 1px; /* Anpassung nach Bedarf */
+    }
+  
+    @media (max-width: 480px) {
+      font-size: 16px; /* Noch kleinere Schriftgröße für Handys */
+      padding-top: 50px;  /* Anpassung nach Bedarf */
+      padding-bottom: 1px; /* Anpassung nach Bedarf */
+    }
+  }
+  
+
+  .facts .fact-item {
+    padding: 15px; /* Abstand um die Bilder */
+  }
+
+  
+
+  .facts .fact-item {
+    padding: 15px; /* Abstand um die Bilder */
+  }
+  
+  .fact-image {
+    height: 250px; /* Einheitliche Höhe für alle Bilder */
+    width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
+    object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
+    border-radius: 8px; /* Abgerundete Ecken für die Bilder */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
+  }
+  
+  .custom-background {
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+
+ 
+  
+  .service-arrow .block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .service-content {
+    flex: 1;
+  }
+  
+  .service-icon {
+    margin-right: 15px; /* Abstand nach Bedarf anpassen */
+  }
+  
+  .service-image {
+    margin-left: 15px; /* Abstand nach Bedarf anpassen */
+  }
+  
+  .service-image img {
+    max-width: 150px; /* Maximale Breite des Bildes anpassen */
+    height: auto;
+  }
+
+
+  .bg-service1 {
+    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service2 {
+    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service3 {
+    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service4 {
+    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service5 {
+    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service6 {
+    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service7 {
+    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
+  }
+  .bg-service8 {
+    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
+  }
+
+  .fixed-width {
+    width: 1200px; /* Feste Breite, die du anpassen kannst */
+    height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */
+  }
+  
+  .service-arrow .block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px; /* Optional: Padding hinzufügen */
+    border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */
+    color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */
+  }
+  
+  .service-icon {
+    margin-right: 0px; /* Abstand nach Bedarf anpassen */
+  }
+  
+  .service-content {
+    flex: 1;
+  }
+  
+  .service-image {
+    margin-left: 0px; /* Abstand nach Bedarf anpassen */
+  }
+  
+
+  
+
+
+
+  
+  .fixed-text {
+    width: 600px; /* Feste Breite für den Text */
+    margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */
+  }
+
+  .service-image img {
+    max-width: 600px; /* Maximale Breite des Bildes anpassen */
+    height: auto;
+    margin: 0; /* Entfernt zusätzliche Margins */
+    padding: 0; /* Entfernt zusätzliches Padding */
+    border: none; /* Entfernt jegliche Standardrahmen */
+    display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */
+  }
+
+  .page-title::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff; /* Weiß als Hintergrundfarbe */
+    z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+  .service-grid {
+    display: grid;
+    gap: 20px;                 /* 40px Abstand sowohl horizontal als auch vertikal */
+    grid-template-columns: repeat(3, 1fr);
+    /* => Standard: 3 Spalten für größere Bildschirme */
+  }
+  
+  @media (max-width: 992px) {
+    .service-grid {
+      grid-template-columns: repeat(2, 1fr);
+      /* => mittlere Screens: nur 2 Spalten */
+    }
+  }
+  
+  @media (max-width: 576px) {
+    .service-grid {
+      grid-template-columns: 1fr;
+      /* => kleine Screens: 1 Spalte */
+    }
+  }
+  
+  /* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
+  .service-item-fixed {
+    width: 100%;
+    height: auto;       /* Oder "auto" falls die Höhe flexibel sein soll */
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px; /* Abgerundete Ecken */
+  }
+  
+  .zoom-wrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: transform 0.3s ease;
+  }
+  
+  .service-item-fixed:hover .zoom-wrap {
+    transform: scale(1.2);
+  }
+  
+  .zoom-wrap a {
+    display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
+    text-decoration: none; /* Entfernt die Unterstreichung des Links */
+    color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */
+  }
+
+  .zoom-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  
+/* Das "dunkle Overlay" */
+.zoom-wrap .overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3); /* dunkler Schleier (30% schwarz) */
+  z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
+  pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
+}
+
+  .overlay-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 2.3em;
+    font-weight: bold;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    z-index: 2; /* Höher als das Overlay */
+  }
+  
+
+  .my-container {
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .gif-background {
+    background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */
+    background-size: cover; /* Deckt den gesamten Hintergrund ab */
+    background-position: center -220px; /* Positioniert das GIF oben in der Mitte */
+    background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */
+    position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */
+  }
+  
+  .gif-background::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */
+    pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
+  }
+  
+  .custom-image {
+  width: 100px;
+  height: auto;
+  max-width: 70%;
+}

assets/scss/modal.scss

@@ -0,0 +1,26 @@
+@mixin modal($centerWidth, $windowWidth) {
+
+    @include var(background-color, dark1);
+    @include var(color, light1);
+
+    z-index: 1001;
+    box-shadow: $cm-box-shadow-dark-md;
+
+    width: 100%;
+    max-height: 98%;
+
+    top: 50%;
+    transform: translateY(-50%);
+
+    position: fixed;
+    overflow: auto;
+
+    @media (min-width: $centerWidth) {
+        @include var(border-radius, border-radius);
+        position: relative;
+        margin: 0 auto;
+        max-width: $windowWidth;
+        height: auto;
+        width: auto;
+    }
+}

assets/scss/style.scss

@@ -0,0 +1,188 @@
+// Color Variables
+{{ with site.Params.variables }}
+$color-primary: {{.color_primary | default "#fff"}};
+$color-secondary: {{.color_secondary | default "#0AA8A7"}};
+$text-color: {{.text_color | default "#777"}};
+$text-dark: {{.text_dark | default "#222"}};
+$text-light: {{.text_light | default "#737373"}};
+$body-bg: {{.body_color | default "#fff"}};
+$border-color: {{.border_color | default "#ECECEC"}};
+$black: {{.black | default "#000"}};
+$white: {{.white | default "#fff"}};
+$light: {{.light | default "#EDF6F5"}};
+
+
+// Font Variables
+$font-size: {{.font_size | default "16px"}};
+$font-scale: {{.font_scale | default "1.25"}};
+$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
+$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
+$font-tertiary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_tertiary | default "Dosis") "+" " "}}', {{.font_tertiary_type | default "sans-serif"}};
+$font-quaternary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_quaternary | default "Edu") "+" " "}}', {{.font_quaternary_type | default "sans-serif"}};
+
+$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
+{{ end }}
+
+$h1: 80px;
+$h1-md: 34px;
+$h2: 28px;
+$h2-md: 26px;
+$h2-sm: 22px;
+$h3: 20px;
+$h4: 25px;
+
+@import 'mixins.scss';
+
+@import 'media-query.scss';
+
+@import 'typography.scss';
+
+@import 'common.scss';
+
+@import 'main.scss';
+
+@import 'templates/_header.scss';
+
+@import 'templates/_navigation.scss';
+
+@import 'templates/_slider.scss';
+
+@import 'templates/_call-to-action.scss';
+
+@import 'templates/_service.scss';
+
+@import 'templates/_feature.scss';
+
+@import 'templates/_portfolio.scss';
+
+@import 'templates/_testimonial.scss';
+
+@import 'templates/_contact.scss';
+
+@import 'templates/_pricing.scss';
+
+@import 'templates/_products.scss';
+
+@import 'templates/_single-product.scss';
+
+@import 'templates/_clients.scss';
+
+@import 'templates/_about.scss';
+
+@import 'templates/_instagram.scss';
+
+@import 'templates/_user-dashboard.scss';
+
+@import 'templates/_single-post.scss';
+
+@import 'templates/_backgrounds.scss';
+
+@import 'templates/_blog-sidebar.scss';
+
+@import 'templates/_blog.scss';
+
+@import 'templates/_coming-soon.scss';
+
+@import 'templates/_shopping.scss';
+
+@import 'templates/_404.scss';
+
+@import 'templates/_message-sent.scss';
+
+@import 'templates/_footer.scss';
+
+@import 'custom.scss';
+
+
+
+
+html {
+    scroll-behavior: smooth;
+  }
+
+
+/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
+.logo-container {
+  width: 80%;
+  margin: 0 auto; /* Zentriert sich, lässt links und rechts je 10% Platz */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px; /* Abstand zwischen Frame 1 & Frame 2 */
+}
+
+/* 2) Frame 1 (40%) und Frame 2 (60%) */
+.frame1 {
+  flex: 0 0 40%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.frame2 {
+  flex: 0 0 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 3) Banner-Logos selbst: Standard erst auf opacity:0, Animation blendet sie ein */
+.banner-logo {
+  max-width: 100%;
+  height: auto;
+  opacity: 0;
+}
+
+/* 4) ANIMATIONEN */
+/* Frame 1 – Move-In: Wir animieren gezielt das Bild */
+.frame1 .banner-logo {
+  animation: moveIn 1s forwards;
+}
+/* Frame 2 – Fade-In: Wir animieren gezielt das Bild */
+.frame2 .banner-logo {
+  animation: moveIn 1s 0.5s forwards;
+}
+
+/* Keyframes */
+@keyframes moveIn {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 5) TITEL-FADE-IN (optional) */
+.fade-in-title {
+  opacity: 0;
+  animation: fadeTitle 1.5s forwards 1s;
+}
+@keyframes fadeTitle {
+  to { opacity: 1; }
+}
+
+/* 6) (Optional) Responsive unter 768px => Frames untereinander */
+@media (max-width: 768px) {
+  .logo-container {
+    flex-direction: column;
+    width: 90%; /* Mehr Platz, Bilder untereinander */
+  }
+  .frame1, .frame2 {
+    flex: 0 0 auto;
+    width: 100%;
+    margin-bottom: 20px; 
+  }
+}
+

assets/scss/templates/_404.scss

@@ -0,0 +1,33 @@
+.page-404 {
+  display: flex;
+  align-items: center;
+  min-height: calc(100vh - (100px + 205px));
+  @include desktop {
+    min-height: calc(100vh - (90px + 205px));
+  }
+  text-align: center;
+  h1 {
+    font-size: 300px;
+    font-weight: bold;
+    @include tablet {
+      font-size: 150px;
+    }
+    @include mobile {
+      font-size: 130px;
+    }
+    @include mobile-xs {
+      font-size: 90px;
+    }
+  }
+  h2 {
+    text-transform:uppercase;
+    font-size: 20px;
+    letter-spacing: 4px;
+    font-weight: bold;
+    margin-top: 30px;
+  }
+  .btn-main {
+    margin-top: 40px;
+    margin-bottom: 50px;
+  }
+}

assets/scss/templates/_about.scss

@@ -0,0 +1,58 @@
+.about{
+  .block{
+    h2 {
+      padding-top: 30px;
+      padding-bottom: 30px;
+      margin:0;
+    }
+
+    h3 {
+      padding-top: 30px;
+      padding-bottom: 50px;
+      margin:0;
+    }
+
+    p {
+      padding-top: 20px;
+      line-height:28px;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .about-img {
+    position: relative;
+    overflow: hidden;
+  
+    img {
+      display: block;
+      width: 100%;
+      transition: opacity 0.5s ease-out;
+    }
+  
+    .hover-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 0.5s ease-out;
+    }
+  
+    &:hover .hover-img {
+      opacity: 1;
+    }
+  
+    &:hover img {
+      opacity: 0;
+    }
+  }
+  
+
+  .section-title {
+    margin-bottom: 0px;
+  }
+}

assets/scss/templates/_backgrounds.scss

@@ -0,0 +1,34 @@
+.bg-1 {
+  position: relative;
+  background-size: contain; /* Verkleinert das Bild, sodass es komplett sichtbar ist */
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+  @include large-desktop {
+    background-attachment: unset;
+  }
+}
+
+.bg-1::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: inherit;
+  opacity: 0.2; /* Setzt die Opazität, um das Bild blasser darzustellen */
+  z-index: -1; /* Stellt sicher, dass der Inhalt vor dem Hintergrundbild liegt */
+}
+
+
+.bg-2 {
+  background-size: cover;
+  background-position: center center;
+  background-attachment: fixed;
+  background-color: #185b63;
+  @include large-desktop {
+    background-attachment: unset;
+  }
+}

assets/scss/templates/_blog-sidebar.scss

@@ -0,0 +1,130 @@
+.widget {
+  margin-bottom: 65px;
+
+  @include tablet {
+    margin-bottom: 35px;
+  }
+
+  .widget-title {
+    margin-top: 0px;
+    margin-bottom: 15px;
+    font-size: 16px;
+    color: lighten( $black, 20 );
+    font-weight: 500;
+    border-bottom: 1px solid $border-color;
+  }
+
+  // Latest Posts
+  &.widget-latest-post {
+    .media {
+      .media-object {
+        width: 100px;
+        height: auto;
+      }
+
+      .media-heading {
+        a {
+          color: $black;
+          font-size: 16px;
+        }
+      }
+
+      p {
+        font-size: 12px;
+        color: darken( $light, 47.45);
+      }
+    }
+
+    @include desktop {
+      padding-top: 20px;
+    }
+  }
+  //end Latest Posts
+
+  // Categories
+  &.widget-category {
+    ul {
+      li {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        a {
+          color: lighten( $black, 50.3 );
+          padding: 10px;
+          padding-left: 20px;
+          padding-right: 20px;
+          @include transition-multi (padding 0.3s ease, border 0.3s ease);
+
+          &:before {
+            padding-right: 10px;
+          }
+
+          &:hover {
+            color: $color-primary;
+            padding-left: 25px;
+          }
+
+          &:active {
+            padding-left: 24px;
+            border: 1px solid $color-primary;
+            border-radius: 30px;
+            @include transition (padding, 0s);
+          }
+        }
+
+        a.current {
+          color: $white;
+          background: $color-primary;
+          border: 1px solid $color-primary;
+          border-radius: 30px;
+          pointer-events: none;
+          cursor: default;
+        }
+      }
+    }
+  }
+  // end Categories
+
+  // Tags
+  &.widget-tag {
+    ul {
+      li {
+        margin-bottom: 10px;
+        display: inline-block;
+        margin-right: 5px;
+
+        a {
+          color: lighten( $black, 50.3 );
+          display: inline-block;
+          padding: 8px 15px;
+          border: 1px solid $border-color;
+          border-radius: 30px;
+          font-size: 14px;
+          @include transition-multi (background-color 0.3s ease, border 0.3s ease, color 0.1s ease);
+
+          &:hover {
+            color: $color-primary;
+            background: rgba($color-primary, 0.3);
+            border: 1px solid rgba($color-primary, 0.3);
+          }
+
+          &:active {
+            color: $color-primary;
+            border: 1px solid $color-primary;
+            background: $white;
+            @include transition (background-color, 0.1s, ease);
+          }
+        }
+
+        a.current {
+          color: $white;
+          background: $color-primary;
+          border: 1px solid $color-primary;
+          pointer-events: none;
+          cursor: default;
+        }
+      }
+    }
+  }
+  // end Tags
+}

assets/scss/templates/_blog.scss

@@ -0,0 +1,145 @@
+/*=================================================================
+  Latest Posts
+==================================================================*/
+
+.blog {
+  background: darken( $light, 1.17);
+}
+
+.post {
+  background: $white;
+  margin-bottom: 55px;
+
+  @include tablet {
+    margin-bottom: 20px;
+  }
+
+  .post-media {
+    &.post-thumb {
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &.post-media-audio {
+      iframe {
+        width: 100%;
+      }
+    }
+  }
+
+  .post-title {
+    margin-top: 25px;
+    text-transform: uppercase;
+
+    a {
+      color: $color-primary;
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+  }
+
+  .post-meta {
+    font-size: 13px;
+    margin-top: 10px;
+
+    ul {
+      li {
+        display: inline-block;
+        color: lighten( $black, 56.47 );
+        margin-right: 20px;
+        font-size: 12px;
+        letter-spacing: .5px;
+
+        a {
+          color: lighten( $black, 56.47 );
+
+          &:hover {
+            color: $color-primary;
+          }
+        }
+      }
+    }
+
+    .post-author {
+      color: $black;
+    }
+  }
+
+  .post-content {
+    margin-top: 20px;
+
+    p {
+      line-height: 26px;
+    }
+
+    ul {
+      font-size: 15px;
+      padding: 10px 20px;
+      font-family: $font-primary;
+      list-style: circle;
+    }
+    ol {
+      font-size: 15px;
+      padding: 10px 20px;
+      font-family: $font-primary;
+    }
+
+    blockquote {
+      margin-top: 20px;
+      font-size: 18px;
+      border-color: $color-primary;
+      padding: 10px 20px;
+      text-align: left;
+      color: darken( $light, 50.98);
+    }
+
+    .btn-main {
+      padding: 10px 20px;
+      margin: 15px 0;
+      font-size: 12px;
+    }
+  }
+}
+
+.post-pagination {
+  margin: 0px;
+
+  @include desktop {
+    margin-bottom: 60px;
+  }
+
+  @include tablet {
+    margin-bottom: 25px;
+  }
+
+  >li {
+    margin: 0 2px;
+    display: inline-block;
+    font-size: 14px;
+
+    >a {
+      color: $black;
+      @include transition (all, 0.3s, ease);
+
+      &:hover {
+        color: $white;
+        background: $color-primary;
+        border: 1px solid $color-primary;
+      }
+    }
+
+    &.active>a {
+      background: $color-primary !important;
+      border: 1px solid $color-primary !important;
+    }
+  }
+
+  >li:first-child>a,
+  >li:last-child>a {
+    border-radius: 0;
+  }
+}

assets/scss/templates/_call-to-action.scss

@@ -0,0 +1,74 @@
+.call-to-action {
+  position: relative;
+  text-align: center;
+  padding: 70px 10px;
+  background-size: cover;
+  background-position: center;
+  
+  @include tablet {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7); /* Adjust the color and opacity as needed */
+    z-index: 1;
+  }
+
+  .container, .row, .col-md-12, .block {
+    position: relative;
+    z-index: 2;
+  }
+
+  h2 {
+    color: #ffffff;
+    margin: 0px;
+    padding: 20px 0px;
+    text-shadow: 
+      -1px -1px 0 #000,  
+       1px -1px 0 #000,
+      -1px  1px 0 #000,
+       1px  1px 0 #000; /* Black contour */
+  }
+
+
+  p {
+    color: #ffffff;
+    font-size: 20px;
+    text-shadow: 
+      -1px -1px 0 #000,  
+       1px -1px 0 #000,
+      -1px  1px 0 #000,
+       1px  1px 0 #000; /* Black contour */
+  }
+  .btn-main {
+    padding: 15px 35px;
+    font-size: 20px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-shadow: 
+    -1px -1px 0 #000,  
+     1px -1px 0 #000,
+    -1px  1px 0 #000,
+     1px  1px 0 #000; /* Black contour */
+  }
+}
+
+.overlay-dark {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4); // oder 0.6 oder 0.7
+  z-index: 1;
+}
+.call-to-action .container {
+  position: relative;
+  z-index: 2;
+}

assets/scss/templates/_clients.scss

@@ -0,0 +1,14 @@
+.clients-logo-section{
+  padding-top: 30px; 
+  padding-bottom: 75px;
+  .clients-logo-img{
+    padding: 0px 50px; 
+  }
+}
+
+.clients-logo {
+  img {
+    width: auto!important;
+    padding:20px;
+  }
+}

assets/scss/templates/_coming-soon.scss

@@ -0,0 +1,130 @@
+.coming-soon {
+  background: url("../images/backgrounds/coming-soon.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: $white;
+  display: flex;
+  align-items: center;
+
+  @include mobile-xs {
+    padding: 50px 0;
+  }
+
+  @include mobile {
+    padding: 50px 0;
+  }
+
+  height:100vh;
+
+  .block {
+    h1 {
+      line-height: 65px;
+      font-size: 55px;
+      font-weight: 600;
+      text-transform: uppercase;
+      margin-bottom: 0;
+
+      @include mobile-xs {
+        font-size: 40px;
+        line-height: 50px;
+      }
+
+      @include mobile {
+        font-size: 40px;
+        line-height: 50px;
+      }
+    }
+
+    p {
+      color: $white;
+      margin-top: 10px;
+      font-size: 16px;
+    }
+
+    .count-down {
+      margin-top: 50px;
+
+      .syotimer-cell {
+        width: 25%;
+        padding: 15px;
+        display: inline-block;
+
+        @include mobile-xs {
+          width: 50%;
+          margin-bottom: 10px;
+        }
+
+        @include mobile {
+          width: 50%;
+        }
+
+        background:rgba(101, 94, 122, 0.48);
+
+        .syotimer-cell__value {
+          font-size: 80px;
+          line-height: 80px;
+          text-align: center;
+          position: relative;
+          font-weight: bold;
+
+          @include mobile-xs {
+            font-size: 50px;
+          }
+        }
+
+        .syotimer-cell__unit {
+          font-weight: normal;
+        }
+      }
+
+      ul {
+        li {
+          @include tablet {
+            font-size: 50px;
+          }
+
+          @include mobile {
+            font-size: 50px;
+          }
+
+          @include mobile-xs {
+            font-size: 40px;
+          }
+
+          &:before {
+            content: ":";
+            font-size: 20pt;
+            opacity: 0.7;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+
+          &:last-child {
+            &:before {
+              content: '';
+            }
+          }
+        }
+      }
+
+      div:after {
+        content: " "attr(data-interval-text);
+        font-size: 20px;
+        font-weight: normal;
+        text-transform: capitalize;
+        display: block;
+      }
+    }
+
+    .copyright-text {
+      font-size: 12px;
+
+      a {
+        color: $white;
+        font-weight: 600;
+      }
+    }
+  }
+
+}

assets/scss/templates/_contact.scss

@@ -0,0 +1,113 @@
+.contact-form {
+  padding-top: 70px;
+  padding-bottom: 35px;
+
+  .block {
+    .form-group {
+      padding-bottom: 15px;
+      margin: 0px;
+
+      .form-control {
+        background: darken( $light, 0.392);
+        height: 60px;
+        border: 1px solid #EEF2F6;
+        box-shadow: none;
+        width: 100%;
+      }
+    }
+
+    .form-group-2 {
+      margin-bottom: 13px;
+
+      textarea {
+        background: darken( $light, 0.392);
+        height: 135px;
+        border: 1px solid #EEF2F6;
+        box-shadow: none;
+        width: 100%;
+      }
+    }
+
+    .form-group-h {
+      display: none;
+    }
+
+    button {
+      width: 100%;
+      height: 60px;
+      background: lighten( $black, 27.84);
+      border: none;
+      color: $white;
+      font-size: 18px;
+    }
+  }
+}
+
+
+.address-block {
+  margin-bottom: 20px;
+
+  li {
+    position: relative;
+    padding-left: 0px;
+    margin-bottom: 10px;
+
+    i {
+      position: absolute;
+      left: 0;
+      font-size: 25px;
+      line-height: 20px;
+    }
+
+    div {
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+}
+
+
+.social-icons {
+  margin-top: 40px;
+
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  a {
+    display: inline-block;
+  }
+
+  i {
+    color: #2C2C2C;
+    margin-right: 25px;
+    font-size: 25px;
+  }
+}
+
+
+
+.contact-box {
+  padding-top: 35px;
+  padding-bottom: 58px;
+
+  .block {
+    img {
+      width: 100%;
+    }
+
+    h2 {
+      font-weight: 300;
+      color: #000;
+      font-size: 28px;
+      padding-bottom: 30px;
+    }
+
+    p {
+      color: lighten( $black, 36.07);
+      display: block;
+    }
+
+  }
+}

assets/scss/templates/_counter.scss

@@ -0,0 +1,66 @@
+/*=================================================================
+  Item counter section
+==================================================================*/
+
+.counter {
+  padding: 100px 0;
+
+  .counter-title {
+    margin-bottom: 50px;
+
+    h2 {
+      color: $black;
+      margin-bottom: 20px;
+      font-size: 42px;
+      font-weight: 600;
+      line-height: 35px;
+    }
+
+    p {
+      color: lighten( $black, 33.3 );
+      font-size: 16px;
+    }
+  }
+}
+
+.counters-item {
+  padding-bottom: 30px;
+  color: lighten( $black, 26.6 );
+  position: relative;
+
+  &.kill-border:before {
+    background: none;
+  }
+
+  &:before {
+    background: darken( $light, 7.843137254901947);
+    content: "";
+    margin-top: -27.5px;
+    height: 55px;
+    width: 1px;
+    position: absolute;
+    right: -15px;
+    top: 50%;
+  }
+
+  >div {
+    margin: 6px 0;
+  }
+
+  span {
+    display: inline;
+    font-size: 35px;
+    line-height: 50px;
+  }
+
+  i {
+    font-size: 40px;
+    display: inline-block;
+    color: $color-primary;
+  }
+
+  h3 {
+    font-size: 17px;
+    margin: 0;
+  }
+}

assets/scss/templates/_feature.scss

@@ -0,0 +1,35 @@
+.feature {
+  background: url("../img/feature-bg.jpg");
+  background-position: 50% 94px;
+  display: block;
+  position: relative;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  padding: 100px 0;
+
+  @include large-desktop {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    background-attachment: unset;
+  }
+
+  h2 {
+    margin: 0px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+
+  p {
+    color: darken( $light, 41.37);
+    margin-bottom: 20px;
+  }
+
+  .btn-view-works {
+    background: lighten( $black, 42.35 );
+    color: $white;
+    padding: 10px 20px;
+    margin-bottom: 30px;
+  }
+}

assets/scss/templates/_footer.scss

@@ -0,0 +1,42 @@
+.footer {
+  background: darken( $light, 1.5);
+  min-height: 205px;
+  text-align: center;
+  padding-top: 67px;
+  p {
+    font-size: 13px;
+    line-height: 25px;
+    color: lighten( $black, 56.86274509803921 );
+  }
+  a {
+    color: lighten( $black, 34.9 );
+  }
+  .footer-menu {
+    padding-bottom: 25px;
+    ul {
+      margin: 0px;
+      padding: 0px;
+      li {
+        display: inline-block;
+        padding: 0px 20px;
+        a {
+          display: inline-block;
+          color: lighten( $black, 28.6 );
+          &:hover {
+            color: $black;
+          }
+        }
+      }
+    }
+  }
+  .copyright {
+    a {
+      font-weight: 600;
+    }
+  }
+}
+
+
+
+
+

assets/scss/templates/_header.scss

@@ -0,0 +1,37 @@
+/*--
+  Header Start
+--*/
+
+header {
+  min-height: 100px;
+  @include desktop {
+    min-height: 90px;
+  }
+  background: $white;
+  padding: 20px 0;
+  .navbar {
+    margin-bottom: 0px;
+    border: 0px;
+  }
+  .navbar-brand {
+    padding-top: 5px;
+  }
+  .navbar-default {
+    background: none;
+    border: 0px;
+    .navbar-nav {
+        padding-top: 10px;
+      li {
+        a {
+          color: lighten( $black, 20 );
+          padding: 10px 26px;
+          font-size: 15px;
+          font
+          &:hover {
+            color: $black;
+          }
+        }
+      }
+    }
+  }
+}

assets/scss/templates/_impressum.scss

@@ -0,0 +1,22 @@
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    background-color: transparent;
+  }
+  
+  .table td {
+    vertical-align: top;
+    padding: 10px;
+  }
+  
+  .col-1 {
+    width: 30%;
+    vertical-align: top;
+  }
+  
+  .col-2 {
+    width: 70%;
+    vertical-align: top;
+  }
+  

assets/scss/templates/_instagram.scss

@@ -0,0 +1,24 @@
+.instagram-feed {
+  a {
+    margin:6px;
+    margin-right: 10px;
+    display: inline-block;
+    margin-bottom: 10px;
+    width: 23.5%;
+    @include tablet {
+      width: 49%;
+      margin:3px;
+    }
+    @include mobile {
+      width: 100%;
+      margin:3px;
+    }
+    &:hover img {
+      filter: grayscale(10);
+    }
+    img {
+      width: 100%;
+
+    }
+  }
+}

assets/scss/templates/_message-sent.scss

@@ -0,0 +1,36 @@
+.page-message-sent {
+  display: flex;
+  align-items: center;
+  min-height: calc(100vh - (100px + 205px));
+  @include desktop {
+    min-height: calc(100vh - (90px + 205px));
+  }
+  text-align: center;
+  h1 {
+    font-size: 50px;
+    font-weight: bold;
+    @include mobile {
+      font-size: 40px;
+    }
+    @include mobile-xs {
+      font-size: 30px;
+    }
+  }
+  h2 {
+    text-transform:uppercase;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin-top: 30px;
+  }
+  .btn-main {
+    margin-top: 40px;
+    margin-bottom: 50px;
+  }
+  img {
+    width: 50%;
+    max-height: 200px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+}

assets/scss/templates/_navigation.scss

@@ -0,0 +1,156 @@
+.navigation {
+  background: $white;
+  padding: 20px 0;
+
+  .navbar {
+    margin-bottom: 0px;
+    border: 0px;
+  }
+
+  .navbar-brand {
+    padding-top: 5px;
+  }
+
+  .navbar {
+    background: none;
+    border: 0px;
+
+    .navbar-nav {
+      padding-top: 5px;
+      padding-bottom: 5px;
+
+      a {
+        color: #7b7b7b;
+        padding: 10px 15px;
+
+        font : {
+          weight: 500;
+          size: 14px;
+        }
+
+        text-transform:uppercase;
+
+        &:hover,
+        &:focus {
+          color: $black;
+          background: transparent;
+        }
+      }
+
+      a.current {
+        color: $black;
+        pointer-events: none;
+        cursor: default;
+      }
+
+      a.current-parent {
+        color: $black;
+      }
+
+      select {
+        margin: 10px 15px;
+      }
+    }
+
+    .current > .dropdown-toggle {
+      color: $black;
+    }
+
+    .dropdown-menu {
+      border-radius: 0;
+      border: none;
+      left: -5px;
+      box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
+      width: 250px; /* Setzen Sie hier die gewünschte Breite */
+
+      a {
+        text-transform: none;
+        font-weight: normal;
+        color: darken( $light, 47.45);
+        padding: 10px 20px;
+        @include transition-multi (color 0.1s ease, padding 0.3s ease);
+
+        &:hover {
+          background: $color-primary;
+          color: $white;
+          padding-left: 25px;
+        }
+      }
+
+      a.current {
+        padding-left: 25px;
+        color: $white;
+        background: $color-primary;
+      }
+    }
+  }
+}
+
+.nav .open>a {
+  background: transparent;
+}
+
+// Change Bootstrap's default navbar collapse breakpoint of 768px to 992px (=desktop); source: https://silvawebdesigns.com/how-to-change-the-bootstrap-navbar-breakpoint/
+@include desktop {
+  .navbar-header {
+    float: none;
+  }
+
+  .navbar-left,
+  .navbar-right {
+    float: none !important;
+  }
+
+  .navbar-toggle {
+    display: block;
+  }
+
+  .navbar-collapse {
+    border-top: 1px solid transparent;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+  }
+
+  .navbar-fixed-top {
+    top: 0;
+    border-width: 0 0 1px;
+  }
+
+  .navbar-collapse.collapse {
+    display: none!important;
+  }
+
+  .navbar-nav {
+    float: none!important;
+    margin-top: 7.5px;
+  }
+
+  .navbar-nav > li {
+    float: none;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .collapse {
+    clear: both;
+  }
+
+  .collapse.in {
+    display: block !important;
+  }
+}
+
+
+#select-language {
+  border: none; /* Kein Rahmen */
+  outline: none; /* Kein Umriss */
+  box-shadow: none; /* Kein Schatten */
+  background: transparent; /* Hintergrund transparent, falls gewünscht */
+  -webkit-appearance: none; /* Entfernt das Standard-Dropdown-Aussehen */
+  -moz-appearance: none; /* Entfernt das Standard-Dropdown-Aussehen */
+  appearance: textfield; /* Entfernt das Standard-Dropdown-Aussehen */
+  padding: 0px 2px; /* Passen Sie das Padding an */
+  height: 100%; /* Höhe anpassen */
+}

assets/scss/templates/_portfolio.scss

@@ -0,0 +1,121 @@
+.portfolio-work {
+  padding: 80px 0;
+
+  .block {
+    .portfolio-menu {
+      text-align: center;
+
+      .btn-group {
+        margin-bottom: 40px;
+
+        label {
+          display: inline-block;
+          border: 1px solid $border-color;
+          padding: 8px 25px;
+          cursor: pointer;
+          font-size: 15px;
+          color: lighten( $black, 20 );
+          outline: 0;
+          background: $white;
+          margin: 2px;
+          border-radius: 0;
+          @include transition (all, 0.3s, ease);
+        }
+      }
+    }
+  }
+}
+
+.portfolio {
+  &-item {
+    position: relative;
+    padding: 0;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    &:hover {
+      .portfolio-hover {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .portfolio-content {
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-hover {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(60, 55, 55, 0.5);
+    visibility: hidden;
+    opacity: 0;
+    transition: .3s ease;
+  }
+
+  &-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-40%);
+    text-align: center;
+    padding: 20px;
+    transition: inherit;
+
+    * {
+      color: $white;
+    }
+
+    a {
+      display: block;
+      transition: .2s ease;
+
+      i {
+        font-size: 30px;
+      }
+
+      &.h3 {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+
+
+
+// Portfolio Single Page
+.portfolio-single-page {
+  .project-details {
+    h4 {
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 2px dashed $border-color;
+    }
+
+    span {
+      color: lighten( $black, 51.3 );
+      width: 180px;
+      display: inline-block;
+    }
+
+    strong {
+      color: lighten( $black, 19.2 );
+      font-weight: normal;
+    }
+
+    ul {
+      li {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

assets/scss/templates/_pricing.scss

@@ -0,0 +1,51 @@
+/*=================================================================
+  Pricing section
+==================================================================*/
+
+.pricing-table {
+  .pricing-item {
+    padding: 40px 20px;
+    background: $white;
+    box-shadow: 0 8px 15px 0 rgba(5, 57, 106, .06);
+
+    a.btn-main {
+      text-transform: uppercase;
+      margin-top: 20px;
+    }
+
+    li {
+      font-weight: 400;
+      padding: 6px 0;
+      color: darken( $light, 57.64);
+
+      i {
+        margin-right: 6px;
+        color: $color-primary;
+      }
+    }
+  }
+
+  .price-title {
+    padding: 30px 0 20px;
+
+    >h3 {
+      font-weight: 700;
+      margin: 0 0 5px;
+      font-size: 15px;
+      text-transform: uppercase;
+    }
+
+    >p {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 18px;
+      margin-top: 5px;
+    }
+
+    .value {
+      color: $color-primary;
+      font-size: 50px;
+      padding: 10px 0;
+    }
+  }
+}

assets/scss/templates/_products.scss

@@ -0,0 +1,223 @@
+// Products
+.product-item {
+  margin-bottom: 30px;
+
+  .product-thumb {
+    position: relative;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    .bage {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      background: $black;
+      color: $white;
+      font-size: 12px;
+      padding: 4px 12px;
+      font-weight: 300;
+      display: inline-block;
+    }
+
+    &:before {
+      transition: .3s all;
+      opacity: 0;
+      background: rgba(0, 0, 0, 0.6);
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+    }
+
+    .preview-meta {
+      position: absolute;
+      text-align: center;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      justify-content: center;
+      opacity: 0;
+      transition: 0.2s;
+      transform: translateY(10px);
+
+      li {
+        display: inline-block;
+
+        a,
+        span {
+          background: $white;
+          padding: 10px 16px;
+          cursor: pointer;
+          display: inline-block;
+          font-size: 18px;
+
+          &:hover {
+            background: $color-primary;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+
+  &:hover .product-thumb {
+    &:before {
+      opacity: 1;
+
+    }
+  }
+
+  &:hover .preview-meta {
+    opacity: 1;
+    transform: translateY(-20px);
+  }
+
+  .product-content {
+    text-align: center;
+
+    h4 {
+      font-size: 14px;
+      font-weight: 400;
+      margin-top: 15px;
+      margin-bottom: 6px;
+
+      a {
+        color: $black;
+      }
+    }
+  }
+}
+
+
+.product-modal {
+  background: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  padding: 0 !important;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -4px;
+  }
+
+  &.fade .modal-dialog {
+    transform: translate(0, 0);
+  }
+
+  .close {
+    width: 50px;
+    float: none;
+    position: absolute;
+    right: 20px;
+    z-index: 9;
+    top: 20px;
+    font-size: 30px;
+    outline: none;
+  }
+
+  .modal-dialog {
+    width: 900px;
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+
+    @include mobile {
+      width: 100%;
+    }
+
+    @include tablet {
+      width: 100%;
+    }
+  }
+
+  .modal-content {
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+
+    .modal-body {
+      padding: 30px;
+
+      .modal-image {
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+
+      .product-short-details {
+        h2 {
+          margin-top: 0;
+          font-size: 22px;
+          font-weight: 400;
+
+          a {
+            color: $black;
+          }
+
+          @include mobile {
+            margin-top: 15px;
+          }
+
+          @include tablet {
+            margin-top: 15px;
+          }
+        }
+
+        .product-price {
+          font-size: 30px;
+          margin: 20px 0;
+
+          @include mobile {
+            margin: 10px 0;
+          }
+        }
+
+        .btn-main {
+          margin-top: 20px;
+        }
+
+        .btn-transparent {
+          color: lighten( $black, 26.6 );
+          border-bottom: 1px solid $border-color;
+        }
+      }
+
+    }
+  }
+}
+
+
+.product-shorting {
+  margin-bottom: 30px;
+  span {
+    margin-right: 15px;
+  }
+}
+
+
+// sidebar scss
+.product-category {
+  ul {
+    padding-left: 15px;
+
+    li {
+      margin-bottom: 4px;
+
+      a {
+        color: darken( $light, 57.64);
+
+        &:hover {
+          color: $black;
+        }
+      }
+    }
+  }
+}

assets/scss/templates/_service.scss

@@ -0,0 +1,213 @@
+.service {
+  text-align: center;
+  padding: 90px 0;
+
+  @include tablet {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .service-item {
+    padding-bottom: 30px;
+
+    i {
+      font-size: 50px;
+      color: $color-primary;
+    }
+
+    img.service-icon {
+      width: 100px;
+      height: 100px;
+      display: inline-block;
+    }
+
+    h4 {
+      padding-top: 15px;
+      margin: 0;
+      margin-top: 10px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    p {
+      padding-top: 10px;
+      margin: 0;
+    }
+  }
+}
+
+.dark-service {
+  .title {
+    color: $white;
+  }
+
+  .service-item {
+    padding-bottom: 30px;
+    text-align: center;
+
+    i {
+      color: $white;
+      font-size: 40px;
+      margin-bottom: 10px;
+    }
+
+    img.service-icon {
+      width: 100px;
+      height: 100px;
+      display: inline-block;
+    }
+
+
+    h4 {
+      color: $white;
+      padding-top: 15px;
+      margin: 0;
+      margin-top: 10px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    p {
+      padding-top: 10px;
+      margin: 0;
+    }
+  }
+}
+
+.service-about {
+  p {
+    line-height: 28px;
+  }
+}
+
+
+
+
+
+.service-arrow {
+  .block {
+    padding: 70px 30px;
+
+    i {
+      font-size: 45px;
+    }
+
+    p {
+      color: #000000;
+    }
+  }
+}
+
+
+
+
+.service-list {
+  .block {
+    padding: 30px;
+    margin-bottom: 20px;
+    background: $white;
+  }
+}
+
+h2, h3 {
+  margin-bottom: 10px; /* Passe den Wert nach Bedarf an */
+}
+
+.center-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.responsive-container {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+}
+
+.responsive-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.page-title {
+  position: relative;
+  padding: 100px 0;
+  @extend .overly;
+
+  .block {
+    text-align: center;
+
+    h1 {
+      color: #5f5c5c; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
+      font-weight: 200;
+      letter-spacing: 0.5em;
+      margin-top: 20px;
+      margin-bottom: -60px;
+      text-transform: capitalize;
+    }
+
+    p {
+      color: #000; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
+    }
+  }
+}
+
+.page-title::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff; /* Weiß als Hintergrundfarbe */
+  z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
+}
+
+.service-arrow .block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap; /* Keine Umbrüche, damit die Inhalte nebeneinander bleiben */
+}
+
+.service-arrow .service-image {
+  flex: 0 0 auto;
+  margin-left: 20px;
+}
+
+.service-arrow .service-image img {
+  max-width: 600px; /* Maximale Breite des Bildes */
+  width: 100%; /* Bild soll sich an den Container anpassen */
+  height: auto;
+  display: block;
+}
+
+.service-arrow .service-content {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .service-arrow .block {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .service-arrow .service-image {
+    margin-left: 0;
+    margin-top: 20px;
+    width: 100%; /* Bild auf volle Breite setzen bei kleinen Bildschirmen */
+  }
+}
+
+
+.service-title {
+  color: #273544; /* Setze die gewünschte Farbe für die Titel der Dienste */
+}
+
+.service-description {
+  color: #990505; /* Setze die gewünschte Farbe für die Beschreibungen der Dienste */
+}

assets/scss/templates/_shopping.scss

@@ -0,0 +1,236 @@
+.shopping {
+  .widget-title {
+    font-weight: 400;
+    border-bottom: 1px solid $border-color;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 16px;
+  }
+}
+
+
+.checkout {
+  .block {
+    padding: 15px;
+    margin-bottom: 10px;
+  }
+}
+
+// Checkout Page
+.checkout-form {
+  .form-group {
+    position: relative;
+    margin-bottom: 8px;
+
+    label {
+      position: absolute;
+      top: 18px;
+      left: 15px;
+      right: auto;
+      bottom: auto;
+      color: #888;
+      font-size: 10px;
+      font-weight: 400;
+      text-transform: uppercase;
+      opacity: 1 !important;
+      width: 85px;
+    }
+
+    input {
+      border-radius: 0;
+      display: block;
+      padding: 6px 10px 5px 100px;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      height: 50px;
+    }
+  }
+
+  .checkout-country-code {
+    .form-group {
+      float: left;
+    }
+
+    .form-group:first-child {
+      width: calc(45% - 2px);
+      margin-right: 4px;
+    }
+
+    .form-group:last-child {
+      width: calc(55% - 2px);
+    }
+
+  }
+}
+
+.shopping.cart {
+  .product-list {
+    .table {
+      .cart-amount {
+        th {
+          background: $light;
+          padding: 10px;
+          text-transform: uppercase;
+        }
+      }
+
+      >tbody>tr>td {
+        vertical-align: middle;
+      }
+    }
+
+    .product-info {
+      a {
+        margin-left: 10px;
+        color: $black;
+        font-weight: 600;
+      }
+    }
+
+    .product-remove {
+      color: #c7254e;
+    }
+  }
+
+  .account-details {
+    margin-top: 30px;
+
+    legend {
+      font-weight: 600;
+      font-size: 16px;
+      text-transform: uppercase;
+    }
+
+    .btn-pay {
+      margin: 20px 0;
+    }
+  }
+}
+
+
+.product-checkout-details {
+  .product-card {
+    >a {
+      padding-right: 20px;
+    }
+
+    .price {
+      margin-top: 15px;
+    }
+
+    .media-object {
+      width: 80px;
+    }
+
+    h4 {
+      font-weight: 400;
+      font-size: 14px;
+      color: lighten( $black, 33.3 );
+    }
+
+    .remove {
+      font-size: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .discount-code {
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    margin: 20px 0 10px;
+    padding: 10px 0;
+
+    p {
+      margin: 0;
+
+      a {
+        font-weight: 400;
+        color: lighten( $black, 33.3 );
+      }
+    }
+  }
+
+  .summary-prices {
+    border-style: solid;
+    border-color: $border-color;
+    border-width: 0px 0 1px 0;
+    padding-bottom: 10px;
+
+    li {
+      padding: 5px 0;
+
+      span+span {
+        float: right;
+      }
+    }
+  }
+
+  .summary-total {
+    margin-top: 5px;
+
+    >span {
+      font-weight: 500;
+      font-size: 18px;
+    }
+
+    span+span {
+      float: right;
+    }
+  }
+
+  .verified-icon {
+    margin-top: 25px;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+
+// End Checkout Page
+
+
+// purchase confirmation page 
+.purchase-confirmation {
+  .purchase-confirmation-details {
+    padding: 20px;
+    border: 1px solid $border-color;
+
+    .table {
+      margin: 0;
+      color: lighten( $black, 26.6 );
+
+      b,
+      strong {
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+// Empty Cart
+.empty-cart {
+  .block {
+    i {
+      font-size: 50px;
+    }
+  }
+}
+
+.success-msg {
+  .block {
+    i {
+      font-size: 40px;
+      background: $color-secondary;
+      color: $white;
+      width: 60px;
+      height: 60px;
+      border-radius: 100px;
+      display: inline-block;
+      line-height: 60px;
+    }
+  }
+}

assets/scss/templates/_single-post.scss

@@ -0,0 +1,249 @@
+/*=================================================================
+  Single Blog Page
+==================================================================*/
+.post.post-single {
+  border: none;
+  margin-bottom: 0px;
+
+  .post-title {
+    margin-top: 0px;
+
+    @include tablet {
+      margin-top: 20px;
+    }
+  }
+
+  .post-thumb {
+    margin-top: 30px;
+  }
+}
+
+.post-sub-heading {
+  border-bottom: 1px solid $border-color;
+  padding-bottom: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.post-social-share {
+  margin-bottom: 50px;
+}
+
+.post-comments {
+  margin: 30px 0;
+
+  .media {
+    margin-top: 20px;
+
+    >.pull-left {
+      padding-right: 20px;
+    }
+  }
+
+  .comment-author {
+    margin-top: 0;
+    margin-bottom: 0px;
+    font-weight: 500;
+
+    a {
+      color: $color-primary;
+      font-size: 14px;
+      text-transform: uppercase;
+    }
+  }
+
+  time {
+    margin: 0 0 5px;
+    display: inline-block;
+    color: darken( $light, 47.45);
+    font-size: 12px;
+  }
+
+  .comment-button {
+    color: $color-primary;
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 12px;
+
+    i {
+      margin-right: 5px;
+      display: inline-block;
+    }
+
+    &:hover {
+      color: $color-primary;
+    }
+  }
+}
+
+.post-excerpt {
+  h3 {
+    a {
+      color: $black;
+    }
+  }
+
+  p {
+    margin: 0 0 30px;
+  }
+
+  blockquote.quote-post {
+    margin: 20px 0;
+
+    p {
+      line-height: 30px;
+      font-size: 20px;
+      color: $color-primary;
+    }
+  }
+}
+
+
+.single-blog {
+  background-color: #fff;
+  margin-bottom: 50px;
+  padding: 20px;
+}
+
+.blog-subtitle {
+  font-size: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid $border-color;
+  margin-bottom: 25px;
+  text-transform: uppercase;
+}
+
+.next-prev {
+  border-bottom: 1px solid $border-color;
+  border-top: 1px solid $border-color;
+  margin: 20px 0;
+  padding: 25px 0;
+
+  a {
+    color: $black;
+
+    &:hover {
+      color: $color-primary;
+    }
+  }
+
+  .prev-post i {
+    margin-right: 10px;
+  }
+
+  .next-post i {
+    margin-left: 10px;
+  }
+}
+
+.social-profile {
+  ul {
+    li {
+      margin: 0 10px 0 0;
+      display: inline-block;
+
+      a {
+        color: lighten( $black, 33.92 );
+        display: block;
+        font-size: 16px;
+
+        i {
+          &:hover {
+            color: $color-primary;
+          }
+        }
+      }
+    }
+  }
+}
+
+.comments-section {
+  margin-top: 35px;
+}
+
+
+.author-about {
+  margin-top: 40px;
+}
+
+.post-author {
+  margin-right: 20px;
+}
+
+.post-author>img {
+  border: 1px solid $border-color;
+  max-width: 120px;
+  padding: 5px;
+  width: 100%;
+}
+
+
+
+.comment-list {
+  ul {
+    margin-top: 20px;
+
+    li {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+
+.comment-wrap {
+  border: 1px solid $border-color;
+  border-radius: 1px;
+  margin-left: 20px;
+  padding: 10px;
+  position: relative;
+
+  .author-avatar {
+    margin-right: 10px;
+  }
+
+  .media {
+    .media-heading {
+      font-size: 14px;
+      margin-bottom: 8px;
+
+      a {
+        color: $color-primary;
+        font-size: 13px;
+      }
+    }
+
+    .comment-meta {
+      font-size: 12px;
+      color: #888;
+    }
+
+    p {
+      margin-top: 15px;
+    }
+  }
+
+}
+
+
+.comment-reply-form {
+  margin-top: 80px;
+
+  input,
+  textarea {
+    height: 35px;
+    border-radius: 0;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+      border: 1px solid $color-primary;
+    }
+  }
+
+  textarea,
+  .btn-main {
+    height: auto;
+  }
+}

assets/scss/templates/_single-product.scss

@@ -0,0 +1,308 @@
+.single-product {
+  padding: 60px 0 40px;
+
+  .breadcrumb {
+    background: transparent;
+
+    li {
+      color: $black;
+      font-weight: 200;
+
+      a {
+        color: $black;
+        font-weight: 200;
+      }
+    }
+  }
+
+  .product-pagination {
+    li {
+      display: inline-block;
+      margin: 0 8px;
+
+      &+li:before {
+        padding: 0 8px 0 0;
+        color: #ccc;
+        content: "/\00a0";
+      }
+
+      a {
+        color: $black;
+        font-weight: 200;
+
+        i {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+
+
+
+.single-product-slider {
+  .carousel {
+    .carousel-inner {
+      .carousel-caption {
+        text-shadow: none;
+        text-align: left;
+        top: 20%;
+        bottom: auto;
+
+        h1 {
+          font-size: 50px;
+          font-weight: 100;
+          color: $black;
+        }
+
+        p {
+          width: 50%;
+          font-weight: 200;
+        }
+
+        .btn-main {
+          margin-top: 20px;
+        }
+      }
+    }
+
+    .carousel-control {
+      bottom: auto;
+      background: $white;
+      width: 6%;
+      padding: 10px 0;
+
+      i {
+        font-size: 40px;
+        text-shadow: none;
+        color: lighten( $black, 33.3 );
+      }
+    }
+
+    .carousel-indicators li {
+      img {
+        height: auto;
+        width: 60px;
+      }
+    }
+
+    .carousel-control.right,
+    .carousel-control.left {
+      background-image: none;
+      top: 40%;
+    }
+  }
+}
+
+
+
+.single-product-slider .carousel-indicators {
+  margin: 10px 0 0;
+  overflow: auto;
+  position: static;
+  text-align: left;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+
+  li {
+    background-color: transparent;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    display: inline-block;
+    height: auto;
+    margin: 0 !important;
+    width: auto;
+
+    &.active img {
+      opacity: 1;
+    }
+
+    &:hover img {
+      opacity: 0.75;
+    }
+
+    img {
+      display: block;
+      opacity: 0.5;
+    }
+  }
+}
+
+.single-product-details {
+  .color-swatches {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+
+    span {
+      width: 100px;
+      color: $black;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    a {
+      display: inline-block;
+      width: 36px;
+      height: 36px;
+      margin-right: 5px;
+    }
+
+    li {
+      display: inline-block;
+    }
+
+    .swatch-violet {
+      background-color: #8da1cd;
+    }
+
+    .swatch-black {
+      background-color: $black;
+    }
+
+    .swatch-cream {
+      background-color: #e6e2d6;
+    }
+  }
+
+  .product-size {
+    margin-top: 20px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+
+    span {
+      width: 100px;
+      color: $black;
+      font-size: 13px;
+      font-weight: 600;
+      display: inline-block;
+    }
+
+    .form-control {
+      display: inline-block;
+      width: 130px;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      color: $black;
+      font-size: 12px;
+      border: 1px solid darken( $light, 7.843137254901947);
+      border-radius: 0px;
+      box-shadow: none;
+    }
+  }
+
+  .product-category {
+    margin-top: 20px;
+
+    >span {
+      width: 100px;
+      color: $black;
+      font-size: 13px;
+      font-weight: 600;
+      display: inline-block;
+    }
+
+    ul {
+      width: 140px;
+      display: inline-block;
+
+      li {
+        display: inline-block;
+        margin: 5px;
+      }
+    }
+  }
+
+  .product-quantity {
+    margin-top: 20px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+
+    >span {
+      width: 100px;
+      color: $black;
+      font-size: 13px;
+      font-weight: 600;
+      display: inline-block;
+    }
+
+    .product-quantity-slider {
+      width: 140px;
+      display: inline-block;
+
+      input {
+        height: 34px;
+      }
+
+      .input-group-btn:first-child>.btn,
+      .p-quantity .input-group-btn:first-child>.btn-group {
+        margin-right: -2px;
+      }
+
+      button {
+        border-radius: 0;
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.bootstrap-touchspin .input-group-btn-vertical {
+  position: relative;
+  white-space: nowrap;
+  width: 1%;
+  vertical-align: middle;
+  display: table-cell;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical>.btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 10px;
+  margin-left: -1px;
+  position: relative;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
+  border-radius: 0;
+  border-top-right-radius: 4px;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
+  margin-top: -2px;
+  border-radius: 0;
+  border-bottom-right-radius: 4px;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical i {
+  position: absolute;
+  top: 3px;
+  left: 5px;
+  font-size: 9px;
+  font-weight: normal;
+}

assets/scss/templates/_slider.scss

@@ -0,0 +1,57 @@
+.slider {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center center;
+  padding: 170px 0 200px;
+  position: relative;
+  min-height: 1000px; /* Adjust based on your design needs */
+  @include large-desktop {
+    background-attachment: unset;
+    padding: 150px 0;
+  }
+
+  .block {
+    color: darken( $light, 8.4);
+    text-align: center;
+
+    h1 {
+      font-weight: 100;
+      font-size: 45px;
+      line-height: 1.33em;
+      letter-spacing: 0.2em;
+      padding-bottom: 15px;
+      text-transform: uppercase;
+
+      @include tablet {
+        font-size: 35px;
+      }
+
+      @include mobile {
+        font-size: 28px;
+      }
+
+      @include mobile-xs {
+        font-size: 26px;
+      }
+    }
+
+    p {
+      margin-bottom: 30px;
+      color: darken( $light, 95.09803921568627);
+      font-size: 25px;
+      line-height: 1.5em;
+      font-weight: 300;
+
+      @include mobile {
+        font-size: 14px;
+      }
+    }
+
+    @include mobile {
+      .btn {
+        font-size: 12px;
+      }
+    }
+  }
+}

assets/scss/templates/_testimonial.scss

@@ -0,0 +1,92 @@
+.testimonial {
+  padding: 100px 0;
+
+  @include tablet {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .counter-box {
+    li {
+      width: 50%;
+      float: left;
+      text-align: center;
+      margin: 30px 0 30px;
+
+      @include tablet {
+        margin-top: 0px;
+      }
+    }
+  }
+
+  .testimonial-carousel {
+    border: 1px solid $border-color;
+    padding: 24px;
+
+    i {
+      font-size: 35px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      font-family: $font-secondary;
+      line-height: 28px;
+      padding-bottom: 20px;
+    }
+
+    .user {
+      img {
+        padding-bottom: 0px;
+        border-radius: 500px;
+        width: 80px;
+        display: inline-block;
+      }
+
+      p {
+        font-family: $font-primary;
+        padding-bottom: 0;
+        margin-top: 6px;
+        font-size: 12px;
+        line-height: 20px;
+
+        span {
+          display: block;
+          color: lighten( $black, 22.54 );
+          font-weight: 600;
+        }
+      }
+    }
+
+    .owl-carousel .owl-pagination div {
+      border: 1px solid #1D1D1D;
+      border-radius: 500px;
+      display: inline-block;
+      height: 10px;
+      margin-right: 15px;
+      width: 10px;
+    }
+
+    .owl-carousel .owl-pagination div.active {
+      background: lighten( $black, 36.07);
+      font-size: 30px;
+      display: inline-block;
+      border: 0px;
+    }
+  }
+}
+
+.counter-box {
+  i {
+    font-size: 35px;
+    margin-bottom: 15px;
+  }
+
+  h4 {
+    font-size: 30px;
+    font-weight: bold;
+  }
+
+  span {
+    color: lighten( $black, 33.3 );
+  }
+}

assets/scss/templates/_user-dashboard.scss

@@ -0,0 +1,71 @@
+.dashboard-menu {
+  .active {
+    background: $color-primary;
+    color: $white;
+    border: 1px solid $color-primary;
+  }
+
+  li {
+    padding: 0;
+    margin: 0 3px;
+
+    a {
+      padding: 10px 20px;
+      border: 1px solid $border-color;
+
+      @include tablet {
+        padding: 10px 15px;
+      }
+
+      @include mobile {
+        padding: 10px 5px;
+      }
+
+      @include mobile-xs {
+        padding: 10px 5px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.dashboard-wrapper {
+  border: 1px solid $border-color;
+  margin-top: 30px;
+  padding: 20px;
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  .user-img {
+    width: 120px;
+    border-radius: 100px;
+  }
+}
+
+.dashboard-user-profile {
+  .user-img {
+    width: 180px;
+  }
+
+  .user-profile-list {
+    margin-top: 30px;
+    padding-left: 30px;
+
+    li {
+      margin-bottom: 8px;
+    }
+
+    span {
+      font-weight: bold;
+      margin-right: 5px;
+      width: 100px;
+      display: inline-block;
+    }
+  }
+}

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;
+}
+