@charset "UTF-8";

/* ===== GRID SYSTEM ===== */
.row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.col { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 10px; }
.col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 10px; }
.col-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; padding: 0 10px; }
.col-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 10px; }
.col-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; padding: 0 10px; }

/* ===== SECTION STYLES ===== */
.section { padding: 60px 0; }
.section-title { font-size: 28px; color: var(--primary); margin-bottom: 30px; text-align: center; }
.section-title::after { content: ""; display: block; width: 60px; height: 3px; background: var(--secondary); margin: 15px auto 0; }

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1024px) {
  .col-4 { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 768px) {
  .col, .col-2, .col-3, .col-4, .col-5 { -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .section { padding: 40px 0; }
  .section-title { font-size: 22px; }
}
@media (max-width: 480px) {
  .section { padding: 30px 0; }
  .section-title { font-size: 20px; }
}

/* ===== IE FALLBACK ===== */
@media screen\0 {
  .row { display: block; }
  .col, .col-2, .col-3, .col-4, .col-5 { float: left; }
  .col-2 { width: 50%; }
  .col-3 { width: 33.333%; }
  .col-4 { width: 25%; }
  .col-5 { width: 20%; }
  .container::after, .row::after { content: ""; display: table; clear: both; }
}