body
{
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    box-sizing: border-box;
    margin:0;
    padding:0;
    color:azure;
    background: radial-gradient(circle, #2d706c, #01796F, #028058, #00543c);
    animation: gradientAnimation 40s ease infinite;
   
}


.L{
    font-size: 1.5rem;
}

#tree1 {
	display: block;
	margin: auto;
	object-fit: contain;
	max-width: 50vw;
	max-height: 50vh;
    grid-area: tree1;

}


#tree2 {
	display: block;
	margin: auto;
	object-fit: contain;
	max-width: 50vw;
	max-height: 50vh;
 
    grid-area: tree2

}


.carImg {
    position: relative;
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    z-index: 2; /* Ensure the car is above the bus */
    animation: move 2s linear infinite; /* Unique animation for car */
}

.busImg {
    position: relative;
    display: block;
    margin: 3rem auto 0; /* Places the bus 3rem below the car and centers horizontally */
    z-index: 1; /* Ensure the bus is below the car */
    animation: move 2s linear infinite; /* Unique animation for bus */
}

.trainImg {
    position: relative;
    display: block;
    margin: 3rem auto 0; /* Places the bus 3rem below the car and centers horizontally */
    z-index: 1; /* Ensure the bus is below the car */
    animation: move 2s linear infinite; /* Unique animation for train */
}

@keyframes move {
    from {
        transform: translateX(-300px);
    }
    to {
        transform: translateX(0.5rem);
    }
}


.homepage
{
margin-top: 10rem;
display: grid;
place-items: center; 
min-height: 100vh;
color:azure;
grid-template-columns: repeat(7,1fr);
grid-template-rows: 4fr 8fr 8fr min-content;
grid-template-areas:
' .  . . . . . .'
  '. tree1 main main main  tree2 .' 
  '. tree1 button button button  tree2 .';

 
}


.HeaderM
{
text-align: center;
font-size: 4rem;
grid-area:  main;



}

.homepgbtn
{
    grid-area: button;

}

@keyframes gradientAnimation {
  0% {
      background-position: 0% 0%;
  }
  100% {
      background-position: 100% 100%; 
  }
}



li, a, button{
    font-weight: 500;
    font-size: 1.28rem;
   
    text-decoration: none; 
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 10%; 
    grid-area: header;
  
}


.navitems {
    list-style: none;
    display: flex; 
    justify-content: space-around; 
  


}

.navitems li {
    
    margin-right: 10rem; 

    
}

.navitems li:last-child {
    margin-right: 0; 
 
}

.navitems li a {
    transition: all 0.3s ease 0s;
    color:azure;

    
} 

.navitems li a:hover{
 color:rgb(9, 9, 111);
}


.secondPageDiv
{
display: grid;
grid-template-columns: repeat(7,4fr);
grid-template-rows: 0.2fr 0.5fr 0.5fr 0.5fr 0.5fr  min-content;
grid-template-areas:
'. logo header . . . .'
  ' text text text text text text text '
  '. . carimg . carbtn . .'
  '. . busimg . busbtn . .'
  '. . trainimg . trainbtn . .';


}
 


.secondPageDiv > h5
{
    grid-area: text;
    font-size: 2.5rem;
    text-align: center;
    color:azure;
    margin-bottom: 5rem;
  
}


.car
{
    grid-area: carbtn;
    
}

.bus
{
    grid-area: busbtn;
    margin-top:5rem;
  
}

.train
{
    grid-area: trainbtn;
    margin-top:4rem;

   
}

.carImg
{

    grid-area: carimg;
    max-width: 10rem;
    max-height: 10rem;   
   
}

.busImg
{
    grid-area: busimg;
    max-width: 19rem;
    max-height: 11rem;   
   
}

.trainImg
{
    max-width: 21rem;
    max-height: 12rem;   
    grid-area: trainimg;
    

}

.awarenessPage
{
   
    display: grid;
    min-width: 100vw;
    min-height: 100vh;
    grid-template-columns: repeat(7,1fr);
    grid-template-rows: 0.2fr 0.3fr 0.3fr;
    grid-template-areas:
    '. logo header . . . .'
    '. .  textA textA textA . . '
      '. contentA contentA contentA contentA contentA . '; 
   

} 

.awarenessPage > h2
{
    grid-area:textA;
  
}

