/* Card1 System - Inspired by Bootstrap Card but with custom names */
    .card1 {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: all 0.3s ease;
    }

    .card1:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .card-header1 {
        padding: 0.75rem 1.25rem;
        margin-bottom: 0;
        background-color: rgba(0, 0, 0, 0.03);
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        border-top-left-radius: calc(0.25rem - 1px);
        border-top-right-radius: calc(0.25rem - 1px);
    }

    .card-header1:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }

    .card-body1 {
        flex: 1 1 auto;
        padding: 1.25rem;
    }

    .card-title1 {
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .card-subtitle1 {
        margin-top: -0.375rem;
        margin-bottom: 0;
        color: #6c757d;
    }

    .card-text1 {
        margin-bottom: 1rem;
    }

    .card-link1 {
        color: #0d6efd;
        text-decoration: none;
    }

    .card-link1:hover {
        text-decoration: underline;
    }

    /* Optional Card1 Variants */
    .card1-primary {
        border-color: #0d6efd;
    }

    .card1-primary .card-header1 {
        background-color: #0d6efd;
        color: white;
    }

    .card1-success {
        border-color: #198754;
    }

    .card1-success .card-header1 {
        background-color: #198754;
        color: white;
    }

    /* Card1 Image Styles */
    .card1-img-top {
        width: 100%;
        border-top-left-radius: calc(0.25rem - 1px);
        border-top-right-radius: calc(0.25rem - 1px);
    }

    .card1-img-bottom {
        width: 100%;
        border-bottom-left-radius: calc(0.25rem - 1px);
        border-bottom-right-radius: calc(0.25rem - 1px);
    }

    /* Card1 Layout Options */
    .card1-group {
        display: flex;
        flex-flow: row wrap;
    }

    .card1-group .card1 {
        margin-bottom: 15px;
    }

    @media (min-width: 576px) {
        .card1-group {
            flex-flow: row nowrap;
        }

        .card1-group .card1 {
            flex: 1 0 0;
            margin-bottom: 0;
            margin-right: 15px;
        }

        .card1-group .card1:last-child {
            margin-right: 0;
        }
    }



/* Custom Grid System - Avoid conflict with template classes */
.container1 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.row1 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  box-sizing: border-box;
}

/* Columns base style */
[class*="col1-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* Extra small devices (default) */
.col1-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col1-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col1-3 { flex: 0 0 25%; max-width: 25%; }
.col1-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col1-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col1-6 { flex: 0 0 50%; max-width: 50%; }
.col1-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col1-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col1-9 { flex: 0 0 75%; max-width: 75%; }
.col1-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col1-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col1-12 { flex: 0 0 100%; max-width: 100%; }

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

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

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

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

/* Utility classes with custom names */
.d-flex1 { display: flex; }
.flex-row1 { flex-direction: row; }
.flex-column1 { flex-direction: column; }
.justify-content-start1 { justify-content: flex-start; }
.justify-content-center1 { justify-content: center; }
.justify-content-end1 { justify-content: flex-end; }
.justify-content-between1 { justify-content: space-between; }
.justify-content-around1 { justify-content: space-around; }
.align-items-start1 { align-items: flex-start; }
.align-items-center1 { align-items: center; }
.align-items-end1 { align-items: flex-end; }