* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        color: #f1f1f1;
    }

    
    .box-1 {
        border: 3px solid rgb(251, 248, 248);
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: row;
        padding: 5px 100px;
        box-shadow: 0px 3px #d3d0d0;
        position: sticky;
        top: 0px;
        background-color: #ffffff;
        z-index: 1;
    }

    
    .box-1 li {
        color: black;
        /* text-decoration: none; */
        font-weight: 600;
        font-size: large;
        list-style-type: none;
        margin-left: 20px;
    }

    .box-1 li a {
        color: black;
        text-decoration: none;
        font-weight: 600;
        font-size: large;
    }


    .header {
        width: 95%;
        height: 600px;
        margin:auto;
    }

    .header img {
        height: 600px;
        width: 100%;
        /* margin:auto; */
    }

    .header h1 {
        /* background-color: black; */
        color: rgb(15, 239, 49);
        text-align: center;
    }


    
    .event h1 {
        text-align: center;
        color: black;
        /* border: 2px solid gray; */
        width: 95%;
        box-shadow: 0px 3px #d3d0d0;
        margin:auto;
    }

    .card-1,.card-2,.card-3 {
        height: 400px;
        width: 100%;
    }

    .card-1 img,.card-2 img,.card-3 img {


        height: 400px;
    }

    .all-events {
        display: flex;
        flex-direction: row;
        width: 95%;
        margin:auto;
    }

    .card-1,
    .card-2,
    .card-3 {
        width: 33%;
        margin-left: auto;
        margin-right: auto;
    }


    @media only screen and (max-width: 750px) {

        .box-1 {
            padding: 10px;
            height: 50px;
            /* margin-top: 20px; */
        }

        .header,
        .header img {
            height: 300px;
            width: 100%;
        }

        .all-events {
            /* display: flex; */
            flex-direction: column;
        }

        .card-1,
        .card-2,
        .card-3 {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top:5px;
            border-radius: 10px;
            height:200px;
            /* height:250px; */

        }

        .card-1 img, .card-2 img, .card-3 img{
            height:200px;
        }




    }