*{
    padding: 0;
    margin: 0;
}
html{
    font-size:100%;
}
@font-face {
    font-family:'Muli-Bold';  
    src: url('../fonts/Muli-Bold.ttf');
}
@font-face {
    font-family:'Futura-Book';  
    src: url('../fonts/FuturaPT-Book.woff');
}
@font-face {
    font-family:'Futura-Medium';  
    src: url('../fonts/FuturaPT-Medium.woff');
}
@font-face {
    font-family:'Hebo-Bold';   
    src: url('../fonts/Heebo-Bold.ttf');
}
@font-face {
    font-family: 'Tungsten-SemiBold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Tungsten-SemiBold.ttf') format('woff');
}
@font-face {
    font-family: 'Tungsten-Medium';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Tungsten-Medium.ttf') format('woff');
}
@font-face {
    font-family: 'MYRIADPRO-REGULAR';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('woff');
}
  @font-face {
    font-family: 'MYRIADPRO-light';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MyriadPro-Light.otf') format('woff');
}  
@font-face {
    font-family: 'MYRIADPRO-semibold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MYRIADPRO-SEMIBOLD.OTF') format('woff');
}


@media print and (orientation: portrait)  {
    .navmain {
      position: static !important;
   }
   .article-title-link {
    position: absolute;
    bottom: 19%;
    margin-left: 16rem
}
.sprinkler-hero-content{
    margin-left: 16rem
}
}

@media print and (orientation: landscape)  {
   .navmain {
     position: static !important;
  }
  .article-title-link {
    position: absolute;
    bottom: 19%;
    margin-left: 16rem
}
.sprinkler-hero-content{
    margin-left: 16rem
}
}

.po-subtitle{
    text-align: left;
}
.hero-desc{
    margin-top: 117px;
}
.somethingWrong{
    z-index:9999;
}
.cookiespara{
    font-size: 17px;
    font-weight: 400;
}
.cookiesparasecond{
    font-size: 17px;
    font-weight: 400;
}
.article-container {
    width: 100%;
    height: 90vh;
    border: 1px solid #000000;
    overflow: hidden;
    position: relative;
}

    .sprinkler-img-holder {
    width: 100%;
    height: 100%;
    background:url(../images/case-study/sprinkler2.png); background-repeat: no-repeat; background-size: 100% 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
}
.hmirar-img-holder{
    width: 100%;
    height: 100%;
    background:url(../images/case-study/hmirar2.png); background-repeat: no-repeat; background-size: 100% 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
}

.img-holder:hover {
    transform: scale(1.2);
}

.article-container:hover .img-holder{
    transform: scale(1.1);
}
.article-title-link {
        position: absolute;
   bottom: 27%;
 
}
.hmirar-hero{
    position: absolute;
  bottom: 7% !important;
}
 
.reportingmaincontent{
    position: relative;
}
.reportingicon{
    position: absolute;
  left: -24px;
  top: 5px;
}
.sprinkler-reportingicon{
    position: absolute;
  left: -24px;
  top: -2px;
}
 .challengesdesc h5{
    color: #02455F;
    line-height: 30px;
    margin-bottom: 20px;
    font-family: MYRIADPRO-REGULAR;
 }
 
.hero-desc h4{
    margin-top: 1rem;
    font-size: 55px;
    margin-bottom: 2rem !important;
} 
.hmirar-herosection .container,.offgrid-herosection .container{
    padding-top:6rem ;
        }
.solutionscontent{
    margin-top: 30px;
}
.highlightstext p{
    font-size: 20px;
 }
.arrow1 {
    animation: slide2 1.5s ease-in-out infinite;
}
@keyframes slide2 {

    0%,
    100% {
        transform: translate(0, 5px) rotate(-45deg);
    }

    50% {
        transform: translate(5px, 0) rotate(-45deg);
    }
}
.highlightsection{
    background: url('../images/case-study/RepeatGrid.png') no-repeat  ;
   background-size: cover;
   background-position: center;
   width: 100%;
}
.inputwrap{position:relative;}
.inputwrap input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.inputwrap label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.inputwrap label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}

