/* =========================================================
   CONTAINERS
========================================================= */
.container,
.container-fluid{
  box-sizing:border-box;
  width:100%;
  padding-left:0.75rem;
  padding-right:0.75rem;
  margin-left:auto;
  margin-right:auto;
}
.container-fluid{ max-width:none; }

@media (min-width:576px){  .container{ max-width:540px;  } }
@media (min-width:768px){  .container{ max-width:720px;  } }
@media (min-width:992px){  .container{ max-width:960px;  } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }

/* container-md: 100% until md, then fixed widths */
.container-md{
  box-sizing:border-box;
  width:100%;
  padding-left:0.75rem;
  padding-right:0.75rem;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
}
@media (min-width:768px){  .container-md{ max-width:720px;  } }
@media (min-width:992px){  .container-md{ max-width:960px;  } }
@media (min-width:1200px){ .container-md{ max-width:1140px; } }
@media (min-width:1400px){ .container-md{ max-width:1320px; } }


/* =========================================================
   ROWS & COLUMNS (Bootstrap-like)
   - gutters: row negative margins + col padding
========================================================= */

.row{
  --gutter-x: 1.5rem;
  --gutter-y: 0;

  display:flex;
  flex-wrap:wrap;

  margin-left:  calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);

  /* ✅ vertical gutters like Bootstrap */
  margin-top:    calc(var(--gutter-y) / -2);
  margin-bottom: calc(var(--gutter-y) / -2);
}

.row > *{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  flex-shrink:0;

  padding-left:  calc(var(--gutter-x) / 2);
  padding-right: calc(var(--gutter-x) / 2);

  /* ✅ vertical gutters like Bootstrap */
  padding-top:    calc(var(--gutter-y) / 2);
  padding-bottom: calc(var(--gutter-y) / 2);
}

/* Fluid columns */
.col{
  flex:1 0 0%;
  max-width:100%;
}

/* Auto columns */
.col-auto{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
}


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
  flex: 0 0 auto;
}

/* md breakpoint fixed cols */
@media (min-width: 768px){
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
    flex: 0 0 auto;
  }
}

/* prevents “mystery overlap” */
.card-header,
.card-body{
  display:block;
}

/* =========================================================
   FIXED WIDTH COLS (base)
   - width + max-width + flex:0 0 auto
========================================================= */
.col-1  { flex:0 0 auto; width: 8.333333%;  max-width: 8.333333%;  }
.col-2  { flex:0 0 auto; width:16.666667%;  max-width:16.666667%;  }
.col-3  { flex:0 0 auto; width:25%;         max-width:25%;         }
.col-4  { flex:0 0 auto; width:33.333333%;  max-width:33.333333%;  }
.col-5  { flex:0 0 auto; width:41.666667%;  max-width:41.666667%;  }
.col-6  { flex:0 0 auto; width:50%;         max-width:50%;         }
.col-7  { flex:0 0 auto; width:58.333333%;  max-width:58.333333%;  }
.col-8  { flex:0 0 auto; width:66.666667%;  max-width:66.666667%;  }
.col-9  { flex:0 0 auto; width:75%;         max-width:75%;         }
.col-10 { flex:0 0 auto; width:83.333333%;  max-width:83.333333%;  }
.col-11 { flex:0 0 auto; width:91.666667%;  max-width:91.666667%;  }
.col-12 { flex:0 0 auto; width:100%;        max-width:100%;        }

/* =========================================================
   OFFSETS (base)
========================================================= */
.offset-0  { margin-left:0; }
.offset-1  { margin-left: 8.333333%; }
.offset-2  { margin-left:16.666667%; }
.offset-3  { margin-left:25%; }
.offset-4  { margin-left:33.333333%; }
.offset-5  { margin-left:41.666667%; }
.offset-6  { margin-left:50%; }
.offset-7  { margin-left:58.333333%; }
.offset-8  { margin-left:66.666667%; }
.offset-9  { margin-left:75%; }
.offset-10 { margin-left:83.333333%; }
.offset-11 { margin-left:91.666667%; }

/* =========================================================
   ORDERS (base)
========================================================= */
.order-first{ order:-1; }
.order-last { order:13; }
.order-0{order:0;} .order-1{order:1;} .order-2{order:2;} .order-3{order:3;}
.order-4{order:4;} .order-5{order:5;} .order-6{order:6;} .order-7{order:7;}
.order-8{order:8;} .order-9{order:9;} .order-10{order:10;} .order-11{order:11;}
.order-12{order:12;}


/* =========================================================
   BREAKPOINT COLS / OFFSETS / ORDERS
   (these override widths at >= breakpoint)
========================================================= */

