@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*{
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }
 html{
   scroll-behavior: smooth;
 }
 nav{
    display:flex;
    align-items: center;
    top: 0;
    position:sticky;
    background-color: #ffffff;
    z-index: 1000;
 }
 .links{
    display: flex;
    font-weight: 700;
    gap: 3%;
    justify-content:flex-end;
    width: 100%;
    margin-right: 5%;
 }
 .links>a{
    text-decoration: none;
    color:rgb(0, 0, 0);
    padding: 0.5rem 1rem;
 }
 .links>a:hover{
    background-color: rgb(63, 82, 255);
    border-radius: 2rem;
    padding:0.5rem 1rem;
    transition:all 1s;
    box-shadow:0px 0px 2px #aab2ff,0px 0px 6px #7682ff,0px 0px 10px #4151ff;
 }
 .logo{
    width:100px;
    height:100px;
 }
 h1{
    font-size:3rem;
    color:rgb(66, 89, 194);
    text-align: center;
 }
 .about{
   background-repeat: no-repeat;
   background-size: cover;
    padding:2% 2%;
    background-color: white;
 }
 .about_para>p{
    margin-top:3%;
    font-size: 1.7rem;
 }
 .project_cards_container {
    margin-top:1%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 80%;
     padding: 4rem;
 }
 #projects{
    border-radius: .7rem;
    background-color: #727cf5;
    color:rgb(0, 0, 0);
 }
 #projects>h1{
    text-align: center;
    color: white;
    padding:2rem 0rem 0rem 0rem;
 }
 .project_cards:hover{
    transform: scale(1.1);
    transition: all .8s;
 }
 .project_cards {
     margin:8% 50%;
     overflow: scroll;
     width:90%;
     height:75%;
     padding: 2rem;
     border-radius: .9rem;
     background-color: rgb(197, 207, 255);
     box-shadow: 0px 0px 2px rgb(84, 84, 255),0px 0px 6px rgb(163, 163, 255),0px 0px 10px rgb(170, 170, 170);
     font-size:1rem;
 }
 .project_cards::-webkit-scrollbar{
   display: none;
 }
#expertise{
   width:100%;
   padding: 2%;
   background-color: rgb(255, 255, 255);
}
 .icons_container {
     display:flex;
     flex-direction:row;
     width:100%;
     height:100%;
     padding:2%;
 }
 .icons {
     margin: 2rem 1rem;
     padding: 1rem;
 }
