/* Responsive Design for TN Section */
@media (max-width: 1400px) {
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .tn-stat-card {
        align-items: flex-start;
        row-gap: 10px;
    }

    .counter-number {
        font-size: 50px;
    }

    .cs_nav .cs_nav_list>li>a {
        font-size: 16px;
    }

    .cs_nav .cs_nav_list>li {
        margin-right: 20px;
    }
}

@media (max-width: 1200px) {
    .tn-responsive-grid {
        grid-template-columns: 1fr;
    }

    .tn-text-padding {
        padding: 40px;
    }

    .tn-chart-padding {
        padding: 40px;
    }

    .tn-title-responsive {
        font-size: 36px;
    }

    .district-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .sectorial-container {
        border-right: 0px solid #EBEDF3;
        padding-right: 0px;
        margin-right: 0px;
    }

    .climate-container {
        padding-right: 25px;
        margin-right: 25px;
    }

    .key-feature-container {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 10px;
        margin-top: 40px;
    }

    .key-feature-container h4 {
        font-size: 26px;
        font-weight: 700;
        color: #191919;
        margin-bottom: 20px;
        margin-right: 0px;
    }

    .custom-category-tabs .nav-tabs .nav-link {
        font-size: 16px;
        width: 180px;
    }

    .custom-category-tabs .nav-tabs .nav-link.active {
        font-size: 16px !important;
    }

    .counter-number {
        font-size: 40px;
    }

    .counter-row-gap {
        row-gap: 36px;
    }


    .ghg-stat-number {
        font-size: 60px !important;
    }

    .ghg-video-container {
        display: none;
    }

    .new-ghg {
        display: block;
    }

    .section-991-hide {
        display: none;
    }

    .ghg-light-side {
        padding-right: 10px;
    }

    .ghg-header,
    .ghg-stats-grid {
        max-width: 925px !important;
    }

    .mitigation-table td {
        min-width: 180px;

    }

    .coming-soon-section-inner {
        height: 600px !important;
        padding: 120px 30px 40px;
    }

    .coming-soon-section {
        min-height: auto !important;
        background-position: center 80px;
    }

    .cus-toggle-tab {
        position: relative;
        right: 10px;
        top: 0px;
    }

    .tabs-ul {
        background-color: transparent !important;
        display: flex;
        flex-wrap: wrap;
        width: auto;
    }

    .forcastBx {
        width: auto;
        margin-top: 20px;
    }

    .ul-min-height-fix,
    .cus-bold,
    .cus-green-txt,
    .cs_hero_text.slider-bg-bx ul li {
        font-size: 20px;
    }

    .cs_hero_text.slider-bg-bx ul li {
        margin-bottom: 20px;
    }

    .radial-item {
        width: 50%;
        text-align: center;
    }

    .tn-chart-padding-two-card .tn-chart-size {
        min-height: 480px;
    }

    .tn-chart-padding-two-card .sustainable-mobility-chart {
        min-height: 138px;
    }

    .tn-stat-card {
        flex-direction: column;
    }

    .cs_site_header.cs_style_1:not(.cs_heading_color) .cs_nav_list>li>a {
        color: #fff !important;
    }

    .cs_menu_toggle.cs_toggle_active span:before,
    .cs_menu_toggle.cs_toggle_active span:after {
        background-color: #fff;
    }

    .cs_footer_inside_col {
        gap: 0px 20px;
    }

    .new-ghg-number-section {
        margin-bottom: 20px;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        flex-flow: wrap;
        justify-content: center;
    }

    .footer-br {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .homepage-banner {
        height: auto;
    }
}

@media (max-width: 991px) {
    .tn-text-padding {
        padding: 40px 0;
        min-height: auto;
    }

    .tn-chart-padding {
        padding: 40px;
        min-height: auto;
    }

    .tn-title-responsive {
        font-size: 36px;
    }

    .tn-glance-section .row {
        min-height: auto;
    }

    .cards-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .tamilnadu-section:before {
        content: "";
        width: 100%;
    }

    .tn-chart-padding {
        position: relative;
    }

    .state-overview-section .description {
        margin-bottom: 35px;
    }

    .legend {
        padding-bottom: 20px;
    }

    .cus-row-gap {
        row-gap: 40px;
    }

    .district-container {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
    }

    .overview-container {
        border-right: 0px solid #EBEDF3;
        padding-right: 0px;
        margin-right: 0px;
    }

    .custom-category-tabs .nav-tabs .nav-link {
        width: auto;
    }

    .tn-chart-size {
        margin-bottom: 20px;
    }

    .ghg-header,
    .ghg-stats-grid {
        max-width: 680px !important;
    }

    .tn-chart-padding-two-card .tn-chart-size {
        min-height: auto;
    }

    #perCapitaConsumptionChart2025 .apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom {
        top: 437px !important;
    }

    .government-of-tamil-nadu-image {
        margin: auto;
    }

    .cus-group {
        flex-direction: column;
    }

    .cs_footer_inside_col {
        gap: 40px 0px;
        flex-wrap: wrap;
        width: 100%;
    }

    .cs_footer_widget.address-col {
        min-width: auto;
    }
}


