﻿
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .services .MainService {
        height: 280px;
        width: auto;
    }
    .clients-opinion-slider .owl-nav {
       
        right: 0;
      
    }
    }

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

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

    .loop-img {
     
        width: 300px;
       
    }
    .loop-middle {
        height: 210px;
        bottom: 25%;
        /*right: 0;*/
    }
       
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .loop-img {
        width: 400px;
    }
    .CareerHeader .dots2 {
        right: 0;
    }
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
   
}


/*// `sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .blogs-middle {
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    }
    .SecondBlock, .MiddleBlock {
        display: none;
    }
    .joinForm {
        width: auto;
    }
    .CareerHeader .FirstImg {
        width: auto;
    }
    .loop-middle {
        /*right: 0;*/
        width: 100%;
    }
    .owl-carousel {
        direction: ltr;
        text-align: -webkit-center;
    }
    .serviceCard .ImgCard, .serviceCard .DetailsCard {
        width: 100%;
      
    }
    .explore-services .EllipsImg {
        width: 100%;
    }
    .JoinTeam {
        height: 100%;
    }
        .JoinTeam .blockImg {
            width: auto;
        }
    .filter-menu {
        width: 100%;
        overflow: auto;
    }
    .Home-up {
        flex-direction: column;
    }
    .choose-bottom {
        height: auto;
        column-gap: 0;
        flex-direction: column;
    }

   
    .Home-left {
        width: 100%;
    }
    .Home-img {
        width: 100%;
    }
    .blogs-middle {
        display: block !important;
    }
    .clients-opinion-slider .owl-nav {
        right: 0;
    }
    .loop-img {
        height: 400px;
        width: 100%;
    }
        .loop-img img{
            border-radius: 20px 20px 0 0;
        }
    .loop-middle {
      
        padding: 20px;
        height: 220px;
    }
        .loop-middle .input-group {
            width: 100%;
        }
    .LineBlock {
     
        display: none;
    }
    .service-down-left .service-item {
     
        margin-bottom: 33%;
    }
        .service-down-left .service-item h5 {
            height: 96px;
            top: 80%;
        }
    .choose-bottom-middle {
        top: 0;
    }

    .service-up h2 {
        width: 100%
    }
    .solution-item {
      
        height: auto;
    }

    .TeamImage .Details p.TopDesc {
        width: 100%;
        margin: auto;
        font-size: 20px;
    }

    }

/*// `md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .CareerHeader .dots2 {
        display: none;
        right: 0;
    }
    .clients-opinion-slider .owl-nav {
        right: 0;
    }
    .loop-img {
        height: 400px;
        width: 100%;
    }
        .loop-img img {
            border-radius: 20px 20px 0 0;
        }
    .loop-middle {
        padding: 20px;
        height: 220px;
    }
        .loop-middle .input-group {
          
            width: 100%;
        }
            .blogs-middle {
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    }
    .service-down-left .service-item {
        margin-bottom: 33%;
    }
    .service-up h2 {
     
        width: 100%
    }
    .solution-item {
        height: auto;
    }

    .TeamImage .Details p.TopDesc {
        width: 100%;
        margin: auto;
        font-size: 20px;
    }

        .choose-bottom-middle {
       
        top: 0;
    }

        .service-down-left .service-item h5 {
            height: 96px;
            top: 0%;
        }
            .LineBlock {
        display: none;
    }
    .SecondBlock, .MiddleBlock{
        display:none;
    }
    .joinForm {
     
        width: auto;
    }
    .CareerHeader .FirstImg {
        width: auto;
    }
    .loop-middle {
        /*right: 0;*/
        width:100%;
    }
    .owl-carousel {
        direction: ltr;
        text-align: -webkit-center;
    }
    .serviceCard .ImgCard, .serviceCard .DetailsCard {
        width: 100%;
        height: 300px;
        border-radius: 15px;
    }
    .explore-services .EllipsImg {
      
        width: 100%;
      
    }
    .JoinTeam {
        height: 100%;
    }
        .JoinTeam .blockImg {
            width: auto;
        }

    .filter-menu {
        width: 100%;
        overflow: auto;
    }
    .Home-up {
        flex-direction: column;
    }
    .choose-bottom {
        height: auto;
        column-gap: 0;
        flex-direction: column;
    }
    .Home-left {
        width: 100%;
    }

    .Home-img {
        width: 100%;
    }
    .blogs-middle {
        display: flex !important;
        flex-direction:column;
    }
    }

