@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus_jakarta_sans/PlusJakartaSans-VariableFont_wght.ttf');
}

:root {
    --primary: #d32e3f;
    --primary-rgb: 211, 46, 63;
    --info: #007bff;
}

:root[data-mode=light] {
    --primary-for-text: #d32e3f;
    
    --text-primary: rgb(130, 130, 130);
    --text-hover: rgb(170, 170, 170);

    --text-base: #fff;
    --text-contrast: rgb(60, 60, 60);
    --text-contrast-hover: rgb(120, 120, 120);

    --bg-contrast: #000;
    --bg-white-card: #fff;

    --bg-shade-1: #fff;
    --bg-shade-2: rgb(244, 244, 244);
    --bg-shade-3: rgb(230, 230, 230);
    --bg-shade-4: rgb(200, 200, 200);
    --bg-shade-5: rgb(150, 150, 150);
    --bg-shade-6: rgb(100, 100, 100);
    --bg-shade-7: rgb(80, 80, 80);
}

:root[data-mode=dark] {
    --primary-for-text: #fff;
    
    --text-primary: rgb(160, 160, 160);
    --text-hover: rgb(130, 130, 130);

    --text-base: #000;
    --text-contrast: #fff;
    --text-contrast-hover: rgb(180, 180, 180);

    --bg-contrast: #fff;
    --bg-white-card: rgb(35, 35, 35);

    --bg-shade-1: rgb(40, 40, 40);
    --bg-shade-2: rgb(35, 35, 35);
    --bg-shade-3: rgb(50, 50, 50);
    --bg-shade-4: rgb(80, 80, 80);
    --bg-shade-5: rgb(120, 120, 120);
    --bg-shade-6: rgb(160, 160, 160);
    --bg-shade-7: rgb(240, 240, 240);
}

html {
    font-size: 62.5%;
    
    @media (max-width: 700px) {
        font-size: 45%;
    }
}

html * {
    transition:
        background-color .2s,
        border-color .2s,
        color .2s;
}

body {
    font-family: 'Plus Jakarta Sans';
    color: var(--text-primary);
    background-color: var(--bg-shade-1);
}

body.no-scroll {
    height: 100%;
    overflow: hidden;
}

a {
    color: var(--text-primary);
}

button {
    cursor: pointer;
    color: var(--text-primary);
}

section {
    scroll-margin-top: 80px;
}

input[type=submit] {
    cursor: pointer;
}

/* checkbox start */

.checkbox-label {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    display: flex;
    align-items: center;
}

.checkbox {
    height: 2.4rem;
    aspect-ratio: 1/1;
    border: 2px solid var(--primary);
    border-radius: 6px;
    position: relative;

    transition: all .2s;
}

.checkbox::after {
    content: "";
    width: 12px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;

    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    translate: -50% -50%;
    rotate: -45deg;

    opacity: 0;
    transition: all .2s;
}

input[type=checkbox]:checked ~ .checkbox {
    background-color: var(--primary);
}

input[type=checkbox]:checked ~ .checkbox::after {
    opacity: 1;
}

input[type=checkbox]:disabled ~ .checkbox {
    border-color: var(--text-primary);
}

input[type=checkbox]:checked:disabled ~ .checkbox {
    background-color: var(--text-primary);
}

.checkbox-text {
    margin-left: 16px;
    font-size: 2.2rem;
    font-weight: 600;
}

input[type=checkbox] {
    width: 0;
    height: 0;
}

/* checkbox end */

input[type=text],
textarea {
    background-color: var(--bg-shade-1);
    padding: 16px 20px;
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-contrast);
    border-radius: 4px;
    border: 3px solid var(--bg-shade-3);
    transition: border .2s;
}

input[type=text]::-moz-placeholder, textarea::-moz-placeholder {
    font-size: 1.8rem;
    opacity: .6;
}

input[type=text]::placeholder,
textarea::placeholder {
    font-size: 1.8rem;
    opacity: .6;
}

input[type=text]:focus,
textarea:focus {
    border-bottom: 3px solid var(--bg-shade-6);
}

.main-padding {
    padding: 0 60px;
    padding-top: 80px;

    @media (width <= 1200px) {
        padding: 0 48px;
        padding-top: 70px;
    }

    @media (width <= 700px) {
        padding: 0 24px;
        padding-top: 60px;
    }
}

.wrapper-large {
    margin: 0 auto;
    max-width: 1320px;
}

.wrapper-small {
    margin: 0 auto;
    max-width: 1140px;
}

.hero-plain {
    height: -moz-fit-content;
    height: fit-content;
    padding: 80px;
    background-color: var(--bg-shade-3);

    h1 {
        color: var(--text-contrast);
        font-size: 6rem;
        font-weight: 600;
    }

    @media (width <= 1200px) {
        padding: 60px;
        text-align: center;

        h1 {
            font-size: 5.2rem;
        }
    }

    @media (width <= 800px) {
        padding: 60px 24px;
        
        h1 {
            font-size: 4.6rem;
        }
    }
}

/* preloader */

