@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Dancing+Script:wght@400;500;600;700&family=Dawning+of+a+New+Day&family=Gochi+Hand&family=Indie+Flower&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&family=Poiret+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,600&family=Raleway:wght@100;200;300;400&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Wallpoet&display=swap');


*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    height: 100vh;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}


.home-page{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    
}

.header{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 2rem;
  border: 2px solid #D62828;
  z-index: 10;
  display: none;
}

.header span{
  display: flex;
  gap: 20px;
}

.header p{
  color: #353b43;
}

.main{
    padding: 80px;
}

.home-page .lianee{
    width: 320px;
    height: 215px;
    left: 65rem;
    top: 10rem;
}



.home-page img{
    position: absolute;
    width: 186px;
    height: 135px;
    left: 20rem;
    top: 23rem;

}

.tex{
   position: relative;
    width: 70rem;
    height: 28rem;
    align-items: center;
    justify-content: center;
    
    left: 8rem;
}

.tex h2{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 50px;
   font-weight: 400;
}

.tex p{
    position: relative;
    display: flex;
    font-size: 50px;
    font-weight: 300;
    top: 50px;
    color: black;
}

.logo{
    position: relative;
    display: block; 
    height: 100vh;
    left: 24.3rem;
}

.social-icons{
    display: grid;
    margin-top: 15rem;
    gap: 20px;
}

.icons1{
    position: relative;
    text-decoration: none;
    display: flex;
    width: 70px;
    height: 70px; 
    align-items: center;
    transform: rotate(-30deg);
    justify-content: center;
    border-radius: 180px;
    background-color: #D62828;
}


.icons2{
    position: relative;
    text-decoration: none;
    display: flex;
    width: 70px;
    height: 70px; 
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg);
    border-radius: 180px;
    background-color: #003049;
}


.icons3{
    position: relative;
    text-decoration: none;
    display: flex;
    width: 70px;
    height: 70px; 
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg);
    border-radius: 180px;
    background-color: #F77F00;
}


.icons4{
    position: relative;
    text-decoration: none;
    display: flex;
    width: 70px;
    height: 70px; 
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg);
    border-radius: 180px;
    background-color: #FCBF49;
}

.icons1 i{
 font-size:45px ;
 color: #003049;
 motion-rotation: 3turn;
}

.icons2 i{
    font-size:45px ;
    color: #F77F00;
    motion-rotation: 3turn;
   }

   .icons3 i{
    font-size:45px ;
    color: #FCBF49;
    motion-rotation: 3turn;
   }

   .icons4 i{
    font-size:45px ;
    color: #F77F00;
    motion-rotation: 3turn;
   }

   .scroll-down{
    position: relative;
    display: flex;
    text-decoration: none;
    color: #353b43;
    left: -85rem;
    gap: 10px;
    top: 24rem;
   }

   .scroll-down i{
      font-size: 30px;
   }

   /*================== end home page ================*/

/*================= about my ===============*/

.about-page{
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
   
    
}

.about{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    justify-content: center;
    width: 110rem;
    height: 90vh;
    padding-bottom: 10rem;
}

.about-page h2{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:50px ;
    font-weight: 400;
    
}

.about-text{
  display: grid;
  align-items: center;
  justify-content: center;
  width: 50rem;
  height: 33rem;
  border: 1px solid #353b43;
  border-radius: 20px;
  padding: 15px;
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
}

.about-text p{
  font-size: 33px;
  font-weight: 300;
  color: #000000;
}

.about-logo{
  display: grid;
  align-items: center;
  gap: 10px;
   width: 50rem;
   
}

.skill-logo{
  display: grid;
  grid-template-columns: repeat(3,15rem);
  gap: 25px;
  
}

.lo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: 15rem;
  border-radius: 360px;
  border:1px solid #353b43;
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
  
}

.lo img{
  width: 9rem;
  height: 9rem;
}

.le{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
  height: 5.5rem;
  border: 1px solid #353b43;
  border-radius: 13px;
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
}

.soon-logo{
  display: flex;
  gap: 20px;
  width: 47.5rem;
  height: 5rem;
}

.soon{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #003049;
  border-radius: 20px;
  width: 5rem;  
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
}
.soon p{
  color: #003049;
  font-weight: 300;
  font-size: 25px;
}
.logo-so{
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid #353b43;
  border-radius: 20px;
  width: 25rem;
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
}

.logo-so img{
  width: 3rem;
  height: 3rem;
}

.contact-my{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
  width:14.6rem ;
  border: 1px solid #F77F00;
  box-shadow: inset 15px 15px 15px 15px rgba(0%, 0%, 0%, 16%);
  border-radius: 20px;
}

.contact-my i{
  color: #F77F00;
  font-size: 35px;
}

