/* ===== Responsive Width Classes ===== */
@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }
    .w-sm-50 {
        width: 50% !important;
    }
    .w-sm-75 {
        width: 75% !important;
    }
    .w-sm-100 {
        width: 100% !important;
    }
}
@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .w-md-100 {
        width: 100% !important;
    }
    .pt-md-150px {
        padding-top: 150px !important;
    }
}
@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
    .w-lg-75 {
        width: 75% !important;
    }
    .w-lg-80 {
        width: 80% !important;
    }
    .w-lg-100 {
        width: 100% !important;
    }
}
@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .w-xl-75 {
        width: 75% !important;
    }
    .w-xl-100 {
        width: 100% !important;
    }
}
@media (min-width: 1400px) {
    .w-xxl-25 {
        width: 25% !important;
    }
    .w-xxl-50 {
        width: 50% !important;
    }
    .w-xxl-75 {
        width: 75% !important;
    }
    .w-xxl-100 {
        width: 100% !important;
    }
}

/* ===== Responsive Height Classes ===== */
@media (min-width: 576px) {
    .h-sm-25 {
        height: 25% !important;
    }
    .h-sm-50 {
        height: 50% !important;
    }
    .h-sm-75 {
        height: 75% !important;
    }
    .h-sm-100 {
        height: 100% !important;
    }
}
@media (min-width: 768px) {
    .h-md-25 {
        height: 25% !important;
    }
    .h-md-50 {
        height: 50% !important;
    }
    .h-md-75 {
        height: 75% !important;
    }
    .h-md-100 {
        height: 100% !important;
    }
}
@media (min-width: 992px) {
    .h-lg-25 {
        height: 25% !important;
    }
    .h-lg-50 {
        height: 50% !important;
    }
    .h-lg-75 {
        height: 75% !important;
    }
    .h-lg-100 {
        height: 100% !important;
    }
}
@media (min-width: 1200px) {
    .h-xl-25 {
        height: 25% !important;
    }
    .h-xl-50 {
        height: 50% !important;
    }
    .h-xl-75 {
        height: 75% !important;
    }
    .h-xl-100 {
        height: 100% !important;
    }
}
@media (min-width: 1400px) {
    .h-xxl-25 {
        height: 25% !important;
    }
    .h-xxl-50 {
        height: 50% !important;
    }
    .h-xxl-75 {
        height: 75% !important;
    }
    .h-xxl-100 {
        height: 100% !important;
    }
}

/* ===== Viewport-based Min/Max Width & Height ===== */
/* Standard (all breakpoints) */
.min-vw-25 {
    min-width: 25vw !important;
}
.min-vw-50 {
    min-width: 50vw !important;
}
.min-vw-75 {
    min-width: 75vw !important;
}
.min-vw-100 {
    min-width: 100vw !important;
}

.max-vw-25 {
    max-width: 25vw !important;
}
.max-vw-50 {
    max-width: 50vw !important;
}
.max-vw-75 {
    max-width: 75vw !important;
}
.max-vw-100 {
    max-width: 100vw !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}
.min-vh-50 {
    min-height: 50vh !important;
}
.min-vh-65 {
    min-height: 65vh !important;
}
.min-vh-75 {
    min-height: 75vh !important;
}
.min-vh-100 {
    min-height: 100vh !important;
}

.max-vh-25 {
    max-height: 25vh !important;
}
.max-vh-50 {
    max-height: 50vh !important;
}
.max-vh-75 {
    max-height: 75vh !important;
}
.max-vh-100 {
    max-height: 100vh !important;
}

/* Responsive viewport-based min/max sizes */
@media (min-width: 576px) {
    .min-vw-sm-50 {
        min-width: 50vw !important;
    }
    .max-vw-sm-50 {
        max-width: 50vw !important;
    }
    .min-vh-sm-50 {
        min-height: 50vh !important;
    }
    .max-vh-sm-50 {
        max-height: 50vh !important;
    }
}
@media (min-width: 768px) {
    .min-vw-md-50 {
        min-width: 50vw !important;
    }
    .max-vw-md-50 {
        max-width: 50vw !important;
    }
    .min-vh-md-50 {
        min-height: 50vh !important;
    }
    .max-vh-md-50 {
        max-height: 50vh !important;
    }
}
@media (min-width: 992px) {
    .min-vw-lg-50 {
        min-width: 50vw !important;
    }
    .max-vw-lg-50 {
        max-width: 50vw !important;
    }
    .min-vh-lg-50 {
        min-height: 50vh !important;
    }
    .max-vh-lg-50 {
        max-height: 50vh !important;
    }
}
@media (min-width: 1200px) {
    .min-vw-xl-50 {
        min-width: 50vw !important;
    }
    .max-vw-xl-50 {
        max-width: 50vw !important;
    }
    .min-vh-xl-50 {
        min-height: 50vh !important;
    }
    .max-vh-xl-50 {
        max-height: 50vh !important;
    }
}
@media (min-width: 1400px) {
    .min-vw-xxl-50 {
        min-width: 50vw !important;
    }
    .max-vw-xxl-50 {
        max-width: 50vw !important;
    }
    .min-vh-xxl-50 {
        min-height: 50vh !important;
    }
    .max-vh-xxl-50 {
        max-height: 50vh !important;
    }
}