@import url('https:fonts.googleapis.com/css2?fomily=Poppins:ital, ughte0,100;0,300;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,9006d1splay=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

header {
  background-color: rgb(236, 236, 236);
  width: 100%;
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 200px;
}

.logo {
   text-decoration: none;
   color: rgb(17, 43, 187);
   text-transform: uppercase;
   font-weight: 700;
   font-size: 1.8em;
}
.navigation a{
  color: rgb(17, 47, 216);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 500;
  padding-left: 30px;

}

.navigation a:hover{
  color: rgb(190, 19, 233);
  }
  section {
padding: 100px 200px;
  }
  .main {
   width: 100%;
   min-height: 100vh;
   display: flex;
   align-items: center;
   background: url(images/WhatsApp\ Image\ 2024-12-12\ at\ 15.43.21.jpeg) no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;

      }
      
      .main h2 {
           color: rgb(216, 220, 230);
           font-size: 1.4em;
           font-weight: 500;
        
      }

      .main h2 span { 
        display: inline-block;
        margin-top: 10px;
        color: rgb(155, 103, 204);
        font-size: 3em;
        font-weight: 600;
       }
       .main h3{
        color: azure;
        font-size: 2em;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: 10px;
        margin-bottom: 30px;
       }
       .main-btn {
        color: beige;
        background-color: rgb(174, 93, 177);
        text-decoration: none;
        font-size: 1.1em;
        font-weight: 600;
        display: inline-block;
        padding: 0.9375em 2.1875em;
        letter-spacing: 1px;
        border-radius: 15px;
        margin-bottom: 40px;
        transition: 0.7s ease;
       }
       .main-btn:hover {
        background-color: rgb(100, 23, 172);
        transform: scale(1.1);
       }

       .social-icons a{
        color: rgb(142, 207, 238);
        font-size: 1.7em;
        padding-right: 30px;
       }
       .title {
        display: flex;
        justify-content: center;
        color: rgb(155, 9, 123);
        font-size: 2.2em;
        font-weight: 800;
        margin-bottom: 30px;
      

       }

       .content{
        display: flex;
      justify-content: center;
      flex-direction:row;
      flex-wrap: wrap;
       }
       .card {
        background-color: rgb(255, 255, 255);
        width: 21.25em;
        box-shadow: 0 5px 20PX rgba(1, 1, 1, 5);
        border-radius: 10px;
        padding: 25px;
        margin: 15px;
        transition: 0.7s ease;
       }
       .card:hover{
        transform: scale(1.1);
       }
       .icon {
        color: rgb(62, 26, 71);
        font-size: 8em;
       text-align: center;
       }
       .info {
       text-align: center;
        }
       .info h3{
       color: rgb(157, 97, 214);
       font-size: 1.2em;
       font-weight: 700;
       margin: 10px;
       }
       .projects {
        background-color: rgb(12, 0, 24);
         }
         .projects .content {
          margin-top: 30px;
           }
           .project-card {
            background-color: rgb(255, 255, 255);
            border: 2px solid rgb(253, 253, 252);
            min-height: 14em;
            width: 23em;
            overflow: hidden;
            border-radius: 10px;
            margin: 20px;
            transition: 0.7s ease;
        
             }
             .project-card:hover {
               transform: scale(1.1);
               }

               .project-image img{
                width: 100%;
                }
                .project-card:hover .project-image {
                  opacity: 0.9;
                  }
   
                  .project-info {
                    padding: 1em;
                    text-align: center;
                    
                    }
                    .project-category  {
                     font-size: 0.8em;
                     color: rgb(27, 1, 37);
                    
                      }
                      .contact .icon {
                        font-size: 4.5em;
                       
                         }
                       .contact .info h3 {
                        color: rgb(17, 11, 4);
                       
                         }
                         .contact .info p {
                          font-size: 1.5em;
                           }
                            .footer {
                              background-color: rgb(24, 24, 24);
                              color: aliceblue;
                              padding: 2em;
                              display: flex;
                              justify-content: space-between;
                            
                             }
                             .footer-title {
                             font-size: 1.3em;
                             font-weight: 600;
                             }
                             .footer-title span {
                              color: rgb(206, 91, 221);
                              
                             
                              }
                              @media (max-width:1023px){
                                header {
                                  padding: 12px 20px;
                                  
                                 
                                  }
                                .navigation a {
                                  padding-left: 10px;

                                 
                                  }
                                  .title  {
                                    font-size: 1.8em;

                                   
                                    }
                                    section {
                                      padding: 80px 20px;
                                      }
                                  .main-content h2 {
                                    font-size: 1em;
                                    
                                   
                                    }