.typewriter {
  width: fit-content;
  text-align: center;
  background-color: #1a1a1a;
  margin: 2rem auto;
}

.typewriter h1 {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typing 3.5s steps(40, end) forwards;
  position: relative;
  /* ต้องมีสำหรับ caret */
  border-right: none;
  /* เอา border ออก */
  /* font-size: 2.3rem; */
  margin-top: 30px;
}

.typewriter h1::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to bottom,
      #ffc502,
      #88d04a,
      #028dfe,
      #425cf8,
      #8336cd,
      #fc7c0b,
      #f93f14);
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink-caret {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.group-hand {
  transform-style: preserve-3d;
  position: relative;
  pointer-events: none;
  z-index: 1;
  max-width: 50%;
  height: 100%;
  /* padding-top: 2rem; */
}

.hand-wyn {
  width: auto;
}

.hand-wyn img {
  width: 100%;
  height: auto;
  object-fit: cover;
  place-self: center;
  backface-visibility: hidden;
}

.text-circle,
.text-circle span {
  transform-style: preserve-3d;
  position: absolute;
}

.text-circle {
  background-color: #fff;
  animation: animateText 17s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-circle span {
  top: 0;
  left: 0;
  font-weight: 700;
  background: transparent;
  color: #ffffff;
  font-size: 5.5vw;
  transform-origin: center;
  transform: rotateY(calc(var(--i) * 18deg)) translateZ(23vw);
  /*360° / 40 = 9°*/
  /* transform: rotateY(calc(var(--i) * calc(360deg / 20))) translateZ(23vw); */
  text-transform: uppercase;
  /* font-style: italic; */
}

@keyframes animateText {
  0% {
    transform: perspective(1000px) rotateY(1turn) rotateX(-10deg);
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateX(-10deg);
  }
}

.box-wyn-pic {
  width: 185px;
  height: 270px;
  display: flex;
  place-self: center;
}

.image-box {
  width: 100%;
  height: 100%;
  place-self: center;
}

.website,
.creative,
.event,
.influencer,
.media,
.social {
  /* max-width: 100%; */
  position: absolute;
  /* object-fit: contain; */
}

.media {
  transform: rotate(-10deg) scale(1.22);
}

.influencer {
  transform: translateX(10%) scale(1.5);
}

.creative {
  transform: rotate(-10deg) scale(1.15);
}

.event {
  width: 95%;
  transform: translateY(-1%);
}

.social {
  width: 100%;
  transform: translateX(10%) scale(1.3);
}

.website {
  transform: translateX(2%) scale(1.25) rotate(-9deg);
}

.img-fluid-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.img-fluid-2 {
  opacity: 0;
  z-index: -1;
}

/* .frame-map {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right,
      #ffc502,
      #88d04a,
      #028dfe,
      #425cf8,
      #8336cd,
      #fc7c0b,
      #f93f14);
  display: grid;
} */
/* .map-container img {
  width: 98%;
  height: 98%;
  place-self: center;
} */

.modal-img {
  width: 100% !important;
  height: auto !important;
}

.box-client {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.container-logo {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 30px;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

.container-logo div {
  width: 188px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-gap {
  gap: 70px;
}

.swiper-container-logo {
  width: 100%;
}

.swiper-container-logo .container-logo.swiper-slide {
  opacity: 0 !important;
  outline: none;
  border: none;
}

.container-logo.swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}

.controlBtn,
.workControlBtn {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  padding: 50px 0;
  align-items: center;
  gap: 10px;
}

.controlBtn div {
  width: 120px;
  display: flex;
  justify-content: end;
}

.workControlBtn div {
  width: 70px;
  display: flex;
  justify-content: end;
}

.controlBtn div:nth-child(1) {
  width: 60px;
}

.controlBtn div:nth-child(2) {
  width: 130px;
}

.workControlBtn div:nth-child(1) {
  width: 50px;
}

.workControlBtn div:nth-child(2) {
  width: 120px;
}

.controlBtn img,
.workControlBtn img {
  max-width: 100%;
  cursor: pointer;
  height: 100%;
}

.div-text-spans a {
  text-decoration: none;
  color: #1a1a1a;
}

.div-text-spans a:hover {
  text-decoration: underline;
}

.mobile-view-service {
  display: none;
}

/* .blog-image-header {
  width: 650px;
  border-radius: 3rem;
} */
.address-logo {
  width: 25%;
}

/* @media screen and (max-width: 1440px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 0px;
  }
  div.our-clients-logo-two{
      padding: 0px;
  }
  div.our-clients-logo-three{
      padding: 0px;
  }

  h1.our-clients {
    font-size: 120px;
  }

  .logo-thumbnail {
    width: 130px;
    height: 130px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 65px;
  }

} */

/* @media screen and (max-width: 1400px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 65px;
  }
  div.our-clients-logo-two{
      padding: 65px;
  }
  div.our-clients-logo-three{
      padding: 65px;
  }

  h1.our-clients {
    font-size: 70px;
  }

  #myImage {
    margin-top: 4px;
    width: 60px;
  }

  .logo-thumbnail {
    width: 125px;
    height: 125px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 65px;
  }

  .controlBtn img,
  .workControlBtn img {
  max-width: 90%;
  cursor: pointer;
  height: 100%;
}


} */

/* @media screen and (max-width: 1300px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 65px;
  }
  div.our-clients-logo-two{
      padding: 65px;
  }
  div.our-clients-logo-three{
      padding: 65px;
  }

  h1.our-clients {
    font-size: 70px;
  }

  #myImage {
    margin-top: 4px;
    width: 60px;
  }

  .logo-thumbnail {
    width: 102px;
    height: 125px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 50px;
  }

  .controlBtn img,
  .workControlBtn img {
  max-width: 90%;
  cursor: pointer;
  height: 100%;
}


} */

/* @media screen and (max-width: 1060px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 65px;
  }
  div.our-clients-logo-two{
      padding: 65px;
  }
  div.our-clients-logo-three{
      padding: 65px;
  }

  h1.our-clients {
    font-size: 60px;
  }

  #myImage {
    margin-top: 4px;
    width: 60px;
  }

  .logo-thumbnail {
    width: 80px;
    height: 95px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 40px;
  }

  .controlBtn img,
  .workControlBtn img {
  max-width: 70%;
  cursor: pointer;
  height: 100%;
}


} */

/* @media screen and (max-width: 800px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 65px;
  }
  div.our-clients-logo-two{
      padding: 65px;
  }
  div.our-clients-logo-three{
      padding: 65px;
  }

  h1.our-clients {
    font-size: 40px;
  }

  #myImage {
    margin-top: 4px;
    width: 40px;
  }

  .logo-thumbnail {
    width: 50px;
    height: 60px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 35px !important;
  }

  .controlBtn img,
  .workControlBtn img {
  max-width: 70%;
  cursor: pointer;
  height: 100%;
}


} */

/* @media screen and (max-width: 680px) {
  .menu-active {
    font-size: 15px;
  }

  .menu-other {
    font-size: 12px;
  }

  img.img-Wyn {
    max-width: 100%;
    height: auto;
  }

  iframe.map-form {
    width: 100%;
    height: 100%;
  }

  div.our-clients-logo-one{
    padding: 65px;
  }
  div.our-clients-logo-two{
      padding: 65px;
  }
  div.our-clients-logo-three{
      padding: 65px;
  }

  h1.our-clients {
    font-size: 30px;
  }

  #myImage {
    margin-top: 4px;
    width: 30px;
  }

  .logo-thumbnail {
    width: 50px;
    height: 30px;
    object-fit: contain;
    transition: filter 0.2s;
  }

  .our-gap{
    gap: 35px !important;
  }

  .controlBtn img,
  .workControlBtn img {
  max-width: 35%;
  cursor: pointer;
  height: 100%;
}


} */

/* @media screen and (max-width: 1400px) {
  .containers-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  h1.wyn-bold-text,
  h1.WHY-text,
  h1.CHOOSE-text,
  h1.US-text {
    font-size: 70px;
  }
  h1.our-services,
  h1.our-works,
  h1.outline-text {
    font-size: 70px;
  }
  #myImage {
    width: 60px;
  }
} */

/* @media (max-width: 1400px) {
  .container-fluid {
    display: flex !important;
    justify-content: space-between !important;
  }
  .text-circle span {
    font-size: 5vw;
  }
  h3.text-wyn-one {
    font-size: 30px;
  }

  h1.outline-text {
    padding: 20px 0;
  }
  h1.wyn-bold-text,
  h1.WHY-text,
  h1.CHOOSE-text,
  h1.US-text {
    font-size: 70px;
  }
  h1.our-services,
  h1.our-works,
  h1.outline-text {
    font-size: 70px;
  }
  #myImage {
    width: 60px;
  }
  .containers-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  .containers-services div {
    display: grid;
    justify-items: center;
  } */

/* .US-text > img {
    display: none;
  } */
/* .desktop-view-services,
  .blink {
    display: none;
  } */
/* .mobile-view-service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  } */
/* h1.wyn-bold-text,
  h1.WHY-text,
  h1.CHOOSE-text,
  h1.US-text {
    font-size: 40px;
  } */

@media (min-width: 1600px) {
  .services-custom-border {
    padding: 2rem !important;
  }
}

@media (min-width: 1900px) {
  .services-custom-border {
    padding: 2.5rem !important;
  }
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1400px) {}

@media screen and (max-width: 1300px) {}

@media (max-width: 1024px) {
  .swiper-wrapper {
    transition-timing-function: linear !important;
  }
}

@media screen and (max-width: 1060px) {}

@media screen and (max-width: 800px) {}

@media screen and (max-width: 680px) {}

@media (max-width: 425px) {
  .group-hand {
    max-width: 70%;
    height: 100%;
    /* padding-top: 2rem; */
  }

  .hand-wyn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}