.preloader {
    width: 100vw;
    height: 100svh;
    background-color: var(--primary);

    display: none; /* changes to flex using js */
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;

    transition: translate 1s ease-in-out;

    .text {
        padding-bottom: 24px;
        overflow: hidden;
    }

    .text li {
        width: auto;
        font-size: 5vw;
        color: #fff;
        font-weight: 600;

        transform: translateY(400%);
    }

    .text li.text-in {
        transform: translateY(0);
        animation: textIn 1.4s ease-out;
    }

    .watermarks {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .watermarks img {
        position: absolute;
        opacity: .08;
    }

    .watermarks img:nth-child(1) {height: 10vw; bottom: 20%; left: 10%;}
    .watermarks img:nth-child(2) {height: 10vh; top: 10%; right: 40%;}
    .watermarks img:nth-child(3) {height: 18vh; bottom: 10%; right: 10%;}
}

.preloader.closed {
    translate: 0 -100vh;
}

@keyframes textIn {
    0% {
        transform:translateY(400%)
    }
    to {
        transform:translateY(0)
    }
}

/* loader */

.loader {
    width: 8rem;
    height: 8rem;
    border: .8rem solid #fff;
    border-bottom-color: var(--primary);
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
    display: inline-block;
    animation: loader-rotation 1s linear infinite;
    
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1000;

    opacity: 0;
    transition: opacity .3s;
}

@keyframes loader-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader.active {
    opacity: 1;
}

/* blur */

.blur {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;

    transition: backdrop-filter .3s;
}

.blur.active {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 950;
}

/* HEADER */

.header {
    width: 100vw;
    height: 80px;
    padding: 0 60px;
    background-color: var(--bg-shade-1);
    
    display: flex;

    position: fixed;
    top: 0;
    z-index: 800;

    transition: all .2s;

    .logo {
        flex-basis: 0;
        display: flex;
        align-items: center;
    }

    .logo img {
        height: 40%;
    }

    .menu-btn {
        margin: 16px 0;
        margin-left: auto;
        aspect-ratio: 1/1;
        
        @media (width > 1200px) {
            display: none;
        }
    }
    
    .menu-btn svg {
        height: 100%;
        fill: var(--text-contrast);
    }
    
    .nav {
        margin-left: auto;
        display: flex;
        align-items: center;
        
        ul {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        
        a, button {
            padding: 8px 0;
            display: block;
            font-size: 2rem;
            font-weight: 500;
            transition: color .2s;
            color: var(--text-contrast);
        }
        
        a:hover, button:hover {
            color: var(--primary);
        }
        
        .btn {
            width: -moz-fit-content;
            width: fit-content;
            padding: 6px 16px;
            padding-top: 3px;
            
            font-size: 1.6rem;
            font-weight: 600;
            color: var(--bg-contrast);
            
            border-radius: 6px;
            background-color: var(--bg-shade-4);

            transition: all .3s;
        }
        
        .btn:hover {
            box-shadow: inset 60px 0 0 0 var(--primary);
            color: #fff;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }
        
        .switch:before {
            content: url("/assets/svg/darkmode_off.svg");
            left: 6px;
        }
        
        .switch:after,
        .switch:before {
            height: 15px;
            aspect-ratio: 1/1;
            cursor: pointer;
            position: absolute;
            z-index: 5;
            top: 50%;
            translate: 0 -50%;
        }
        
        .switch:after {
            content: url("/assets/svg/darkmode.svg");;
            right: 6px;
        }
        
        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--bg-shade-7);
            transition: .4s;
            border-radius: 28px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 5px;
            top: 5px;
            background-color: #fff;
            transition: .4s;
            border-radius: 20px;
            z-index: 10;
        }
        
        input:checked + .slider {
            background-color: var(--bg-shade-5);
        }

        input:checked + .slider:before {
            translate: 22px;
        }

        @media (width <= 1200px) {
            width: 100%;
            background-color:  var(--bg-shade-1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            
            position: fixed;
            top: 70px;
            left: 100vw;
            padding: 32px 0;
            z-index: 750;

            transition:
                background-color .2s,
                box-shadow 2s ease-in-out,
                translate .5s ease-in-out;
            

            ul {
                width: 100%;
                margin-left: 48px;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
            }

            ul li {
                width: 100%;
            }

            .btn,
            .switch {
                margin: 8px 0;
            }
        }

        @media (width <= 700px) {
            top: 60px;
        }
    }
    
    @media (width <= 1000px) {
        .nav.open {
            translate: -100vw;
        }
    }
    
    @media (width <= 1200px) {
        height: 70px;
        padding: 0 48px;
    }
    
    @media (width <= 700px) {
        height: 60px;
        padding: 0 24px;
    }
}

.header.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* SERVICES */

.services {
    padding: 60px 0;

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "l1 l1"
        "s1 s2"
        "s3 s4";
        gap: 48px;

        @media (width <= 800px) {
            grid-template-columns: 1fr;
            grid-template-areas:
            "l1"
            "s1"
            "s2"
            "s3"
            "s4";
        }

        .item {
            padding: 32px 48px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, .2);
            background-color: var(--bg-white-card);

            .title {
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 16px;
            }

            svg {
                fill: var(--primary);
            }

            h3, h4 {
                font-size: 3.2rem;
                font-weight: 600;

                color: var(--text-contrast);
            }
            
            h3 {
                font-size: 3.6rem;
                text-align: center;
            }
            
            .text {
                max-width: 900px;
                margin: 0 auto;
                margin-left: 40px;
                font-size: 2rem;
                font-weight: 600;
                position: relative;
            }

            .text::before {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: var(--text-primary);

                position: absolute;
                top: 50%;
                left: -8px;
                translate: -100% -50%;
            }

            .link {
                max-width: 750px;
                margin: 0 auto;
                margin-top: 16px;
                color: var(--primary);
                font-size: 2rem;
                font-weight: 600;
                text-align: end;
            }
        }

        a.item:hover {
            background-color: var(--bg-shade-2);
        }

        a.item:hover .link {
            text-decoration: underline;
        }
    }

    .btn {
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
        margin-top: 48px;
        padding: 16px 60px;

        font-size: 2.4rem;
        font-weight: 600;
        text-align: center;
        color: #fff;
        display: block;
        border-radius: 10px;
        background-color: var(--primary);
        position: relative;
        
        transition: all .5s;
    }
    
    .btn::before {
        content: "";
        width: 100%;
        height: 100%;
        
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .btn:hover {
        box-shadow: inset 470px 0 0 0 var(--bg-white-card);
        color: var(--text-contrast);
    }
}

/* REFERENCE */

.reference {
    padding: 60px 0;

    h3 {
        margin-bottom: 24px;
        text-align: center;
        font-size: 4rem;
        font-weight: 600;
        color: var(--text-contrast);
    }

    .carousel {
        display: flex;
        flex-direction: column;
        gap: 48px;

        .row {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        
        .arrow {
            width: 60px;
            flex-shrink: 0;
            
            transition: all .3s;
        }
        
        .arrow.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .arrow svg {
            fill: var(--text-contrast);
            transition: all .3s;
        }

        .arrow:hover svg {
            fill: var(--primary);
        }

        .container {
            padding: 0 30px;
            overflow: hidden;
        }

        .slider {
            display: flex;
            transition: all .8s ease-in-out;
        }

        .slider .item {
            flex-shrink: 0; 
            width: 100%;
            padding: 24px 48px;

            background-color: var(--bg-shade-2);
            border-radius: 10px;

            display: flex;
            align-items: center;
            gap: 48px;
            

            .text {
                flex-basis: 0;
                flex-grow: 2;
            }

            .text h4 {
                margin-bottom: 8px;
                font-size: 3rem;
                font-weight: 600;
                color: var(--text-contrast);
            }

            .text h5 {
                font-size: 2.4rem;
                font-weight: 600;
                color: var(--primary);
            }
        
            .text p {
                margin-bottom: 12px;
                font-size: 2.2rem;
                font-weight: 500;
                color: var(--text-primary);
            }

            .text p:last-child {
                margin-bottom: 0;
            }
        
            .img {
                min-height: -moz-max-content;
                min-height: max-content;
                flex-basis: 0;
                flex-grow: 3;

                border-radius: 16px;
                border: 3px solid var(--bg-contrast);
                overflow: hidden;
            }

            .img img {
                width: 100%;
            }
        }
    }

    @media (width <= 1100px) {
        h3 {
            margin-bottom: 24px;
        }

        .carousel .row {
            gap: 0;
            
            .container {
                padding: 0;

                .item > div {
                    flex-grow: 0;
                }
            }
        }

        .carousel .slider .item {
            flex-direction: column;
            text-align: center;

            img {
                max-width: 400px;
            }
        }
    }
}

/* NAV SECTION */

.nav-section {
    padding: 60px 0 120px;
    
    nav {
        margin: 0 auto;
        display: flex;
    }

    .item {
        width: 100%;
        padding: 32px 32px;
        border-right: dashed 3px var(--bg-shade-4);
        
        .head {
            display: flex;
            margin-bottom: 48px;
            align-items: center;
        }

        .head h4 {
            font-size: 3.2rem;
            font-weight: 500;
            color: var(--text-contrast);
        }
    
        .head .icon {
            height: 48px;
            margin-left: auto;
            fill: var(--text-contrast);
        }

        .text {
            height: 100px;
            margin-bottom: 24px;
            font-size: 1.8rem;
        }

        .btn {
            width: -moz-fit-content;
            width: fit-content;
            padding: 12px 60px;
            font-size: 1.6rem;
            font-weight: 600;
            border-radius: 10px;
            color: var(--text-contrast);
            background-color: var(--bg-shade-3);
            transition: all .3s ease-in-out;
        }
    }

    .item:hover .btn {
        box-shadow: inset 200px 0 0 0 var(--primary);
        color: #fff;
    }
    
    @media (width <= 950px) {
        padding-bottom: 60px;

        nav {
            max-width: 500px;
            flex-direction: column;
        }

        .item {
            border-right: none;
            border-bottom: dashed 3px var(--bg-shade-4);
        }
    }

    .item:last-child {
        border: none;
    }
}

/* FOOTER */

.footer {
    --footer-color: var(--text-contrast);
    --footer-hover-color: var(--text-contrast-hover);

    padding: 0 60px 48px;
    background-color: var(--bg-shade-2);

    .contact-link {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        
        padding: 16px 48px;
        margin: 0 auto;
        margin-bottom: 48px;

        font-size: 2rem;
        font-weight: 700;
        color: var(--text-base);
        border-radius: 0 0 20px 20px;
        background-color: var(--footer-color);
        transition: background-color .2s;
    }

    .contact-link:hover {
        background-color: var(--footer-hover-color);
    }

    .links {
        padding: 4.8rem 0;
        border-top: dashed 3px var(--bg-shade-4);
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;

        > div {
            flex-grow: 1;
            flex-basis: 0;
            min-width: -moz-max-content;
            min-width: max-content;
            display: flex;
            align-items: center;
        }

        p, a {
            font-size: 2rem;
            font-weight: 600;
            color: var(--footer-color);
        }
        
        a {
            transition: color .2s;
        }
            
        a:hover {
            color: var(--footer-hover-color);
        }

        .info {
            justify-content: flex-start;
            gap: 16px;
        }

        .logo {
            height: 25px;
        }

        .info .logo svg {
            height: 100%;
            fill: var(--footer-color);
        }

        .info .logo:hover svg {
            fill: var(--footer-hover-color);
        }

        .social-media {
            justify-content: center;
            gap: 24px;
        }

        .social-media svg {
            height: 5rem;
            fill: var(--footer-color);
            transition: fill .2s;
        }

        .social-media svg:hover {
            fill: var(--footer-hover-color);
        }

        .nav {
            flex-direction: column;
            align-items: flex-end;

            @media (width <= 1100px) {
                align-items: center;
            }
            
            .row {
                display: flex;
                gap: 16px;
            }
            
            .row button {
                display: flex;
    
                p {
                    transition: all .2s;
                }
    
                svg {
                    height: 3rem;
                    rotate: -90deg;
                    fill: var(--footer-color);
                    transition: all .2s;
                }
            }
    
            .row button:hover p {
                color: var(--footer-hover-color);
            }
    
            .row button:hover svg {
                fill: var(--footer-hover-color);
            }

        }
        
        
        @media (width <= 1100px) {
            flex-direction: column;
        }
    }
    
    .dropdown {
        padding-top: 24px;
        border-top: dashed 3px var(--bg-shade-4);

        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .5s ease-in-out;
    }
    
    .dropdown.active {
        grid-template-rows: 1fr;
    }
    
    .dropdown .pdf-links {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    
        a {
            padding: 8px;
            text-align: end;
            font-size: 1.8rem;
            text-decoration: underline;
            text-wrap: wrap;
            color: var(--text-primary);
    
            @media (width <= 1100px) {
                text-align: center;
            }
        }
    
        a:hover {
            color: var(--text-hover);
        }
    }
}

.footer__bottom {
    padding: 24px;
    background-color: var(--bg-shade-1);
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;

    div,
    a {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    p {
        font-size: 1.8rem;
        line-height: 1.8rem;
        font-weight: 600;
        color: var(--text-contrast);
    }

    img {
        height: 2.4rem;
    }

    @media (width <= 800px) {
        flex-direction: column;
    }

    @media (width <= 500px) {
        div,
        a {
            flex-direction: column;
            gap: 16px;
        }
    }
}

/* HERO */

.index__hero {
    margin-bottom: 20px;
    height: calc(100vh - 2 * 80px);
    
    @media (width <= 1200px) {
        margin-bottom: 10px;
        height: calc(100svh - 2 * 70px);
    }

    @media (width <= 700px) {
        margin-bottom: 0;
        height: calc(100svh - 2 * 60px);
    }

    overflow: hidden;

    position: relative;
    
    video {
        height: 100%;
        min-height: 60vw;
        min-width: 100%;
        
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .video-container::after {
        content: "";
        
        height: 100%;
        width: 100%;
        position: absolute;
        background-color: #000;
        opacity: .6;
    }
    
    h1 {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-top: 80px;
        margin-right: 120px;

        color: #fff;
        font-size: 6.4rem;
        font-weight: 600;
        text-align: center;
        
        position: relative;
        z-index: 1;
    }
    
    h2 {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-bottom: 32px;
        margin-top: 25px;
        margin-right: 120px;
        
        color: #fff;
        font-size: 3.6rem;
        font-weight: 500;
        text-align: center;
        
        position: relative;
        z-index: 1;
    }

    .btn {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: 120px;
        padding: 16px 32px;
        border-radius: 15px;
        color: #000;
        background-color: #fff;
        font-size: 2rem;
        font-weight: 600;
        
        display: flex;
        gap: 8px;
        
        position: relative;
        z-index: 1;
        
        transition: all .3s ease-in-out;
    }
    
    .btn:hover {
        box-shadow: inset 150px 0 0 0 var(--primary);
        color: #fff;
    }
    
    @media (width <= 1200px) {
        h1 {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding: 0 16px;

            font-size: 5.2rem;
        }

        h2 {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding: 0 16px;

            font-size: 2.4rem;
        }

        .btn {
            margin: 0 auto;
        }
    }
}

/* SRVICES */

/* STATS */

.stats {
    overflow: hidden;
    padding: 60px 0;
    margin-bottom: 20px;
    background-color: var(--bg-shade-2);

    h3 {
        margin-bottom: 24px;
        text-align: center;
        font-size: 4rem;
        font-weight: 600;
        color: var(--text-contrast);
    }

    .container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "l1 s1 s2";
        gap: 60px;
    }
    
    .container > div {
        display: flex;
        flex-direction: column;
    }
    
    .nums {
        min-height: 300px;
        width: 100%;
        padding-right: 16px;
    }
    
    .nums .card {
        height: 100%;
        padding: 0 24px;
        border-bottom: dashed 3px var(--bg-shade-4);
        
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        
        .num {
            flex-shrink: 0;
            width: 70px;
            font-size: 3.6rem;
            font-weight: 500;
            color: var(--text-contrast);
        }
        
        .caption {
            width: 100%;
            text-align: start;
            font-size: 2.4rem;
        }
    }
    
    @media (width > 1600px) {
        .nums .card:last-child {
            border-bottom: none;
        }
    }
    
    .info {
        justify-content: center;
        align-items: center;
        
        .info-container {
            width: -moz-fit-content;
            width: fit-content;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 24px;
        }

        .labels {
            padding: 32px;
            border-radius: 20px;
            background-color: var(--bg-shade-1);
            
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .labels .item {
            display: flex;
            gap: 8px;
            
            .square {
                height: 25px;
                aspect-ratio: 1/1;
                border-radius: 5px;
            }
            .text {
                font-size: 2rem;
                font-weight: 700;
            }
        }
        
        .num-container {
            width: 100%;
            padding: 12px 24px;
            background-color: var(--bg-shade-1);
            border-radius: 20px;
            
            .caption {
                font-size: 2rem;
                font-weight: 600;
                text-align: center;
            }
            
            .num {
                font-size: 3.2rem;
                font-weight: 600;
                text-align: center;
                color: var(--text-contrast);
            }
        }
        
    }
    
    .graph {
        --border-width: 3px;
        --sector-width: 24px;

        @media (width <= 550px) {
            --border-width: 2px;
            --sector-width: 18px;
        }
        
        width: 100%;
        aspect-ratio: 1/1;
        position: relative;

        .logo {
            width: 25%;
            
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }

        .backdrop {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            opacity: .3;
            -webkit-mask: radial-gradient(closest-side, transparent 0% calc(50% - var(--sector-width) / 2), black calc(50% - var(--sector-width) / 2) calc(100% - var(--sector-width) / 2), transparent calc(100% - var(--sector-width) / 2));
                    mask: radial-gradient(closest-side, transparent 0% calc(50% - var(--sector-width) / 2), black calc(50% - var(--sector-width) / 2) calc(100% - var(--sector-width) / 2), transparent calc(100% - var(--sector-width) / 2));

            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }

        .ring {
            border-radius: 50%;
            border: var(--border-width) dashed var(--primary);
    
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }

        .ring.large {
            width: calc(100% + var(--border-width) - var(--sector-width));
            height: calc(100% + var(--border-width) - var(--sector-width));
        }

        .ring.mid {
            width: calc(75% + var(--border-width) - var(--sector-width));
            height: calc(75% + var(--border-width) - var(--sector-width));
        }

        .ring.small {
            width: calc(50% + var(--border-width) - var(--sector-width));
            height: calc(50% + var(--border-width) - var(--sector-width));
        }

        .circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--sector-width)), black calc(100% - var(--sector-width)));
                    mask: radial-gradient(closest-side, transparent calc(100% - var(--sector-width)), black calc(100% - var(--sector-width)));

            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }

        /* circle sizes */
        .circle.large {
            width: calc(100%);
            height: calc(100%);
        }
        .circle.mid {
            width: calc(75%);
            height: calc(75%);
        }
        .circle.small {
            width: calc(50%);
            height: calc(50%);
        }
    }

    .update-text {
        margin-top: 24px;
        margin-right: 24px;
        font-size: 1.6rem;
        font-weight: 600;
        text-align: end;
    }

    @media (width <= 1600px) {
        .container {
            max-width: 800px;
            margin: 0 auto;
            grid-template-columns: auto 1fr;
            grid-template-areas:
            "l1 l1"
            "s1 s2";
        }
    }

    @media (width <= 900px) {
        .container {
            max-width: 600px;
            padding: 0 16px;
            margin: 0 auto;
            grid-template-columns: 1fr;
            grid-template-areas:
            "l1"
            "s1"
            "s2";
        }
    }
}