@media (max-width: 768px) {

    .tn-chart-padding {
        padding: 30px 20px;
    }

    .tn-title-responsive {
        font-size: 28px;
    }

    .tn-chart-size {
        width: '100%';
        height: auto;
    }

    .tn-legend-container {
        max-width: 250px;
    }

    .tn-text-padding {
        padding: 50px 0px 30px;
    }

    .radial-item {
        width: 50%;
    }

    .custom-category-tabs .nav-tabs .nav-link {
        height: 45px !important;
    }

    .climate-br {
        display: none;
    }

    .tabs-ul {
        margin: 30px auto;
    }

    .counter-title {
        font-size: 16px;
    }

    .population-perc {
        font-size: 15px;
    }

    span.home-br {
        display: none;
    }

    .ghg-header,
    .ghg-stats-grid {
        max-width: 500px !important;
    }

    .ghg-stat-number {
        font-size: 50px !important;
    }

    .ghg-emissions-section .row,
    .ghg-emissions-section {
        min-height: 470px !important;
    }


    .forcastBx {
        gap: 5px;
    }

    .climate-container {
        padding-right: 0px;
        margin-right: 0px;
    }

    .tabs-ul button {
        padding: 6px 15px 4px;
    }

    .cs_fs_70 {
        font-size: 30px;
    }

    .cs_fs_51 {
        font-size: 36px;
    }

    .cs_footer_inside_col {
        gap: 0px 10px;
        flex-wrap: wrap;
    }

    .cs_footer_widget.address-col {
        min-width: auto;
    }

    .dropdown-toggle.year-select {
        font-size: 12px;
        padding: 2px 30px 2px 12px;
    }

    .dropdown-toggle.year-select::after {
        right: 8px;
    }

    .dropdown-menu {
        font-size: 12px;
    }

    .dropdown-item {
        padding: 4px 12px;
    }
}

