@media screen and (max-width: 2560.99px) {
    .team-u-video {
        height: 63vh !important;
    }
    #mapImage {
        height: 400px !important;
    }
}
@media screen and (max-width: 1440.99px) {
    .team-u-video {
        height: 60vh !important;
    }
    .modal-body {
        height: 80vh !important;
        overflow-y: scroll;
    }
    #mapImage {
        height: 200px !important;
    }
}
@media screen and (max-width: 1025.99px) {
    .donut-chart {
        flex-direction: column;
        overflow-y: auto;
    }

    .chart-labels {
        width: 100%;
        height: max-content !important;
    }

    .help-card {
        height: 270px !important;
    }
}

@media screen and (max-width: 1000px) {
    html {
        font-size: 58%;
    }

    .highlights-cards > .card {
        height: 350px !important;
    }

    .help-card {
        height: 290px !important;
    }

    .click-logo {
        width: 220px;
        height: 100px;
    }

    .message {
        line-height: 30px !important;
    }

    .utube-video {
        width: 100%;
    }

    .opportunity-main {
        margin-top: 70px !important;
    }
    .department-cards-wrapper > .row > div {
        width: 25% !important;
    }
}

@media screen and (max-width: 950px) {
    .help-section {
        height: 64vh !important;
    }
}
@media screen and (max-width: 800px) {
    .help-section {
        height: 75vh !important;
    }
}

@media screen and (max-width: 800px) {
    html {
        font-size: 56%;
    }

    .map-wrapper {
        margin-top: 70px !important;
    }

    .rounded-map-img {
        width: 400px !important;
        height: 400px !important;
    }

    .main-map-bg {
        height: 600px !important;
    }

    .highlights-cards > .card {
        height: 300px !important;
    }

    .help-card {
        height: 250px !important;
    }

    .opportunity-main {
        margin-top: 50px !important;
    }
}
@media screen and (max-width: 767px) {
    .catalog-search {
        margin-right: 8.1vw !important;
    }
}

