/*--------------------------------------------------------------
 * Custom Grid
 *--------------------------------------------------------------*/

/* Variables used in calculations (12 columns, 1.5rem gutter) */
:root {
  /* Using CSS variables for reference, though Sass values are hardcoded in the output */
  --grid-columns: 12;
  --grid-gutter-width: 1.5rem;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Row mixin: @include make-row() */
.row {
  display: flex;
  flex-wrap: wrap;
  /* (1.5rem * 0.5) = 0.75rem */
  margin-right: calc(-1.5rem * 0.5); /* -0.75rem */
  margin-left: calc(-1.5rem * 0.5); /* -0.75rem */
}

/* Column ready mixin: @include make-col-ready() */
.col,
[class*="col-"] {
  position: relative;
  width: 100%;
  /* (1.5rem * 0.5) = 0.75rem */
  padding-right: calc(1.5rem * 0.5); /* 0.75rem */
  padding-left: calc(1.5rem * 0.5); /* 0.75rem */
}

/* Column base class: .col */
.col {
  flex: 1 0 0%;
}

/* Basic styling for visual separation */
[class^="col"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Ensure columns take full width on extra small screens (< 420px) */
@media (max-width: 419px) { /* 420px - 1px = 419px */
  .col,
  [class*="col-"] {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* --- Breakpoint: xxs (0px) --- */
/* The @media (min-width: 0) is effectively always active, so it's applied without a media query,
   unless the base style already covers it (like .col).
   For utility classes, the non-infix version is generated. */

/* .col-auto */
.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Columns (1 to 12) */
.col-1 { width: 8.33333%; }    /* 1/12 */
.col-2 { width: 16.66667%; }   /* 2/12 */
.col-3 { width: 25%; }         /* 3/12 */
.col-4 { width: 33.33333%; }   /* 4/12 */
.col-5 { width: 41.66667%; }   /* 5/12 */
.col-6 { width: 50%; }         /* 6/12 */
.col-7 { width: 58.33333%; }   /* 7/12 */
.col-8 { width: 66.66667%; }   /* 8/12 */
.col-9 { width: 75%; }         /* 9/12 */
.col-10 { width: 83.33333%; }  /* 10/12 */
.col-11 { width: 91.66667%; }  /* 11/12 */
.col-12 { width: 100%; }       /* 12/12 */

/* Offsets (0 to 11) */
.offset-0 { margin-left: 0; }
.offset-1 { margin-left: 8.33333%; }
.offset-2 { margin-left: 16.66667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.33333%; }
.offset-5 { margin-left: 41.66667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.33333%; }
.offset-8 { margin-left: 66.66667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.33333%; }
.offset-11 { margin-left: 91.66667%; }

/* Row Columns (1 to 6) */
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }      /* 1/1 */
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }       /* 1/2 */
.row-cols-3 > * { flex: 0 0 auto; width: 33.33333%; } /* 1/3 */
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }       /* 1/4 */
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }       /* 1/5 */
.row-cols-6 > * { flex: 0 0 auto; width: 16.66667%; } /* 1/6 */

