@import url('responsive.css');
@media only screen and (min-width: 1024px) and (max-width: 1400px) {
	.middleElemts{width: 26%;}
	.logo{width: 200px; margin-bottom: 15px}
	.headingmd{font-size:28px; margin-bottom: 15px}
	.leftElemts {width: 37%;}	
	.rightElemts {width: 37%;}	
}
@media only screen and (max-width: 1200px) {
	#topbanner {display: none;}

    #topbannerMobile {display: block;}
    .wave.topimg {top: -65px;}
    .leftEl {width: 150px; left: 15px;}
    .box1 {width: 150px;}
    .rightEl {width: 150px; right: 15px;}
    .leftBook {width: 150px; left: 15px;}
    .boxBook {max-width: 150px;}
    .questionSec .labeltag.rt-labeltag {right: 15px;}
    .questionSec .labeltag.lt-labeltag {left: 15px;}
    .questionSec .labeltag.rtbt-labeltag {right: 15px;}
}
@media only screen and (max-width: 1023px) {
    .bannerElemts {height: 500px; padding-top: 250px;}
    .headerBanner {height: 700px;}
    .headerSec {height: 700px;}

    .parallaxParent {display: none;}

    .leftEl {width: 100px; left: 15px;}
    .box1 {width: 100px;}
    .rightEl {width: 100px; right: 15px;}
    .leftBook {width: 100px; left: 15px;}
    .boxBook {max-width: 100px;}
    .box2 {width: 100px;}

    .grapsSecInr {padding-top: 50px;}
    .rightTrophy {width: 100px; right: 15px;}
    .boxTrophy {max-width: 100px;}
    .wave.topimg {top: -46px;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .bannerElemts {height: 500px; padding-top: 250px;}
    
    .headerSec .labeltag {
        right: 5vw;
        bottom: 0;
        width: 150px;
        z-index: 1;
    }
    .heading {font-size: 28px;}
    .headerSec .gridbg {padding-bottom: 20px;}
}


@media only screen and (max-width: 767px) {
    .printScreen {
        background: url("../images/print-screen-bg-mob.png") no-repeat center 0px;
        background-size: 100%;
    }

    .printerImg {
        width: 200px;
    }

    .printerImgBox {
        bottom: -240px;
    }

    .printScreenText {
        width: 80%;
    }

.smartTankSection .gridbg{padding: 100px 0px 0 0;}
.hpstoreform .actions{justify-content: center!important}
    .printScreenText h3 {
        padding-top: 50px;
        font-size: 20px;
    }

    .printScreenText p {
        font-size: 14px;
        line-height: 17px;
        color: #fff;
        padding-bottom: 10px;
    }

    .videoThum {
        width: 75%;
    }

    .videoThemeImg1 {
        width: 72px;
        position: absolute;
        left: -48px;
        top: -58px;
    }

    .videoThemeImg2 {
        width: 79px;
        position: absolute;
        left: -60px;
        bottom: -74px;
    }

    .videoThemeImg3 {
        width: 52px;
        position: absolute;
        right: -47px;
        top: inherit;
        bottom: -66px;
    }

	.boxPencil{display: none;}
    .head-rowpd {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .head-rowtp p {
        font-size: 25px;
        line-height: 30px;
        order: 2;
        width: 100%;
        padding: 15px 0;
    }

    .head-rowbtm p {
        font-size: 22px;
        line-height: 26px;
    }

    .holibanner img {
        width: 130px;
        height: auto;
    }

    .head-rowtp span {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .head-rowpd {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .claim-frm-row {
        padding: 15px 0;
        display: inherit;
    }

    .claim-frm {
        width: 100%;
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .claim-poster {
        width: 100%;
    }



	body p{
	font-size: 16px;
	line-height: 24px;
	}
    .containerInr {
        padding: 0px 22px;
    }
	.gridbg {
        padding: 26px 22px;
    }


    /* Home */
    .headerBanner {
        height: 750px;
        overflow: hidden;
    }
    .headerSec {
        height: 750px;
    }
    .headingSec {padding: 0 15px;}
    .headingmd {font-size: 28px;}

    .bannerElemts {height: 200px; padding-top: 0; position: absolute; top: 60%;}
    .wave.btimg {height: 20px; padding-bottom: 0;}

    .leftElemts {
        width: 50%;
        height: 100%;
        position: absolute;
        z-index: 5;
        margin-left: 0;
        left: -25%;
    }
    .middleElemts {
        width: 70%;
        z-index: 100;
        top: 0%;
        margin: 0 auto;
    }
    .rightElemts {
        width: 50%;
        height: 90%;
        position: absolute;
        right: -25%;
        top: 0;
    }

    .middleElemts .remote {top: 55%;}
    
    .el1, .el1.active {
        right: 0;
        top: -18px;
        transform: rotate(-26deg);
    }
    .el2, .el2.active {
        right: 27%;
        top: -10%;
    }
    .el3, .el3.active {
        width: 20%;
        right: 24%;
        top: 48%;
        transform: rotate(-64deg);
    }
    .el4 {display: none;}
    
    .el7, .el7.active {
        width: 50%;
        right: 16%;
        top: -14%;
        transform: rotate(-14deg);
    }
    
    .el10, .el10.active {
        width: 9%;
        right: 34%;
        top: 44%;
        z-index: 10;
    }
    .el11, .el11.active {
        width: 18%;
        right: 43%;
        top: 46%;
    }
   .el12, .el12.active {
        width: 31%;
        right: 39%;
        top: 11%;
    }
    .el13 {
        width: 16%;
        right: 33%;
        top: 43%;
        display: none;
    }
    .el14, .el14.active {
        width: 28%;
        right: 21%;
        top: 36%;
    }
    .el19, .el19.active {
        width: 30%;
        right: 24%;
        top: 17%;
    }
    
    .el6, .el6.active {
        width: 34%;
        right: 11%;
        top: 17%;
    }

    .el15 {display: none;}
    
   .el8, .el8.active {
        width: 39%;
        right: 20%;
        top: 63%;
    }
    .el9 {
        width: 12%;
        right: 52%;
        top: 15%;
        display: none;
    }

    
    .el17, .el17.active {
        width: 46%;
        right: -7%;
        top: 67%;
    }
    .el18 {
        display: none;
    }
    .el20 {display: none;}
    .el16, .el16.active {
        width: 40%;
        right: 42%;
        top: 66%;
        transform: rotate(-13deg);
    }

    /* right el */
    .elR1, .elR1.active {
        width: 50%;
        left: -16%;
        top: -16%;
    }
    .elR2, .elR2.active {
        width: 20%;
        left: 10%;
        top: 18%;
    }
    .elR3, .elR4, .elR5, .elR6, .elR9, .elR10, .elR11, .elR12, .elR13, .elR14, .elR18 {display: none;}
    .elR7, .elR7.active {
        width: 65%;
        left: 11%;
        top: 28%;
    }
    .elR8, .elR8.active {
        width: 24%;
        left: 26%;
        top: 16%;
    }
    .elR16, .elR16.active {
        width: 30%;
        left: 35%;
        top: 66%;
    }
    .elR17, .elR17.active {
        width: 38%;
        left: 4%;
        top: 75%;
    }
    .elR15, .elR15.active {
        width: 59%;
        left: 17%;
        top: 58%;
        transform: rotate(-21deg);
    }

.envSectionMn .heading {margin-bottom: 60px;}
    .envSectionMn.inView .envzzFirstimg {
        bottom: -544px;
    }
    .envSectionMn.envOpen .envzzFirstimg {opacity: 1;}
    .envOpenimg {top: 200px;}
    .envContentIn {
        background: #efefef;
        padding: 30px 15px 50px 15px;
        margin: 0 10px;
        /* transform: translateY(100%) !important; */
    }
    .envContentIn p {
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 12px;
    }

    .box1, .box2, .boxTrophy, .boxBook {display: none;}
    .buddySec .slick-dots {bottom: -37px;}

    .questionSec {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .TopAnimation .animationSC {opacity: 1; top: 0;}

.wave.topimg, .participatSec .wave.topimg, .homeworkSec .wave.topimg, .workSec .wave.topimg {
    top: -18px;
}
	.labeltag {
    display: none!important;
  }
  .hideingmob{ display: none!important;}

  .heading {
    font-size: 25px;
  }
  .heading br{ display: none;}

  .logo {
    margin-bottom: 20px;
    width: 220px;
}
  .headerInr {
    position: relative;
    left: 0;
    right: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 22px 18px;
}


.shineSec .headerBanner {
    width: 100%;
    max-width: 100%;
    margin-top: 40px;
}

 
  .two-col {
    color:#C0C0C0;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 ;
    margin-bottom: 32px;
       
}
.two-col .col.right-col:before {
    display: none;
  }


  .gradSecInr {
    padding-top: 20px;
    padding-bottom: 40px;
}
.stargridrow {
    gap: 14px;
	margin-bottom: 20px;
}
.stargridrow a {
    width: 50px;
    height: 58px;
    font-weight: 700;
    font-size: 26px;
	        line-height: 56px;
}
.stargridrow .staritem:nth-child(1n) {
 margin-top: 14px;
}
.stargridrow .staritem:nth-child(2n) {
  transform: rotate(8deg);
  margin: 0;
}
.tabtextbg {
    min-height: 40px;
    line-height: 40px;
}
.tabtextbg::before, .tabtextbg::after {height: 43px;}
.tabtextbg.tabtextblack::before, .tabtextbg.tabtextblack::after {height: 42px;}
.gradSecInr .content {
    margin-bottom: 30px;
    margin-top: 20px;
}

.workitmwrp {
    max-width: 100%;
    margin-bottom:30px;
    margin-top: 20px;
}

.homeworkSecInr {
    padding-top: 30px;
    padding-bottom: 34px;
}

.homeworkSec .content {
    margin-bottom: 10px;
}
.homeworkitmwrp {
    gap: 0;
    margin-top: 0;
    margin-bottom: 46px;
}
.homeworkitm {
    width: 50%;
    max-width: 50%;
}
.imgbg img {
    height: 100px;
    width: auto;
}

.questionSecInr {
	padding:0;
    padding-top: 45px;
    padding-bottom: 22px;
}
	.hpstoreformSecInr{padding-bottom: 10px;}
.questionform {
    max-width: 100%;
    margin-bottom: 18px;
}

.form-wrap {
    padding: 20px 0;
	padding-bottom:5px;
}
.questionform .two-col-field .field {
    flex: 100%;
}
.questionform .two-col-field {
    gap: 0px;
}
.questionform .field {
    margin-bottom: 22px;
}
.buddySecInr {
    width: 100%;
    padding-top: 30px;
}
.hpstoreform-wrp {
    width: 100%;
    max-width: 100%;
}

.hpstoreform .two-col-field {
    gap: 0;
}
.hpstoreform .two-col-field .field {
    flex: 100%;
}

.participatSecInr {
    padding-top: 30px;
    padding-bottom: 40px;
}
.tikerwrp {
    margin-top: 20px;
    margin-bottom: 10px;
}
.tikerbg {
    height: 80px;
}
.participatSec .gridbg {
    padding-left: 0;
    padding-right: 0;
}
.tikerroted {
    transform: rotate(1deg);
    padding-top: 0px;
}

.thumbsliderwrp .slick-slide {
    padding: 36px 20px;
}
.participatSecInr .content {
    margin-bottom: 10px;
    margin-top: 10px;
}
.termCont{ padding-bottom:10px;}

.grapsSecInr {
    padding-top: 30px;
    padding-bottom: 30px;
}
.grabSec .gridbg {
    padding-left: 0px;
    padding-right: 0;
}
.grabsitm {
          margin: 0 auto;
          width: 100%;
}
.grabsitm .imgbg{ height: auto;}
    .grabsitm .imgbg img {
        height: auto;
        width: auto;
        max-width: 80%;
    }

	.buddySec .gridbg {
    padding-left: 0px;
    padding-right: 0;
}
.buddyitm {
  width: auto;
  margin:0 20px;
}

    .registerform-popup {
        width: calc(100% - 30px);
        height: 80vh;
        padding: 22px 0;
        overflow: hidden;
        margin: auto 15px;
    }
.registerform-popup .heading{ font-size: 24px; line-height: 32px;}

.registerform-popup .closebtn{width: 30px; border: solid 3px #024ad8; right: 5px;   top: 5px;  height: 30px; padding: 7px;}
.registerform .center-field{ width: 100%; text-align: left;}
.registerform .two-col-field .field{ width: 100%; flex: inherit;}
.checkbox-label .checkmark{ width: 30px; height: 30px; padding: 12px;}

.formcontainerBox{
            max-height: 100%;
        padding: 0 22px;
        overflow: auto;
        height: 70vh;
        padding-bottom:50px;
}


/* 81025 */
.envBannerimg {width: 330px; margin: 0 auto;}
.envSectionMn .labeltag {display: none;}

.registerform .actions {margin-top: 20px; justify-content: center; width: 100%;}

.staritem a {

  animation: startAnimate 2s ease-in-out infinite;

}



/* Sequence delay — apply on the div (parent), not <a> */

.staritem:nth-of-type(1) a {

  animation-delay: 0s;

}

.staritem:nth-of-type(2) a {

  animation-delay: 0.4s;

}

.staritem:nth-of-type(3) a {

  animation-delay: 0.8s;

}

.staritem:nth-of-type(4) a {

  animation-delay: 1.2s;

}

.staritem:nth-of-type(5) a {

  animation-delay: 1.6s;

}

@keyframes startAnimate {
  0% {
    background: url(../images/Star-white.svg) no-repeat 0 0;
    background-size: contain;
    color: #444444;
  }
  50% {
    background: url("../images/Star-blue.svg") no-repeat 0 0;
    background-size: contain;
    color: #fff;
  }
  100% {
    background: url(../images/Star-white.svg) no-repeat 0 0;
    background-size: contain;
    color: #444444;
  }
}

.shineSec .heading br {display: block;}
.hpstoreform .checkbox-label {padding-top: 0;}
	
	
/*
.MobilePtn {

    background: url(../images/draklines.svg) repeat;

    background-color: #212020;

}
*/

.MobilePtn .colorgraydark {background: none;}

/*.gridbgdark {background: none;}*/
.gridbgdark{background: url("../images/draklines-mob.png") repeat-y center 0px;}
.gridbg{background: url("../images/draklines-mob.png") repeat-y center 0px; background-color: #fff; }
.MobilePtn {background:#212020 url("../images/draklines-mob.png") repeat center 0px;}
.topmargegrid{top: 0px;}
.MobilePtn .gridbgdark {background: none!important}	
#topbannerMobile{background:#fff url("../images/light-grid-bg.png") repeat center 0px;}
.smartTankSection .gridbg{background:#fff url("../images/light-grid-bg.png") repeat center 0px!important;}
.buddySec .gridbg, .participatSec .gridbg {background:#fff url("../images/light-grid-bg.png") repeat center 0px!important;}
.formColor .gridbg {background:#fff url("../images/light-grid-bg.png") repeat center 0px!important;}
.videoSec .gridbg {background:#e0e0e0 url("../images/light-grid-bg.png") repeat center 0px;}	
html, body {background: #ffffff;}	
}



@media only screen and (min-width: 380px) and (max-width: 767px) {
        .envBannerimg {
            width: 350px;
            margin: 0 auto;
        }
            .envSectionMn.inView .envzzFirstimg {
        bottom: -571px;
    }
}