.gen-hero {
           height: 60vh;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           text-align: center;
           background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('./assets/503278027_1254695753322201_7500022715823705309_n.jpg') center/cover;
           background-blend-mode: overlay;
           backdrop-filter: blur(15px);
           -webkit-backdrop-filter: blur(15px);
           padding-top: 80px;
       }

       .gen-hero h1 {
           font-size: 4rem;
           margin-bottom: 1rem;
           color: #ffffff;
           text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
           -webkit-text-fill-color: #ffffff;
       }

       .content-section {
           padding: 5rem 5%;
           max-width: 1200px;
           margin: 0 auto;
       }

       .about-gen {
           background: var(--glass-bg);
           border: 1px solid var(--glass-border);
           border-radius: 24px;
           padding: 3rem;
           margin-bottom: 4rem;
       }

       .about-gen h2 {
           font-size: 2.5rem;
           margin-bottom: 1.5rem;
           color: var(--accent-color);
       }

       .about-gen p {
           font-size: 1.2rem;
           color: var(--text-secondary);
           line-height: 1.8;
       }

       .timeline {
           position: relative;
           max-width: 800px;
           margin: 0 auto;
           padding: 2rem 0;
       }

       .timeline::after {
           content: '';
           position: absolute;
           width: 4px;
           background: linear-gradient(to bottom, var(--accent-color), var(--accent-color-2));
           top: 0;
           bottom: 0;
           left: 50%;
           margin-left: -2px;
           border-radius: 2px;
       }

       .timeline-item {
           padding: 10px 40px;
           position: relative;
           background: inherit;
           width: 50%;
       }

       .timeline-item::after {
           content: '';
           position: absolute;
           width: 20px;
           height: 20px;
           right: -10px;
           background-color: var(--primary-color);
           border: 4px solid var(--accent-color);
           top: 15px;
           border-radius: 50%;
           z-index: 1;
       }

       .left {
           left: 0;
       }

       .right {
           left: 50%;
       }

       .right::after {
           left: -10px;
       }

       .timeline-content {
           padding: 20px 30px;
           background: var(--glass-bg);
           border: 1px solid var(--glass-border);
           position: relative;
           border-radius: 16px;
           transition: var(--transition);
       }

       .timeline-content:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
       }

       .timeline-content h3 {
           margin-bottom: 10px;
           color: var(--text-primary);
       }

       .timeline-content p {
           color: var(--text-secondary);
       }

       @media screen and (max-width: 768px) {
           .timeline::after {
               left: 31px;
           }

           .timeline-item {
               width: 100%;
               padding-left: 70px;
               padding-right: 25px;
           }

           .timeline-item::before {
               left: 60px;
               border: medium solid white;
               border-width: 10px 10px 10px 0;
               border-color: transparent white transparent transparent;
           }

           .left::after,
           .right::after {
               left: 21px;
           }

           .right {
               left: 0%;
           }
       }