@media screen and (min-width: 568px) {
    .industries-slider-wrapper {
        width: 50vw;
    }
}

@media screen and (min-width: 991px) {
    .industries-sec .swiper-slide {
        width: 32% !important;
    }

    .industries-sec .swiper-slide.swiper-slide-active {
        width: 36% !important;
    }

    .industries-slider-wrapper {
        width: 90vw;
    }
}

@media screen and (min-width: 1200px) {
    .industries-sec .swiper-slide {
        width: 18.55% !important;
    }

    .industries-sec .swiper-slide.swiper-slide-active {
        width: 24% !important;
    }
}

@media screen and (min-width: 1025px) {

    /*----------  Header  ----------*/
    li:hover .sub-menu {
        transform: translate(0);
        visibility: visible;
        opacity: 1;
    }

    li:hover>a {
        color: #0391F1;
    }

    li:hover>.arrow::before {
        border-color: #0391F1;
    }

    .sub-menu>li:hover>a {
        color: #0391F1;
    }

    .footer li:hover>a {
        color: #fff;
        text-decoration: underline;
    }

    /*----------  Home Start  ----------*/
    .industries-card:hover img {
        scale: 1.1;
    }

    .industries-card:hover .industries-img-box::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 16.42%, #00CDF5 85.56%);
    }

    .industries-button-wrapper>div:hover {
        background: #0096FF70;
    }

    .slider-button-wrapper>div:hover {
        background: rgba(0, 150, 255, 0.439);
    }

    .slider-button-wrapper>div:hover::after {
        color: #fff;
    }

    .product-card:hover {
        color: #000;
        border: 1px solid rgba(0, 87, 149, 0.451);
        box-shadow: 0px 0px 14px 10px rgba(0, 205, 245, 0.071);
    }

    .product-card:hover img {
        scale: 1.1;
    }

    .product-card:hover .product-card-button {
        background: #0391F1;
        border-color: #0391F1;
        color: #fff;
    }

    .benefits-card:hover {
        border: 1px solid #038FF1;
        box-shadow: 0px 0px 5px 5px #00AEEF1A;
    }

    .benefits-card:hover .benefits-title {
        color: #038FF1;
    }


    /*----------  Product  ----------*/
    .breadcrumb a:hover {
        color: #01C9F5;
    }

}

@media screen and (max-width: 1660px) {
    .get-in-touch-sec .img-box {
        left: -50px;
    }
}

@media screen and (max-width: 1460px) {
    .site-logo img {
        height: 70px;
    }

    .menu li>a {
        padding: 12px 20px;
    }

    .menu li .arrow {
        top: 13px;
        right: 15px;
    }
}

@media screen and (max-width: 1367px) {
    .get-in-touch-sec .img-box {
        left: 0px;
    }
}

