/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
p {
  margin-block-start: 0px;
  margin-block-end: 0px;
}
.size-bigger-h1 {
  font-size: var(--size-bigger-h1);
}
.size-h1 {
  font-size: var(--size-h1);
}
.primary-text {
  color: var(--primary);
}
.light-blue-text {
  color: var(--light-blue-darker);
}
.blue-service-text {
  color: var(--blue-service);
}
button.e-image-link-base {
  background: transparent !important;
}
.img-lightbox-align-left .e-image-link-base {
  display: flex;
  justify-content: flex-end;
}
.font-weight-500 {
  font-weight: 500;
}
.p-blue-strong {
  strong {
    font-weight: 500;
    color: var(--blue-service) !important;
  }
}
.p-secondary-strong {
  strong {
    font-weight: 500;
    color: var(--secondary) !important;
  }
}

#header:not(.elementor-sticky--effects) {
  border-color: transparent;
}
#header.elementor-sticky--effects {
  .e-con-inner {
    padding: 0px !important;
    transition: padding 0.3s linear;
  }
  #header-logo {
    img {
      transform: scale(0.8);
      transition: transform 0.3s ease-in-out;
    }
  }
  .elementor-nav-menu--dropdown {
    margin-top: 5px !important;
  }
}

.elementor-nav-menu {
  .sub-arrow {
    padding-left: 5px;
    svg {
      width: 0.45em !important;
      height: 0.45em !important;
      fill: currentColor;
    }
  }
}

.client-logos {
  .gallery-icon {
    box-shadow: 0px 0px 7px 0px #aaaaaa80;
  }
}

.readmore-light-blue-w-icon {
  .elementor-button-icon {
    font-size: 0.8em;
  }
}

