/*
 * DDT Flexbox CSS v1.0.0
 * Professional 12-column grid system with flexbox
 */

/* ========================================
   CONTAINER
   ======================================== */

.ddt-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.ddt-container-fluid {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Responsive containers */
@media (min-width: 576px) {
  .ddt-container { max-width: 540px; }
}

@media (min-width: 768px) {
  .ddt-container { max-width: 720px; }
}

@media (min-width: 992px) {
  .ddt-container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .ddt-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .ddt-container { max-width: 1400px; }
}

/* ========================================
   ROW & COLUMN BASE
   ======================================== */

.ddt-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class*="ddt-col"] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
}

/* ========================================
   12 COLUMN GRID SYSTEM
   ======================================== */

/* Auto columns */
.ddt-col {
  flex: 1 0 0%;
}

.ddt-col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Fixed columns */
.ddt-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.ddt-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.ddt-col-3 { flex: 0 0 25%; max-width: 25%; }
.ddt-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.ddt-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.ddt-col-6 { flex: 0 0 50%; max-width: 50%; }
.ddt-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.ddt-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.ddt-col-9 { flex: 0 0 75%; max-width: 75%; }
.ddt-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.ddt-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.ddt-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ========================================
   RESPONSIVE COLUMNS - SM (≥576px)
   ======================================== */