/* Utility Classes (Non-responsive base) */
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

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

  /* Offsets */
  .offset-xs-0 { margin-left: 0; }
  .offset-xs-1 { margin-left: 8.33333%; }
  .offset-xs-2 { margin-left: 16.66667%; }
  .offset-xs-3 { margin-left: 25%; }
  .offset-xs-4 { margin-left: 33.33333%; }
  .offset-xs-5 { margin-left: 41.66667%; }
  .offset-xs-6 { margin-left: 50%; }
  .offset-xs-7 { margin-left: 58.33333%; }
  .offset-xs-8 { margin-left: 66.66667%; }
  .offset-xs-9 { margin-left: 75%; }
  .offset-xs-10 { margin-left: 83.33333%; }
  .offset-xs-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-xs-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xs-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xs-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xs-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-xs-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xs-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xs-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-xs-flex { display: flex !important; }
  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-wrap { flex-wrap: wrap !important; }
  .flex-xs-nowrap { flex-wrap: nowrap !important; }
}

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

  /* Offsets */
  .offset-sm-0 { margin-left: 0; }
  .offset-sm-1 { margin-left: 8.33333%; }
  .offset-sm-2 { margin-left: 16.66667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.33333%; }
  .offset-sm-5 { margin-left: 41.66667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.33333%; }
  .offset-sm-8 { margin-left: 66.66667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.33333%; }
  .offset-sm-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-sm-flex { display: flex !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-wrap { flex-wrap: wrap !important; }
  .flex-sm-nowrap { flex-wrap: nowrap !important; }
}

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

  /* Offsets */
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: 8.33333%; }
  .offset-md-2 { margin-left: 16.66667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.33333%; }
  .offset-md-5 { margin-left: 41.66667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.33333%; }
  .offset-md-8 { margin-left: 66.66667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.33333%; }
  .offset-md-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-md-flex { display: flex !important; }
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-wrap { flex-wrap: wrap !important; }
  .flex-md-nowrap { flex-wrap: nowrap !important; }
}

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

  /* Offsets */
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: 8.33333%; }
  .offset-lg-2 { margin-left: 16.66667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.33333%; }
  .offset-lg-5 { margin-left: 41.66667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.33333%; }
  .offset-lg-8 { margin-left: 66.66667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.33333%; }
  .offset-lg-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-lg-flex { display: flex !important; }
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-wrap { flex-wrap: wrap !important; }
  .flex-lg-nowrap { flex-wrap: nowrap !important; }
}

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

  /* Offsets */
  .offset-xl-0 { margin-left: 0; }
  .offset-xl-1 { margin-left: 8.33333%; }
  .offset-xl-2 { margin-left: 16.66667%; }
  .offset-xl-3 { margin-left: 25%; }
  .offset-xl-4 { margin-left: 33.33333%; }
  .offset-xl-5 { margin-left: 41.66667%; }
  .offset-xl-6 { margin-left: 50%; }
  .offset-xl-7 { margin-left: 58.33333%; }
  .offset-xl-8 { margin-left: 66.66667%; }
  .offset-xl-9 { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.33333%; }
  .offset-xl-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-xl-flex { display: flex !important; }
  .flex-xl-row { flex-direction: row !important; }
  .flex-xl-column { flex-direction: column !important; }
  .flex-xl-wrap { flex-wrap: wrap !important; }
  .flex-xl-nowrap { flex-wrap: nowrap !important; }
}

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

  /* Offsets */
  .offset-xxl-0 { margin-left: 0; }
  .offset-xxl-1 { margin-left: 8.33333%; }
  .offset-xxl-2 { margin-left: 16.66667%; }
  .offset-xxl-3 { margin-left: 25%; }
  .offset-xxl-4 { margin-left: 33.33333%; }
  .offset-xxl-5 { margin-left: 41.66667%; }
  .offset-xxl-6 { margin-left: 50%; }
  .offset-xxl-7 { margin-left: 58.33333%; }
  .offset-xxl-8 { margin-left: 66.66667%; }
  .offset-xxl-9 { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.33333%; }
  .offset-xxl-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-xxl-flex { display: flex !important; }
  .flex-xxl-row { flex-direction: row !important; }
  .flex-xxl-column { flex-direction: column !important; }
  .flex-xxl-wrap { flex-wrap: wrap !important; }
  .flex-xxl-nowrap { flex-wrap: nowrap !important; }
}

/* --- Breakpoint: xxxl (min-width: 1600px) --- */
@media (min-width: 1600px) {
  /* Columns */
  .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%; }

  /* Offsets */
  .offset-xxxl-0 { margin-left: 0; }
  .offset-xxxl-1 { margin-left: 8.33333%; }
  .offset-xxxl-2 { margin-left: 16.66667%; }
  .offset-xxxl-3 { margin-left: 25%; }
  .offset-xxxl-4 { margin-left: 33.33333%; }
  .offset-xxxl-5 { margin-left: 41.66667%; }
  .offset-xxxl-6 { margin-left: 50%; }
  .offset-xxxl-7 { margin-left: 58.33333%; }
  .offset-xxxl-8 { margin-left: 66.66667%; }
  .offset-xxxl-9 { margin-left: 75%; }
  .offset-xxxl-10 { margin-left: 83.33333%; }
  .offset-xxxl-11 { margin-left: 91.66667%; }

  /* Row Columns */
  .row-cols-xxxl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xxxl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xxxl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xxxl-3 > * { flex: 0 0 auto; width: 33.33333%; }
  .row-cols-xxxl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xxxl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xxxl-6 > * { flex: 0 0 auto; width: 16.66667%; }

  /* Responsive Utility Classes */
  .d-xxxl-flex { display: flex !important; }
  .flex-xxxl-row { flex-direction: row !important; }
  .flex-xxxl-column { flex-direction: column !important; }
  .flex-xxxl-wrap { flex-wrap: wrap !important; }
  .flex-xxxl-nowrap { flex-wrap: nowrap !important; }
}

