/* ========== Default (Desktop First) ========== */
/* No media query needed for large screens */

/* ========== Extra Large Devices (Desktops, 1200px and up) ========== */
@media screen and (max-width: 1500px) {
    .do-inner .container {
        width: 80%;
    }

    .inner-product-section .container-fluid {
        width: 80%;
    }


}

@media screen and (max-width: 1440px) {
    .navbar .navbar-nav {
        display: flex;
        gap: 40px;
        margin-left: 100px;
    }

    .slide-content {
        margin-left: 150px;
        margin-top: 100px;
    }

    .hero-carousel .slide {
        width: 100%;
        height: 600px;
    }

    .do-inner .item {
        margin: 0px 10px;
    }

    .work-inner .container {
        width: 80%;
    }

    .inner-product .product {
        margin: 0px 10px;
    }

    .testimonial-overlay img {
        width: 259px;
    }

    .header-warp .inner-topbar .social-icons {
        margin-left: 250px;
    }

    .do-overlay img {
        width: 300px;
    }

    .inner-vission .container-fluid {
        width: 95%;
    }

    .inner-abouts .about-overlay1 img {
        width: 100%;
        height: 200px;
    }

    .inner-product-section .container-fluid {
        width: 90%;
    }



}

@media screen and (max-width: 1200px) {
    .navbar .navbar-nav {
        display: flex;
        gap: 22px;
        margin-left: 30px;
    }

    .about-left .img-1 img {
        position: absolute;
        bottom: 0;
        right: 2%;
        width: 70%;
        height: 450px;
    }

    .about-left .img-2 img {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 62%;
        height: 304px;
    }

    .about-left .Counter {
        position: absolute;
        top: 9%;
        left: -11%;
        display: block;
        width: 173px;
        height: 126px;
    }

    .work-inner .container {
        width: 80%;
    }

    .do-overlay img {
        width: 250px;
    }

    .testimonial-overlay img {
        width: 209px;
    }

    .header-warp .inner-topbar .social-icons {
        margin-left: 100px;
    }

    .inner-subbanner .subbanner {
        width: 100%;
        height: 350px;
    }

    .about-counter h2 {
        font-family: var(--body-font);
        font-size: 14px;
    }

    .about-counter h2 span {
        font-size: 28px;
    }

    .sub-head {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .navbar-nav .nav-link {
        font-size: 16px;
    }

    .navbar-nav .nav-link.active {
        transform: scale(1.1);
    }

    .navbar-nav .nav-link::after {
        bottom: -18px;
    }

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

    .vision-image {
        width: 230px;
        height: 230px;
    }

    .achive-card h4 {
        font-size: 16px;
    }

    .achive-card {
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: center;
    }

    .achive-card .achive-overlay {
        position: absolute;
        top: -35px;
        left: 8%;
        width: 55px;
        height: 55px;
    }

    .achive-card .achive-overlay {
        position: absolute;
        top: -25px;
    }

    .inner-product-section .container-fluid {
        width: 98%;
    }

}

/* ========== Large Devices (Laptops, 992px and up) ========== */
@media screen and (max-width: 992px) {
    .top-bar .contact-info {
        display: none;
    }

    .header-warp .inner-topbar {
        display: flex;
        justify-content: center;
    }

    .hero-carousel .slide {
        width: 100%;
        height: 500px;
    }

    .slide-content h4 {
        font-size: 42px;
    }

    .slide-content {
        margin-left: 150px;
        margin-top: 124px;
    }

    .slide-content {
        margin-left: 80px;
        margin-top: 124px;
    }

    .slide-content .btn-2 {
        padding: 9px 14px;
        display: flex;
        align-items: center;
    }

    .slide-content .btn-1 {
        padding: 9px 14px;
        display: flex;
        align-items: center;
    }

    .about-left {
        display: none;
    }

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

    .header-warp .inner-topbar .social-icons {
        margin-left: 0px;
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-nav .nav-link.active {
        transform: scale(1);
    }

    .inner-subbanner .subbanner {
        width: 100%;
        height: 270px;
    }

    .abouts-left img {
        width: 400px;
    }

    .inner-abouts {
        padding: 40px 0px;
    }

    .vision-container {
        padding: 30px 5px;
    }

    .vision-mission,
    .vision-vision {
        padding: 11px;
    }

    .serve-img-main .serve-overlay p {
        font-size: 16px;
    }

    .abouts-left {
        display: none;
    }

    .contact-overlay-right {
        display: none;
    }

    .contact-section {
        padding: 14px 20px;
        border-radius: 8px;
    }

    .search-box input {
        border: none;
        background: transparent;
        padding: 3px 6px;
        font-family: var(--body-font);
        width: 150px;
    }

    .topbar-left .category-title {
        font-family: var(--sub-headfont);
        font-size: 20px;
    }

    .modal-left img {
        width: 300px;
        height: 300px;
    }

        .inner-product-section .container-fluid {
            width: 70%;
        }

}


/* ========== Medium Devices (Tablets, 768px and up) ========== */
@media screen and (max-width: 850px) {
    .search-box input {
        width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .navbar-brand img {
        padding-left: 10px;
        max-height: 70px;
    }

    .search-box input {
        width: 175px;
    }

    /* header {
        width: 90%;
        max-width: 550px;
    } */
      .inner-product-section .container-fluid {
        width: 90%;
    }

    .slide-content {
        margin-left: 80px;
        margin-top: 80px;
    }

    .about-overlay img {
        width: 260px;
    }

    .about-right h2 {
        font-size: 26px;
    }

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

    .do-inner .container {
        width: 98%;
    }

    .do-inner .item {
        margin: 0px 0px;
        padding: 20px 0px;
    }

    .sub-head {
        font-size: 26px;
    }

    .work-inner .item .work-img {
        width: 70px;
        height: 70px;
    }

    .work-inner .item .work-content h2 {
        font-size: 26px;
    }

    .work-inner .item .work-content p {
        color: #fff;
        font-size: 16px;
    }

    .work-inner .container {
        width: 95%;
    }

    .do-overlay img {
        width: 200px;
    }

    .inner-form .form-content {
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .inner-form {
        width: 100%;
        height: 625px;
    }

    .inner-form .form-content {
        width: 500px;
    }

    .inner-product .product {
        margin: 0px 0px;
        padding: 20px 10px 5px 10px;
    }

    .click-btn {
        margin: 15px 0px;
    }

    .vision-container {
        flex-direction: column;
    }

    .vision-image {
        /* order: -1; */
        margin-bottom: 20px;
    }

    .vision-mission,
    .vision-vision {
        text-align: center;
    }

    .vision-container {
        padding: 10px 5px;
    }

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

    .info-contact::after {
        display: none;
    }

    .search-box input {
        width: 145px;
    }

    .inner-form .form-content {

        padding: 15px 30px;
    }

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

/* ========== Small Devices (Large Phones, 576px and up) ========== */
@media screen and (max-width: 576px) {
    .custom-nav-btn {
        font-size: 18px;
        width: 30px;
        height: 30px;
    }

    .slide-content .btn-2 {
        padding: 8px 14px;
    }

    .do-inner .item {
        margin: 0px 20px;
        padding: 5px 0px;
    }

    .testimonial-overlay img {
        width: 159px;
    }

    .inner-form .form-content {
        width: 400px;
        padding: 20px 10px;
    }

    .testimonial-card {
        margin: 10px 10px;
    }

    .testimonial-overlay-2 {
        top: 12%;
        right: 10px;
        width: 50px;
    }

    .testimonial-overlay-1 {
        bottom: 0%;
        right: 10px;
        width: 70px;
    }
   .inner-product-section .container-fluid {
        width: 98%;
    }
    .inner-subbanner .subbanner {
        width: 100%;
        height: 250px;
    }

    .about-counter h2 {
        font-size: 12px;
    }

    .about-counter h2 span {
        font-size: 24px;
    }

    .abouts-right p {
        font-size: 15px;
    }

    .inner-contact h2 {
        font-size: 24px;
    }

    .inner-contact a {
        font-size: 1rem;
    }

    .inner-contact .contact-btn {
        margin: 10px 0;
        border-radius: 50px;
        padding: 5px 25px;
        font-size: 18px;
    }

    .inner-contact {
        padding: 10px 15px;
    }

    .inner-contact h2 {
        margin-bottom: 6px;
    }

    .serve-img-main .serve-overlay {
        position: absolute;
        top: 25%;
        left: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .serve-img-main .serve-overlay p {
        font-size: 15px;
    }

    .inner-abouts .about-overlay1 img {
        width: 100%;
        height: 150px;
    }

    .contact-section {
        padding: 20px 20px;
    }

    .search-box input {
        width: 115px;
    }

    .filter-btn {
        display: none;
    }

    .product-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .topbar-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .category-title {
        font-size: 1.2rem;
        margin: 0;
        /* remove default margin */
    }

    .view-toggle-tabs {
        display: flex;
        gap: 5px;
    }

    .topbar-center {
        order: 2;
        /* push search bar below category + grid toggle */
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .filter-btn {
        margin-top: 8px;
        margin-left: auto;
        display: block;
    }

    .category-btn {
        width: 60%;
    }

    .inner-product-section {
        padding: 30px 0px;
    }

    .modal-left img {
        width: 200px;
        height: 200px;
    }

    .form-control {
        margin-bottom: 15px;
    }

    .custom-nav-btn {
        font-size: 18px;
        width: 25px;
        height: 25px;
    }

    .custom-nav-btn.prev {
        left: 10px;
    }

    .custom-nav-btn.next {
        right: 10px;
    }

    .custom-nav-btn {
        font-size: 12px;
    }
}



/* ========== Extra Small Devices (Small Phones, 480px and down) ========== */
@media screen and (max-width: 425px) {
    .slide-content {
        margin-left: 20px;
        margin-top: 90px;
    }

    .slide-content h3 {
        font-size: 18px;
    }

    .slide-content h4 {
        font-size: 32px;
    }

    .hero-carousel .slide {
        width: 100%;
        height: 400px;
    }

    .custom-nav-btn {
        top: 90%;
    }

    .custom-nav-btn.prev {
        right: 50px !important;
    }

    .about-right h2 {
        font-size: 24px;
    }

    .about-right h3 {
        font-size: 20px;
    }

    .about-right h3 {
        font-size: 20px;
    }

    .sub-head {
        font-size: 20px;
    }

    .inner-form .form-content {
        width: 350px;
        padding: 20px 10px;
    }

    .link-product a {
        margin-top: 30px;
    }

    .slide-content {
        margin-left: 20px;
        margin-top: 140px;
    }

    .custom-nav-btn {
        top: 65%;
    }

    .hero-carousel .slide {
        width: 100%;
        height: 430px;
    }

    .header-warp .top-bar {
        margin: 0px auto;
        width: 75%;
    }

    .copy {
        font-size: 14px;
    }

    .inner-contact h2 {
        font-size: 20px;
    }

    .breadcrumb-item {
        color: #fff;
        font-size: 12px;
    }

    .product-topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .feature-list li {
        position: relative;
        padding-left: 1px;
    }

    .feature-list li::before {
        content: "";
        position: absolute;
        left: -18px;
    }

    .modal .col-md-7 {
        padding: 15px;
    }

}


/* ========== Tiny Devices (Super Small Phones, 375px and down) ========== */
@media screen and (max-width: 375px) {
    .slide-content h4 {
        font-size: 28px;
    }

    .inner-form .form-content {
        width: 340px;
        padding: 20px 10px;
    }

    .about-counter h2 {
        font-size: 12px;
    }

    .about-counter h2 span {
        font-size: 20px;
    }

    .about-counter {
        padding: 15px !important;
    }
}

@media screen and (max-width: 350px) {
    .slide-content h4 {
        font-size: 28px;
    }

    .inner-form .form-content {
        width: 300px;
        padding: 20px 10px;
    }
}