/* =========================================================
   RESET & VARIABLES
========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1200px;
  --xxl:1400px;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s7:1.75rem; --s8:2rem;
  --s9:2.25rem; --s10:2.5rem; --s11:2.75rem; --s12:3rem;
}

/* =========================================================
   CONTAINER
========================================================= */
.container{width:100%;padding:1rem;margin:auto}
@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}}

/* =========================================================
   GRID SYSTEM (1–12, RESPONSIVE)
========================================================= */
.row{display:flex;flex-wrap:wrap;margin:-.75rem}
[class^="col"]{padding:.75rem;width:100%}
.col{flex:1 0 0%}

.col-1{width:8.333%}.col-2{width:16.666%}.col-3{width:25%}
.col-4{width:33.333%}.col-5{width:41.666%}.col-6{width:50%}
.col-7{width:58.333%}.col-8{width:66.666%}.col-9{width:75%}
.col-10{width:83.333%}.col-11{width:91.666%}.col-12{width:100%}

@media(min-width:576px){
.col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}
.col-sm-4{width:33.333%}.col-sm-5{width:41.666%}.col-sm-6{width:50%}
.col-sm-7{width:58.333%}.col-sm-8{width:66.666%}.col-sm-9{width:75%}
.col-sm-10{width:83.333%}.col-sm-11{width:91.666%}.col-sm-12{width:100%}}
@media(min-width:768px){
.col-md-1{width:8.333%}.col-md-2{width:16.666%}.col-md-3{width:25%}
.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}
.col-md-7{width:58.333%}.col-md-8{width:66.666%}.col-md-9{width:75%}
.col-md-10{width:83.333%}.col-md-11{width:91.666%}.col-md-12{width:100%}}
@media(min-width:992px){
.col-lg-1{width:8.333%}.col-lg-2{width:16.666%}.col-lg-3{width:25%}
.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}
.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}
.col-lg-10{width:83.333%}.col-lg-11{width:91.666%}.col-lg-12{width:100%}}
@media(min-width:1200px){
.col-xl-1{width:8.333%}.col-xl-2{width:16.666%}.col-xl-3{width:25%}
.col-xl-4{width:33.333%}.col-xl-5{width:41.666%}.col-xl-6{width:50%}
.col-xl-7{width:58.333%}.col-xl-8{width:66.666%}.col-xl-9{width:75%}
.col-xl-10{width:83.333%}.col-xl-11{width:91.666%}.col-xl-12{width:100%}}
@media(min-width:1400px){
.col-xxl-1{width:8.333%}.col-xxl-2{width:16.666%}.col-xxl-3{width:25%}
.col-xxl-4{width:33.333%}.col-xxl-5{width:41.666%}.col-xxl-6{width:50%}
.col-xxl-7{width:58.333%}.col-xxl-8{width:66.666%}.col-xxl-9{width:75%}
.col-xxl-10{width:83.333%}.col-xxl-11{width:91.666%}.col-xxl-12{width:100%}}

/* =========================================================
   DISPLAY (RESPONSIVE)
========================================================= */
.d-none{display:none!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
.d-grid{display:grid!important}

@media(min-width:576px){.d-sm-none{display:none!important}.d-sm-block{display:block!important}.d-sm-flex{display:flex!important}}
@media(min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}}
@media(min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}}
@media(min-width:1200px){.d-xl-none{display:none!important}.d-xl-block{display:block!important}.d-xl-flex{display:flex!important}}
@media(min-width:1400px){.d-xxl-none{display:none!important}.d-xxl-block{display:block!important}.d-xxl-flex{display:flex!important}}

/* =========================================================
   FLEX (FULL BOOTSTRAP)
========================================================= */
/*.flex-row{flex-direction:row!important}*/
/*.flex-column{flex-direction:column!important}*/
/*.flex-row-reverse{flex-direction:row-reverse!important}*/
/*.flex-column-reverse{flex-direction:column-reverse!important}*/