/* shoartcut flex classes */
.w-50-center {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

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

.flex-justify-align-baseline {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
}

.flex-justify-end {
  display: flex;
  justify-content: flex-end;
}
.flex-align-center-justify-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-justify-between {
  display: flex;
  justify-content: space-between;
}

.flex-align-justify-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}

/*--------------------------------------------------------------
                              Order
--------------------------------------------------------------*/
.order-first {
  order: -1 !important;
}
.order-0 {
  order: 0 !important;
}
.order-1 {
  order: 1 !important;
}
.order-2 {
  order: 2 !important;
}
.order-3 {
  order: 3 !important;
}
.order-4 {
  order: 4 !important;
}
.order-5 {
  order: 5 !important;
}
.order-last {
  order: 6 !important;
}

@media (min-width: 320px) {
  .order-xs-1 {
    order: 1 !important;
  }
  .order-xs-2 {
    order: 2 !important;
  }
  .order-xs-3 {
    order: 3 !important;
  }
  .order-xs-4 {
    order: 4 !important;
  }
  .order-xs-5 {
    order: 5 !important;
  }
  .order-xs-last {
    order: 6 !important;
  }
}

@media (min-width: 576px) {
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
}

@media (min-width: 768px) {
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
}

@media (min-width: 992px) {
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
}

@media (min-width: 1200px) {
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
}

@media (min-width: 1366px) {
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
}

/* Background color utilities */
.bg-primary {
  background-color: #0d6efd !important;
}
.bg-secondary {
  background-color: #6c757d !important;
}
.bg-success {
  background-color: #198754 !important;
}
.bg-info {
  background-color: #0dcaf0 !important;
}
.bg-warning {
  background-color: #ffc107 !important;
}
.bg-danger {
  background-color: #dc3545 !important;
}
.bg-light {
  background-color: #f8f9fa !important;
}
.bg-dark {
  background-color: #212529 !important;
}

.bg-lightSky {
  background-color: #f1f2fb;
  padding: 10px;
  border-radius: 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.big-container {
  width: 60%;
  margin: 0 auto;
}

.medium-container {
  width: 50%;
  margin: 0 auto;
}

/* 420px */
@media (min-width: 320px) {
  .container,
  .big-container,
  .medium-container {
    width: 95%;
  }
}

/* 420px */
@media (min-width: 480px) {
  .container,
  .big-container,
  .medium-container {
    width: 95%;
  }
}

/* 540px */
@media (min-width: 540px) {
  .container {
    width: 95%;
  }
  .big-container {
    width: 95%;
  }
  .medium-container {
    width: 95%;
  }
}

/* 768px */
@media (min-width: 768px) {
  .container {
    width: 95%;
  }
  .big-container {
    width: 90%;
  }
  .medium-container {
    width: 90%;
  }
}

/* 920px */
@media (min-width: 920px) {
  .container {
    width: 95%;
  }
  .big-container {
    width: 80%;
  }
  .medium-container {
    width: 80%;
  }
}

/* 1366px */
@media (min-width: 1366px) {
  .container {
    width: 90%;
  }
  .big-container {
    width: 70%;
  }
  .medium-container {
    width: 60%;
  }
}

/* 1560px */
@media (min-width: 1560px) {
  .container {
    width: 85%;
  }
  .big-container {
    width: 60%;
  }
  .medium-container {
    width: 50%;
  }
}

/* Custom Container */
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md,
  .container-sm {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}