@media screen and (max-width: 1100px) {

    body p,
    .about-col .col-2 ul li {
        font-size: 16px;
    }

    .main-menu .menu {
        gap: 15px;
    }

    .main-banner-slider .full-banner-img {
        height: 450px;
    }

    .banner-content h2 {
        max-width: 500px;
        font-size: 40px;
    }

    .main-title,
    .contact-box .phone-number a {
        font-size: 25px;
    }

    .count-section .count-box {
        gap: 20px;
    }

    .count-box .box h5 {
        font-size: 40px;
    }

    .contact-box h2 {
        font-size: 25px;
    }

    .count-box .box {
        padding: 15px;
    }

    .banner-txt {
        min-height: 240px;
    }

    .contact-banner .banner-txt {
        min-height: 300px;
    }

    .solution-box,
    .catalogue-box {
        grid-template-columns: repeat(4, 1fr);
    }

    .about-section .about .col-1:nth-child(2) {
        max-width: 370px;
    }
}

@media screen and (max-width: 1023px) {
	.main-header .whatsapp-icon {
		margin-left: auto;
		margin-right: 15px;
	}
    .main-header .toggle {
        display: flex;
    }

    .main-menu {
        position: fixed;
        background-color: #fff;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        padding: 15px;
        height: 100vh;
        display: none;
    }

    .main-menu.open-menus {
        display: block;
    }

    .main-menu button.close-icon {
        margin-left: auto;
    }

    .main-header {
        padding: 15px 0;
    }

    .main-menu .menu-header-menu-container {
        margin-top: 30px;
        border-top: 1px solid #ddd;
    }

    .main-menu .menu {
        gap: 0;
        flex-direction: column;
        height: calc(100vh - 108px);
        overflow-y: auto;
    }

    .main-menu .menu li {
        width: 100%;
    }

    .main-menu .menu a {
        border-bottom: 1px solid #ddd;
        padding: 15px;
        color: #000;
    }

    .main-menu .menu .sub-menu {
        position: static;
        padding: 0;
        min-width: 100%;
        box-shadow: none;
    }

    .main-menu .menu .sub-menu a {
        padding: 10px 20px;
        font-size: 16px;
    }

    .footer-section .col-1 .logo {
        max-width: 160px;
    }

    .about-section .about {
        gap: 20px;
    }

    .count-section .count-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-box .input-group {
        grid-template-columns: repeat(1, 1fr);
    }

    .featured-box,
    .contact-form {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .banner-txt h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .solution-box,
    .catalogue-box {
        grid-template-columns: repeat(3, 1fr);
    }

    .solution-box .box .detail h3 {
        font-size: 16px;
    }

    .catalogue-box {
        gap: 15px;
    }

    .solution-box .box .full-img {
        height: 230px;
    }

    .contact-banner .banner-txt {
        min-height: 220px;
    }

    .footer-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .about.career-about {
        flex-flow: column;
    }

    .about-section .about.career-about .col-1:nth-child(2) {
        max-width: 100%;
    }

    .banner-txt {
        min-height: 210px;
    }
}

@media screen and (max-width: 767px) {
    .section-gapping {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .top-gapping {
        padding-top: 40px;
    }

    .bottom-gapping {
        padding-bottom: 40px;
    }

    .top-header {
        padding: 5px 0;
    }

    .top-header .contact-detail li a {
        gap: 0;
        font-size: 0;
    }

    .main-header .logo {
        max-width: 190px;
    }

    .footer-section {
        flex-direction: column;
    }

    .main-banner-slider .full-banner-img {
        height: 300px;
    }

    .banner-content h2 {
        font-size: 25px;
        max-width: 305px;
    }

    .contact-box,
    .about-col,
    .about-section.home-about .about {
        grid-template-columns: repeat(1, 1fr);
    }

    .count-section .count-box {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        width: 100%;
    }

    .contact-box {
        gap: 20px;
    }

    .banner-txt h2 {
        font-size: 20px;
    }

    .inner-banner .breadcrumb li {
        font-size: 16px;
    }

    .contact-form .form-box {
        padding: 15px;
    }

    .map-section iframe {
        height: 250px;
    }

    .mb-40 {
        margin-bottom: 20px;
    }

    .error-404 h1 {
        font-size: 32px;
    }

    .about-col {
        gap: 20px;
    }

    .about-col .col-2 h3 {
        font-size: 26px;
    }

    .about-col .col-1 {
        order: 1;
    }

    .about-col .col-2 {
        order: 2;
    }

    .career-form .form-box {
        padding: 15px;
    }

    .post-contain h3 {
        font-size: 22px;
    }

    .post-contain {
        font-size: 16px;
    }

    .solution-box .box .full-img {
        height: 200px;
    }

    .inner-banner .breadcrumb {
        min-height: 40px;
        padding: 0 20px;
    }

    .call-action {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .call-action p {
        font-size: 18px;
    }

    .call-action h2 {
        font-size: 25px;
    }

    .banner-txt {
        min-height: 250px;
    }

    .about-section .about {
        flex-direction: column;
    }

    .about-section .about .col-1:nth-child(2) {
        max-width: 100%;
    }

    .catalogue-box .detail h3 {
        font-size: 14px;
    }

    .about.about-box .small-title {
        font-size: 25px;
    }

    .about-section .about .main-title {
        font-size: 20px;
    }

    .solution-box .box .detail {
        padding: 10px;
    }

    .solution-box .box .detail h3 {
        font-size: 14px;
    }

    .footer-section .menu#menu-product-menu {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 460px) {

    .count-section .count-box,
    .post-sidebar-section .boxs {
        grid-template-columns: repeat(1, 1fr);
        max-width: 400px;
    }

    .about-section .col-1 .main-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .solution-box .box .full-img {
        height: 170px;
    }

    .solution-box,
    .catalogue-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-section {
        grid-template-columns: repeat(1, 1fr);
    }
}