@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Itim', cursive;

}

input[type=number] {
  -moz-appearance: textfield;
}

    
html {

    scroll-behavior: smooth;

}

.arrow-images a i {
    color: #fff;
    }

    .arrow-images {
    position: absolute;
    right: 130px;
    bottom: 30px;
    background: #0f6c00;
    z-index: 9999;
    padding: 20px;
    color: #fff;
    width:50px;
    height:50px;
    }



ul {

    list-style: none;

}



img {

    max-width: 100%;

}



input:focus {

    outline: none;

}



a {

    text-decoration: none;

}

button {

    cursor: pointer;

}

.c-6 {

    width: 50%;

}

.c-7{

    width:40%;
}



/* css */



:root {

    --white: #fff;

    --light-green: #00be9c;

    --green: #0F6C00;

    --yellow: #FDFF8B;

    --light-gray: #646464;

    --grey: #646464;

}



.nav-menu-items {

    display: none;

}



.logo-main h2 {



    font-size: 48px;

    color: white;

}





.cs-container {

    /* max-width: 1620px; */

    width: 100%;

    margin: 0px auto;

    padding: 0px 150px;

}



.cs-row {

    display: flex;

    flex-wrap: wrap;

    /* margin: 0px -15px; */

}



.c-4 {

    width: 33%;

    /* margin: 0px -15px; */

}



/* header */

.header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9999;

}



.c-3 {

    width: 25%;

    padding: 0px 15px;

}



.c-5 {



    width: 23%;

    padding: 0px 15px;

}



/* .header-row {

    width: 100%;

} */



.logo-main {

    width: 50%;

}



.navigation-bar {

    width: 50%;

}

.navigation-bar.nav-active{

    z-index:99999999;
}

.navigation-bar-color{
    
    background-color: transparent;
   transition: background-color 0.3s ease-in-out;
}

.navigation-bar-color.scrolled {
   background-color: #0F6C00;
   box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.15);
}



.navigation-bar ul {

    display: flex;

    justify-content: flex-end;

    margin-top: 0rem;

}

.navigation-bar ul li {



    margin-right: 2rem;

}

.cs-row.header-row {

    align-items: center;

    padding: 25px 0px;

}

.cross-ixcon {

    display: none;

}

.navigation-bar ul li a {

    color: var(--white);

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    line-height: 22px;

    text-decoration: none;

}

.navigation-bar ul a.contactus-btn {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

    line-height: 19px;

    color: #00BE9C;



}


/* earthday banner section */


.earth-day{

    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:20px 0px;
}

.earthday-banner-left{

    width:60%;
    display:flex;
    flex-direction:column;
    
}

.earthday-banner-left .btn-pri{

    max-width:22%;
    margin-left:auto;
    margin-right:auto;
}

.earthday-banner-header h2{

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--white);
}

.earthday-banner-header h1{

    font-style: normal;
    font-weight: 600;
    font-size: 58px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--white);
    letter-spacing:5px;
}

.earthday-banner-right{

    width:40%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}



/*banner section */


.left-col-inner h1 {

    font-family: 'Itim';

    font-style: normal;

    font-weight: 400;

    font-size: 60px;

    line-height: 72px;

    color: var(--white);

}



.left-col {

    width: 40%;

    background-color: var(--green);

    padding: 300px 20px 300px 150px;

}



.signup-section {

    width: 100% !important;
    background-color: var(--green) !important;
    padding: 80px 60px 80px 60px;
    text-align: center !important;
   
}

/* .reward{

    background:url("../img/step-11-screen-bg.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 100% 100%;

} */



.right-col {

    width: 60%;

    text-align: center;

}



.left-col-inner p {

    font-style: normal;

    font-weight: 400;

    font-size: 18px;

    line-height: 19px;

    color: var(--white);

    margin: 18px 0px;

    margin-bottom: 3rem;

}



.banner-outer .cs-row {

    padding: 0px;

    justify-content: center;

    align-items: center;

    margin: 0px;

}



.banner-outer .cs-container {

    padding: unset;

}



.left-col-inner span {

    display: block;

}



.btn {

    background-color: var(--white);

    padding: 13px 27px;

    color: #0F6C00;

    /* display: inline-block; */

    text-decoration: none;

    border-radius: 50px;

}



.side-img {

    top: 70px;

    position: absolute;

    left: -2px;

}





/* aboutas-section */



.about-as-section {

    background: var(--yellow) !important;

    position: relative;

}



.about-as-section .left-col {

    background-color: transparent;

    padding: 0px 20px 0px 150px;

    z-index: 1;

}





.about-as-section .left-col .left-col-inner h1 {

    color: var(--light-green);

}



.about-as-section .left-col .left-col-inner p {

    font-style: normal;

    font-weight: 400;

    font-size: 18px;

    line-height: 26px;

    max-width: 470px;

    color: #646464;

    width: 100%;

}



.dotted-img {

    position: absolute;
    top: 72%;
}

.leaf-img {

    position: absolute;
    top: 89%;
    left: 10.2%;
    max-width: 85px;
}

.btn-pri {

    border: 1px solid var(--white);
    margin-top: 1rem;
}

.btn-pri:hover {

    background: var(--green);
    color: var(--white);
}

.btn-secondary {

    background-color: var(--light-green);
    border: 1px solid var(--light-green);
    color: #fff;
}

.btn-secondary:hover {

    background: var(--yellow);
    color: var(--light-green)
}

.about-as-section .side-img {

    position: absolute;
    left: -320px;
    top: -260px;
}

.image-silder .silder-img img {

    width: 100%;
}

.image-silder .slick-arrow {

    display: none !important;
}