/*// `lg` applies to medium devices (tablets, less than 992px)*/
@media (min-width: 992px) and (max-width:1200px) {
    .navbar-nav.cust-ul {
        width: 100% !important;
    }

    .CareerHeader .dots2 {
        display: none;
        right: 0;
    }

    .worksNav {
        right: auto;
        display: none;
    }

    .LMS-header .BackImg {
        position: absolute;
        width: 100%;
        height: 220px;
        border-radius: 15px;
        top: 30%;
        left: 0;
        right: auto;
    }

    .LMS-header .BackOver {
        width: 244px;
        height: 240px;
        border-radius: 15px;
        background: #E9F9FED1;
        position: relative;
        top: 24%;
        left: 11%;
    }

    .featureImg {
        width: 100%;
        height: 400px;
    }

    .projectCard .WhatProjectSay {
        display: block !important;
    }

    .ProjectData {
        margin-top: 30px;
    }

    section.Features.my-5 {
        padding: 20px;
    }

    .backContent {
        left: 0;
    }

    section {
        margin-top: 0;
        padding: 32px 0;
    }

    .projectCard .featureImg {
        position: relative;
        text-align: center;
        margin: auto;
    }

    .OverView .OverViewBlock {
        height: 428px;
        overflow: hidden;
        overflow-y: scroll;
        padding: 30px;
        padding-bottom: 45px;
    }

    .OverViewBlock p.overDesc {
        padding: 41px;
        text-align: center !important;
    }

    .projectCard .ImgCard, .projectCard .DetailsCard {
        width: 100%;
        height: 100%;
    }

    .blob .ImgCover img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .blob .ImgCover {
        height: 360px;
        position: relative;
        top: 0;
    }

    .serviceCard {
        display: block !important;
    }

    .blob {
        width: 100%;
        height: 350px;
        top: 20px;
        overflow: visible;
        float: unset;
    }

    .service-item {
        width: 100%;
        display: block !important;
    }

    .service-page-item-img {
        width: 100%;
    }

    .Projects.innerServices .service-down-left .service-item h4 {
        position: relative;
        width: 100%;
    }

    .serviceDetails .icon {
        left: -5px;
    }

    .HorizontalBlog .blog-item {
        width: 100%;
    }

    .about-our-company {
        display: none;
    }

    .about-our-company-right {
        margin-top: 20%;
    }

    .mission-down-right {
        float: none;
        margin-top: 40px;
    }

    .services .MainService {
        height: 280px;
        width: auto;
    }

    .joinForm {
        width: auto;
    }

    .CareerHeader .FirstImg {
        width: auto;
    }

    .loop-middle {
        right: auto;
        /*width: 100%;*/
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /*left: 10%;*/
        background: aliceblue;
        border-radius: 20px;
        opacity: 1;
        position: relative;
        padding: 20px;
        height: 100%;
        bottom:0;
    }

    .explore-services .EllipsImg {
        width: 100%;
    }

    .JoinTeam {
        height: 100%;
    }

        .JoinTeam .blockImg {
            width: auto;
        }

    .filter-menu {
        width: 100%;
        overflow: auto;
    }

    .Home-up {
        flex-direction: column;
    }

    .choose-bottom {
        height: auto;
        column-gap: 0;
        flex-direction: column;
    }

    .Home-left {
        width: 100%;
    }

    .Home-img {
        width: 100%;
    }

    .solution-item {
        width: 100%;
        text-align: start;
    }

    .loop-details .col-md-5, .loop-details .col-md-7 {
        width: 100%;
        text-align: center;
    }

    .loop-details .loop-img {
        width: 100%;
        height: 300px;
    }
}
/*// `xl` applies to large devices (desktops, less than 1200px)*/
    @media (max-width: 1199.98px) {
        .service-down-left .service-item h5 {
            left: 2.5rem;
            top: 45%;
        }
        .navbar-nav.cust-ul {
            width: 82% !important;
        }
        .CareerHeader .dots2 {
            right: 0;
        }
    }

/*// `xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
   
}
@media (max-width: 991px) {
    .worksNav {
        display: none;
    }
    .loop-middle {
        position:inherit;
    }

    .loop-img {
        height: 400px;
        width: 100%;
    }
    .row.loop-details{
        padding:20px;
    }
    .loop-img img {
    
        border-radius: 20px;
    }
    }