.textatreawrap{position:relative;}
.textatreawrap textarea{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.textatreawrap label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.textatreawrap label::after{content:"*";color:red;}
textarea[required]:valid + label{display: none;}

h4{
    font-family:Muli-Bold;
    font-size: 2rem;
}
p{
    font-family:Futura-Book;
    font-size:1.2rem;
}
.po-subtitle{
    font-family:Futura-Medium;
    font-size: 1.37rem;
}
p.lead, .ul{
   
    font-family:Futura-Book;
    font-size: 1.2rem;
}
nav{
    font-family:Futura-Book;
    font-size: 1rem;
}
.demo-head{
    font-family:Futura-Medium;
    font-size: 3rem;
}
.benifit-head{
    font-family:Hebo-Bold;
    font-size: 1.5rem;
}
 .sprinkler-hero-content{
    width: 100%;
 }
.head-icon{
    width: 40px;
}
 .ul{
    padding-left: 0;
} 
.ul li {
    background: url('../images/List-arrow.png') no-repeat 7px 7px ;
    padding: 5px 10px 5px 25px;
    list-style: none;
    margin: 0;
    vertical-align: middle;
  }
/* css for client details */
.clientswrapper{
    padding: 2rem  1.5rem 0rem 1.5rem;
}
.clientsrow1 {
     width: 100%;
}
.clientdetails{
    display: flex;
    flex-wrap: wrap;
}
.clientsrow1Text{
    display: flex;
}
.clientsrow1Text img{
    width: 45px;
    height: 45px;
}
.clientsrow1Text h4{
    font-size: 18px;
    font-family: Futura-Medium;
    color: #151830;
}
.clientdetails span{
    font-size: 16px !important;
     font-family: Futura-Book;
    margin-left: 10px;
    color: #1C1C1C;
}
.clientsrow1{
    margin:0rem  3rem 1rem 0rem;
}
.challengeskey h4{
    font-size: 20px !important;
    font-family: MYRIADPRO-REGULAR;
    margin-top: 1rem;
}
 .solutionstext p{
    font-family: MYRIADPRO-REGULAR;
 }
.challengesreason{
    letter-spacing: 0px;
    color: #1C1C1C;
    margin-top: 20px;
    }
.challengeskeydiv{
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.challengeskeydiv span{
    font-family: MYRIADPRO-light;
    width: 95%;
    display: block;
}
.challengesreason span{
    font-family: MYRIADPRO-light;
    font-size: 20px;
}
.challengeskey img{
    margin-right: 10px;
    width: 14px;
    position: absolute;
    left: -22px;
    top: 2px;
}
.image-box {
    display: inline-block;
    overflow: hidden;
}
.image-box img {
    display: block;
    transition: transform .4s;  
}
.image-box:hover img {
    transform: scale(1.1);
  transform-origin: 50% 50%;
}
.highlightscontentrow{
    display: flex;
    width: 100%;
    margin: 0.5rem 0;
}
.reportingmaincontent{
    display: flex;
}
.businessimpactwrapper{
    background: #FFC812 0% 0% no-repeat padding-box;
    padding: 1rem 1.5rem 0rem 1.5rem;
}
.highlightswrapper{
    padding: 1rem 1.5rem 0rem 1.5rem ;
}
.highlightsicon img{
    width: 45px;
    height: 30px;
}
.highlightstext p{
    margin-bottom: 0px;
     font-family: MYRIADPRO-light;
}
.solutionwrapper{
    padding: 1rem 1.5rem 0rem 1.5rem;
}
.bimpactcontent{
    display: flex;
    flex-wrap: wrap;
    margin: 2.5rem 0;
    width: 100%;
}
.subimpactcontent{
    display: flex;
    width: inherit;

}
.reportingicon img{
    height: 30px;
    width: 15px;
    margin-right: 1rem;
}
.sprinkler-reportingicon img{
    height: 30px;
    width: 15px;
    margin-right: 1rem;
}
.rhead{
    font-size: 22px;
      color: #02455F;
    font-family:MYRIADPRO-semibold;
    font-weight: 600;
}
.rtext{
    font-family: MYRIADPRO-light;
}
.rheadsubText{
    font-family: MYRIADPRO-REGULAR;
    font-size: 20px;  
    color: #02455F;
}
.bimpactdesc h6{
    font-family: MYRIADPRO-REGULAR;
}
.bihead{
    font-family: 'Muli-Bold';
    padding-bottom: 0.5rem;
    font-size: 20px;
}
.bihead span{
    position: relative;
    top: -5px;
} 
.bitext span{
    font-family: MYRIADPRO-light;
    font-size: 18px;
}
.bimaincontent{
    padding-left: 0.8rem;
}

.demo-section{
    background-image: url("../images/Mask-Group-156.png");
    background-size: cover;
}
.demo{
    margin: 5% auto;
    width: 80%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0);
    border-radius: 6px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #FFFFFF;
    padding: 0.25rem 3rem;   
}
.demo p{
    font-family:Futura-Book;
    font-size: 1.12rem;
}
.details-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.get-det{
    float:right;
}
.get-det button{
  background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    opacity: 1;
    padding: 5px 20px;
}
.submitBtn button{
    border: none;
    background: #00ADEE;
    color: white;
    width: 120px;
    height: 45px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-family:Futura-Medium;
}
.hero-desc h6{
    color: white;
    font-family: Tungsten-Medium;
}
.hero-desc h4{
    color: white;
    font-family: Tungsten-Medium;
    font-size: 45px;
}
.hero-desc p{
    color: #FFFFFF;
    font-family: MYRIADPRO-REGULAR;
}
.hightlightsheading{
    margin-top: 30px;
}
.hightlightsheading h5,.challengesheadings h5,.solutionsheading h5,.bimpactheadings h5{
    font-family: Tungsten-SemiBold;
    font-size: 45px;
}
 .challengesdesc h6,.solutiondesc h5{
    font-family:  MYRIADPRO-REGULAR;
    color: #02455F;
    font-size: 20px;
    margin-bottom: 20px;
 }
 .solutionstext span {
    font-family: MYRIADPRO-light;
    font-size: 20px;
}
 .challengescontent span{
    font-family:  MYRIADPRO-light;
    font-size: 20px;
 }
 .inputwrap label,.textatreawrap label{
    color: #6F6D6D;
    font-family: MYRIADPRO-REGULAR;
 }
 .challengeswrapper{
      padding: 1rem 1.5rem 0rem 1.5rem;
}
.challengeskeydiv span{
    font-size: 20px;
}
.textatreawrap textarea{
    resize: none;
    border: none;
    border-bottom: 1px solid #6F6D6D !important;
    outline: none !important;
    width: 100%;
}
.inputwrap {
     margin-top: 20px;
}
.textatreawrap{
    margin-top: 20px;
}
.blueLine{
    background: black;
    width: 3px;
    height: 20px;
    display: block;
    margin-right: 7px;
    position: relative;
    top:0px !important;
}
.biImg{
    width: 30px;
    margin-bottom: 20px;
}
.bitext{
    width: 100%;
}
.bihead span{
    font-family: MYRIADPRO-SemiBold;
    font-weight: 600;
}
.biImg img{
    width: 100%;
}
.rtext{
    font-size: 20px;
}
.bimpactdesc h6{
    font-size: 20px;
    margin-bottom: 1rem;
}
.subimpactcontent {
       margin-bottom: 20px;
}
.sprinkler-hero-section{
    -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.sprinkler-triangle{
    display: flex;
    justify-content: end;
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    margin-top: 0px !important;
}
.sprinkler-triangle img{
    width: 140px;
}
.offgrid-herosection{
    background:url(../images/case-study/Offgrid-2.png); background-repeat: no-repeat; background-size: 100% 100%;
    height: 90vh;
    transition: all .5s ease;
}
.offgrid-herosection:hover{
      transform: scale(1.1);
}
.hmirar-herosection:hover{
    transform: scale(1.1);
}
.hero-section-main:hover .hmirar-herosection{
    transform: scale(1.1);
}
.hero-section-main:hover .sprinkler-hero-section{
    transform: scale(1.1);
}
.hero-section-main:hover .offgrid-herosection{
    transform: scale(1.1);
}
.sprinkler-hero-section{
        background:url(../images/case-study/sprinkler2.png); background-repeat: no-repeat; background-size: 100% 100%;
    transition: all .5s ease;
    height: 90vh;
}
.sprinkler-hero-section:hover {  
    transform: scale(1.1);
    } 
  .hero-section-Wrap {
    overflow: hidden;
    width: 100%;
  }
  .sprinkler-hero-content{
    position: absolute;
    top: 105px;
  }
  .hero-desc h6{
    text-align: center !important;
  }
  .hero-section .container {
    margin-top: 82px;
  }    
  .hero-desc h6{
    text-align: center !important;
}
.hero-desc h4{
    text-align: center;
}
.hero-desc p{
    text-align: center;
}
.businessimpactmain{
     padding-bottom: 1rem;
 }
@media only screen and (min-width: 369px) {
    .hmirar-hero{
        position: absolute;
        bottom: 18% !important;
    }
}
@media only screen and (max-width: 600px) {
     h4{
        font-size: 1.5rem;        
    }
    .benifit-head {
        font-size: 1.12rem;
    }
    .demo-head {
        font-size: 2rem;
    }
    .demo{
        padding: 0.25rem 1rem;
    }
    
    html{
        font-size: 70%;
    }
    .head-icon {
        width: 25px;
    }
    .mob-hero-img{
         height: 44vh;
       background-size: cover;
       background-repeat: no-repeat;
    }
}
@media only screen and (min-width: 600px) {
    html{
        font-size: 85%;
    }
    .highlightswrapper{
        width: 80%;
        margin: auto;
    }
    .challengeswrapper{
        width: 80%;
        margin: auto;
    }
    .solutionwrapper{
        width: 80%;
        margin: auto;
    }
    .businessimpactmain{
        width: 80%;
        margin: auto;
    }
    .mob-hero-img{
       height: 44vh;
       background-size: cover;
       background-repeat: no-repeat;
    }
    .bimpactcontent{
        display: flex;
         margin: 1rem 0;
        width: 100%;
    }
}
@media only screen and (min-width: 768px) {
    .hmirar-hero {
        position: absolute;
        bottom: 7% !important;
    }
    .hmirar-hero h4{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .hero-desc{
        margin-top: 0px;
    }
    .article-title-link {
        position: absolute;
        bottom: 19%;
margin-left: 27px;
    }
    .highlightswrapper{
        width: 80%;
        margin: auto;
    }
    .challengeswrapper{
        width: 80%;
        margin: auto;
    }
    .solutionwrapper{
        width: 80%;
        margin: auto;
    }
    .businessimpactmain{
        width: 80%;
        margin: auto;
    }
    .hero-desc h6{
        text-align: left !important;
    }
    .hero-desc h4{
        text-align: left !important;
    }
    .hero-desc p{
        text-align: left !important;
    }
    .hero-desc h4{
        margin-top: 3rem;
        font-size: 55px;
        margin-bottom: 2rem ;
    }
    .sprinkler-triangle{
               display: block;
               display: flex !important;
               justify-content: center !important;
    }
    html{
        font-size: 90%;
    }
    .mob-hero-img{
      height: 85vh;
    }
    .clientsrow1 {
        margin: 0rem 3rem 1rem 0rem;
        width: 43%;
    }
    .inputwrap{
        width: 50%;
        margin-top: 40px;
    }
    .textatreawrap  {
        width: 100%;
        margin-top: 55px;
    }
    .textatreawrap textarea  {
        height: 62px;
         resize: none;
         width: 96%;
    }
    .subimpactcontent {
              width: 50%;
    }
    .bitext {
        width: 80%;
    }
}
@media only screen and (min-width: 992px) {
    .hmirar-hero{
    position: absolute;
  bottom: 7% !important;
}
    .article-title-link {
            position: absolute;
       bottom: 24%;
    }
    .hero-desc{
        margin-top: 0px;
    }
    .sprinkler-triangle{
               display: flex !important;
        justify-content: center !important;
        top: 26px !important;
    }
    .sprinkler-triangle img{
        width: 146px;
    }
    .hero-desc-wrap {
        padding-left: 4rem;
        margin-top: 2rem;
    }
    .hero-desc h4{
        margin-top: 1rem;
        font-size: 55px;
        margin-bottom: 2rem !important;
    }
    .hmirar-herosection .container{
        padding-top:6rem ;
    }
    .sprinkler-hero-content {
        position: absolute;
        top:110px;
     }
    .sprinkler-triangle{
               display: block;
    }
    .hero-desc h6{
        text-align: left !important;
      }
    .bitext{
        width: 50%;
    }
    .textatreawrap textarea{
        resize: none;
        border: none;
        border-bottom: 1px solid #6F6D6D !important;
        outline: none !important;
    }
    .inputwrap{
        width: 50%;
        margin-top: 40px;
    }
    .textatreawrap  {
        width: 100%;
        margin-top: 55px;
    }
    .textatreawrap textarea  {
        height: 62px;
         resize: none;
         width: 96%;
    }
    .bimpactcontent {
        display: flex;
        margin: 2.5rem 0;
        width: 100%;
        flex-wrap: wrap;
     }
     .subimpactcontent {
        display: flex;
        width: inherit;
        WIDTH: 50%;
    }
    .challengeswrapper{
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding: 1rem 1.5rem 0rem 1.5rem;
    }
    .solutionwrapper{
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding: 1rem 1.5rem 0rem 1.5rem;
    }
    .highlightswrapper{
        width: 100%;
        max-width: 800px;
        margin: auto;
    }
    html{
        font-size: 95%;
    }
    .clientsrow1 {
        width: 45%;
    }
    .hero-section{
        background-size: 100% 100%;
        background-repeat: no-repeat;
       height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
     } 
     .businessimpactmain{
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding: 1rem 1.5rem 1rem 1.5rem;
     }
}

@media only screen and (min-width: 1200px) {
    .article-title-link {
        position: absolute;
        bottom: 6%;
    }
    .sprinkler-triangle{
 top: 0px !important;
}
.hero-desc h4{
    margin-top: 1rem;
    font-size: 90px;
    margin-bottom: 2rem !important;
}
    .hero-desc-wrap {
        padding-left: 4rem;
        margin-top: 0px;
    }
    .sprinkler-hero-content {
        position: absolute;
         top: 177px;
    }
    html{
        font-size: 100%;
    }
    .clientsrow1 {
        width: 29%;
    }
    .bimpactcontent {
        display: flex;
      flex-wrap: wrap;
    }
    .subimpactcontent {
            width: 50%;
     }
     .subimpactcontent2{
        width: 50%;
     }
     .bitext {
        width: 80%;
    }
}
@media only screen and (min-width: 1400px) {
    .hero-para{
        font-size: 28px !important;
    }
    .hero-desc h4{
        margin-top: 3rem;
        font-size: 90px;
        margin-bottom: 2rem !important;
    }
}
@media only screen and (min-width: 1530px) {
    .hmirar-hero {
        position: absolute;
        bottom: 17% !important;
    }
    .article-title-link {
        position: absolute;
        bottom: 13% !important;
    }
}