@media screen and (max-width:768px) {
    .img-fill {
        height: 60vh;
        display: flex;
        align-items: center;
    }

    .prev-arrow,
    .next-arrow {
        font: 20px/30px FontAwesome;
        width: 30px;
        height: 30px;
    }

    .img-fill .info {
        top: 15%;
        text-align: center;
        width: 100%;
        left: 0;
    }

    .img-fill .info p {
        margin: auto;
    }

    .img-fill .info .d-flex {
        margin-top: 20px;
        justify-content: center;
    }

    .about-heading p {
        max-width: 100%;
        font-size: 22px;
        margin-top: 18px;
        text-align: center;
    }

    .about-us-subheading {
        font-size: 14px;
        line-height: 22px;
        text-align: center;
    }

    .about-us-tab {
        margin-top: 22px;
    }

    .about-us-tab ul {
        justify-content: center;
    }

    .about-us-tab .tab-content {
        text-align: center;
    }

    .about-us-tab ul li {
        font-size: 16px;
    }

    .why-points li {
        width: 47%;
    }

    .services-card {
        top: -90px;
    }

    .slick-dotted.slick-slider {
        margin-bottom: 40px !important;
    }

    .product-card .card-image {
        width: 55%;
        height: 110px;
    }
    .call-to-action p{
        font-size: 16px;
    }
    .services-hero .hero-slide{
        padding: 0 15px;
    }
    .common-filter select {
        width: 48%;
        max-width: 48%;
    }
}

/* === MOBILE STYLE === */
@media (max-width: 768px) {

    .step-progress-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 20px 16px;
    }

    .step {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        text-align: left;
        position: relative;
        padding-top: 30px;
        margin: 0;

    }

    .circle {
        flex-shrink: 0;
        margin-top: 4px;
    }

    .line {
        left: 18px;
        top: 70px;
        width: 2px;
        height: 100%;
    }

    .label {
        margin-top: 0;
        text-align: left;
    }
}

@media screen and (max-width:540px) {
    .chchips-d-contaoner {
        display: none;
    }

    .chips-m-contaoner {
        display: flex;
        justify-content: center;
        margin: 16px 0;
    }

    .img-fill .info h3 {
        font-size: 24px;
    }

    .sections .heading p,
    .sub-section .heading p,
    .sub-section .heading strong,
    .sections .heading strong,
    .sub-section .heading,
    .services-section .conents h1 p {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
    }

    .sections .sub-heading p,
    .sub-section .sub-heading,
    .sub-section .sub-heading p,
    .sub-section .sub-heading-normal p,
    .services-section .conents p {
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    .services-section .slick-dots li button {
        background: transparent !important;
        border: 1px solid black !important;
        width: 11px !important;
        height: 11px !important;
        border-radius: 50% !important;
    }

    .services-section .slick-dots li.slick-active button {
        background: var(--Brand-color) !important;
        border: 1px solid var(--Brand-color) !important;

    }

    .slick-dots li button:before {
        content: none !important;
    }

    .services-section .slick-dots {
        bottom: -35px;
    }

    .product-section {
        padding: 20px 0 20px 0;
    }

    .page-template-about-us .sub-section,
    .sub-section,
    .services-section {
        padding: 20px 0;
    }

    .call-to-action h2 {
        text-align: center;
        font-size: 20px;
        line-height: 22px;
    }

    .call-to-action .button-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .sub-section.features ul {
        margin-top: 30px;
        justify-content: center;
        align-items: anchor-center;

    }

    .product-card {
        flex-direction: column;
    }

    .sub-section .sub-heading {
        border-left: none;
    }

    .sub-section .infos {
        gap: 14px;
    }

    .sub-section .heading p {
        margin: 0;
    }
}