/* ============================================
   Critical Header & Footer Styles
   ============================================ */

/* Force Bootstrap Grid to Work */
.header-khatab .container-fluid,
.header-khatab .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.footer-khatab .container-fluid,
.footer-khatab .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Force Row Display */
.header-khatab .row,
.footer-khatab .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* Force Column Display */
.header-khatab [class*="col-"],
.footer-khatab [class*="col-"] {
    position: relative !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Bootstrap Column Classes */
.header-khatab .col-auto {
    flex: 0 0 auto !important;
    width: auto !important;
}

.header-khatab .col {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
}

/* Responsive Columns */
@media (min-width: 576px) {
    .header-khatab .col-sm,
    .footer-khatab .col-sm {
        flex: 1 0 0% !important;
    }
}

@media (min-width: 768px) {
    .header-khatab .col-md,
    .footer-khatab .col-md {
        flex: 1 0 0% !important;
    }
    
    .header-khatab .col-md-6,
    .footer-khatab .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
}

@media (min-width: 992px) {
    .header-khatab .col-lg,
    .footer-khatab .col-lg {
        flex: 1 0 0% !important;
    }
    
    .header-khatab .col-lg-4,
    .footer-khatab .col-lg-4 {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }
    
    .header-khatab .col-lg-2,
    .footer-khatab .col-lg-2 {
        flex: 0 0 auto !important;
        width: 16.66666667% !important;
    }
    
    .header-khatab .col-lg-8,
    .footer-khatab .col-lg-8 {
        flex: 0 0 auto !important;
        width: 66.66666667% !important;
    }
}

/* Display Utilities */
.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

.d-block {
    display: block !important;
}

@media (min-width: 993px) {
    .d-lg-block {
        display: block !important;
    }
    
    .d-lg-flex {
        display: flex !important;
    }
    
    .d-lg-none {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .d-lg-block,
    .d-lg-flex {
        display: none !important;
    }
}

/* Justify Content */
.justify-content-center {
    justify-content: center !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

/* Align Items */
.align-items-center {
    align-items: center !important;
}

/* Flex Grow */
.flex-grow-1 {
    flex-grow: 1 !important;
}

/* Margin Auto */
.ms-auto {
    margin-left: auto !important;
}

.me-auto {
    margin-right: auto !important;
}

/* Gap */
.g-0 {
    gap: 0 !important;
}

.g-4 {
    gap: 1.5rem !important;
}

/* Margin Bottom */
.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-lg-0 {
    margin-bottom: 0 !important;
}

@media (min-width: 993px) {
    .mb-lg-0 {
        margin-bottom: 0 !important;
    }
}