/* REFERENCE */

/* WHY-US */

.why-us {
    --card-gap: 24px;
    padding: 60px 0;

    h3 {
        margin-bottom: 48px;
        font-size: 4.8rem;
        font-weight: 600;
        color: var(--text-contrast);
    }
    
    .container {
        height: 200px;
        display: flex;
        flex-direction: column;

        .line {
            width: calc(100% - (100% - 5 * var(--card-gap)) / 5);
            height: 0px;
            margin: 0 auto;
            margin-bottom: 32px;
            border: 2px dashed var(--primary);
            position: relative;
        }

        .line img {
            height: 40px;
            padding: 5px;
            background-color: var(--bg-shade-1);
            position: absolute;
            top: 0;
            left: 0;
            
            translate: -50% -50%;
            transition:
                left .5s ease-in-out,
                background-color .2s;
        }

        .cards {
            margin: 0 auto;

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--card-gap);
        }

        .cards .item {
            flex-basis: 0;
            flex-grow: 1;

            max-width: 400px;
            min-width: 200px;
            height: -moz-fit-content;
            height: fit-content;

            text-align: center;
            padding: 24px 16px;
            border-radius: 8px;
            
            
            border: dashed 3px var(--bg-shade-4);
            transition: all .2s;

            svg {
                width: 40px;
                fill: var(--text-contrast);
                margin-bottom: 8px;
            }

            h4 {
                font-size: 2.4rem;
                font-weight: 600;
                margin-bottom: 10px;
                color: var(--text-contrast);
            }

            .grid {
                display: grid;
                grid-template-rows: 0fr;

                transition: grid-template-rows .2s;
            }

            .grid div {
                overflow: hidden;
            }

            p {
                font-size: 1.6rem;
                font-weight: 600;
            }
        }

        .cards:not(:has(.item:hover)) .item.active {
            border-color: var(--primary);

            .grid {
                grid-template-rows: 1fr;
            }
        }

        .cards .item:hover {
            border-color: var(--primary);

            .grid {
                grid-template-rows: 1fr;
            }
        }
        
    }

    .container:has(.cards .item:nth-child(1):hover) .line fimg {
        left: 0%;
    }
    .container:has(.cards .item:nth-child(2):hover) .line img {
        left: 25%;
    }
    .container:has(.cards .item:nth-child(3):hover) .line img {
        left: 50%;
    }
    .container:has(.cards .item:nth-child(4):hover) .line img {
        left: 75%;
    }
    .container:has(.cards .item:nth-child(5):hover) .line img {
        left: 100%;
    }
 
    @media (width <= 1250px) {
        .container {
            height: -moz-fit-content;
            height: fit-content;
        }

        .container .cards .item .grid {
            grid-template-rows: 1fr;
        }

        h3 {
            text-align: center;
        }

        .line {
            display: none;
        }
    }
}

