@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

* {
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

body {
  overflow: hidden;
}

#main {
  width: 100vw;
  height: 100dvh;
}

/* mobile size */
@media (max-width: 1023px) {
  .bg-home {
    background-image: url(../asset/hi-res/Home_frame_mobile.jpg);
  }

  .card {
    position: relative;
    max-width: 100%;
    height: 194px;
    overflow: hidden;
    background-size: cover;
  }
  .card-content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 67%;
    height: 100%;
    padding-left: 10px;
    padding-top: 12px;
    background-color: rgba(48, 102, 190, 0.4);
    color: white;
    transition: transform 0.3s;
  }
  .service-img1 {
    background-image: url(../asset/hi-res/Service_mobile_photo_1.jpg);
  }

  .service-img2 {
    background-image: url(../asset/hi-res/Service_mobile_photo_2.jpg);
  }

  .service-img3 {
    background-image: url(../asset/hi-res/Service_mobile_photo_3.jpg);
  }
}

/* desktop size */
@media (min-width: 1024px) {
  .bg-home {
    background-image: url(../asset/hi-res/Home_frame_desktop.jpg);
  }
  .bg-about {
    background-image: url(../asset/hi-res/About_frame_desktop.jpg);
  }
  .card {
    position: relative;
    width: 30%;
    padding-top: 40%;
    overflow: hidden;
  }

  .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 248px;
    width: 100%;
    padding: 20px 20px;
    background-color: rgba(48, 102, 190, 0.4);
    color: white;
    transition: transform 0.3s;
    transform: translateY(62%);
  }

  .card:hover .card-content {
    transform: translateY(0%);
  }

  .service-img1 {
    background-image: url(../asset/destop/Service_photo_1.png);
  }

  .service-img2 {
    background-image: url(../asset/destop/Service_photo_2.png);
  }

  .service-img3 {
    background-image: url(../asset/destop/Service_photo_3.png);
  }
}

/* @media (min-width: 1600px){
  .container-div-1600{
    margin: auto;
    max-width: 1600px;
  }
} */

.container-div-1600{
  margin-left: auto;
  margin-right: auto;
  max-width: 1600px;
}
#contact-content {
  background: linear-gradient(180deg, #FFF 25%, #3066BE 133%);
}

.content {
  opacity: 1;
  transform: translateY(100%);
  transition: opacity 0.3s ease-out, transform 0.5s ease-out;
}

.content.show {
  opacity: 1;
  transform: translateY(0%);
}

.content.fade-out {
  opacity: 0;
  transform: translateY(0%);
}

.content.slide-bottom {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}

.project-item{
  transition: opacity 0.2s ease-out
}

.project-item.hide{
  display: none;
  opacity: 0;
}

.project-detail {
  transition: opacity 0.2s ease-out
}
.project-detail.hide{
  opacity: 0;
}

div {
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  scrollbar-color: transparent transparent;
}

div::-webkit-scrollbar {
  width: 0; 
  height: 0;
}