@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;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");

.maincont {
   font-family: "Kanit", sans-serif;
}

.pcOrder1MobileOrder2 {
   width: 40%;
   position: relative;
}
.services-icon {
   position: absolute;
   bottom: 0;
   left: -50px;
   width: 50px;
   height: 70px;
   background-color: rgb(176, 176, 176);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.3s all;
}
.services-icon svg {
   width: 80%;
   fill: white;
}
.services-icon:hover {
   background-color: gray;
}
.pcOrder2MobileOrder1 {
   width: 50%;
}

.hero4 {
   padding: 2rem 3rem;
   /* margin-top: 4rem; */
   background-image: url("/assets/@images/@contact/contact-hero-bg.jpg");

   width: 100%;
   /* background-attachment: fixed; */
   background-size: cover;
   background-position: center;
   position: relative;
}
.hero4 .mycont h1 {
   font-size: 40px;
}
.hero4::after {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: #363333;
   inset: 0;
   opacity: 0.78;
   z-index: 3;
}
.hero4 .mycont h1 {
   font-size: 40px;
}
.mycont {
   position: relative;
   z-index: 4;
}

.singleSample i {
   padding-right: 1rem;
   /* padding-bottom: 0.5rem; */
}
.singleSample p {
   font-family: "Open Sans", sans-serif;
   font-size: 18px;
   line-height: 30px;
   font-weight: 500;
   /* line-height: 1; */
   color: #54595f;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 0.3rem;
}
.singleSample {
   width: 45%;
   margin-bottom: 3rem;
}

p {
   letter-spacing: -0.3px;
}
/* .fullDayWorkShopImg {
   width: 50%;
   height: 150%;
} */
.workshopText {
}
.workshopImg {
   position: relative;
   align-self: stretch;
}
.workshopText p {
   font-size: 18px !important;
}
@media (max-width: 768px) {
   .pcOrder1MobileOrder2 {
      order: 2;
      width: 98%;
   }
   .pcOrder2MobileOrder1 {
      order: 1;
      width: 100%;
   }
   .hero4 .mycont h1 {
      font-size: 29px;
   }
   .singleSample {
      width: 98%;
   }
   .services-icon {
      display: none;
   }
   #services {
      margin-top: 0 !important;
      padding-top: 0 !important;
   }
   .fullDayWorkShopImg {
      height: unset;
   }
}