.image-silder ul.slick-dots {

    display: none !important;
}

.about-as-section .right-col .image-silder {

    margin: 0px;
}

/* our misson */

section.our-section-block {

    width: 100%;
    padding: 130px 0px;
}

.oursection-header {

    width: 100%;
    text-align: center;
}

.oursection-header-info h5{

    text-align: center;
    color: var(--green);
    font-style: normal;
    font-family: 'Itim';
    font-weight: 400;
    font-size: 24px;
    line-height: 28.8px;
    margin-bottom: 5rem;

}

.campaign-block .oursection-header h2 {

    margin-bottom: 40px;
    color:var(--green);
}

.oursection-header h2 {

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--light-green);
}

.oursection-header p {

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    text-align: center;
    color: var(--light-gray);
    max-width: 550px;
    text-align: center;
    margin: 20px auto;
}

.gif-img img {

    max-width: 100%;
}

.polution-infoblock-inner {

    width: 100%;
    border: 1px solid #C1C1C1;
    border-radius: 10px;
    margin-bottom: 36px;
}

.polution-infoblock-head {

    width: 100%;
    display: flex;
    align-items: center;
}

.polution-infoblock-head {

    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #C1C1C1;
}

.polution-infoblock-head p {

    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: var(--green);
}

.polution-infoblock-body p {

    padding: 15px 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--light-gray);
}

.polution-infoblock-head .img {

    margin-right: 10px;
}

/* pr seection */

.pr-section {

    background-color: var(--light-green);
    text-align: center;
    padding-top: 17px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.pr-section .slick-next,
.pr-section .slick-prev,
.pr-section .slick-dots {

    display: none !important;
}

.pr-section-header h2{

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--white);
}

.pr-section .pr-section-images {

    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
}

/* campaing */

.campaign-block {

    width: 100%;
    padding: 100px 0px;
    background-color: #FDFF8B;
}

.campaign-block .line {

    background: linear-gradient(90deg, hsla(169, 61%, 93%, 1) 0%, hsla(169, 60%, 70%, 1) 47%, hsla(169, 61%, 93%, 1) 100%);
    width: 90%;
    height: 0.5%;
    margin-bottom: 1rem;
    margin-left:auto;
    margin-right:auto;
}

.campaign-inner-value {

    width: 100%;
    background: var(--white);
    padding: 60px 40px 40px;
    text-align: center;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 100%;
}

.campaign-info h4 {

    font-family: 'Itim';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    text-transform: capitalize;
    color: var(--grey);
    margin: 20px 0px;
}

.campaign-info p {

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    color: var(--grey);
    margin-bottom: 3rem;
}

.campaign-img {

    width: 100%;
    margin-bottom: 45px;
}

.campaign-data .c-3 {

    min-height: 100%;
}

.campaign-data .c-3 {

    position: relative;
}

.campaign-data .c-3 button {

    width: 54%;
    padding: 0.4rem;
    border-radius: 20px;
    border: 1px solid var(--light-green);
    background-color: var(--light-green);
    color: white;
    position: absolute;
    left: 22%;
    bottom: 1%;
    margin-bottom: 1rem;
    font-size: 16px;
}



.campaign-data .c-3 button:hover {



    background: var(--white);

    color: var(--light-green);

}



.campaign-data .cs-row {

    align-items: stretch;

}



/* vlogs section */



.vlogs-section {

    width: 100%;

    padding: 130px 0px;

    background: var(--yellow);

    position: relative;

    overflow: hidden;

}



.vlogs-data .campaign-inner-value {

    padding: 12px 9px 40px;

}

.vlogs-data .campaign-img {

    margin-bottom: 0px;

    position: relative;

}

.vlogs-data .campaign-info {

    margin-top: 27px;

    padding: 0px 20px;

}

.vlogs-section .line {

    background: linear-gradient(90deg, hsla(169, 61%, 93%, 1) 0%, hsla(169, 60%, 70%, 1) 47%, hsla(169, 61%, 93%, 1) 100%);
    width: 90%;
    height: 0.5%;
    margin-bottom: 1rem;
    margin-left:auto;
    margin-right:auto;
}

.vlogs-section .cs-container {

    padding: 0px 120px !important;
}

.vlogs-data .c-3 {

    min-height: 100%;
    position: relative;
}

.vlogs-data .cs-row {

    justify-content: center;
    align-items: stretch;
}

.vlogs-data .c-3 {

    z-index: 999;
    width: 25%;
}

.vlogs-data .campaign-img img {

    width: 100%;
}

.vlogs-data .c-3 button {

    width: 45%;
    padding: 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--light-green);
    background-color: var(--light-green);
    color: white;
}



.vlogs-data .c-3 button:hover {

    background: var(--white);
    color: var(--light-green);
}





.dotted-img-vlogs {



    position: absolute;

    top: 1%;

    right: 0%;

}



.palm-img {

    position: absolute;
    top: 7%;
    right: 11.5%;
    max-width: 103px;
}

.vlogs-section-header h2 {

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    text-align: center;
    margin-bottom: 10px;
    color: var(--light-green);
}



.vlogs-section-header-info h5 {

    text-align: center;
    color: var(--light-green);
    font-style: normal;
    font-family: 'Itim';
    font-weight: 400;
    font-size: 24px;
    line-height: 28.8px;
    margin-bottom: 5rem;
}

section.banner-section.sign-up-block {

    background: #fff;
}



.login-from {

    background: #FFFFFF;

    box-shadow: 0px 4px 45px rgba(0, 0, 0, 0.12);

    border-radius: 20px;

    width: 570px;

    padding: 70px 80px;

    margin: 0px auto;

}



