:root{
    --blue-color: #0B8FE1;
    --purple-color: #6807A1;
    --black-color: #1B1B1B;
    --platinum-green: #E6EDED;
    --bb-green: #042825;
    --cadet-green: #A6C1BF;
    --light-blue:#D7F0F6; 
}

*, 
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

a, 
button, 
.btn,
.mobile-nav-toggle {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none !important;
}

:focus {
    outline: none !important;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Figtree;
    overflow-x: hidden;
    filter: brightness(0.98);
}

.wrapper {
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
}

/* Buttons */

.btn{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    padding: 16px 48px;
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
}

.btn.light {
    border-radius: 32px;
    padding: 16px 48px;
    background: #fff;
    color: var(--blue-color);
}

.btn.gradient {
    border: 2px solid;
    border-color: var(--blue-color);
    color: var(--purple-color);
    border-radius: 24px;
    padding: 10px 32px;
    z-index: 1;
}

.btn.gradient-background{
    display: flex;
    justify-content: center;
    font-size: 20px;
    border-radius: 24px;
    padding: 16px 48px;
    width: 250px;
    border-radius: 32px;
    background: linear-gradient(90deg, var(--blue-color) 0%, var(--purple-color) 100%);

    color: #fff;
}

/* Header */

header {
    height: 45rem;
    width: 100%;
    background: url('/images/hdiw-images/ofs-hero-1920.avif') lightgray 50% / cover no-repeat;
    background-size: cover;  /* This makes the image cover the entire header */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat;
    position: relative;
}

header::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, 
        rgba(82, 41, 177, 0.3) 0%,  
        rgba(84, 39, 176, 0.15) 50%,   
        transparent 100%
    );
}

header .wrapper {
    position: relative;
    z-index: 1;
}

/* navigation section */

nav {
    width: 90%;
    max-width: 1280px;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding-top: 20px;
    justify-content: space-between;
    align-items: center;
}

nav .right{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
    z-index: 1;
}

nav ul a{
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    transition: color 0.3s ease;

    color: #fff;
}

nav ul li a:hover {
    color: var(--purple-color);
}




/* Hero section */

.hero-section{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rem;
    margin-bottom: 10rem;

    color: #fff;
}

