* {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          html {
              font-size: 62.5%;
          }

          body {
              font-family: 'Roboto', sans-serif;
              line-height: 1;
              color: #000000;
              font-weight: 400;
          }

          /* Grid Layouts */
          .grid {
              display: grid;
              align-items: center;
              justify-content: center;
              column-gap: 1.2rem;
          }

          .grid--3--col {
              grid-template-columns: repeat(3, 1fr);
          }

          .grid--5--col {
              grid-template-columns: repeat(5, 1fr);
          }

          .grid--6--col {
              grid-template-columns: repeat(6, 1fr);
          }

          /* List Styles */
          .list-style {
              list-style: none;
          }

          /* Focus Styles */
          *:focus {
              outline: none;
              /* outline: 4px dotted #e67e22; */
              /* outline-offset: 8px; */
              /* box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); */
          }

          /* Logo Section */
          img {
              vertical-align: middle;
              width: 100%;
          }

          .logo {
              justify-self: center;
          }

          .logoimg-container {
              width: 100% !important;
              position: relative;
              max-width: 120px;
              margin: auto;
              padding: 1.04167vw 0 1.012vw;
          }

          .logo-img {
              align-content: center;
              display: inline-block;
          }

          .logo-head {
              background-color: #FFFFFF;
              background-size: cover;
              background-position: 70%;
              background-repeat: no-repeat;
          }
          /*====================*/
          /* HEADER SECTION */
          /*====================*/

          /* Header Styles */
          .section-header {
              background-color: #eeedf2;
              box-shadow: 0 0 6px #bbbbbb;
          }

          .header-container {
              max-width: 94rem;
              margin: 0 auto;
              padding-top: 2rem;
              padding-bottom: 2rem;
          }

          /* Menu Icon Styles */
          .menu-icon {
              width: 3rem;
              height: 3rem;
              color: #868686;
              cursor: pointer;
          }

          /* Menu Text Styles */
          .menu-text {
              color: #868686;
              font-size: 1.2rem;
              text-align: center;
          }

          .menu {
              justify-self: left;
          }

          .nav {
              justify-self: right;
          }

          /* Navigation Bar */
          .main-nav {
              display: flex;
              gap: 1.5rem;
              align-items: center;
              justify-content: center;
          }

          /* Navigation Text Styles */
          .nav-text:link,
          .nav-text:visited {
              font-size: 1.2rem;
              color: #868686;
              border-left: 1px solid #c4c4c4;
              padding-left: 1.2rem;
              line-height: 1.5;
              text-decoration: none;
              display: inline-block;
          }

          .nav-text:hover,
          .nav-text:active {
              color: #e1172b;
          }

          .nav-text-line {
              border-right: 1px solid #c4c4c4;
              padding-right: 1.2rem;
          }

          /* Navigation Icon Styles */
          .nav-icon {
              width: 2.5rem;
              height: 2.5rem;
              color: #868686;
          }

          .nav-icon:hover {
              color: #e1172b;
          }

          /*====================*/
          /* NAVIGATION SECTION */
          /*====================*/

          /* Navigation Section Styles */
          .section-navigation {
              padding: 2rem 2rem 1.5rem;
          }

          .navigation-box {
              display: flex;
              gap: 2rem;
              justify-content: center;
              margin-bottom: 7.2rem;
          }

          /* Navigation Text Styles */
          .navigation-text:link,
          .navigation-text:visited {
              font-size: 1.3rem;
              color: #6c6c6c;
              display: inline-block;
              text-decoration: none;
          }

          .navigation-text:hover,
          .navigation-text:active {
              color: #e1172b;
          }

          .nav-text-line-right {
              border-left: 1px solid #c4c4c4;
              padding-left: 2rem;
          }

          .navigation-text2:link,
          .navigation-text2:visited {
              color: #888888;
              text-decoration: underline;
              font-size: 1.1rem;
          }

          .navigation-text2:hover,
          .navigation-text2:active {
              color: #888888;
              text-decoration: none;
          }

          .arrow-color {
              color: #888888;
          }
          /*====================*/
          /* CTA SECTION */
          /*====================*/

          /* Link Styles */
          .homepage-link:link,
          .homepage-link:visited {
              color: #595959;
              text-shadow: #363636 0 0 0.1rem;
              text-decoration: underline;
          }

          .homepage-link:hover,
          .homepage-link:active {
              color: #c21000;
          }

          /* CTA Section Styles */
          .section-cta {
              background-image: url("https://image.email.groupeseb.com/lib/fe3611717564047d721177/m/1/6899afc1-67df-49f1-a1ac-e682fc3df82f.jpg");
              background-size: cover;
              background-position: 50%;
              background-repeat: no-repeat;
              padding: 7.5rem 0;
          }

          .cta-container {
              max-width: 160rem;
              margin: 0 auto;
          }

          .cta-headline {
              font-size: 6.4rem;
              line-height: 1.2;
              text-shadow: 2px 2px 10px rgb(0 0 0 / 0.6);
              color: #ffffff;
              text-align: center;
              font-family: din-condensed, sans-serif;
              display: block;
              padding-top: 3.6rem;
              padding-bottom: 3.6rem;
          }

          .headline-container {
              position: relative;
              max-width: 70rem;
              margin: 0 auto;
              opacity: 0; 
                animation: fadeIn 2s ease forwards;
          }

          .cta-red-headerline {
              color: #ff1027;
          }

          .cta-box {
              display: grid;
              grid-template-columns: 1fr 1fr;
              column-gap: 3rem;
              justify-content: center;
              align-items: center;
              opacity: 0; 
                animation: fadeIn 2s ease forwards;
          }

          /* Form Styles */
          .form-background-color {
              background-color: rgba(255, 255, 255, 0.75);
              padding: 6.5rem;
              margin-right: 11.5rem;
              margin-top: 3rem;
              border-radius: 20px;
          }

          .form-background-color h1 {
              color: #ff1027;
              margin-bottom: 2rem;
              font-size: 2.5rem;
              font-family: 'open sans', sans-serif;
              text-transform: uppercase;
              font-weight: 800;
              line-height: 1.2;
          }

          .form-background-color input,
          .form-background-color select {
              border: 1px solid #63636d;
              border-radius: 10px;
              height: 4.2rem;
              color: #000000;
              padding: 2rem 2rem 0.5rem 1rem;
              display: block;
              margin-bottom: 2rem;
              width: 100%;
              font-size: 1.4rem;
              font-family: inherit;
              letter-spacing: 0.2px;
              background-color: #ffffff;
          }

          .form-background-color select {
              width: 11rem;
              color: #555555;
          }

          .form-background-color button {
              background-color: #ff1027;
              font-family: open sans, sans-serif;
              color: #ffffff;
              border: none;
              font-weight: 800;
              text-transform: uppercase;
              width: 100%;
              padding: 1.2rem 3rem;
              border-radius: 1.5rem;
              cursor: pointer;
              margin-top: 4rem;
              margin-bottom: 4rem;
              font-size: 2rem;
          }

          .form-background-color button:hover {
              background-color: #ffffff; 
              color: #ff1027; 
              border: 2px solid #ff1027; 
          }

          .form-control:focus {
              border: 2px solid #ff1027; 
              color: #ff1027; 
              font-weight: bold;
          }

          .rellenado {
              color: #ff1027; 
              font-weight: bold; 
              border: 2px solid #ff1027; 
          }


          .checkbox-flex {
              display: flex;
              gap: 3.5rem;
              margin-top: 1.5rem;
          }

          .cta-text {
              color: #333333;
              font-size: 1.6rem;
              line-height: 2rem;
              font-family: EurostileNextLTPro-Regular, serif;
          }

          .form-background-color label {
              font-family: open sans, sans-serif;
              font-size: 1.2rem;
              line-height: 1.7;
              max-width: 90%;
              cursor: pointer;
              margin-bottom: 2rem;
          }

          input[type='checkbox'] {
              height: 20px;
              width: 20px;
              cursor: pointer;
          }

          /*====================*/
          /* SLIDER SECTION */
          /*====================*/

          /* Slider Styles */
          .CSSgal {
              position: relative;
              overflow: hidden;
          }

          .slider_middle {
              justify-content: center;
              align-items: center;
          }

          .mySlides {
            display: none;
          }

          img {
              vertical-align: middle;
          }

          /* Slideshow Container */
          .slideshow-container {
              position: right;
          
          }

          /* Caption Text */
          .text {
              color: #f2f2f2;
              font-size: 15px;
              padding: 8px 12px;
              position: absolute;
              bottom: 8px;
              width: 100%;
              text-align: center;
          }

          /* Number Text (1/3 etc) */
          .numbertext {
              color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0;
          }

          /* Dots/Bullets/Indicators */
          .dot {
              display: inline-block;
              width: 1.5rem;
              height: 1.5rem;
              background-color: #bbb;
              border-radius: 50%;
              margin: 0 5px;
              cursor: pointer;
              transition: background-color 0.6s ease;
          }

          .dot.active {
              background-color: #333;
          }

          /* Fading Animation */
          .fade {
              animation-name: fade;
              animation-duration: 1.5s;
          }

          @keyframes fade {
              from {
                  opacity: .4
              }
              to {
                  opacity: 1
              }
          }

          @keyframes fadeIn {
              from { opacity: 0; }
              to { opacity: 1; }
          }

            /* More slides? Add here more rules */

            .slide {
              max-width: 450px;
              height: auto;
              text-align: center;
            }
              
            /* new carousel styles */   
            .carousel-container {
              position: top;
              margin: 0 auto;
              overflow: hidden;
              width: 500px;
              height: 500px;
                    
            }

            .carousel-video {
              position: top;
              align-items:center;
              width: 500px;
              height: 500px;
              padding-bottom: 50px;
            }

            .carousel-slides {
              display: flex;
              transition: transform 1s ease-in-out;
            }

            .carousel-slide {
              flex: 0 0 100%;
            }

            .carousel-slide img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .carousel-dots {
              text-align: center;
              margin-top: 10px;
            }

            /*====================*/
            /* ICON SECTION */
            /*====================*/


            .section-icon {
              padding: 4rem 0;
            }

            .container-icon {
              max-width: 100%;
              margin: 0 16rem;
            }

            .grid--5--icon {
              display: grid;
              grid-template-columns: repeat(5, 1fr);
              column-gap: 8rem;
            }

            .icon-img {
              width: 4.8rem;
              height: 4.8rem;

            }

            .center-icon-content {
              text-align: center;
            }

            .icon-headline:link,
            .icon-headline:visited {
              color: #ff1027;
              font-size: 1.4rem;
              line-height: 1.2;
              margin-top: 1rem 0;
              padding: 0px 3rem;
              margin-top: 1rem;
              font-weight: 600;
              text-decoration: none;
              display: inline-block;
              min-height: 3.2rem;
            }

            .icon-description {
              font-size: 1.2rem;
              color: #888888;
              margin-top: 1.5rem;
              line-height: 1.5;
              padding: 0 1.2rem;
            }

            .icon-img:hover {
              opacity: 0.6;
            }

            /*====================*/
            /* FOOTER SECTION */
            /*====================*/

            .footer-box {
              display: grid;
              grid-template-columns: repeat(6, 1fr);
              column-gap: 7rem;
            }

            .section-footer {
              background-color: #eeedf2;
              border-top: 1px solid #c2c1bf;
            }

            .footer-container {
              max-width: 94rem;
              margin: 0 auto;
              padding-top: 2rem;
              padding-bottom: 2rem;
            }

            .footer-heading:link,
            .footer-heading:visited {
              font-family: EurostileNextLTPro-Light, arial, helvetica, sans-serif;
              font-weight: 400;
              font-size: 1.1rem;
              line-height: 1.3;
              text-transform: uppercase;
              text-decoration: none;
              color: #909090;
            }

            .footer-heading:active {
              text-decoration: underline;
            }

            .footer-heading1 {
              font-family: EurostileNextLTPro-Light, arial, helvetica, sans-serif;
              font-weight: 400;
              font-size: 1.1rem;
              line-height: 1.3;
              text-transform: uppercase;
              text-decoration: none;
              color: #909090;
            }

            .footer-nav:link,
            .footer-nav:visited {
              color: #909090;
              text-decoration: none;
              font-size: 1rem;
              line-height: 1.3;
            }

            .footer-nav:active {
              text-decoration: underline;
            }

            .grid--7 {
              grid-column: 5 / 6;
            }

            .footer-border {
              border-top: 1px solid #dadada;
            }

            .footer-nav img {
              max-width: 100%;
            }

            .footer-icon-image {
              transform: translate(0, 0);
            }

            .footer-nav-container {

              max-width: 92.5rem;
              margin: 0 auto;
            }

            .footer-nav-box {
              display: grid;
              grid-template-columns: 4fr 1fr;
              justify-content: center;
            }

            .footer-navigation:link,
            .footer-navigation:visited {
              color: #909090;
              text-decoration: none;
              font-size: 1rem;
              line-height: 1.3;
            }

            .footer-navigation:active {
              text-decoration: underline;
            }

            .footer-links span {
              color: #909090;
            }

            .footer-logo {
              width: 8.6rem;
              height: auto;
              display: block;
              margin-bottom: 1rem;
              margin-top: 2rem;
            }

            .footer-map-img {
              width: 8.6rem;
              height: auto;
              display: block;
              margin-bottom: 2.4rem;
            }

            .footer-icons {
              justify-self: right;
              margin-right: 3rem;
            }

            .link-style {
              text-align: center;
              margin-bottom: 1rem;
              display: block;
            }
              
            @keyframes snowfall {
              0% { transform: translateY(-100%); }
              100% { transform: translateY(100%); }
             } 

          .snowflake {
              position: fixed;
              top: -10%; /* Punto de inicio fuera de la pantalla */
              z-index: 9999;
              color: #fff; /* Color blanco para los copos de nieve */
              font-size: 1em; /* Tamaño del copo de nieve */
              opacity: 0.8; /* Hacerlos ligeramente transparentes */
              animation-name: snowfall;
              animation-duration: 10s; /* Duración de la caída */
              animation-timing-function: linear;
              animation-iteration-count: infinite; /* Hace que la animación se repita indefinidamente */
           }
              
              
              @media (max-width: 94em) {

              .form-background-color {
                margin-right: 4rem;
              }


            }

            @media (max-width: 81em) {
              .grid--5--icon {
                grid-template-columns: repeat(6, 1fr);
                column-gap: 2.4rem;
              }

              .GARANTIE-col {
                grid-row: 1;
                grid-column: span 2;
              }

              .REPARATUREN-col {
                grid-row: 1;
                grid-column: span 2;
              }

              .BEDIENUNGS-col {
                grid-row: 1;
                grid-column: span 2;
              }

              .HÄUFIG-col {
                grid-column: span 3;
                margin-top: 5rem;
                width: 64%;
                justify-self: right;
              }

              .KONTAKTSEITE-col {
                grid-column: span 3;
                margin-top: 5rem;
                width: 64%;
              }

              .icon-headline:link,
              .icon-headline:visited {
                padding: 0;
              }

              .icon-description {
                padding: 0;
              }

              .container-icon {
                margin: 0 4rem;
              }

            }

            @media (max-width:63em) {


              .grid--3--col {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 2.4rem;
              }

              .logo {
                justify-self: right;
                margin-right: 2rem;
              }

              .menu {
                margin-left: 2rem;
              }

              .nav {
                grid-column: 1 / -1;
                justify-self: center;
              }

              .footer-box {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 3.2rem;
                row-gap: 2rem;
                margin-left: 2rem;
                margin-right: 2rem;
              }

              .grid--7 {

                grid-column: 1 / 2;
              }

              .nav-text-border:link {
                border-left: 0px;
                padding-left: 0;
              }

              .navigation-box {
                flex-wrap: wrap;
              }

              .footer-links {
                margin-left: 2rem;
                margin-right: 2rem;
              }

              .cta-box {
                grid-template-columns: 1fr;
              }

              .form-background-color {
                max-width: 65rem;
                margin: 0 auto;
                padding: 3.5rem;
              }

              .slide {
                padding-top: 5rem;
              }

              .cta-headline {
                font-size: 65px;
                opacity: 0; 
                animation: fadeIn 2s ease forwards;
              }

              .section-cta {
                padding: 4rem 0;
              }

            }

            @media (max-width:44em) {

              .headline-container {
                margin: 0 3rem;
              }

              .cta-headline {
                font-size: 4.5rem;
              }

            }


            @media (max-width:44em) {

              .form-background-color {
                max-width: 100%;
                margin: 3rem 2rem 0;
                padding: 2.5rem;
              }

              .form-background-color label {
                margin-bottom: 0;
                font-size: 1.06rem;
                line-height: 1.4rem;
              }

              .checkbox-flex {
                gap: 1rem;

              }

              .CSSgal {
                padding-left: 30px;
                padding-right: 30px;

              }

              .cta-headline {
                font-size: 4.5rem;
              }

            }

            @media (max-width:38em) {
              .cta-headline {
                font-size: 3.5rem;
                line-height: 1.2;
                text-shadow: 2px 2px 10px rgb(0 0 0 / 0.6);
                color: #ffffff;
                text-align: center;
                font-family: din-condensed, sans-serif;
                display: block;
                padding-top: 3.6rem;
                padding-bottom: 3.6rem;
                padding-left: 2rem;
                padding-right: 2rem;
              }

              .headline-container {
                margin: 0 3rem;
              }

              .slide {
                width: 100%;
                height: auto;
                padding-left: 2rem;
                padding-right: 2rem;
              }

            }

            @media (max-width:30em) {

              .navigation-text:link,
              .navigation-text:visited {
                font-size: 1.1rem;
              }

              .icon-img {
                width: 3rem;
                height: 3rem;

              }

              .cta-headline {
                font-size: 2.5rem;
              }

              .icon-headline:link,
              .icon-headline:visited {
                font-size: 1rem;
              }

              .container-icon {
                margin: 0 1rem;
              }

              .icon-description {
                font-size: 0.9rem;

              }

              .CSSgal {
                padding-left: 40px;
                padding-right: 40px;

              }

              .slide {
                width: 100%;
                height: auto;
                padding-left: 2rem;
                padding-right: 2rem;
              }
            }