/* =====================================================
   GLOBAL LAYOUT UTILITIES
===================================================== */

/* Main container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section spacing */
.section {
  padding: 80px 0;
}

/* Section header (icon + title pattern) */
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  color: var(--primary-color);
  font-size: 16px;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* Two-column layout (20% / 80%) */
.two-col {
  display: flex;
  gap: 40px;
}

.two-col-left {
  flex: 0 0 20%;
}

.two-col-right {
  flex: 0 0 80%;
}

/* =====================================================
   RESPONSIVE UTILITIES
===================================================== */
@media (max-width: 991px) {

  .two-col {
    flex-direction: column;
  }

  .two-col-left,
  .two-col-right {
    flex: 100%;
  }

  .section {
    padding: 60px 0;
  }
}

@media (max-width: 575px) {

  .section {
    padding: 50px 0;
  }
}