:root {
    --branding-color: #ff7404;
    --secondary-color: #2c2c2c;
    --header-height: 65px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
a {
    text-decoration: none;
}
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--secondary-color);
}
.scroll-offset {
    position: absolute;
    top: calc(-1 * var(--header-height));
}
.section-headline {
    position: absolute;
    top: 60px;
    left: 5vw;
    z-index: 11;
}
.section-headline h4 {
    font-size: 22.5px;
    font-weight: 600;
    line-height: 30px;
    padding-right: 10px;
    text-transform: uppercase;
}
.section-headline-underline {
    height: 4.5px;
    width: calc(100% + 5vw);
    background-color: var(--branding-color);
    margin-left: -5vw;
    transform: skew(-20deg) translateX(-3px);
}
.background-image{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
html{
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    background-color: #FAFAFA;
}

.mobile-menu{
    position: fixed;
    top: -100%;
    left: 0;
    width: 100vw;
    background-color: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 90;
    transition: all .4s ease;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mobile-menu.active{
    top: 0;
}
.mobile-menu a{
    color: white;
    margin: 20px 0;
    font-size: 19px;
}
.header-kontakt-button-mobile{
    width: 180px;
    height: 50px;
    background-color: var(--branding-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-25deg);
}
.header-kontakt-button-mobile span{
    color: white;
    font-weight: 600;
    font-weight: 13.5px;
    transform: skewX(25deg);
}
/* ----- HEADER ------------------------------------------------------ */
header{
    position: fixed;
    width: 100%;
    height: 90px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 100;
    transition: all .3s ease;
}
.header-logo-container{
    background-color: var(--secondary-color);
    width: 220px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: skewX(-25deg) translateX(-12px);
    transition: all .3s ease;
    cursor: pointer;
}
.header-logo-container img{
    position: absolute;
    top: calc(0.5 * 90px - 38px);
    left: 75px;
    height: 25px;
    transform: skewX(25deg);
    transition: all .3s ease;
}
.header-logo-container span{
    color: white;
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.8px;
    margin-top: 25px;
    transform: skewX(25deg) translateX(8px);
}
.header-logo-container-2{
    transform: skewX(-25deg) translateX(-100px);
}
.header-logo-container-2 img{
    top: calc(0.5 * 90px - 34px);
    left: 120px;
}
.header-logo-container-2 span{
    display: none;
}
.header-links-desktop{
    display: flex;
    align-items: center;
    margin-right: 25px;
    position: relative;
}
.header-links-desktop-left{
    position: absolute;
    display: flex;
    right: calc(50vw - 0.16 * 100vh - 33px);
}
.header-links-desktop-right{
    position: absolute;
    display: flex;
    right: 10vw;
    right: calc(50vw - 0.16 * 100vh - 33px);
    transform: translateX(100%);
}
.header-kontakt-button-desktop{
    width: 135px;
    height: 35px;
    background-color: var(--branding-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-25deg);
}
.header-kontakt-button-desktop span{
    color: white;
    font-weight: 600;
    font-weight: 13.5px;
    transform: skewX(25deg);
}
.header-links-desktop-left a, .header-links-desktop-right a{
    color: var(--secondary-color);
    margin-right: 35px;
    font-weight: 400;
    font-size: 13.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.mobile-menu-button{
    display: none;
}
.mobile-menu-icon{
    display: block;
}
.mobile-menu-icon.active{
    display: none;
}
.mobile-menu-close-icon{
    display: none;
}
.mobile-menu-close-icon.active{
    display: block;
}


@media only screen and (max-width: 1200px) {
    .header-links-desktop-left a, .header-links-desktop-right a{
        margin-right: 20px;
    }
    .header-links-desktop-left{
        position: absolute;
        display: flex;
        right: calc(50vw - 0.16 * 100vh - 20px);
    }
    .header-links-desktop-right{
        position: absolute;
        display: flex;
        right: 10vw;
        right: calc(50vw - 0.16 * 100vh - 20px);
        transform: translateX(100%);
    }
    
}

@media only screen and (max-width: 1050px) {
    .header-links-desktop-right{
        display: none;
    }
    .header-links-desktop-left{
        position: unset;
    }
    .header-links-desktop-left a, .header-links-desktop-right a{
        margin-right: 30px;
    }
}

@media only screen and (max-width: 800px) {
    .header-links-desktop-left, .header-kontakt-button-desktop{
        display: none;
    }
    .mobile-menu-button{
        display: flex;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
}
.hero-section {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    /* padding-top: var(--header-height); */
    position: relative;
    background-color: var(--secondary-color);
    overflow-x: hidden;
}
.hero-section-left {
    background-color: white;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    /* width: calc(50% + 0.16 * (100vh - var(--header-height))); */
    width: calc(50% + 0.16 * 100vh);
    display: flex;
    align-items: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    transform: skewX(-18deg) translateX(calc(-0.16 * 100vh));
    /* 0.5 * tan(18deg) * height */
}
.hero-section-left-content {
    display: flex;
    flex-direction: column;
    transform: skewX(18deg);
    margin-left: calc(((0.16 * 100vh) + 5vw));
}
.hero-section-left-content h6 {
    font-family: "Roboto Mono", monospace;
    color: var(--branding-color);
    font-size: 15px;
    margin-bottom: 10px;
    margin-left: 5px;
}
.hero-section-left-content h1 {
    font-size: 47.5px;
    line-height: 50.25px;
    position: relative;
    margin-bottom: 30px;
}
.hero-section-underline {
    width: 280px;
    position: absolute;
    bottom: -23px;
    right: 0px;
}
.hero-section-quote {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    margin-top: 50px;
}
.hero-section-quote-mobile {
    display: none;
}
.hero-section-left-content span {
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    margin: 0px 30px;
    z-index: 10;
}
.quote-icon-left,
.quote-icon-right {
    width: 52.5px;
    position: absolute;
    z-index: 5;
}
.quote-icon-left {
    left: 0;
    margin-top: 20px;
}
.quote-icon-right {
    transform: rotate(180deg);
    right: 0;
    margin-bottom: 20px;
}

.hero-section-right {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
}
.hero-text-img {
    position: absolute;
    height: 60%;
    right: -250px;
    top: calc(50% + 0.5 * var(--header-height));
    transform: translateY(-50%);
}
.hero-section-image-container {
    position: absolute;
    top: calc(50% + 0.5 * var(--header-height));
    right: 0;
    width: 100vw;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    overflow-x: hidden;
}
.hero-section-right-first-row-container {
    width: 100vw;
    height: 200px;
    margin-bottom: 16px;
}
.hero-section-right-second-row-container {
    width: 100vw;
    height: 200px;
}
.block2 {
    overflow-X: hidden;
    width: 100vw;
    margin: 0 auto;
}
.animation2 {
    width: auto;
    height: 200px;
    font-size: 0px;
}
.animation2 div {
    display: inline-block;
    width: auto;
    float: none;
    padding: 0 8px;
    height: 200px;
}
.animation2 div img {
    background-color: aliceblue;
    height: 200px;
    width: 300px;
    object-fit: cover;
}
.block3 {
    overflow-X: hidden;
    width: 100vw;
    margin: 0 auto;
}
.animation3 {
    width: auto;
    height: 200px;
    font-size: 0px;
}
.animation3 div {
    display: inline-block;
    width: auto;
    float: none;
    padding: 0 8px;
    height: 200px;
}
.animation3 div img {
    background-color: aliceblue;
    height: 200px;
    width: 300px;
    object-fit: cover;
}
/* 
.hero-section-right-first-row_1,
.hero-section-right-second-row_1,
.hero-section-right-first-row_2,
.hero-section-right-second-row_2,
.hero-section-right-first-row_3,
.hero-section-right-second-row_3 {
    display: flex;
    position: absolute;
}
.hero-section-right-first-row_1{
    animation: heroSlider11 19s linear infinite;
}
.hero-section-right-first-row_2{
    animation: heroSlider12 19s linear infinite;
}
.hero-section-right-first-row_3{
    animation: heroSlider13 19s linear infinite;
}
.hero-section-right-second-row_1{
    animation: heroSlider21 15s linear infinite;
}
.hero-section-right-second-row_2{
    animation: heroSlider22 15s linear infinite;
}
.hero-section-right-second-row_3{
    animation: heroSlider23 15s linear infinite;
}
@keyframes heroSlider11 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes heroSlider12 {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes heroSlider13 {
    from {
        transform: translateX(200%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes heroSlider21 {
    from {
        transform: translateX(105%);
    }
    to {
        transform: translateX(5%);
    }
}
@keyframes heroSlider22 {
    from {
        transform: translateX(5%);
    }
    to {
        transform: translateX(-95%);
    }
}
@keyframes heroSlider23 {
    from {
        transform: translateX(205%);
    }
    to {
        transform: translateX(105%);
    }
}
.hero-section-right-second-row {
    transform: translateX(100px);
}
.hero-section-image-placeholder {
    margin-left: 15px;
    background-size: cover;
    height: 190px;
    aspect-ratio: 16/9;
}


.hi-1{
    background-image: url("./../img/hero-section-images/1.png");
}
.hi-2{
    background-image: url("./../img/hero-section-images/2.png");
}
.hi-3{
    background-image: url("./../img/hero-section-images/3.png");
}
.hi-4{
    background-image: url("./../img/hero-section-images/4.png");
}
.hi-5{
    background-image: url("./../img/hero-section-images/5.png");
}
.hi-6{
    background-image: url("./../img/hero-section-images/6.png");
}
.hi-7{
    background-image: url("./../img/hero-section-images/7.png");
}
.hi-8{
    background-image: url("./../img/hero-section-images/8.png");
}
.hi-9{
    background-image: url("./../img/hero-section-images/9.png");
} */

@media only screen and (max-width: 1080px) {
    .hero-section-left-content h1 {
        font-size: 40px;
        line-height: 45px;
    }
    .hero-section-underline {
        width: 230px;
        position: absolute;
        bottom: -18px;
    }
}
@media only screen and (max-width: 1030px) {
    .hero-section-left {
        width: calc(60% + 0.16 * 100vh);
    }
    .hero-section-img {
        display: none;
    }
}
@media only screen and (max-width: 800px) {
    .hero-section-left-content {
        margin-bottom: 10vh;
    }
    .hero-section-left-content h1 {
        font-size: 33px;
        line-height: 38px;
    }
    .hero-section-underline {
        width: 195px;
        position: absolute;
        bottom: -14px;
    }
    .hero-section-left {
        width: calc(70% + 0.16 * 100vh);
        transform: skewX(-22deg) translateX(calc(-0.16 * 100vh));
    }
    .hero-section-left-content {
        transform: skewX(22deg);
        margin-left: calc(((0.16 * 100vh) + 5vw));
    }
    .hero-section-image-placeholder:nth-of-type(1) {
        display: none;
    }
    .hero-section-quote {
        display: none;
    }
    .hero-section-quote-mobile {
        display: flex;
        position: absolute;
        bottom: 6vh;
        height: 80px;
        background-color: white;
        transform: skewX(-22deg) translateX(calc(-0.4 * 40px));
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    }
    .hero-section-quote-mobile-content {
        transform: skewX(22deg);
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hero-section-quote-mobile span {
        font-size: 12px;
        font-weight: 300;
        font-style: italic;
        margin: 0px 40px 0 50px;
        z-index: 10;
    }
    .quote-icon-left-mobile,
    .quote-icon-right-mobile {
        width: 52.5px;
        position: absolute;
        z-index: 5;
    }
    .quote-icon-left-mobile {
        left: 30px;
        margin-top: 20px;
    }
    .quote-icon-right-mobile {
        transform: rotate(180deg);
        right: 20px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 600px) {
    .hero-section-image-container {
        transform: translate(100px, -50%);
    }
    .hero-section-right-second-row {
        transform: translateX(80px);
    }
}
@media only screen and (max-width: 530px) {
    .hero-section-left-content h1 {
        font-size: 24px;
        line-height: 30px;
    }
    .hero-section-underline {
        width: 140px;
        position: absolute;
        bottom: -10px;
        right: 4px;
    }
}
.what-is-section {
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
}
.what-is-top {
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.inner-what-is-top {
    background-color: var(--secondary-color);
    width: 100%;
    min-height: 85vh;
    transform: skewY(-3deg) translateY(calc(-0.07 * 50vw));
    padding-top: calc(0.07 * 50vw);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.what-is-animation-container {
    width: 70%;
    max-width: 410px;
    aspect-ratio: 1/1;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    transition: all 0.3s ease;
}
.what-is-container {
    width: 70%;
    max-width: 410px;
    transition: all 0.25s ease;
}
.what-is-container-desktop{
    transform: skewY(3deg);
    position: absolute;
    left: 100vw;
}
.what-is-container p {
    margin-top: 50px;
    font-size: 15px;
}
.what-is-container-desktop p{
    color: white;
}
.what-is-animation {
    margin-top: 20px;
    transform: skewY(3deg);
    width: 100%;
    height: 100%;
    position: relative;
}
.what-is-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10px;
}
.what-is-container h5 {
    position: relative;
    font-size: 22.5px;
    font-weight: 600;
    width: auto;
    text-transform: uppercase;
}
.what-is-container-desktop h5{
    color: white;

}
.what-is-underline {
    position: absolute;
    width: 122px;
    right: -8px;
    bottom: -5px;
}
.what-is-container p {
    width: 100%;
    max-width: 650px;
    text-align: center;
    font-size: 15px;
    margin-top: 20px;
}

/* ----- ANIMATION ---------------------------------------- */
.what-is-base-img {
    position: absolute;
    width: 90px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.what-is-animation .ring1,
.what-is-animation .ring2,
.what-is-animation .ring3 {
    position: absolute;
    left: 50%;
    top: 50%;
    scale: 0;
    translate: -50% -50%;
    filter: opacity(0);
    transition: all 1s ease;
}
.what-is-animation .ring1 {
    width: 36%;
    transition-delay: 200ms;
}
.what-is-animation .ring2 {
    width: 46%;
    transition-delay: 100ms;
}
.what-is-animation .ring3 {
    width: 58%;
}
.what-is-animation .icon1,
.what-is-animation .icon2,
.what-is-animation .icon3,
.what-is-animation .icon4,
.what-is-animation .icon5 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18.2%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
}
.what-is-animation .icon1 {
    top: 11.8%;
}
.what-is-animation .icon2 {
    top: 40%;
    left: 87%;
    transition-delay: 300ms;
}
.what-is-animation .icon3 {
    top: 80%;
    left: 74%;
    transition-delay: 600ms;
}
.what-is-animation .icon4 {
    top: 80%;
    left: 26%;
    transition-delay: 900ms;
}
.what-is-animation .icon5 {
    top: 40%;
    left: 13%;
    transition-delay: 1200ms;
}
@media only screen and (max-width: 860px) {
    .inner-what-is-top {
        background-color: var(--secondary-color);
        width: 100%;
        min-height: 45vh;
        transform: skewY(-3deg) translateY(calc(-0.07 * 50vw));
        padding: 50px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .what-is-base-img {
        width: 60px;
    }
    .what-is-container-mobile {
        margin-top: 20px;
    }
    .what-is-container-desktop {
        display: none;
    }
}
@media only screen and (min-width: 860px) {
    .what-is-container-mobile{
        display: none;
    }
}
.competence-section{
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 0 0 100px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    overflow-x: hidden;
}
.competence-section-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.competence-containers-top, .competence-containers-bottom{
    display: flex;
}
.competence-container{
    display: flex;
    flex-direction: column-reverse;
    margin: 30px 14px;
    transition: all .3s ease;
}
.competence-container:hover{
    transform: translateY(-15px);
}
.competence-headline-box{
    width: 220px;
    height: 70px;
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-20deg) translateX(calc(0.5 * 0.364 * 70px));
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    position: relative;
}
.competence-headline-box h5{
    transform: skewX(20deg);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.competence-headline-box img{
    transform: skewX(20deg) translate(60%, -35%);
    position: absolute;
    right: 0;
    top: 0;
    height: 38px;
}
.competence-4 img{
    height: 47px;
}
.competence-5 img{
    height: 47px;
}
.competence-text-box{
    position: relative;
    width: 220px;
    min-height: 230px;
    padding: 14px 20px;
    background-color: #FAFAFA;
    margin-top: 4px;
    margin-right: calc(0.364 * 70px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    overflow-y: scroll;
}
.competence-text-box p{
    font-size: 12px;
}
.competence-bottom-line{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--branding-color);
}
.competence-section-img{
    position: absolute;
    width: 285px;
    bottom: 20px;
    right: -10px;
}


@media only screen and (max-width: 1400px) {
    .competence-section-content{
        flex-direction: column;
        margin-top: 40px;
    }
}
@media only screen and (max-width: 860px) {
    .competence-containers-top, .competence-containers-bottom{
        flex-direction: column;
    }
    .competence-container{
        display: none;
    }
    .competence-section{
        flex-direction: column;
    }
    .competence-1{
        display: flex;
    }
    .competence-1 .competence-bottom-line{
        width: 20%;
    }
    .competence-2 .competence-bottom-line{
        width: 40%;
    }
    .competence-3 .competence-bottom-line{
        width: 60%;
    }
    .competence-4 .competence-bottom-line{
        width: 80%;
    }
    .competence-5 .competence-bottom-line{
        width: 100%;
    }
    .competence-section-img{
        position: unset;
        align-self: flex-end;
        width: 200px;
    }
}
@media only screen and (min-width: 860px) {
    .competence-section .section-headline{
        display: none !important;
    }
}
.leistungen-section {
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0 100px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.leistungen-section-content {
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.leistungen-buttons-container {
    width: calc(850px - (0.36 * 120px));
}
.leistung-button {
    outline: none;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 11px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    flex-grow: 1;
    border: 2px dashed var(--branding-color);
    height: 100%;
    cursor: pointer;
}
.leistung-button-4 {
    height: 120px;
    width: 100%;
    transform: skewX(-20deg);
    border: 2px dashed var(--branding-color);
}
.leistung-button-1 {
    padding: 0;
}
.leistung-button span {
    transform: skewX(20deg);
    font-size: 13.5px;
    line-height: 15px;
    margin: 0 32px;
    display: flex;
    align-items: center;
}
.leistung-button span b{
    font-size: 35px;
    margin-right: 3px;
}
.leistung-button:not(.active) > span {
    color: var(--branding-color);
}
.leistung-button.active > span {
    color: white;
}
.leistung-button.active {
    background-color: var(--branding-color);
}
.leistung-button.no-border {
    border: none;
}
.leistungen-info-container {
    width: 850px;
    height: 280px;
    margin-top: 80px;
    border-top: 3px solid var(--branding-color);
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    background-color: #fafafa;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    position: relative;
    display: none;
}
.leistungen-info-container.active {
    display: flex;
}
.leistungen-info-container .vertical-line {
    width: 3px;
    height: 100%;
    background-color: #ededed;
    margin: 0 5px;
}
.leistung-img {
    width: 195px;
    max-height: 195px;
}
.leistungen-info-container h5 {
    font-size: 15px;
    position: relative;
    width: 210px;
    text-align: center;
}
.leistungen-info-container h5 img {
    position: absolute;
    width: 100%;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
}
.leistungen-info-container p {
    font-size: 13.5px;
    width: 190px;
}
.leistungen-info-container span {
    position: absolute;
    left: -20px;
    bottom: -30px;
    font-size: 37px;
    font-weight: bold;
    color: var(--branding-color);
}
.leistungen-section-content-mobile {
    display: none;
}
@media only screen and (max-width: 860px) {
    .leistungen-section-content {
        display: none;
    }
    .leistungen-section-content-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 50px 0;
    }
    .leistungen-buttons-container {
        width: calc(90% - (0.27 * 0.5 * 108px));
        max-width: 450px;
        height: 108px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        transform: skewX(-15deg);
    }
    .leistungen-info-container-mobile {
        width: 82%;
        max-width: 400px;
        margin-top: 70px;
        border-top: none;
        border-bottom: 3px solid var(--branding-color);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-color: #fafafa;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
        position: relative;
        display: none;
    }
    .leistungen-info-container-mobile.active {
        display: flex;
    }
    .leistung-button-mobile {
        border: 2px solid var(--branding-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .leistung-button-mobile span {
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 500;
        line-height: 15px;
        text-align: center;
        transform: skewX(15deg);
    }
    .leistung-button-mobile:not(.active) > span {
        color: var(--branding-color);
    }
    .leistung-button-mobile.active > span {
        color: white;
    }
    .leistung-button-mobile.active {
        background-color: var(--branding-color);
    }
    .leistungen-info-container-mobile h5{
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .leistungen-info-container-mobile .leistung-img{
        width: 70%;
        max-width: 300px;
    }
    .leistungen-info-container-mobile .horizontal-line{
        width: 86%;
        height: 4px;
        background-color: #EDEDED;
        margin: 30px 0;
    }
    .leistungen-info-container-mobile p{
        width: 86%;
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    .leistungen-info-container-mobile span {
        position: absolute;
        left: -20px;
        bottom: -30px;
        font-size: 37px;
        font-weight: bold;
        color: var(--branding-color);
    }
}
.references-section {
    height: 200px;
    background-color: #fafafa;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 100px;
    overflow-x: hidden;
}
.references-section span {
    position: absolute;
    left: 20px;
    top: 14px;
    font-size: 15px;
    font-family: "Roboto Mono", monospace;
    color: var(--branding-color);
    text-transform: uppercase;
}

.block {
    overflow: hidden;
    width: 100vw;
    margin: 62px auto;
}
.animation {
    width: auto;
    height: 75px;
    font-size: 0px;
}
.animation div {
    display: inline-block;
    width: auto;
    float: none;
    padding: 0 50px;
    height: 75px;
}
.animation div img {
    vertical-align: middle;
    max-width: 140px;
    max-height: 74px;
    object-fit: cover;
}
.logo-3{
    width: 90px;
}
.logo-4{
    width: 100px;
}
.logo-2, .logo-6{
    height: 70px;
}

/* 
.references_1, .references_2, .references_3{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 25%;
    height: 75px;
}
.references_1 img, .references_2 img, .references_3 img{
    margin-right: 50px;
    max-width: 150px;
    max-height: 75px;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}
.references_1{
    animation: referencesSlider1 25s linear infinite;
}
.references_2{
    animation: referencesSlider2 25s linear infinite;
}
.references_3{
    animation: referencesSlider3 25s linear infinite;
}
@keyframes referencesSlider1 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes referencesSlider2 {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes referencesSlider3 {
    from {
        transform: translateX(200%);
    }
    to {
        transform: translateX(100%);
    }
} */
@media only screen and (max-width: 800px) {
    .references-section span {
        font-size: 13px;
    }
}
.status-quo-section {
    height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0;
    position: relative;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 100px;
}
.status-quo-section .background-shape {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) skewY(-12deg);
    height: 330px;
    width: 100%;
    background-color: #fafafa;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
    z-index: 0;
}
.status-quo-fact {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .5s ease;
}
.status-quo-fact.active{
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
}
.status-quo-fact.inactive{
    left: -50%;
}
.status-quo-fact span {
    font-size: 60px;
    color: var(--branding-color);
    font-weight: 600;
    position: relative;
}
.status-quo-underline {
    position: absolute;
    
}
.status-quo-underline-mobile{
    display: none;
}
.status-quo-fact span b {
    font-weight: 800;
}
.status-quo-fact p {
    font-size: 18.7px;
    font-family: "Roboto Mono", monospace;
    text-align: center;
    margin-top: 20px;
}
.status-quo-section .progress-bar-container {
    width: 100vw;
    height: 38px;
    position: absolute;
    top: calc(50% + 160px);
    left: 0;
    z-index: 10;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
}
.status-quo-section .progress-bar {
    width: 80%;
    height: 8.5px;
    background-color: #ededed;
    transform: skewX(-30deg);
}
.status-quo-section .inner-progress-bar {
    width: 0;
    height: 100%;
    background-color: var(--branding-color);
}
.status-quo-images{
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    left: 0;
    transform: translateY(-58%);
    z-index: 15;
    display: flex;
    justify-content: flex-end;
}
.desktop-image-placeholder {
    height: 100%;
    width: 280px;
    background-color: #2c2c2c;
    transform: skewX(-12deg) translateX(calc(-0.5 * 0.213 * 250px));
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-image-placeholder span{
    color: white;
    transform: skewX(12deg);
}
.status-quo-illustration{
    margin-right: 10%;
}
#fact-1{
    display: inline-block;
    width: 138px;
    text-align: center;
}
.fact-1-underline-desktop{
    width: 138px;
    left: 0px;
    bottom: 6px;
}
.fact-1-underline-mobile{
    width: 90px;
    left: 0px;
    bottom: 6px;
}
#fact-2{
    display: inline-block;
    width: 155px;
    text-align: center;
}
.fact-2-underline-desktop{
    width: 155px;
    left: 0px;
    bottom: 6px;
}
.fact-2-underline-mobile{
    width: 100px;
    left: 0px;
    bottom: 6px;
}
#fact-3{
    display: inline-block;
    width: 155px;
    text-align: center;
}
.fact-3-underline-desktop{
    width: 155px;
    left: 0px;
    bottom: 6px;
}
.fact-3-underline-mobile{
    width: 100px;
    left: 0px;
    bottom: 6px;
}
#fact-4{
    display: inline-block;
    width: 110px;
    text-align: center;
}
.fact-4-underline-desktop{
    width: 110px;
    left: 0px;
    bottom: 6px;
}
.fact-4-underline-mobile{
    width: 70px;
    left: 0px;
    bottom: 6px;
}
#fact-5{
    display: inline-block;
    width: 110px;
    text-align: center;
}
.fact-5-underline-desktop{
    width: 110px;
    left: 0px;
    bottom: 6px;
}
.fact-5-underline-mobile{
    width: 70px;
    left: 0px;
    bottom: 6px;
}
@media only screen and (max-width: 860px) {
    .status-quo-images{
        display: none;
    }
    .status-quo-fact{
        width: 100%;
    }
    .status-quo-fact span {
        font-size: 40px;
        white-space: nowrap;
    }
    .status-quo-underline{
        display: none;
    }
    .status-quo-underline-mobile {
        display: flex;
        position: absolute;
        bottom: 6px;
    }
    #fact-1{
        width: 90px;
    }
    #fact-2{
        width: 100px;
    }
    #fact-3{
        width: 100px;
    }
    #fact-4{
        width: 70px;
    }
    #fact-5{
        width: 70px;
    }
}
.vision-section{
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vision-container{
    width: 90%;
    max-width: 1050px;
    background-color: #fafafa;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
    transform: skewX(-8deg);
}
.inner-vision-container{
    transform: skewX(8deg);
    padding: 50px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vision-placeholder{
    width: 330px;
    height: 195px;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vision-placeholder span{
    color: white;
    text-align: center;
    font-size: 22.5px;
}
.inner-vision-container h5{
    position: relative;
    font-size: 22.5px;
    font-weight: 600;
    margin-top: 30px;
}
.vision-underline{
    position: absolute;
    width: 83px;
    right: -4px;
    bottom: -2px;
}
.inner-vision-container p{
    max-width: 620px;
    font-size: 15px;
    text-align: center;
    margin-top: 15px;
}
.vision-image{
    height: 220px;
    margin-top: -220px;
}

@media only screen and (max-width: 800px) {
    .vision-container{
        width: 100%;
        transform: skewX(0deg);
    }
    .inner-vision-container{
        transform: skewX(0deg);
        padding: 50px 30px;
    }
}
.ansatz-section{
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ansatz-icons-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.ansatz-icon-circle{
    width: 76px;
    height: 76px;
    background-color: #fafafa;
    border-radius: 50%;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ansatz-icon-circle img{
    height: 54px;
    transform: scale(0);
    transition: all .3s ease;
}
.ansatz-icon-circle img.active{
    transform: scale(1);
}
#ansatz-icon-2{
    transition-delay: .3s;
}
#ansatz-icon-3{
    transition-delay: .6s;
}
#ansatz-icon-4{
    transition-delay: .9s;
}
.ansatz-connection-line{
    width: 84px;
    z-index: 5;
}
.ansatz-section h5{
    font-size: 22.5px;
    font-weight: 600;
    margin-top: 45px;
    position: relative;
    text-transform: uppercase;
    text-align: center;
}
.ansatz-section h5 img{
    position: absolute;
    width: 38vw;
    max-width: 550px;
    left: -5px;
    top: 14px;
    transform: translate(-100%, -46%);
}
.ansatz-section p{
    font-size: 15px;
    width: 80%;
    max-width: 630px;
    text-align: center;
    margin-top: 10px;
}
.ansatz-skizze{
    position: absolute;
    max-width: 225px;
    left: 5%;
}

@media only screen and (max-width: 800px) {
    .ansatz-section h5 img{
        display: none;
    }
    .ansatz-icons-container{
        flex-direction: column;
        min-height: 530px;
    }
    .ansatz-connection-line{
        rotate: 90deg;
    }
    .ansatz-icon-circle{
        margin: 26px 0;
    }
    .ansatz-section h5{
        font-size: 20px;
        margin-top: 0;
    }
    .ansatz-section p{
        margin-top: 0px;
    }
    .ansatz-section h5{
        max-width: 250px;
    }
}

@media only screen and (max-width: 1100px) {
    .ansatz-skizze{
        display: none;
    }
}
.case-section {
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    position: relative;
}
.case-section-content {
    padding: 160px 0 100px 0;
    background-color: #2e2e2e;
    width: 100%;
    min-height: 100vh;
    position: relative;
}
.case-container {
    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
}
.case-container.active {
    display: flex;
}
.cases-headline {
    position: absolute;
    letter-spacing: 50px;
    text-indent: 50px;
    left: 50%;
    top: 50vh;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}
.cases-headline.move-up {
    top: 150px;
}
.cases-headline span {
    color: #434343;
    font-size: 75px;
    font-weight: 600;
}
.cases-headline span.active {
    color: var(--branding-color);
}
.case-mockup-container {
    scale: 0;
    transition: all 0.5s ease;
    transition-delay: 300ms;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-mockup-container video {
    width: 275px;
    margin-top: 50px;
    cursor: pointer;
}
.case-video-button {
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: url("./../img/play-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.case-info-container {
    width: 375px;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    scale: 0;
    transition: all 0.5s ease;
}
.case-name-box {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--branding-color);
    transform: skewX(-15deg) translateX(calc(-0.5 * 0.27 * 64px));
}
.case-name-box h6 {
    font-size: 17px;
    color: white;
    font-weight: 300;
    transform: skewX(15deg);
}
.case-name-box h6 b {
    font-weight: 700;
}
.case-info-container a{
    margin-left: auto;
    margin-right: auto;

}
.case-logo {
    width: 80px;
    margin-top: 20px;
}
.case-kpi-container {
    width: 375px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 40px;
    scale: 0;
    transition: all 0.5s ease;
    transition-delay: 600ms;
}
.case-kpi-container h5 {
    font-size: 85px;
    line-height: 85px;
    color: var(--branding-color);
}
.case-kpi-container h6 {
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.kpi-indicator-container {
    width: 80%;
    margin-top: 35px;
    position: relative;
}
.kpi-indicator {
    display: flex;
    align-items: center;
    transform: skewX(-20deg);
}
.kpi-indicator-left {
    width: 30px;
    height: 30px;
    background-color: var(--branding-color);
}
.outer-kpi-indicator-right {
    height: 7px;
    width: 100%;
    background-color: #ededed;
}
.kpi-indicator-right {
    background-color: #fc923c;
    height: 100%;
}
.kpi-indicator-container span {
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    float: right;
}
.kpi-indicator-container span b {
    font-weight: 700;
    font-size: 11.4px;
}
.kpi-vermerk {
    position: absolute;
    bottom: -50px;
    right: 0;
    color: white;
    font-size: 8px !important;
    font-weight: 600;
}
.case-info-container.active {
    scale: 1;
}
.case-mockup-container.active {
    scale: 1;
}
.case-kpi-container.active {
    scale: 1;
}
.case-info-container.inactive {
    transform: translateX(-100vw);
}
.case-mockup-container.inactive {
    transform: translateX(-100vw);
}
.case-kpi-container.inactive {
    transform: translateX(-100vw);
}

@media only screen and (max-height: 750px) {
    .case-mockup-container video {
        width: 220px;
        margin-top: 70px;
    }
}
@media only screen and (max-width: 1060px) {
    .case-section-content {
        background-color: #282828;
    }
    .cases-headline {
        top: 120px;
    }
    .cases-headline span {
        color: var(--branding-color);
    }
    .case-container {
        flex-direction: column;
        position: unset;
    }
    .case-info-container {
        scale: 1;
    }
    .case-mockup-container {
        scale: 1;
    }
    .case-kpi-container {
        scale: 1;
    }
    .case-kpi-container {
        padding-right: 0;
    }
    .case-kpi-container-1 {
        margin-bottom: 150px;
    }
    .case-name-box {
        transform: skewX(-15deg);
    }
}
@media only screen and (max-width: 860px) {
    .case-container{
        position: static;
        height: auto;
        display: flex;
    }
    .cases-headline {
        letter-spacing: 25px;
        text-indent: 25px;
    }
    .cases-headline span {
        font-size: 35px;
    }
    .case-section-content {
        flex-direction: column;
    }
    .case-info-container {
        width: 100%;
        margin-bottom: 10px;
    }
    .case-name-box {
        transform: skewX(0deg);
    }
    .case-name-box h6 {
        transform: skewX(0deg);
    }
    .case-mockup-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 50px;
    }
    .case-mockup-container img {
        width: 80%;
        max-width: 275px;
        margin-top: 0;
        margin-bottom: 50px;
    }
    .case-kpi-container {
        width: 90%;
        max-width: 375px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 0;
    }
}
.kontakt-section {
    position: relative;
    margin-bottom: 0px;
}
.kontakt-section-content {
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0;
    background-color: #302e30;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kontakt-section .section-headline h4 {
    color: white;
}
.contact-form-container {
    background-color: #fafafa;
    border: 5px solid var(--branding-color);
    width: 80%;
    max-width: 800px;
    transform: skewX(-8deg);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
    position: relative;
}
.submit-button {
    position: absolute;
    height: 42px;
    width: 230px;
    bottom: -23px;
    right: 50px;
    background-color: var(--branding-color);
    outline: none;
    border: none;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.submit-button-span {
    transform: skewX(8deg);
}
.submit-button span {
    color: white;
    font-size: 18.75px;
    font-weight: 600;
}
.contact-form-container form {
    width: 100%;
    height: 100%;
    padding: 45px 60px 45px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contact-form-left,
.contact-form-right {
    width: calc(50% - 20px);
    transform: skewX(8deg);
}
.contact-form-left input,
.contact-form-right textarea {
    width: 100%;
    height: 43px;
    padding: 0 15px;
    background-color: #ededed;
    border: none;
    outline: none;
}
.contact-form-right textarea {
    height: 300px;
    padding: 11px 15px;
}
.contact-form-left label,
.contact-form-right label {
    margin-left: 15px;
    font-size: 15px;
    color: var(--branding-color);
    font-weight: 600;
}
.contact-form-left #name, .contact-form-left #mail {
    margin-bottom: 20px;
}
::placeholder {
    color: #bfbfbf;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #bfbfbf;
}

::-ms-input-placeholder {
    color: #bfbfbf;
}

@media only screen and (max-width: 860px) {
    .contact-form-container {
        transform: skewX(0);
        margin-top: 50px;
        width: 86%;
    }
    .contact-form-container form {
        padding: 30px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .contact-form-left,
    .contact-form-right {
        width: 100%;
        transform: skewX(0);
    }
    .contact-form-right {
        margin-top: 20px;
    }
    .contact-form-left label,
    .contact-form-right label {
        margin-left: 0;
    }
    .submit-button {
        transform: skewX(-8deg) translateX(50%);
        right: 50%;
        max-width: 75%;
    }
    .contact-form-container form {
        flex-direction: column;
    }
}
.about-section {
    min-height: calc(100vh - var(--header-height));
    min-height: calc((var(--vh, 1vh) * 100) - var(--header-height));
    padding: 100px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-image {
    width: 180px;
}
.about-text-box{
    background-color: #fafafa;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    width: 90vw;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
}
.about-text-box h5{
    font-size: 17px;
    line-height: 20px;
    margin-bottom: 15px;
}
.about-text-box h5 .underline{
    width: calc(100% + 20px);
    margin-left: -10px;
    height: 2.5px;
    background-color: var(--branding-color);
}
.about-text-box p{
    font-size: 13.5px;
}
.about-spacer{
    width: 8vw;
}

@media only screen and (max-width: 860px) {
    .about-section{
        flex-direction: column;
    }
    .about-container{
        margin: 30px 0;
    }
}
footer{
    min-height: 142px;
    width: 100vw;
    background-color: #fafafa;
    border-top: 4.5px solid var(--branding-color);
}
.desktop-footer{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    width: 100%;
}
.mobile-footer{
    display: none;
}
footer a{
    color: #2C2C2C;
    font-size: 12px;
}
.flow-link{
    position: absolute;
    right: 20px;
    bottom: 15px;
}
.footer-left{
    display: flex;
    align-items: center;
}
.footer-left span{
    margin-left: 8px;
}
.footer-left img{
    width: 22px;
}
.footer-middle{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-mm-logo{
    width: 80px;
    margin-top: -5px;
}
.footer-mm-span{
    font-size: 12px;
}
.footer-socials{
    padding: 10px 0;
    display: flex;
    align-items: center;
}
.footer-linkedin-logo{
    width: 16px;
    margin-right: 20px;
}
.footer-insta-logo{
    width: 19px;
}
.copyright-span{
    font-size: 11px;
}
.footer-links{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 15px;
}

@media only screen and (max-width: 860px) {
    .desktop-footer{
        display: none;
    }
    .mobile-footer{
        padding: 25px 0 50px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .footer-socials{
        position: absolute;
        top: 8px;
        width: 100%;
        justify-content: flex-end;
        padding: 0 10px;
    }
    .footer-left{
        margin-top: 5px;
    }
    .footer-links{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 0;
    }
    .footer-links span{
        font-weight: 300;
        margin: 0 3px;
    }
}
/*---HEADER-UNDERLINE-ANIMATION---------------------------------------*/
.hover-underline-animation {
    display: inline-block;
    position: relative;
}
.hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--branding-color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.animate-ring{
    scale: 1 !important;
    rotate: 40deg;
    filter: opacity(100%) !important;
}
.animation-to-left{
    transform: translateX(-10%);
}
.animate-what-is-icon{
    transform: translate(-50%, -50%) scale(1) !important;
}
.what-is-container-animation{
    left: 60%;
}
@media only screen and (max-width: 1000px) {
    .animation-to-left{
        transform: translateX(5%);
    }
    .what-is-container-animation{
        left: 52%;
    }
}