.form-heading h6 {

    font-style: normal;

    font-weight: 400;

    font-size: 48px;

    line-height: 58px;

    color: var(--light-green);



}



.form-heading p {

    font-style: normal;

    font-weight: 400;

    font-size: 24px;

    line-height: 29px;

    text-transform: capitalize;

    color: #262626;

    margin: 19px 0px 47px 0px;

}



.banner-img-1 {



   position:absolute;
   top:40px;
   left:40px;

}



.banner-section {

    position: relative;

    background: var(--light-green);

}



.banner-img-1 img:nth-child(1) {

    width: 12rem;
}



.banner-img-1 img:nth-child(2) {
    width: 13rem;
    height: 3rem;
    margin-left: -34px;
    margin-bottom: 37px;
}

.banner-img-2{
    /* display:none; */
    position:absolute;
    bottom:0;
    right:95px;
}

.banner-img-2 img{
    
    max-width:70%;
}



.input-feilds {

    margin-bottom: 15px;

}



.input-feilds input {

    width: 100%;

    height: 45px;

    border: 1px solid #B6B6B6;

    border-radius: 30px;

    padding: 0px 20px;

}



.input-feilds input:focus {

    outline: none;

}



.input-feilds input::placeholder {

    font-weight: 400;

    font-size: 16px;

    line-height: 19px;

    color: #BCBCBC;

}



.submit-btn .btn {

    background: #00BE9C;

    width: 100%;

    color: #fff;

    border: none;

    margin-top: 20px;

}



.already-login p {

    font-style: normal;

    font-weight: 400;

    font-size: 18px;

    line-height: 22px;

    color: #262626;



}



.already-login {

    width: 100%;

    text-align: left;

    margin: 15px 0px;

}



.already-login a {

    color: var(--light-green);

    margin-left: 10px;

}



.social-icon {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    align-items: stretch;

    position: relative;



}