@media (min-width: 576px) {
  .ddt-col-sm { flex: 1 0 0%; }
  .ddt-col-sm-auto { flex: 0 0 auto; width: auto; }
  .ddt-col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .ddt-col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .ddt-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .ddt-col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ddt-col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .ddt-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .ddt-col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .ddt-col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .ddt-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .ddt-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .ddt-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .ddt-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - MD (≥768px)
   ======================================== */

@media (min-width: 768px) {
  .ddt-col-md { flex: 1 0 0%; }
  .ddt-col-md-auto { flex: 0 0 auto; width: auto; }
  .ddt-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .ddt-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .ddt-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .ddt-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ddt-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .ddt-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .ddt-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .ddt-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .ddt-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .ddt-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .ddt-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .ddt-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - LG (≥992px)
   ======================================== */

@media (min-width: 992px) {
  .ddt-col-lg { flex: 1 0 0%; }
  .ddt-col-lg-auto { flex: 0 0 auto; width: auto; }
  .ddt-col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .ddt-col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .ddt-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .ddt-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ddt-col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .ddt-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .ddt-col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .ddt-col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .ddt-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .ddt-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .ddt-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .ddt-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - XL (≥1200px)
   ======================================== */

@media (min-width: 1200px) {
  .ddt-col-xl { flex: 1 0 0%; }
  .ddt-col-xl-auto { flex: 0 0 auto; width: auto; }
  .ddt-col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .ddt-col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .ddt-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .ddt-col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ddt-col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .ddt-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .ddt-col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .ddt-col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .ddt-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .ddt-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .ddt-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .ddt-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - XXL (≥1400px)
   ======================================== */

@media (min-width: 1400px) {
  .ddt-col-xxl { flex: 1 0 0%; }
  .ddt-col-xxl-auto { flex: 0 0 auto; width: auto; }
  .ddt-col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .ddt-col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .ddt-col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .ddt-col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ddt-col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .ddt-col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .ddt-col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .ddt-col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .ddt-col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .ddt-col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .ddt-col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .ddt-col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   OFFSET COLUMNS
   ======================================== */

.ddt-offset-1 { margin-left: 8.333333%; }
.ddt-offset-2 { margin-left: 16.666667%; }
.ddt-offset-3 { margin-left: 25%; }
.ddt-offset-4 { margin-left: 33.333333%; }
.ddt-offset-5 { margin-left: 41.666667%; }
.ddt-offset-6 { margin-left: 50%; }
.ddt-offset-7 { margin-left: 58.333333%; }
.ddt-offset-8 { margin-left: 66.666667%; }
.ddt-offset-9 { margin-left: 75%; }
.ddt-offset-10 { margin-left: 83.333333%; }
.ddt-offset-11 { margin-left: 91.666667%; }

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

/* Direction */
.ddt-flex-row { flex-direction: row; }
.ddt-flex-row-reverse { flex-direction: row-reverse; }
.ddt-flex-column { flex-direction: column; }
.ddt-flex-column-reverse { flex-direction: column-reverse; }

/* Wrap */
.ddt-flex-wrap { flex-wrap: wrap; }
.ddt-flex-nowrap { flex-wrap: nowrap; }
.ddt-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.ddt-justify-start { justify-content: flex-start; }
.ddt-justify-end { justify-content: flex-end; }
.ddt-justify-center { justify-content: center; }
.ddt-justify-between { justify-content: space-between; }
.ddt-justify-around { justify-content: space-around; }
.ddt-justify-evenly { justify-content: space-evenly; }

/* Align Items */
.ddt-align-start { align-items: flex-start; }
.ddt-align-end { align-items: flex-end; }
.ddt-align-center { align-items: center; }
.ddt-align-baseline { align-items: baseline; }
.ddt-align-stretch { align-items: stretch; }

/* Align Content */
.ddt-align-content-start { align-content: flex-start; }
.ddt-align-content-end { align-content: flex-end; }
.ddt-align-content-center { align-content: center; }
.ddt-align-content-between { align-content: space-between; }
.ddt-align-content-around { align-content: space-around; }
.ddt-align-content-stretch { align-content: stretch; }

/* Align Self */
.ddt-align-self-start { align-self: flex-start; }
.ddt-align-self-end { align-self: flex-end; }
.ddt-align-self-center { align-self: center; }
.ddt-align-self-baseline { align-self: baseline; }
.ddt-align-self-stretch { align-self: stretch; }

/* Flex Grow & Shrink */
.ddt-flex-grow-0 { flex-grow: 0; }
.ddt-flex-grow-1 { flex-grow: 1; }
.ddt-flex-shrink-0 { flex-shrink: 0; }
.ddt-flex-shrink-1 { flex-shrink: 1; }

/* Gap utilities */
.ddt-gap-0 { gap: 0; }
.ddt-gap-1 { gap: 0.25rem; }
.ddt-gap-2 { gap: 0.5rem; }
.ddt-gap-3 { gap: 0.75rem; }
.ddt-gap-4 { gap: 1rem; }
.ddt-gap-5 { gap: 1.25rem; }
.ddt-gap-6 { gap: 1.5rem; }
.ddt-gap-8 { gap: 2rem; }
.ddt-gap-10 { gap: 2.5rem; }

/* Row gap */
.ddt-row-gap-0 { row-gap: 0; }
.ddt-row-gap-1 { row-gap: 0.25rem; }
.ddt-row-gap-2 { row-gap: 0.5rem; }
.ddt-row-gap-3 { row-gap: 0.75rem; }
.ddt-row-gap-4 { row-gap: 1rem; }
.ddt-row-gap-5 { row-gap: 1.25rem; }

/* Column gap */
.ddt-col-gap-0 { column-gap: 0; }
.ddt-col-gap-1 { column-gap: 0.25rem; }
.ddt-col-gap-2 { column-gap: 0.5rem; }
.ddt-col-gap-3 { column-gap: 0.75rem; }
.ddt-col-gap-4 { column-gap: 1rem; }
.ddt-col-gap-5 { column-gap: 1.25rem; }

/* Order */
.ddt-order-first { order: -1; }
.ddt-order-last { order: 999; }
.ddt-order-0 { order: 0; }
.ddt-order-1 { order: 1; }
.ddt-order-2 { order: 2; }
.ddt-order-3 { order: 3; }
.ddt-order-4 { order: 4; }
.ddt-order-5 { order: 5; }
 

/* Responsive Order - SM (≥576px) */
@media (min-width: 576px) {
  .ddt-order-sm-first { order: -1; }
  .ddt-order-sm-last { order: 999; }
  .ddt-order-sm-0 { order: 0; }
  .ddt-order-sm-1 { order: 1; }
  .ddt-order-sm-2 { order: 2; }
  .ddt-order-sm-3 { order: 3; }
  .ddt-order-sm-4 { order: 4; }
  .ddt-order-sm-5 { order: 5; }
}

/* Responsive Order - MD (≥768px) */
@media (min-width: 768px) {
  .ddt-order-md-first { order: -1; }
  .ddt-order-md-last { order: 999; }
  .ddt-order-md-0 { order: 0; }
  .ddt-order-md-1 { order: 1; }
  .ddt-order-md-2 { order: 2; }
  .ddt-order-md-3 { order: 3; }
  .ddt-order-md-4 { order: 4; }
  .ddt-order-md-5 { order: 5; }
}

/* Responsive Order - LG (≥992px) */
@media (min-width: 992px) {
  .ddt-order-lg-first { order: -1; }
  .ddt-order-lg-last { order: 999; }
  .ddt-order-lg-0 { order: 0; }
  .ddt-order-lg-1 { order: 1; }
  .ddt-order-lg-2 { order: 2; }
  .ddt-order-lg-3 { order: 3; }
  .ddt-order-lg-4 { order: 4; }
  .ddt-order-lg-5 { order: 5; }
}

/* Responsive Order - XL (≥1200px) */
@media (min-width: 1200px) {
  .ddt-order-xl-first { order: -1; }
  .ddt-order-xl-last { order: 999; }
  .ddt-order-xl-0 { order: 0; }
  .ddt-order-xl-1 { order: 1; }
  .ddt-order-xl-2 { order: 2; }
  .ddt-order-xl-3 { order: 3; }
  .ddt-order-xl-4 { order: 4; }
  .ddt-order-xl-5 { order: 5; }
}
/* ========================================
   DISPLAY UTILITIES
   ======================================== */

.ddt-d-none { display: none; }
.ddt-d-block { display: block; }
.ddt-d-inline { display: inline; }
.ddt-d-inline-block { display: inline-block; }
.ddt-d-flex, .d-flex, .ddt-flex { display: flex; }
.ddt-d-inline-flex { display: inline-flex; }
.ddt-d-grid { display: grid; }

/* Responsive display */
@media (min-width: 576px) {
  .ddt-d-sm-none { display: none; }
  .ddt-d-sm-block { display: block; }
  .ddt-d-sm-flex { display: flex; }
}

@media (min-width: 768px) {
  .ddt-d-md-none { display: none; }
  .ddt-d-md-block { display: block; }
  .ddt-d-md-flex { display: flex; }
}

@media (min-width: 992px) {
  .ddt-d-lg-none { display: none; }
  .ddt-d-lg-block { display: block; }
  .ddt-d-lg-flex { display: flex; }
}

@media (min-width: 1200px) {
  .ddt-d-xl-none { display: none; }
  .ddt-d-xl-block { display: block; }
  .ddt-d-xl-flex { display: flex; }
}