.promotion-section {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    gap: 20px;

    padding: 20px;

    background-color: #f9f9f9;

}



.promotion-card {

    flex: 0 0 auto;

    border: 1px solid #ccc;

    padding: 20px;

    width: 300px;

    background-color: #fff;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



.promotion-images {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;

}



.promotion-images img {

    width: 100%;

    height: auto;

    max-width: 100px;

    border-radius: 5px;

}





.red-button {

    background-color: red;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.red-button:hover {

    background-color: darkred;

}





@media (max-width: 768px) {

.promotion-card {

    width: 100%;

    flex: 0 0 100%;

}

}





.video-container {

max-width: 100%;

width: auto;

height: auto;

}



@media (min-width: 768px) {

.video-container {

    width: 100%; /* Adjust this value based on your design */

    height: auto;

}

}


/*UPDATE NOVEMBER 13 2024*/

/* public/css/body-content.css */
.content-body {
    padding-top: 0;
    margin-top: 0;
}

/* On small screens, ensure no extra padding/margin */
@media (max-width: 768px) {
    .content-body {
        padding-top: 0;
        margin-top: 0;
    }
    
    /* Additional reset for .zero-gap if needed */
    .zero-gap {
        margin: 0;
        padding: 0;
    }
}





/*UPDATE NOVEMBER 13 2024*/