h3,h5{
   margin: 3% auto;
   font-size: larger;
}
 .feedback_container {
     display:flex;
     color: #ffffff;
     justify-content: center;
     align-items: center;
 }
  .feedback:hover{
   transform:scale(1.1);
   transition: all 1s;
   box-shadow: 0px 0px 2px #8a95ff,0px 0px 6px #6c78ff,0px 0px 10px #293aff;
  }
 #testimonials>h1{
   color: #ffffff;
   padding:2rem;
 }
 .feedback>p:hover{
   transition: all 1s;
   transition: all 1s;
   transform:scale(1.1) ;
   cursor:context-menu;
   color: black;
   box-shadow:0px 0px 2px #bfc4f3,0px 0px 6px #a1a9fa,0px 0px 10px #727cf5;
 }
 #testimonials{
    margin-top: 2%;
    text-align: center;
    color: rgb(0, 0, 0);
    background-color: #727cf5;
    width:100%;
 }
 .feedback {
     padding: 2rem;
     background-color: #dbdbdb;
     width: max-content;
     height:340px;
     box-shadow: 1px 1px 6px rgb(146, 146, 146),1px 1px 9px rgb(59, 59, 59),1px 1px 12px rgb(36, 36, 36);
     border-radius: 1rem;
     margin:2%;
     width:25%;
 }
 .feedback>p {
     box-shadow: 0px 0px 2px black;
     padding:1rem;
     border-radius: 1rem;
     margin:15% auto;
     color: rgb(0, 0, 0);
 }
 .ans {
     display: none;
 }
 .social {
     width: 3.4rem;
     height: 3.4rem;
 }
 .social1 {
     width: 3rem;
     height: 3rem;
 }
 .social2 {
     width: 3.4rem;
     height: 3.4rem;
     padding-bottom: .1rem;
 }
 .social2:hover,.social:hover,.social1:hover{
    transform:scale(1.4);
    transition: all 1s;
 }

 footer {
     display: flex;
     color: rgb(0, 0, 0);
     gap: 80px;
     padding:2rem;
     justify-content: center;
     align-items: center;
     border: none;
     background-image: linear-gradient(to right,rgb(160, 160, 160),rgb(231, 231, 231));
 }
 footer>p{
    font-size: xx-large;
    font-weight: 900;
 }
 .foot_icons{
   display: flex;
   gap: 30px;
 }
 form{
    width:fit-content;
    margin:10% auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 10px rgb(167, 167, 167);
    padding:1rem;
    border-radius:1rem;
    background-color: rgba(255, 255, 255, 0.2);
    width:100%;
 }
 .form{
   background-color: rgb(255, 255, 255);
   padding: 2rem;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   margin-bottom: 0;
 }
 input{
    font-size: 1.5rem;
    padding: 3%;
    margin: 2% 0%;
    border-bottom:1px solid rgb(0, 0, 0);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background-color:inherit;
 }
 input:focus{
   outline: none;
   background-color:inherit;
 }
 label{
    margin:3% 0%;
 }
 textarea{
   padding: 1rem;
   background-color:inherit;
   border-radius: .5rem;
   font-size: 1rem;
 }
 textarea:focus{
   outline: none;
 }
 button{
   padding:2%;
   font-size: 1.2rem;
   margin: 7% auto;
   width:26%;
   color: rgb(255, 255, 255);
   border-radius: 10px;
   background-color: #727cf5;
   box-shadow: 0px 0px 1px rgb(163, 164, 255),0px 0px 6px rgb(89, 128, 255),0px 0px 8px rgb(164, 181, 255);
 }
 button:hover{
   transition: all 1s;
   background-color:#2e3ffd;
   cursor: pointer;
   box-shadow: 0px 0px 15px rgb(106, 109, 255),0px 0px 15px rgb(0, 68, 255),0px 0px 10px rgb(75, 108, 255);
 }
 .faq_container{
    font-size:1rem;
    text-align: center;
    margin-top:2%;
    width:100%;
 }
 .answer_container{
    display: none;
 }
 .faq_sec{
    height: 40rem;
    overflow:scroll;
    background-color: rgb(202, 218, 223);
    padding: 4rem;
 }
.plus-icon{
   position: relative;
}
.ans-icon{
   position: absolute;
   display: none;
}
 .head_faq{
    background-color: rgb(202, 216, 221);
 }
 .faq_sec::-webkit-scrollbar{
   display: none;
 }
 .question_container{
    background-color: beige;
    padding:1rem 3rem;
    width: fit-content;
    margin:0px auto;
    border-radius:1rem;
 }
 .work{
   display:grid;
   grid-template-columns:2fr 1fr;
   align-items: center;
   padding:2rem;
 }
.work>p{
   font-size: x-large;
   padding: 0rem 3rem;
}
.head{
   color: #ffffff;
}
.con{
   background-color: #727cf5;
}
 .contacts_container{
   display: flex;
   justify-content:space-evenly;
   align-items: center;
   margin:3% 0px 0px 0%;
   color: #ffffff;
   padding:2rem;
}
.contact{
   display:flex;
   align-items: center;
   gap: 30px;
   font-size: x-large;
   margin: 5%;
} 
.fade{
   transform: translateY(50px);
   opacity:0;
   transition:all 1s ease-in-out;
}
.show{
   transform: translate(0);
   opacity:1;
}
.about_image{
    display: flex;
    justify-content: center;
    align-items: center;
}
.about_image>p{
    font-size: 1.5rem;
}
.ham{
   height:60px;
   width:130px;
   display: none;
}
.icons>img{
   width: 10rem;
   height: 10rem;
   border-radius: 100%;
   background-size: cover;
}
@media screen and (max-width:425px) {
   *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
   }
   nav{
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding:.4rem;
   }
   .logo{
      width:50px;
      height:50px;
   }
   .links{
      display:none;
      flex-direction:column;
   }
   .ham{
      display:flex;
      width: 40px;
      height:40px;
   }
   section>div{
      display: flex;
      flex-direction: column;
      width:100%;
   }
   .feedback_container,.form{
      display: flex;
      flex-direction: column;
   }
   .about{
      padding: 1rem;
   }
   .about_image>img{
      width:290px;
      height:290px;
   }
   .about_para>p{
      font-size:.8rem;
   }
   .about>h1{
      font-size: 1.5rem;
   }
   .project_cards_container{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      width: 100%;
   }
  h1{
      font-size: 1.5rem;
   }
   #testimonials{
      display: flex;
      flex-direction: column;
   }
   .project_cards{
      font-size: .8rem;
      padding:1rem;
      margin:1% auto;
   }
   .feedback{
      font-size:.8rem;
      margin: 5% auto;
      width:70%;
   }
   .icons>img{
   width: 5rem;
   height: 5rem;
   border-radius: 100%;
   background-size: cover;
   padding: 0%;
}
.icons{
   font-size: .6rem;
}
.faq_sec{
   padding: 1rem;
    height: 440px;
    overflow:scroll;
}
 .faq_sec::-webkit-scrollbar{
   display: none;
 }