.hero-section label{
    text-align: center;
    font-family: Inter;
    font-size: 17.325px;
    font-style: normal;
    font-weight: 500;
    line-height: 24.75px;
    padding: 4.95px 14.9px;
    border-radius: 19.8px;
    
    background: var(--Purple-50, #F4F3FF);
    color: var(--Purple-700, #5925DC);
}

.hero-section h2{
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 24px;

    color: #FFF;
}

.hero-section .right .btn.gradient-background{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 32px;
    border: 3px solid #fff;
}

/* Steps section */

.steps-section{
    display: flex;
    flex-direction: row;
    padding: 80px 0;
    gap: 40px;
}

.steps-section .steps-counter {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 40px;
    padding-top: 100px;
}

.steps-section .steps-counter::before {
    content: '';
    position: absolute;
    left: 35px;  /* This should be half of your number circle width (70px ÷ 2) */
    top: 170px;   /* Start from the bottom of first circle */
    width: 4px;  /* Width of the line */
    height: calc(2675px);
    background: transparent;
    border-left: 4px dashed var(--blue-color);  /* Line color */
    stroke-width: 4px;
    z-index: -1;
}

.steps-section .steps-counter .background-ball.first {
    margin-top: 0;
}

.steps-section .steps-counter .background-ball.second {
    margin-top: 490px;
}

.steps-section .steps-counter .background-ball.third {
    margin-top: 350px;
}

.steps-section .steps-counter .background-ball.fourth {
    margin-top: 400px;
}

.steps-section .steps-counter .background-ball.fifth {
    margin-top: 1000px;
}


.steps-section .steps-counter .background-ball{
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    display: flex;
    width: 70px;
    height: 70px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    gap: 10px;

    position: relative;
    z-index: 1;

    color: var(--Base-White, #FFF);
    background: linear-gradient(114deg, var(--blue-color) 0%, var(--purple-color) 100%);
}

.steps-section .steps-counter .background-ball svg{
    width: 2737px;
    height: 0px;
    transform: rotate(90deg);
    flex-shrink: 0;

    stroke-width: 4px;
    stroke: #197BD7;
}

.steps-section .content{
    display: flex;
    flex-direction: column;
    gap: 160px;
    padding: 0 40px 0 0;
    flex: 1;
}

.steps-section .content img{
    width: 565px;
    position: relative;
    z-index: 2;
}

.steps-section .content .subsection{
    display: flex;
    flex-direction: row;
    gap: 81px;
}

.steps-section .content .subsection .subsection-content{
    display: flex;
    flex-direction: column;
    max-width: 496px;
    gap: 12px;

}

.steps-section .content  .subsection-content h1{
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    padding-top: 83px;

    color: var(--black-color);
}

.steps-section .content  .subsection-content p{
    display: flex;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;


    color: var(--green-color);
}

.steps-section .content .subsection.first .subsection-content{
    max-width: 496px;
}

.steps-section .content .subsection.second{
    gap: 61px;
}

.steps-section .content .subsection.third{
    gap: 40px;
}

.steps-section .content .subsection.third .subsection-content{
    max-width: 510px;
}

/* Subsection fourth */

.steps-section .content .subsection.fourth{
    display: flex;
    flex-direction: column;
    padding: 56px 0;
    
}

.steps-section .content .subsection.fourth h1{
    font-family: Figtree;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;

    color: var(--black-color);
}

.steps-section .content .subsection.fourth .top{
    display: flex;
    flex-direction: row;
    gap: 40px;

}

.steps-section .content .subsection.fourth .top .content{
    padding: 20px;
    gap: 16px;
    padding-bottom: 62px;
    border-radius: 0 0 8px 8px;

    background: var(--light-blue);
}

.steps-section .content .subsection.fourth .top h2{
    font-family: Figtree;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    padding: 0;

    color: var(--black-color);
}

.steps-section .content .subsection.fourth .top p{
    font-family: Figtree;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    padding: 0;

    color: var(--black-color);
}

.steps-section .content .subsection.fourth .top .image-container{
    display: flex;
    width: 565px;
    height: 156px;
}


.steps-section .content .subsection.fourth .top .image-container img{
    height: 100%;
    object-fit: cover;
    object-position:top;
    border-radius: 8px 8px 0 0;
}

.steps-section .content .subsection.fourth .top .left,
.steps-section .content .subsection.fourth .top .right {
    width: 565px;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
}

.steps-section .content .subsection.fourth .top .left .content,
.steps-section .content .subsection.fourth .top .left .content{
    display: flex;
    flex-direction: column;
    height: 100%;
}


.steps-section .content .subsection.fourth .bottom{
    display: flex;
    flex-direction: row;
    gap: 40px;

}

.steps-section .content .subsection.fourth .bottom .content{
    padding: 20px;
    gap: 16px;
    padding-bottom: 62px;
    border-radius: 0 0 8px 8px;
    height: 204px;

    background: var(--light-blue);
}

.steps-section .content .subsection.fourth .bottom h2{
    font-family: Figtree;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    padding: 0;

    color: var(--black-color);
}

.steps-section .content .subsection.fourth .bottom p{
    font-family: Figtree;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    padding: 0;

    color: var(--black-color);
}

.steps-section .content .subsection.fourth .bottom .image-container{
    display: flex;
    width: 565px;
    height: 156px;
}


.steps-section .content .subsection.fourth .bottom .image-container img{
    height: 100%;
    object-fit: cover;
    object-position:top;
    border-radius: 8px 8px 0 0;
}

.steps-section .content .subsection.fourth .bottom .left,
.steps-section .content .subsection.fourth .bottom .right {
    width: 565px;
    overflow: hidden;
}




/* Subsection fifth */


.steps-section .subsection.fifth{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

.steps-section .subsection.fifth h1{
    font-family: Figtree;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;

    color: var(--black-color);
}

.steps-section .subsection.fifth .content{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between; 
    gap: 40px;
}

.steps-section .subsection.fifth .content img{
    width: 363px;
    height: 243px;
    object-fit: cover; /* Ensure images cover the area properly */
    border-radius: 8px 8px 0 0;
}

.steps-section .subsection.fifth .content h2{
    font-family: Figtree;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    align-self: stretch;

    color: var(--black-color);
}

.steps-section .subsection.fifth .content p{
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    align-self: stretch;

    color: var(--black-color);
}

.steps-section .subsection.fifth .content .content-subsection{
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--light-blue);
    border-radius: 0 0 8px 8px;
    flex: 1;
    gap: 16px;
}

.steps-section .subsection.fifth .content .left{
    display: flex;
    flex-direction: column;
    width: 22.688rem; /* Set fixed width to match original img width */
    height: 100%;
}

.steps-section .subsection.fifth .content .middle{
    display: flex;
    flex-direction: column;
    width: 363px; /* Set fixed width to match original img width */
    height: 100%;
}

.steps-section .subsection.fifth .content .right{
    display: flex;
    flex-direction: column;
    width: 363px; /* Set fixed width to match original img width */
    height: 100%;
}

/* End of steps section */

.benefits-section{
    padding-top: 95px;
    padding-bottom: 114px;
    background: var(--Primary, linear-gradient(114deg, var(--blue-color) 0%, var(--purple-color) 100%));
    justify-content: center;
    align-items: center;
}

.benefits-section .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.benefits-section .header{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.benefits-section .header h1,h2{
    margin: 0;
    padding: 0;
}

.benefits-section .header h1{
    text-align: center;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--Platinum-Green, #E6EDED);
}

.lang-de .benefits-section .header h1 {
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    padding: 0;
    color: #fff;
}

.lang-de .benefits-section .header h2 {
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    padding: 0;
}

.lang-de .benefits-section p {
    font-size: 28px;
    line-height: normal;
}

.benefits-section .header h2{
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--Platinum-Green, #E6EDED);
}

.benefits-section .header p{
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--Platinum-Green, #E6EDED);
}

.benefits-section .header .header-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.benefits-section .body-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.benefits-section .btn {
    position: relative;
    margin: 15px ;
    margin-top: 60px;
    border-radius: 32px;
    border: none;
    max-width: 194px;

    background: #fff;
}

.benefits-section .btn span {
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    background: linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

 /* Footer section */

 .footer-container{
    background: #D7F0F6;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.footer-container .wrapper {
    position: relative;
    z-index: 2; /* Ensures content stays above the SVG */
}

.footer-container .footer-section {
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
}

.footer-section .footer-upper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 40px 0;
}

.footer-container .footer-section .footer-upper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 114px;
    padding: 0;
    margin-top: 84px;
}

.footer-container .footer-section .footer-upper .contact h4{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;

    background: var(--Primary, linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-container .footer-section .footer-upper .contact p{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 6px;
    margin: 0;

    color: #1B1B1B;
}

.footer-container .footer-section .footer-upper ul{
    display: flex;
    flex-direction: row;
    list-style: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    gap: 64px;


    color: #1B1B1B;
}

.footer-container .footer-section .footer-upper ul a{
    text-decoration: none;
    color: #1B1B1B;
}

.footer-container .footer-section .footer-upper .btn.gradient-background{
    display: flex;
    justify-content: center;
    padding: 12px 20px; 
    gap: 10px;
    width: 197px;

    /* text in button */
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;

    color: #fff;
  }

  .footer-container .footer-section .footer-bottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 67px;
  }

  .footer-container .footer-section .footer-bottom img {
    width: 130px;
    padding: 0;
    padding-bottom: 20px;
    margin: 0;
}

.footer-container .footer-section .footer-bottom .content-section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 13px;
}

.footer-container .footer-section .footer-bottom .content-section p{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    color: #1B1B1B;
}

.footer-container .footer-section .footer-bottom .content-section a{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    color: #1B1B1B;
}

/* Mobile styling */
@media (max-width: 768px) {
    /* Remove all fixed widths */
    .steps-section,
    .benefits-section,
    .steps-section .content img,
    .steps-section .content .subsection,
    .steps-section .content .subsection .subsection-content,
    .steps-section .content .subsection .subsection-content h1,
    .steps-section .content .subsection .subsection-content p,
    .steps-section .content .subsection.fourth .top .left,
    .steps-section .content .subsection.fourth .top .right,
    .steps-section .content .subsection.fourth .bottom .left,
    .steps-section .content .subsection.fourth .bottom .right,
    .steps-section .subsection.fifth .content img,
    .steps-section .subsection.fifth .content .left,
    .steps-section .subsection.fifth .content .middle,
    .steps-section .subsection.fifth .content .right {
        width: 100%;
        max-width: 100%;
    }

    /* Fix nested containers */
    .steps-section .content,
    .steps-section .content .subsection,
    .steps-section .content .subsection.fourth .top,
    .steps-section .content .subsection.fourth .bottom,
    .steps-section .subsection.fifth .content {
        flex-direction: column;
        gap: 80px;
    }

    /* Remove fixed dimensions */
    .steps-section .content .subsection .subsection-content,
    .steps-section .content .subsection.fourth .top .image-container,
    .steps-section .content .subsection.fourth .bottom .image-container,
    .steps-section .subsection.fifth .content img {
        width: 100%;
        height: auto;
        position: relative;
    }

    header::before {
        display: none;
    }

    
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .wrapper {
        max-width: 90%;
        margin: 0 auto;
        width: 100%;
        overflow-x: hidden;
    }

    body.menu-open {
        overflow: hidden;
        height: 100vh;
        position: fixed;
        width: 100%;
    }

    .btn.gradient-background {
        border: none; /* Remove the black border */
    }

    .mobile-menu {
        padding: 0;
        width: 100%;
        margin: 0;
    }

    .mobile-menu .menu-header {
        position: relative;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2% 5%;
        margin-top: 9px;
        background: transparent;
    }
    
    
    .mobile-menu .menu-header .menu-logo {
        width: 87px;
    }
    
    .mobile-menu .menu-header .mobile-nav-toggle {
        margin: 0;
        padding: 8px;
    }
    
    .mobile-menu {
        padding: 0;
        width: 100%;
        margin: 0;
    }
    
    

    
    /* Navigation */
    nav {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 2% 5%;
        background: #fff;
        position: relative;
    }

    nav ul {
        display: none;
    }

    nav .btn.gradient {
        display: none;
    }

    nav .logo {
        display: none;
    }

    nav .logo-mobile {
        display: flex;
        order: 1;
        width: 87px;
        margin: 0;
    }

    nav .mobile-nav-toggle {
        order: 2;
        padding: 0;
    }

    .sr-only {
        position: absolute;
        width: 24px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        background: #042825;
    }

    .mobile-nav-toggle {
        background: none;
        margin-left: auto;
        border: none;
        margin: 0;
        cursor: pointer;
        outline: none;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        z-index: 9999;
    }

    .mobile-nav-toggle:focus {
        outline: none;
    }

    .hamburger {
        display: none;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--black-color);
        border-radius: 3px;
        transition: all 0.3s ease-in-out; 
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        transition: transform 0.3s ease-in-out;
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        transition: transform 0.3s ease-in-out;
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        background: linear-gradient(114deg, var(--blue-color) 0%, var(--purple-color) 100%);
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
        z-index: 1000;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    .mobile-menu img{
        width: 87px;
    }

    .mobile-menu[data-visible="true"] {
        transform: translateX(0%);
        visibility: visible;
        opacity: 1;
    }
    

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: center;
        list-style: none;
        padding-left: 0;
    }

    nav ul a {
        font-family: Figtree;
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }
    

    .mobile-nav-list .btn {
        position: relative;
        width: 194px;
        margin: 15px 0;
        background: #fff;
        border-radius: 32px;
        border: none;
    }

    .mobile-nav-list .btn span {
        font-family: Figtree;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        background: linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 1;
    }
    

    .mobile-nav-list .btn.gradient-background{
        border: none;
    }

    /* Header section */
    header {
        width: 100%;
        height: 20%;
        background-image: url('/images/hdiw-images/hdiw-hero-mobile-769.avif');
        background-size: cover;
        background-position:99% 20%;
        background-repeat: no-repeat;
        position: relative;
    }

    .hero-section {
        flex-direction: column;
        padding: 0;
        align-items: flex-start;
        margin-top: 5rem;
        margin-bottom: 2rem;
        gap: 24px;
    }

    .hero-section .left {
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        padding-top: 40px;
        gap: 16px;
    }

    .hero-section .left label {
        padding: 4px 12px;
        text-align: center;
        font-family: Inter;
        font-size: 17.325px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.75px; /* 142.857% */

        color: var(--Purple-700, #5925DC);

    }

    .hero-section .left h2 {
        margin-top: 16px;
        font-family: Figtree;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        color: #000;
    }

    .hero-section .right {
        padding: 0;
        padding-bottom: 42px;
        width: 100%;

        gap: 16px;
    }
    .hero-section .right .btn.gradient-background {
        padding: 16px 48px;
        width: 100%;
        height: 56px;
        font-size: 18px;
    }
    

    /* Steps section */
    .steps-section {
        padding: 48px 0;
        gap: 16px;
    }

    .steps-section .steps-counter {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 0;
    }
    
    .steps-section .steps-counter::before {
        content: '';
        position: absolute;
        left: 20px;  /* This should be half of your number circle width (70px ÷ 2) */
        top: 130px;   /* Start from the bottom of first circle */
        width: 4px;  /* Width of the line */
        height: 4090px;
        background: transparent;
        border-left: 4px dashed var(--blue-color);  /* Line color */
        stroke-width: 4px;
        z-index: -1;
    }

    .lang-de .steps-section .steps-counter::before {
        content: '';
        position: absolute;
        left: 20px;  /* This should be half of your number circle width (70px ÷ 2) */
        top: 130px;   /* Start from the bottom of first circle */
        width: 4px;  /* Width of the line */
        height: 4200px;
        background: transparent;
        border-left: 4px dashed var(--blue-color);  /* Line color */
        stroke-width: 4px;
        z-index: -1;
    }
    
    .steps-section .steps-counter .background-ball.first {
        margin-top: 120px;
    }

    .lang-de .steps-section .steps-counter .background-ball.first {
        margin-top: 120px;
    }
    
    .steps-section .steps-counter .background-ball.second {
        margin-top: 510px;
    }

    .lang-de .steps-section .steps-counter .background-ball.second {
        margin-top: 510px;
    }
    
    .steps-section .steps-counter .background-ball.third {
        margin-top: 500px;
    }

    .lang-de .steps-section .steps-counter .background-ball.third {
        margin-top: 500px;
    }

    .steps-section .steps-counter .background-ball.fourth {
        margin-top: 340px;
    }

    .lang-de .steps-section .steps-counter .background-ball.fourth {
        margin-top: 400px;
    }

    .steps-section .steps-counter .background-ball.fifth {
        margin-top: 2400px;
    }
    
    .lang-de .steps-section .steps-counter .background-ball.fifth {
        margin-top: 2440px;
    }
    
    
    .steps-section .steps-counter .background-ball{
        font-size: 23px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    
        display: flex;
        width: 18px;
        height: 18px;
        padding: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        gap: 10px;
    
        position: relative;
        z-index: 1;
    
        color: var(--Base-White, #FFF);
        background: linear-gradient(114deg, var(--blue-color) 0%, var(--purple-color) 100%);
    }
    
    .steps-section .steps-counter .background-ball svg{
        width: 2737px;
        height: 0px;
        transform: rotate(90deg);
        flex-shrink: 0;
    
        stroke-width: 4px;
        stroke: #197BD7;
    }

    .steps-section .content {
        padding: 0;
        gap: 120px;
        margin: 0;
    }

    .steps-section .content .subsection .subsection-content{
        order: 1;
        max-width: 25rem;
    }

    .steps-section .content .subsection.first .subsection-content {
        max-width: 25rem;
    }

    .steps-section .content .subsection.third .subsection-content {
        max-width: 25rem;
    }

    .steps-section .subsection.fifth {
        max-width: 25rem;
    }

    .steps-section .content .subsection img{
        order: 2;
        width: 25rem;
    }

    .steps-section .content .subsection .subsection-content h1 {
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding-top: 0;
        color: var(--BB-Green, #042825);
    }

    .steps-section .content .subsection .subsection-content p {
        font-family: Figtree;
        font-size: 25px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        color: var(--Warm-Green, #0A433E);
    }

    .steps-section .content .subsection.first,
    .steps-section .content .subsection.second,
    .steps-section .content .subsection.third,
    .steps-section .content .subsection.fourth{
        gap: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .steps-section .content .subsection.fourth {
        gap: 80px;
        width: 25rem;
    }


    /* Subsection fourth */

    .steps-section .content .subsection.fourth .top .left,
    .steps-section .content .subsection.fourth .top .right,
    .steps-section .content .subsection.fourth .bottom .left,
    .steps-section .content .subsection.fourth .bottom .right {
        overflow: hidden;
        border-radius: 0 0 8px 8px; 
    }

    .steps-section .content .subsection.fourth h1 {
        font-size: 30px;
    }

    .steps-section .content .subsection.fourth .top .content,
    .steps-section .content .subsection.fourth .bottom .content {
        padding: 25px;
        background: #D7F0F6;
        border-radius: 0 0 8px 8px;
        min-height: 270px;
        display: flex;
        flex-direction: column;
    }

    .steps-section .content .subsection.fourth .top h2,
    .steps-section .content .subsection.fourth .bottom h2 {
        font-size: 28px;
    }

    .steps-section .content .subsection.fourth .top p,
    .steps-section .content .subsection.fourth .bottom p {
        font-size: 25px;
        overflow-y: auto;
    }

    /* Subsection fifth */
.steps-section .subsection.fifth .left,
.steps-section .subsection.fifth .middle,
.steps-section .subsection.fifth .right {
    overflow: hidden;
    border-radius: 0 0 8px 8px; 
    order: 2;
}

.steps-section .subsection.fifth h1 {
    order: 1;
    align-self: stretch;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--BB-Green, #042825);
}

.steps-section .subsection.fifth .content {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 80px;


}

.steps-section .subsection.fifth .content .left,
.steps-section .subsection.fifth .content .middle,
.steps-section .subsection.fifth .content .right{
    background: #D7F0F6;

}

.steps-section .subsection.fifth .content .left img,
.steps-section .subsection.fifth .content .middle img,
.steps-section .subsection.fifth .content .right img {
    order: 1;
}

.steps-section .subsection.fifth .content-subsection {
    order: 2;
    padding: 16px;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
}



.steps-section .subsection.fifth .content .left h2,
.steps-section .subsection.fifth .content .middle h2,
.steps-section .subsection.fifth .content .right h2 {
    order: 1;
    font-size: 28px;
}

.steps-section .subsection.fifth .content .left p,
.steps-section .subsection.fifth .content .middle p,
.steps-section .subsection.fifth .content .right p {
    font-size: 25px;
    overflow-y: auto;
    order: 2;
}

/* Benefits section */
.benefits-section .wrapper {
    max-width: 100%;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.benefits-section .header .header-content h1,
.benefits-section .header .header-content h2{
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0 15px;

    color: var(--Base-White, #FFF);
}

.benefits-section .header p{
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    color: var(--Base-White, #FFF);
}

.benefits-section .btn {
    position: relative;
    margin: 15px 0;
    margin-top: 20px;
    background: #fff;
    border-radius: 32px;
    border: none;
}

.benefits-section .btn span {
    font-family: Figtree;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

    /* Footer section */

    .footer-container .footer-section {
        display: flex;
        flex-direction: column;
        margin: 28px 0 24px 0;
        width: 100%;
        padding: 0;
    }
    
    .footer-container .footer-section .footer-upper {
        display: flex;
        flex-direction: column;
        margin: 0;
        width: 100%;
        gap: 24px;
        align-items: center;
    }
    
    .footer-container .footer-section .footer-upper > * {
        width: 100%;
    }

    .footer-container .footer-section .footer-upper .nav-list ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        width: 100%;
        gap: 24px;
        padding: 0;

        font-family: Figtree;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        color: #1B1B1B;

    }

    .footer-container .footer-section .footer-upper .submit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        
        order: 2;
    }

    .footer-container .footer-section .footer-upper .submit .btn{
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;

        color: var(--Content-Reversed, #FFF);
    }
    
    .footer-container .footer-section .footer-upper .contact{
        order: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-container .footer-section .footer-bottom {
        padding-top: 23px;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px;
        
        align-items: center;
    }

    .footer-bottom img{
        width: 37%;
    }

    .footer-bottom .content-section{
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-bottom: 24px;
    }

    .footer-bottom .content-section p{
        margin: 0;
    }



}

@media (max-width: 768px) {
    .hamburger {
        display: flex; /* Show only on mobile */
        flex-direction: column;
        gap: 5px;
        width: 25px;
        pointer-events: none;
    }

    .mobile-nav-toggle {
        display: flex;
        z-index: 9999;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    nav .right{
        display: none;
    }

}

/* Laptop screen */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-nav-toggle,
    .mobile-accordion,
    .mobile-menu,
    .logo-mobile,
    .mobile-nav-list,
    .hamburger,
    .sr-only,
    .smaller-image,
    .bigger-image {
        display: none !important;
    }

    :root, html {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

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

    body {
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

   

    header {
        height: 100vh;
        width: 100%;
    }
    
    .wrapper {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 5%;
    }
    
    .hero-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0; /* Adjust vertical padding */
        gap: 40px; /* Reduce gap */
    }

    /* Steps section */

    .steps-section {
        display: flex
    ;
        flex-direction: row;
        padding: 80px 0;
        gap: 30px;
    }

    .steps-section .content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .steps-section .content .subsection-content h1 {
        font-size: 35px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding-top: 3px;

        color: var(--black-color);
    }

    .steps-section .content .subsection-content p {
        display: flex;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;

        color: var(--green-color);
    }

    .steps-section .content .subsection.first{
        padding-top: 5%;
    }

    .steps-section .content .subsection.first,
    .steps-section .content .subsection.second,
    .steps-section .content .subsection.third {
        gap: 40px;
    }

    .steps-section .steps-counter::before {
        content: '';
        position: absolute;
        left: 25px;  /* This should be half of your number circle width */
        top: 210px;   /* Start from the bottom of first circle */
        width: 4px;  /* Width of the line */
        height: calc(2150px);
        background: transparent;
        border-left: 4px dashed var(--blue-color);  /* Line color */
        stroke-width: 4px;
        z-index: -1;
    }
    
    .steps-section .steps-counter .background-ball.first {
        margin-top: 6rem;
    }
    
    .steps-section .steps-counter .background-ball.second {
        margin-top: 20rem;
    }
    
    .steps-section .steps-counter .background-ball.third {
        margin-top: 20rem;
    }
    
    .steps-section .steps-counter .background-ball.fourth {
        margin-top: 19rem;
    }
    
    .steps-section .steps-counter .background-ball.fifth {
        margin-top: 52rem;
    }
    
    
    .steps-section .steps-counter .background-ball{
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    
        display: flex;
        width: 50px;
        height: 50px;
        padding: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        gap: 10px;
    
        position: relative;
        z-index: 1;
    
        color: var(--Base-White, #FFF);
        background: linear-gradient(114deg, var(--blue-color) 0%, var(--purple-color) 100%);
    }
    
    .steps-section .steps-counter .background-ball svg{
        width: 2737px;
        height: 0px;
        transform: rotate(90deg);
        flex-shrink: 0;
    
        stroke-width: 4px;
        stroke: #197BD7;
    }
    

    /* Hero section position adjustment */
    .hero-section{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    
        color: #fff;
    }

    /* Content width control for subsections */

    .steps-section .content .subsection.first .subsection-content,
    .steps-section .content .subsection.second .subsection-content,
    .steps-section .content .subsection.third .subsection-content{
        max-width: 21.75rem;
    }

    .steps-section .content {
        max-width: 1200px;
        margin: 0;
        padding: 0;
    }

    .steps-section .content .subsection.subsection.first img,
    .steps-section .content .subsection.subsection.second img,
    .steps-section .content .subsection.subsection.third img{
        max-width: 38%;
        width: 100%; 
    }

    

    /* Subsection content width control */
    .steps-section .content .subsection .subsection-content {
        max-width: 450px;
        justify-content: center;
        
        flex-shrink: 0;
    }

    /* Fourth subsection adjustments */

    .steps-section .content .subsection {
        gap: 30px;
    }

    .steps-section .content .subsection.fourth h1{
        font-family: Figtree;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;

        color: var(--black-color);
    }

    .steps-section .content .subsection.fourth img {
        max-width: 28.125rem;      
    }

    .steps-section .content .subsection.fourth .top .image-container {
        max-width: 28.125rem;
    }
    
    .steps-section .content .subsection.fourth .top .content {
        max-width: 28.125rem;
        align-items: flex-start;
        padding-right: 2px;
        background: var(--light-blue);
    }

    .steps-section .content .subsection.fourth .top .left,
    .steps-section .content .subsection.fourth .top .right,
    .steps-section .content .subsection.fourth .bottom .left,
    .steps-section .content .subsection.fourth .bottom .right {
        width: 35%;
        border-radius: 0 0 8px 8px;
    }

    .steps-section .content .subsection.fourth .top .image-container img {
        width: 25.6rem;
        border-radius: 8px 8px 0 0;
    }

    .steps-section .content .subsection.fourth .bottom .image-container img {
        width: 25.6rem;
        border-radius: 8px 8px 0 0;
    }

    .steps-section .content .subsection.fourth .top .content {
        padding-bottom: 30px;
    }

    .steps-section .content .subsection.fourth .top h2 {
        font-family: Figtree;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .content .subsection.fourth .top p {
        font-family: Figtree;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .content .subsection.fourth .bottom h2 {
        font-family: Figtree;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .content .subsection.fourth .bottom p {
        font-family: Figtree;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .content .subsection.fourth .bottom .content {
        padding-bottom: 0px;
    }

    .steps-section .content .subsection.fourth .bottom .content {
        max-height: 15rem;
    }

    /* Fifth subsection adjustments */

    

    .steps-section .subsection.fifth h1{
        font-family: Figtree;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;

        color: var(--black-color);
    }

    .steps-section .subsection.fifth .content {
        gap: 30px;
        justify-content: flex-start;
    }

    .steps-section .subsection.fifth .content .left, 
    .steps-section .subsection.fifth .content .middle, 
    .steps-section .subsection.fifth .content .right {
        width: 16.875rem;
    }

  

    .steps-section .subsection.fifth .content img {
        width: 100%;
        height: auto
        
    }

    .steps-section .subsection.fifth .content h2 {
        font-family: Figtree;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .subsection.fifth .content p {
        font-family: Figtree;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: var(--black-color);
    }

    .steps-section .subsection.fifth .content .content-subsection {
        display: flex;
        flex-direction: column;
        padding: 15px;
        background: var(--light-blue);
        border-radius: 0 0 8px 8px;
        flex: 1;
        gap: 1rem;
    }

    /* Benefits section */

    .benefits-section .header {
        gap: 20px;
    }

    .benefits-section .header h1 {
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: #fff;
    }

    .benefits-section .header h2 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: #fff;
    }

    .benefits-section .header p {
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Figtree;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: var(--Platinum-Green, #E6EDED);
    }

    .lang-de .benefits-section .header h1 {
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: #fff;
    }

    .lang-de .benefits-section .header h2 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0;
        padding: 0;
        color: #fff;
    }

    .lang-de .benefits-section .header p {
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Figtree;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: var(--Platinum-Green, #E6EDED);
    }

    .benefits-section .btn {
        position: relative;
        margin: 15px 0;
        margin-top: 50px;
        background: #fff;
        border-radius: 32px;
        border: none;
    }

        .benefits-section .btn span {
        font-family: Figtree;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        background: linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 1;
    }

    /* Footer */

    .footer-container {
        width: 100%;
    }
    
    .footer-container .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 0;
    }

    .footer-container {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    
    .footer-upper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-container .footer-section .footer-upper {
        margin-top: 0;
    }

    .footer-container .footer-section .footer-upper .contact h4 {
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
        background: var(--Primary, linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .footer-container .footer-section .footer-upper .contact p {
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-top: 6px;
        margin: 0;
        color: #1B1B1B;
    }

    .footer-container .footer-section .footer-upper ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        gap: 64px;
        color: #1B1B1B;
    }

    .footer-container .footer-section .footer-bottom img {
        width: 7rem;
        padding: 0;
        margin: 0;
        margin-bottom: 1rem;
    }
    
}

/* Laptop and up */
@media (min-width: 769px){
    .mobile-nav-toggle,
    .mobile-accordion,
    .mobile-menu,
    .logo-mobile,
    .mobile-nav-list,
    .hamburger,
    .sr-only,
    .smaller-image,
    .bigger-image {
        display: none !important;
    }

    :root, html {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

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

    body {
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }


    header {
        height: 50rem;
        width: 100%;
    }
    
    
}


@media (min-width:1025px) and (max-width: 1355px) {
    
    .wrapper{
        max-height: 2700px;
    }
    
    
    .steps-section {
        transform: scale(0.75); 
        transform-origin: top left;
    }

    .steps-section .steps-counter .background-ball.second {
        margin-top: 500px;
    }

    .steps-section .steps-counter .background-ball.third {
        margin-top: 350px;
    }

    .steps-section .steps-counter .background-ball.fourth {
        margin-top: 400px;
    }

    .steps-section .steps-counter .background-ball.fifth {
        margin-top: 1000px;
    }

    /* Benefits section */

    .benefits-section .header .header-content {
        display: flex
    ;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .benefits-section .header .header-content h1{
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: var(--Base-White, #FFF);
    }

    .benefits-section .header .header-content h2{
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: var(--Base-White, #FFF);
    } 

    .benefits-section .header p {
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Base-White, #FFF);
    }

    .benefits-section .btn {
        position: relative;
        max-width: 500px;
        margin: 15px 0;
        margin-top: 40px;
        background: #fff;
        border-radius: 32px;
        border: none;
    }


    .benefits-section .btn span {
        font-family: Figtree;
        font-size: 21px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        background: linear-gradient(114deg, #0B8FE1 0%, #6807A1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 1;
    }
}


@media (min-width:769px) and (max-width: 1024px) {

    .btn.gradient {
        font-size: 14px;
    }

    .hero-section .right .btn.gradient-background {
        font-size: 16px;
        width: 190px;
    }

    
    .wrapper{
        max-height: 2500px;
    }

    
    
    nav .logo img {
        width: 100px;
    }
    
    .steps-section {
        transform: scale(0.75); 
        transform-origin: top left;
    }

    .steps-section .content .subsection.subsection.first img,
    .steps-section .content .subsection.subsection.second img,
    .steps-section .content .subsection.subsection.third img{
        width: 400px;
    }

    nav ul a {
        font-size: 17px;
    }

    .hero-section h2 {
        font-size: 45px;
    }

    .hero-section label{
        font-size: 16px;
    }
}


@media (max-width: 505px){
    .steps-section{
        transform: scale(0.85);
        transform-origin: top left;
        max-height: 340rem;
    }

    .lang-de .steps-section{
        max-height: 340rem;
    }
}

@media (max-width: 435px){
    .steps-section{
        transform: scale(0.75);
        transform-origin: top left;
        max-height: 300rem;
    }

    .lang-de .steps-section{
        max-height: 300rem;
    }
}

@media (max-width: 380px){
    .steps-section{
        transform: scale(0.65);
        transform-origin: top left;
        max-height: 260rem;
    }

    .lang-de .steps-section{
        max-height: 260rem;
    }
}

@media (max-width: 335px){
    .steps-section{
        transform: scale(0.60);
        transform-origin: top left;
        max-height: 240rem;
    }

    .lang-de .steps-section{
        max-height: 240rem;
    }
}