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

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
}

.overlay h1{

    font-size:70px;
    font-weight:700;
    margin-bottom:20px;
    animation:fadeDown 1s;

}

.overlay p{

    font-size:24px;
    margin-bottom:35px;
    animation:fadeUp 1.2s;

}

.overlay .btn{

    animation:fadeUp 1.5s;

}

/* ==========================================
   ABOUT SECTION
========================================== */

.about-preview{

    padding:100px 20px;

}

.about-preview h2{

    color:#111;

}

.about-preview p{

    max-width:800px;
    margin:auto;
    margin-bottom:30px;
    font-size:18px;

}

/* ==========================================
   EVENTS
========================================== */

.home-events{

    padding:100px 20px;

}

.home-events h2{

    text-align:center;

}

.home-events>div>p{

    text-align:center;
    margin-bottom:40px;

}

.event-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.event-card{

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

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

    transition:.4s;

}

.event-card:hover{

    transform:translateY(-10px);

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

}

.event-card img{

    width:100%;
    height:240px;
    object-fit:cover;

}

.event-card h3{

    padding:20px 20px 10px;

}

.event-card p{

    padding:0 20px 20px;

}

/* ==========================================
   GALLERY
========================================== */

.gallery-preview{

    padding:100px 20px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin:50px 0;

}

.gallery-grid img{

    width:100%;
    height:250px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    transition:.4s;

}

.gallery-grid img:hover{

    transform:scale(1.05);

    box-shadow:0 15px 35px rgba(0,0,0,.2);

}

/* ==========================================
   CALL TO ACTION
========================================== */

.cta{

    padding:120px 20px;

}

.cta h2{

    color:white;
    font-size:42px;

}

.cta p{

    color:#ddd;

    margin:20px auto;

    max-width:700px;

}

/* ==========================================
   BUTTON SPACING
========================================== */

.home-events .btn,
.gallery-preview .btn{

    margin-top:40px;

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}