/* Responsive Utilities */

/* Hide on specific breakpoints */
.hide-xs {
    display: none;
}

@media screen and (min-width: 576px) {
    .hide-sm {
        display: none;
    }
    .show-xs {
        display: none;
    }
    .hide-xs {
        display: revert;
    }
}

@media screen and (min-width: 768px) {
    .hide-md {
        display: none;
    }
    .show-sm {
        display: none;
    }
    .hide-sm {
        display: revert;
    }
}

@media screen and (min-width: 992px) {
    .hide-lg {
        display: none;
    }
    .show-md {
        display: none;
    }
    .hide-md {
        display: revert;
    }
}

@media screen and (min-width: 1200px) {
    .hide-xl {
        display: none;
    }
    .show-lg {
        display: none;
    }
    .hide-lg {
        display: revert;
    }
}

/* Text alignment utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

@media screen and (min-width: 576px) {
    .sm\:text-left {
        text-align: left;
    }
    .sm\:text-center {
        text-align: center;
    }
    .sm\:text-right {
        text-align: right;
    }
}

@media screen and (min-width: 768px) {
    .md\:text-left {
        text-align: left;
    }
    .md\:text-center {
        text-align: center;
    }
    .md\:text-right {
        text-align: right;
    }
}

@media screen and (min-width: 992px) {
    .lg\:text-left {
        text-align: left;
    }
    .lg\:text-center {
        text-align: center;
    }
    .lg\:text-right {
        text-align: right;
    }
}

/* Flex utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

@media screen and (min-width: 576px) {
    .sm\:flex {
        display: flex;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
}

@media screen and (min-width: 768px) {
    .md\:flex {
        display: flex;
    }
    .md\:flex-row {
        flex-direction: row;
    }
}

@media screen and (min-width: 992px) {
    .lg\:flex {
        display: flex;
    }
    .lg\:flex-row {
        flex-direction: row;
    }
}

/* Width utilities */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

@media screen and (min-width: 576px) {
    .sm\:w-auto {
        width: auto;
    }
    .sm\:w-full {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .md\:w-auto {
        width: auto;
    }
    .md\:w-full {
        width: 100%;
    }
}

@media screen and (min-width: 992px) {
    .lg\:w-auto {
        width: auto;
    }
    .lg\:w-full {
        width: 100%;
    }
}