.awarenessPage > h3
{
    line-height:1.5rem;
    color:#01796F;
    margin-top: -3rem;
    font-weight:500;
    padding: 3rem;
    font-size: 1rem;
    border-radius: 3rem;
    margin-bottom: 3rem;
    background-color: aliceblue;
    grid-area: contentA;

}



.section-heading:first-child
{
    margin-top: 10rem;
}


.section-content{
 
    max-width: 80vw;
    color:#01796F;
    font-weight:500;
    padding: 3rem;
    font-size: 1rem;
    border-radius: 3rem;
    margin-bottom: 3rem;
    background-color: aliceblue;
    line-height: 1.5rem;
 
   
}


.section-content:last-child{
 
    color:#01796F;
    font-weight:500;
    padding-left: 8rem;
    padding-right: 8rem;
    font-size: 1rem;
    border-radius: 3rem;
    margin-bottom: 3rem;
    background-color: aliceblue;
    line-height: 1.5rem;
 
   
}

.section-content:last-child a
{
    font-size: 1rem;
}



.references
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.futurePage
{

  
    display: grid;
    min-height: 100vh;
    width: 100vw; 
    grid-template-columns: repeat(1,2fr) repeat(5,4fr) repeat(1,2fr);
    grid-template-rows: 0.2fr 0.5fr 0.7fr ;
    grid-template-areas:
    '. logo header . . . .'
    '. .  textA textA textA . . '
      '. contentA contentA contentA contentA contentA . ';

   

}

.futurePage > h3{

grid-area: textA;
margin-top: 8rem;
}

.futurePage > p {
    grid-area: contentA;
    line-height:1.5rem;
    color:#01796F;
    width: auto;
    font-weight:500;
    padding: 3rem;
    font-size: 1rem;
    border-radius: 3rem;
    margin-bottom: 3rem;
    background-color: aliceblue;

}


button
{
   
    border:none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    background-color: azure;
    color:rgb(9, 79, 79);
    font-size:1.4rem;
    width: 150px; 
    height:75px; 
    border-radius: 20px;
    text-align: center;
    grid-area: button;
}

.logo
{
    max-width: 5rem;
    max-height: 5rem;
    margin-left: 1rem;
    grid-area: logo;
 
}


.thirdPage {
    display: grid;
    place-items: center;
    min-height: 100vh;
    width: 100vw;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 0.4fr 0.3fr 0.3fr;
    grid-template-areas:
     '. . texta texta texta . .' 
    '. . box box box . .' 
    '. . btn btn btn . .';
}

.thirdPage > h3 {
    font-size: 2rem;
    grid-area: texta;
    margin-top: 10rem;
}

.thirdPage > button {
    grid-area: btn;
}

.editableBox {
    grid-area: box;
    outline: 0px solid transparent;
    font-size: 1.3rem;
    width: 7rem;
    height: 3rem;
    border-radius: 4px;
    max-height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
    border: 2px solid azure;
}


.fourthPage
{   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 

}

.fourthPage > h4
{
    font-size: 1.5rem;
    margin-top: 5rem;
    font-weight: 500;
    margin-bottom: 5rem;
    max-width: 80vw;

}


.fp
{
 
    text-align: center;
    font-size: 1.5rem;
    color:#2A4C09;
    display: flex;
    margin-top: 4rem;
    background-color: white;
    padding: 3.5rem;
    border-radius: 1.2rem;

}




.carbon
{
    margin-top: 4rem;
    text-align: center;
    font-size: 1.5rem;
    color:#2A4C09;
    display: flex;
    background-color: white;
    padding: 3.5rem;
    border-radius: 1.2rem;
  
}

