/* ===== Minimal grid + utilities (Bootstrap-like) ===== */

:root { --gutter-x: 1.5rem; }

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Container */
.container{
  width: 100%;
  padding-left: calc(var(--gutter-x) * .5);
  padding-right: calc(var(--gutter-x) * .5);
  margin-left: auto;
  margin-right: 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; } }

/* Row / columns */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter-x) * -.5);
  margin-right: calc(var(--gutter-x) * -.5);
}
.row > *{
  padding-left: calc(var(--gutter-x) * .5);
  padding-right: calc(var(--gutter-x) * .5);
  width: 100%;
}

/* Col helpers you use */
.col-12{ flex: 0 0 auto; width: 100%; }

@media (min-width: 576px){
  .col-sm-6{ flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px){
  .col-lg-4{ flex: 0 0 auto; width: 33.333333%; }
  .col-lg-6{ flex: 0 0 auto; width: 50%; }
}

/* Alignment utilities you use */
.text-center{ text-align: center; }
.align-items-center{ align-items: center; }
.justify-content-between{ justify-content: space-between; }
.h-100{ height: 100%; }

/* Image utility */
.img-fluid{ max-width: 100%; height: auto; display: block; }

/* Clearfix (legacy) */
.clearfix::after{ content:""; display:block; clear:both; }

/* Spacing utilities you use (match your existing values if needed) */
.mt-50{ margin-top: 50px; }
.mb-100{ margin-bottom: 100px; }

/* Basic button baseline (won't fight your existing design) */
.btn{
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.1;
}
.btn-primary{ /* if you already style this in style3.css/new.css, remove these */
  color: #fff;
}