.youtube-thumbnail {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: auto;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background-color: #000;
    overflow: hidden;
}

    .youtube-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
    }

    .youtube-thumbnail .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 64px;
        height: 64px;
        background: url('https://img.icons8.com/ios-filled/100/ffffff/play--v1.png') no-repeat center center;
        background-size: 64px 64px;
        transform: translate(-50%, -50%);
        opacity: 0.8;
        transition: 0.3s;
    }

    .youtube-thumbnail:hover .play-button {
        opacity: 1;
    }
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

        @media (max-width: 767px) {
            #barChartDistrict {
                font-size: 8px; /* Smaller size for mobile */
            }

            #doughnutChart {
                font-size: 8px; /* Smaller size for mobile */
            }

            #barChart {
                font-size: 8px; /* Smaller size for mobile */
            }
        }

        @media (max-width: 767px) {
            .svg-container svg {
                min-height: 300px; /* Lower min-height for mobile */
            }
        }

        .vl-header-action-item-logo {
    float: left;
    padding: 6px;
    border-radius: 4px;
    color: var(--ztc-text-text-1) #fff;
}


.progress-inner-header {
    border-radius: 40px !important;
    background: var(--Main-Color, linear-gradient(90deg, #2E0797 0%, #726EFC 100%)) !important;
}

.chart-container {
    position: relative;
    width: 200px;
    height: 120px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    margin: 2rem;
}

.line {
    position: absolute;
    width: 100%;
    height: 100%;
}

.point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.segment {
    position: absolute;
    height: 2px;
    background: #007bff;
    transform-origin: left center;
}
.language-switcher {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* makes <li> items horizontal */
    gap: 1rem; /* spacing between them */
    position: relative;
    z-index: 10000;
}

    .language-switcher li {
        display: inline-block;
    }


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active 
{
    color: black !important;
}

tbody, td, tfoot, th, thead, tr {
    background-color: white;
}

.cta1-section-area-forabout-ForKC {
    position: relative;
    z-index: 1;
    background-image: url(../img/all-images/bg/service-bg1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}


.three-per-row {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .three-per-row li {
        flex: 0 0 33.33%; /* 3 items per row */
        box-sizing: border-box;
        padding: 10px; /* optional spacing */
    }
@media (max-width: 768px) {
    .three-per-row li {
        flex: 0 0 50%; /* 2 per row */
    }
}

@media (max-width: 480px) {
    .three-per-row li {
        flex: 0 0 100%; /* 1 per row */
    }
}

.two-per-line-responsive {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .two-per-line-responsive li {
        flex: 0 0 50%; /* 2 per row on desktop */
        box-sizing: border-box;
        padding: 10px; /* Optional spacing */
    }

/* Responsive: 1 per line on small screens */
@media (max-width: 600px) {
    .two-per-line-responsive li {
        flex: 0 0 100%;
    }
}

.orignalImage {
    background-image: url(../img/all-images/bg/hero-bg2Old.png) !important;
}


.cta1-section-area .cta-images ul {
    position: absolute;
    top: 60px;
    right: 50px;
}