@media (max-width: 1200px) {
    .header p,
    .black-btn a,
    .black-btn button,
    .sub-headers p,
    .icons i,
    .accordion-flush .accordion-item .accordion-button,
    .accordion-body,
    .accordion-button:not(.collapsed),
    .minimal-input,
    .contact-info p,
    .footer-link-list a,
    .newsletter-text,
    .what1 .txt1,
    .what1 .txt2,
    .banner-content p,
    li,
    #post_content.headings ul li,
    #post_content .headings ol li {
        font-size: 17px !important;
    }
    .header h1,
    .sub-headers h2 {
        font-size: 30px !important;
    }
    .section,
    .mid-section,
    .site-footer {
        padding: 60px 0;
    }
    .reward-sec {
        padding: 0 0 60px;
    }
    .forAfter::after {
        display: none;
    }
    .single-service .title {
        font-size: 20px;
    }
    .sub-headers h1 {
        font-size: 90px;
    }
    .sub-headers h1 span {
        font-size: 50px;
    }
    #post_content h1,
    h2 {
        font-size: 30px;
        font-weight: 700;
    }
    #post_content h3,
    h5 {
        font-size: 24px;
        font-weight: 700;
    }
    #post_content h6 {
        font-size: 17px;
        font-weight: 700;
    }
    .bnr-card p.bnr-card-p {
        font-size: 30px !important;
        line-height: 40px;
    }
    .s-development-service {
        padding: 0 0 60px;
    }
    .retail-why-chs {
        padding: 0;
    }
    .wwed-sec {
        padding: 60px 0 0;
    }
    .why-us-postbnr {
        padding: 60px 0 0;
    }
    .construction_second_section {
        padding: 0;
    }
    .construction_why_chs {
        padding: 0;
    }
    .health-why-chs {
        padding: 0;
    }
    .healthcare_why_choose_digitex {
        padding: 60px 0 0;
    }
    .healthcare_iso_section {
        padding: 30px 0 0;
    }
    .construction_iso_section {
        padding: 40px 0 0;
    }
    .company-profile-our-story {
        padding: 60px 0 40px;
    }
    .education_iso_section {
        padding: 0;
    }
    .education_why_choose_digitex {
        padding: 0 0 60px;
    }
    .reward-sec {
        padding: 0;
    }
    .travel_iso_section {
        padding: 0 0 60px;
    }
    .manufacturing_after_banner_section {
        padding: 80px 0 0;
    }
    .manufacturing_company_highlights {
        padding: 80px 0 50px;
    }
    .entertaintment_after_banner_section {
        padding: 80px 0 0;
    }
    .entertaintment_company_highlights {
        padding: 80px 0;
    }
}

@media (max-width: 1199px) {
    .navbar-dark .navbar-nav .nav-link {
        font-size: 14px;
    }
    .btn-quote {
        font-size: 14px;
    }
    #what {
        display: block;
    }
    #what .left_box_wrapper {
        display: block;
        width: auto;
    }
    #what .right_box_wrapper {
        display: block;
        width: auto;
    }
    .sub-headers h1 {
        font-size: 80px;
    }
    .sub-headers h1 span {
        font-size: 45px;
    }
    .education_iso_section {
        padding: 60px 0 0;
    }
    .careers_iso_section {
        padding: 0 0 60px;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        left: -65px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu ul {
        position: relative;
    }
    .arrow-shape-dropdwn {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%) rotate(133deg);
        background: #000;
        width: 15px;
        height: 13px;
    }
}