.social-icon::after {

    position: absolute;

    width: 70%;

    height: 1px;

    content: "";

    top: 0;

    bottom: 0;

    margin: auto;

    z-index: 1;

    left: 0;

    right: 0;

    margin: auto;

    background-image: linear-gradient(to right, #d5fef0, #00BE9C, #d5fef0);

}



.login-btn {

    width: 81px;

    z-index: 3;

    background: #fff;

    margin-left: 20px;

    padding: 21px;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 79px;

    border-radius: 50px;

    border: 1px solid var(--light-green);

}



.login-btn a {

    display: flex;

    align-items: center;

    justify-content: center;

}



.anotherlogin-option {

    width: 100%;

    margin-top: 60px;

}



.anotherlogin-option p {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

    line-height: 19px;

    color: #BCBCBC;

    margin-bottom: 10px;

}



.login-btn:first-child {

    margin-left: 0px;

}



/* Current activity  */



.current-activities-section {

    width: 100%;

    padding: 66px 0px;

    background-color: var(--light-green);

    text-align: center !important;

}

.current-activities-section .btn-pri:hover{

    background:var(--light-green);
    color:var(--white);
}



.current-activities-section .line {


    background: linear-gradient(90deg, hsla(169, 61%, 93%, 1) 0%, hsla(169, 60%, 70%, 1) 47%, hsla(169, 61%, 93%, 1) 100%) !important;
    width: 90% !important;
    height: 2px !important;
    margin-bottom: 1rem !important;
    margin-left:auto;
    margin-right:auto;
}



.current-activities-section .c-3 {



    width: 28%;

}



.current-activities-data .c-3 {



    min-height: 100%;

}



.current-activities-section .c-3 {



    margin-right: 25px;

}



.current-activities-data .cs-row {



    align-items: stretch
}



.current-activities-section .c-3 button {



    padding: 0.7rem;

    width: 11%;

    border-radius: 22px;

    border: 1px solid white;

    background: var(--white);

    color: var(--light-green);

    margin-top: 5rem;

}



.current-activities-section-header h2 {



    font-style: normal;

    font-weight: 400;

    font-size: 48px;

    line-height: 54px;

    text-align: center;

    margin-bottom: 45px;

    color: var(--white);

}



.current-activity-card-header h3 {

    color: var(--light-green);
    font-family: 'Inter';
    font-weight: 500;
    font-size: 20px;
    line-height: 24.2px;
    margin-bottom: 1rem;
    margin-top: 2.5rem;
}

.current-activities-section .c-3:nth-child(1) .line {

    margin-top: 6rem;
}



.current-activities-data .campaign-info p {

    font-family: 'Inter';
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
}

.current-activities-data .cs-row {

    justify-content: center;
}



.current-activities-section a {

    padding: 0.7rem;
    border-radius: 20px;
    border: 1px solid white;
    background: var(--white);
    color: var(--light-green);
    width: 100%;
    margin-top: 5rem;
    font-size: 17px;
    margin-top: 80px;
    text-decoration: none;
    display: inline-block;
    max-width: 200px;
}

.current-activities-section button:hover {

    background-color: var(--light-green);
    color: white;
}

/* joinus section */

.join-us-section {

    width: 100%;

    background-color: var(--light-green);

    padding: 54px 0px;

}

.join-section-inner .current-activities-section-header h2 {

    max-width: 890px;

    width: 100%;

    margin: 0px auto;
}

.join-us-section .btn-pri{

    background:var(--white);
    color:var(--light-green);
}

.join-us-section .btn-pri:hover{

    background:var(--light-green);
    color:var(--white);
}

.step-column {
    width: 100%;
    text-align: center;
    padding: 35px 58px 35px;
    background: #FDFF8B;
    border-radius: 20px;
    margin-bottom: 75px;
    position: relative;
    min-height: 43%;
    height: 50%;
}

.partner-banner .btn-pri,
.partners-join-us .btn-pri{

    background:var(--white);
    color:var(--light-green);
    border:1px solid white;
}

.partner-banner .btn-pri:hover,
.partners-join-us .btn-pri:hover{

    background:var(--light-green);
    color:var(--white);
}



.main {

    overflow: hidden !important;

}

.step-column p {

    font-size: 24px;

    color: var(--green);

}

.step {

    background-color: var(--green);

    position: absolute;

    top: 0;

    color: #fff;

    font-size: 24px;

    padding: 13px 42px;

    border-radius: 20px;

    background: var(--dark-green, #0F6C00);

    top: -30px;

    left: 0;

    right: 0;

    margin: auto;

    display: inline-flex;

    width: 314px;

    justify-content: center;

}

.join-section-inner .cs-row {

    justify-content: center;

}



.join-section-inner .c-3 {

    width: 30%;

    display: flex;

}

.step-column-outer {

    display: flex;

    flex-direction: column;

}

.join-section-inner .current-activities-section-header {

    width: 100%;

    margin-bottom: 60px;

}

/* hall of fame */



.hall-of-fame {

    width: 100%;

    padding: 55px 0px;

    background-color: var(--green);

    text-align: center !important;

    border: 1px solid black;

}

.c-3.greenschl-imgsection {

    flex-wrap: wrap;

    justify-content: center;

}

.hall-of-fame-section-header {

    display: inline-flex;

    align-items: center;

}



.hall-of-fame-section-header h2 {



    font-style: normal;

    font-weight: 400;

    font-size: 48px;

    line-height: 54px;

    margin-bottom: 0px;

    color: var(--white);

}



.hall-of-fame-content {



    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-left: 4rem;

    margin-top: 64px;

}





.hall-of-fame-section-left {



    display: flex;

    flex-direction: column;

    width: 54%;

    padding-right: 12rem;

}





.hall-of-fame-section-right {



    display: flex;

    flex-direction: column;

    margin-top: -9rem;

}



.gaurdians-images {



    position: relative;

    margin-bottom: 99px;

    display: flex;

    margin-top: 24px;

    /* justify-content: space-between; */



}

.Character-img {

    position: absolute;

    top: 0;

    left: 0;

}

.gardians-details:first-child {

    margin-left: 0px;

}

.gardians-details {

    margin-left: 68px;

    position: relative;

}

.client-name {

    position: absolute;

    background: #FDFF8B;

    width: 100%;

    padding: 10px 0px;

    bottom: -35px;

    font-size: 24px;

    z-index: 0;

    color: #262626;

}



.gaurdian-name {



    background-color: var(--yellow);

    padding-top: 3px;

    padding-bottom: 3px;

}



.gaurdian-info img {



    width: 18rem;

}



.volunteer-images {



    position: relative;

    display: flex;

    justify-content: space-between;

}



.hall-of-fame-section-header::before {



    content: '';

    background: url("../img/trophy\ 1.png");

    background-repeat: no-repeat;

    text-align: center;

}



.hof-left-header-gaurdian,

.hof-left-header-volunteer {



    display: flex;

}



.hof-left-header-gaurdian button,
.hof-left-header-volunteer button {



    background: var(--yellow);

    border: 1px solid var(--yellow);

    width: 9rem;

    border-radius: 30px;

    height: 2.5rem;

    margin-top: 0.5rem;

    margin-left: 1rem;

    display: flex;

    justify-content: center;

    align-items: center;

}



.hof-left-header-gaurdian button span,
.hof-left-header-volunteer button span {

    margin-left: 10px;

}



.hof-right-header h2 {



    color: white;

    margin-bottom: 2.7rem;

    font-weight: 400;

    font-size: 48px;

    line-height: 57.6px;

}



.hof-left-header-gaurdian h2 {



    color: white;

    font-size: 48px;

    font-weight: 400;

    /* margin-left: 1rem; */

}



.hof-left-header-volunteer h2 {



    color: white;

    font-size: 48px;

    font-weight: 400;

    margin-left: 1rem;

    /* margin-top: 1rem; */

}



.school-name-container {



    background: var(--yellow);

    margin-top: -0.2rem;

    padding-top: 1.2rem;

    padding-bottom: 1.2rem;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

}



.school-logo-info {



    display: flex;

    align-items: center;

    justify-content: space-around;

}



.school-name {



    color: black;

    margin-left: -13rem;

    font-weight: 400;

    font-size: 48px;

}



/* Gallery section */



.gallery-section {



    width: 100%;

    /* height:100vh; */

    position: relative;

    display: flex;

    z-index: 9;

}

.tab button:hover {



    background: #646464;

}

.tab button.active {



    background-color: blue;

}



.tabcontent {



    display: none;

}



.gallery-section-header h2 {



    font-size: 48px;

    line-height: 57.6px;

    font-family: 'Itim';

    font-weight: 400;

    margin-bottom: 3rem;

}



.gallery-section ul li {



    margin-bottom: 2rem;

}



.gallery-section ul li a {



    color: white;

    text-decoration: none;

    font-size: 24px;

    font-family: 'Itim';

    font-weight: 400;

    line-height: 28.8px;

}



.left-gallery-section {



    width: 40%;

    background: var(--green);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: white;

    padding-right: 16rem;



}



.right-gallery-section {

    width: 60%;

    padding: 1rem;

    /* position: relative; */

}



.slider_col {

    width: 35%;

    margin-right: 15px;

}

.duble-img .institute-img-3{

    margin-right:15px;
}





.slider_img {

    width: 74%;

}

.full-img .institute-img-5 img:nth-child(1){

    margin-right:15px;
}

.slider_col .institute-img-1{

    margin-bottom:15px;
}

.duble-img .institute-img-6,
.duble-img .institute-img-7{

    margin-right:15px;
}



.duble-img {

    width: 100%;

    display: flex;

}

.duble-img:nth-child(1),
.full-img{

    margin-bottom:15px;
}

/* .right-gallery-section {
    padding: 5px;
    width:100%;
} */

.full-img {

    width: 100%;
    display:flex;
}

.full-img img:nth-child(1){

    width:70%;
}

.full-img img:nth-child(2){

    width:24%;
}



.gallery-section-list-items button {



    background: var(--green);

    border: none;

    color: white;

    font-size: 24px;

    font-family: 'Itim';

    margin-bottom: 2.5rem;

}



.gallery-section-list-items button:hover {



    cursor: pointer;

    background: #00BE9C;

}



.gallery-section-list-items button.active {



    background: #B6B6B6;

}



.slide-content-institute-1 {

    display: flex;

}



/* form section  */



.signup-section-content {



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}





.sign-up {



    padding: 60px 40px 125px !important;

}



.signup-section .sign-up-section-card {



    align-items: stretch;

}



.signup-section-header h2 {



    font-style: normal;

    font-weight: 400;

    font-size: 44px;

    line-height: 54px;

    text-align: center;

    margin-bottom: 72px;

    color: var(--green);

}



.sign-up-section-card {



    width: 30%;

    margin: 0px auto;

}



.sign-up-section-card .card {



    min-height: 100%;

}



.school {



    border: 1px solid black;

    border-radius: 30px;

    width: 90%;

    padding: 12px;

    display: flex;

    justify-content: space-between;

    margin-bottom: 1rem;

    color: #646464;

    position: relative;



}



/* #school p:nth-child(2){



    display:none;

} */



.school:hover {



    background: var(--light-green);

    color: white;

    border: 1px solid var(--light-green);

}



.arrow {

    border: solid white;

    border-width: 0px 4px 4px 0;

    display: inline-block;

    padding: 7px;

    margin-right: 15px;

}



.school-info {



    display: inline-block;



}



.right {

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

}



/* step 1 */



.step-1-content,

.step-2-content,

.step-3-content,

.step-4-content,

.step-5-content,

.step-6-content,

.step-7-content,

.step-8-content,

.step-10-content,
.step-11-content {



    position: relative;

    font-size: 20px;

}



.arrow-back {

    position: absolute;

    background: white;

    border-radius: 50%;

    padding: 6px;

    top: -10%;

    left: 0%;

    font-size: 13px;

    border: 1px solid black;

}



.step-1-card,

.step-2-card,

.step-3-card,

.step-4-card,

.step-5-card,

.step-6-card,

.step-7-card,

.step-8-card,

.step-10-card,
.step-11-card {



    width: 100%;

    margin: 0px auto;

}



.question-1 {



    margin-top: 2rem;

}



.question-1 p,

.question-2 p,

.question-3 p {



    margin-bottom: 1.5rem;

}



.fa-angle-left {



    font-size: 20px;

    color: lightgrey;

}



.options {



    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 3rem;

}



.options div:nth-child(1) {

    position: relative;

    margin-right: 2rem;

}



.no-button {

    position: relative;

}

.yes-button button {



    background: var(--white);

    color: black;

    border-radius: 15px;

    padding: 0.2rem 1.2rem 0.2rem 1.2rem;

    border: 1px solid var(--light-green);

}



.active-1,
.yes-button button:hover {



    color: white !important;

    background: var(--light-green) !important;

}



.active-2,
.no-button button:hover {



    color: white !important;

    background: var(--grey) !important;

}



.no-button button {



    background: var(--white);

    color: black;

    border-radius: 15px;

    padding: 0.2rem 1.2rem 0.2rem 1.2rem;

    border: 1px solid var(--light-gray);

}



.continue-btn {



    background: var(--light-green);

    color: white;

    border: 1px solid var(--light-green);

    width: 90%;

    border-radius: 20px;

    padding: 12px;



}



.continue-btn:hover {



    cursor: pointer;

}



/* step 2 */



.step-2-content {



    position: relative;

    font-size: 20px;

}



.question-4 {



    margin-top: 2rem;

}



.question-4 p,

.question-5 p,

.question-6 p {



    margin-bottom: 1.5rem;

}



/* step 3 */



.question-7 {



    margin-top: 2rem;

}



.question-7 p,

.question-8 p,

.question-9 p {



    margin-bottom: 1.5rem;

}



/* step 4 */



.step-4-content .arrow-back {



    position: absolute;

    background: white;

    border-radius: 50%;

    padding: 6px;

    top: -7% !important;

    left: 0%;

    font-size: 13px;

    border: 1px solid black;



}

.skip {
    
    background: white;
    border: 1.5px solid black;
    color: #262626;
    background: var(--white);
    color: black;
    width: 90%;
    border-radius: 20px;
    padding: 12px;
    margin-top:1rem;
}

.step-4-img img {

    width: 90%;
}

.step-4-header {

    color: var(--light-green);
    margin-bottom: 1rem;
}

.step-4-info {

    margin-bottom: 1.5rem;
}

.step-4-content input {

    width: 90%;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid black;
    margin-bottom: 1rem;
}

.signup-step-4 .continue-btn {

    margin-bottom: 4rem;
}



.signup-step-4 a {



    color: var(--light-green);

}



.signup-step-4 p {



    font-size: 16px;

    color: lightgray;

}



/* step 5 */



.step-5-content .arrow-back {

    position: absolute;
    background: white;
    border-radius: 50%;
    top: -7% !important;
    left: 0%;
    font-size: 13px;
    border: 1.5px solid black;
    padding: 7px 7px;
}

.step-5-content .arrow-back .fa-angle-left{

    color: #262626;
}






.step-5-content input {



    width: 90%;

    padding: 12px;

    border-radius: 20px;

    border: 1px solid black;

    margin-bottom: 1rem;

}



.step-5-header {



    color: var(--light-green);

    margin-bottom: 0.5rem;

}



.step-5-info {



    margin-bottom: 1rem;

}



.step-5-img img {



    /* width: 60%; */

    margin-bottom: 1rem;

}



.step-5-content .continue-btn {



    margin-bottom: 0.5rem;

}



.signup-step-5 a {



    color: var(--light-green);

}



.signup-step-5 p {



    font-size: 16px;

    color: black;

    margin-left: -12rem;

}



/* step 6 */



.step-6-content .arrow-back {



    position: absolute;

    background: white;

    border-radius: 50%;

    padding: 7px 7px;

    top: -7% !important;

    left: 0%;

    font-size: 13px;

    border: 1.5px solid black;

}



.step-6-content .arrow-back .fa-angle-left{

    color: #262626;
}



.otp-boxes {



    display: flex;

    justify-content: space-around;

    margin-bottom: 2rem;

}



.otp-boxes input {



    width: 54px !important;

    height: 50px !important;

    border-radius: 10px !important;



}



.otp-boxes input:nth-child(1) {



    margin-left: 3.5rem;

}



.otp-boxes input:nth-child(4) {



    margin-right: 3.5rem;

}



.step-6-img img {



    width: 60%;

    margin-bottom: 1rem;

}



.step-6-content input {
    width: 100%;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid black;
}



.verify {
    position: absolute;
    top: 0 !important;
    /* left: 80%; */
    right: 0 !important;
    background-color: var(--light-green);
    padding: 12px;
    border: 1px solid var(--light-green);
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius:0px !important;
    width: 80px !important;
}



.step-6-content .otp {

    color: red;

    font-size: 15px;

   
    position: absolute;
    right: 0;
    bottom: -21px;
}





.step-6-info {



    margin-top: 2rem;

    margin-bottom: 1rem;

}



.num {



    color: var(--light-green);

}



.step-6-content p {



    margin-top: 1.5rem;

    font-size: 15px;

    color: black;

}



/* step 7 */



.step-7-content .arrow-back {



    position: absolute;

    background: white;

    border-radius: 50%;

    padding: 6px;

    top: -7% !important;

    left: 0%;

    font-size: 13px;

    border: 1px solid black;

}



.otp-boxes {



    display: flex;

    justify-content: space-around;

    margin-bottom: 2rem;

}



.otp-boxes input {



    width: 54px !important;

    height: 50px !important;

    border-radius: 10px !important;



}



.otp-boxes input:nth-child(1) {



    margin-left: 3.5rem;

}



.otp-boxes input:nth-child(4) {



    margin-right: 3.5rem;

}



.step-7-img img {



    width: 60%;

    margin-bottom: 2rem;

}



.step-7-content input {



    width: 90%;

    padding: 12px;

    border-radius: 20px;

    border: 1px solid black;

}



.step-7-content .verify {

    position: absolute;

    top: 49.2% !important;

    left: 82%;

    background-color: var(--light-green);

    color: var(--white);

    padding: 12px;

    border: 1px solid var(--light-green);

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    width: 80px;

}



.step-7-content .otp {

    color: red;

    font-size: 15px;

    margin-left: 25rem;

}



.step-7-info {



    margin-top: 2rem;

    margin-bottom: 1rem;

}



.num {



    color: var(--light-green);

}



.step-7-content p {



    margin-top: 1.5rem;

    font-size: 15px;

    color: black;

}



.success-msg {



    background-color: var(--light-green);

    color: white;

    font-size: 14px;

    width: 62%;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1.5rem;

}



/* step 8 */



.step-8-content .arrow-back {



    position: absolute;

    background: white;

    border-radius: 50%;

    padding: 6px;

    top: -7% !important;

    left: 0%;

    font-size: 13px;

    border: 1px solid black;

}



.otp-boxes {



    display: flex;

    justify-content: space-around;

    margin-bottom: 2rem;

}



.otp-boxes input {



    width: 54px !important;

    height: 50px !important;

    border-radius: 10px !important;

    text-align: center;

    font-size: 45px;

}



.otp-boxes input:nth-child(1) {



    margin-left: 3.5rem;

}



.otp-boxes input:nth-child(4) {



    margin-right: 3.5rem;

}



.step-8-img img {



    width: 60%;

    margin-bottom: 2rem;

}



.step-8-content input {



    width: 90%;

    padding: 12px;

    border-radius: 20px;

    border: 1px solid black;

}



.step-8-content .verify {



    position: absolute;

    top: 44.4% !important;

    left: 77.5%;

    background-color: var(--light-green);

    color: var(--white);

    padding: 12px;

    border: 1px solid var(--light-green);

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    width: 80px;

}



.step-8-content .otp {



    color: red;

    font-size: 15px;

    margin-left: 13rem;



}



.step-8-info {



    margin-top: 2rem;

    margin-bottom: 1rem;

}



.num {



    color: var(--light-green);

}



.step-8-content p {



    margin-top: 1.5rem;

    font-size: 15px;

    color: black;

}



.failure-msg {



    background-color: red;

    color: white;

    font-size: 14px;

    width: 90%;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1.5rem;

}



input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



/* step 9 card */



.step-9-card {

    width: 100%;

    margin: 0px auto;

}

.step-9-info p{

    color:var(--light-green);
    margin-bottom:1.5rem;
    font-size:20px;
}



.pledge-plan-info p {



    display: inline-block;

}



.plan-point-1,

.plan-point-2,

.plan-point-3 {



    display: flex;

}



.plan-point-1 p,

.plan-point-2 p {



    display: inline-block !important;

}



.step-9-card .campaign-inner-value {



    width: 100%;

    background: var(--white);

    padding: 45px 40px 28px !important;

    text-align: center;

    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);

    border-radius: 20px;

    height: 100%;

}



.step-9-header {



    color: var(--light-green);

}



.payment-icons {



    margin-bottom: 0.5rem;
    margin-top:0.5rem;

}



.pledge-plans {



    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

}



.pledge-plan-1 {



    background-color: var(--light-green);

    color: white;

    position: relative;

}



.plan-point-3 {



    margin-bottom: 4rem;

}



.pledge-plan-1 .select-btn {

    position: absolute;

    bottom: 8%;

    left: 22%;

}



.pledge-plan-header,

.pledge-plan-info {



    text-align: left;

}



.pledge-plan-header h2 {



    margin-bottom: 0.5rem;

}



.pledge-plan-header h3 {



    margin-bottom: 0.5rem;

}



.pledge-plan-info .fa-check {



    font-size: 0.8rem;

    margin-right: 0.4rem;

}



.select-btn {



    padding: 5px;

    width: 50%;

    border-radius: 20px;

    border: 1px solid white;

    margin-top: 5rem;

}



.pledge-plan-1 {



    padding-top: 1.5rem;

    border-radius: 5px;

    padding-left: 1rem;

    padding-right: 2rem;

    padding-bottom: 1.5rem;

    width: 18%;

}



.pledge-plan-1 hr {



    margin-bottom: 1.2rem;

}



.pledge-plan-info p {



    margin-bottom: 1rem;

    line-height: 1.5rem;

}



.t-and-c {



    margin-top: 7rem;

}



.terms {



    color: var(--light-green);

}



/* STEP 10 */



.signup-step-10 .campaign-inner-value {

    width: 100%;

    background: var(--white);

    padding: 35px 40px 40px !important;

    text-align: center;

    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);

    border-radius: 20px;

    height: 100%;

}



