.banner_section h2,
#banner_section h2,
.banner_section .h2,
#banner_section .h2 {
  font-size: calc(2.375rem + 2.5vw) !important;
}

/****************************** grid ******************************/

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.grid-border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style)
    var(--bs-border-color) !important;
}
.grid-border-end {
  border-right: var(--bs-border-width) var(--bs-border-style)
    var(--bs-border-color) !important;
}

@media (max-width: 576px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }

  .grid-border-bottom {
    border-bottom: 0 !important;
  }
  .grid-border-end {
    border-right: 0 !important;
  }

  .img-sustainability {
    max-width: 366px !important;
  }
}

@media (min-width: 820px) and (max-width: 1024px) {
  .img-sustainability {
    max-width: 680px !important;
  }
  #our_company .desktop,
  #about_img .desktop {
    display: none;
  }
  #our_company .mobile,
  #about_img .mobile {
    display: block;
  }
}

/****************************** grid ******************************/

/****************************** animation ******************************/
.our-icon-phone:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: phone 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes phone {
  0% {
    transform: rotate(1deg);
    /* transform: translate(1px, 1px) rotate(0deg); */
  }
  10% {
    transform: rotate(-2deg);
    /* transform: translate(-1px, -2px) rotate(-1deg); */
  }
  20% {
    transform: rotate(2deg);
    /* transform: translate(-3px, 0px) rotate(1deg); */
  }
  30% {
    transform: rotate(1deg);
    /* transform: translate(3px, 2px) rotate(0deg); */
  }
  40% {
    transform: rotate(2deg);
    /* transform: translate(1px, -1px) rotate(1deg); */
  }
  50% {
    transform: rotate(-2deg);
    /* transform: translate(-1px, 2px) rotate(-1deg); */
  }
  60% {
    transform: rotate(1deg);
    /* transform: translate(-3px, 1px) rotate(0deg); */
  }
  70% {
    transform: rotate(-2deg);
    /* transform: translate(3px, 1px) rotate(-1deg); */
  }
  80% {
    transform: rotate(2deg);
    /* transform: translate(-1px, -1px) rotate(1deg); */
  }
  90% {
    transform: rotate(1deg);
    /* transform: translate(1px, 2px) rotate(0deg); */
  }
  100% {
    transform: rotate(-2deg);
    /* transform: translate(1px, -2px) rotate(-1deg); */
  }
}

.our-icon-mail:hover {
  position: relative;
  animation: mail 0.5s infinite;
}

@keyframes mail {
  from {
    left: -50px;
  }
  to {
    left: 50px;
  }
}

.our-icon-location:hover {
  position: relative;
  animation: location 0.5s infinite;
}

@keyframes location {
  0% {
    transform: rotateY(180deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}

.our-icon-work {
  transition: transform 0.5s; /* Animation */
}
.our-icon-work:hover {
  transform: scale(
    1.5
  ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-container img {
  display: inline-block;
}

.scroll-container img:hover {
  animation: bounce 1.5s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0);
  }
}

/* .E-bouncy {
  animation: banner-bounce 1.25s ease-in-out infinite;
}
.S-bouncy {
  animation: banner-bounce 1.26s ease-in-out infinite;
}
.G-bouncy {
  animation: banner-bounce 1.27s ease-in-out infinite;
} */

.bounce-wrapper {
  position: relative;
  display: inline-block;
}

.bouncy-half {
  width: 50%;
  display: block;
  margin: 0 auto;
}

.bouncy-full {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.bounce-wrapper:hover .bouncy-full,
.bounce-wrapper:hover .bouncy-half {
  animation: bounce 1.5s ease-in-out infinite;
}

/* กำหนด keyframes การเด้ง */
/* @keyframes banner-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
} */

/* กำหนด keyframes การเด้ง */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-30px); /* เด้งขึ้นสูง */
  }
  50% {
    transform: translateY(0); /* ลงมา */
  }
  70% {
    transform: translateY(-15px); /* เด้งย่อย */
  }
}

/* เงา */
.shadow {
  position: absolute;
  bottom: 100px;
  left: 50%;
  width: 80px;
  height: 15px;
  filter: blur(8px);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* เงา */
.bounce-wrapper:hover .shadow {
  animation: shadow-bounce 1.5s ease-in-out infinite;
  background: rgba(0, 0, 0, 0.75);
}

/* keyframes ของเงา */
@keyframes shadow-bounce {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.25;
  }
  30% {
    transform: translateX(-50%) scale(0.7); /* เด้งสูง → เงาเล็กลง */
    opacity: 0.15;
  }
  50% {
    transform: translateX(-50%) scale(1.2); /* ลงมา → เงาใหญ่ */
    opacity: 0.35;
  }
  70% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.2;
  }
}
/****************************** animation ******************************/

/****************************** about-gsap ******************************/

.horizontal-wrapper {
  position: relative;
  height: 100vh; /* สูงเท่าหน้าจอ แต่ไม่ full-screen ทุก section */
  overflow: hidden;
  margin: 50px 0;
}

.horizontal-container {
  display: flex;
  height: 100%;
  width: max-content; /* กว้างเท่าที่มี item */
}

.panel {
  flex: 0 0 100vw; /* แต่ละ block กว้าง 60% ของหน้าจอ */
  /* margin: 0 1vw;
  padding: 0 1.5vw; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 1rem;
  color: #fff;
}

.panel:nth-child(1) {
  background: #f87171;
}
.panel:nth-child(2) {
  background: #60a5fa;
}
.panel:nth-child(3) {
  background: #34d399;
}
.panel:nth-child(4) {
  background: #fbbf24;
}
/****************************** about-gsap ******************************/