.events-desktop-container {
    width: 75%; 
    margin: auto; 
    max-width: 1000px; 
    min-width: 650px;
    overflow: hidden;
}

.events-page-title {
    font-size: 40px;
    font-family: inter-Bold; 
    color: #2d2d2d;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.below-title-container {
    width: 350px; 
    margin: auto; 
    height: 25px;
}

.title-line {
    border-top: none; 
    border-radius: 50%; 
    border-color: #b3b3b3;
}

.stroke-title {
    position: absolute; 
    top: -5px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #fafafa; 
    font-family: inter-reg; 
    color: #2d2d2d;
    font-size: 14px;
}

.upcoming-events-container {
    width: 100%;
    overflow: hidden;
    color: #2d2d2d;
}

.upcoming-left {
    width: 48.5%;
    margin-right: 1.5%;
    float: left;
    overflow: hidden;
}

.upcoming-right {
    width: 48.5%;
    margin-left: 1.5%;
    float: right;
    overflow: hidden;
}

.upcoming-img {
    width: calc(100% - 13px);
    /*box-shadow: 3px 3px 13px rgba(44, 126, 220, 1);*/
}

.upcoming-img img {
    width: 100%;
}

.upcoming-title {
    width: 100%;
    overflow: hidden;
    font-family: inter-SemiBold;
    font-size: 20px;
    margin-top: 2%;
}

.upcoming-detail {
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    margin-top: 1%;
}

.previous-events-container {
    width: 100%;
    overflow: hidden;
    color: #2d2d2d;
}

.previous-col {
    width: 32.333%;
    float: left;
    overflow: hidden;
}

.previous-col.col1, .previous-col.col2 {
    margin-right: 1.5%;
}

.previous-img {
    width: calc(100% - 13px);
}

.previous-img img {
    width: 100%;
}

.previous-title {
    width: 100%;
    overflow: hidden;
    font-family: inter-SemiBold;
    font-size: 14px;
    margin-top: 2%;
}

.previous-left {
    width: 49%;
    margin-right: 1%;
    overflow: hidden;
    float: left;
}

.previous-right {
    width: 49%;
    margin-left: 1%;
    overflow: hidden;
    float: left;
}

#events-popup-desktop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

#events-popup-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

#btn-closeslide {
    margin: 10px; 
    padding: 3px 6px; 
    background-color: rgba(199, 199, 199, 0.8); 
    border: none;
    border-radius: 3px; 
    cursor: pointer;
}

#btn-closeslide:hover {
    background: rgba(255, 255, 255, 1) !important;
}

.popup-photo-container-desktop {
    height: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    display: none;
}

.popup-photo-container-mobile {
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    display: none;
}

@media (max-width: 1024px) {
    .upcoming-title {
        font-size: 18px;
    }
    
    .upcoming-detail {
        font-size: 11px;
    }
    
    .previous-title {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .upcoming-title {
        font-size: 20px;
    }
    
    .upcoming-detail {
        font-size: 12px;
    }
    
    .previous-title {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .upcoming-title {
        font-size: 18px;
    }
    
    .upcoming-detail {
        font-size: 11px;
    }
    
    .previous-title {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .events-page-title {
        font-size: 30px;
    }
    
    .upcoming-title {
        font-size: 17px;
    }
    
    .upcoming-detail {
        font-size: 10px;
    }
    
    .previous-title {
        font-size: 11px;
    }
}