.step-10-header h1 {



    color: var(--light-green);

    margin-bottom: 1.2rem;

}



.step-10-img {



    margin-bottom: 1.5rem;

}



.step-10-img img {



    width: 90%;

}



.step-10-info {



    margin-bottom: 3rem;

}



.step-10-info p {



    margin-bottom: 1.5rem;

}



.step-10-info span {



    color: var(--light-green);

}

/* step 11 */

.step-11-card{

    width:50%;
    padding:100px 0px 30px;
}

.step-11-card .campaign-inner-value{

    width: 100%;
    background: var(--white);
    padding: 35px 40px 40px !important;
    text-align: center;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 100%;
}

.step-11-content{

    background:url("../img/step-11-background.png");
    background-repeat:repeat-x;
}

.step-11-content .btn-pri{

    background:var(--light-green);
    color:var(--white);
    border:1px solid var(--light-green);
    width:90% !important;
    border-radius:40px;
    padding:12px;
}

.step-11-img{

    margin-bottom:2rem;
}

.step-11-info{

    margin-top:2rem;
}



.campaign-img .image-bg {

    position: absolute;

    z-index: 71;

    top: 0;

    left: 0;

    right: 0;

    margin: auto;

    bottom: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    visibility: hidden;

    opacity: 0;

    transition: all 0.5s ease;

}

