*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-transform: none;
}
:root {
  --gradient-color: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);
  --hover-color: #ef2300;
  --head-color: #003336;
  --card-text1: #fff;
  --card-text2: #000;
  --card-background: #3d6189;
  --card-color: #eff2f5;
}


/* main code for the page */

  .firstcontainer{
    width: 100%;
    height: auto;
    padding-top: 10rem;
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
      url('../images/p1.jpeg');
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: end;
    }

    .firstcontainer .wrapper{
      width: 80%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      
    }
    .firstcontainer .wrapper .righside{
      
      width: 50%;
      display: flex;
      flex-direction: column;
      background-color: #d9d9d9;
      padding: 60px;
    }
    .firstcontainer .wrapper .righside i{
      color: rgb(90, 90, 90);
      font-size: 1.5rem;
    }
    .firstcontainer .wrapper .righside h2{
      
      padding-top:30px;
    }
    .firstcontainer .wrapper .righside h3{
      display: inline-block;
      padding: 10px;
    }
   .firstcontainer .wrapper .leftside{
     width: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #fff;
     padding: 60px;
   }
   .firstcontainer .wrapper .leftside h1{
    padding-bottom: 30px;
   }
   .firstcontainer .wrapper .leftside input,textarea{
    padding: 15px 10px;
    border: none;
    box-shadow: 0 0 5px rgb(85, 84, 84);
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 10px;
    width: 90%;
   }
  
   .firstcontainer .wrapper .leftside  .sened-btn{
    width: 90%;
    border: none;
    border-radius: 5px;
    background-color: #066306;
    color: #fdfcfc;
    padding: 8px;
  }
  @media screen and (max-width:1024px) and (min-width:360px) {
    .firstcontainer {
      padding-top: 2rem;
    }
    .firstcontainer .wrapper {
      width: 90%;
      margin: 0 auto;
    }
    .firstcontainer .wrapper .righside{
      width: 100%;
    }
    .firstcontainer .wrapper .leftside{
      width: 100%;
    }

  }


      /* api section  */
  .api-section{
    width: 100%;
    display: flex;
  }
  .api-section div{
    padding: 30px;
  }
  .api-section .content p{
    padding: 2rem;
  }
  .api-section .content h2{
    text-align: center;
    color: #0a3806;
  }
  
  @media screen and (max-width:760px) and (min-width:360px) {
    .api-section{
      width: 100%;
      flex-wrap: wrap;
    }
    .api-section div{
      width: 90%;
      margin: 0 auto;
    }
    .api-section div img{
      width: 100%;
    }
  }