@media (max-width: 992px) {
    .custom-navbar .nav-link.active::after,
    .custom-navbar .nav-link:hover::after {
        display: none;
    }
    .custom-navbar .nav-item.dropdown {
        position: relative;
    }
    .custom-navbar .dropdown-menu {
        position: absolute !important;
        top: 100%;
        left: 0;
        display: none;
        margin: 0;
        z-index: 9999;
    }
    .custom-navbar .dropdown:hover>.dropdown-menu {
        /* display: block; */
    }
    .card {
        margin-bottom: 15px;
    }
    .custom-navbar .nav-link.active::after,
    .custom-navbar .nav-link:hover::after {
        display: none;
    }
    .banner {
        height: 70vh;
    }
    .sticky-card {
        position: relative;
        top: 0;
        margin-bottom: 40px;
    }
    .dgital-video img {
        margin-bottom: 20px;
        border-radius: 20px;
    }
    .marquee-track h2 {
        font-size: 74px;
    }
    #services2 {
        display: block;
    }
    #services2 .left_box_wrapper {
        display: block;
        width: auto;
    }
    #services2 .right_box_wrapper {
        display: block;
        width: auto;
        padding-bottom: 70%;
    }
    #services2 .left_box {
        padding: 50px 30px;
    }
    .main-box {
        width: 95%;
    }
    .sub-headers h1 {
        font-size: 70px;
    }
    .sub-headers h1 span {
        font-size: 40px;
    }
    .blogs-tip {
        margin-top: 25px;
    }
    .service-title {
        font-size: 30px;
        line-height: 40px;
    }
    .dynamic-banner {
        padding: 80px 0 70px;
    }
    .navbar .nav-item .nav-link i {
        display: none;
    }
    .navbar .dropdown-toggle-btn {
        display: block;
    }
    .csoon-h {
        font-size: 40px;
    }
    .csoon-img-wrapper {
        margin: 30px 0 0;
    }
    .reward-sec .sub-h {
        font-size: 30px;
    }
    .sub-headers h2 {
        font-size: 30px !important;
    }
    .key-f .txt-wrapper p {
        font-size: 16px;
    }
    .benefit .benefit-box p {
        font-size: 16px;
    }
    .open-position .sub-header-h3 {
        font-size: 30px;
    }
    .retail-postbnr .retail-postbnr-img-wrapper img {
        margin-bottom: 20px;
    }
    .retail-key-capability .retail-key-col-m {
        margin-top: 0;
    }
    .retail-key-capability .txt-wrapper {
        margin: 0 0 20px;
    }
    .retail-why-chs img {
        margin-bottom: 30px;
    }
    .increase-percentage-section .counter {
        font-size: 35px;
    }
    .health-why-chs {
        padding: 0;
    }
    .healthcare_why_choose_digitex {
        padding: 60px 0 0;
    }
    .healthcare-casestudy .black-btn {
        margin-bottom: 50px;
    }
    .manufacturing_company_highlights {
        padding: 50px 0 30px;
    }
    .manufacturing_after_banner_section {
        padding: 50px 0 0;
    }
    .entertaintment_after_banner_section {
        padding: 50px 0 0;
    }
    .entertaintment_company_highlights {
        padding: 50px 0 30px;
    }
    .career-bnr h1 {
        font-size: 40px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9);
        transition: left 0.3s ease-in-out;
        display: block !important;
        padding: 2rem;
        z-index: 1050;
    }
    /* 2. When the 'show' class is added by Bootstrap, slide it in */
    .navbar-collapse.show {
        left: 0;
    }
    /* 3. Style the Toggler Button (Optional: visual polish) */
    .navbar-toggler {
        border: 2px solid #fff;
        border-radius: 4px;
        padding: 5px 10px;
    }
    /* 4. Center the nav items inside the new side panel */
    .navbar-nav {
        flex-direction: column;
        text-align: left;
    }
    .nav-item {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .portfolio-card {
        height: 280px;
    }
    .specialportfolio .col:nth-child(even) {
        margin-top: 0px;
    }
    .custom-navbar .nav-link {
        color: #fff !important;
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    .header p,
    .black-btn a,
    .black-btn button,
    .sub-headers p,
    .icons i,
    .accordion-flush .accordion-item .accordion-button,
    .accordion-body,
    .accordion-button:not(.collapsed),
    .minimal-input,
    .contact-info p,
    .footer-link-list a,
    .newsletter-text,
    .what1 .txt1,
    .what1 .txt2,
    .banner-content p,
    li,
    #post_content.headings ul li,
    #post_content .headings ol li {
        font-size: 16px !important;
    }
    .blogs-writer {
        flex-direction: column;
        gap: 20px;
    }
    .header h1,
    .sub-headers h2,
    .service-title {
        font-size: 25px !important;
    }
    .btn-quote-anchor {
        padding: 5px 10px;
        font-size: 15px;
        font-weight: 600;
        width: 70%;
        margin: 0 auto;
    }
    /* .custom-navbar .nav-link.active::after,
  .custom-navbar .nav-link:hover::after {
    display: none;
  } */
    .header p {
        height: auto;
    }
    .tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .tech-grid li:nth-child(4n) {
        border-right: 1px solid #ddd;
    }
    .tech-grid li:nth-last-child(-n + 2) {
        border-bottom: 1px solid #ddd;
    }
    .tech-grid li:nth-child(n) {
        border-left: 1px solid #ddd;
    }
    .tech-grid img {
        object-fit: contain;
        height: 50px;
        width: 50px;
    }
    .marquee-track h2 {
        font-size: 60px;
    }
    .navbar-dark .navbar-nav .nav-link {
        font-size: 23px;
        border-bottom: 1px solid #2f3031;
        padding-bottom: 15px !important;
    }
    .nav-link span {
        font-size: 12px;
        display: block;
    }
    #what .left_box {
        padding: 30px;
    }
    #what .right_box {
        padding: 30px;
    }
    .services2:before {
        display: none;
    }
    .services2:after {
        display: block !important;
    }
    .single-service .title {
        font-size: 18px;
    }
    .main-box {
        flex-direction: column;
        height: auto;
        /* Let content dictate height or set a fixed height */
        min-height: 600px;
    }
    .box {
        width: 100% !important;
        height: 60px;
        /* Collapsed height */
        border-right: none;
        border-bottom: 1px solid white;
        transition: 0.5s;
    }
    .box.active {
        height: 400px;
        /* Expanded height */
        width: 100% !important;
    }
    .box span {
        writing-mode: horizontal-tb;
        /* Reset text orientation */
        transform: none;
        width: 100%;
        height: 26px;
        justify-content: flex-start;
        padding-left: 20px;
        position: relative;
        left: 0 !important;
    }
    .main-box li small {
        padding-right: 12px;
    }
    .detail {
        width: 100%;
        height: calc(100% - 60px);
        /* Fill remaining space below title */
        top: 60px;
        transform: translateX(100%);
        /* Slide in from side instead of bottom */
    }
    .box.active .detail {
        transform: translateX(0);
    }
    .sub-headers h1 {
        font-size: 60px;
    }
    .sub-headers h1 span {
        font-size: 35px;
    }
    #post_content h1,
    h2 {
        font-size: 28px;
        font-weight: 700;
    }
    #post_content h3,
    h5 {
        font-size: 22px;
        font-weight: 700;
    }
    #post_content h6 {
        font-size: 16px;
        font-weight: 700;
    }
    .bg-ground {
        display: none;
    }
    .dynamic-banner {
        padding: 50px 0 55px;
    }
    .bnr-card {
        max-width: 100%;
        margin: 30px 0 0;
    }
    .key-f .txt-wrapper span {
        font-size: 30px;
    }
    .retail-key-capability .txt-wrapper span {
        font-size: 20px;
    }
    .open-position .sub-header-h3 {
        font-size: 25px;
    }
    .open-position .position-col .position-subh {
        font-size: 20px;
    }
    .open-position .position-col span {
        font-size: 16px;
    }
    .reward-sec .sub-h {
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    .site-footer {
        display: none;
    }
    .site-footer-mob {
        display: block;
        padding: 40px 0 30px;
    }
    .site-footer-mob .footer-title {
        font-size: 16px;
    }
    .increase-percentage-section .counter {
        font-size: 26px;
    }
    .increase-percentage-section .label {
        font-size: 16px;
    }
    .conclution-credit-section .creadits-wrapper {
        width: 100%;
        margin: 30px 0 0;
        max-width: 100%;
    }
    .special-service-healthcare .special-healthcare-service-row {
        flex-direction: column-reverse;
    }
    .special-service-healthcare .special-healthcare-service-row .col {
        margin: 0;
    }
    .construction_second_section {
        padding: 0;
    }
    .construction_why_chs {
        padding: 40px 0 0;
    }
    .special-service-healthcare .single-srvc-healthcare {
        min-height: auto !important;
    }
}

