* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Ubuntu', sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Ubuntu', sans-serif;
            color: #333;
            background: #fff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            max-width: 100%;
            display: block;
        }

        /* =========================
           HEADER
        ========================= */

        header {
            width: 100%;
            background: white;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .navbar {
            max-width: 1300px;
            margin: 0 auto;
            height: 80px;
            padding: 0 24px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo img {
            height: 40px;
        }

        .logo {
            display: flex;
            align-items: baseline;
            line-height: 1;
            //gap: 12px;
            font-size: 42px;
            font-weight: 500;
            color: #502379;
        }

        nav {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .menu {
            display: flex;
            align-items: center;
            gap: 28px;
            list-style: none;
        }

        .menu a {
            font-size: 20px;
            font-weight: 600;
            transition: color 0.3s ease;
            color: #502379;
        }

        .menu a:hover {
            color: #000;
        }

        .socials {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .socials a {
            font-size: 18px;
            color: #50237980;
            transition: color 0.3s ease;
        }

        .socials a:hover {
            color: #502379;
        }

        /* =========================
           MOBILE MENU
        ========================= */

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .hamburger span {
            width: 26px;
            height: 3px;
            background: #333;
            border-radius: 4px;
        }

        /* =========================
           HERO
        ========================= */

        .hero {
            margin-top: 80px;
            height: 90vh;
            min-height: 500px;
            background:
                linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
                url("../img/hero.jpg") center center / cover no-repeat;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            //padding: 40px;
            padding-top: 5vh;
            position: relative;
        }

        .hero-content {
            max-width: 1200px;
            background: rgba(0, 0, 0, 0.20);
            backdrop-filter: blur(4px);
            padding: 20px;
            padding-left: 40px;
            padding-right: 40px;
            border-radius: .25rem;
            justify-content: center;
        }

        .hero h1 {
            font-size: 56px;
            color: white;
            // margin-bottom: 20px;
            font-weight: 500;
        }

        .hero p {
            font-size: 22px;
            color: white;
            line-height: 1.6;
        }

        .hero-button {
            position: absolute;

            left: 50%;
            bottom: 180px;

            transform: translateX(-50%);

            /*            padding: 14px 42px;

            background: #FCC220;
            color: #502379;

            font-size: 24px;
            font-weight: 600;

            border-radius: .25rem;

            transition: 0.3s ease;*/

            z-index: 5;
        }

        .hero-scroll:hover {
            background: #DCA200;
            transform: translateX(-50%) translateY(-2px);
        }

        .highlight {
            color: #FDC220;
            font-weight: 700;
            font-size: 80px;
        }

        /* =========================
           SECTIONS
        ========================= */

        section {
            padding: 100px 24px 20px 24px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 42px;
            margin-bottom: 30px;
            text-align: center;
            color: #502379;
        }

        .section-title-left {
            font-size: 42px;
            margin-bottom: 15px;
            margin-top: 30px;
            text-align: left;
            color: #502379;
        }

        .section-subtitle-left {
            font-size: 32px;
            margin-bottom: 15px;
            margin-top: 20px;
            text-align: left;
            color: #502379;
        }

        .section-text {
            max-width: 900px;
            margin: 20px auto;
            font-size: 20px;
            line-height: 1.8;
            text-align: center;
            color: #555;
        }

        .section-text-left {
            font-size: 20px;
            line-height: 1.8;
            text-align: left;
            color: #555;
        }


        /* =========================
           TEAM
        ========================= */

        .team-grid {
            margin-top: 60px;

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 30px;

            counter-reset: team-counter;
        }

        .team-card {
            position: relative;
            counter-increment: team-counter;
        }

        .team-card::before {
            content: counter(team-counter);

            position: absolute;

            width: 52px;
            height: 52px;

            background: #1BBE6F;
            color: white;

            font-size: 32px;
            font-weight: bold;

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

            z-index: 5;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .team-card {
            background: white;
            border-radius: .25rem;
            overflow: hidden;
            //box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease;
        }

        .team-card:hover {
            transform: translateY(-6px);
        }

        .team-card img {
            width: 100%;
            height: 260px;
            object-fit: cover;
        }

        .team-card-content {
            padding: 24px;
        }

        .team-card h3 {
            margin-bottom: 8px;
            font-size: 22px;
            color: #502379;
        }

        .team-card p {
            color: #666;
            line-height: 1.6;
        }

        /* =========================
           VISION CARDS
        ========================= */

        .vision-grid {
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .vision-card {
            width: 100%;
            background: #f7f7f7;
            padding: 28px 32px;
            border-radius: .25rem;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;

            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            flex-direction: column;
            align-items: flex-start;
        }

        .vision-text h3 {
            font-size: 24px;

            color: #502379;
            margin-bottom: 8px;
        }

        .vision-text p {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
            // max-width: 700px;
        }

        /* tlačítko */
        .vision-button {
            padding: 12px 22px;
            background: #FCC220;
            color: #502379;
            font-weight: 600;
            border-radius: .25rem;
            white-space: nowrap;
            transition: 0.3s ease;
        }

        .vision-button:hover {
            background: #DCA200;
            transform: translateY(-2px);
        }

        /* =========================
           CONTACT
        ========================= */

        /*.contact-box {
            max-width: 700px;
            margin: 40px auto 0;
            background: #f7f7f7;
            padding: 40px;
            border-radius: .25rem;

            display: flex;
            justify-content: space-between;
            gap: 40px;
        }

        .contact-box p {
            margin-bottom: 14px;
            font-size: 18px;
        }

        .contact-left,
        .contact-right {
            flex: 1;
        }

        .contact-right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }*/


        /* =========================
           FOOTER
        ========================= */

        footer {
            background: #1BBE6F;
            color: white;
            text-align: center;
            padding: 30px 20px;
            margin-top: auto;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto 30px;
            display: flex;
            justify-content: space-between;
            gap: 40px;
            text-align: left;
        }

        .footer-content .contact-left,
        .footer-content .contact-right {
            flex: 1;
        }

        .footer-content p {
            margin-bottom: 10px;
        }

        .contact-left a:hover {
            color: #502379;
            transition: color 0.3s ease;
        }

        .footer-content .socials {
            margin-top: 0px;
            display: flex;
            gap: 14px;
        }

        .footer-content .socials a {
            color: white;
            font-size: 20px;
        }

        .footer-content .socials a:hover {
            color: #502379;
            font-size: 20px;
        }

        .footer-bottom {
            text-align: center;
        }

        @media (max-width: 600px) {
            .footer-content {
                flex-direction: column;
            }
        }

        /* =========================
           BUTTONS
        ========================= */

        .btn-primary {
            position: relative;
            z-index: 1;
            display: inline-flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: .25rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-top: 14px;
            padding-bottom: 14px;
            font-size: 20px;
            line-height: 24px;
            font-weight: 500;
            --tw-text-opacity: 1;
            color: rgb(80 35 121 / var(--tw-text-opacity, 1));
            text-decoration-line: none;
            transition-property: transform;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            transition-duration: .15s
        }

        .btn-primary svg {
            margin-left: .75rem;
            --tw-translate-x: 0px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            fill: #502379;
            transition-property: transform;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            transition-duration: .15s
        }

        .btn-primary:before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            height: 100%;
            width: 100%;
            border-radius: .25rem;
            --tw-bg-opacity: 1;
            background-color: rgb(253 194 32 / var(--tw-bg-opacity, 1));
            --tw-content: "";
            content: var(--tw-content)
        }

        .btn-primary:after {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
            height: 100%;
            width: 100%;
            --tw-translate-x: .5rem;
            --tw-translate-y: .5rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            border-radius: .25rem;
            --tw-bg-opacity: 1;
            background-color: rgb(27 190 111 / var(--tw-bg-opacity, 1));
            transition-property: transform;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            transition-duration: .15s;
            --tw-content: "";
            content: var(--tw-content)
        }

        .btn-primary:hover {
            --tw-translate-x: .25rem;
            --tw-translate-y: .25rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .btn-primary:hover svg {
            --tw-translate-x: .25rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .btn-primary:hover:after {
            --tw-translate-x: .25rem;
            --tw-translate-y: .25rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        *,
        :before,
        :after {
            --tw-border-spacing-x: 0;
            --tw-border-spacing-y: 0;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-skew-x: 0;
            --tw-skew-y: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-pan-x: ;
            --tw-pan-y: ;
            --tw-pinch-zoom: ;
            --tw-scroll-snap-strictness: proximity;
            --tw-gradient-from-position: ;
            --tw-gradient-via-position: ;
            --tw-gradient-to-position: ;
            --tw-ordinal: ;
            --tw-slashed-zero: ;
            --tw-numeric-figure: ;
            --tw-numeric-spacing: ;
            --tw-numeric-fraction: ;
            --tw-ring-inset: ;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-color: rgb(130 208 244 / .5);
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            --tw-blur: ;
            --tw-brightness: ;
            --tw-contrast: ;
            --tw-grayscale: ;
            --tw-hue-rotate: ;
            --tw-invert: ;
            --tw-saturate: ;
            --tw-sepia: ;
            --tw-drop-shadow: ;
            --tw-backdrop-blur: ;
            --tw-backdrop-brightness: ;
            --tw-backdrop-contrast: ;
            --tw-backdrop-grayscale: ;
            --tw-backdrop-hue-rotate: ;
            --tw-backdrop-invert: ;
            --tw-backdrop-opacity: ;
            --tw-backdrop-saturate: ;
            --tw-backdrop-sepia: ;
            --tw-contain-size: ;
            --tw-contain-layout: ;
            --tw-contain-paint: ;
            --tw-contain-style:
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 1100px) {
            .hero h1 {
                font-size: 38px;
            }

            .highlight {
                color: #FDC220;
                font-weight: 700;
                font-size: 50px;
            }

            .hero-button {
                bottom: 100px;
                //font-size: 20px;
                //font-weight: 600;
                //padding: 14px 12px;
                //border-radius: .25rem;
            }
        }

        @media (max-width: 900px) {

            .hamburger {
                display: flex;
            }

            nav {
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                background: white;

                flex-direction: column;
                align-items: flex-start;

                padding: 24px;
                gap: 24px;

                display: none;
            }

            nav.active {
                display: flex;
            }

            .menu {
                flex-direction: column;
                align-items: flex-start;
                width: 100%;
            }

            .socials {
                width: 100%;
                justify-content: flex-start;
            }

            .hero p {
                font-size: 18px;
            }

            .section-title {
                font-size: 32px;

            }
        }

        /*@media (max-width: 700px) {
            .vision-card {
                flex-direction: column;
                align-items: flex-start;
            }          
            .vision-button {
                align-self: flex-end;
                border-radius: .25rem;
            }
        }*/

        /*@media (max-width: 600px) {
            .contact-box {
                flex-direction: column;
            }
        }*/

        /* =========================
           CANDIDATE CARDS
        ========================= */

        .candidate-list {
            counter-reset: candidate-counter;
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        .candidate-card {
            position: relative;
            counter-increment: candidate-counter;
            background: white;
            border-radius: .25rem;
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease;
            display: flex;
            padding: 0 30px;
            text-decoration: none;
            color: inherit;
            scroll-margin-top: 100px;
        }

        .candidate-card:hover {
            transform: translateY(-6px);
        }

        .candidate-col-1 {
            background: #f4f2f0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 0 0px;
        }

        .candidate-photo-wrapper {
            position: relative;
            margin: 30px 0;
        }

        .candidate-photo-wrapper::before {
            content: counter(candidate-counter);
            position: absolute;
            top: 0;
            left: 0;
            width: 52px;
            height: 52px;
            background: #1BBE6F;
            color: white;
            font-size: 32px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .candidate-col-1 img {
            display: block;
            aspect-ratio: 1 / 1;
            width: 250px;
            object-fit: cover;
        }

        .candidate-col-2 {
            padding: 30px 0 30px 30px;
            flex: 1;
        }

        .candidate-col-2 h3 {
            font-size: 32px;
            color: #502379;
            margin-bottom: 15px;
        }

        .candidate-col-2 p {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        p.candidate-quote {
            font-style: italic;
            color: #502379;
            opacity: 0.7;
        }

        @media (max-width: 800px) {
            .candidate-card {
                flex-direction: column;
                padding: 0 15px;
            }

            .candidate-col-2 {
                padding: 30px 0;
            }
        }