.hero-section {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.70),
            rgba(255, 255, 255, 0.88)
        ),
        url("https://images.unsplash.com/photo-1500595046743-cd271d694d30?auto=format&fit=crop&w=1600&q=80");
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    width: 100%;
}

.countdown-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(14px);
}

.countdown-card h2 {
    font-size: 2.4rem;
    letter-spacing: -0.04em;
}

.countdown-card small {
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.countdown-card h2 {
    font-size: 3.5rem;
}

.stat-number {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.gallery-image{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:20px;

    transition:.35s;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.gallery-image:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}


/* -------------------------------
   Timeline
--------------------------------*/

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    background:#e4e4e4;

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px;

}

.timeline-item.left{

    left:0;

}

.timeline-item.right{

    left:50%;

}

.timeline-card{

    padding:30px;

    border-radius:24px;

}

.timeline-dot{

    position:absolute;

    top:40px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.timeline-item.left .timeline-dot{

    right:-30px;

}

.timeline-item.right .timeline-dot{

    left:-30px;

}

@media(max-width:768px){

.timeline::before{

left:30px;

}

.timeline-item{

width:100%;

left:0 !important;

padding-left:80px;

padding-right:10px;

}

.timeline-dot{

left:0 !important;

}

}