@media screen and (max-width: 1199px) {
    .header {
        padding-block: 20px;
    }

    .overlay {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 8;
        transform: translateX(-100%);
        transition: .4s all ease-in-out;
    }

    .menu-open .overlay {
        transform: translateX(0);
    }

    .header .navigation-bar {
        display: block;
    }

    .navigation-bar {
        width: 100vh;
        min-width: 500px;
        background: linear-gradient(90deg, #0390F1 0%, #00CAF5 100%);
        padding: 0;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 9;
        padding: 0 30px 30px;
        transform: translateX(-100%);
        transition: .6s all ease-in-out;
    }

    .menu-open .navigation-bar {
        transform: translate(0);
    }

    .mobile-menu-logo-wrapper {
        /* background-color: #22355D; */
        padding-block: 30px;
    }

    .menu {
        display: block;
        /* flex-direction: column; */
        max-height: 93vh;
        overflow: auto;
    }

    .menu li>a {
        color: #fff;
        padding-left: 0;
        font-size: 20px;
    }

    .menu .sub-menu li>a {
        font-size: 17px;
    }

    .menu li+li,
    .menu .sub-menu li+li {
        border-top: 1px solid #ffffff4a;
    }

    .menu .sub-menu li:last-child {
        border-bottom: none;
    }

    .menu li:last-child {
        border-bottom: 1px solid #ffffff4a;
    }

    .menu li .arrow {
        top: 0;
        padding: 20px 13px;
        right: 0;
    }

    .menu li .arrow::before {
        width: 15px;
        height: 15px;
        border-color: #fff;
        transform: rotate(45deg) translate(-4px, -6px);
    }

    .menu-item-has-children {
        padding-right: 30px;
    }

    .menu .sub-menu {
        position: unset;
        width: auto;
        border-top: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 15px;
        display: none;
        transition: none;
    }

    .menu-close {
        display: block !important;
        position: relative;
        z-index: 9;
        top: -9px;
        aspect-ratio: 1/1;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .menu-close span {
        width: 100% !important;
        margin: 0 !important;
        background: #fff;
    }

    .menu-close span:nth-child(1) {
        transform: rotate(45deg) translate(10px, 12px);
    }

    .menu-close span:nth-child(2) {
        width: 0;
        height: 0;
        transform: translate(10px, 10px);
    }

    .menu-close span:nth-child(3) {
        transform: rotate(-45deg) translate(-10px, 8px);
    }

    .menu-open .head-button-wrapper {
        padding-right: 0;
        position: fixed;
        z-index: 999;
        top: 40px;
        right: 40px;
    }

    .menu-open .head-button-wrapper .btn {
        margin-right: 10px;
        background: #fff;
        color: #00CDF5;
        border-color: #fff;
    }

    .menu li>a {
        padding-block: 22px;
    }

    /* Home */
    .hero-sec {
        height: 50vh;
        min-height: 400px;
    }

    .header .btn {
        margin-left: 0;
        margin-right: 0;
    }

    .get-in-touch-sec img {
        width: 500px;
        margin-left: -40px;
    }
}

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

    /*----------  Home  ----------*/
    .industries-head-wrapper,
    .products-head-wrapper,
    .testimonials-head-wrapper {
        justify-content: space-between;
        flex-direction: column;
        row-gap: 30px;
    }

    .industries-button-wrapper,
    .slider-button-wrapper {
        position: unset;
    }

    .why-content-box {
        padding-top: 20px;
        padding-left: 0;
    }

    .get-in-touch-sec .img-box {
        display: none;
    }

    .form-box {
        flex: 0 0 100%;
    }
}

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

@media screen and (max-width: 568px) {
    .industries-slider-wrapper {
        width: 70vw;
    }

    .header {
        padding-block: 10px;
    }

    .navigation-bar {
        width: 100%;
        padding: 0 20px 20px;
        min-width: auto;
    }

    .mobile-menu-logo-wrapper {
        padding-block: 20px;
    }

    .menu-logo img {
        height: 65px;
    }

    .menu-close {
        /* top: 20px; */
    }

    .menu-open .head-button-wrapper {
        top: 35px;
        right: 20px;
    }

    .head-button-wrapper .btn {
        margin-right: 0;
    }

    .sticky-header .site-logo img {
        height: 50px;
    }

    /* .menu-toggle-button span:nth-child(2) {
        width: 25px;
    } */
    /* 
    .menu-toggle-button span {
        margin-left: 0;
        height: 2px;
    } */
    /*----------  Home  ----------*/
    .site-logo img {
        height: 60px;
    }

    .hero-sec {
        background: #D2EBFD;
        height: auto;
        background-blend-mode: color;
    }

    .hero-sec .container {
        padding-inline: 0;
    }

    .hero-sec .col-xl-4 {
        padding-top: 50px;
        padding-inline: 30px !important;
    }

    .hero-sec .img-box {
        margin-top: -60px;
    }

    .header .navigation-bar {
        display: block;
    }

    .about-content-box {
        padding-top: 30px;
    }

    /*----------  Footer  ----------*/
    .copyright-sec .row {
        justify-content: center !important;
        text-align: center;
    }

    footer .col-lg-3:last-child {
        margin-top: 40px;
    }

    .about-img-box {
        margin-inline: -15px;
        aspect-ratio: 5/3;
    }
}

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