body{font-family: "Noto Sans", sans-serif; font-family: "Nunito", sans-serif;}

html {scroll-behavior: smooth;}

.mt10{ margin-top:10px;}

.mt20{ margin-top:20px;}

.mt30{ margin-top:30px;}

.mt36{ margin-top:36px;}

.mt40{ margin-top:40px;}

.mt50{ margin-top:50px;}

.mt60{ margin-top:60px;}



.mb10{ margin-bottom:10px;}

.mb20{ margin-bottom:20px;} 

.mb30{ margin-bottom:30px;}

.mb36{ margin-bottom:36px;}

.mb40{ margin-bottom:40px;}

.mb50{ margin-bottom:50px;}

.mb60{ margin-bottom:60px;}



.pt10{ padding-top:10px;}

.pt20{ padding-top:20px;}

.pt30{ padding-top:30px;}

.pt36{ padding-top:36px;}

.pt40{ padding-top:40px;}

.pt50{ padding-top:50px;}

.pt60{ padding-top:60px;}

.pt100{ padding-top:100px;}



.pb10{ padding-bottom:10px;}

.pb20{ padding-bottom:20px;} 

.pb30{ padding-bottom:30px;}

.pb36{ padding-bottom:36px;}

.pb40{ padding-bottom:40px;}

.pb50{ padding-bottom:50px;}

.pb60{ padding-bottom:60px;}



.pb100{ padding-bottom:100px;}

.padd0{ padding:0;}



.ord1{order: 1; }

.ord2{order: 2; }



.toplog{ position:relative; height: auto; border-bottom: solid 1px #ddd;}

.bottomarrow{ position:absolute; bottom:5%; left:50%;}

.bottomarrow img{ max-width:35px;}

.bounce {

  animation: bounce 2s infinite;

}



@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {

    transform: translateY(0);

  }

  40% {

    transform: translateY(-30px);

  }

  60% {

    transform: translateY(-15px);

  }

}

.logo{ float:left; width:100%; height:auto; padding:10px 0px;}

.logo img{ height:80px;}

.adopt img{ max-height:130px;}

.join img{ max-height:130px;}

.join{ display:inline-block;}

.adopt{ display:inline-block;}

.nowjoin p{    color: #182527;

    width: 100%;

    font-size: 20px;

    text-align: center;

    margin: 30px auto 30px auto;}



.plege{ width:100%; margin:20px 0px 20px 0px;}