.contact-my p{
  color: #F77F00;
  font-weight: 400;
  font-size: 25px;
}
     
     /*================ servises page ================*/

     .servises-page{
        position: relative;
        display: grid;
        justify-content: center;
        padding-top: 50px;
        width: 100%;
        height: 100vh;
     }

     .servises-page h2{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:50px ;
        font-weight: 400;
     }


     .my-card{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
     }

     .card1{
        display: grid;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 23rem;
        height: 30rem;
        background-color: #003049;
        color: white;
     }

     .card2{
        display: grid;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 40rem;
        height: 15rem;
        background-color: #FCBF49;
        
     }

     .card3{
        display: grid;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 40rem;
        height: 15rem;
        background-color: #F77F00;
     }

     .card1 img{
        height: 3.5rem;
     }

     .card2 img{
      height: 3.5rem;
   }

   .card3 img{
    height: 3.5rem;
 }

     .card1 h3{
        position: relative;
        margin-left: 40px;
        font-size: 40px;
        font-weight: 300;
     }

     .card2 h3{
        font-size: 40px;
        font-weight: 300;
        color: #000000;
     }

     .card3 h3{
      font-size: 40px;
      font-weight: 300;
      color: #000000;
   }

     .card1 p{
        font-size: 23px;
        font-weight: 300;
        
     }

      .card2 p{
        font-size: 23px;
        color: #000000;
        font-weight: 300;
      }

      .card3 p{
        font-size: 23px;
        color: #000000;
        font-weight: 300;
      }

     /*================= end servises ============*/


     /*==============Projects============*/
     .pp{
      display: grid;
      width: 100%;
      height: 100vh;
      background-color: #003049;
      
     }

      .p-line{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 75vh;
        background: #003049;
        
      }

      .projects::-webkit-scrollbar {
        display: none;
    }

      .pp h2{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size:50px ;
        font-weight: 400;
        bottom: 1.3rem;
      }

     .projects{
      display: grid;
      gap: 9px;
      grid-auto-flow: column;
      grid-auto-columns: 37%;
      padding: 0 3rem 0rem;
      overflow-x: auto;
      transform: rotate(-0deg);
      overscroll-behavior-inline: contain;
     }

     .proj{
      margin-bottom: 4.5rem;
     }

     .proj,.proj2{
      display: grid;
      align-items: center;
      width: 45rem;
      height: 26rem;
      
     }

    .m{
      display: grid;
      padding: 20px 20px 0 20px;
      width: 45rem;
      height: 26rem;
      box-shadow: inset 0rem 0rem 20rem 5rem #353b43;
      opacity: 0;
      transition: 0.5s;
    }

     .m:hover{
      opacity: 100%;
      
     }

     .proj .m h2
     ,.proj2 h2{
      position: relative;
      margin-right: auto;
      font-weight: 200;
     }

     .proj:nth-child(1){
      background-image: url(image/1.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

     }

     .proj:nth-child(2){
      background-image: url(image/pj3.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj:nth-child(3){
      background-image: url(image/pj3\ \(2\).png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj:nth-child(4){
      background-image: url(image/pja3.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

     }

/*===================================*/

     .proj2:nth-child(1){
      background-image: url(image/pj3\ \(4\).png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj2:nth-child(2){
      background-image: url(image/Rectangle\ 23.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj2:nth-child(3){
      background-image: url(image/Rectangle\ 30.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj2:nth-child(4){
      background-image: url(image/Rectangle\ 33.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }

     .proj2:nth-child(5){
      background-image: url(image/Rectangle\ 31.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
     }
    .proj p,
    .proj2 p{
      color: #fff;
      font-weight: 200;
      font-size: 26px;
    }

   .proj b,
   .proj2 b{
    color: #fff;
    font-weight: 300;
    font-size: 25px
   }

    .ico{
      color: #fff;
      display: flex;
      justify-content: space-between;
      margin-top: 28px;
    }

    .ico span{
      display: flex;
      gap: 20px;
    }

    .ico i{
      font-size: 30px;

    }

    .ico .v{
      font-size: 20px;
    }

    .ico a{
      display: flex;
      gap: 5px;
      text-decoration: none;
      color: #fff;
    }


     .snaps-inline{
      scroll-snap-type: inline mandatory;
      
     }

     .snaps-inline > * {
      scroll-snap-align: start;
     }

     .glass{
      display: grid;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 15pc;
     }

    


    
       /*================ end Projects ==============*/

       /*----------------- Contact page ---------------*/


      .Contact-page{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
      }

       .Contact-page h2{
        position: relative;
        top: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size:50px ;
        font-weight: 400;
        }
            
      .Contact-Me{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rem;
        height: 60rem;
        
      }

      .Contact-tex{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 35rem;
        height: 50rem;
        background-color: #003049;
      }

      .Contact-tex p{
        color: white;
        font-size: 40px;
        font-weight: 200;
      }


      .Contact-tex b{
        color: white;
        font-size: 40px;
        font-weight: 100;
       
      }

      .Contact-email{
        display: grid;
        justify-content: center;
        align-items: center;
        width: 35rem;
        height: 50rem;
        background-color: #D62828;
      }

      .Contact-email h2{
        color: white;
        font-weight: 200;
      }

      .cont_form{
        display: grid;
       justify-content: center;
        width: 30rem;
        height: 30rem;
      }


      .cont-box input{
        width: 25rem;
        height: 3rem;
        font-size: 18px;
        padding: 10px;
        background-color: white;
        border: 1px solid #ffffff;
        -webkit-transition: 0.5s;
         transition: 0.0s;
         outline: none;
      }
      
      .cont-gro textarea{
        background-color: white;
        font-size: 20px;
        padding: 10px;
        width: 25rem;
        height: 10rem;
        border: 1px solid #ffffff;
        -webkit-transition: 0.5s;
        transition: 0.0s;
        outline: none;
      }

      .con{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        background-color: white;
        width: 25rem;
        height: 4rem;
        border: 1px solid #ffffff;
      }

      .con p{
        font-size: 20px;
        font-weight: 400;
        color: #353b43;
      }

      .con i{
        font-size: 25px;
        color: #353b43;
      }
      
      .text {
        font-size:14px;
        max-width:400px;
        margin-top:20px;
      }
      
 
      .contact-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: space-around;
        
      }

      .network{
        display: grid;
        align-items: center;
        justify-content: center;
        gap: 20px;

      }

      .network span{
        display: flex;
        gap: 20px;
        text-decoration: none;
        align-items: center;
        justify-content: center;
      }
    
      .contact-icon p{
        color: #353b43;
        font-weight: 300;
      }

      .network i{
        font-size: 35px;
        color: #353b43;
      }

      /*================== end contact page ==============*/