@media screen and (max-width: 768.99px) {
    html {
        font-size: 53%;
    }

    .form-action {
        margin-left: 0px;
    }

    .highlights-cards > .card {
        height: 450px !important;
        margin-bottom: 3rem;
        flex: 0 0 93% !important;
    }

    .message-wrapper {
        display: flex;
        justify-content: center;
    }

    .utube-video {
        width: 100%;
    }

    .main-video,
    .tutorial-plyalist {
        width: 97% !important;
    }

    #map {
        height: 400px !important;
    }

    .invest-wrapper {
        padding: 70px 0px !important;
    }

    .opportunity-main {
        margin-top: 50px !important;
    }

    .modal-body {
        height: 400px !important;
        overflow-y: scroll;
    }
    .chatbox-main .accordion {
        height: 264px !important;
    }
    .chart-card {
        height: 500px !important;
    }
    .catelog-table-title1,
    .departments-cards-title1 {
        text-align: center;
        padding-left: 0px !important;
    }
    .department-cards-wrapper .card {
        min-height: 80px !important;
    }
    .department-cards-wrapper > .row > div {
        width: 50% !important;
    }
    .dt-layout-full {
        height: 600px !important;
    }
    .search-col {
        width: 35% !important;
    }
}
@media screen and (max-width: 769px) {
    #textile {
        flex-direction: column-reverse;
    }
    #Energy {
        flex-direction: column-reverse;
    }
    #education {
        flex-direction: column-reverse;
    }
    .open-button > svg {
        left: 20%;
        bottom: 35%;
    }
    .social-icons-wrapper {
        right: 17px !important;
        bottom: 85px !important;
    }
}
@media screen and (max-width: 576px) {
    .sm-logo {
        display: none !important;
    }

    footer {
        padding: 5px;
    }

    .footer-logo {
        margin-left: -10px;
    }

    .mapZoom-btns {
        margin-top: 20px;
    }

    .newsletter-btn {
        font-size: 15px !important;
    }

    .banner-btn span,
    .newsletter-btn span,
    .social-icons-wrapper {
        display: none;
    }

    .banner-btn {
        width: max-content !important;
    }

    .banner-btn:hover,
    .newsletter-btn {
        transition: none !important;
        width: max-content !important;
        padding: 6px 10px !important;
    }

    .help-card {
        height: 200px !important;
    }

    .card a img {
        height: 40px !important;
    }

    .help-section {
        height: 60vh !important;
    }

    .banner {
        padding: 200px 0px 300px 0px !important;
    }

    .utube-video {
        width: 100%;
    }

    .modal-dialog {
        max-width: 98% !important;
        top: 10% !important;
    }

    #mapImage {
        height: 170px !important;
    }

    .dropdown-container {
        margin-left: 0px !important;
    }

    .map-wrapper {
        margin-top: 120px !important;
    }

    .rounded-map-img {
        width: 220px !important;
        height: 220px !important;
    }

    .main-map-bg {
        height: 350px !important;
    }

    .tutorial-video {
        height: 300px !important;
    }

    .tutorial-video > iframe {
        height: 80% !important;
    }

    .helpfull-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .opportunity-main {
        margin-top: 50px !important;
    }

    .chart-card > .col-12 canvas {
        height: 60% !important;
        width: 95% !important;
    }

    #map {
        height: 250px !important;
    }

    .slick-initialized .slick-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-border {
        width: 2px;
        background: #9b9c9b;
        height: 40px;
        display: block !important;
        margin-left: 7px;
    }
    .opp-elements {
        padding-inline: 20px !important;
    }
    .cataloge-page .catelog-table {
        width: 100% !important;
    }
    .cataloge-page .catelog-table td {
        padding: 2px 3px !important;
    }
    .cataloge-page .catelog-table .type-select {
        padding: 10px 0px 10px 2px !important;
    }
    #myTable th:first-child,
    #myTable td:first-child {
        width: 30px !important; /* Force the width */
        max-width: 30px !important; /* Prevent the column from growing */ /* Hide any overflowing content */ /* Prevent text wrapping */
        text-align: center !important;
    }
    .open-button > svg {
        left: 15%;
        bottom: 43%;
    }
    .catalog-search {
        margin-right: -4.9vw !important;
    }
    .search-col {
        width: 50% !important;
    }
}
@media screen and (max-width: 450px) {
    .banner-content,
    .banner-btns,
    .form-action {
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .hero-title,
    .sub-title-hero {
        text-align: center;
    }

    .banner-btns .btn,
    .newsletter-btn,
    .form-action > input {
        width: 100% !important;
    }

    .form-action > input {
        margin-bottom: 15px;
    }

    .invest-btn {
        padding: 8px 60px !important;
    }

    .learn-more-btn {
        padding: 8px 75px !important;
    }

    .disclaimer,
    .copyright {
        text-align: center;
    }

    .highlights-cards > .card {
        height: calc(350px - 20px) !important;
    }

    .explore-btn {
        font-size: calc(var(--sub-title-font-size) - 0.5rem) !important;
        height: 45px !important;
    }

    .opp-wrapper {
        height: 30vh !important;
    }

    .opp-title {
        top: 28% !important;
    }

    .click-logo {
        width: 130px;
        height: 60px;
    }

    .sindh-logo {
        width: 5.4rem;
        height: calc(5.35rem + 1rem);
    }

    .footer-logo {
        width: 160px;
    }

    .dropdown-content {
        width: 86% !important;
        min-width: 80vw !important;
        border: 1px solid #ddd;
        max-height: max-content;
        overflow-y: scroll !important;
        justify-content: start !important;
    }

    .dropdown-content label {
        align-items: start !important;
        text-wrap: wrap !important;
    }

    .opportunity-main {
        margin-top: 50px !important;
    }
    .utube-video {
        height: 100% !important;
    }
}

@media (max-width: 991px) {
    .tab-content > .tab-pane {
        display: block;
        opacity: 1;
    }
}

@media (max-width: 361px) {
    .banner-content {
        top: 10% !important;
    }

    .opportunity-main {
        margin-top: 50px !important;
    }
}
@media (max-width: 769px) {
    .opportunity-main .opp-elements,
    .opportunity-main .opp-img-container {
        width: 100% !important;
    }
    .opportunity-main .opp-elements {
        padding-bottom: 1rem !important;
    }
}
@media (max-width: 982px) {
    .glance-card-wrapper > div {
        width: 50% !important;
    }
}
@media (max-width: 982px) {
    .glance-card-wrapper > div {
        width: 100% !important;
        padding-left: 20vw !important;
    }
}
@media (max-width: 500px) {
    .glance-card-wrapper > div {
        width: 100% !important;
        padding-left: 0vw !important;
    }
    .search-col {
        width: 70% !important;
    }
    .my-tooltip .my-tooltiptext {
        padding: 4.6px 9px;
        font-size: calc(var(--header-font-size) - 1.1rem) !important;
        }
}
@media (max-width: 425px) {
    .glance-card-wrapper > div {
        width: 100% !important;
        /* padding-left: 14vw !important; */
    }
}
@media (max-width: 450px) {
    .department-card-title {
        font-size: 2rem !important;
    }
}
@media (max-width: 380px) {
    .glance-card-wrapper > div {
        width: 100% !important;
        padding-left: 0vw !important;
    }
    .catalog-search {
        margin-right: -7.9vw !important;
    }
    .search-col {
        width: 80% !important;
    }
}
@media screen and (max-width: 450px) {
    .chatbox-main .accordion {
        height: 183px !important;
    }
}
@media screen and (max-width: 1440px) and (min-width: 1024px) {
    .chatbox-main .accordion {
        height: 270px !important;
    }
}
@media screen and (max-width: 1199.99px) and (min-width: 768.99px) {
    .department-cards-wrapper .card {
        min-height: 100px !important;
    }
    .dt-layout-full {
        height: 610px !important;
    }
}
@media screen and (max-width: 2560px) and (min-width: 1440px) {
    .chatbox-main .accordion {
        height: 260px !important;
    }
}
@media screen and (max-width: 660px) {
    .chart-card {
        height: 450px !important;
    }
}
@media screen and (max-width: 448px) {
    .department-cards-wrapper > .row > div {
        width: 100% !important;
    }
}
@media (max-width: 2560px) and (min-width: 2141px) {
    .my-tooltip:hover .my-tooltiptext {
        visibility: hidden !important;
        opacity: 0 !important; /* Ensure the tooltip is hidden */
    }

    /* Optional: Hide the tooltip by default to prevent showing */
    .my-tooltip .my-tooltiptext {
        visibility: hidden !important;
        opacity: 0 !important;
    }
    .my-tooltip {
        cursor: default !important;
    }
}