/* PARTNERS */

.scroller {
    margin: 60px 0;
    padding: 60px 0;
    overflow: hidden;
    background-color: rgb(244, 244, 244);
}

.scroller__inner {
    width: -moz-fit-content;
    width: fit-content;
    height: 60px;
    display: flex;
    gap: 120px;
    animation: scroll var(--animation-duration, 40s) linear infinite;
}

@keyframes scroll {
    to {
        translate: calc(-50% - 60px);
    }
}

/* NAV SECTION */

/* O NAS */

.o-nas {
    padding: 60px;
    background-color: var(--bg-shade-2);

    .text-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    h1 {
        font-size: 4rem;
        font-weight: 600;
        color: var(--text-contrast);
    }

    h2,
    p {
        font-size: 2.4rem;
        font-weight: 500;
    }

    h2 {
        font-weight: 700;
    }

    @media (width <= 900px) {
        text-align: center;
    }

    @media (width <= 700px) {
        padding: 60px 24px;
    }
}

/* PHOTO SECTION */

.photo-section {
    padding: 120px 0;

    img {
        width: 100%;
    }

    @media (width <= 700px) {
        padding: 60px 0;
    }
}

/* TEXT SECTION */

.text-section {
    padding: 60px;
    background-color: var(--bg-shade-2);

    .text-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    p {
        font-size: 2.4rem;
        font-weight: 500;
    }
    
    @media (width <= 900px) {
        text-align: center;
    }

    @media (width <= 700px) {
        padding: 60px 24px;
    }
}

