/* Extending Bootstrap with XXXL and XXXXL breakpoints */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl,
.container-xxxxl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1600px) {
    .container-xxxl {
        max-width: 1480px;
    }
}

@media (min-width: 1800px) {
    .container-xxxxl {
        max-width: 1640px;
    }
}

/* Grid system for XXXL and XXXXL breakpoints */
@media (min-width: 1600px) {
    .col-xxxl {
        flex: 1 0 0%;
    }
    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxl-1 { width: 8.33333%; }
    .col-xxxl-2 { width: 16.66667%; }
    .col-xxxl-3 { width: 25%; }
    .col-xxxl-4 { width: 33.33333%; }
    .col-xxxl-5 { width: 41.66667%; }
    .col-xxxl-6 { width: 50%; }
    .col-xxxl-7 { width: 58.33333%; }
    .col-xxxl-8 { width: 66.66667%; }
    .col-xxxl-9 { width: 75%; }
    .col-xxxl-10 { width: 83.33333%; }
    .col-xxxl-11 { width: 91.66667%; }
    .col-xxxl-12 { width: 100%; }
}

@media (min-width: 1800px) {
    .col-xxxxl {
        flex: 1 0 0%;
    }
    .col-xxxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxxl-1 { width: 8.33333%; }
    .col-xxxxl-2 { width: 16.66667%; }
    .col-xxxxl-3 { width: 25%; }
    .col-xxxxl-4 { width: 33.33333%; }
    .col-xxxxl-5 { width: 41.66667%; }
    .col-xxxxl-6 { width: 50%; }
    .col-xxxxl-7 { width: 58.33333%; }
    .col-xxxxl-8 { width: 66.66667%; }
    .col-xxxxl-9 { width: 75%; }
    .col-xxxxl-10 { width: 83.33333%; }
    .col-xxxxl-11 { width: 91.66667%; }
    .col-xxxxl-12 { width: 100%; }
}