.plege a{width: 100%; background: #009646; color: #fff; font-size: 24px; border-radius: 20px; padding: 8px 15px; display: inline-block; text-align: center; text-decoration:none;}

.plege a:hover{ background:#182527;}



.plege button{width: 100%; background: #009646; color: #fff; font-size: 24px; border-radius: 20px; padding: 8px 15px; display: inline-block; text-align: center; text-decoration:none; border:none;}

.plege button:hover{ background:#182527;}



.joincon {

    padding: 5% 0px 10% 0px;

}



.noplege{ width:100%; height:auto; float:left; text-align:center;}

.noplege{ font-size:22px; color:#000; font-weight:bold;}

.noplege i{ color:#ff4836; display:inline-block; font-size:17px; margin-left:15px;}

.noplege span{background: #ff4836;

    padding: 5px 15px 3px 15px;

    border-radius: 0px 15px 15px 0px;

    color: #fff;

    display: inline-block;

    text-transform: uppercase;}



.impor{ width:100%; height:auto; color:#}

.green-heading{ color: #009646;

    font-size: 42px;

    width: 100%;

    font-weight: 600;}

.impor p{color: #182527; font-size: 19px; width:100%;}



.importan{ padding:50px 0px;}

.dustibin{ padding:5% 0px 5% 0px;}

.whenpack{ background:#fff;}

.whenpackbg{ background:#f3f3f3;padding:5% 0px 5% 0px;}

.midflex{justify-content: center; display: flex; align-items: center;}

.whenpackw{}

.frombg{ padding:5% 0px 5% 0px;}

.whenc{   position: absolute; bottom: 20%; left: 8px;}

.whenc img{ width:18px;}

.whend img{height: 130px; padding: 2vh 0px 3vh 0px; float:left;}

.whene img{height: 130px; float: right; padding: 2vh 0px 3vh 0px;}



.wastepack{ padding:5% 0px 0% 0px;}	

.waste1{}

.waste1 img { width: 58%; z-index: 9;  position: relative;}

.waste2{}

.waste2 img{width: 70%;}

.waste3{}

.waste3 img{width: 100%; margin-top: -9vh;}



.froma{ text-align:center; padding-top: 0vh;}	

.froma img{ width:50vh;}



.from1{ text-align:center;  margin-bottom:0px;}

.from1 img{ width:100vh;}



.form2{ text-align:center;}

.form2 img{ width:50vh;}



.from3{ text-align:center;}

.form3 img{ width:50vh;}



.from4{ text-align:center;}

.form4 img{ width:50vh;}



.desk{ display:block;}

.mobi{ display:none;}



.fromp{ margin-left:95px;}

.fromp .col-md-3{    padding: 0px 0px;

    width: 30.3%;

    max-width: 29.8%;

    flex: none;}

.avideo{width:100%; height: 500px;}

.cvideo{ width:100%; height: 200px;}

.vvideo{width:100%; height: 80vh;}



.segria{width:100%; height: 25vh; width:100%;}

.segrib{width:100%; height: 25vh; width:100%;}

.segric{width:100%; height: 60vh; width:100%;}

.segrid{width:100%; height: 60vh; width:100%;}



.clouds{ position:relative;}

.cloud1{ background:#f3f3f3;padding: 35px 50px; border-radius: 40px; margin-top: 6vh;}

.why1{ position:absolute; top:2%; left:2%;}

.why1 img{ height: 10vh;}



.why2{ position:absolute; top:5%; right:2%;}

.why2 img{ height: 4vh;}



.why3{ position:absolute; bottom:1%; right:2%;}

.why3 img{ height: 15vh;}



.why4{ position: absolute; top: 29%; left: 48%;}

.why4 img{ height:50vh;}



.dark-green{ color:#009646;}



.tidlp .col-md-4 img{ height:70vh; margin-top: 5vh;}

.tidlp .col-md-4{ text-align:center;}



.segri{ padding:5vh 0px; margin:5vh 0px; border-top:dashed 5px #009646; border-bottom:dashed 5px #009646;}



.thebrand{ background:#f1f1f1; border-radius:40px; padding:50px 50px; margin: 5% 0px;}

.thebranda img{ width:100%; max-width:500px;}

.thebrandbg{ padding:50px 0px;}



.greenbg{ background:#009646; padding:50px 0px;}

.white-text{ color:#fff;}



.faqtext{ color:#fff; width:100%;}

.faqtext h3{ width:100%; float:left; font-weight:600; margin-bottom:15px; margin-top:40px;}

.faqtext p{ width:100%;  margin-bottom:0; float:left;}



.didyouknow{ position:relative;}

.dyk1{ position:absolute; top:2%; right:1%;}

.dyk1 img{ height:70px;}





.segsh1{ position:absolute; top:2%; right:1%;}

.segsh1 img{ height:70px;}



.didyoukdots{ float:left; width:100%; margin-bottom:5%;}

.didyoukdots img{ height:70px;}

.didyouk{     float: left;

    width: 100%;

    height: auto;

    border-left: solid 5px #1e8647;

    padding-left: 4%;

    margin-top: 15%;}

.didyouk h3{ font-size: 80px;

    color: #1e8647;

    font-weight: 800;

    text-shadow: 4px -2px 0px #53e38cb8;

    padding: 5% 0px;}

.didyouk p{ font-size:18px;}

.didyouk p strong{ font-weight: 700; color: #1e8647;}

.didyoukimg{ margin-top:-70%;}

.didyoukimg img{ width:60%;}



.bina{ width:86%; text-align:center; float:left; margin-top:15%;}

.bina figure{ width:100%; float:left;}

.bina figure img{ width:80%; max-width:200px;}

.bina h3{ font-size:20px; font-weight:700; text-align:center; float:left; width:100%; margin:15px 0px 40px 0px;}

.bina p{ text-align: left;

    float: left;

    width: 100%;

    font-size: 15px;

    line-height: 26px;

    margin-left: 22%;}

.akshay{ width:100%; text-align:center;}

.aksshpaji{ padding:0;}



.socialicon{ width:100%; float:left; text-align:center;}

.socialicon i{background: #009646;

    border-radius: 20px;

    color: #fff;

    height: 28px;margin: 0px 4px;

    width: 28px;

    line-height: 28px; }

.socialicon i:hover{ background:#000; }	

.newpledgeimg{ text-align:center;}



.pledgecon{ margin:150px 0px 5% 0px; position:relative;}

.newpledgeimg img{ width:100%;    max-width: 580px;}

.newpledgelogo{}

.newpledgewhen{ text-align:right;}

.order1{ order:1;}

.order2{ order:2;}

.newpledgetext h3{ font-size: 2.1vw; font-weight:800; color:#000; margin:0px 0px;}

.newpledgetext p{font-size: 2.5vw;

    font-weight: 800;

    color: #1f8449;

    margin: 15px 0px 0px 0px;

    line-height: 40px;}

.newpledge .dyk1 { position: absolute; top: 18%; right: 1%;}

.newpledge .dyk1 img {  height: 40px;}

.newpledge{ position:relative;}

.newpledge{}

.pledgboxs{background: #f5f6f6;

    border-radius: 30px 0px 0px 30px;

    border: solid 1px #000;

    border-right: none;

    box-shadow: 0px 7px 0px 0px #000;

    position: relative;

    bottom: 0;

    right: 0px;

    overflow: hidden;

    padding: 20px 30px 20px 30px;}

.plesone{ width:100%; float:left; height:auto}	

.plesone{ text-align:center; float:left; width:100%;}

.plesone span{ text-align: center;

    float: left;

    width: 100%;

    font-weight: 700;

    font-size: 14px;}

.plesone figure{ text-align:center; float:left; width:100%; margin: 5px 0px;}

.plesone figure img{ height:70px;}

.newpledgetext{padding-bottom:5%;}

.greenline{     display: inline-block; margin:0 10px;}

.greenline img{ height: 100px; margin-top: 15px;}

.pledbuto a{background: #1f8449;

    text-align: center;

    color: #fff;

    width: 100%;

    display: inline-block;

    border-radius: 50px 0px 0px 50px;

    padding: 25px 15px 25px 30px;

    margin-right: -30px;

    float: right;

    font-size: 22px;

    font-weight: 700;

    margin-top:0%;}

.pleagecounter{ width:100%; float:left; text-align:center; margin:30px 0px;}

.pledbuto a:hover{ text-decoration:none; background:#000;}

.padd0{ padding:0;}

.geenp strong{ color:#009646 !important;}





.pleagecounter box{

  display:block;

  width:280px;

  height:45px;

  margin:16px auto;

  background-color:#fff;

  border-radius:6px;

  color:#000;

  text-align:center;

      width: auto;

    height: auto;

    margin: 0px auto;

}

.pleagecounter .StartButton{

  display:block;

  width:60px;

  text-align:center;

  margin:10px auto;

}

.pleagecounter letter{

  display:inline-block;

  position:relative;

  width:32px;

  height:50px;

  background-color:black; 

  border-radius:6px;

  margin:5px 0px;

  perspective: 80px;

  transform-style: preserve-3d; background:url(../img/counterbgs.webp) center center repeat-x; background-size:100%;

}

.pleagecounter letter:before{

  position:absolute;

  opacity:0.5;

  content:"";

  width:2px;

  height:6px;

  background-color:gold;

  left:2px;

  top:calc(50% - 3px);

}

.pleagecounter letter:after{

  position:absolute;

  opacity:0.5;

  content:"";

  width:2px;

  height:6px;

  background-color:gold;

  right:2px;

  top:calc(50% - 3px);

}

.pleagecounter flap{

display:block;

  width:32px; 

  height:40px;

  line-height:50px;

  font-size:40px;

  overflow:hidden;

  background: #4c4c4c;background: transparent;

/*background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);

background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );*/

}

.pleagecounter flapd{

display:block;

  width:32px;

  height:0px;

  line-height:0px;

  font-family:arial;

  font-size:40px;

  overflow:hidden;

  background: #4c4c4c;background: transparent;

/*background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);

background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );*/

}

.pleagecounter overflap{

  position:absolute;

  left:0px;

  top:0px;

  display:block;

  width:32px;

  height:40px;

  line-height:80px;

  font-family:arial;

  font-size:40px;

  overflow:hidden;

  transform-origin: 50% 100%;

  transform:rotateX(-90deg);

}

.pleagecounter #UP{

  position:absolute;

  left:0px;

  top:0px;

  display:block;

  width:32px;

  height:40px;

  line-height:80px;

  transform-origin: 50% 100%;

  transform:rotate(180deg) scaleX(-1);;

}

.pleagecounter .Rotate{

  background: #4c4c4c;

background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);

background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );

  animation-name: Rotator;

  animation-duration: 0.2s;

  animation-iteration-count: 1;

}

.pleagecounter .RotateNext{

background: #131313;

background: -moz-linear-gradient(top, #131313 0%, #1c1c1c 9%, #2b2b2b 24%, #111111 40%, #000000 49%, #2c2c2c 50%, #474747 61%, #666666 75%, #595959 88%, #4c4c4c 100%);

background: -webkit-linear-gradient(top, #131313 0%,#1c1c1c 9%,#2b2b2b 24%,#111111 40%,#000000 49%,#2c2c2c 50%,#474747 61%,#666666 75%,#595959 88%,#4c4c4c 100%);

background: linear-gradient(to bottom, #131313 0%,#1c1c1c 9%,#2b2b2b 24%,#111111 40%,#000000 49%,#2c2c2c 50%,#474747 61%,#666666 75%,#595959 88%,#4c4c4c 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#4c4c4c',GradientType=0 );

  animation-name: RotatorNext;

  animation-duration: 0.2s;

  animation-iteration-count: 1;

}

@keyframes Rotator {

  from {transform:rotateX(0deg);}

  to {transform:rotateX(-90deg);}

}

@keyframes RotatorNext {

  from {transform:rotateX(-90deg);}

  to {transform:rotateX(-180deg);}

}



.source{ width:100%; float:left; font-size:14px; color:#000; font-weight:600;}

.source a{ color:#000; text-decoration:none;}

.source a:hover{ color:#676767; }



.tidymansimg{ float:left; width:100%; height:auto;}

.tidymansimg figure{ float:left; width:100%; height:auto; text-align:center;}

.tidymansimg figure img{  height:auto; max-width:280px;}

.tidybox{ padding:5% 0px; position:relative;}

.tidymans{ float:left; width:100%; height:auto;}

.tidymans h3{    float: left;

    width: 100%;

    height: auto;

    font-size: 25px;

    color: #1e8347;

    font-weight: 700;}

.tidymans p{float: left;

    width: 100%;

    height: auto;

    font-size: 18px;

    color: #000;

    font-weight: 700;}

	

.socail{background: #f3f3f3; padding: 10px 0px 10px 0px;}	



.topfix{ position:fixed; width:100%; background:#fff; box-shadow:5px 5px 15px #f1f1f1; z-index:99; top:0; left:0;}

	



@media(max-width:500px) and (min-width:50px){

.logo{ text-align:center;}

.joincon { padding: 0px 0px 100px 0px;}

.adopt img { max-height: 120px;}

.join img { max-height: 80px;}

.nowjoin p { font-size: 15px;}

.noplege {  font-size: 16px;}

.noplege i {

    color: #ff4836;

    display: inline-block;

    font-size: 14px;

    margin-left: 7px;

}

.plege a { font-size: 20px;}

.green-heading { font-size: 28px;}

.impor p { font-size: 16px;}

.dustibin {padding: 10% 0px 0vh 0px;}



.whena{ text-align:center;}

.whena .img-fluid{         width: 50vh;}

.whenb{ text-align:center;}

.whenb .img-fluid{        width:90%;}

.vvideo {

    width: 100%;

    height: 300px;

}

.frombg {

    padding: 50px 0px;

}

.avideo {

    width: 100%;

    height: 300px;

}

.segric, .segrid { height: 400px;}

.whenpackbg { padding:50px 0px 50px 0px;}

.aksshpaji { padding:0px 0px 0px 0px !important;}

.whend{ text-align:center; width:100%;}

.whend img{width: 100%;

        float: left;

        height: auto; height:auto; padding: 2% 0% 2% 0%;}

.whene{ text-align:center; width:100%;}

.whene img{width: 60%;   float: right;    height: auto;} 

.nowjoin{margin:3vh 0vh;}

.importan { padding:50px 0px; height: auto;}

.toplog{ height:auto;}

.whenc {position: absolute; bottom: 40%; left: 8px; z-index: 9;}

.waste1 img { width: 60vh;}

.waste2 img {width: 90%;   margin: 30px 0px;}

.waste3 img {

    width: 100%;

    margin-top: 0;

}

.desk{ display:none;}

.mobi{ display:block;}

.why4 img{ display:block;}

.fromp {

    margin-left: 0;

}

.fromp .col-md-3 {

    padding: 0px 0px;

    width: 100%;

    max-width: inherit;

    flex: inherit;

}

.fromp {

    margin: 0;

    padding: 0;

}

.cvideo {

    width: 100%;

    height: 300px;

}

.why1 img {

    height: 5vh;

}

.why2 {

    position: absolute;

    top: 2%;

    right: 2%;

}

.why2 img {

    height: 2vh;

}



.segria, .segrib { height: 300px;}

.thebrand {

    background: #f1f1f1;

    border-radius: 40px;

    padding: 30px;}

	

.thebranda img {

    width: 90%;

    max-width: 500px;

}



.greenbg {

    background: #009646;

    padding: 50px 0px 50px 0px;

}

.faqtext h3 {

    width: 100%;

    float: left;

    font-weight: 600;

    margin-bottom: 15px;

    font-size: 24px; margin-top:40px;

}

.faqtext p {

    width: 100%;

    margin-bottom: 0;

    float: left;

}	

.froma img {

    width: 90%;

}

.dyk1 { position: absolute;

        top: 15%;

        left: 8%;}

.dyk1 img { height: 40px;}

.didyouk { margin-top: 25%; margin-bottom: 15%; padding-left:0; border:none;}

.bina p { margin-left: 0;}

.didyouk h3 {        font-size: 18vw;}

.didyouk img{width: 20px;     display: inline-block;}

.didyoukdots img { height: 40px;}

.bina figure img {

    width: 80%;

    max-width: 140px;

}

.bina { width: 100%;}

.segsh1 {display: none;

    position: absolute;

    top: 8%;

    left: 8%;

}

.segsh1 img {

    height: 40px;

}

.didyouk  .logo img {

    height: auto;

        width: 50%;

        float: left;

        margin-bottom: 10%;

}

.dyk1{ display:none;}

.didyoukimg {

    margin-top: 0%;

}

.didyoukimg img {

    width: 130%;

}

.mobilp{ margin-top: 0; text-align:center;}

.adopt {

    display: inline-block;

    margin:8% 0px 8% 0px;

}

.why5{ position: absolute;

    top: 37%;

    right: 25%;}

	

.why6{ position: absolute;

    top: 65%;

    left: 20%;}

.why5 img {

        height: 20vh;

        rotate: 40deg;

    }



.why6 img {

   height: 20vh;

        rotate: -40deg;

}

.why4 { display: none;}

.logo img {

    height: 60px;

	height: auto;

        width: 100%;

}

.newpledgeimg img {

    width: 100%;

    max-width: 180px;

}

.padd0 {

    padding: 15px;

}

.newpledgetext h3 {

    font-size: 17px;}

.newpledgetext p {

    font-size: 21px;

    font-weight: 800;

    color: #1f8449;

    margin: 15px 0px 0px 0px;

    line-height: 30px;

}

.order1 {

    order: 2;

}

.pledgboxs {

   background: #f5f6f6;

        border-radius: 0px 0px 0px 0px;

        border: solid 1px #000;

        border-right: none;

        box-shadow: 0px 7px 0px 0px #000;

        position: fixed;

        bottom: 0;

        right: 0px;

        overflow: hidden;

        padding: 10px 10px 10px 10px;

        z-index: 9;

        border-left: none;

}

.plesone span {

    text-align: center;

    float: left;

    width: 100%;

    font-weight: 700;

    font-size: 10px;

}

.plesone figure img {

    height: 50px;

}

.pledbuto{    width: 100%; float: left;}

.pledbuto a {

    background: #1f8449;

    text-align: center;

    color: #fff;

    width: 100%;

    display: inline-block;

    border-radius: 50px 0px 0px 50px;

    padding: 15px 35px 15px 30px;

    margin-right: -11px;

    float: right;

    font-size: 18px;

    font-weight: 700;

    margin-top: 0%;

}

.greenline { display: none;}

.tidymansimg figure img {

    height: auto;

    max-width: 180px;

}

.tidymans p {

    float: left;

    width: 100%;

    height: auto;

    font-size: 16px;

    color: #000;

    font-weight: 500;

    text-align: left;

}

.socail{background: #f3f3f3; padding: 20px 0px 130px 0px;}	

.pledgecon {

    margin: 70px 0px 5% 0px;

    position: relative;

}

.newpledgewhen .logo img {

height: 14vw;

        width: auto;

        float: right;

    }

}