.ctm-hero-section {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 6rem;
    overflow: hidden;
    background: linear-gradient(to bottom, #e1f2fb, #fefae1);
/*    background: linear-gradient(to bottom, #9bc2ff, #e6b6ff);*/
}

.ctm-hero-container {
    position: relative;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 576px) {
    .ctm-hero-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 992px) {
    .ctm-hero-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.ctm-hero-grid {
    display: grid;
    gap: 3rem;
}

@media (min-width: 992px) {
    .ctm-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ctm-hero-content {
    text-align: center;
}

@media (min-width: 992px) {
    .ctm-hero-content {
        text-align: left;
    }
}

.ctm-hero-heading {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .ctm-hero-heading {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) {
    .ctm-hero-heading {
        font-size: 3rem;
    }
}

.ctm-hero-heading-main {
    color: #111827;
    margin-bottom: 0.5rem;
}

.ctm-hero-heading-gradient {
    background: linear-gradient(to right, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ctm-hero-subheading {
    font-size: 1.25rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
    line-height: 1.75;
}

.ctm-hero-subheading-last {
    margin-bottom: 2rem;
}

.ctm-hero-metrics-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .ctm-hero-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ctm-hero-metric {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .ctm-hero-metric {
        justify-content: flex-start;
    }
}

.ctm-hero-metric-icon {
    background-color: #f0fdf4;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 0.75rem;
}

.ctm-hero-metric-icon-blue {
    background-color: #eff6ff;
}

.ctm-hero-metric-icon-purple {
    background-color: #f5f3ff;
}

.ctm-hero-metric-value {
    font-weight: 700;
    color: #111827;
}

.ctm-hero-metric-label {
    font-size: 0.848rem;
    color: #4b5563;
}

.ctm-hero-visual {
    position: relative;
}

.ctm-hero-visual-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1_TIMEOUT_1);
    padding: 2rem;
    border: 1px solid #e5e7eb;
}

.ctm-hero-image-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.ctm-hero-image {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

.ctm-hero-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.ctm-hero-badge-text {
    font-weight: 600;
    color: #111827;
}

.ctm-hero-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ctm-hero-category-card {
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e5e7eb;
}

    .ctm-hero-category-card:hover {
        background-color: #eff6ff;
        border-color: #bfdbfe;
        transform: scale(1.05);
    }

.ctm-hero-category-icon {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.25rem;
}

    .ctm-hero-category-icon:hover {
        transform: scale(1.1);
    }

.ctm-hero-category-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
}

.ctm-hero-category-card:hover .ctm-hero-category-name {
    color: #2563eb;
}

.ctm-hero-stat {
    position: absolute;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.ctm-hero-stat-top {
    top: -1rem;
    left: -1rem;
}

.ctm-hero-stat-bottom {
    bottom: -1rem;
    right: -1rem;
}

.ctm-hero-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
}

.ctm-hero-stat-value-purple {
    color: #7c3aed;
}

.ctm-hero-stat-label {
    font-size: 0.875rem;
    color: #4b5563;
}

.ctm-hero-visual-bg {
    position: absolute;
    inset: -1rem;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    border-radius: 1rem;
    opacity: 0.1;
    filter: blur(8px);
}

.ctm-text-cyan-600 {
    color: #0891b2;
}

.ctm-bg-gradient-to-br-blue-indigo {
    background: linear-gradient(to bottom right, #1e3a8a, #1e40af, #4f46e5);
}

.ctm-bg-grid-pattern {
    background-image: linear-gradient( to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px ), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.ctm-text-gradient-blue-cyan {
    background: linear-gradient(to right, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}



.ctm-bg-blue-500-20 {
    background-color: rgba(59, 130, 246, 0.2);
    border-color: #60a5fa;
    color: #bfdbfe;
}

.ctm-bg-blue-500 {
    background-color: #3b82f6;
}

.ctm-bg-purple-500 {
    background-color: #8b5cf6;
}

.ctm-bg-green-500 {
    background-color: #22c55e;
}

.ctm-bg-pink-500 {
    background-color: #ec4899;
}

.ctm-bg-orange-500 {
    background-color: #f97316;
}

.ctm-bg-gradient-to-br-blue-cyan {
    background: linear-gradient(to bottom right, #3b82f6, #22d3ee);
}

.ctm-text-blue-200 {
    color: #bfdbfe;
}

.ctm-text-blue-300 {
    color: #93c5fd;
}

.ctm-font-bold {
    font-weight: 700;
}

.ctm-text-5xl {
    font-size: 3.5rem;
}

.ctm-text-6xl {
    font-size: 3.75rem;
}

.ctm-text-xl {
    font-size: 1.25rem;
}

.ctm-text-2xl {
    font-size: 1.5rem;
}

.ctm-leading-tight {
    line-height: 1.2;
}

.ctm-max-w-lg {
    max-width: 32rem;
}

.ctm-w-4 {
    width: 1rem;
}

.ctm-h-4 {
    height: 1rem;
}

.ctm-w-8 {
    width: 2rem;
}

.ctm-h-8 {
    height: 2rem;
}

.ctm-w-16 {
    width: 4rem;
}

.ctm-h-16 {
    height: 4rem;
}

.ctm-w-32 {
    width: 8rem;
}

.ctm-h-32 {
    height: 8rem;
}

.ctm-scale-110 {
    transform: scale(1.1);
}

.ctm-opacity-10 {
    opacity: 0.1;
}

.ctm-opacity-20 {
    opacity: 0.2;
}

.ctm-opacity-40 {
    opacity: 0.4;
}

.ctm-z-10 {
    z-index: 10;
}

.ctm-transition-all {
    transition: all 0.3s;
}

.ctm-bg-white {
    background-color: #ffffff;
}

.ctm-text-gray-900 {
    color: #111827;
}

.ctm-text-gray-600 {
    color: #4b5563;
}

.ctm-text-4xl {
    font-size: 2.25rem;
}

.ctm-max-w-2xl {
    max-width: 42rem;
}

.ctm-from-gray-500 {
    --gradient-from: #6b7280;
}

.ctm-to-gray-600 {
    --gradient-to: #4b5563;
}

.ctm-from-purple-500 {
    --gradient-from: #8b5cf6;
}

.ctm-to-purple-600 {
    --gradient-to: #7c3aed;
}

.ctm-from-blue-500 {
    --gradient-from: #3b82f6;
}

.ctm-to-blue-600 {
    --gradient-to: #2563eb;
}

.ctm-from-green-500 {
    --gradient-from: #22c55e;
}

.ctm-to-green-600 {
    --gradient-to: #16a34a;
}

.ctm-from-pink-500 {
    --gradient-from: #ec4899;
}

.ctm-to-pink-600 {
    --gradient-to: #db2777;
}

.ctm-from-orange-500 {
    --gradient-from: #f97316;
}

.ctm-to-orange-600 {
    --gradient-to: #ea580c;
}

.ctm-bg-gray-50 {
    background-color: #f9fafb !important;
}

.ctm-bg-purple-50 {
    background-color: #faf5ff !important
}

.ctm-bg-blue-50 {
    background-color: #eff6ff !important;
}

.ctm-bg-green-50 {
    background-color: #f0fdf4 !important;
}

.ctm-bg-pink-50 {
    background-color: #fdf2f8 !important;
}

.ctm-bg-orange-50 {
    background-color: #fff7ed !important;
}

.ctm-text-gray-700 {
    color: #374151 !important;
}

.ctm-text-purple-700 {
    color: #6d28d9 !important
}

.ctm-text-blue-700 {
    color: #1d4ed8 !important;
}

.ctm-text-green-700 {
    color: #15803d !important;
}

.ctm-text-pink-700 {
    color: #be185d !important;
}

.ctm-text-orange-700 {
    color: #c2410c !important
}

.ctm-bg-gradient-to-r {
    background: linear-gradient( to right, var(--gradient-from), var(--gradient-to) );
}

.ctm-text-lg {
    font-size: 1.125rem;
}

.ctm-w-6 {
    width: 1.5rem;
}

.ctm-h-6 {
    height: 1.5rem;
}

.ctm-hover-shadow-xl {
    transition: box-shadow 0.3s;
}

    .ctm-hover-shadow-xl:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

.ctm-hover-translate-y-2 {
    transition: transform 0.3s;
}

    .ctm-hover-translate-y-2:hover {
        transform: translateY(-0.5rem);
    }

.ctm-hover-opacity-90:hover {
    opacity: 0.9;
}

.ctm-group-hover-translate-x-1 {
    transition: transform 0.3s;
}

.group:hover .ctm-group-hover-translate-x-1 {
    transform: translateX(0.25rem);
}

.ctm-nav-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 6px;
    padding: 5px;
    background-color: rgb( 238 239 241 );
    gap: 0.25rem;
}

.ctm-nav-link {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    text-align: center;
    color: #6b7280;
    background-color: rgb(238 239 241);
    border: 1px solid #dee2e6;
    transition: all 0.2s;
    flex: 1 1 auto;
    min-width: 100px;
}

    .ctm-nav-link.active {
        background-color: #ffffff;
        border-bottom-color: transparent;
    }

    .ctm-nav-link:hover {
        background-color: #e5e7eb;
    }

.ctm-card {
    border: none;
    border-radius: 0.375rem;
    padding: 1rem;
}

.ctm-card-header {
    /* padding-bottom: 0.75rem; */
    background-color: transparent;
}

.ctm-card-title {
    margin-top: 1rem;
    font-weight: 500;
}

.ctm-card-text {
    margin-bottom: 0;
}

.ctm-card-body {
    padding-top: 0;
}

.ctm-card-content {
    text-align: center;
}

.ctm-text-blue-600 {
    color: #2563eb;
}

.ctm-text-purple-600 {
    color: #7c3aed;
}

.ctm-text-green-600 {
    color: #16a34a;
}

.ctm-text-orange-600 {
    color: #ea580c;
}

.ctm-text-pink-600 {
    color: #db2777;
}

.ctm-text-indigo-600 {
    color: #4f46e5 !important;
}

.ctm-bg-indigo-600 {
    background-color: #2196F3;
}

.ctm-bg-indigo-50 {
    background-color: #eef2ff !important;
}

.ctm-max-w-3xl {
    max-width: 48rem;
}

.ctm-max-w-6xl {
    max-width: 72rem;
}

.ctm-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ctm-transition-shadow {
    transition: box-shadow 0.3s;
}

.ctm-leading-relaxed {
    line-height: 1.625;
}

.ctm-rounded-full {
    border-radius: 9999px;
}

.ctm-text-gray-500 {
    color: #6b7280;
}

.ctm-text-yellow-500 {
    color: #eab308;
}

.ctm-text-gray-400 {
    color: #9ca3af;
}

.ctm-text-orange-500 {
    color: #f97316;
}

.ctm-from-yellow-400 {
    --gradient-from: #facc15;
}

.ctm-to-yellow-500 {
    --gradient-to: #eab308;
}

.ctm-from-gray-300 {
    --gradient-from: #d1d5db;
}

.ctm-to-gray-400 {
    --gradient-to: #9ca3af;
}

.ctm-from-orange-400 {
    --gradient-from: #fb923c;
}

.ctm-to-orange-500 {
    --gradient-to: #f97316;
}

.ctm-from-blue-400 {
    --gradient-from: #60a5fa;
}

.ctm-to-blue-500 {
    --gradient-to: #3b82f6;
}

.ctm-from-blue-500-tm {
    --gradient-from: #3b82f6;
}

.ctm-to-purple-500 {
    --gradient-to: #8b5cf6;
}

.ctm-from-blue-50 {
    --gradient-from: #eff6ff;
}

.ctm-to-purple-50 {
    --gradient-to: #faf5ff;
}

.ctm-bg-green-100 {
    background-color: #dcfce7;
}

.ctm-border-green-200 {
    border-color: #bbf7d0;
}

.ctm-w-5 {
    width: 1.25rem;
}

.ctm-h-5 {
    height: 1.25rem;
}

.ctm-w-10 {
    width: 2.5rem;
}

.ctm-h-10 {
    height: 2.5rem;
}

.ctm-font-semibold {
    font-weight: 600;
}

.ctm-text-sm {
    font-size: 0.875rem;
}

.ctm-hover-shadow-md {
    transition: box-shadow 0.3s;
}

    .ctm-hover-shadow-md:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

.ctm-rounded-lg {
    border-radius: 0.5rem;
}

.ctm-space-y-3 > * + * {
    margin-top: 0.75rem;
}

.ctm-card-lb {
    border: none;
    border-radius: 0.375rem;
    padding: 1rem;
    background-color: #ffffff;
}

.ctm-card-header-lb {
    padding-bottom: 1rem;
}

.ctm-card-title-lb {
    margin-bottom: 0;
    font-weight: 600;
}

.ctm-card-content-lb {
    padding: 1rem 0;
}

.ctm-select-trigger {
    width: 16rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #ffffff;
    color: #111827;
}

.ctm-leaderboard-item {
    min-height: 4rem;
}

.ctm-rank-box {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.875rem;
}

.ctm-bg-white-tm {
    background-color: #ffffff !important;
}

.ctm-text-gray-900-tm {
    color: #111827;
}

.ctm-text-gray-700-tm {
    color: #374151;
}

.ctm-text-gray-500-tm {
    color: #6b7280;
}

.ctm-text-blue-600-tm {
    color: #2563eb;
}

.ctm-text-blue-700-tm {
    color: #1d4ed8;
}

.ctm-text-yellow-400-tm {
    color: #facc15;
}

.ctm-bg-blue-50-tm {
    background-color: #eff6ff;
}

.ctm-bg-green-100-tm {
    background-color: #dcfce7;
}

.ctm-text-green-700-tm {
    color: #15803d;
}

.ctm-border-green-200-tm {
    border-color: #bbf7d0;
}

.ctm-text-2xl-tm {
    font-size: 1.5rem;
}

.ctm-text-sm-tm {
    font-size: 0.875rem;
}

.ctm-font-bold-tm {
    font-weight: 700;
}

.ctm-font-semibold-tm {
    font-weight: 600;
}

.ctm-font-medium-tm {
    font-weight: 500;
}

.ctm-w-6-tm {
    width: 1.5rem;
}

.ctm-h-6-tm {
    height: 1.5rem;
}

.ctm-w-4-tm {
    width: 1rem;
}

.ctm-h-4-tm {
    height: 1rem;
}

.ctm-w-12-tm {
    width: 3rem;
    min-width: 3rem
}

.ctm-h-12-tm {
    height: 3rem;
}

.ctm-shadow-lg-tm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ctm-bg-gradient-to-r-tm {
    background: linear-gradient( to right, var(--gradient-from), var(--gradient-to) ) !important;
}

.ctm-to-purple-500-tm {
    --gradient-to: #8b5cf6;
}

.ctm-rounded-full-tm {
    border-radius: 9999px;
}

.ctm-rounded-lg-tm {
    border-radius: 0.5rem;
}

.ctm-space-y-6-tm > * + * {
    margin-top: 1.5rem;
}

.ctm-border-l-4-tm {
    border-left-width: 4px;
}

.ctm-border-blue-500-tm {
    border-color: #3b82f6;
}

.ctm-italic-tm {
    font-style: italic;
}

.ctm-card-tm {
    border: none;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background-color: #ffffff !important;
}

.ctm-card-content-tm {
    padding: 0;
}

.ctm-testimonial-item-tm {
    background: inherit !important;
}

.ctm-badge-outline-tm {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #4b5563;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.ctm-bg-white-95-fl-wd {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}

.ctm-bg-blue-600-fl-wd {
    background-color: #2563eb;
}

.ctm-bg-blue-700-fl-wd {
    background-color: #1d4ed8;
}

.ctm-from-blue-600-fl-wd {
    --gradient-from: #2563eb;
}

.ctm-to-purple-600-fl-wd {
    --gradient-to: #7c3aed;
}

.ctm-from-blue-700-fl-wd {
    --gradient-from: #1d4ed8;
}

.ctm-to-purple-700-fl-wd {
    --gradient-to: #6d28d9;
}

.ctm-bg-gradient-to-r-fl-wd {
    background: linear-gradient( to right, var(--gradient-from), var(--gradient-to) ) !important;
}

.ctm-space-y-3-fl-wd > * + * {
    margin-top: 0.75rem;
}

.ctm-shadow-xl-fl-wd {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ctm-shadow-lg-fl-wd {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ctm-hover-shadow-xl-fl-wd:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ctm-transition-all-fl-wd {
    transition: all 0.3s;
}

.ctm-card-fl-wd {
    border: none;
    border-radius: 0.375rem;
    background-color: transparent !important;
}

.ctm-card-body-fl-wd {
    padding: 1rem;
}

.ctm-w-4-fl-wd {
    width: 1rem;
}

.ctm-h-4-fl-wd {
    height: 1rem;
}

.ctm-w-6-fl-wd {
    width: 1.5rem;
}

.ctm-h-6-fl-wd {
    height: 1.5rem;
}

.ctm-badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    leader text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}