/* ===== COMMON RULES ===== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Show/hide logic */
.desktop {
    display: block;
}

.mobile {
    display: none;
}

@media (max-width: 767px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .mobile {
        background-color: #ffffff;
        overflow: hidden;
        width: 100%;
        min-width: 100%;
        min-height: 3855px;
        position: relative;
    }

    .mobile .pexels-cristian {
        position: absolute;
        top: 3187px;
        left: 1px;
        width: 100%;
        height: 304px;
        aspect-ratio: 1.37;
        object-fit: cover;
    }

    .mobile .putkimies {
        position: absolute;
        top: 1561px;
        left: 1px;
        width: 100%;
        height: 265px;
        aspect-ratio: 1.47;
        object-fit: cover;
    }

    .mobile .frame {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ffffff;
    }

    .mobile .logo-horizontal {
        position: relative;
        width: 145.91px;
        height: 41.05px;
    }

    .mobile .text-wrapper {
        position: relative;
        width: fit-content;
        font-family: "Font Awesome 6 Pro-Regular", Helvetica;
        font-weight: 400;
        color: #9b26b6;
        font-size: 20px;
        letter-spacing: 1.50px;
        line-height: normal;
        text-align: center;
        white-space: nowrap;
    }

    .mobile .image {
        position: absolute;
        top: 73px;
        left: 0;
        width: 100%;
        height: 258px;
        aspect-ratio: 1.51;
        object-fit: cover;
    }

    .mobile .vector {
        position: absolute;
        top: 301px;
        left: 0;
        width: 100%;
        height: 51px;
        object-fit: cover;
    }

    .mobile .img {
        position: absolute;
        top: 1789px;
        left: 0;
        width: 100%;
        height: 51px;
        object-fit: cover;
    }

    .mobile .div {
        position: absolute;
        top: 364px;
        left: 26px;
        width: 358px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #9b26b6;
        font-size: 36px;
        letter-spacing: -0.50px;
        line-height: normal;
    }

    .mobile .tilaa-luotettava {
        position: absolute;
        top: 468px;
        left: 26px;
        width: 330px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
    }

    .mobile .lataa-sovellus-l-yd {
        position: absolute;
        top: 597px;
        left: 26px;
        width: 316px;
        font-family: "Inter", Helvetica;
        font-weight: 700;
        color: #68c300;
        font-size: 14px;
        letter-spacing: 0;
        line-height: normal;
    }

    .mobile .group {
        position: absolute;
        top: 628px;
        left: 26px;
        width: 224px;
        height: 36px;
        display: flex;
        gap: 9.4px;
    }

    .mobile .image-2 {
        width: 107.28px;
        height: 35.87px;
        aspect-ratio: 2.99;
        object-fit: cover;
    }

    .mobile .image-3 {
        width: 107.52px;
        height: 35.87px;
        aspect-ratio: 3;
        object-fit: cover;
    }

    .mobile .image-4 {
        position: absolute;
        top: 713px;
        left: 0;
        width: 100%;
        height: 890px;
        background-image: url(./image-39.svg);
        background-size: cover;
    }

    .mobile .image-5 {
        position: absolute;
        top: 2272px;
        left: 1px;
        width: 100%;
        height: 1001px;
        background-image: url(./image-40.svg);
        background-size: cover;
    }

    .mobile .component {
        top: 835px;
        left: 26px;
        background-image: url(./sa-hko-mies@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .frame-2 {
        display: flex;
        flex-direction: column;
        width: 52.01%;
        height: 22.47%;
        align-items: center;
        position: absolute;
        top: 0;
        left: 23.99%;
    }

    .mobile .frame-wrapper {
        display: flex;
        width: 154px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 2px 24px;
        position: relative;
        flex: 0 0 auto;
        margin-left: -35.39px;
        margin-right: -35.39px;
        background-color: #9b26b6;
    }

    .mobile .frame-3 {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: relative;
        flex: 0 0 auto;
    }

    .mobile .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "Font Awesome 6 Pro-Solid", Helvetica;
        color: #d1ff9e;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .text-wrapper-3 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        letter-spacing: 0;
        line-height: 27px;
        white-space: nowrap;
    }

    .mobile .rectangle {
        position: relative;
        width: 154px;
        height: 8px;
        margin-bottom: -3.05px;
        margin-left: -35.39px;
        margin-right: -35.39px;
    }

    .mobile .element-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 4px 8px;
        position: absolute;
        top: calc(50.00% + 52px);
        right: 10px;
        background-color: #ffffff;
        border-radius: 26px;
    }

    .mobile .element {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #000000;
        font-size: 8px;
        text-align: right;
        letter-spacing: 1.50px;
        line-height: normal;
    }

    .mobile .component-2 {
        top: 1015px;
        left: 26px;
        background-image: url(./sa-hko-mies-1@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .frame-4 {
        margin-left: -19.00px;
        margin-right: -19.00px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: relative;
        flex: 0 0 auto;
    }

    .mobile .component-3 {
        top: 1196px;
        left: 26px;
        background-image: url(./sa-hko-mies-2@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .component-4 {
        top: 835px;
        left: 206px;
        background-image: url(./sa-hko-mies-3@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .component-5 {
        top: 1015px;
        left: 206px;
        background-image: url(./sa-hko-mies-4@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .component-6 {
        top: 1196px;
        left: 206px;
        background-image: url(./sa-hko-mies-5@2x.png);
        position: absolute;
        width: 160px;
        height: 160px;
        background-size: 100% 100%;
    }

    .mobile .button {
        all: unset;
        box-sizing: border-box;
        position: absolute;
        top: 1382px;
        left: 135px;
        width: 120px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 129px;
    }

    .mobile .text-wrapper-4 {
        position: absolute;
        height: 52.50%;
        top: 17.50%;
        left: calc(50.00% - 54px);
        width: 108px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #9b26b6;
        font-size: 14px;
        text-align: center;
        letter-spacing: 0;
        line-height: 21px;
        white-space: nowrap;
    }

    .mobile .group-2 {
        position: absolute;
        top: 1855px;
        left: 26px;
        width: 325px;
        height: 354px;
    }

    .mobile .tilaa-mit-tarvitset {
        position: absolute;
        top: 66px;
        left: 61px;
        width: 260px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 24px;
    }

    .mobile .span {
        font-weight: 700;
    }

    .mobile .text-wrapper-5 {
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 24px;
    }

    .mobile .group-3 {
        position: absolute;
        width: 40px;
        height: 256px;
        top: 75px;
        left: 0;
        display: flex;
        flex-direction: column;
    }

    .mobile .group-4 {
        width: 42px;
        height: 40px;
        position: relative;
        margin-top: 0;
    }

    .mobile .ellipse {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        background-color: #d1ff9e;
        border-radius: 20px;
    }

    .mobile .text-wrapper-6 {
        top: 10px;
        left: 16px;
        width: 9px;
        position: absolute;
        font-family: "Inter", Helvetica;
        font-weight: 700;
        color: #9b26b6;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: normal;
    }

    .mobile .group-5 {
        width: 42px;
        height: 40px;
        position: relative;
        margin-top: 74.8px;
    }

    .mobile .text-wrapper-7 {
        top: 11px;
        left: 14px;
        width: 12px;
        position: absolute;
        font-family: "Inter", Helvetica;
        font-weight: 700;
        color: #9b26b6;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: normal;
    }

    .mobile .group-6 {
        width: 42px;
        height: 40px;
        position: relative;
        margin-top: 61.4px;
    }

    .mobile .text-wrapper-8 {
        position: absolute;
        top: 0;
        left: 0;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #9b26b6;
        font-size: 30px;
        letter-spacing: -0.50px;
        line-height: normal;
        white-space: nowrap;
    }

    .mobile .lumityo {
        position: absolute;
        top: 2349px;
        left: 26px;
        width: 338px;
        height: 208px;
        aspect-ratio: 1.62;
    }

    .mobile .text-wrapper-9 {
        position: absolute;
        top: 2650px;
        left: 26px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 30px;
        letter-spacing: -0.50px;
        line-height: normal;
        white-space: nowrap;
    }

    .mobile .group-7 {
        position: absolute;
        top: 2713px;
        left: 26px;
        width: 346px;
        height: 165px;
    }

    .mobile .text-wrapper-10 {
        position: absolute;
        top: 3px;
        left: 0;
        width: 24px;
        font-family: "Inter", Helvetica;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .text-wrapper-11 {
        position: absolute;
        top: 99px;
        left: 0;
        width: 24px;
        font-family: "Inter", Helvetica;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .text-wrapper-12 {
        position: absolute;
        top: 49px;
        left: 0;
        width: 24px;
        font-family: "Inter", Helvetica;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .text-wrapper-13 {
        position: absolute;
        top: 145px;
        left: 0;
        width: 24px;
        font-family: "Inter", Helvetica;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .flexcontainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        position: absolute;
        width: 305px;
        height: 164px;
        top: 0;
        left: 31px;
    }

    .mobile .text {
        position: relative;
        align-self: stretch;
        font-family: "Inter", Helvetica;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 400;
        font-size: 14px;
    }

    .mobile .text-wrapper-14 {
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
    }

    .mobile .group-8 {
        position: absolute;
        width: 331px;
        height: 36px;
        top: 2894px;
        left: 26px;
        display: flex;
        gap: 18px;
    }

    .mobile .group-9 {
        margin-top: 0;
        width: 125.82px;
        height: 36.39px;
        position: relative;
    }

    .mobile .rectangle-2 {
        position: absolute;
        top: 1px;
        left: 0;
        width: 124px;
        height: 36px;
        background-color: #9b26b6;
        border-radius: 8px;
    }

    .mobile .text-wrapper-15 {
        position: absolute;
        top: 8px;
        left: 7px;
        width: 111px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        letter-spacing: 0;
        line-height: 21px;
        white-space: nowrap;
    }

    .mobile .group-10 {
        margin-top: 0;
        width: 189.27px;
        height: 36.39px;
        position: relative;
    }

    .mobile .rectangle-3 {
        position: absolute;
        top: 1px;
        left: 0;
        width: 187px;
        height: 36px;
        background-color: #ffffff;
        border-radius: 8px;
    }

    .mobile .tarjoa-palvelun {
        position: absolute;
        top: 8px;
        left: 7px;
        width: 172px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #9b26b6;
        font-size: 14px;
        text-align: center;
        letter-spacing: 0;
        line-height: 21px;
        white-space: nowrap;
    }

    .mobile .group-11 {
        position: absolute;
        width: 260px;
        height: 173px;
        top: 3027px;
        left: 65px;
        display: flex;
        flex-direction: column;
    }

    .mobile .group-12 {
        width: 251.26px;
        height: 47.91px;
        position: relative;
    }

    .mobile .vector-2 {
        position: absolute;
        top: 2px;
        left: 1px;
        width: 284px;
        height: 39px;
        object-fit: cover;
    }

    .mobile .group-13 {
        position: absolute;
        top: 9px;
        left: 16px;
        width: 221px;
        height: 27px;
        display: flex;
        gap: 11.6px;
    }

    .mobile .text-wrapper-16 {
        width: 28px;
        height: 27px;
        font-family: "Font Awesome 6 Pro-Light", Helvetica;
        font-weight: 300;
        color: #d1ff9e;
        font-size: 28px;
        letter-spacing: 0.50px;
        line-height: 27px;
        text-align: center;
        white-space: nowrap;
    }

    .mobile .text-wrapper-17 {
        margin-top: 6px;
        width: 177px;
        height: 19px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 16px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .mobile .group-wrapper {
        width: 246.04px;
        height: 42.5px;
        margin-top: 16.1px;
        display: flex;
        background-image: url(./vector-13.svg);
        background-size: 100% 100%;
    }

    .mobile .group-14 {
        margin-top: 6.8px;
        width: 197.61px;
        margin-left: 15.9px;
        display: flex;
        gap: 11.6px;
    }

    .mobile .text-wrapper-18 {
        margin-top: 5px;
        width: 154px;
        height: 19px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 16px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .mobile .group-15 {
        width: 260.42px;
        height: 46.99px;
        position: relative;
        margin-top: 19.9px;
    }

    .mobile .vector-3 {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 260px;
        height: 45px;
    }

    .mobile .group-16 {
        position: absolute;
        top: 10px;
        left: 16px;
        width: 235px;
        height: 27px;
        display: flex;
        gap: 11.6px;
    }

    .mobile .p {
        margin-top: 4px;
        width: 191px;
        height: 19px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 16px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .mobile .image-6 {
        position: absolute;
        top: 3435px;
        left: 0;
        width: 100%;
        height: 861px;
        background-image: url(./image-39.svg);
        background-size: cover;
    }

    .mobile .logo-horizontal-2 {
        position: absolute;
        top: 3714px;
        left: calc(50.00% - 78px);
        width: 156px;
        height: 44px;
    }

    .mobile .group-17 {
        position: absolute;
        width: 136px;
        height: 587px;
        top: 3535px;
        left: 127px;
        display: flex;
        flex-direction: column;
        gap: 59.4px;
    }

    .mobile .group-18 {
        width: 140px;
        height: 155.96px;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .mobile .text-wrapper-19 {
        width: 136px;
        height: 41px;
        margin-top: 0;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 34px;
        text-align: center;
        letter-spacing: 0.25px;
        line-height: normal;
    }

    .mobile .lorem-ipsum-dolor a {
        color: white;
        text-decoration: none;
    }

    .mobile .lorem-ipsum-dolor a:visited {
        color: white;
    }

    .mobile .lorem-ipsum-dolor a:hover {
        color: white;
    }

    .mobile .lorem-ipsum-dolor a:active {
        color: white;
    }

    .mobile .lorem-ipsum-dolor {
        margin-left: 15.5px;
        width: 105px;
        height: 96px;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #ffffff;
        font-size: 16px;
        letter-spacing: 0.50px;
        line-height: 32px;
        text-decoration: underline;
    }

    .mobile .group-19 {
        width: 140px;
        height: 155.96px;
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .mobile .text-wrapper-20 {
        position: absolute;
        top: 787px;
        left: 26px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 24px;
        letter-spacing: 0;
        line-height: normal;
    }

    .mobile .text-wrapper-21 {
        position: absolute;
        top: 1453px;
        left: 26px;
        width: 330px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #ffffff;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
    }
}

@media (min-width: 768px) {
    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }

    #book-section {
        scroll-margin-top: 250px;
    }

    #about-section {
        scroll-margin-top: -400px;
    }

    #provider-section {
        scroll-margin-top: 400px;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        overflow-x: hidden;
        min-width: 1440px;
    }

    .desktop {
        background-color: #ffffff;
        overflow: hidden;
        width: 100%;
        min-height: 4196px;
        position: relative;
        margin: 0 auto;
    }

    .desktop .pexels-cristian {
        position: absolute;
        top: 2769px;
        left: 0;
        width: 100%;
        height: 960px;
        aspect-ratio: 1.5;
        object-fit: cover;
    }

    .desktop .pexels-blue-bird {
        position: absolute;
        top: 1364px;
        right: 0;
        width: 618px;
        height: 958px;
        aspect-ratio: 0.65;
    }

    .desktop .putkimies {
        position: absolute;
        top: 1453px;
        height: 879px;
        width: 51%;
        object-fit: cover;
        left: 51%;
    }

    .desktop .vector {
        position: absolute;
        top: 1505px;
        left: 50%;
        width: 185px;
        height: 827px;
    }

    .desktop .rectangle {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 103px;
        background-color: #ffffff;
        z-index: 1000;
    }

    .desktop .frame {
        position: fixed;
        top: 39px;
        right: 31px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 30px;
        z-index: 1001;
    }

    .desktop .text-wrapper {
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #9b26b6;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .div {
        position: relative;
        width: fit-content;
        margin-top: -2.50px;
        margin-bottom: -0.50px;
        margin-left: -122.00px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #9b26b6;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -2.50px;
        margin-bottom: -0.50px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #9b26b6;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .image {
        position: absolute;
        top: 103px;
        left: 0;
        width: 100%;
        height: 818px;
        object-fit: cover;
    }

    .desktop .text-wrapper-3 {
        position: absolute;
        top: 228px;
        left: 97px;
        width: 532px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 60px;
        letter-spacing: -0.50px;
        line-height: normal;
    }

    .desktop .tilaa-luotettava {
        position: absolute;
        top: 427px;
        left: 97px;
        width: 363px;
        font-family: var(--action-large-semibold-font-family);
        font-weight: var(--action-large-semibold-font-weight);
        color: #ffffff;
        font-size: var(--action-large-semibold-font-size);
        letter-spacing: var(--action-large-semibold-letter-spacing);
        line-height: var(--action-large-semibold-line-height);
        font-style: var(--action-large-semibold-font-style);
    }

    .desktop .img {
        position: absolute;
        top: 783px;
        left: 0;
        width: 100%;
        height: 805px;
        object-fit: cover;
    }

    .desktop .logo-horizontal {
        position: fixed;
        top: 21px;
        left: 31px;
        width: 216px;
        height: 61px;
        z-index: 1001;
    }

    .desktop .lataa-sovellus-l-yd {
        position: absolute;
        top: 633px;
        left: 97px;
        width: 448px;
        font-family: var(--heading-4-bold-font-family);
        font-weight: var(--heading-4-bold-font-weight);
        color: #a8ff46;
        font-size: var(--heading-4-bold-font-size);
        letter-spacing: var(--heading-4-bold-letter-spacing);
        line-height: var(--heading-4-bold-line-height);
        font-style: var(--heading-4-bold-font-style);
    }

    .desktop .group {
        position: absolute;
        top: 670px;
        left: 97px;
        width: 260px;
        height: 42px;
        display: flex;
        gap: 10.9px;
    }

    .desktop .image-2 {
        width: 124.39px;
        height: 41.59px;
        aspect-ratio: 2.99;
        object-fit: cover;
    }

    .desktop .image-3 {
        width: 124.67px;
        height: 41.59px;
        aspect-ratio: 3;
        object-fit: cover;
    }

    .desktop .palvelusi-hoidetaan {
        position: absolute;
        top: 1337px;
        left: 93px;
        width: 605px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #ffffff;
        font-size: 18px;
        letter-spacing: 0.50px;
        line-height: 36px;
    }

    .desktop .text-wrapper-4 {
        position: absolute;
        top: 1007px;
        left: 91px;
        width: 579px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 36px;
        letter-spacing: 0;
        line-height: normal;
    }

    .desktop .group-2 {
        position: absolute;
        top: 1714px;
        left: 97px;
        width: 742px;
        height: 403px;
    }

    .desktop .tilaa-mit-tarvitset {
        position: absolute;
        top: 83px;
        left: 83px;
        width: 655px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 20px;
        letter-spacing: 0.50px;
        line-height: 32px;
    }

    .desktop .span {
        font-weight: 700;
        letter-spacing: 0.10px;
    }

    .desktop .text-wrapper-5 {
        font-weight: 500;
        letter-spacing: 0.10px;
    }

    .desktop .group-3 {
        position: absolute;
        top: 318px;
        left: 0;
        width: 56px;
        height: 54px;
    }

    .desktop .ellipse {
        position: absolute;
        top: 0;
        left: 0;
        width: 54px;
        height: 54px;
        background-color: #d1ff9e;
        border-radius: 26.99px;
    }

    .desktop .text-wrapper-6 {
        left: 19px;
        position: absolute;
        top: 12px;
        font-family: var(--heading-3-bold-font-family);
        font-weight: var(--heading-3-bold-font-weight);
        color: #9b26b6;
        font-size: var(--heading-3-bold-font-size);
        text-align: center;
        letter-spacing: var(--heading-3-bold-letter-spacing);
        line-height: var(--heading-3-bold-line-height);
        font-style: var(--heading-3-bold-font-style);
    }

    .desktop .group-4 {
        position: absolute;
        top: 214px;
        left: 0;
        width: 56px;
        height: 54px;
    }

    .desktop .group-5 {
        position: absolute;
        top: 91px;
        left: 0;
        width: 56px;
        height: 54px;
    }

    .desktop .text-wrapper-7 {
        left: 21px;
        position: absolute;
        top: 12px;
        font-family: var(--heading-3-bold-font-family);
        font-weight: var(--heading-3-bold-font-weight);
        color: #9b26b6;
        font-size: var(--heading-3-bold-font-size);
        text-align: center;
        letter-spacing: var(--heading-3-bold-letter-spacing);
        line-height: var(--heading-3-bold-line-height);
        font-style: var(--heading-3-bold-font-style);
    }

    .desktop .text-wrapper-8 {
        position: absolute;
        top: 0;
        left: 83px;
        width: 474px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #9b26b6;
        font-size: 48px;
        letter-spacing: -0.50px;
        line-height: normal;
    }

    .desktop .group-6 {
        position: absolute;
        top: 2198px;
        left: 1px;
        width: 100%;
        height: 1033px;
    }

    .desktop .image-4 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1033px;
        object-fit: cover;
    }

    .desktop .text-wrapper-9 {
        position: absolute;
        top: 268px;
        left: 716px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 48px;
        letter-spacing: -0.50px;
        line-height: normal;
    }

    .desktop .tarkistetut {
        position: absolute;
        top: 339px;
        left: 716px;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        letter-spacing: 0.50px;
        line-height: 45px;
    }

    .desktop .lumityo {
        position: absolute;
        top: 2466px;
        left: 178px;
        width: 420px;
        height: 315px;
        aspect-ratio: 1.33;
    }

    .desktop .button {
        all: unset;
        box-sizing: border-box;
        left: 716px;
        width: 175px;
        background-color: #9b26b6;
        box-shadow: 0px 2px 8px #00000040;
        position: absolute;
        top: 2744px;
        height: 46px;
        border-radius: 8px;
    }

    .desktop .book-service {
        position: absolute;
        width: 63.43%;
        height: 45.65%;
        top: 27.45%;
        left: 18.45%;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: 21px;
        white-space: nowrap;
    }

    .desktop .book-service-wrapper {
        all: unset;
        box-sizing: border-box;
        left: 911px;
        width: 226px;
        background-color: #ffffff;
        box-shadow: 0px 4px 8px #00000040;
        position: absolute;
        top: 2744px;
        height: 46px;
        border-radius: 8px;
    }

    .desktop .book-service-2 {
        position: absolute;
        width: 81.42%;
        height: 45.65%;
        top: 27.45%;
        left: 9.05%;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #9b26b6;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: 21px;
        white-space: nowrap;
    }

    .desktop .group-wrapper {
        position: absolute;
        top: 3579px;
        top: 3553px;
        left: 0;
        width: 100%;
        height: 644px;
        display: flex;
        justify-content: center;
        background-image: url(./image-8-1.svg);
        background-size: cover;
    }

    .desktop .group-7 {
        margin-top: 224.5px;
        width: 1082.87px;
        height: 343.57px;
        margin-left: -17.4px;
        display: flex;
        flex-direction: column;
        gap: 126.9px;
    }

    .desktop .group-8 {
        width: 1082.87px;
        margin-top: 0;
        display: flex;
        gap: 333.4px;
    }

    .desktop .group-9 {
        margin-top: 0;
        height: 155.96px;
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .desktop .text-wrapper-10 {
        width: 136px;
        height: 41px;
        margin-top: 0;
        font-family: "Inter", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 34px;
        letter-spacing: 0.25px;
        line-height: normal;
    }

    .desktop .lorem-ipsum-dolor a {
        color: white;
        text-decoration: none;
    }

    .desktop .lorem-ipsum-dolor a:visited {
        color: white;
    }

    .desktop .lorem-ipsum-dolor a:hover {
        color: white;
    }

    .desktop .lorem-ipsum-dolor a:active {
        color: white;
    }

    .desktop .lorem-ipsum-dolor {
        height: 96px;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #ffffff;
        font-size: 16px;
        letter-spacing: 0.50px;
        line-height: 32px;
        text-decoration: underline;
    }

    .desktop .logo-horizontal-2 {
        margin-left: -14.6px;
        height: 60.76px;
        width: 215.97px;
        align-self: center;
    }

    .desktop .group-10 {
        position: absolute;
        top: 2947px;
        left: 99px;
        width: 333px;
        height: 68px;
    }

    .desktop .vector-2 {
        position: absolute;
        top: 3px;
        left: 1px;
        width: 362px;
        height: 56px;
        object-fit: cover;
    }

    .desktop .group-11 {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 288px;
        height: 29px;
        display: flex;
        gap: 23.8px;
    }

    .desktop .text-wrapper-11 {
        width: 40px;
        height: 27px;
        font-family: "Font Awesome 6 Pro-Light", Helvetica;
        font-weight: 300;
        font-size: 40px;
        color: #d1ff9e;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .text-wrapper-12 {
        margin-top: 5px;
        width: 220px;
        height: 24px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 20px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .desktop .div-wrapper {
        position: absolute;
        top: 2954px;
        left: 538px;
        width: 322px;
        height: 54px;
        display: flex;
        background-image: url(./vector-13.svg);
        background-size: 100% 100%;
    }

    .desktop .group-12 {
        margin-top: 12.7px;
        width: 262.76px;
        margin-left: 14.0px;
        display: flex;
        gap: 26.8px;
    }

    .desktop .text-wrapper-13 {
        margin-top: 3px;
        width: 192px;
        height: 24px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 20px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .desktop .group-13 {
        position: absolute;
        top: 2945px;
        left: 962px;
        width: 349px;
        height: 65px;
    }

    .desktop .vector-3 {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 349px;
        height: 61px;
    }

    .desktop .group-14 {
        position: absolute;
        top: 19px;
        left: 16px;
        width: 308px;
        height: 27px;
        display: flex;
        gap: 25.8px;
    }

    .desktop .p {
        margin-top: 3px;
        width: 238px;
        height: 24px;
        font-family: "Inter", Helvetica;
        font-weight: 500;
        color: #d1ff9e;
        font-size: 20px;
        letter-spacing: 0.15px;
        line-height: normal;
        white-space: nowrap;
    }

    .desktop .frame-2 {
        display: inline-flex;
        align-items: center;
        gap: 38px;
        position: absolute;
        top: 1079px;
        left: 96px;
    }

    .desktop .component {
        background-image: url(./sa-hko-mies@2x.png);
        position: relative;
        width: 230px;
        height: 230px;
        background-size: 100% 100%;
    }

    .desktop .frame-3 {
        display: flex;
        flex-direction: column;
        width: 52.01%;
        height: 22.47%;
        align-items: center;
        position: absolute;
        top: 0;
        left: 23.99%;
    }

    .desktop .frame-wrapper {
        display: flex;
        width: 223px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 6px 24px;
        position: relative;
        flex: 0 0 auto;
        margin-left: -51.69px;
        margin-right: -51.69px;
        background-color: #9b26b6;
    }

    .desktop .frame-4 {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        position: relative;
        flex: 0 0 auto;
    }

    .desktop .text-wrapper-14 {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "Font Awesome 6 Pro-Solid", Helvetica;
        font-weight: 400;
        font-size: 20px;
        color: #d1ff9e;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .siivous {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: "Inter", Helvetica;
        font-weight: 600;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.50px;
        line-height: 27px;
        white-space: nowrap;
    }

    .desktop .rectangle-2 {
        position: relative;
        width: 222.91px;
        height: 12.68px;
        margin-left: -51.64px;
        margin-right: -51.64px;
    }

    .desktop .element-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 6px 16px;
        position: absolute;
        top: calc(50.00% + 79px);
        left: calc(50.00% + 9px);
        background-color: #ffffff;
        border-radius: 26px;
    }

    .desktop .element {
        position: relative;
        width: fit-content;
        margin-top: -1.00px;
        font-family: var(--overline-small-regular-font-family);
        font-weight: var(--overline-small-regular-font-weight);
        color: #000000;
        font-size: var(--overline-small-regular-font-size);
        text-align: center;
        letter-spacing: var(--overline-small-regular-letter-spacing);
        line-height: var(--overline-small-regular-line-height);
        white-space: nowrap;
        font-style: var(--overline-small-regular-font-style);
    }

    .desktop .component-2 {
        background-image: url(./sa-hko-mies-1@2x.png);
        position: relative;
        width: 230px;
        height: 230px;
        background-size: 100% 100%;
    }

    .desktop .element-h-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 6px 16px;
        position: absolute;
        top: calc(50.00% + 79px);
        left: calc(50.00% + 12px);
        background-color: #ffffff;
        border-radius: 26px;
    }

    .desktop .component-3 {
        background-image: url(./sa-hko-mies-2@2x.png);
        position: relative;
        width: 230px;
        height: 230px;
        background-size: 100% 100%;
    }

    .desktop .frame-5 {
        margin-left: -12.00px;
        margin-right: -12.00px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        position: relative;
        flex: 0 0 auto;
    }

    .desktop .component-4 {
        background-image: url(./sa-hko-mies-3@2x.png);
        position: relative;
        width: 230px;
        height: 230px;
        background-size: 100% 100%;
    }

    .desktop .component-5 {
        background-image: url(./sa-hko-mies-4@2x.png);
        position: relative;
        width: 230px;
        height: 230px;
        background-size: 100% 100%;
    }

    .desktop .rectangle-3 {
        position: absolute;
        top: 1076px;
        left: 1163px;
        width: 235px;
        height: 233px;
        background: linear-gradient(88deg,
                rgba(176, 56, 255, 0) 0%,
                rgba(200, 82, 247, 1) 100%);
    }
}