body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #fff;
            overflow: hidden;
        }
        
        
        .carousel {
            display: flex;
            position: relative;
            width: 800px;
            height: 400px;
            justify-content: center;
            align-items: center;
        }
        
        .carousel a {
            position: absolute; /* Asigură că link-ul se suprapune exact pe imagine */
            display: flex; /* Face link-ul să aibă dimensiunea imaginii */
            justify-content: center;
            align-items: center;
            width: 200px; /* Dimensiunea imaginii */

        }

        
        .logo {
            position: absolute;
            width: 200px;

            transition: transform 1s ease, opacity 1s ease;
        }
        .back {
            opacity: 0.1;
            transform: scale(0.5);
            z-index:0;
        }
        .main {
            transform: scale(1.8);
            opacity: 1;
            z-index:99;
            
        }
        
        .main:hover {
            filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
            
        }
        .side {
            opacity: 0.5;
            transform: scale(0.5);
            z-index:1;
        }
        
        /* Hide title container on mobile */
        @media (max-width: 768px) {
            .title-container {
                display: none !important;
            }
        }
        
        .title-container {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-family: Arial, sans-serif;
            color: #000;
            opacity: 0;
            transition: opacity 1s ease;
            z-index: 100;
        }
        
        .title-container h1 {
            transition: transform 1s ease;
            opacity: 1;
            transform: translateX(100vw);
        }
        
        .title-container .subtitle {
            transition: transform 1s ease;
            opacity: 1;
            transform: translateX(100vw);
        }
        
        /* Clase pentru animații slide */
        .slide-in-right {
            animation: slideInRight 1s ease forwards;
        }
        
        .slide-in-right-delay-1 {
            animation: slideInRight 1s ease forwards;
            animation-delay: 0.05s;
            animation-fill-mode: both;
        }
        
        .slide-in-right-delay-2 {
            animation: slideInRight 1s ease forwards;
            animation-delay: 0.1s;
            animation-fill-mode: both;
        }
        
        .slide-in-right-delay-3 {
            animation: slideInRight 1s ease forwards;
            animation-delay: 0.15s;
            animation-fill-mode: both;
        }
        
        .slide-out-left {
            animation: slideOutLeft 1s ease forwards;
        }
        
        .slide-out-left-delay-1 {
            animation: slideOutLeft 1s ease forwards;
            animation-delay: 0.05s;
            animation-fill-mode: both;
        }
        
        .slide-out-left-delay-2 {
            animation: slideOutLeft 1s ease forwards;
            animation-delay: 0.1s;
            animation-fill-mode: both;
        }
        
        .slide-out-left-delay-3 {
            animation: slideOutLeft 1s ease forwards;
            animation-delay: 0.15s;
            animation-fill-mode: both;
        }
        
        .slide-in-left {
            animation: slideInLeft 1s ease forwards;
        }
        
        .slide-in-left-delay-1 {
            animation: slideInLeft 1s ease forwards;
            animation-delay: 0.05s;
            animation-fill-mode: both;
        }
        
        .slide-in-left-delay-2 {
            animation: slideInLeft 1s ease forwards;
            animation-delay: 0.1s;
            animation-fill-mode: both;
        }
        
        .slide-in-left-delay-3 {
            animation: slideInLeft 1s ease forwards;
            animation-delay: 0.15s;
            animation-fill-mode: both;
        }
        
        .slide-out-right {
            animation: slideOutRight 1s ease forwards;
        }
        
        .slide-out-right-delay-1 {
            animation: slideOutRight 1s ease forwards;
            animation-delay: 0.05s;
            animation-fill-mode: both;
        }
        
        .slide-out-right-delay-2 {
            animation: slideOutRight 1s ease forwards;
            animation-delay: 0.1s;
            animation-fill-mode: both;
        }
        
        .slide-out-right-delay-3 {
            animation: slideOutRight 1s ease forwards;
            animation-delay: 0.15s;
            animation-fill-mode: both;
        }
        
        .title-container.show {
            opacity: 1;
        }
        
        .title-container h1 {
            color: #3f3f3f;
            font-family: 'League Spartan', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            letter-spacing: -1px;
        }
        
        .title-container .subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.2rem;
            margin: -2px 0 -2px 0;
            color: #646464;
            font-weight: 400;
            opacity: 0.8;
        }
        
        .title-container .subtitle:last-of-type {
            margin-bottom: 0;
        }
        
        .title-container .subtitle:empty {
            display: none;
        }
        
        .scroll-indicator {
            position: absolute;
            bottom: 50px; /* Poziționare la 200px de jos */

            transform: translateX(-50%);
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #000;
            font-weight: bold;
            letter-spacing: 2px;
            opacity: 0.8;
            animation: fadeIn 2s ease-in-out;
            animation: bounce 1.5s infinite;
        }
        
        .arrow-down {
            animation: bounce 1.5s infinite;
        }
        
        /* Animație săgeată */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(10px);
            }
        }
        
        /* Animații text */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 0.8;
                transform: translateY(0);
            }
        }
        
        .fadeIn {
            animation: fadeIn 1s ease forwards;
        }
        
        .fadeOut {
            animation: fadeOut 1s ease forwards;
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        
        @keyframes slideInRight {
            from {
                opacity: 1;
                transform: translateX(100vw);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOutLeft {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 1;
                transform: translateX(-100vw);
            }
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 1;
                transform: translateX(-100vw);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 1;
                transform: translateX(100vw);
            }
        }
        
        @media (max-width: 768px) {
            .carousel {
                margin-bottom:70px;
                flex-direction: column;
                width: 100%;
                height: 100vh;
            }
            .logo {
                position: relative;
                width: 150px;
                height: 150px;
            }
            .main {
                transform: scale(1.5);
                opacity: 1;
            }
            .side {
                opacity: 0.5;
                transform: scale(0.8);
            }
            .back {
                opacity: 0.1;
                transform: scale(0.5);
            }
            
            .scroll-indicator {
                font-size:10px;
                bottom:20px;
            }
            
            .title-container {
                top: 20px;
            }
            
            .title-container h1 {
        font-family: 'League Spartan', sans-serif;
        font-size: 2rem;
        margin-top: 50px;
        font-weight: 700;
        letter-spacing: -0.5px;
        transition: opacity 1s ease;
    }
            
            .title-container .subtitle {
        display: none;
    }
        }