.heading-m-0 {
  .elementor-headline {
    margin: 0px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.img-box-m-b-0 .elementor-image-box-img {
  margin-bottom: 0px !important;
}

.faq-answer strong {
  font-weight: 500;
  color: var(--secondary);
}

.service-detail-list {
  ul {
    padding-left: 0px;
    list-style: none;
    color: var(--black);
    margin: 0px;
    li {
      text-indent: 1.5em;
      margin-bottom: 20px;
      strong {
        font-weight: 500;
        color: var(--primary);
      }
      &::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        background-color: var(--blue-service);
        margin-right: 7px;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }
    }
  }
}

.copyright-footer {
  font-size: 18px;
  color: var(--white);
  line-height: 18px;
  text-align: center;
  margin: 0px;
}

.contact-form-footer-consent-row {
  align-items: center;
  .consent-label {
    a {
      font-weight: 500;
      color: var(--blue-service);
      &:hover {
        color: var(--secondary);
      }
    }
  }
}

.div-blog-content {
  p {
    color: var(--black);
    & + p {
      margin-top: 15px !important;
    }
  }
  strong {
    color: var(--primary);
  }
  a {
    color: var(--blue-service);
    &:hover {
      color: var(--secondary);
    }
  }
  img {
    margin-top: 30px !important;
  }
  h2 {
    margin-top: 35px !important;
    font-size: var(--size-h4);
    line-height: var(--size-h4);
    font-weight: 500;
  }
  h3 {
    margin-top: 25px !important;
    font-size: var(--size-h5);
    line-height: var(--size-h5);
    font-weight: 500;
  }
  ul.blue-separate-strong {
    list-style: none;
    padding: 0px;
    li {
      position: relative;
      padding-left: 1em;
      & + li {
        margin-top: 20px;
      }
      &::before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        background: var(--secondary);
        display: inline-block;
        position: absolute;
        top: 7px;
        left: 0px;
      }
      b {
        display: block;
      }
      strong {
        display: block;
      }
    }
  }
  ul:not(.blue-separate-strong) {
    list-style: none;
    margin: 0px;
    padding: 0px;
    li {
      color: var(--black);
      padding-left: 0.8em !important;
      position: relative;
      line-height: 1em;
      &::before {
        content: "";
        border-radius: 20px;
        width: 0.4em !important;
        height: 0.4em !important;
        top: 9px !important;
        display: inline-block;
        position: absolute;
        background: var(--secondary);
        left: 0px;
      }
      & + li {
        margin-top: 5px !important;
      }
      strong {
        color: var(--black);
        font-weight: 500;
      }
    }
  }
  .blog-heading-no-m {
    margin: 0px !important;
  }
  .blog-card-content {
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      li {
        color: var(--black);
        padding-left: 0.8em !important;
        position: relative;
        &::before {
          content: "";
          border-radius: 20px;
          width: 0.4em !important;
          height: 0.4em !important;
          top: 9px !important;
          display: inline-block;
          position: absolute;
          background: var(--secondary);
          left: 0px;
        }
        & + li {
          margin-top: 0px !important;
        }
      }
    }
    strong {
      color: var(--black);
      font-size: var(--size-h5);
      line-height: var(--size-h5);
    }
  }
  .table-wrap {
    border-radius: var(--gap-default);
    background-color: var(--bg-blue-gradient);
    padding: 10px;
    color: var(--black);
    margin: var(--gap-default) 0px;
    strong {
      color: var(--black);
      font-weight: 500;
    }
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      thead {
        th {
          background-color: var(--secondary);
          color: var(--white);
          padding: 10px var(--gap-default);
          line-height: var(--gap-default);
          font-weight: 500;
          &:nth-child(n + 2) {
            border-left: 3px solid var(--white);
          }
          span {
            font-size: var(--gap-default);
          }
        }
        tr:first-child {
          th:first-child {
            border-top-left-radius: var(--gap-default);
          }
          th:last-child {
            border-top-right-radius: var(--gap-default);
          }
        }
      }
      tbody {
        tr:nth-child(odd) {
          td {
            background-color: #e4f8ff;
            padding: 10px var(--gap-default);
            &:nth-child(n + 2) {
              text-align: center;
              border-left: 3px solid var(--white);
            }
          }
        }
        tr:nth-child(even) {
          td {
            background-color: #f3fcff;
            padding: 10px var(--gap-default);
            &:nth-child(n + 2) {
              text-align: center;
              border-left: 3px solid var(--white);
            }
          }
        }
        tr:last-child {
          td:first-child {
            border-bottom-left-radius: var(--gap-default);
          }
          td:last-child {
            border-bottom-right-radius: var(--gap-default);
          }
        }
      }
    }
  }
}