/*.flex-wrap{flex-wrap:wrap!important}*/
/*.flex-nowrap{flex-wrap:nowrap!important}*/
/*.flex-wrap-reverse{flex-wrap:wrap-reverse!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}*/
/*.justify-content-evenly{justify-content:space-evenly!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}*/

/*.align-self-start{align-self:flex-start!important}*/
/*.align-self-end{align-self:flex-end!important}*/
/*.align-self-center{align-self:center!important}*/
/*.align-self-stretch{align-self:stretch!important}*/

/*.flex-grow-0{flex-grow:0!important}*/
/*.flex-grow-1{flex-grow:1!important}*/
/*.flex-shrink-0{flex-shrink:0!important}*/
/*.flex-shrink-1{flex-shrink:1!important}*/
/*.flex-fill{flex:1 1 auto!important}*/

/* Order */
/*.order-first{order:-1!important}*/
/*.order-last{order:13!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-6{order:6!important}*/
/*.order-7{order:7!important}*/
/*.order-8{order:8!important}*/
/*.order-9{order:9!important}*/
/*.order-10{order:10!important}*/
/*.order-11{order:11!important}*/
/*.order-12{order:12!important}*/

/* =========================================================
   SPACING (MARGIN & PADDING 0–12)
========================================================= */
/* All sides */
.m-0{margin:0}
.m-1{margin:var(--s1)} .m-2{margin:var(--s2)} .m-3{margin:var(--s3)}
.m-4{margin:var(--s4)} .m-5{margin:var(--s5)} .m-6{margin:var(--s6)}
.m-7{margin:var(--s7)} .m-8{margin:var(--s8)} .m-9{margin:var(--s9)}
.m-10{margin:var(--s10)} .m-11{margin:var(--s11)} .m-12{margin:var(--s12)}

/* Top */
.mt-0{margin-top:0}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)} .mt-8{margin-top:var(--s8)} .mt-9{margin-top:var(--s9)}
.mt-10{margin-top:var(--s10)} .mt-11{margin-top:var(--s11)} .mt-12{margin-top:var(--s12)}

/* Bottom */
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--s1)} .mb-2{margin-bottom:var(--s2)} .mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)} .mb-5{margin-bottom:var(--s5)} .mb-6{margin-bottom:var(--s6)}
.mb-7{margin-bottom:var(--s7)} .mb-8{margin-bottom:var(--s8)} .mb-9{margin-bottom:var(--s9)}
.mb-10{margin-bottom:var(--s10)} .mb-11{margin-bottom:var(--s11)} .mb-12{margin-bottom:var(--s12)}

/* Start (Left) */
.ms-0{margin-left:0}
.ms-1{margin-left:var(--s1)} .ms-2{margin-left:var(--s2)} .ms-3{margin-left:var(--s3)}
.ms-4{margin-left:var(--s4)} .ms-5{margin-left:var(--s5)} .ms-6{margin-left:var(--s6)}
.ms-7{margin-left:var(--s7)} .ms-8{margin-left:var(--s8)} .ms-9{margin-left:var(--s9)}
.ms-10{margin-left:var(--s10)} .ms-11{margin-left:var(--s11)} .ms-12{margin-left:var(--s12)}

