/* AOS CSS (integrované priamo) */
        [data-aos][data-aos].aos-animate {
            transition-property: transform, opacity;
        }


        [data-aos="fade-down"] {
            transform: translate3d(0, -100px, 0);
            opacity: 0;
        }
        [data-aos="fade-down"].aos-animate {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }

        [data-aos="fade-right"] {
            transform: translate3d(-100px, 0, 0);
            opacity: 0;
        }
        [data-aos="fade-right"].aos-animate {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }

        [data-aos="fade-left"] {
            transform: translate3d(100px, 0, 0);
            opacity: 0;
        }
        [data-aos="fade-left"].aos-animate {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }

        [data-aos="zoom-in"] {
            transform: scale(0.6);
            opacity: 0;
        }
        [data-aos="zoom-in"].aos-animate {
            transform: scale(1);
            opacity: 1;
        }

        /* Vlastné CSS */
 
        .timeline {
            position: relative;
            background-color: #828282;
            overflow: hidden;
            min-height: 100vh;
            padding-top:80px
        }

        .main-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../images/timeline.avif');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            opacity: 0.07;
            z-index: 0;
        }

        .timeline-wrapper {
            position: relative;
            padding: 50px 0;
            z-index: 1;
            max-width: 1000px;
            margin: 0 auto;
        }

        .timeline-middle {
            width: 3px;
            background-color: #ffffff6e;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
        }

        .timeline-indicator {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #ff5722;
            border-radius: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            top: 0;
            transition: top 0.3s ease-out;
            box-shadow: 0 0 0 5px rgba(255, 87, 34, 0.3);
        }

        .timeline-active-label {
            position: absolute;
            background-color: #ff5722;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9em;
            white-space: nowrap;
            z-index: 3;
            opacity: 0;
            transition: opacity 0.3s ease;
            transform: translateY(-50%);
            display: none;
        }

        .timeline-active-label.left {
            right: calc(50% + 20px);
            text-align: right;
        }

        .timeline-active-label.right {
            left: calc(50% + 20px);
            text-align: left;
        }

        .timeline-item-container {
            display: flex;
            align-items: flex-start; /* Zarovnáva na vrch obsahu */
            margin-bottom: 0px; /* Redukuje medzeru medzi kontajnermi na minimum */
            position: relative;
        }

        /* 1., 3., 5. prvok atď. (index 0, 2, 4 v JS) - zobrazia sa vľavo */
        .timeline-item-container:nth-child(odd) {
            flex-direction: row;
            padding-left: 50%;
            margin-top: -250px
        }

        /* 2., 4., 6. prvok atď. (index 1, 3, 5 v JS) - zobrazia sa vpravo a sú posunuté vyššie (záporný margin) */
        .timeline-item-container:nth-child(even) {
            flex-direction: row-reverse;
            padding-right: 50%;
            margin-top: -150px; 
        }


        .timeline-item-container:nth-child(odd) .timeline-item-content {
            margin-left: 30px;
        }

        .timeline-item-container:nth-child(even) .timeline-item-content {
            margin-right: 30px; 
        }

        .timeline-item-content {
            flex: 1;
            color: white;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            position: relative;
            z-index: 1000;
        }



        .timeline-item-content:hover {
            transform: translateY(-5px);
        }

        .timeline-image {
            width: 100%;
            height: auto;
            margin-bottom: 15px;
            overflow: hidden;
            border-radius: 4px;
        }

        .timeline-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
        }

        .timeline-year {
            font-size: 3.7em;
            font-weight: 700;
            color: #fff;
            opacity: 1 !important;
            transition: none !important;
            transform: none !important;
            margin:-3.3rem 0 10px 2rem

        }

        .timeline h2 {
            font-size: 1.1em;
            color: #fff;
            margin:0 0 1rem 2rem;
           
        }

        .timeline p {
            font-size: 1em;
            line-height: 1.6;
            color: #fff;
            padding:0 2rem

        }


        .timeline a {color: white; border-bottom:1px solid white}
        .timeline a:hover {opacity: .65;}
        .timeline li {margin: 0 0 10px 1.5rem; }
        .timeline-end-message {max-width: 800px; margin: 60px auto 100px auto; text-align: center; color: white; line-height: 1.8;    font-size: 1.1em;    padding: 0 20px;}
        .timeline-end-message img {width: 150px; margin:0 0 2rem 7px;}
        .timeline-first {margin-top:0 !important}

        .timeline h1 {text-align: center; color: white; font-size: 3rem;  padding:0 1rem 2rem 1rem;}
        .timeline h1 b {font-weight: lighter; display: block; font-size: 1.5rem; margin-top:1rem}

        @media (max-width: 767px) {
            .timeline-wrapper {padding-top:0}
            .timeline-middle {
                left: 20px;
                transform: translateX(-50%);
            }
            .timeline-indicator {
                left: 0px;
                transform: translate(-50%, -50%);
            }
            .timeline-item-container {
                flex-direction: column !important;
                margin-top: 3rem !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 40px;
            }
            .timeline-item-container:nth-child(odd) .timeline-item-content,
            .timeline-item-container:nth-child(even) .timeline-item-content {
                margin-left: 0;
                margin-right: 0;
            }
            .timeline-active-label.left,
            .timeline-active-label.right {
                left: calc(20px + 20px);
                right: auto;
                text-align: left;
            }

            .timeline-end-message {margin: 40px auto 80px auto;font-size: 1em;}
            .timeline-first {margin-top:0 !important}
            .timeline h1 {margin-bottom: 2rem;}
            


        }