/* XXL devices (very large desktops, 1400px and up) */
@media screen and (max-width: 1800px) {

    .banner-slide {
        height: 400px;
    }
}

@media screen and (max-width: 1670px) {
    .nav-item .contact-btn {
        margin-left: 8px;
    }

    .nav-link {
        padding: 8px 10px !important;
    }

}

@media screen and (max-width: 1600px) {
    .navbar .container-fluid {
        width: 99%;
    }

    .nav-link {
        padding: 8px 10px !important;
    }

    .navbar-brand img {
        height: 50px;
    }


}

@media screen and (max-width: 1500px) {
    .banner-slide {
        height: 380px;
    }

    .nav-link {
        padding: 8px 4px !important;
    }

    .hero-slider .custom-prev,
    .hero-slider .custom-next {
        font-size: 20px;
        width: 45px;
        height: 45px;
    }

    .inner-about {
        padding: 10px 0px;
    }


}

@media screen and (max-width: 1440px) {
    .nav-link {
        padding: 8px 7px !important;
    }

    .nav-link {
        font-size: 14px !important;
    }

    .product-detail-inner .container-fluid {
        width: 100%;
    }

    .product-detail-inner .category-link {
        padding: 14px 20px;
        font-size: 15px;
    }

    .banner-slide {
        height: 320px;
    }


}

@media screen and (max-width: 1400px) {
    .inner-product .container-fluid {
        max-width: 95%;
    }

    .tab-content {
        padding: 30px 20px
    }

    .navbar-brand img {
        height: 50px;
    }

    .navbar-collapse .nav-link {
        padding: 0px 8px !important;
    }

    .nav-item .contact-btn {
        margin-left: 0px;
    }

    .news-inner .custom-nav-left {
        left: -50px;
    }

    .news-inner .custom-nav-right {
        left: 97%;
    }

    .top-about-left .heat-title h4 {
        font-size: 42px;
    }

    .nav-link {
        font-size: 16px;
        margin: 5px 0px;
    }

    .btn {
        padding: 12px 10px;
        font-size: 14px;
    }

    .product-detail-inner .product-link:before {
        content: '';
        position: absolute;
        left: 20px;
    }

    .product-detail-inner .child-menu:before {
        content: '';
        position: absolute;
        left: 20px;
    }

    .product-application li {
        padding: 10px 8px;
    }.navbar .container-fluid {
        width: 100% !important;
    }

}