/* End (Right) */
.me-0{margin-right:0}
.me-1{margin-right:var(--s1)} .me-2{margin-right:var(--s2)} .me-3{margin-right:var(--s3)}
.me-4{margin-right:var(--s4)} .me-5{margin-right:var(--s5)} .me-6{margin-right:var(--s6)}
.me-7{margin-right:var(--s7)} .me-8{margin-right:var(--s8)} .me-9{margin-right:var(--s9)}
.me-10{margin-right:var(--s10)} .me-11{margin-right:var(--s11)} .me-12{margin-right:var(--s12)}
/* Horizontal (left + right) */
.mx-0{margin-left:0;margin-right:0}
.mx-1{margin-left:var(--s1);margin-right:var(--s1)}
.mx-2{margin-left:var(--s2);margin-right:var(--s2)}
.mx-3{margin-left:var(--s3);margin-right:var(--s3)}
.mx-4{margin-left:var(--s4);margin-right:var(--s4)}
.mx-5{margin-left:var(--s5);margin-right:var(--s5)}
.mx-6{margin-left:var(--s6);margin-right:var(--s6)}
.mx-7{margin-left:var(--s7);margin-right:var(--s7)}
.mx-8{margin-left:var(--s8);margin-right:var(--s8)}
.mx-9{margin-left:var(--s9);margin-right:var(--s9)}
.mx-10{margin-left:var(--s10);margin-right:var(--s10)}
.mx-11{margin-left:var(--s11);margin-right:var(--s11)}
.mx-12{margin-left:var(--s12);margin-right:var(--s12)}

/* Vertical (top + bottom) */
.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:var(--s1);margin-bottom:var(--s1)}
.my-2{margin-top:var(--s2);margin-bottom:var(--s2)}
.my-3{margin-top:var(--s3);margin-bottom:var(--s3)}
.my-4{margin-top:var(--s4);margin-bottom:var(--s4)}
.my-5{margin-top:var(--s5);margin-bottom:var(--s5)}
.my-6{margin-top:var(--s6);margin-bottom:var(--s6)}
.my-7{margin-top:var(--s7);margin-bottom:var(--s7)}
.my-8{margin-top:var(--s8);margin-bottom:var(--s8)}
.my-9{margin-top:var(--s9);margin-bottom:var(--s9)}
.my-10{margin-top:var(--s10);margin-bottom:var(--s10)}
.my-11{margin-top:var(--s11);margin-bottom:var(--s11)}
.my-12{margin-top:var(--s12);margin-bottom:var(--s12)}


/* All sides */
.p-0{padding:0}
.p-1{padding:var(--s1)} .p-2{padding:var(--s2)} .p-3{padding:var(--s3)}
.p-4{padding:var(--s4)} .p-5{padding:var(--s5)} .p-6{padding:var(--s6)}
.p-7{padding:var(--s7)} .p-8{padding:var(--s8)} .p-9{padding:var(--s9)}
.p-10{padding:var(--s10)} .p-11{padding:var(--s11)} .p-12{padding:var(--s12)}

/* Top */
.pt-0{padding-top:0}
.pt-1{padding-top:var(--s1)} .pt-2{padding-top:var(--s2)} .pt-3{padding-top:var(--s3)}
.pt-4{padding-top:var(--s4)} .pt-5{padding-top:var(--s5)} .pt-6{padding-top:var(--s6)}
.pt-7{padding-top:var(--s7)} .pt-8{padding-top:var(--s8)} .pt-9{padding-top:var(--s9)}
.pt-10{padding-top:var(--s10)} .pt-11{padding-top:var(--s11)} .pt-12{padding-top:var(--s12)}

/* Bottom */
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:var(--s1)} .pb-2{padding-bottom:var(--s2)} .pb-3{padding-bottom:var(--s3)}
.pb-4{padding-bottom:var(--s4)} .pb-5{padding-bottom:var(--s5)} .pb-6{padding-bottom:var(--s6)}
.pb-7{padding-bottom:var(--s7)} .pb-8{padding-bottom:var(--s8)} .pb-9{padding-bottom:var(--s9)}
.pb-10{padding-bottom:var(--s10)} .pb-11{padding-bottom:var(--s11)} .pb-12{padding-bottom:var(--s12)}

/* Start (Left) */
.ps-0{padding-left:0}
.ps-1{padding-left:var(--s1)} .ps-2{padding-left:var(--s2)} .ps-3{padding-left:var(--s3)}
.ps-4{padding-left:var(--s4)} .ps-5{padding-left:var(--s5)} .ps-6{padding-left:var(--s6)}
.ps-7{padding-left:var(--s7)} .ps-8{padding-left:var(--s8)} .ps-9{padding-left:var(--s9)}
.ps-10{padding-left:var(--s10)} .ps-11{padding-left:var(--s11)} .ps-12{padding-left:var(--s12)}

