body {
    background-color: #181818;
    background-image: url(../asset/images/Illustration.png);
    background-size: 100vw;
    /* height: 5124px; */
    margin: 0;
}

button {
    background-color: transparent;
    color: #D1291D;
    padding: 0.5vw 2vw 0.5vw 2vw;
    border-radius: 25px;
    border: 2px solid #A8A7A7;
    margin-left: 2vw;
    font-size: 1vw;
    transition: all 0.3s ease;
}


.speakers {
    display: flex;
    flex-direction: column;
    font-family: Helvetica;
    font-size: 1vw;
    color: white;
    margin-bottom: 15vw;
    margin-top: 10vw;
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}


#The_Speakers {
    font-size: 2vw;
    font-weight: 900;
}

.speakers.show {
    opacity: 1;
    transform: translateY(0);
}

.speakers p {
    margin: auto;
}

.speaker_images {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid white; */
    margin: auto;
    width: 80vw;
    height: fit-content;
    margin-top: 8vw;
}

.speaker_image div button {
    color: red;
    position: relative;
    top: -5vw;
    background-color: white;
    border: none;
}

.speaker_image {
    border: 3px solid #D6291B;
    height: 20vw;
    width: 20vw;
    margin: 0vw 3vw 5vw 3vw;
    border-radius: 10px;
    background-size: cover;
    overflow: hidden;
}

.speaker_image div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #D6291B;
    height: 100%;
    padding: 1.5vw 2vw;
    color: white;
    margin: auto;
    font-size: 1.2vw;
    text-align: center;
    margin-top: 16vw;
    transition: all 0.5s ease;
    font-weight: 500;
}

.speaker_image:hover div {
    transform: translateY(-16vw);
}

.speaker_image div p {
    font-size: 1vw;
    margin-top: 2vw;
}

.speaker_image div a button {
    margin: 6vw 0vw 0vw 0vw;
    font-size: 1vw;
}

.speakers a {
    margin: auto;
}

.speakers button {
    background-color: transparent;
    color: #D1291D;
    padding: 0.5vw 2vw 0.5vw 2vw;
    border-radius: 25px;
    border: 2px solid #A8A7A7;
    margin-left: 2vw;
    font-size: 1vw;
    width: fit-content;
    margin: auto;
    margin-top: 3vw;
    transition: all 0.3s ease;
}

.speakers button:hover {
    transform: scale(1.05);
    color: white;
    background-color: #D1291D;
    border-color: #D1291D;
}

.speakers .event-desc {
    text-align: center;
    width: 70vw;
    font-size: 1.3vw;
    margin-top: 3vw;
}


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

    .speakers {
        font-size: 4vw;
    }

    #The_Speakers,
    #Our_goals {
        font-size: 6vw;
    }

    .speaker_images {
        height: fit-content;
    }

    .speakers {
        margin-top: 30vw;
    }

    .speaker_image {
        height: 75vw;
        width: 75vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .speaker_image div {
        text-align: center;
        font-size: 5vw;
        padding: 5vw;
        margin-top: 60vw;
        height: 100%;
    }

    .speaker_image:hover div {
        transform: translateY(-60vw);
    }

    .speaker_image div p {
        font-size: 4vw;
        margin-top: 5vw;
    }

    .speaker_image div button {
        font-size: 3vw;
        margin-top: 3vw;
    }

    .speakers .event-desc {
        width: 90vw;
        font-size: 4vw;
        margin-top: 10vw;
    }

    .speakers button {
        font-size: 4vw;
        padding: 2vw 10vw 2vw 10vw;
        margin: 10vw auto 0vw auto;
    }

    .speaker_image div a button {
        font-size: 4vw;
    }
}