@font-face{
  font-family:popin;
  src:url(/asstes/MochiyPopPOne-Regular.ttf);
}
@font-face{
  font-family:db;
  src:url(/asstes/20db.otf)
}
@font-face{
  font-family:kanji;
  src:url(/asstes/Kanji_PA.ttf)
}
@font-face{
  font-family:caviar;
  src:url(/asstes/CaviarDreams.ttf);
}
    *{
      margin: 0px;
      padding: 0px;
      
    }
  body,html{
    width: 100%;
    height: auto;
    background-color:black;
    scroll-behavior: smooth;
    scroll-padding-top: 0px;
  }
  .hero{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: center;
  border-bottom: 1.5px solid grey;
  padding-bottom: 20px;
  }
  .hero nav{
    height: 5rem;
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
     
  }
  .hero nav img{
    height: 90px;
    width: 95px;
    position: center;
    margin-top: 22px;
   margin-left: 18px;
  }
  .hero nav a{
    text-decoration: none;
    color: white;
      margin-right: 20px;
      font-size: 20px;
      font-family:db;
  }
  .hero .info{
   width: 100%;
  margin-top: 145px;
  display: flex;
  flex-direction: column;
  text-align: center;
  }
  .hero .info h2{
    font-family:kanji;
    font-size: 50px;
    color:white;
    letter-spacing: 5px;
    
  }
  .hero .info span{
    font-family: db;
    color: white;
  }
  .hero .info p{
    margin-top: 25px;
    font-family:caviar ;
    color: white;
    font-size: 28px;
  }
  .hero .fotter{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 80px;
  }
.hero .fotter p{
  color: white;
   font-family:popin;
  font-size: 20px;
}
  .hero .fotter a{
    font-size: 40px;
    margin-top: 5px;
  }
#services {
      width: 100%;
      height: 100vh;
      background-color:black;
      margin-top: 10px;
    }
    #services .text {
      width: 100%;
      position: relative;
    }
    #services .text h2{
      padding-top: 10px;
      margin-left: 15px;
      font-size: 40px;
      font-family: db;
      color: white;
    }
    #services .text span{
      position: absolute;
      font-size: 40px;
      margin-left: 28px;
      opacity: 0; /* Initially transparent */
      transition: opacity 0.5s ease; /* Smooth transition for opacity */
      color: white;
      border-bottom: 5px dashed rgb(132,254,24);
      font-family: popin;
    }
    #services .text span.visible {
      opacity: 1; /* Make visible */
    }
    #services .information{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }
    #services .information h4{
      color: white;
      font-family: caviar;
      margin-top: 40px;
      font-size: 30px;
      
    }
 
    .project {
      width: 100%;
      height: auto;
      margin: 0 auto;
      
    }
    .project h3{
      color: transparent;
      font-size: 38px;
      font-family: popin;
      margin-top:35px;
      margin-left: 15px;
      -webkit-text-stroke: 1.5px white;
    }
.project .contain {
  width: 100%; /* Ensure width is sufficient */
  height: 300px;
  display: flex;
  margin-top: 15px;
  overflow-x: auto;
  align-items: center;
 scroll-snap-type: x mandatory;
  justify-content:flex-start; /* Ensure boxes start from the left */
}

.project .contain .box {
  min-width: 400px; /* Adjust minimum width if necessary */
  height: 210px;/* Add margin between boxes */
  border: 1.5px solid white;
  margin: 20px;
   scroll-snap-align: center;
  border-radius: 20px;
}
@media screen and (max-width: 600px){
 .hero{
    width: 100vw;
    height: 100%;
 }
  .hero nav img{
     height: 70px;
    width: 75px;
  }
  .hero nav a{
    font-size: 15px;
  }
   .hero .info h2{
     padding: 0px 10px;
     font-size: 50px;
   }
   .hero .info p{
      margin-top: 28px;
   }
 .hero .fotter{
   margin-top: 100px;
 }
  #services{
    width:100%;
    height:100%;
  margin-top:10px;
  }
   #services .text h2{
    padding-top: 15px;
    font-size:22px;
  }
  #services .text span{
    font-size: 18px;
    margin-top: 2.5px;
    margin-left: 29px;
  }
  #services .information h4{
    margin-top: 70px;
    margin-left: 15px;
    font-size:27px ;
  }
     .project h3{
       margin-top: 130px;
       font-size: 29px;
     }
  .project .contain{
     height: 250px;
      scroll-snap-type: x mandatory;
      
  }
.project .contain .box{
   min-width: 340px; /* Adjust minimum width if necessary */
   max-width: 350px;
  height: 200px;/* Add margin between boxes */
  scroll-snap-align: center;
  margin: 30px 40px;
 
}
}