@media screen and (max-width: 1300px) {
    .heat-title h2 {
        font-size: 46px;
    }
    
    .btn {
        padding: 8px 4px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 1255px) {
    .navbar-collapse .nav-link {
        padding: 0px 4px !important;
    }

    .footer-warp .container-fluid {
        width: 85% !important;
        margin: 0px auto !important;
    }



}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (max-width: 1200px) {
    .inner-product .container-fluid {
        max-width: 95%;
    }

    .sidebar {
        padding: 8px;
    }

    .banner-slide {
        height: 280px;
    }

    .product-sidebar {
        padding: 3px;
    }

    .product-detail-inner .category-link {
        padding: 14px 10px;
    }

    .heat-title h2 {
        font-size: 43px;
    }

    .card-img img {
        width: 100%;
        height: 280px;
    }

    .card-img {
        height: 280px;
    }

    .news-carousel .item {
        width: 100%;
        max-width: 500px;
        display: flex;
        justify-content: center;
        margin: 90px 40px;
        align-items: center;
    }

    .news-carousel .item {
        width: 100%;
        max-width: 380px;
    }

    .item .news-card {
        margin-top: 70px;
    }

    .news-overlay {
        position: absolute;
        left: 20px;
    }

    .choose-inner::before {
        display: none;
    }

    .choose-card {
        padding: 160px 30px 60px 30px;
        margin: 0px 15px;
    }

    .inner-video .container-fluid {
        width: 96%;
    }

    .breadcrumb-wrapper {
        margin: 0px 100px;
    }

    .top-about-left .heat-title h4 {
        font-size: 36px;
    }

    .inner-about .container-fluid {
        width: 94%;
    }

    .about-contact-content p {
        font-size: 38px;
        max-width: 550px;
    }

    .choose-inner-1 {
        margin: 0px 0px !important;
    }

    .choose-inner> :nth-child(3) {
        grid-column: 1 / -1;
    }

    .news-inner {
        position: relative;
        padding-top: 20px;
        padding-bottom: 0px;
    }

    .custom-nav-buttons {
        position: absolute;
        top: -50px;
    }

    .navbar .container-fluid {
        width: 90%;
    }

    .blog-content {
        padding: 25px 15px;

    }

    .blog-card {
        padding: 20px 15px;
    }

    .product-detail-inner .product {
        padding-left: 10px;
    }

    .product-detail-inner .product-link {
        display: block;
        padding: 5px 12px 5px 35px
    }

    .product-detail-inner .child-menu:before {
        content: '';
        position: absolute;
        left: 14px;
    }

    .product-detail-inner .child-menu {
        padding-left: 25px !important;
    }

    .product-warpper .heat-title h2 {
        font-size: 28px;
    }

    .testimonial-carousel .item {
        margin: 0px !important;
    }

    .network-wrap .network-card h2 {
        font-size: 20px;
    }

    .network-wrap .network-card {
        padding: 25px 17px 20px 17px;
    }

    .network-wrap .network-card ul li {
        font-size: 14px;
    }

    .network-cta .heat-title h2 {
        font-size: 32px !important;
    }


}


/* Large devices (desktops, 992px and up) */
@media screen and (max-width:1155px) {
    .btn {
        padding: 8px 8px;
        font-size: 14px;
    }

    .navbar-collapse .nav-link {
        padding: 0px 4px !important;
        font-size: 14px;
    }

    .navbar-brand img {
        height: 41px;
    }

    .blog-section {
        padding: 40px 0;
    }

    .product-detail-inner .product-link:before {
        content: '';
        position: absolute;
        left: 15px;
    }

    .product-detail-inner .product-link {
        display: block;
        padding: 5px 12px 5px 25px
    }
}

@media screen and (max-width:1010px) {
    .btn {
        padding: 8px 8px;
        font-size: 12px;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (max-width:1050px) {

    .iso-badge {
        height: 35px;
    }

    .navbar-collapse .nav-link {
        padding: 0px 0px !important;
    }

    .banner-slide {
        height: 230px;
    }

    .hero-slider .custom-prev,
    .hero-slider .custom-next {
        font-size: 18px;
        width: 35px;
        height: 35px;
    }

}

/* Large devices (desktops, 992px and up) */
@media screen and (max-width: 992px) {
    .nav-item .contact-btn {
        margin-left: 0px;
    }

    .nav-link {
        padding: 6px 8px !important;
    }

    .custom-nav {
        position: absolute;
    }

    .custom-prev,
    .custom-next {
        font-size: 18px;
        width: 45px;
        height: 45px;
    }

    /* .banner-slide {
        height: 60vh;
    } */

    .about-cotent {
        padding-left: 0px;
    }

    .inner-about-top .click-btn {
        margin-top: 30px;
    }

    .contact-left {
        margin: 0px;
    }

    .inner-form {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .news-carousel .item {
        margin: 40px auto;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .news-inner .custom-nav-left {
        left: 0%;
    }

    .news-inner .owl-dots {
        display: none;
    }

    .item .news-card {
        margin-top: 80px;
    }

    .news-inner .custom-nav-right {
        left: 81%;
    }

    .news-overlay {
        position: absolute;
        left: 0px;
    }

    .news-inner {
        position: relative;
        padding: 22px 0px 0px 0px;
    }

    .breadcrumb-wrapper {
        margin: 0px 70px;
    }

    .top-about {
        display: flex;
        flex-direction: column;
        margin-bottom: 13px;
    }

    .about-left {
        display: none;
    }

    .about-right {
        padding-top: 21px;
    }

    .top-about-left {
        text-align: right;
    }

    .sidebar ul li button,
    .sidebar ul li a {
        font-size: 14px;
    }

    .filter-bar .left h3 {
        font-size: 26px;
    }

    .tab-content {
        padding: 30px 8px;
    }

    .navbar-brand img {
        height: 50px;
    }

    .product-tab-inner {
        padding: 20px 20px;
    }

    .product-tab-inner .nav-link {
        font-size: 14px;
    }

    .inner-product .thumb {
        height: 120px;
    }

    .inner-product .modal-body {
        padding: 10px;

    }

    .detail-specification {
        padding: 14px;
    }

    .doc-section {
        padding: 60px 0;
    }

    .certificate-content {
        padding: 30px;
    }

    .certificate-content h4 {
        font-size: 1.6rem;
    }

    .footer-warp .container-fluid {
        width: 100%;
    }

    .footer-warp .container-fluid {
        width: 95% !important;
        margin: 0px auto !important;
    }

    .modal-dialog {
        max-width: 767px !important;
    }

    .popup-detail-warp {
        padding: 0px 10px;
    }

    .enquery-btn {
        display: flex;
        justify-content: end;
    }

    .heat-title h2 {
        font-size: 32px;
    }

    .product-application li {
        padding: 10px;

    }

    .navbar .container-fluid {
        margin: 0px 70px;
    }

    .video-btn {
        top: 25%;
        left: 50%;
        width: 55px;
        height: 55px;
    }

    .banner-slide {
        height: 220px;
    }


}





/* Medium devices (tablets, 768px and up) */
@media screen and (max-width: 768px) {

    .product-card-list {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner-slide {
        height: auto;
    }


    .product-card-list img {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .center,
    .view-toggle {
        justify-content: center;
    }

    .sidebar {
        position: static;
        height: auto;
        max-height: none;
        overflow-y: hidden;
        margin-top: 20px;
        border-right: none;
        border-radius: 10px;
    }

    .quick-link-slider {
        display: none;
    }

    .inner-product {
        padding: 60px 0px;
    }

    .network-inner {
        padding: 30px 0px;
    }

    .network-wrap {
        padding: 20px 10px;
    }

    .inner-product-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .custom-prev,
    .custom-next {
        font-size: 18px;
        width: 35px;
        height: 35px;
    }

    /* 
    .banner-slide {
        height: 50vh;
    } */
    .custom-nav {
        position: absolute;
        top: 85%;
        left: 75%;
    }

    .hero-slider .custom-prev,
    .hero-slider .custom-next {
        font-size: 12px;
        width: 24px;
        height: 24px;
    }


    .vision-left {
        padding-top: 15px;
        flex: 1;
    }

    .inner-about {
        padding: 30px 0px;
    }

    .inner-video {
        padding: 10px;
    }

    .video-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-product {
        margin: 0px 50px;
    }

    .inner-client {
        padding: 0px 0px;
    }

    .blog-card {
        padding: 20px 7px;
    }

    .client-inner {
        padding: 26px 0px;
    }

    .blog-container {
        margin-top: 15px;
    }


    .breadcrumb-wrapper {
        margin: 0px 40px;
    }

    .inner-about-contact {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .about-contact-overlay {
        position: absolute;
        bottom: 50%;
        right: 0%;
    }

    .about-contact-content p {
        font-size: 28px;
        max-width: 550px;
    }

    .why-right {
        display: none;
    }

    .certification-list li {
        padding: 14px 16px;
        gap: 12px;
    }

    .certification-list h6 {
        font-size: 0.95rem;
    }

    .certification-list small {
        font-size: 0.8rem;
    }

    .card-blog {
        width: 70%;
        margin: 0 auto;
    }

    .filter-bar .left h3 {
        font-size: 20px;
    }

    .product-tab-inner {
        background-color: var(--color-white);
        /* border-top-left-radius: 10px; */
        /* border-top-right-radius: 10px; */
        padding: 20px 40px;
    }

    /* Wrapper to hold icon */
    .dropdown-wrapper {
        max-width: 100%;
        margin-top: 1rem;
    }

    .dropdown-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        color: #555;
        pointer-events: none;
        z-index: 2;
    }

    /* Stylish select */
    .custom-select-style {
        padding-left: 2.5rem;
        padding-right: 1rem;
        height: 45px;
        border-radius: 8px;
        border: 1px solid #ced4da;
        background-color: #fff;
        font-weight: 500;
        transition: all 0.3s ease;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, #6c757d 50%),
            linear-gradient(135deg, #6c757d 50%, transparent 50%);
        background-position: calc(100% - 20px) center, calc(100% - 15px) center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
    }

    .custom-select-style:hover {
        border-color: none !important;
        box-shadow: none !important;
    }

    .custom-select-style:focus {
        border-color: none !important;
        outline: none;
        box-shadow: none !important;
    }

    .dropdown-wrapper .form-select option {
        /* Basic Styling */
        padding: 12px 15px !important;
        /* Spacious touch target */
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333 !important;
        background-color: #fff !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;

        /* Hover Effect */
        &:hover {
            background-color: #f0f7ff !important;
            color: #0066cc !important;
        }

        /* Selected Option (when dropdown is open) */
        &:checked {
            background-color: #e6f0ff !important;
            color: #0052cc !important;
            font-weight: 600 !important;
            position: relative !important;
        }

        /* Focus State (keyboard navigation) */
        &:focus {
            outline: 2px solid #4a90e2 !important;
            outline-offset: -2px !important;
        }

        /* Disabled Option Styling */
        &:disabled {
            color: #999 !important;
            background-color: #f8f8f8 !important;
        }
    }

    /* For optgroups if needed */
    .dropdown-wrapper .form-select optgroup {
        font-weight: bold !important;
        color: #555 !important;
        background: #f5f5f5 !important;
        padding: 8px 15px !important;
    }

    .about-right p {
        text-align: justify;
    }

    .why-child p {
        text-align: justify;
    }

    .certificate-content {
        padding: 25px;
    }

    .certificate-content h4 {
        font-size: 1.4rem;
    }

    .certificate-content p {
        font-size: 1rem;
    }

    .modal-dialog {
        max-width: 550px !important;
    }

    .technical-inner .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .technical-inner .table {
        width: 100%;
        min-width: 600px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .technical-inner .table thead {
        display: table-header-group;
    }

    .technical-inner .table td,
    .technical-inner .table th {
        white-space: nowrap;
    }

    .product-warpper .heat-title h2 {
        font-size: 22px;
    }

    .scroll-top-btn {
        width: 35px;
        height: 35px;
    }

    .technical-inner .table thead th {
        padding: 10px 5px;
        font-size: 12px;
    }

    #joinModal .modal-title {
        font-size: 20px;
    }

    #joinModal .form-control {
        padding: 5px 10px;
    }


}


/* Small devices (phones, 576px and up) */
@media screen and (max-width: 576px) {
    .inner-product .container-fluid {
        max-width: 98%;
    }

    .vision-left {
        padding-top: 0px;
    }

    .choose-card::after {
        width: 145px;
        height: 155px;
    }

    .choose-inner {
        padding: 5px;
    }

    .choose-card::before {
        width: 175px;
        height: 175px;
    }

    .inner-about {
        padding: 15px 0px;
    }

    .banner-content h2 {
        font-size: 24px !important;
    }

    .sub-banner {
        margin: 20px 0px 20px 0px;
    }

    .sub-banner {
        height: 110px;
    }


    .tab-content {
        padding: 30px 5px;
    }

    .table>:not(caption)>*>* {
        padding: 8px 5px !important;
    }

    .popup-detail-warp {
        padding: 0px 3px;
    }

    /* .banner-slide {
        height: 45vh;
    } */

    .about-header {
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .card-product {
        margin: 0px 30px;
    }

    .heat-title h2 {
        font-size: 34px;
    }

    .contact-left,
    .contact-right {
        padding: 30px 20px;
    }

    .event-inner {
        padding: 10px 0px;
    }

    .card-content {
        position: relative;
        padding: 20px 15px 15px 15px;
    }

    .testimonial-card {
        flex: 1 !important;
        padding: 20px 14px;
    }

    .network-wrap .network-card {
        padding: 25px 2px 20px 12px;
    }

    .network-wrap .network-card h2 {
        margin-bottom: 10px;
    }

    #joinModal .modal-body {
        padding: 20px 20px;
    }

    .network-wrap {
        padding: 20px 10px;
    }

    .breadcrumb-wrapper {
        margin: 0px 10px;
    }

    .top-about-right {
        flex-direction: column;
        justify-content: center !important;
        margin: 0px auto;
    }

    .top-about-left .heat-title h4 {
        font-size: 28px;
        margin: 7px 0px;
    }

    .about-img h3 {
        font-size: 26px;
        padding: 20px 25px;
    }

    .about-contact-img {
        background: linear-gradient(to bottom, #ff4d4d, #990000);
        width: 118px;
        height: 64%;
        padding: 55px 0;
        text-align: center;
        -webkit-transform: skewX(1deg);
        -ms-transform: skewX(-15deg);
        transform: skewX(-2deg);
        margin: 0 28px;
    }

    .inner-about-contact {
        gap: 7px;
    }

    .about-contact {
        padding: 10px 0px;
    }

    .about-contact .click-btn a {
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--color-white);
        font-weight: 500;
        padding: 9px 15px;
    }

    .certification-list li {
        flex-direction: column;
        gap: 8px;
    }

    .certification-list .bi {
        margin-bottom: 4px;
    }

    .footer .container {
        width: 95%;
    }

    .footer .foot-logo img {
        width: 55%;
    }

    .scroll-top-btn {
        position: fixed;
        width: 40px;
        height: 40px;
    }

    .about-contact-content p {
        font-size: 23px;
        line-height: 30px;
    }

    .card-blog {
        width: 90%;
        margin: 0 auto;
    }

    .inner-blog::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100px;
    }

    .blog-head .heat-title {
        text-align: left;
    }

    .custom-nav-buttons {
        position: absolute;
        top: -42px;
    }

    .inner-product .thumb {
        height: 65px;
    }

    .modal-body p {
        font-size: 14px;
    }

    .popup-detail-warp h3 {
        font-size: 20px;
    }

    .popup-detail-warp h3 i {
        font-size: 14px;
    }

    .technical-inner th {
        font-size: 14px;
    }

    .detail-specification ul li::before {
        display: none;
    }

    .detail-specification ul li {
        position: relative;
        padding: 10px 10px 10px 20px;
    }

    .footer-info h6 {
        font-size: 26px;
    }

    .footer h2 {
        font-size: 20px;
    }

    .product-card {
        padding: 15px 10px;
    }

    .blog-content {
        padding: 20px 10px;
        position: relative;
    }

    .navbar-toggler img {
        width: 30px;
    }

    .offcanvas-header .d-inline-block img {
        width: 120px;
    }

    .doc-section {
        padding: 40px 0;
    }

    .certificate-content {
        padding: 20px;
    }

    .certificate-content h4 {
        font-size: 1.3rem;
    }

    .product-warp-left {
        padding: 5px;
    }

    .thumbnail-warp {
        padding: 5px;
    }

    .product-detail-inner .product-link:before {
        content: '';
        position: absolute;
        left: 5px;
    }

    .product-detail-inner .product-link {
        display: block;
        padding: 5px 12px 5px 20px;
    }


    .product-detail-inner .child-menu:before {
        content: '';
        position: absolute;
        left: 5px;
    }

    .nav-link {
        padding: 6px 0px !important;
    }

    .navbar .container-fluid {
        margin: 0px 40px;
    }

    .breadcrumb-wrapper .breadcrumb {
        text-align: right;
        display: flex;
        justify-content: right;
    }

    .breadcrumb-wrapper {
        flex-wrap: wrap;
    }

    .breadcrumb li {
        margin-left: 5px;
    }

    .breadcrumb {
        width: 100%;
        flex-wrap: wrap;
    }

    .video-btn {
        top: 18%;
        left: 45%;
    }

    .network-cta .heat-title h2 {
        font-size: 26px !important;
    }

    .navbar .container-fluid {
        width: 95%;
    }
}


/* Small phones (iPhone XR, Android) */
@media screen and (max-width: 425px) {
    .vision-left p {
        font-size: 16px;
    }

    .navbar .container-fluid {
        margin: 0px 10px;
    }

    .top-about-left .heat-title h4 {
        font-size: 22px;
    }

    .vision-left {
        gap: 10px;
    }

    .vision-left h4 {
        padding-right: 3px;
    }

    .inner-about .container-fluid {
        width: 96%;
    }

    .footer-social a {
        color: var(--color-primary);
        font-size: 18px;
        margin: 0 5px;
    }

    .card-product {
        margin: 0px 15px;
    }

    .custom-nav {
        padding: 0px 20px;
    }

    .choose-card .choose-content h2 {

        font-size: 22px;
    }

    .offcanvas {
        width: 80% !important;
    }

    .card-blog {
        width: 97%;
    }

    .detail-specification ul li {
        position: relative;
        padding: 5px 5px 5px 10px;
    }

    .detail-specification {
        padding: 8px 12px;
    }



}

/* iPhone SE, some small Android phones */
@media screen and (max-width: 375px) {
    /* .banner-slide {
        height: 40vh;
    } */

    .about-contact-content p {
        font-size: 18px;
    }

    .product-warpper .heat-title h2 {
        font-size: 18px;
    }

    .video-btn {
        width: 35px;
        height: 35px;
    }

    .banner-slide {
        height: 120px;
    }

    .network-cta .heat-title h2 {
        font-size: 22px !important;
    }


}

/* Extra small devices (portrait phones, less than 320px) */
@media screen and (max-width: 320px) {
    .custom-nav {
        position: absolute;
        top: 85%;
        left: 67%;
    }

    .banner-slide {
        height: 120px;
    }


}


/* Ultra-wide screens (optional custom) */
@media screen and (min-width: 1600px) {
    /* Ultra-wide desktops */
}