/* SM (>=576px) */
@media (min-width:576px){
  .col-sm-1  { flex:0 0 auto; width: 8.333333%;  max-width: 8.333333%;  }
  .col-sm-2  { flex:0 0 auto; width:16.666667%;  max-width:16.666667%;  }
  .col-sm-3  { flex:0 0 auto; width:25%;         max-width:25%;         }
  .col-sm-4  { flex:0 0 auto; width:33.333333%;  max-width:33.333333%;  }
  .col-sm-5  { flex:0 0 auto; width:41.666667%;  max-width:41.666667%;  }
  .col-sm-6  { flex:0 0 auto; width:50%;         max-width:50%;         }
  .col-sm-7  { flex:0 0 auto; width:58.333333%;  max-width:58.333333%;  }
  .col-sm-8  { flex:0 0 auto; width:66.666667%;  max-width:66.666667%;  }
  .col-sm-9  { flex:0 0 auto; width:75%;         max-width:75%;         }
  .col-sm-10 { flex:0 0 auto; width:83.333333%;  max-width:83.333333%;  }
  .col-sm-11 { flex:0 0 auto; width:91.666667%;  max-width:91.666667%;  }
  .col-sm-12 { flex:0 0 auto; width:100%;        max-width:100%;        }

  .offset-sm-0{margin-left:0;}
  .offset-sm-1{margin-left: 8.333333%;}
  .offset-sm-2{margin-left:16.666667%;}
  .offset-sm-3{margin-left:25%;}
  .offset-sm-4{margin-left:33.333333%;}
  .offset-sm-5{margin-left:41.666667%;}
  .offset-sm-6{margin-left:50%;}
  .offset-sm-7{margin-left:58.333333%;}
  .offset-sm-8{margin-left:66.666667%;}
  .offset-sm-9{margin-left:75%;}
  .offset-sm-10{margin-left:83.333333%;}
  .offset-sm-11{margin-left:91.666667%;}

  .order-sm-first{order:-1;} .order-sm-last{order:13;}
  .order-sm-0{order:0;} .order-sm-1{order:1;} .order-sm-2{order:2;} .order-sm-3{order:3;}
  .order-sm-4{order:4;} .order-sm-5{order:5;} .order-sm-6{order:6;} .order-sm-7{order:7;}
  .order-sm-8{order:8;} .order-sm-9{order:9;} .order-sm-10{order:10;} .order-sm-11{order:11;}
  .order-sm-12{order:12;}
}

/* MD (>=768px) */
@media (min-width:768px){
  .col-md-1  { flex:0 0 auto; width: 8.333333%;  max-width: 8.333333%;  }
  .col-md-2  { flex:0 0 auto; width:16.666667%;  max-width:16.666667%;  }
  .col-md-3  { flex:0 0 auto; width:25%;         max-width:25%;         }
  .col-md-4  { flex:0 0 auto; width:33.333333%;  max-width:33.333333%;  }
  .col-md-5  { flex:0 0 auto; width:41.666667%;  max-width:41.666667%;  }
  .col-md-6  { flex:0 0 auto; width:50%;         max-width:50%;         }
  .col-md-7  { flex:0 0 auto; width:58.333333%;  max-width:58.333333%;  }
  .col-md-8  { flex:0 0 auto; width:66.666667%;  max-width:66.666667%;  }
  .col-md-9  { flex:0 0 auto; width:75%;         max-width:75%;         }
  .col-md-10 { flex:0 0 auto; width:83.333333%;  max-width:83.333333%;  }
  .col-md-11 { flex:0 0 auto; width:91.666667%;  max-width:91.666667%;  }
  .col-md-12 { flex:0 0 auto; width:100%;        max-width:100%;        }

  .offset-md-0{margin-left:0;}
  .offset-md-1{margin-left: 8.333333%;}
  .offset-md-2{margin-left:16.666667%;}
  .offset-md-3{margin-left:25%;}
  .offset-md-4{margin-left:33.333333%;}
  .offset-md-5{margin-left:41.666667%;}
  .offset-md-6{margin-left:50%;}
  .offset-md-7{margin-left:58.333333%;}
  .offset-md-8{margin-left:66.666667%;}
  .offset-md-9{margin-left:75%;}
  .offset-md-10{margin-left:83.333333%;}
  .offset-md-11{margin-left:91.666667%;}

  .order-md-first{order:-1;} .order-md-last{order:13;}
  .order-md-0{order:0;} .order-md-1{order:1;} .order-md-2{order:2;} .order-md-3{order:3;}
  .order-md-4{order:4;} .order-md-5{order:5;} .order-md-6{order:6;} .order-md-7{order:7;}
  .order-md-8{order:8;} .order-md-9{order:9;} .order-md-10{order:10;} .order-md-11{order:11;}
  .order-md-12{order:12;}
}

