@media (max-width: 995px) {
   

    .homepage .col,
    .homepage [class^="col-"] {
        width: 100%;
        max-width: 100%;
        flex-basis: auto;
    }

    /* If you have specific column classes, override them here */
    .homepage .col-md-6,
    .homepage .col-lg-4,
    .homepage .col-xl-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Add any additional style adjustments for one-column layout */
    .homepage .some-specific-element {
        margin-bottom: 20px;
    }

    .homepage .offset-md-6,
    .offset-xs-2, 
    .offset-sm-4 {
        margin-left: 0px;
    }
}

/* Ensure the default Bootstrap breakpoint still works for other pages */
@media (max-width: 767px) {
    .row:not(.homepage .row) {
        flex-direction: column;
    }

    .col:not(.homepage .col),
    [class^="col-"]:not(.homepage [class^="col-"]) {
        width: 100%;
        max-width: 100%;
        flex-basis: auto;
    }
}