.campaign-img img.you-tubeimg {

    width: unset;

}

.campaign-inner-value:hover .campaign-img .image-bg {

    visibility: visible;

    opacity: 1;

}



/* blogs section */

.blogs-data .cs-row {

    justify-content: center;
    align-items:stretch;
}

.blogs-section {

    width: 100%;
    padding: 130px 0px;
    /*background: var(--green);*/
    background: var(--yellow);
    overflow: hidden;
}

.blogs-section .cs-container {

    padding: 0px 120px;
}

.blogs-data .c-3 {

    min-height: 100%;
    width: 25%;
}

.blogs-section-header h2 {

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    text-align: center;
    margin-bottom: 40px;
    color: var(--green);
}



.blogs-data .campaign-inner-value {

    padding: 12px 9px 40px;
}



.blogs-data .campaign-img {

    margin-bottom: 0px;
}



.blogs-data .campaign-info {

    margin-top: 27px;
    padding: 0px 20px;
}



.blogs-section .btn-pri {



    background-color: var(--light-green);

    border: 1px solid var(--light-green);

    color: white;

}



.blogs-section .btn-pri:hover {



    background: var(--white);

    color: var(--light-green);

}



.blogs-section .slick-dots {

    display: none !important;
}



.blogs-section .slick-prev,

