:root {
    /* Texts */
    --fs-sm: 1.45rem;
    --fs-md: 1.75rem;

    --fs-h4: 2.8rem;
    --fs-h3: 3rem;
    --fs-h2: 3.3125rem;
    --fs-h1: 6.25rem;

    --color-dark: #02060d;
    --color-white: #ffffff;
    --color-accent: #00c46b;

    --radius-sm: 12px;
    --radius-lg: 40px;

    --gradient-green: linear-gradient(135deg, #00ff85 0%, #00c46b 100%);
    --gradient-blue: linear-gradient(135deg, #2b3956 0%, #182540 100%);
    --gradient-green-blue: linear-gradient(135deg, #00ff85 0%, #00c6ff 100%);
}

.in-rozcetnik-sluzeb {
    #content {
        max-width: 100% !important;
    }

    .benefits-section {
        display: flex;
        flex-direction: row;
        gap: 16px;
        height: 800px;
    }

    .feature-cards-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .feature-cards-row {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    .feature-card {
        background: var(--gradient-blue);
        border-radius: var(--radius-lg);
        padding: 50px;
    }

    .card-green {
        background: var(--gradient-green);
    }

    .feature-cards-row ul {
        padding: 0;
        justify-content: space-between;
    }

    .feature-cards-row ul li::marker {
        color: var(--color-accent);
    }

    /* specific cards*/
    .shoptet-desc {
        background-image: url("/user/documents/pw/img/rozcesnikN1/shoptet/Mask Group 19.png") !important;
        background-repeat: no-repeat;
        background-size: cover;
    }





    /*benefits - widths, heights*/
    .w-70 {
        width: 70%;
    }

    .w-30 {
        width: 30%;
    }

    .w-45 {
        width: 45%;
    }

    .w-55 {
        width: 55%;
    }

    .h-50 {
        height: 50%;
    }

    .h-70 {
        height: 70%;
    }

    .h-30 {
        height: 30%;
    }

    /*end of benefits - widths, heights*/
    /*typography*/
    .text-sm {
        font-size: var(--fs-sm);
    }

    .text-md {
        font-size: var(--fs-md);
    }

    .heading-1 {
        font-size: var(--fs-h1);
    }

    .heading-2 {
        font-size: var(--fs-h2);
        line-height: 30px;
        letter-spacing: 0.75px;
        padding: 20px 0;
    }

    .heading-3 {
        font-size: var(--fs-h3);
    }

    .heading-4 {
        font-size: var(--fs-h4);
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 0.7px;
    }

    .weight-800 {
        font-weight: 800;
    }

    .text-center {
        text-align: center;
    }
    .justify-end{
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
        /*color*/
        .text-dark {
            color: var(--color-dark);
        }

        .text-accent {
            color: var(--color-accent);
        }

        /*btn*/
        .btn {
            background-color: var(--color-accent);
            border-radius: var(--radius-sm);
            border-color: var(--color-accent);
            color: var(--color-dark) !important;
            margin: 0px;
        }
        .btn span{
            color: var(--color-dark) !important;
        }

        .btn--primary {
            border-radius: var(--radius-lg);
        }

        .btn--secondary {
            border-radius: var(--radius-sm);
        }



    }