@media only screen and (max-width: 767px) {
    section.case-studies,
    .device-class,
    .left-banner,
    .solution-sec video {
        display: none;
    }
    .case-section p {
        font-size: 12px;
        line-height: 22px;
    }
    /******banner*******/
    section.our-service {
        width: 100%;
    }
    .right-banner {
        width: 95%;
        text-align: center;
    }
    .right-banner h2:after {
        width: 40px;
        height: 40px;
        top: 20px;
        right: -35px;
    }
    .header-content {
        padding-top: 0px;
    }
    .our-service-head h5,
    .our-clients-head h6,
    .achivement-head h3,
    .studies-head h3 {
        font-size: 22px !important;
    }
    .right-banner h2,
    .text-type {
        width: 100%;
        font-size: 17px;
    }
    .ml4 {
        display: inline;
    }
    .ml4 .text-wrapper2 {
        left: 125px;
    }
    .right-banner h2:after {
        display: none;
    }
    .page-btn {
        width: 100%;
        padding-top: 0px;
        margin: 0 auto;
    }
    .explore-btn {
        font-size: 14px;
        padding: 5px 0;
        width: 120px;
        height: 30px;
    }
    .theme-btn {
        width: 160px !important;
        font-size: 12px;
        height: 40px;
        padding: 12px 5px;
    }
    .kit-view {
        width: 150px;
        height: 40px;
        padding: 4px 0;
        font-size: 12px;
    }
    .theme-btn span {
        width: 12px;
        height: 12px;
    }
    /******problem-part*******/
    .problem-heading,
    .problem-heading p {
        width: 100%;
    }
    .problem-heading p .problem-tab {
        padding: 0px;
        height: auto;
    }
    .problemtab-heading {
        width: 100%;
    }
    .problem-heading h3 {
        font-size: 22px;
    }
    .myslider {
        width: 100%;
    }
    div#v-pills-tab a p {
        font-size: 12px;
        line-height: 22px;
    }
    .pro-head {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
    .tab-image {
        width: 100%;
        margin: 14% 0;
        height: auto;
    }
    /*******solution-part*******/
    .solution-parts h4 {
        font-size: 22px;
        line-height: 46px;
    }
    .solution-parts h4 span svg {
        top: -7px;
        left: 0px;
        width: 135px;
        height: 48px;
    }
    .solution-parts {
        padding-right: 0;
        padding-bottom: 80px;
        padding-top: 0;
    }
    .solution-layout {
        width: 100%;
        flex-wrap: wrap;
    }
    .solution-parts ul {
        width: 100%;
    }
    .solution-parts ul li {
        width: 100%;
    }
    .solution-parts ul li:nth-child(2) {
        margin: 0;
    }
    .solution-parts ul li img {
        width: 100% !important;
        height: auto !important;
    }
    .four-parts {
        width: 100%;
    }
    .four-parts .solution-text {
        font-size: 18px;
    }
    .solution-right:before,
    .solution-right:after {
        display: none;
    }
    /*******kariotfor-sec*******/
    .for-left {
        display: none;
    }
    .kariotfor .container:before {
        display: none;
    }
    .bubble-spark {
        display: none;
    }
    .kariotfor .container {
        padding: 10px 10px;
    }
    .for-right {
        width: 100%;
    }
    .for-left-box {
        width: 100%;
        padding: 20px 10px;
        margin: 10px 0;
    }
    .for-right-box {
        width: 100%;
        margin: 10px 0;
        padding: 21px 12px;
    }
    .two-boxes,
    .common-box {
        width: 100%;
        margin: 10px 0;
    }
    .common-box .text-count {
        font-size: 20px;
    }
    .for-left-box .text-count {
        font-size: 20px;
    }
    .for-right-box ul {
        width: 280px;
        margin: 0 auto;
    }
    .for-left-box ul {
        width: 282px;
        margin: 0 auto;
    }
    /*******our service*******/
    .our-service-head {
        width: 90%;
    }
    .our-service-head p,
    .residental-left p,
    .our-clients-head p {
        font-size: 14px;
        width: 100%;
    }
    .residental-left .left-p-text {
        font-size: 22px;
    }
    .residental-sec:before {
        width: 100%;
        border-radius: unset;
    }
    .residental-left {
        padding: 21px 30px;
    }
    .residen-part span {
        width: 100%;
    }
    .residental-right span:before {
        left: -6px;
        font-size: 53px;
        top: -90px;
    }
    .commercial-content {
        width: 100%;
        display: block;
        padding: 20px 0;
    }
    .commercial .residental-right span:after {
        display: none;
    }
    .commercial-content .residental-right span video,
    .government .residental-right span video {
        left: 55px;
    }
    .government .residental-right {
        margin-top: 0em;
    }
    .industrial-sec .residental-right span:before {
        top: -120px;
        font-size: 53px;
        left: 0;
    }
    /*******clients*******/
    .our-clients-head {
        width: 100% !important;
    }
    .our-clients ul li img {
        width: 100% !important;
    }
    .our-clients ul li {
        border: 0 !important;
        width: 32%;
        padding: 0 !important;
    }
    /*******contact-us*******/
    section.contact-us {
        padding-top: 0px;
    }
    .contact-left video {
        width: 460px !important;
        left: -110px !important;
        top: 0 !important;
    }
    .contact-left:after {
        right: 0 !important;
        bottom: 30px;
    }
    .contact-right,
    .head-right,
    .contact-left {
        width: 100% !important;
    }
    .contact-left {
        height: 400px !important;
    }
    .head-left {
        width: 100% !important;
        border-right: unset;
    }
    .head-left h4 {
        font-size: 50px;
    }
    .form-part {
        width: 100% !important;
        padding: 8px;
    }
    .form-part .form-group {
        width: 100% !important;
    }
    .radio-data {
        height: 120px !important;
    }
    .check-opt {
        width: 40% !important;
    }
    .captcha-btn {
        width: 100% !important;
    }
    .submit-btn {
        width: 100% !important;
    }
    .residental-right span {
        display: none;
    }
    .video-thiruchendur {
        width: 100%;
        position: absolute;
        top: 30px;
        left: 0;
    }
    .video-thiruchendur:before {
        width: 345px;
        height: 552px;
        top: -34px;
    }
    .monitor-text.lorry-text {
        left: 224px;
        top: 24px;
        width: 70px;
    }
    .lorry-text {
        top: 190px;
        left: 20px;
    }
    .leakage-text.lorry-text {
        left: 159px;
        top: 101px;
    }
    .commercial-img-text .lorry-text {
        left: 61px;
        top: 254px;
    }
    .commercial-img-text .motor-text.lorry-text {
        top: 111px;
    }
    .commercial-img-text .leakage-text.lorry-text {
        width: 76px;
        left: 251px;
        top: 90px;
    }
    .commercial-img-text .leakage-text.lorry-text:after {
        height: 72px;
    }
    .popupform-radio {
        gap: 0px !important;
    }
    .residential-img-text,
    .commercial-img-text,
    .indu-img-text,
    .gov-img-text {
        display: none;
    }
    .left-banner {
        display: none;
    }
    .our-clients ul {
        justify-content: space-between;
    }
    .government .residental-left:before,
    .commercial .residental-left:before {
        display: none;
    }
    .container {
        max-width: 100%;
    }
    .contact-left img {
        margin-left: -80px;
    }
    /*****/
    .contact-slider {
        bottom: 165px;
        left: 45%;
        width: 100%;
    }
    .data-contact {
        width: 75%;
    }
    /* .device-view{
	  display:none;
  } */
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    section.case-studies,
    .device-class,
    .left-banner,
    .solution-sec video {
        display: none;
    }
    .right-banner {
        width: 100%;
    }
    .right-banner h2,
    .text-type {
        font-size: 30px;
        /*width: 50%;*/
    }
    .right-banner h2:after {
        top: 135px;
        right: 0px;
    }
    .ml4 {
        justify-content: flex-start;
    }
    .ml4 .text-wrapper2 {
        left: 0px;
        justify-content: flex-start;
    }
    .contact-right {
        width: 100% !important;
    }
    /* problem-statement */
    .problemtab-heading,
    .myslider {
        width: 100%;
    }
    .problem-heading p {
        width: 90%;
    }
    .tab-image {
        width: 650px;
        margin: 0;
    }
    /* solutions-statement */
    .solution-parts {
        width: 100%;
        padding: 10px 0;
    }
    .solution-layout {
        align-items: flex-start;
        padding-top: 180px;
    }
    .solution-right {
        gap: 10px;
    }
    .solution-parts h4 {
        font-size: 30px;
    }
    .solution-parts h4 span svg {
        position: absolute;
        top: -6px;
        width: 197px;
    }
    .four-parts {
        width: 48%;
    }
    .four-parts p {
        font-size: 12px;
    }
    .solution-parts ul {
        width: 100%;
        gap: 0px;
        left: 0px;
    }
    .solution-parts ul li img {
        width: 100% !important;
        height: auto !important;
    }
    .for-left img {
        width: 267px !important;
        height: auto !important;
    }
    .solution-parts ul li {
        width: 40%;
    }
    .solution-parts ul li:nth-child(2) {
        margin: 0;
    }
    .solution-sec video {
        height: 100% !important;
    }
    .solution-right:after,
    .solution-right:before {
        display: none;
    }
    /***********/
    section.our-service video {
        left: 70px;
        position: relative;
        top: 50px;
    }
    .government .residental-right span video {
        left: -25px;
    }
    .residental-right span {
        margin-top: 0rem !important;
    }
    .for-left {
        top: 170px;
        left: 0px;
        width: 30%;
    }
    .kariotfor .container {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 20px;
        position: relative;
    }
    .kariotfor .container:before {
        display: none;
    }
    .bubble-spark {
        width: 121px;
        height: 217px;
        left: 100px;
        top: 0;
    }
    .for-left-cnt {
        bottom: unset;
        left: 42px;
        top: 97px;
        padding: 0;
        width: 85%;
    }
    .for-left-cnt h6 {
        font-size: 12px;
        font-weight: 700;
    }
    .stage {
        padding: 0 27px;
    }
    .for-left-cnt h5 {
        font-size: 25px;
        line-height: 30px;
    }
    .for-left-cnt p {
        margin-top: 0px;
        font-size: 10px;
        line-height: 16px;
        width: 190px;
    }
    .for-left-cnt+p {
        width: 73%;
        line-height: 15px;
        top: 110px;
        left: 37px;
        display: inline-block;
        font-size: 10px;
    }
    .for-right {
        gap: 15px;
    }
    .for-left-box,
    .for-right-box {
        width: 74%;
        margin: 0 auto;
    }
    .two-boxes {
        width: 100%;
    }
    .litters-water.common-box {
        width: 100%;
        margin: 0 auto;
    }
    .for-bottom-box {
        gap: 15px;
    }
    section.our-service {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    .our-service-head {
        width: 100%;
        margin: 30px 0 0 0;
    }
    .our-service-head p {
        width: 85%;
    }
    /***********/
    .residental-left {
        padding: 35px 10px;
    }
    .residental-left .left-p-text {
        font-size: 30px;
    }
    .residental-right span {
        margin-top: 15em;
    }
    .residental-right span:before,
    .commercial .residental-left:before,
    .government .residental-left:before {
        left: 46px !important;
        font-size: 100px;
        top: 0px !important;
    }
    .commercial .residental-left:before,
    .government .residental-left:before {
        top: -320px !important;
        left: 0px !important;
        font-size: 100px;
    }
    .government .residental-left:before {
        top: -350px !important;
    }
    .residen-part img {
        margin-right: 8px;
    }
    .commercial .residental-right span:after {
        display: none;
    }
    /* clients*/
    /* .our-clients ul li img {
    width: 100% !important;
  } */
    /* case-studies */
    .case-studies-tab .nav-tabs li {
        width: 32%;
    }
    .studies-head h3 {
        font-size: 42px;
    }
    .work-img {
        width: 100%;
        margin-left: 0px;
    }
    .our-service-head h5,
    .our-clients-head h6 {
        font-size: 42px;
    }
    .contact-left {
        top: 87px;
        width: 100%;
        height: 600px;
    }
    .contact-left:after {
        top: 5px;
        right: 0;
    }
    .our-clients ul li {
        border: 0 !important;
        padding: 10px !important;
    }
    .residental-sec:before {
        width: 100%;
        height: 500px;
        border-radius: 0;
    }
    .our-list {
        padding: 35px 0;
        gap: 20px;
    }
    .residen-part {
        width: 48%;
        margin: 0px;
    }
    .commercial-content {
        display: block;
        padding: 0;
    }
    .lorry-text {
        top: 175px;
        left: 200px;
    }
    .leakage-text.lorry-text {
        left: 335px;
        top: 75px;
    }
    .monitor-text.lorry-text {
        left: 405px;
        top: 15px;
    }
    .commercial-img-text .lorry-text {
        left: 126px;
        top: 259px;
    }
    .commercial-img-text .motor-text.lorry-text {
        left: 255px;
        top: 145px;
    }
    .commercial-img-text .leakage-text.lorry-text {
        left: 441px;
        top: 99px;
    }
    .industrial-sec span video {
        top: 0 !important;
    }
    .indu-img-text .lorry-text {
        left: 110px;
        top: 165px;
    }
    .indu-img-text .leakage-text.lorry-text {
        width: 110px;
        left: 300px;
        top: 50px;
    }
    .indu-img-text .level-text.lorry-text {
        left: 560px;
        top: 130px;
    }
    .gov-img-text .lorry-text {
        top: 265px;
        left: 78px;
    }
    .gov-img-text .leakage-text.lorry-text {
        left: 210px;
        top: 190px;
    }
    .gov-img-text .motor-text.lorry-text {
        left: 445px;
        top: 205px;
    }
    .gov-img-text .level-text.lorry-text {
        left: 500px;
        top: 40px;
    }
    .residen-part img {
        width: 22px;
    }
    .residential-img-text,
    .commercial-img-text,
    .indu-img-text,
    .gov-img-text {
        top: -26px;
        left: 13px;
    }
    .indu-img-text {
        top: 0;
    }
    .details-decs li {
        width: 30% !important;
    }
    .enquire-forms .modal-dialog {
        width: 75% !important;
    }
}


/*@media only screen and (max-width: 380px) {
	
.right-banner h2, .text-type {
    width: 100%;
    font-size: 15px;
}
.ml4 .text-wrapper2 {
    left: 120px;
}
	
}*/

@media screen and (min-width: 300px) and (max-width: 567px) {
    .contact-left {
        height: 550px !important;
    }
    .contact-left:after {
        bottom: unset;
        width: 155px;
        height: 125px;
        top: 180px;
    }
    .water-crisis {
        width: 100%;
        transform: translate(-50%, -10%);
        height: 90px;
        bottom: 0px;
        left: 50%;
    }
    .water-crisis span {
        width: 60%;
    }
    .water-crisis p {
        font-size: 14px;
        line-height: 24px;
    }
    .water-crisis p::before {
        left: 20%;
    }
    .water-crisis p::after {
        right: 20%;
    }
    .contact-left video {
        width: 412px !important;
    }
}

@media screen and (min-width: 568px) and (max-width: 767px) {
    .contact-left {
        height: 450px !important;
    }
    .contact-left:after {
        bottom: unset;
        width: 220px;
        height: 160px;
        top: 80px;
    }
    .contact-slider {
        bottom: 145px;
        left: 50%;
    }
    .water-crisis {
        width: 70%;
        transform: translate(-50%, -10%);
        height: 90px;
        bottom: -15px;
    }
    .water-crisis span {
        width: 60%;
    }
    .water-crisis p {
        font-size: 16px;
        line-height: 26px;
    }
    .water-crisis p::before {
        left: 20%;
    }
    .water-crisis p::after {
        right: 20%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .water-crisis {
        width: 440px;
        transform: translate(-50%, -135%);
        height: 95px;
        bottom: -27px;
    }
    .contact-slider {
        width: 420px;
        bottom: unset;
        top: 140px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1300px) {
    /**new-changes***/
    .residental-right span video {
        width: 600px;
    }
    .indu-img-text .level-text.lorry-text {
        left: 459px;
        top: 234px;
    }
}


/***********achivements*************/

@media only screen and (max-width: 991px) {
    .achivement-head h3 span {
        font-size: 84px;
        line-height: 40px;
    }
    .inner-data,
    .inner-data span {
        font-size: 30px !important;
        line-height: 25px !important;
    }
    .achive-sec ul li img {
        object-fit: contain !important;
        width: 100px !important;
    }
}

@media screen and (min-width: 320px) and (max-width: 390px) {
    .achivement-head {
        flex-wrap: wrap;
    }
    .achivement-head div img {
        width: 60px;
        height: auto;
    }
}

@media only screen and (max-width: 1200px) {
    .achive-sec ul li {
        border: unset;
    }
    .achive-sec ul li img {
        object-fit: contain;
        width: 130px;
    }
}