/* Flex Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.row { flex-direction: row; }
.column { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }

/* Gap Utilities */
.gap-xs { gap: var(--xs); }
.gap-sm { gap: var(--sm); }
.gap-md { gap: var(--md); }
.gap-lg { gap: var(--lg); }
.gap-xl { gap: var(--xl); }
.gap-xxl { gap: var(--xxl); }

/* Grid Utilities */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }

/* layout utility */
.w-100{
    width:100%;
}
.h-100{
    height:100%;
}
.relative{
    position:relative;
}
.absolute{
    position:absolute;
}


/*---- responsive layouts -----*/
@media (max-width: 1199px) { /* lg */
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) { /* md */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stack-md { flex-direction: column; }
  .hide-md { display: none !important; }
  .hide-md.active{display: block !important;}
  .center-md { text-align: center; }
}
@media (max-width: 767px) { /* sm */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .stack-sm { flex-direction: column; }
  .hide-sm { display: none !important; }
  .hide-sm.active{display: block !important;}
  .center-sm { text-align: center; }
}
@media (max-width: 580px) { /* xs */
  .stack-xs { flex-direction: column; }
  .hide-xs { display: none !important; }
  .hide-xs.active{display: block !important;}
  .center-xs { text-align: center; }
}