.speaker-container{
    padding: 50px 0;
    overflow: hidden;
    background-color: #232324;
    min-height: 400px;
    color: #fff;
    position: relative;
    z-index: 1;
    background-image: url('../assets/images/speakers-bg-4.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* filter: brightness(0.3); */
}

.speakers-dark-filter{
    background-color: #000000aa;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
}

.speaker-sub-container{
    max-width: 1800px;
    margin: auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.speaker-heading{
    text-align: center;
    font-family: 'gilroy';
    margin-bottom: 20px;
    background: linear-gradient(90deg, rgba(130,187,49,1) 0%, rgba(224,221,12,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.speaker-text{
    font-size: 30px;
    text-align: center;
    margin-top: 50px;
}

.speakers-content-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    width: fit-content;
    margin: 70px auto 0;
}

.speakers-sub-text {
    grid-column: 1/6;
    font-size: 20px;
    color: rgba(130,187,49,1);
    position: relative;
    padding: 0 0 0 40px;
}

.speakers-sub-text::before {
    content: '';
    position: absolute;
    background-color: transparent;
    left: 0;
    top: 0px;
    border-style: solid;
    border-width: 15px 0 15px 20px;
    border-color: transparent transparent transparent rgba(130,187,49,1);
}

.speakers-body{
    width: 280px;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* background: linear-gradient(97deg, rgba(135,168,44,1) 0%, rgba(213,217,12,1) 100%); */
    position: relative;
}

.speakers-img-container{
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 50% 50% 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.speakers-body-img{
    width: 270px;
    height: 270px;
    top: 60px;
    left: 0px;
    position: absolute;
    z-index: 1;
}

.speakers-img{
    width: 250px;
    height: 250px;
    margin: auto;
    position: relative;
    z-index: 2;
}


.speakers-content{
    width: 300px;
    /* padding: 15px 0; */
    position: relative;
    z-index: 2;
    top: -20px;
}

.speakers-content > p{
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    font-size: 18px;
}

.speakers-name{
    width: 100%;
    color: #000 !important;
    font-size: 24px;
    color: #000;
    font-family: 'gilroy';
    padding: 5px 0;
    background: rgb(130,187,49);
    background: linear-gradient(225deg, rgba(130,187,49,1) 0%, rgba(224,221,12,1) 100%);
}

.speakers-designation{
    margin-top: 15px;
}

.speakers-company{
    font-family: 'gilroy';
}



@media (max-device-width: 1600px){
    .speakers-content-container{
        grid-template-columns: repeat(4, 1fr);
    }
    .speakers-sub-text {
        grid-column: 1/5;
    }
}

@media (max-device-width: 1300px){
    .speakers-content-container{
        grid-template-columns: repeat(3, 1fr);
    }
    .speakers-sub-text {
        grid-column: 1/4;
    }
}

@media (max-device-width: 992px){
    .speakers-content-container{
        grid-template-columns: repeat(2, 1fr);
    }
    .speakers-sub-text {
        grid-column: 1/3;
    }
}

@media (max-device-width: 768px){
    .speakers-content-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .speakers-sub-text {
        grid-column: 1/2;
    }
    .speakers-content-container{
        width: 100%;
        padding: 0 20px;
        margin: 50px auto 0;
    }
}

/*@media (max-device-width: 576px){*/
/*}*/

@media (max-device-width: 340px){
    .speakers-content-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .speakers-body{
        width: 250px;
    }
    .speaker-img{
        width: 250px;
    }
}