@media screen and (max-width: 575px) {
    a.cs_site_branding {
        width: 45px;
    }

    .cs_nav .cs_nav_list>li>a {
        font-size: 16px;
        line-height: normal;
    }

    .mobile-section-and-download-header {
        margin: 15px auto !important;
    }

    .stat-item h2 {
        font-size: 20px;
    }

    .stat-item p {
        font-size: 12px;
    }

    section {
        padding: 25px 0;
    }

    .toggle-section {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }

    .form-switch {
        padding-left: 0;
    }

    .toggle-section.urban-rural {
        padding-top: 20px;
    }

    .section-title {
        font-size: 20px;
        margin-top: 10px;
    }

    .cus-flex-row {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .tn-stat-subtitle {
        padding-left: 0px;
    }

    .tn-stat-label {
        font-size: 16px;
        text-align: left;
        line-height: normal;
    }

    .toggle-section.sectoral-gva {
        display: flex;
        padding-top: 20px;
    }

    .toggle-section.sectoral-gva.section-and-download-header {
        padding: 20px 0 30px;
    }

    .cs_fs_51 {
        font-size: 32px;
    }

    .key-feature-container span {
        font-size: 16px;
        line-height: normal;
    }

    .custom-category-tabs .nav-tabs .nav-link {
        width: auto;
        height: 34px !important;
        font-size: 14px !important;
    }

    body {
        font-size: 16px;
    }

    .year-select.seperate-style {
        padding: 3px 25px 5px 13px;
        margin-top: -4px;
    }

    .year-select {
        background-position: right 8px center;
    }

    .tn-chart-title {
        font-size: 14px;
    }

    .climate-note {
        font-size: 18px;
    }

    .climate-note-wrapper {
        padding: 12px 18px;
    }

    .counter-number {
        font-size: 26px;
    }

    .counter-subtitle {
        font-size: 14px;
    }

    .cs_fs_28 {
        font-size: 24px;
    }

    .blue-heading {
        font-size: 18px;
    }

    .cs_iconbox.cs_style_6 {
        padding: 1px 23px 25px 23px;
        margin-top: 40px;
    }

    .cs_gap_y_40 {
        gap: 30px 0;
    }

    .cs_iconbox.cs_style_6 .cs_iconbox_icon {
        height: 70px;
        width: 70px;
        padding: 19px;
    }

    .key-industry-card {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .key-industries-gap {
        gap: 30px 0;
    }

    .progress-bar-wrapper {
        height: 30px;
    }

    .progress-bar {
        height: 30px;
    }

    .ev-vehicle-wrapper {
        margin-top: 15px;
    }

    .profile-section-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .profile-metric-value {
        font-size: 22px;
    }

    .profile-metric-label {
        font-size: 16px;
        line-height: normal;
    }

    .ice-vehicle {
        width: 32px;
    }

    .profile-content {
        padding: 20px 15px 25px;
    }

    .ghg-stats-grid {
        display: flex !important;
        width: 100%;
        flex-direction: column;
    }

    .ghg-light-side {
        padding-right: 0px !important;
    }

    .ghg-emissions-section .row {
        min-height: auto !important;
        padding: 40px 0;
        background: #111111;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .ghg-stat-number {
        font-size: 24px !important;
    }

    .ghg-stat-label {
        font-size: 16px;
    }

    .GHG-Emissions-mb-0 {
        margin-bottom: 0px !important;
    }

    .download-btn-absolute {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem !important;
    }

    .cus-radio-button-container .form-check-inline {
        padding: 5px 7px 0;
        font-size: 16px;
    }

    .profile-metric-row {
        gap: 25px !important;
        margin-bottom: 25px !important;
        flex-direction: column;
    }

    .profile-metric-value {
        font-size: 20px !important;
    }

    .profile-metric-label {
        font-size: 16px !important;
        padding-top: 0px !important;
    }

    .profile-content {
        padding: 20px 20px 20px !important;
    }

    .mitigation-table th {
        font-size: 14px;
    }

    .section-title {
        font-size: 18px !important;
    }

    .mitigation-table td {
        font-size: 14px;
        padding: 5px 5px;
    }

    .mitigation-activity {
        font-size: 14px !important;
    }

    .mitigation-number {
        font-size: 16px !important;
    }

    .cs_mb_40 {
        margin-bottom: 30px;
    }

    .coming-soon-title {
        font-size: 40px;
    }

    .coming-soon-description {
        font-size: 15px;
    }

    .coming-soon-section-inner {
        height: 500px !important;
        min-height: auto;
    }

    .cs_hero.cs_style_3 {
        min-height: auto;
    }

    .cs_fs_70 {
        font-size: 30px;
        line-height: normal;
        margin-bottom: 20px;
    }

    .cs_hero.cs_style_3 .cs_hero_subtitle {
        line-height: normal;
    }

    .coming-soon-section {
        min-height: auto !important;
        background-position: 100% 0px;
    }

    .contact-us {
        height: 300px;
        padding: 100px 0 20px;
    }

    .cs_hero_text.slider-bg-bx ul li {
        padding-left: 0px;
    }

    .slick-slide img {
        display: block;
        margin-bottom: 10px;
    }

    .cs_hero_text.slider-bg-bx {
        padding: 20px;
    }

    .ul-min-height-fix,
    .cus-bold,
    .cus-green-txt,
    .cs_hero_text.slider-bg-bx ul li {
        font-size: 14px;
        line-height: normal;
    }

    .ul-min-height-fix {
        min-height: auto;
    }

    .initiatives-icon {
        position: relative;
        content: "";
    }

    .cs_hero_text.slider-bg-bx ul li ul li:after {
        content: "";
        width: 6px;
        height: 6px;
        left: 0;
        top: 8px;
    }

    .cs_hero_text.slider-bg-bx ul li ul li {
        padding-left: 15px;
        margin-bottom: 10px;
    }

    .tabs-ul button {
        padding: 3px 12px 3px;
        height: auto !important;
        font-size: 14px;
    }

    .tabs-ul {
        margin: 15px auto;
    }

    .tn-chart-size {
        width: 100%;
    }

    .leaf-right {
        width: 56px;
    }

    .leaf-left {
        width: 58px;
    }

    .nav-tabs-radio {
        margin: 15px auto;
        border: 0;
        margin-bottom: 15px;
    }

    .climate-note-wrapper {
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .climate-note {
        font-size: 14px;
    }

    .climate-note-heading,
    .cs_fs_51 {
        font-size: 24px;
    }

    .energy-snapshot-row {
        gap: 20px 0px;
        margin-top: 20px;
    }

    .key-feature-container span {
        padding-left: 30px;
    }

    .key-feature-container img {
        width: 20px;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .forcastBx {
        flex-direction: column;
    }

    .card {
        margin-bottom: 20px;
    }

    .cards-container {
        row-gap: 5px;
    }

    .district-container .body h4 {
        font-size: 18px;
    }

    .district-container .body h4 span {
        font-size: 16px;
        margin-left: 4px;
    }

    .each-item-main-section {
        margin-bottom: 15px;
    }

    .district-container .body {
        padding: 0px 0px 0;
    }

    .apexcharts-legend {
        top: initial !important;
        bottom: 0;
    }

    .ghg-percentage {
        font-size: 20px;
    }

    .table-container {
        margin-bottom: 20px;
    }

    g.apexcharts-datalabels text {
        font-size: 10px;
    }

    .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center,
    .apexcharts-legend.apx-legend-position-top.apexcharts-align-center {
        justify-content: flex-start !important;
        align-items: center !important;
    }

    span.apexcharts-legend-marker svg {
        height: 16px !important;
        width: 16px !important;
    }

    #powerGenerationChart2025 .apexcharts-legend-series {
        width: 50%;
        margin: 10px 0px !important;
    }

    .forcastInner {
        display: flex;
        gap: 5px;
        align-items: flex-start;
        flex-direction: column;
    }

    .forcastBx {
        gap: 10px;
    }

    .cs_fs_21 {
        font-size: 14px;
    }

    .cs_fs_70 {
        font-size: 18px;
    }

    .cs_height_lg_40 {
        height: 15px;
    }

    .ur-values .value {
        font-size: 12px;
    }

    .ur-values .percent {
        font-size: 12px;
    }

    .stat-row {
        margin-bottom: 15px;
    }

    .ur-label {
        font-size: 12px;
    }

    .tabs-ul button.nav-link {
        font-size: 12px;
    }

    .forcastBx {
        padding: 15px 15px;
    }

    .forcast-details h4 {
        font-size: 20px;
        margin-bottom: 0px;
    }

    .forcast-title {
        font-size: 14px;
    }

    .tn-header-section {
        margin-bottom: 20px;
    }

    .tn-stat-card {
        padding: 15px;
    }

    .tn-stat-number {
        font-size: 20px;
    }

    .explore-district-wrapper {
        align-items: flex-end;
        justify-content: space-between;
        gap: 0px 10px;
    }

    .explore-district-inside-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }

    .district-container {
        margin-top: 30px;
    }

    .green-star-image {
        width: 22px;
    }

    .each-item-main-section {
        gap: 10px;
        margin-bottom: 15px;
    }

    .each-item-section .rural {
        font-size: 20px;
        margin-left: 20px;
    }

    .each-item-section .urban {
        font-size: 20px;
    }

    .key-feature-container h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .cs_footer_inside_col .cs_footer_col {
        width: 100%;
    }

    .cs_footer_inside_col {
        flex-wrap: wrap;
        gap: 20px 0px;
    }

    .footer-logo {
        width: 95%;
    }

    .cs_footer_row {
        padding: 30px 0;
        gap: 30px 40px;
    }

    .cs_footer_text_widget p {
        font-size: 14px;
    }

    .cs_footer_widget_title.cs_fs_21 {
        margin-bottom: 15px;
    }

    .cs_footer_widget_menu {
        font-size: 14px;
    }

    .cs_footer_widget_menu li {
        margin-bottom: 6px;
    }

    .cs_copyright {
        font-size: 11px;
    }

    .cs_footer_widget_menu li:not(:last-child) {
        margin-bottom: 0px;
    }

    .cs_footer_bottom_in {
        padding: 12px 0;
    }

    .cs_page_heading {
        height: 300px;
    }

    .counter-title {
        font-size: 14px;
    }

    .population-perc {
        font-size: 14px;
    }

    .cs_gray_bg_2:before {
        width: 80px;
        height: 126px;
    }

    .cs_gray_bg_2:after {
        width: 80px;
        height: 126px;
    }

    .water-waste-section::before,
    .tamil-nadu-initiatives::before,
    .ecology-land-resources-section::before,
    .energy-section::before,
    .gredient-bg-green-top-bottom::before,
    .proportional-section::before,
    .climate-projection-section::before,
    .faq-section::before {
        width: 80px;
        height: 126px;
    }

    .water-waste-section:after,
    .tamil-nadu-initiatives:after,
    .ecology-land-resources-section:after,
    .energy-section:after,
    .gredient-bg-green-top-bottom:after,
    .proportional-section:after,
    .climate-projection-section:after,
    .faq-section:after {
        width: 80px;
        height: 126px;
    }

    .cs_height_lg_50 {
        height: 20px;
    }

    .cs_fs_28 {
        font-size: 20px;
    }

    .cs_mb_24 {
        margin-bottom: 15px;
    }

    #landUseChart {
        max-width: 300px !important;
        max-height: 300px !important;
        margin: 0 auto;
    }

    .industry-title {
        font-size: 18px;
    }

    .industry-icon-wrapper {
        margin-bottom: 10px;
    }

    .tn-chart-title span {
        font-size: 14px;
    }

    .cus-row-gap {
        row-gap: 20px;
    }

    /* Make Highcharts data labels (percentages outside arcs) smaller on mobile */
    .highcharts-data-label text,
    .highcharts-data-labels text {
        font-size: 10px !important;
    }

    /* Specific chart data labels for pie and donut charts */
    #landUseChart .highcharts-data-label text,
    #electricVehiclepieChart .highcharts-data-label text,
    #electricityDonutChart .highcharts-data-label text,
    #biomassDonutChart .highcharts-data-label text {
        font-size: 9px !important;
        font-weight: bold !important;
    }

    .highcharts-title {
        display: none !important;
    }

    .slider-heading {
        font-size: 20px;
    }

    .cs_accordian_body p {
        font-size: 14px;
    }

    .district-stat-wrapper {
        align-items: flex-start;
    }

    .government-of-tamil-nadu-image {
        width: 100%;
    }

    .para-text {
        font-size: 14px;
    }

    .cs_fs_18 {
        font-size: 14px;
    }

    .new-ghg-stat-box {
        width: auto;
    }

    .key-industries-section:before,
    .economy-wide-section:before {
        content: "";
        width: 77px;
        height: 120px;
    }
}