@media (max-width: 680px) {
    .section,
    .mid-section,
    .site-footer,
    .bg-white--34 {
        padding: 40px 0;
    }
    .reward-sec {
        padding: 0 0 40px;
    }
    .dgital-video video {
        max-width: 99%;
        border-radius: 0 30% 0 30%;
    }
    .dgital-video {
        justify-content: center;
    }
    .marquee-track h2 {
        font-size: 54px;
    }
    .box.active {
        height: 450px;
    }
    .detail {
        padding: 20px;
    }
    .box span {
        font-size: 16px;
        letter-spacing: 2px;
    }
    .sub-headers h1 {
        font-size: 50px;
    }
    .sub-headers h1 span {
        font-size: 30px;
    }
    .text-start,
    .text--start,
    .our-secr .sub-headers h2,
    .our-secr .sub-headers p {
        text-align: center !important;
    }
    .why-choose .black-btn,
    .black-btn {
        display: flex;
        justify-content: center;
    }
    .health-why-chs .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .open-position .black-btn {
        justify-content: start;
    }
    .map-wrapper iframe {
        display: block;
        height: 200px;
    }
    .maintainence .sub-headers h2,
    .maintainence .sub-headers p {
        text-align: center;
    }
    .construction_second_section {
        padding: 0;
    }
    .construction_why_chs {
        padding: 40px 0 0;
    }
    .health-why-chs {
        padding: 0 0 40px;
    }
    .special-service-healthcare .sub-headers {
        margin: 45px 0 25px;
    }
    .special-service-healthcare .sub-headers h2 {
        text-align: left;
    }
    .special-service-healthcare .sub-headers p {
        text-align: left;
    }
    .why-choose-healthcare .sub-headers .black-btn {
        display: flex;
        justify-content: start;
    }
    .healthcare_why_choose_digitex {
        padding: 40px 0 0;
    }
    .healthcare_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .healthcare-casestudy .black-btn {
        margin-bottom: 50px;
    }
    .healthcare-casestudy .sub-headers h2 {
        text-align: left;
    }
    .healthcare-casestudy .sub-headers p {
        text-align: left;
    }
    .healthcare_iso_section {
        padding: 30px 0 0;
    }
    .company-profile-our-story {
        padding: 50px 0 40px;
    }
    .why-us-second-section .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .education_iso_section {
        padding: 50px 0 0;
    }
    .education_why_choose_digitex {
        padding: 0 0 40px;
    }
    .education_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .reward-sec {
        padding: 0;
    }
    .retail-casestudy .sub-headers h2,
    p {
        text-align: left;
    }
    .retail_after_technology_section {
        padding: 0;
    }
    .retail_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .travel-casestudy .sub-headers h2 {
        text-align: left;
    }
    .travel_after_technology_section {
        padding: 0;
    }
    .travel_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .travel_iso_section {
        padding: 0 0 40px;
    }
    .manufacturing_company_highlights {
        padding: 50px 0 30px;
    }
    .manufacturing_after_banner_section {
        padding: 50px 0 0;
    }
    .manufacturing_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .manufacturing-casestudy .sub-headers h2 {
        text-align: left;
    }
    .entertaintment_after_banner_section {
        padding: 50px 0 0;
    }
    .entertaintment_company_highlights {
        padding: 50px 0 30px;
    }
    .entertaintment_why_choose_digitex .black-btn,
    .black-btn {
        display: flex;
        justify-content: start;
    }
    .entertaintment-casestudy .sub-headers h2 {
        text-align: left;
    }
    .key-f .sub-headers p {
        text-align: center;
    }
    .our-team-page-section .team-wrapper .headings p {
        text-align: center;
    }
    .career-bnr h1 {
        font-size: 32px;
    }
    .career-bnr .fake-alert-p {
        text-align: center;
    }
    .careers_iso_section {
        padding: 0 0 50px;
    }
    .benefit .benefit-btn {
        display: flex;
        justify-content: center;
    }
    .open-position .open-p-form-btn {
        display: flex;
        justify-content: center;
    }
    .benefit .sub-headers p {
        text-align: center;
    }
    .companies_wrapper {
        padding: 20px 10px;
    }
    .companies_wrapper .sub-headers h2 {
        text-align: left;
    }
    .our_office_case_studies .sub-headers h2 {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .map-overlay {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        margin-top: 10px;
        border-radius: 0 0 12px 12px;
    }
    .header p,
    .black-btn a,
    .black-btn button,
    .sub-headers p,
    .icons i,
    .accordion-flush .accordion-item .accordion-button,
    .accordion-body,
    .accordion-button:not(.collapsed),
    .minimal-input,
    .contact-info p,
    .footer-link-list a,
    .newsletter-text,
    .what1 .txt1,
    .what1 .txt2,
    li,
    #post_content.headings ul li,
    #post_content .headings ol li {
        font-size: 15px !important;
    }
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .header h1,
    .sub-headers h2,
    .service-title {
        font-size: 25px !important;
    }
    .box span {
        font-size: 10px;
    }
    /* .banner {
    height: 50vh;
  } */
    .marquee-track h2 {
        font-size: 44px;
    }
    .portfolio-card {
        height: 240px;
    }
    .sub-headers h1 {
        font-size: 40px;
    }
    .sub-headers h1 span {
        font-size: 20px;
    }
    #post_content h1,
    h2 {
        font-size: 24px;
        font-weight: 700;
    }
    #post_content h3,
    h5 {
        font-size: 20px;
        font-weight: 700;
    }
    #post_content h6 {
        font-size: 15px;
        font-weight: 700;
    }
    .h-404 {
        font-size: 26px;
        line-height: 40px;
        margin-top: 35px;
    }
    .h-404 span {
        font-size: 52px;
    }
    .para-404 {
        margin: 10px auto 30px;
    }
    .mdl-sec-404 {
        padding: 125px 0 50px;
    }
    .csoon-h {
        font-size: 30px;
    }
    .csoon-mdlsec {
        padding: 125px 0 50px;
    }
    .retail-why-chs .ul-wrapper-flex {
        flex-direction: column;
        gap: 0;
    }
    .retail-why-chs .ul-wrapper-flex ul {
        margin-bottom: 0;
    }
    .need-case {
        flex-wrap: wrap;
    }
    .increase-percentage-section .stat-container {
        border: none;
    }
    .privacy-policy-section .privacy-content {
        padding: 30px;
    }
    .privacy-policy-section h2 {
        font-size: 18px;
        line-height: 28px;
    }
    .retail-why-chs img {
        width: 100%;
    }
    .construction_second_section {
        padding: 0;
    }
    .construction_why_chs {
        padding: 40px 0 0;
    }
}

@media (max-width: 400px) {
    .btn-project {
        padding: 10px 20px;
        font-size: 14px;
    }
    .section,
    .mid-section,
    .site-footer,
    .bg-white--34 {
        padding: 30px 0;
    }
    .why-us-postbnr {
        padding: 30px 0 0;
    }
    .main-box {
        margin: 20px auto;
    }
    .box.active {
        height: 500px;
        /* More height for text wrapping */
    }
    p {
        font-size: 14px;
        line-height: 20px;
    }
    .text-inner {
        text-align: left;
        max-width: 300px;
        transform: translateX(10vw);
    }
    .text {
        left: 16% !important;
    }
    .open-position .position-col {
        padding: 20px 15px;
    }
    .open-position .opem-position-row2 {
        padding: 30px 15px;
    }
    .reward-sec .reward-sec-row {
        padding: 10px;
    }
}


/* Default → Show Desktop Banner */

.desktop-home-banner {
    display: block !important;
}

.mobile-home-banner {
    display: none !important;
}


/* When screen width is 460px or less → Show Mobile Banner */

@media (max-width: 480px) {
    .desktop-home-banner {
        display: none !important;
    }
    .mobile-home-banner {
        display: block !important;
    }
}