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

.hide-mobile{
  display: none;
}


body{


  background-color:#F1EAFF;
  margin: 0;
 
  h1{
      font-family: 'Platypi';
  }
  p{
      font-family: 'Inter';
      font-weight: 400;
  }
}

.wrap{
  margin: 4em;
}


header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


nav a {
  text-decoration: none;
  color: darkgreen;
  margin: 0 10px;
  font-size: 20px;
  align-items: right;
}
nav ul{
  font-family: "Quicksand", sans-serif;
  color: darkgreen;
  background-color: white;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  height: 50vh;
  margin: 0;
  list-style: none;
  width: 40%;
  text-align: right;
  padding: 2em;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
  text-decoration: none;
  li{
      margin: 2em 0;
      display: flex;
      &:nth-of-type(1){
          margin-bottom: 4em;
      }


      a {
         
          color: darkgreen;
          align-items: center;
          text-decoration: none;
          gap: 10px;
          font-size: 1rem;
          img{
              position:absolute;
              width: 40px;
              transform: translateX(-110%);


          }


          &:hover{
              color: orange;
              text-decoration: underline;
          }
      }
  }
}


.open {
  transform: translate(0%);
 
}


h1, p{
  text-align: center;
 

 
}
h1{
  margin-top: 3rem;
  color:#FF914D;
  font-weight: 900;
 
  img {
      display: block;
      /*auto keeps centered always*/
      margin: 0 auto;
  
  }
}
p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: green;
  font-weight: 200;
}
.impact-section {
  width: 100%;               /* Full page width */
  display: flex;             /* Use Flexbox */
  justify-content: center;   /* Center horizontally */
  margin-top: 40px;          /* Space from above content */
}

.part2 {
  text-align: center;
  margin-left:250px;
  width: 100%;    
               /* Optional: Adjust width */
         /* Optional: Limit max width */
  font-weight: 400;
}



.primary-cta {
  background: #FF914D;
  /*space inside is padding*/
  padding: 1em;
  width: 100%;
  left: 100%;
  box-sizing: border-box;
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3rem;
  color: white;
  border-radius: .3em;
  font-family: 'Inter';
}


.header-left{
  position: relative;

  width: 500px;
  img{
     position: absolute;
      width: 18%;
      left: 0%;
     
  }
 
}


.menu-open{
  position: absolute;
  height: 400px;
  width: 400px;
 top: 10%;
 left: 80%;
}




.cat{
  position: absolute;
  height: 500px;
  width: 100%;
  margin-top: 3em;


  img {
  position: absolute;
  width: 70%;

  left: 50%;
  transform: translateX(-50%);
     
  }
}


.part {
  position: absolute;
  bottom: 40%;
  max-width: 100%;
}


@media (min-width: 750px){
  .wrap {
      margin: 0 4em;
  }
  .hide-desktop{
      display: none;
  }
  .hide-mobile{
      display: block;
  }
  .header-left{
      /*aligns vertically*/
      display: flex;
      img{
          transform: translateY(70%);
      }
  }

.impact-heading{
  font-family: "Quicksand", sans-serif;
  color: darkgreen;
}
 .part{
    
      h1{
         font-size: 3rem;
      }
  position: absolute;
  height: 30%;
  .divider{
     position: relative;
     
      height:2px;
      width: 600px;
      border-top: 5px solid green;
      padding: 4;
      margin-right: 0;
      margin-bottom: 2em;
  }
 }
 nav ul{
  position: absolute;
  background: none;
  display: flex;
  gap: 4em;
 
  width: 50%;
  transform: translateX(0%);


    
     
 
 }
  main {
  width: 70%;
 
  margin-left: 4rem;
 }

 .cat-container{
      position: absolute;
      z-index: -1;
      width: 90%;
      top: -30%;
      left: 80%;
 }
}



.container {
  display: flex;
  gap: 200px;
  width: 100%;
  bottom: 0%;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 8px;
}

/* Green box with orange shadow */
.green-box {
  background-color: darkgreen; /* Green color */
}

.green-box .shadow {
  background-color: #ff914d; /* Orange shadow */
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  z-index: -1;
}

/* Orange box with green shadow */
.orange-box {
  background-color: #ff914d; /* Orange color */
}

.orange-box .shadow {
  background-color: darkgreen; /* Green shadow */
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: -1;
}