.blogs-section .slick-next,

.blogs-section .slick-arrow {



    display: none !important;

}



/* footer */



.footer {


    position:relative;
    background-color: #083700;

    color: white;

    padding-top: 12rem;

    padding-bottom: 8rem;

    /* padding-left:4rem; */

    margin-left: auto;

    margin-right: auto;

}



.footer-content {



    display: flex;

    justify-content: space-around;



}



.footer-links {



    display: flex;

    flex-direction: column;

    /* margin-left: -8rem; */

}



.links-list-1 {

    display: flex;

    flex-direction: column;



}

.links-list-1 ul {

    margin-bottom: 22px;

}



.links-list-1 ul li {



    display: inline-block;

    padding-right: 6rem;

    font-size: 20px;

    line-height: 24px;

}



.links-list-2 ul li {



    display: inline-block;

    padding-right: 6.65rem;

    font-size: 20px;

    line-height: 24px;

}



.links-list-2 ul li:nth-child(2) a {



    margin-left: -19px;

}



.links-list-2 {
    display: flex;
    /* justify-content: space-around; */

}



.footer-links a {



    text-decoration: none;

    color: white;

}



.social-links-info {



    width: 18%;

}





.subscription-info {



    width: 22%;

    /* margin-left: -2rem; */



    margin-top: -1rem;

}