/* End (Right) */
.pe-0{padding-right:0}
.pe-1{padding-right:var(--s1)} .pe-2{padding-right:var(--s2)} .pe-3{padding-right:var(--s3)}
.pe-4{padding-right:var(--s4)} .pe-5{padding-right:var(--s5)} .pe-6{padding-right:var(--s6)}
.pe-7{padding-right:var(--s7)} .pe-8{padding-right:var(--s8)} .pe-9{padding-right:var(--s9)}
.pe-10{padding-right:var(--s10)} .pe-11{padding-right:var(--s11)} .pe-12{padding-right:var(--s12)}
/* Horizontal (left + right) */
.px-0{padding-left:0;padding-right:0}
.px-1{padding-left:var(--s1);padding-right:var(--s1)}
.px-2{padding-left:var(--s2);padding-right:var(--s2)}
.px-3{padding-left:var(--s3);padding-right:var(--s3)}
.px-4{padding-left:var(--s4);padding-right:var(--s4)}
.px-5{padding-left:var(--s5);padding-right:var(--s5)}
.px-6{padding-left:var(--s6);padding-right:var(--s6)}
.px-7{padding-left:var(--s7);padding-right:var(--s7)}
.px-8{padding-left:var(--s8);padding-right:var(--s8)}
.px-9{padding-left:var(--s9);padding-right:var(--s9)}
.px-10{padding-left:var(--s10);padding-right:var(--s10)}
.px-11{padding-left:var(--s11);padding-right:var(--s11)}
.px-12{padding-left:var(--s12);padding-right:var(--s12)}

/* Vertical (top + bottom) */
.py-0{padding-top:0;padding-bottom:0}
.py-1{padding-top:var(--s1);padding-bottom:var(--s1)}
.py-2{padding-top:var(--s2);padding-bottom:var(--s2)}
.py-3{padding-top:var(--s3);padding-bottom:var(--s3)}
.py-4{padding-top:var(--s4);padding-bottom:var(--s4)}
.py-5{padding-top:var(--s5);padding-bottom:var(--s5)}
.py-6{padding-top:var(--s6);padding-bottom:var(--s6)}
.py-7{padding-top:var(--s7);padding-bottom:var(--s7)}
.py-8{padding-top:var(--s8);padding-bottom:var(--s8)}
.py-9{padding-top:var(--s9);padding-bottom:var(--s9)}
.py-10{padding-top:var(--s10);padding-bottom:var(--s10)}
.py-11{padding-top:var(--s11);padding-bottom:var(--s11)}
.py-12{padding-top:var(--s12);padding-bottom:var(--s12)}


/* =========================================================
   WIDTH & HEIGHT (1–12)
========================================================= */
/*.w-1{width:8.333%}.w-2{width:16.666%}.w-3{width:25%}*/
/*.w-4{width:33.333%}.w-5{width:41.666%}.w-6{width:50%}*/
/*.w-7{width:58.333%}.w-8{width:66.666%}.w-9{width:75%}*/
/*.w-10{width:83.333%}.w-11{width:91.666%}.w-12{width:100%}*/

/*.h-1{height:8.333%}.h-2{height:16.666%}.h-3{height:25%}*/
/*.h-4{height:33.333%}.h-5{height:41.666%}.h-6{height:50%}*/
/*.h-7{height:58.333%}.h-8{height:66.666%}.h-9{height:75%}*/
/*.h-10{height:83.333%}.h-11{height:91.666%}.h-12{height:100%}*/

/* =========================================================
   PRINT
========================================================= */
@media print{
  .d-print-none{display:none!important}
  .d-print-block{display:block!important}
  .d-print-flex{display:flex!important}
}