/* EVOLUTION */

.evolution {
    --padding-top: 60px;

    padding-top: var(--padding-top);
    background-color: var(--bg-light-gray);
    position: relative;

    .line {
        width: 100%;
        border: solid 1.5px var(--primary);
        background-color: var(--primary);
        position: absolute;
        top: calc(50% + var(--padding-top) / 2);
        left: 0;
        translate: 0 -50%;
    }

    .owl-carousel .item .up, .down {
        height: 180px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 24px;
    }

    .owl-carousel .item .up {
        justify-content: flex-end;
    }

    .owl-carousel .item .down {
        margin-top: calc(180px - 26px);
    }

    .owl-carousel .item .dot {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        display: block;
        background-color: var(--primary);
        border-radius: 30px;
    }

    .owl-carousel .item .content {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 8px;
    }

    .owl-carousel .item .year {
        font-size: 3.6rem;
        font-weight: 400;
        color: var(--primary);
    }

    .owl-carousel .item .text {
        text-align: center;
    }

    .owl-carousel .item .text p {
        font-size: 2rem;
        font-weight: 500;
        color: var(--text-contrast);
    }

    .owl-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .owl-carousel .owl-nav button.owl-prev {
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 12.5px 15px 12.5px 0;
        border-color: transparent var(--bg-shade-1) transparent transparent;

        left: 0;
    }
    
    .owl-carousel .owl-nav button.owl-prev::before {
        content: "";
        width: 0;
        height: 0;
        
        border-style: solid;
        border-width: 12.5px 15px 12.5px 0;
        
        position: absolute;
        top: 0;
        left: 0;

        border-color: transparent var(--primary) transparent transparent;
        transition: border-color .2s;
    }

    .owl-carousel .owl-nav button.owl-prev:hover::before {
        border-color: transparent rgba(var(--primary-rgb), .6) transparent transparent;
    }

    .owl-carousel .owl-nav button.owl-next {
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 12.5px 0 12.5px 15px;
        border-color: transparent transparent transparent var(--bg-shade-1);

        right: 0;
    }
    
    .owl-carousel .owl-nav button.owl-next::before {
        content: "";
        width: 0;
        height: 0;
        
        border-style: solid;
        border-width: 12.5px 0 12.5px 15px;
        
        position: absolute;
        top: 0;
        right: 0;

        border-color: transparent transparent transparent var(--primary);
        transition: border-color .2s;
    }

    .owl-carousel .owl-nav button.owl-next:hover::before {
        border-color: transparent transparent transparent rgba(var(--primary-rgb), .6);
    }

    .owl-carousel .owl-nav button span {
        display: none;
    }
}

/* WHY-US */

.o-nas__body .why-us {
    padding: 60px 0;

    .cards .item {
        height: auto;
    }
}

/* SERVICES */

.o-nas__body .services {
    padding-bottom: 120px;
}

/* OUT TEAM */