.fifthPage {
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.TreeQ
{
   font-size: 2rem;
   margin-top: 4rem;
}


.TreeBackg {
    margin-top: 1rem; 
    text-align: center;
    margin-bottom: 4rem;
    max-width: 80vw;
    background-color: azure;
    padding-top: 3rem;
    padding-left: 2rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
    border-radius: 1.2rem;
}


.tree {
   
    width: 3rem;
    height: 3rem;
    margin-right: 5px;
}

.nav{

    display: grid;
    place-items: center;
    width: 100%;
    color: azure;
    grid-template-columns: repeat(1, 4fr) repeat(2, 3.7fr) repeat(4, 4fr);
    grid-template-rows: 0.5fr min-content;
    grid-template-areas: 'logo . . header . . .';
    max-height: 2rem;
       
}


@media only screen and (max-width: 600px) {
    .nav {
        display: grid;
        place-items: center;
        width: 100%;
        grid-template-columns: repeat(4, 1fr); 
        grid-template-rows: 1fr;
        gap: 0.5rem; 
        font-size: smaller;
    }
    
    .navitems {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .navitems li {
        margin-right: 0.8rem;
    }
    

    .homepage {

        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 0.2fr 1fr 1fr;
        grid-template-areas:
            '. . . . . . .'
            '. tree1 main tree2 .' 
            '. . . button  . .';
    }

    .rhome {

        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            'logo'
            'main'
            'button';
    }


    #tree1{
        max-width: 30vw;
        max-height: 30vh;    
    
    }
    
    
    #tree2 {
        max-width: 30vw;
        max-height: 30vh;
    
    }
    

    .secondPageDiv {
        grid-template-columns: repeat(2, 1fr); 
        margin-bottom: 5rem;
        grid-template-rows: auto; 
        grid-template-areas:
          'logo header'
          'text text'
          'carimg carbtn'
          'busimg busbtn'
          'trainimg trainbtn';
      }



      
.thirdPage {
   
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.4fr 0.3fr 0.3fr min-content;
    grid-template-areas:
     '.  texta texta texta  .'
     '. box box box .' 
     '.  btn btn btn .';
}


      
      .awarenessPage
    {

    display: grid;
    place-items: center;
    grid-template-columns: repeat(7,1fr);
    grid-template-rows:  0.2fr 0.3fr;
    grid-template-areas:
    '. textA textA textA textA textA . '
      '. contentA contentA contentA contentA contentA . '; 
    
    }

   

    button {
        margin: 0 auto; 
    }



    .logo {
        margin-left: auto;
        max-width: 11rem;
        max-height: 5rem;
        margin-right: -3.5rem;
               
    }

    header {
        padding: 10px; 
        font-size: 0.1rem;
    }


    h1{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .secondPageDiv > h5
    {
    font-size: 1.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    }
    
    .car
    {
    width: 100px; 
    height:50px;
    }

    .carImg{
        max-width: 8rem;
        max-height: 8rem; 
        animation: move 1.7s linear infinite alternate;  

    }

    .busImg{
        max-width: 16rem;
        max-height: 9rem;
        animation: move 1.7s linear infinite alternate;  
        
    }

    .trainImg{
        max-width: 20rem;
        max-height: 10rem;
        animation: move 1.7s linear infinite alternate;  
        
    }


    .train
    {
    width: 100px; 
    height:50px; 
    margin-top: 1rem; 
 
    }

    .bus
    {
    width: 100px; 
    height:50px; 
    margin-top: 3rem; 
    }


    .editableBox {
        margin-top: 10rem;
        margin-bottom: 10rem;
       grid-area: box;
    }

    .carbon {
        margin-top: 3rem;
        font-size: 1.5rem;
        line-height: 3rem;
        padding: 1.5rem;
        border-radius: 0.6rem;
    }

    .HeaderV
  {
    font-size: 1.3rem;
    max-width: 80vw;
    margin-top: 1rem;

  }
    .tree {
        margin-top: 0.5rem;
        width: 3rem;
    }

    .Treebtn
    {
        margin-bottom: 4rem;
    }

    .HeaderM
{
text-align: center;
font-size: 2.5rem;

}


.fp
{
 
    padding:1rem;
}




.section-heading:first-child
{
    margin-top: 5rem;
}


.section-content{

    max-width: 65vw;
    padding: 2rem;
   
}


.section-content:last-child{

    padding-left: 3.3rem;
    padding-right: 3.3rem;
    max-width: 65vw;
     
}



.futurePage
{

    grid-template-columns: repeat(7,1fr);
    grid-template-rows:  0.2fr 0.5fr min-content;
    grid-template-areas:
    '. .  textA textA textA . . '
      '. contentA contentA contentA contentA contentA . ';

   

}

.futurePage > h3{

grid-area: textA;

max-width: 65vw;

}

.futurePage > p {
    grid-area: contentA;
    padding: 2rem;
    font-size: 1rem;
    margin-top: 0.5rem;
   
}

.awarenessPage > h2
{
    margin-bottom: 5rem;
    max-width: 100vw;
    margin-top: 5rem;

}

.awarenessPage > h3
{
    max-width: 85vw;
    margin-bottom: 1rem;

}

.L
{
    margin-top: -2.5rem;
    max-width: 80vw;
}



   
 



}