:root {
     
    --primary-color: #75BF7A;
    --secondry-color: #000000;
    --para-color: #9E9DA2;
}








@media screen and (max-width: 1024px){

    .header{
        margin-top: 20px;
    }
    .image{
        display: block;
       
    }
    .nav ul{
        display: none;
    }
   
   
    .hero .group-pic {
        display: none;
    }

    .hero .group-pick {
        display: block;
    }
    .content {
        
        margin-left: 200px;
    }
    .herobottom {
        width: 400px;
        height: auto;
        margin-top: 20px;
        margin-left: 300px;
    }

    .herobottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
  .herobottom .para {
   font-size: medium;
   width: 100%;
   font-weight: 300;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
  }


  .herobottom .input input{
    width: 200px;
    
  }
  
  .hero .content .button a, .bt1 {
    padding: 20px;
  }

  .herobottom .herobottombtn a button {
    width: 120px;
  }

  .works .works-h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: x-large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--secondry-color);
    margin-top: 50px;
}

.works .works-para {
    text-align: center;
}

.circle-image {
    display: none
  }

  .main-div{
    display: flex;
    flex-direction: column;
  }
  .left-works .works-content1 {
    text-align: center;
    font-size: x-large;
    width: 100%;
  }
  .left-works .works-content2 {
    display: block;
    text-align: center;
    font-size: x-large;
    width: 100%;
}
.left-works .works-content3 {
    display: none;
}

.right-works .works-content3 {
    display: block;
    text-align: center;
    font-size: x-large;
    width: 100%;
}

.right-works .works-content2 {
    display: none;
}

.right-works .works-content4 {
    text-align: center;
    font-size: x-large;
    width: 100%;
}

.main-div {
    margin-left: 400px;
}

/* benifits starts */
.benifits-heading h1 {
    font-size: xx-large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--secondry-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 10px;
 }

 .benifits-heading span {
   color: var(--primary-color);
 }

 .benifits1 {
    display: none;
 }

 .benifits2 {
    display: none;
 }

 .benifits3 {
    display: none;
 }

 .benifits1-responsive {
    display: block;
 }

 .benifits1-responsive {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 300px;
    border-radius: 10px;
    margin-top: 20px;
 }

 .benifits1-responsive .box-shadow .content {
    display: flex;
    align-items: center;
   margin-right: 350px;
   object-fit: contain;
    
    margin-bottom: 20px;
 }

 .benifits1-responsive .box-shadow .content p {
  font-size: 30px;
  color: var(--primary-color);
 }

 .benifits1-responsive .box-shadow .content h4 {
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
 }

 .benifits1-responsive .box-shadow .benifits-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 }
 .benifits1-responsive .box-shadow .benifits-img img {
    width: 300px;
    height: 300px;
 }
 .benifits1-responsive .para {
    font-size: large;
    color: var(--para-color);
    margin-left: 230px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.benifits2-responsive {
    display: block;
 }


 .benifits2-responsive {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 300px;
    border-radius: 10px;
    margin-top: 20px;
 }

 .benifits2-responsive .box-shadow .content {
    display: flex;
    align-items: center;
   margin-right: 350px;
   object-fit: contain;
    
    margin-bottom: 20px;
 }

 .benifits2-responsive .box-shadow .content p {
  font-size: 30px;
  color: var(--primary-color);
 }

 .benifits2-responsive .box-shadow .content h4 {
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
 }

 .benifits2-responsive .box-shadow .benifits-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 }
 .benifits2-responsive .box-shadow .benifits-img img {
    width: 300px;
    height: 300px;
 }
 .benifits2-responsive .para {
    font-size: large;
    color: var(--para-color);
    margin-left: 230px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.benifits3-responsive {
    display: block;
 }


 .benifits3-responsive {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 300px;
    border-radius: 10px;
    margin-top: 20px;
 }

 .benifits3-responsive .box-shadow .content {
    display: flex;
    align-items: center;
   margin-right: 350px;
   object-fit: contain;
    
    margin-bottom: 20px;
 }

 .benifits3-responsive .box-shadow .content p {
  font-size: 30px;
  color: var(--primary-color);
 }

 .benifits3-responsive .box-shadow .content h4 {
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
 }

 .benifits3-responsive .box-shadow .benifits-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 }
 .benifits3-responsive .box-shadow .benifits-img img {
    width: 300px;
    height: 300px;
 }
 .benifits3-responsive .para {
    font-size: medium;
    color: var(--para-color);
    margin-left: 180px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

}