.faq_container{
   width:100%;
   font-size: .7rem;
}
.question{
   line-height: 1.5rem;
}
.work{
   display: flex;
   padding: 1rem;
}
.work>p{
   font-size: .8rem;
   padding:0;
}
form{
   width: 100%;
   font-size:.9rem;
}
button{
   font-size: .8rem;
}
.contact>h4,h6{
   font-size: .8rem;
}
footer{
   display: flex;
   flex-direction: column;
   margin: 0%;
   padding:2rem;
   gap: 10px;
}
footer>p{
   font-size: 1rem;
   margin:3% 0px 0px 0px;
}
.social1,.social2{
   padding: 0%;
   margin: 0%;
   width: 2rem;
   height: 2rem;
}
.social{
   margin: 0%;
   padding: 1% 0px 0px 0px;
   width: 2.5rem;
   height: 2.5rem;
}
iframe{
   width: 300px;
   height: 300px;
}
.contacts_container{
   padding: 2rem;
   width: 100%;
}
.contact_container{
  margin: 1% auto;
}
.contact{
  margin:0rem 3rem 2rem 2rem;
  align-items: center;
}
}
@media screen and (min-width:426px) and (max-width:768px){
   *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
   }
   nav{
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding:.5rem;
   }
   .logo{
      width:50px;
      height:50px;
   }
   .links{
      display:flex;
      gap:2px;
      font-size: .8rem;
   }
   .ham{
      display:none;
   }
   section>div{
      display: flex;
      flex-direction: column;
      width:100%;
   }
   .feedback_container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

   }
   .form{
       display: flex;
      flex-direction: column;
   }
   .about{
      padding: 1rem;
   }
   .about_image>img{
      width:290px;
      height:290px;
   }
   .about_para>p{
      font-size:1rem;
   }
   .project_cards_container{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      width: 100%;
   }
  h1{
      font-size: 2rem;
   }
   .project_cards{
      font-size: 1rem;
      padding:1rem;
      margin:1% auto;
   }
   .feedback{
      font-size:1rem;
      width:40%;
   }
   .icons>img{
   width: 5rem;
   height: 5rem;
   border-radius: 100%;
   background-size: cover;
}
.icons{
   font-size: 1rem;
}
.faq_sec{
   padding: 1rem;
    height: 440px;
    overflow:scroll;
}
 .faq_sec::-webkit-scrollbar{
   display: none;
 }
.faq_container{
   width:100%;
   font-size: 1rem;
}
.work{
   display: flex;
}
.work>p{
   font-size: 1rem;
}
form{
   width: 90%;
   font-size:1rem;
}
button{
   font-size: 1rem;
}
.contact>h4,h6{
   font-size: 1rem;
}
.contacts_container{
   display: flex;
   flex-direction: row;
   padding: 2rem;
}
footer{
   display: flex;
   flex-direction: column;
   margin: 0%;
   padding:2rem;
   gap: 10px;
}
footer>p{
   font-size: 1rem;
   margin:3% 0px 0px 0px;
}
.social,.social1,.social2{
   padding: 0%;
   margin: 0%;
    width: 2rem;
     height: 2rem;
}
iframe{
   width: 300px;
   height: 300px;
} 
}