/* LG (>=992px) */
@media (min-width:992px){
  .col-lg-1  { flex:0 0 auto; width: 8.333333%;  max-width: 8.333333%;  }
  .col-lg-2  { flex:0 0 auto; width:16.666667%;  max-width:16.666667%;  }
  .col-lg-3  { flex:0 0 auto; width:25%;         max-width:25%;         }
  .col-lg-4  { flex:0 0 auto; width:33.333333%;  max-width:33.333333%;  }
  .col-lg-5  { flex:0 0 auto; width:41.666667%;  max-width:41.666667%;  }
  .col-lg-6  { flex:0 0 auto; width:50%;         max-width:50%;         }
  .col-lg-7  { flex:0 0 auto; width:58.333333%;  max-width:58.333333%;  }
  .col-lg-8  { flex:0 0 auto; width:66.666667%;  max-width:66.666667%;  }
  .col-lg-9  { flex:0 0 auto; width:75%;         max-width:75%;         }
  .col-lg-10 { flex:0 0 auto; width:83.333333%;  max-width:83.333333%;  }
  .col-lg-11 { flex:0 0 auto; width:91.666667%;  max-width:91.666667%;  }
  .col-lg-12 { flex:0 0 auto; width:100%;        max-width:100%;        }

  .offset-lg-0{margin-left:0;}
  .offset-lg-1{margin-left: 8.333333%;}
  .offset-lg-2{margin-left:16.666667%;}
  .offset-lg-3{margin-left:25%;}
  .offset-lg-4{margin-left:33.333333%;}
  .offset-lg-5{margin-left:41.666667%;}
  .offset-lg-6{margin-left:50%;}
  .offset-lg-7{margin-left:58.333333%;}
  .offset-lg-8{margin-left:66.666667%;}
  .offset-lg-9{margin-left:75%;}
  .offset-lg-10{margin-left:83.333333%;}
  .offset-lg-11{margin-left:91.666667%;}

  .order-lg-first{order:-1;} .order-lg-last{order:13;}
  .order-lg-0{order:0;} .order-lg-1{order:1;} .order-lg-2{order:2;} .order-lg-3{order:3;}
  .order-lg-4{order:4;} .order-lg-5{order:5;} .order-lg-6{order:6;} .order-lg-7{order:7;}
  .order-lg-8{order:8;} .order-lg-9{order:9;} .order-lg-10{order:10;} .order-lg-11{order:11;}
  .order-lg-12{order:12;}
}

/* =========================================================
   GAP UTILITIES (only meaningful for flex/grid containers)
========================================================= */

/* gx sets horizontal gutter */
.gx-0{ --gutter-x: 0; }
.gx-1{ --gutter-x: .25rem; }
.gx-2{ --gutter-x: .5rem; }
.gx-3{ --gutter-x: 1rem; }
.gx-4{ --gutter-x: 1.5rem; }
.gx-5{ --gutter-x: 3rem; }

/* gy sets vertical gutter */
.gy-0{ --gutter-y: 0; }
.gy-1{ --gutter-y: .25rem; }
.gy-2{ --gutter-y: .5rem; }
.gy-3{ --gutter-y: 1rem; }
.gy-4{ --gutter-y: 1.5rem; }
.gy-5{ --gutter-y: 3rem; }

/* =========================================================
   DISPLAY, FLEX, TEXT & SIZE UTILITIES
========================================================= */

/* Display */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }

/* Flex direction & wrap */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-end { justify-content: flex-end; }

/* Align items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Align self */
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* Flex sizing */
.flex-1 { flex: 1 1 0%; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* Text */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }

/* Vertical align (non-flex) */
.align-middle { vertical-align: middle; }

/* Size */
.w-100 { width: 100%; }
.h-100 { height: 100%; }


/* =========================================================
   MICRO SPACING PACK
========================================================= */
.m-0 { margin:0; } .mt-1 { margin-top:0.25rem; } .mt-2 { margin-top:0.5rem; } .mt-3 { margin-top:1rem; } .mt-4 { margin-top:1.5rem;
} .mt-5 { margin-top:3rem; }
.mb-1 { margin-bottom:0.25rem; } .mb-2 { margin-bottom:0.5rem; } .mb-3 { margin-bottom:1rem; } .mb-4 { margin-bottom:1.5rem; } .mb-5 { margin-bottom:3rem; }
.mx-auto { margin-left:auto; margin-right:auto; } .ms-auto { margin-left:auto; } .me-auto { margin-right:auto; }

.p-0 { padding:0; } .p-1 { padding:0.25rem; } .p-2 { padding:0.5rem; } .p-3 { padding:1rem; } .p-4 { padding:1.5rem; } .p-5 { padding:3rem; }
.px-1 { padding-left:0.25rem; padding-right:0.25rem; } .px-2 { padding-left:0.5rem; padding-right:0.5rem; } .px-3 { padding-left:1rem; padding-right:1rem; }
.py-1 { padding-top:0.25rem; padding-bottom:0.25rem; } .py-2 { padding-top:0.5rem; padding-bottom:0.5rem; } .py-3 { padding-top:1rem; padding-bottom:1rem; }