/**
 * Responsive Utilities and Media Queries
 */

/* Mobile First Approach */

/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .container-lider {
        padding: 0 var(--spacing-sm);
    }

    .section {
        padding: 50px 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .glass-card {
        padding: var(--spacing-md);
    }

    .branch-image {
        height: 180px;
        font-size: 3rem;
    }

    .branch-content {
        padding: var(--spacing-md);
    }

    .service-card {
        padding: var(--spacing-md);
    }

    .feature-item {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon {
        margin: 0 auto;
    }

    .btn-primary-lider,
    .btn-outline-lider,
    .btn-gold {
        width: 100%;
        text-align: center;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-lider {
        max-width: 540px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-lider {
        max-width: 720px;
    }

    .hero-title {
        font-size: var(--font-size-5xl);
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container-lider {
        max-width: 960px;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container-lider {
        max-width: 1140px;
    }
}

/* XXL Devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container-lider {
        max-width: 1320px;
    }
}

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

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

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

@media (max-width: 767.98px) {
    .d-md-none {
        display: none !important;
    }

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

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }
}

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

    .d-lg-none {
        display: none !important;
    }
}

/* Spacing Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

/* Flexbox Utilities */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

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

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

.align-items-center {
    align-items: center !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }
.gap-5 { gap: var(--spacing-xl) !important; }

/* Width Utilities */
.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

/* Text Utilities */
@media (max-width: 767.98px) {
    .text-center-mobile {
        text-align: center !important;
    }
}