.our-team {
    padding: 0 60px 60px;

    h3 {
        margin-bottom: 32px;
        font-size: 4.8rem;
        font-weight: 600;
        color: var(--text-contrast);
        text-align: center;
    }

    .grid {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 60px;
        
        @media (width <= 1200px) {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
        
        @media (width <= 800px) {
            max-width: 400px;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(6, 1fr);
        }

        @media (width <= 700px) {
            max-width: none;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
        
        @media (width <= 540px) {
            max-width: 300px;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(6, 1fr);
        }
    }

    @media (width <= 700px) {
        padding: 0 24px 60px;
    }

    .item {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);

        display: flex;
        flex-direction: column;

        .img {
            width: 100%;
            aspect-ratio: 8/9;
            overflow: hidden;
            position: relative;
        }

        .img img {
            width: 100%;
        }
        
        .info {
            flex-grow: 1;
            padding: 25px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

        .text h4 {
            font-size: 2.4rem;
            font-weight: 600;
            color: var(--text-contrast);
        }

        .text h5 {
            margin-bottom: 8px;
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--primary);
        }

        .text p {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .icons {
            margin-top: 8px;
        }
        
        .icons svg {
            width: 40px;
            fill: var(--bg-contrast);
            transition: all .2s;
        }

        .icons svg:hover {
            fill: var(--text-contrast-hover);
        }
    }

    .item.plus {
        padding: 60px 0;

        display: flex;
        justify-content: center;
        align-items: center;

        h4 {
            font-size: 6.4rem;
            font-weight: 600;
            color: var(--text-contrast);
        }
    }
}

/* NAV SECTION */

/* SLUZBY */

.sluzby__services {
    padding: 60px 0;

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8rem;
        
        @media (width <= 1100px) {
            max-width: 53rem;
            margin: 0 auto;
            
            grid-template-columns: 1fr;
            grid-template-rows: repeat(16, auto);
    
            > div:nth-child(even),
            > a:nth-child(even) {
                margin-bottom: 8rem;
            }

            > a:last-child {
                margin-bottom: 0;
            }
        }

        .item-card {
            width: 100%;
            height: 29rem;
            padding: 4.8rem 6rem;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 50px rgba(0, 0, 0, .6);

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            position: relative;

            transition: all .5s ease-in-out;

            img {
                height: 35%;
                position: absolute;
                opacity: .1;
            }
            
            h2 {
                text-align: center;
                font-size: 3.2rem;
                font-weight: 700;
                color: #fff;

                position: relative;
            }
            
            .main-icon {
                max-width: 12rem;
                flex-shrink: 1;
                fill: #fff;
                
                position: relative;
            }

            .link {
                position: absolute;
                bottom: 24px;
                right: 32px;

                max-width: 750px;
                margin: 0 auto;
                margin-top: 16px;
                color: #fff;
                font-size: 2rem;
                font-weight: 600;
                text-align: end;
            }
        }

        .item-card:hover .link {
            text-decoration: underline;
        }

        .item-card::before,
        .item-card::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
        }

        .item-card::after {
            z-index: -1;
            opacity: 0;

            transition: opacity .4s;
        }

        .item-card.left::before {
            background-image: linear-gradient(to bottom right, #333333, #5D5D5D 75%);
        }

        .item-card.left::after {
            background-image: linear-gradient(to bottom right, #660000, #B90000 75%);
        }

        .item-card.right::before {
            background-image: linear-gradient(to bottom left, #333333, #5D5D5D 75%);
        }

        .item-card.right::after {
            background-image: linear-gradient(to bottom left, #660000, #B90000 75%);
        }

        .item-card:hover::after {
            opacity: 1;
        }

        /* card 1 */
        .item-card:nth-child(1) img {
            top: -7%;
            left: -3%;
        }
        
        /* card 2 */
        .item-card:nth-child(4) img {
            opacity: .15;
            bottom: -12%;
            left: 5%;
        }
        
        /* card 3 */
        .item-card:nth-child(5) img {
            opacity: .15;
            top: -12%;
            right: -8%;
        }
        
        /* card 4 */
        .item-card:nth-child(8) img {
            bottom: -5%;
            left: -10%;
        }
        
        /* card 5 */
        .item-card:nth-child(9) img {
            opacity: .15;
            bottom: -5%;
            right: -8%;
        }
        
        /* card 6 */
        .item-card:nth-child(12) img {
            opacity: .15;
            bottom: -12%;
            left: 0;
        }

        /* card 7 */
        .item-card:nth-child(13) img {
            opacity: .15;
            top: 12%;
            left: 35%;
        }

        .item-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;

            h2 {
                font-size: 3.2rem;
                font-weight: 600;
                color: var(--text-contrast);
            }

            p {
                max-width: 900px;
                margin: 0 auto;
                margin-left: 40px;
                font-size: 2rem;
                font-weight: 600;
                position: relative;
            }

            p::before {
                content: "";
                width: .8rem;
                height: .8rem;
                border-radius: 50%;
                background-color: var(--text-primary);

                position: absolute;
                top: 50%;
                left: -8px;
                translate: -100% -50%;
            }

            p.more {
                font-weight: 700;
                color: var(--text-contrast);
            }

            p.more::before {
                background-color: var(--text-contrast);
            }
        }
    }
}

/* NAV SECTION */

/* SERVIS */

.servis {
    --card-height: 340px;
    --card-gap: 60px;
    --img-height: 40px;
    padding: 60px 0;

    .container {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .col {
        width: -moz-fit-content;
        width: fit-content;
        display: flex;
        flex-direction: column;
    }

    .col.left {
        align-items: flex-start;

        img {
            margin: 16px 16px 16px 0;
        }

        .vertical-line {
            margin-left: calc(var(--img-height) * 1.5 / 2);
        }
    }

    .col.right {
        align-items: flex-end;

        img {
            margin: 16px 0 16px 16px;
        }

        .vertical-line {
            margin-right: calc(var(--img-height) * 1.5 / 2);
        }
    }

    .col.left,
    .col.right {
        margin-top: calc(var(--card-height) / 2 - var(--img-height) / 2 - 16px);

        .horizontal-container {
            display: flex;
            align-items: center;
        }

        img {
            height: var(--img-height);
        }

        .horizontal-line {
            width: 60px;
            height: 0;
            border: 2px dashed var(--primary);
        }

        .vertical-line {
            width: 0;
            height: calc(var(--card-height) + var(--card-gap) - 32px - var(--img-height));
            border: 2px dashed var(--primary);
        }
    }

    .col.cards {
        gap: var(--card-gap);
    }

    .item {
        max-width: 700px;
        height: var(--card-height);
        padding: 0 60px;
        border-radius: 10px;
        border: dashed 3px var(--bg-shade-4);

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;

        transition: all .2s;
    
        h2 {
            margin-bottom: 16px;
            font-size: 3.2rem;
            font-weight: 600;
            color: var(--text-contrast);
        }
    
        p {
            position: relative;
            margin-bottom: 4px;
            margin-left: 32px;
            font-size: 2rem;
            font-weight: 500;
            color: var(--text-primary);
        }

        p::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--text-primary);

            position: absolute;
            top: 50%;
            left: -8px;
            translate: -100% -50%;
        }

        .btn {
            width: -moz-fit-content;
            width: fit-content;
            margin-top: 16px;
            padding: 16px 32px;
            border-radius: 15px;
            color: var(--text-contrast);
            background-color: var(--bg-shade-3);
            font-size: 2rem;
            font-weight: 600;
            
            display: flex;
            gap: 8px;
            
            position: relative;
            z-index: 1;
            
            transition: all .3s ease-in-out;
        }
        
        .btn:hover {
            box-shadow: inset 240px 0 0 0 var(--primary);
            color: #fff;
        }
    }

    .item:hover {
        border-color: var(--primary);
    }

    @media (width <= 950px) {
        --card-height: 320px;
        --img-height: 30px;

        .item {
            padding: 24px;
        }
    }

    @media (width <= 800px) {
        --card-height: auto;

        .col.left,
        .col.right {
            display: none;
        }
    }
}

/* KONTAKT */

.kontakt {
    padding: 60px 24px;
    background-color: var(--bg-shade-2);

    h1 {
        margin-bottom: 40px;
        font-size: 4.8rem;
        font-weight: 600;
        color: var(--text-contrast);
        text-align: center;
    }

    .row {
        display: flex;
        gap: 60px;

        @media (width <= 1300px) {
            flex-direction: column;
            gap: 120px;
            
            > div {
                width: -moz-fit-content;
                width: fit-content;
                margin: 0 auto;
            }
        }
    }

    .map-col {
        width: 100%;

        h3 {
            margin-bottom: 24px;
            padding-left: 8px;
            font-size: 3.6rem;
            font-weight: 600;
            color: var(--text-contrast);
            border-left: solid 5px var(--primary);
        }

        .btn-row {
            margin-bottom: 48px;

            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            
            .kontakt__address-btn {
                flex-basis: 0;
                flex-grow: 1;

                padding: 12px 24px;
                font-size: 2rem;
                font-weight: 600;
                border-radius: 10px;
                background-color: var(--bg-shade-1);

                color: var(--text-contrast);
                transition: color .2s, background-color .2s;
            }
            
            .kontakt__address-btn:hover{
                color: var(--text-hover);
            }
            
            .kontakt__address-btn.active {
                color: #fff;
                background-color: var(--primary);
            }

            .kontakt__address-btn.active:hover {
                color: #fff;
            }
        }

        
        .kontakt__address-text {
            display: none;
            justify-content: space-between;
            margin-bottom: 24px;
            
            h4 {
                font-size: 2.3rem;
                font-weight: 600;
                color: var(--text-contrast);
            }
            
            p {
                margin-top: 4px;
                font-size: 2rem;
            }

            a {
                display: block;
                padding: 16px 0;
                font-size: 1.8rem;
                font-weight: 500;
                color: var(--primary);
            }

            a:hover {
                text-decoration: underline;
            }

            > div:nth-child(2) {
                text-align: end;

                span {
                    margin-top: 4px;
                    color: var(--primary);
                    font-weight: 500;
                }
            }

            @media (width <= 400px) {
                flex-direction: column;
                gap: 16px;

                h4, p, a {
                    text-align: center;
                }
            }
        }
        
        .kontakt__address-text.active {
            display: flex;
        }
        
        .map {
            max-width: 600px;
            position: relative;

            img {
                width: 100%;
            }

            .map a {
                padding: 8px;
            }

            .kontakt__address-icon {
                display: flex;
                align-items: center;
                gap: 4px;

                position: absolute;
                translate: -15px -100%;
            }

            .kontakt__address-icon svg {
                width: 30px;
                fill: #fff;
                transition: all .2s;
            }

            .kontakt__address-icon.active svg {
                fill: var(--primary);
            }

            .kontakt__address-icon p {
                font-size: 2rem;
                color: #fff;
                font-weight: 600;
                transition: all .2s;
            }

            .kontakt__address-icon:hover p {
                color: rgba(255, 255, 255, .6);
            }
            
            .kontakt__address-icon.active:hover p {
                color: #fff;
            }

            .kontakt__address-icon.praha {
                top: 40%;
                left: 35%;
            }

            .kontakt__address-icon.humpolec {
                top: 60%;
                left: 50%;
            }

            .kontakt__address-icon.brno {
                top: 76%;
                left: 68%;
            }
        }
    }

    .info-col {
        width: 100%;

        h3 {
            margin-bottom: 24px;
            padding-left: 8px;
            font-size: 3.6rem;
            font-weight: 600;
            color: var(--text-contrast);
            border-left: solid 5px var(--primary);

            /* based on text */
            @media (width <= 410px) {
                font-size: 3rem;
            }
        }

        > p {
            margin-bottom: 12px;
            font-size: 2.2rem;
            font-weight: 500;
        }

        > p span {
            color: var(--text-contrast);
            font-weight: 600;
        }
        
        .contacts {
            width: -moz-fit-content;
            width: fit-content;
            margin-top: 48px;
            margin-left: 60px;
            display: flex;
            flex-direction: column;
            gap: 16px;

            @media (width <= 1300px) {
                margin: 0 auto;
                margin-top: 48px;
            }
        }

        .contacts .item {
            padding: 16px 32px;
            background-color: var(--bg-shade-1);
            border-radius: 15px;
            
            display: flex;
            align-items: center;
            gap: 24px;

            transition: all .4s ease-in-out;
            
            svg {
                height: 3.6rem;
                fill: var(--text-contrast);
                transition: inherit;
            }
            
            p {
                font-size: 2.4rem;
                font-weight: 600;
                color: var(--text-contrast);
                transition: inherit;
            }
        }

        .contacts .item:hover {
            box-shadow: inset 360px 0 0 0 var(--primary);
        }

        .contacts .item:hover p {
            color: #fff;
        }

        .contacts .item:hover svg {
            fill: #fff;
        }
    }
}

/* BASIC CONTACTS */

.basic-contacts {
    padding: 60px 0;

    h2 {
        margin-bottom: 32px;
        font-size: 4.8rem;
        font-weight: 600;
        color: var(--text-contrast);
        text-align: center;
    }

    .row {
        width: 66%;
        margin: 0 auto;
        margin-bottom: 24px;
        
        @media (width <= 900px) {
            width: auto;
        }
    }

    .grid {
        display: grid;
        gap: 24px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "s1 s2 s3"
        "s4 s5 s6";

        @media (width <= 1300px) {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
            "s1 s2"
            "s3 s4"
            "s5 s6";
        }

        @media (width <= 900px) {
            grid-template-columns: 1fr;
            grid-template-areas:
            "s1"
            "s2"
            "s3"
            "s4"
            "s5"
            "s6";
        }
    }

    .item {
        padding: 24px 16px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        background-color: var(--bg-white-card);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;

        .large-item__container {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        
        h3 {
            padding-bottom: 2px;
            text-align: center;
            font-size: 3.2rem;
            font-weight: 600;
            color: var(--text-contrast);
            border-bottom: 3px dashed rgba(var(--primary-rgb), .75);
        }

        h5 {
            text-align: center;
            font-size: 2.4rem;
            font-weight: 600;
            transition: all .2s;
        }

        h5:hover {
            color: var(--text-hover);
        }
    }
}

/* CONTACT FORM */

.contact-form {
    margin-bottom: 120px;
    padding: 60px 24px;
    background-color: var(--bg-shade-2);

    @media (width <= 700px) {
        margin-bottom: 60px;
    }

    .form__contact-section,
    .form__textarea-section {
        label {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-contrast);
            
            display: flex;
            justify-content: space-between;
        }

        .item label.required::after {
            content: "Povinné";
            color: var(--primary);
            font-weight: 500;
        }

        label.error-label {
            padding: 12px 24px;
            color: var(--primary);
            background-color: rgba(var(--primary-rgb), .1);
            border-radius: 0 0 8px 8px;

            display: none;
        }

        label.error-label.active {
            display: block;
        }
    }

    .form__checkbox-section {
        max-width: 820px;
        margin: 0 auto;
        padding-bottom: 16px;
        border-bottom: 3px dashed var(--bg-shade-4);

        h3 {
            margin-bottom: 24px;
            text-align: center;
            font-size: 3.2rem;
            font-weight: 600;
            color: var(--text-contrast);
        }
        
        .row {
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto;
            margin-bottom: 32px;
            display: flex;
            gap: 80px;

            @media (width <= 900px) {
                flex-direction: column;
                gap: 24px;
            }
        }
        
        .column {
            width: -moz-fit-content;
            width: fit-content;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
    }

    .form__contact-section {
        max-width: 820px;
        margin: 0 auto;
        padding: 48px 0;
        border-bottom: 3px dashed var(--bg-shade-4);

        h3 {
            margin-bottom: 24px;
            text-align: center;
            font-size: 3.2rem;
            font-weight: 600;
            color: var(--text-contrast);
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            -moz-column-gap: 60px;
                 column-gap: 60px;
            row-gap: 32px;

            @media (width <= 1000px) {
                max-width: 400px;
                margin: 0 auto;
                grid-template-columns: 1fr;
            }

            .item {
                display: flex;
                flex-direction: column;
            }

            .item input {
                margin-top: 8px;
            }
        }
    }

    .form__textarea-section {
        max-width: 820px;
        margin: 0 auto;
        padding: 48px 0;
        border-bottom: 3px dashed var(--bg-shade-4);

        h3 {
            margin-bottom: 24px;
            text-align: center;
            font-size: 3.2rem;
            font-weight: 600;
            color: var(--text-contrast);
        }

        .textarea-container {
            display: flex;
            flex-direction: column;

            textarea {
                margin-top: 8px;
                height: 200px;
            }
        }
    }

    .form__submit-section {
        max-width: 820px;
        margin: 0 auto;
        padding-top: 48px;

        label.error-label {
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto;
            margin-top: 16px;
            padding: 12px 24px;
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--primary);
            background-color: rgba(var(--primary-rgb), .1);
            border-radius: 8px;
            
            display: none;
        }
        
        label.error-label.active {
            display: block;
        }

        .checkbox-label {
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto;
        }

        .btn {
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto;
            margin-top: 32px;
            padding: 16px 60px;
            border-radius: 15px;
            color: var(--text-base);
            background-color: var(--text-contrast);
            font-size: 2rem;
            font-weight: 700;
            border: none;
        
            display: flex;
            gap: 8px;

            position: relative;
            z-index: 1;

            transition: all .3s ease-in-out;
        }

        .btn:hover {
            box-shadow: inset 200px 0 0 0 var(--primary);
            color: #fff;
        }
    }
}

/* ELEKTROMOBILITA */

.elektromobilita {
    padding: 60px 0;

    h2 {
        margin-bottom: 24px;
        font-size: 4.8rem;
        font-weight: 600;
        color: var(--text-contrast);
    }

    p {
        margin-bottom: 16px;
        font-size: 2.4rem;
        font-weight: 500;
    }

    p span {
        color: var(--text-contrast);
    }

    .car-images {
        margin: 4.8rem 0;
        padding: 0 4.8rem;
        display: flex;
        flex-direction: column;
        gap: 4.8rem;
    }

    .car-images img {
        width: 100%;
    }

    .sponsor-images {
        margin-top: 4.8rem;
        padding: 0 4.8rem;

        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4.8rem;
    }

    .sponsor-images img {
        height: 14rem;
    }
}

.kariera {
    padding: 120px 0 60px;
    
    .column {
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .column .item {
        padding: 32px 48px;
        border-radius: 10px;
        background-color: var(--bg-shade-2);

        .heading {
            margin-bottom: 16px;

            display: flex;
            align-items: center;
            gap: 12px;
        }

        .heading svg {
            height: 3.4rem;
            fill: var(--primary);
        }

        .heading h3 {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary);
        }

        .description {
            margin-bottom: 16px;
            font-size: 2.2rem;
            font-weight: 500;
        }

        .text {
            margin-bottom: 32px;

            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 28px;
        }

        .text h4 {
            margin-bottom: 4px;
            font-size: 2.4rem;
            font-weight: 600;
            color: var(--text-contrast);
        }

        .text p {
            position: relative;
            margin-left: 24px;
            font-weight: 500;
            font-size: 2.2rem;
        }

        .text p::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--text-primary);

            position: absolute;
            top: 1.2rem;
            left: -8px;
            translate: -100% 0;
        }

        .btn {
            display: block;
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto;
            padding: 12px 24px;
            
            font-size: 2rem;
            font-weight: 600;
            color: var(--bg-contrast);
            
            border-radius: 6px;
            background-color: var(--bg-shade-3);

            transition: all .4s;
        }
        
        .btn:hover {
            box-shadow: inset 300px 0 0 0 var(--primary);
            color: #fff;
        }
    }
}

.certifikace {
    padding: 60px;

    .container {
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .container .item {
        h2 {
            margin-bottom: 4px;
            font-size: 3rem;
            font-weight: 600;
            color: var(--text-contrast);
        }

        p {
            margin-left: 4px;
            margin-bottom: 16px;
            font-size: 2.2rem;
            font-weight: 500;
        }

        a {
            margin-left: 4px;
            font-size: 2rem;
            font-weight: 600;
            color: var(--primary);
        }

        a:hover {
            text-decoration: underline;
        }
    }
}