.blog-posts {
  article {
    .elementor-post__thumbnail__link {
      .elementor-post__thumbnail {
        height: 100%;
        img {
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .elementor-post__read-more {
      border: 1px solid var(--primary);
      border-radius: 25px;
      padding: 0px 15px;
      display: inline-block;
      transition: all 300ms;
      &::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-left: 2px;
        vertical-align: middle;
        background-color: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }
      &:hover {
        transform: scale(1.1);
      }
    }
    &:nth-child(2n) {
      flex-direction: row-reverse;
      .elementor-post__text {
        background-color: var(--primary);
        a {
          color: var(--secondary) !important;
        }
        p {
          color: var(--white) !important;
        }
      }
      .elementor-post__read-more {
        border-color: var(--secondary);
      }
    }
  }
}

.blog-star-rating svg.e-font-icon-svg.e-fas-star {
  fill: var(--secondary) !important;
  font-size: 0.75em;
}

@media (max-width: 767px) {
  body:not([class*="elementor-page-"]) .site-main {
    padding: 0px !important;
  }
  .m-max-menu-item-width {
    display: flex !important;
    justify-content: center;
    a.elementor-sub-item {
      max-width: 270px;
      text-align: center;
    }
  }
  .m-max-menu-blog-width {
    display: flex !important;
    justify-content: center;
    a.elementor-sub-item {
      max-width: 360px;
      text-align: center;
    }
  }
  .service-get-list .elementor-image-box-wrapper {
    display: flex;
    gap: 15px;
  }
  .copyright-footer .all-rights-text {
    display: block;
  }

  .contact-form-footer-consent-row {
    align-items: flex-start;
    margin-top: 10px;
    .consent-label {
      line-height: 1em;
      display: inline-block;
    }
  }
  .blog-posts {
    article {
      flex-direction: column !important;
      .elementor-post__thumbnail__link {
        order: 1 !important;
      }
      .elementor-post__text {
        width: 100%;
        order: 2 !important;
      }
    }
  }
}

@media (min-width: 768px) {
  .blog-posts {
    article {
      .elementor-post__thumbnail__link {
        width: 40% !important;
      }
      .elementor-post__text {
        width: 60%;
      }
    }
  }
}

@media (max-width: 1024px) {
  .client-logos {
    text-align: center;
    .gallery-item {
      max-width: 120px !important;
    }
  }
  .home-blog-post-list-item {
    box-shadow: 0px 0px 7px 0px #aaaaaa80;
    border-radius: 10px;
    .home-blog-post-list-item-img {
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
    .home-blog-post-list-item-content {
      padding: 20px;
    }
  }
}

@media (min-width: 1025px) {
  .client-logos {
    .gallery-item {
      max-width: 150px !important;
    }
  }
  .reviews-carousel {
    .swiper-slide {
      &:not(.swiper-slide-next) {
        transform: scale(0.85);
      }
      transition:
        transform 0.5s ease-in-out,
        opacity 0.5s ease-in-out !important;
    }
  }

  .home-blog-post-loop-grid {
    .elementor-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 15px;
      .e-loop-item {
        &:nth-of-type(1) {
          grid-row: span 2 / span 2;
          .e-con-inner {
            position: relative;
          }
          .home-blog-post-list-item-img {
            filter: brightness(0.8);
          }
          .home-blog-post-list-item-content {
            position: absolute;
            bottom: 0px;
          }
          .home-blog-post-list-item-date {
            .elementor-post-info__item {
              color: var(--white);
              text-align: center;
            }
            .elementor-post-info {
              justify-content: center;
            }
          }
          .home-blog-post-list-item-title {
            h3 {
              color: var(--white);
              text-align: center;
            }
          }
          .home-blog-post-list-item-excerpt {
            color: var(--white);
            text-align: center;
          }
          .readmore-light-blue-w-icon {
            text-align: center;
            a {
              font-size: --var(--size-base);
              color: var(--white);
              fill: currentColor;
            }
          }
        }
        &:nth-of-type(3) {
          grid-column-start: 2;
          .e-con-inner {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
          }
          .home-blog-post-list-item-img {
            width: 50%;
            min-height: 287px;
          }
          .home-blog-post-list-item-content {
            width: 50%;
            padding: 0px 20px;
            gap: 5px;
          }
          .home-blog-post-list-item-title {
            h3 {
              font-size: 1em;
            }
          }
          .home-blog-post-list-item-excerpt {
            .elementor-widget-container {
              font-size: 0.85em;
            }
          }
          .home-blog-post-list-item-more {
            .elementor-button {
              font-size: 0.7em;
            }
          }
        }
        &:nth-of-type(2) {
          .e-con-inner {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
          }
          .home-blog-post-list-item-img {
            width: 50%;
            min-height: 287px;
          }
          .home-blog-post-list-item-content {
            width: 50%;
            padding: 0px 20px;
            gap: 5px;
          }
          .home-blog-post-list-item-title {
            h3 {
              font-size: 1em;
            }
          }
          .home-blog-post-list-item-excerpt {
            .elementor-widget-container {
              font-size: 0.85em;
            }
          }
          .home-blog-post-list-item-more {
            .elementor-button {
              font-size: 0.7em;
            }
          }
        }
      }
    }
  }
}

.animated {
  animation-duration: 800ms !important;
  animation-timing-function: ease-in-out !important;
}
.animated.animated-slow {
  animation-duration: 1000ms !important;
}
.animated.animated-fast {
  animation-duration: 500ms !important;
}
/* Reduced motion — ปิด animation ทุกชนิดสำหรับผู้ใช้ที่ต้องการ */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}