.subscription-info h1 {



    font-size: 24px;

    line-height: 29.05px;

    font-weight: 600px;

    font-family: 'Inter';

    margin-bottom: 0.8rem;

}



.subscription-info p {



    font-family: 'Inter';

    font-size: 14px;

    line-height: 16.94px;

    font-weight: 400px;

    margin-bottom: 1.5rem;

}



.subscription-info input {



    width: 17rem;

    padding: 0.8rem;

    border-radius: 5px;

    font-family: 'Inter';

    border: 1px solid white;

    background-color: #083700;

    color: white;

    margin-right: 0.5rem;

    font-family: 'Inter';

    font-size: 15px;

}





.footer-content {



    margin-bottom: 4rem;

}



.social-links-info h3 {



    margin-bottom: 1rem;

    font-size: 28px;

    font-weight: 300;

    line-height: 33.6px;

}



.social-links-info p {



    margin-bottom: 2rem;

    font-size: 16px;

    line-height: 19.2px;



}



.contact-us h5 {



    margin-bottom: 1rem;

    font-size: 20px;

    font-weight: 300;

    letter-spacing: 3px;

}



.footer hr {



    width: 86%;

    margin-left: auto;

    margin-right: auto;

}



.contact-us a {



    margin-right: 1.5rem;

}



.subscribe {

    background-color: white;

    padding: 0.9rem;

    color: #00BE9C;

    border: 1px solid white;

    border-radius: 10px;

    width: 8rem;

    font-size: 15px;

}

.pr-section-images .slick-track {

    display: flex;

    align-items: center;

}

.pr-section-images .slick-slide img {

    padding: 0px 20px;

    margin: auto;

}

.school input {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    visibility: hidden;

    opacity: 0;

}



.options input {



    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    /* visibility: hidden; */

    opacity: 0;

}

.all-common-step>div {

    display: none;

}

.hamburger-menu {

    display: none;

}

.verify-btn {

    position: relative;

}

.selected {

    background-color: var(--light-green) !important;

    color: #fff !important;

    border: 1px solid var(--light-green) !important;

}
.take-pledge .sign-up-section-card {
    padding: 200px 0px 40px;
}

.earthday-banner-section{
    background:var(--green);
    width:100%;
}


/*  */

/* reward page */

.reward-inner{

    display:flex;
    width:100%;
}


.reward-left{

    background:url("../img/thank-you-bg.png");
    width:50%;
    background-repeat:repeat-x;
    text-align:center;
    background-color:var(--light-green);
    padding:150px 0px 50px 0px;
    color:white;
}

.thank-you-img{

    position:relative;
}

.pledger-name-container{

    background-color:white;
    color:black;
    position: absolute;
    top: 52%;
    left: 27%;
    transform: skew(10deg, -11deg);
}

.reward-images .c-7:nth-child(3),
.reward-images .c-7:nth-child(4){

    margin-bottom:2rem;
}

.pledger-name-container p,
.pledger-name-container span{

    font-family: 'Itim';
    font-weight: 600;
    font-size: 36px;
    line-height: 46px;
    text-align: center;
    padding:4px;
}

.new-rewards .cs-row a{

    text-align:center !important;
    margin:0px auto;
}

.new-rewards .btn{

    background:var(--yellow);
    color:var(--light-green);
    font-size: 18px;
    line-height: 1.6em;
    margin-bottom:1rem;
}

.reward-left-header h2,
.user-thank-you h2,
.new-rewards-header h2{

    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--white);
}

.new-rewards-header{

    width:100%;
    text-align:center;
    /* padding-top:3rem; */
}
.reward-left-info p{

    font-size:20px;
    text-align:center;
    line-height:24px;
}

.reward-container{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:0px 180px;
}



.reward-right{

    width:50%;
    background-color:var(--green);
    /* padding:150px 0px; */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:120px 60px 30px 60px;
}

.reward-right .btn{

    background:var(--yellow);
    color:var(--light-green);
    border:1px solid yellow;
    margin-top:1rem;
}

/* .reward-right .btn:hover{

    background:var(--green);
    color:#fff;

} */

.reward-right-header p{

    font-size:24px;
    line-height:28.8px;
    text-align:center;
    color:white;
    margin-bottom:4rem;
    /* max-width:500px; */
}


.reward-images{

    display:flex;
    flex-wrap:wrap;
}

.reward-images .c-7{

    margin-left: 50px;
    margin-bottom: 3rem;
    margin-right: 30px;
}


.new-rewards{

    background:var(--green);
    color:white;
    padding:60px 0px;
}

.new-rewards-info{

    text-align:center;
    margin-top:2rem;
    margin-bottom:4rem;
}

.all-rewards-section{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
    /* padding:0px 60px; */
    
}

.all-rewards-1{

    width:20%;
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    margin-left:2rem;
    margin-right:2rem;
    margin-bottom:3rem;
}

.all-rewards-1-info{

    margin-top:1rem;
}


.all-rewards-1-info p,
.new-rewards-info p{

    font-size:24px;
    line-height:28.8px;
}

.all-rewards-outer{

    background: var(--yellow);
    border-radius: 50%;
    width: 7rem;
    height: 7rem;
    display:flex;
    justify-content:center;
    align-items:center;
    
}