/*--------------------------------------------------------------
# Banner home Section
--------------------------------------------------------------*/
.bg-grey {
    background-color: #F2F2F2;
}
.introSwiper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.introSwiper video,
.introSwiper .img-banner-home {
    width: 100%;
    object-fit: cover;
    z-index: -1;
    position: absolute;
    height: 100%;
}

.introSwiper h1 {
    font-size: 40px;
    /* font-weight: 700; */
    /* line-height: 56px; */
    letter-spacing: 2px;
}
.banner-logo {
    width: 50%;
    margin: auto;
}
.slide-content {
    color: #fff;
    width: 100%;
    z-index: 1;
    margin-bottom: 60px;
}
.introSwiper .swiper-button-prev,
.introSwiper .swiper-button-next {
    color: #fff;
    width: calc(var(--swiper-navigation-size)/ 44 * 50);
}
.introSwiper .swiper-button-prev {
    left: 2%;
}
.introSwiper .swiper-button-next {
    right: 2%;
}
.introSwiper .swiper-pagination {
    bottom: 40px !important;
}
.swiper-pagination-bullet {
    --swiper-pagination-bullet-inactive-opacity: .5;
}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
    background-color: #fff;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "";
}
.shadow-slide::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    display: flex;
    align-items: center;
    color: #fff;
}

  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation
  */
  .pc {
    display: block;
  }

  .mb {
    display: none;
  }

  @media only screen and (max-width: 991px) {
    .pc {
      display: none;
    }

    .mb {
      display: block;
    }

    .background-with-gradient {
      background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    }

    .margin-top-contact {
      margin-top: 20px;
    }
  }
nav {
    float: right;
}

  .navbar {
    
    padding: 0;
    width: min-content;
  }

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}

  .navbar li {
    position: relative;
    z-index: 1;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    padding: 5px 15px 5px 10px;
    font-size: 15px;
    font-weight: 500;
    color: #313133;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #048944;
    margin: 5px;
    /* border-radius: 50px; */
    text-decoration: underline;
    text-decoration-color: #048944;
  }

  .navbar .getstarted,
  .navbar .getstarted:focus {
    padding: 8px 20px;
    margin-left: 30px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    border: 2px solid #47b2e4;
    font-weight: 600;
  }

  .navbar .getstarted:hover,
  .navbar .getstarted:focus:hover {
    color: #fff;
    background: #31a9e1;
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
  }

  .navbar .dropdown ul li {
    min-width: 200px;
  }

  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 14px;
    text-transform: none;
    font-weight: 500;
    color: #0c3c53;
  }

  .navbar .dropdown ul a i {
    font-size: 12px;
  }

  .navbar .dropdown ul a:hover,
  .navbar .dropdown ul .active:hover,
  .navbar .dropdown ul li:hover>a {
    color: #47b2e4;
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }

  .nav-link:hover::after {
    content: ''; /* กำหนด content ให้ว่างเพื่อลบ non-breaking space ที่ติดต่อกับ element */
  }

  @media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
      left: -90%;
    }

    .navbar .dropdown .dropdown:hover>ul {
      left: -100%;
    }
  }

  /**
  * Mobile Navigation
  */
  .mobile-nav-toggle {
    color: #313133;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
  }

  .mobile-nav-toggle.bi-x {
    color: #313133;
  }

  @media (max-width: 991px) {
    .mobile-nav-toggle {
      display: block;
    }

    .navbar ul {
      display: none;
    }

    .navbar {
      padding: 0;
      width: auto;
    }
  }

  .navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(40, 58, 90, 0.9);
    transition: 0.3s;
    z-index: 999;
  }

  .navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
  }

  .navbar-mobile ul {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    border-radius: 0;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
  }

  .navbar-mobile a,
  .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #000;
  }

  .navbar-mobile a:hover,
  .navbar-mobile .active,
  .navbar-mobile li:hover>a {
    color: #048944;
    background: #fff;
  }

  .navbar-mobile .getstarted,
  .navbar-mobile .getstarted:focus {
    margin: 15px;
    color: #37517e;
  }

  .navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  }

  .navbar-mobile .dropdown ul li {
    min-width: 200px;
  }

  .navbar-mobile .dropdown ul a {
    padding: 10px 20px;
  }

  .navbar-mobile .dropdown ul a i {
    font-size: 12px;
  }

  .navbar-mobile .dropdown ul a:hover,
  .navbar-mobile .dropdown ul .active:hover,
  .navbar-mobile .dropdown ul li:hover>a {
    color: #47b2e4;
  }

  .navbar-mobile .dropdown>.dropdown-active {
    display: block;
  }

  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  #footer {
    font-size: 14px;
    background: #048944;
  }

  #footer .logo img {
    max-height: 40px;
  }

  #footer .footer-top {
    padding: 80px 0 50px 0;
    background: #e5e5e5;
    border-bottom: 1.5px solid #fff;
  }

  #footer .footer-top .footer-contact {
    margin-bottom: 30px;
  }

  #footer .footer-top .footer-contact h3 {
    font-size: 28px;
    margin: 0 0 10px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
    color: #048944;
  }

  #footer .footer-top .footer-contact p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: 'Montserrat', sans-serif;
    color: #048944;
  }

  #footer .footer-top h4 {
    font-size: 16px;
    font-weight: 600;
    color: #048944;
    position: relative;
  }

  #footer .footer-top .footer-links {
    margin-bottom: 30px;
  }

  #footer .footer-top .footer-links p {
    color: #048944;
  }

  #footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
  }

  #footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #47b2e4;
    font-size: 18px;
    line-height: 1;
    
  }

  #footer .footer-top .footer-links ul li {
    padding: 10px 0 0 0;
    display: flex;
    align-items: center;
  }

  #footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
  }

  #footer .footer-top .footer-links ul a {
    font-size: 16px;
    font-weight: 400;
    color: #4E4E4E;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
  }

  #footer .footer-top .footer-links ul a:hover {
    text-decoration: none;
    color: #999;
  }

  #footer .footer-top .social-links a {
    display: inline-block;
    width: 30px;
    height: 30px;
    transition: 0.3s;
    margin-right: 10px;
  }

  #footer .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
  }

  #footer .copyright {
    text-align: center;
  }

  #footer .copyright a{
    color: #fff;
  }

  #footer .credits a {
    transition: 0.3s;
  }

  @media (max-width: 768px) {
    #footer .copyright,
    #footer .credits {
      text-align: center;
      float: none;
    }

    #footer .credits {
      padding-top: 4px;
    }
  }

  @media (max-width: 390px) {
    #footer .footer-top .social-links a {
      margin-right: 5px;
    }
  }

  @media (max-width: 320px) {
    #footer .footer-top .social-links a {
      margin-right: 0;
    }
  }



  .card-footer:last-child {
    border-radius: unset;
  }

  .card-footer {
    background-color: unset;
    border-top: unset;
    padding: 1.5rem;
  }

  .card-body {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    text-align: start;
  }

  @media only screen and (max-width: 1399px) {
    .card {
    }
  }

  @media only screen and (max-width: 1199px) {
    .card {
    }
  }

  @media only screen and (max-width: 991px) {
    .card {
    }
  }

  @media only screen and (max-width: 767px) {
    .card {
    }
  }

  @media only screen and (max-width: 575px) {
    .card-body h5{
      font-size: 1rem;
    }
  }

  @media only screen and (max-width: 430px) {
    .card {
      transition: 0.3s;
      border-radius: 20px;
      border: none;
    }

    .card img {
      border-radius: 20px 20px 0 0;
    }

    .card-body {
      padding: 1rem 1rem 0 1rem;
    }
  }



/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
a {
    color: #000;
    text-decoration: none;
  }

  a:hover {
    color: #4e4e4e;
    text-decoration: none;
  }

  /* h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  } */

  .border-bottom-black {
    border-bottom: 1px solid #000;
  }

  .border-bottom-black > li {
    flex: 1;
  }

  .border-bottom-white {
    border-bottom: 1px solid #fff;
  }

  .border-top-black {
    border-top: 1px solid #000;
  }

  .border-right-black {
    border-right: 1px solid #000;
  }

  .text-white {
    color: #fff;
  }

  .text-black {
    color: #000;
  }

  .text-dark-blue {
    color: #0a1579;
  }

  .text-size-very-small {
    font-size: 12px;
  }

  .text-justify {
      text-align: justify;
  }

  .btn {
    padding: 5px 40px;
    font-weight: 600;
  }

  .btn-red {
    color: #fff;
    background-color: #c11d2c;
    border-color: #c11d2c;
    border-radius: 50px;
  }

  .btn-red:hover {
    color: #fff;
    background-color: #861c25;
    border-color: #861c25;
  }

  .btn-read-more {
      border: 2px solid #fff;
      background: transparent;
      color: #fff;
      padding: 10px 20px;
      margin-top: 15px;
      transition: 0.45s;
      font-size: 18px;
      font-weight: 500;

  }
  .btn-read-more:hover {
      box-shadow: inset 0 -3.25em 0 0 #fff;
      color: #000;
      border: 2px solid #fff;
  }
  .btn-read-more:hover svg path {
      fill: #000;
  }

  .btn-read-center {
      border: 2px solid #fff;
      background: #000;
      color: #fff;
      font-size: 18px;
      /* font-weight: 600; */
      padding: 10px 20px;
      margin-top: 15px;
      transition: 0.45s;

  }
  .btn-read-center:hover {
      box-shadow: inset 0 -3.25em 0 0 #fff;
      color: #000;
  }
  .btn-read-center:hover path {
      fill: #000;
  }


  .btn-read-Blogs {
      border: 2px solid #000;
      background: #fff;
      color: #000;
      padding: 10px 20px;
      margin-top: 15px;
      transition: 0.45s;
      font-size: 18px;
      font-weight: 600;
      display: inline-flex;
  }
  .btn-read-Blogs:hover {
      box-shadow: inset 0 -3.25em 0 0 #000;
      color: #fff;
  }

  .btn-read-Blogs:hover #btn-consult path {
      fill: #fff;
      transform: scale(1);
      transition: 0.5s;
  }

  .btn-submit {
      border: 2px solid #000;
      background: #fff;
      color: #000;
      font-size: 18px;
      font-weight: 600;
      padding: 10px 20px;
      transition: 0.45s;
      display: inline-block;
  }
  .btn-submit:hover {
      box-shadow: inset 0 -3.25em 0 0 #000;
      color: #fff;
  }
  .btn-submit svg {
      transition: 0.45s;
  }
  .btn-submit:hover #btn-consult path {
      fill: #fff;
  }

  .btn-form-dark {
      border: 2px solid #000;
      background: #000;
      color: #fff;
      padding: 5px 40px;
      transition: 0.4s;
      font-size: 20px;
  }
  .btn-form-dark:hover {
      box-shadow: inset 0 -3.25em 0 0 #fff;
      color: #000;
  }
  .btn-form-dark:hover svg path {
      fill: #000;
  }
  .btn-download {
      border: 2px solid #fff;
      background: #fff;
      padding: 15px;
      transition: 0.4s;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: .5px;
  }
  .btn-download svg {
      margin-left: 20px;
  }
  .btn-download:hover {
      box-shadow: inset 0 -3.25em 0 0 #000;
      color: #fff;
  }

  .bg-thirra {
      background-color: #6a203b;
  }
  .bg-serio {
      background-color: #e37f5b;
  }
  .bg-serio-minor {
      background-color: #3e4349;
  }
  .bg-thrive {
      background-color: #5e3429;
  }
  .bg-thrive-minor {
      background-color: #efcfa8;
  }
  .bg-black {
      background-color: #000;
  }

  .image {
      display: block;
      width: 100%;
      height: 100%;
  }
  .img-two-block {
      object-fit: cover;
  }

  .pt-100 {
      padding-top: 100px;
  }
  .pt-50 {
      padding-top: 50px;
  }
  .pb-100 {
      padding-bottom: 100px;
  }
  .pb-50 {
      padding-bottom: 50px;
  }

  /*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #000;
  }

  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #000;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1s linear infinite;
  }

  @keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #bfa66e;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
  }

  .back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
  }

  .back-to-top:hover {
    background: #bfa66e;
    color: #fff;
  }

  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }

  .media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .media-body {
    -ms-flex: 1;
    flex: 1;
    margin: auto;
    color: #fff;
    padding-left: 10px;
  }

  .media-body a {
    color: #fff;
  }

  .icon-svg {
    width: 15px;
  }

  #header {
    transition: all 0.5s;
    z-index: 997;
    padding: 15px 0;
  }

  #header.header-scrolled,
  #header.header-inner-pages {
    background: #fff;
    border-bottom: 1.5px solid #048944;
  }

  #header .logo {
    font-size: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  #header .logo a {
    color: #313133;
  }

  #header .logo img {
    max-height: 45px;
  }

  @media (max-width: 767px) {
    #header .logo img {
      max-height: 50px;
    }
  }

  @media (max-width: 430px) {
    #header .logo img {
      max-height: 40px;
    }
  }

  @media (max-width: 390px) {
    #header .logo img {
      max-height: 30px;
    }
  }
  /* #header.header-scrolled .logo img {
      max-height: 100px;
  } */

  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation
  */

  .menuToggle {
    display: block;
    top: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  .menuToggle a {
      font-size: 18px;
      /* font-weight: 700; */
      text-decoration: none;
      color: #000000;
      transition: all 0.3s ease;

  }
  .menuToggle a:hover {
      /* color: #47b2e4; */
      /* font-weight: 800; */
      font-size: 20px;
  }
  .menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 3;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }
  .menuToggle span {
      position: relative;
      display: block;
      width: 35px;
      height: 3.5px;
      margin: 7px;
      position: relative;
      background: #000;
      border-radius: 3px;
      z-index: 2;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }
  .menuToggle span:first-child {
      transform-origin: 0% 0%;
  }
  .menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
  }

  .menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, 0);
      background: #000000;
  }
  .menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  .menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  .menuToggle input:checked ~ .menuItem {
    transform: none;
  }

  .menuItem {
      position: absolute;
      width: 400px;
      height: 120vh;
      padding: 50px;
      padding-top: 125px;
      padding-left: 65px;
      background: #fff;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      transform-origin: 0% 0%;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
      z-index: 1;
  }
  .menuItem li {
    padding: 10px 0;
  }
  /* .menuItem .active {
    font-weight: 600;
  } */
  .menuItem .close{
      position: absolute;
      left: 27%;
      top: 65px;
      color: #000000;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: 700;
  }
  .menuItem .submenu {
      position: absolute;
      left: 75px;
  }
  .menuItem .submenu li {
      padding: 5px 0;
  }
  .menu--left .menuToggle {
    left: 0;
  }
  .menu--left .menuToggle input {
    left: 65px;
  }
  .menu--left .menuToggle span {
    left: 50px;
  }
  .menu--left .menuItem {
    margin: -100px 0 0 -15px;
    transform: translate(-100%, 0);
  }
  .changeLang  {
      position: absolute;
      bottom: 20%;
  }
  .changeLang .text {
      color: #000000;
      font-size: 18px;
      text-transform: uppercase;
      align-self: center;
  }

  @keyframes text-slide-in {
    0% {
      -webkit-transform: translateX(100px);
      -moz-transform: translateX(100px);
      -ms-transform: translateX(100px);
      -o-transform: translateX(100px);
      transform: translateX(100px);
    }
    100% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  }

  /*--------------------------------------------------------------
  # Title home
  --------------------------------------------------------------*/
  .title-main .box-line {
      width: 190px;
      height: 18px;
      background-color: #bfa66e;
  }
  .title-main .text-title {
      text-transform: uppercase;
      margin-bottom: 0;
      font-weight: 600;
  }
  .title-main .first {
      color: #bfa66e;
      margin-left: 20px;
  }

  .title-main .second {
      margin-left: 5px;
  }
  .title-main .sub {
      margin-bottom: 0;
      width: 50%;
  }

  /*--------------------------------------------------------------
  # Banner home Section
  --------------------------------------------------------------*/
  .introSwiper {
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }
  .introSwiper video,
  .introSwiper .img-banner-home {
      width: 100%;
      object-fit: cover;
      z-index: -1;
      position: absolute;
      height: 100%;
  }
  .introSwiper .swiper-slide {
        padding-bottom: 100px;
        padding-right: 250px;
      text-align: end;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background-size: cover;
      background-position: center;
  }

  #home-banner .introSwiper .swiper-slide {
    padding-bottom: 100px;
    padding-right: 250px;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    }
  .introSwiper h1 {
      font-size: 40px;
      /* font-weight: 700; */
      /* line-height: 56px; */
      letter-spacing: 2px;
  }
  .banner-logo {
      width: 50%;
      margin: auto;
  }
  .slide-content {
      color: #fff;
      width: 100%;
      z-index: 1;
      margin-bottom: 60px;
  }
  .introSwiper .swiper-button-prev,
  .introSwiper .swiper-button-next {
      color: #fff;
      width: calc(var(--swiper-navigation-size)/ 44 * 50);
  }
  .introSwiper .swiper-button-prev {
      left: 2%;
  }
  .introSwiper .swiper-button-next {
      right: 2%;
  }
  .introSwiper .swiper-pagination {
      bottom: 40px !important;
  }
  .swiper-pagination-bullet {
      --swiper-pagination-bullet-inactive-opacity: .5;
  }
  .swiper-pagination-bullet,
  .swiper-pagination-bullet-active {
      background-color: #fff;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
      content: "";
  }
  .shadow-slide::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
      display: flex;
      align-items: center;
      color: #fff;
  }
  /*--------------------------------------------------------------
  # Living Section
  --------------------------------------------------------------*/
  .living {
      background-color: #bfa66e;
  }
  .living .title {
      text-align: center;
  }
  .living .title h1 {
      text-transform: uppercase;
  }
  .living .title .second {
      color: #fff;
      margin-left: 15px;
  }
  .living .title h2{
      color: #fff;
  }
  .livingSwiper .swiper-wrapper {
      margin: 4rem 0 4rem 0;
  }
  .livingSwiper .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .livingSwiper .card {
      border: 0;
      border-radius: 0;
      --bs-card-spacer-y: 1.4rem;
      --bs-card-spacer-x: 1.4rem;
      --bs-card-inner-border-radius: 0;
  }
  .livingSwiper .card-text {
      font-size: 18px;
  }
  .btn-living {
      background: #bfa66e;
      color: #fff;
      padding: 5px 20px;
      margin-top: 5px;
      font-size: 16px;
      transition: 0.5s;
  }
  .btn-living:hover {
      box-shadow: inset 0 -3.25em 0 0 #000;
      color: #fff;
  }
  .tag {
      position: absolute;
      background-color: #f5efd8;
      padding: 3px 20px;
      top: 5%;
      font-size: 16px;
      font-weight: 500;
  }
  /*--------------------------------------------------------------
  # Our Phisolophy Section
  --------------------------------------------------------------*/
  .philosophy {
      padding-top: 150px;
  }
  .philosophySwiper {
      padding-left: 3.5%;
      padding-right: 3.5%;
  }
  .philosophySwiper .swiper-slide {
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .philosophySwiper .swiper-button-next,
  .philosophySwiper .swiper-button-prev {
      background-color: #bfa66e;
      height: auto;
      top: 5%;
      bottom: 0;
      width: 70px;
  }
  .philosophySwiper .swiper-button-next {
      right: 0;
  }
  .philosophySwiper .swiper-button-prev {
      left: 0;
  }
  .philosophySwiper img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  /*--------------------------------------------------------------
  # Our Projects Section
  --------------------------------------------------------------*/
  .project {
      padding-top: 150px;
  }
  .card-project {
      position: relative;
  }
  .project-wrapper {
      overflow: hidden;
  }

  .project-wrapper::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
      opacity: 1;
      pointer-events: none;
      transition: opacity 0.5s ease;
  }

  .project-wrapper:hover::before {
      opacity: 1;
  }

  .project-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
  }
  .logo-overlay {
      position: relative;
  }
  .project-wrapper .logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 40%;
      max-height: 40%;
      z-index: 1;
  }
  .project-wrapper .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(0deg, rgba(0,0,0,0.4962359943977591) 0%, rgba(0,0,0,0.5018382352941176) 100%);
      opacity: 0;
      transition: opacity 0.5s ease;
  }
  .project-wrapper:hover .overlay {
      opacity: 1;
  }
  .project .btn-read-more {
      margin-top: 12rem;
  }

  .project .head {
      color: #bfa66e;
  }
  .filter-project {
      width: auto;
      color: #bfa66e;
      border: 2px solid #bfa66e;
      border-radius: 0;
      padding: 0.375rem 4rem 0.375rem 1rem;
      font-size: 1.2rem;
      font-weight: 500;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bfa66e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
      background-size: 18px 20px;
  }
  .filter-project:focus {
      border-color: #bfa66e;
      box-shadow: 0 0 0 0.25rem #bfa56e51;
  }
  .btn-clear {
      background-color: #bfa66e;
      color: #fff;
      font-size: 1.2rem;
      font-weight: 500;
      border-radius: 0;
      padding: 5px 20px;
  }
  .all-project .head {
      color: #bfa66e;
  }
  .all-project .card {
      border: 0;
      --bs-card-border-radius: 0;
      --bs-card-bg: #f5efd8;
      --bs-card-spacer-y: 1.5rem;
      --bs-card-spacer-x: 1.5rem;
  }
  .all-project .tag {
      background-color: #000;
      color: #fff;
      top: 0;
      font-size: 14px;
      padding: 7px 20px;
  }
  .all-project .card-title {
      font-weight: 700;
  }
  .all-project .card-text {
      font-weight: 500;
      font-size: 18px;
  }
  .all-project .text-price {
      font-size: 18px;
      margin-bottom: 0;
  }
  .all-project .price {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: .5rem;
  }
  .all-project .btn-read-more {
      display: inline-block;
      background-color: #bfa66e;
      border-color: #bfa66e;
      padding: 5px 20px;
      margin-top: 0;
  }
  .all-project .btn-read-more:hover {
      box-shadow: inset 0 -3.25em 0 0 #f5efd8;
  }

  /*--------------------------------------------------------------
  # Thirra
  --------------------------------------------------------------*/
  .thirra-concept {
      color: #b8a480;
  }
  .thirra-concept .content-top img {
      min-height: 200px;
  }
  .thirra-concept .content-top {
      position: relative;
  }
  .thirra-concept .text-top {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-transform: uppercase;
      font-weight: 500
  }
  .thirra-concept .text-top h2 {
      font-weight: 400;
      letter-spacing: 3px;
  }
  .thirra-concept .text-top h6 {
      font-weight: 600;
      letter-spacing: 3px;
  }
  .thirra-concept .content-bottom {
      flex: 1;
      padding: 50px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
  }
  .title-underline {
      width: 20%;
      height: 1px;
      background-color: #bfa66e;
      margin: auto;
      margin-top: 5%;
  }
  .underline-banner.thirra {
      background-color: #b8a480;
  }
  .underline-banner.black {
      background-color: #000;
      height: 40px;
  }

  .thirra-form {
      color: #fff;
      background-image: url('/frontend/img/thirra/Pattern.png');
      background-size: 1640px 875px;
  }
  .thirra-form .title {
      font-size: 1.8rem;
      color: #b8a480;
      margin-bottom: 30px;
  }
  .thirra-form .card-text,
  .serio-form .card-text,
  .thrive-form .card-text {
      font-size: 18px;
  }
  .thirra-form .card-link,
  .serio-form .card-link,
  .thrive-form .card-link {
      transition: 0.3s;
  }
  .thirra-form .card-link:hover
  .serio-form .card-link:hover,
  .thrive-form .card-link:hover {
      color: #b8a480;
  }
  .thirra-info {
      flex: 1;
      padding: 50px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .thirra-info .title h1 {
      color: #fff;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 3px;
  }
  .thirra-info .title-underline {
      margin-top: 3%;
  }
  .thirra-info .inline-text {
      display: flex;
      justify-content: space-between;
      align-items: end;
      color: #b8a480;
      padding: 15px 0;
      font-size: 20px;
      letter-spacing: 1px;
  }
  .thirra-info .text-underline {
      width: 100%;
      height: 1px;
      background-color: #ffffffa1;
      margin: auto;
  }
  .thirra-info strong {
      font-size: 26px;
      font-weight: 500;
      line-height: 1;
  }
  /* project-form */
  .project-form .form-control,
  .project-form .form-select {
      border-radius: 4px;
      font-size: 15px;
      padding: .5rem 1rem;
  }
  .project-form .form-control,
  .project-form .form-control::placeholder,
  .project-form .form-select {
      color: #8f8f8f !important;
  }
  .project-form .form-check-input {
      width: 1.4em;
      height: 1.4em;
  }
  .project-form .form-check-label {
      margin-left: 20px;
  }
  .project-form .form-check-label a {
      color: #fff;
  }
  .project-form .form-check-label a:hover {
      color: #b8a480;
  }
  .project-form .form-check-input[type=checkbox] {
      border-radius: 0;
  }

  .unit-plan {
      position: relative;
  }
  .unit-plan .content-top {
      position: relative;
  }
  .unit-plan .content-top img{
      height: 400px;
  }
  .button-plan-list {
      position: absolute;
      top: 31%;
      left: 0;
      text-transform: uppercase;
      list-style: none;
      margin-bottom: 0;
  }
  .btn-plan {
      border: 1px solid #fff;
      background-color: #fff;
      color: #000;
      padding: 5px 20px 5px 0;
      transition: 0.4s;
      width: 160px;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: 600;
  }
  .btn-plan.active {
      border: 1px solid #6a203b;
      background-color: #6a203b;
      color: #b8a480;
  }
  .unit-plan .content-top .text{
      position: absolute;
      top: 0;
      right: 0;
      text-transform: uppercase;
      letter-spacing: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
  }
  .unit-plan .content-top .text .first {
      color: #fff;
      font-size: 4rem;
      font-weight: 400;
  }
  .unit-plan .content-top .text .second {
      color: #b8a480;
      font-size: 3rem;
      font-weight: 400;
  }
  .unit-plan .title-underline {
      width: 290px;
      margin: 5% 0 0 0;
  }
  .unit-plan .content-bottom {
      height: 450px;
      background-image: url('/frontend/img/thirra/Pattern.png');
      background-size: 1750px;
      color: #b8a480;
      background-position: bottom -830px right 0;
      background-repeat: repeat-x;
      position: relative;
  }
  .unit-plan .content-bottom .text {
      position: absolute;
      top: 10%;
      right: 0;
      display: flex;
      min-height: 40%;
      font-size: 20px;
  }
  .unit-plan .content-bottom .plan-info {
      display: flex;
      align-items: center;
      margin-right: 15px;
  }
  .unit-plan .content-bottom .plan-info:nth-child(2n) {
      flex-grow: 1;
  }
  .unit-plan .content-bottom .text img {
      max-width: 45px;
      height: auto;
      filter: brightness(0) invert(1);
      margin-right: 10px;
  }
  .floorSwiper {
      position: absolute;
      top: 9%;
      left: 20%;
      width: 340px;
      height: auto;
  }
  /* .floorSwiper img {
      width: 100%;
      height: auto;
  } */
  .floorSwiper .swiper-pagination {
      bottom: -5px;
  }

  /* Map */
  .map .nav {
      --bs-nav-link-padding-x: 0.2rem;
      --bs-nav-link-padding-y: 0.4rem;
      --bs-nav-link-color: #fff;
      --bs-nav-link-hover-color: #b8a480;
      justify-content: center;
      font-size: 1.3rem;
      font-weight: 600;
  }
  .map .nav-pills {
      --bs-nav-pills-border-radius: 0;
      --bs-nav-pills-link-active-color: #b8a480;
      --bs-nav-pills-link-active-bg: 0;
  }
  .map .nav-pills .nav-link {
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 30px;
  }
  .map .nav-pills .nav-link.active,
  .map .nav-pills .show>.nav-link {
      border-bottom: 5px solid;
      border-radius: 1px;
  }
  .map-img {
      width: 80%;
      margin: auto;
  }
  .mapouter {
      position: relative;
      text-align: right;
      height: 600px;
      width: 100%;
  }
  .gmap_canvas {
      overflow: hidden;
      background: none !important;
      height: 100%;
      width: 100%;
  }

  .gallery .title {
      text-transform: uppercase;
      text-align: center;
      color: #b8a480;
      letter-spacing: 3px;
  }
  .gallerySwiper {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 0 40px;
  }
  /* .gallerySwiper .swiper-wrapper {
      flex-direction: row;
  } */
  .gallerySwiper .swiper-slide {
      margin-top: auto;
  }
  .gallerySwiper .swiper-button-prev {
      left: 0;
  }
  .gallerySwiper .swiper-button-next {
      right: 0;
  }
  .gallerySwiper .swiper-button-prev,
  .gallerySwiper .swiper-button-next {
      background-color: #6a203b;
      height: 100%;
      top: 0;
      margin-top: 0;
  }
  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
      opacity: 1;
      pointer-events: none;
  }

  .project-contact h2 {
      font-size: 1.9rem;
  }
  .project-contact p {
      font-weight: 500;
  }
  .project-contact p:last-child {
      margin-bottom: 0;
  }

  /* Related project */
  .related-project.thirra .title-main .box-line {
      background-color: #6a203b;
  }
  .related-project.thirra .title-main .first,
  .related-project.thirra .title-main .second {
      color: #6a203b;
  }
  .related-project.thirra .card {
      --bs-card-color: #6a203b;
      --bs-card-bg: #fffaef;
  }
  .related-project.thirra .btn-read-more {
      background-color: #6a203b;
      border-color: #6a203b;
  }
  .related-project.thirra .btn-read-more:hover {
      box-shadow: inset 0 -3.25em 0 0 #fffaef;
      color: #6a203b;
  }

  /*--------------------------------------------------------------
  # Serio
  --------------------------------------------------------------*/
  .serio-concept {
      flex: 1;
      padding: 50px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
  }
  .serio-concept .serio-logo {
      width: 40%;
      margin: 0 auto;
  }
  .serio-concept h2 {
      font-weight: 500;
  }
  .serio-concept p {
      margin-bottom: 0;
      font-size: 18px;
  }
  .serio-concept .text-underline {
      width: 260px;
      height: 2px;
      background-color: currentColor;
      margin: auto;
      margin-top: 20px;
  }
  .serio-concept .price {
      font-size: 1.7rem;
  }

  .serio-form {
      color: #fff;
  }
  .serio-form .title {
      font-size: 1.8rem;
      margin-bottom: 30px;
  }
  .serio-form .btn-submit {
      border: 2px solid #e37f5b;
      background: #e37f5b;
  }
  .serio-form .btn-submit:hover {
      box-shadow: inset 0 -3.25em 0 0 #3e4349;
      color: #fff;
  }
  .serio-info {
      position: relative;
  }
  .serio-info img {
      min-height: 500px;
      object-fit: cover;
  }
  .serio-info .shadow-img::before {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
  }
  .serio-info .text-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
      font-size: 1.5rem;
      width: 65%;
  }
  .serio-summary {
      color: #fff;
      flex: 1;
      padding: 50px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .serio-summary .title h1 {
      font-size: 3rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 3px;
  }
  .serio-summary .title-underline {
      width: 210px;
      background-color: #fff;
      margin-top: 5%;
  }
  .serio-summary .text-content {
      font-size: 1.4rem;
  }
  .summarySwiper {
      background-color: #3e4349;
  }
  .summarySwiper .swiper-pagination {
      bottom: 5%;
  }
  .btn-download.serio {
      color: #e37f5b;
  }
  .btn-download.serio:hover {
      box-shadow: inset 0 -3.25em 0 0 #e37f5b;
      color: #fff;
  }
  .map.serio .nav-pills {
      --bs-nav-pills-link-active-color: #e37f5b;
  }
  .map.serio .nav {
      --bs-nav-link-hover-color: #e37f5b;
  }
  .map.serio .map-img {
      width: 100%;
  }
  .gallery.serio .title,
  .gallery.thrive .title {
      color: #fff;
  }
  .gallery.serio .gallerySwiper .swiper-button-prev,
  .gallery.serio .gallerySwiper .swiper-button-next {
      background-color: #e37f5b;
  }
  .related-project.serio .title-main .box-line {
      background-color: #e37f5b;
  }
  .related-project.serio .title-main .first,
  .related-project.serio .title-main .second {
      color: #e37f5b;
  }
  .related-project.serio .card {
      --bs-card-color: #fff;
      --bs-card-bg: #3e4349;
  }
  .related-project.serio .btn-read-more {
      background-color: #e37f5b;
      border-color: #e37f5b;
  }
  .related-project.serio .btn-read-more:hover {
      box-shadow: inset 0 -3.25em 0 0 #3e4349;
      color: #fff;
  }
  .unit-plan.serio,
  .unit-plan.thrive {
      padding: 80px 0;
      min-height: 500px;
  }
  .unit-plan.serio .floorSwiper {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      width: 375px;
      padding-bottom: 40px;
  }
  .unit-plan.serio .button-plan-list,
  .unit-plan.thrive .button-plan-list {
      top: 0;
  }
  .unit-plan.serio .btn-plan {
      border: 1px solid #fff;
      padding: 7px 5px;
      width: 185px;
  }
  .unit-plan.serio .btn-plan.active {
      border: 1px solid #e37f5b;
      background-color: #e37f5b;
      color: #fff;
  }
  .unit-plan.serio .content {
      text-transform: uppercase;
      color: #fff;
  }
  .unit-plan.serio .content h1{
      font-size: 3.2rem;
      letter-spacing: 3px;
      font-weight: 500;
  }
  .unit-plan.serio .title-underline {
      width: 235px;
      background-color: #fff;
      /* margin: 5% 0 0 0; */
  }
  .unit-plan.serio .content .text {
      font-size: 20px;
  }
  /*--------------------------------------------------------------
  # Thrive
  --------------------------------------------------------------*/
  .thrive-concept,
  .thrive-info {
      flex: 1;
      padding: 50px 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
  }
  .thrive-concept h1 {
      font-size: 3rem;
      font-weight: 500;
      letter-spacing: 5px;
      margin-bottom: 0;
  }
  .thrive-concept h2,
  .thrive-concept h6 {
      font-weight: 400;
  }
  .thrive-concept p {
      margin-bottom: 0;
      font-size: 18px;
  }
  .thrive-concept .text-underline {
      width: 260px;
      height: 2px;
      background-color: currentColor;
      margin: auto;
      margin-top: 30px;
  }

  .thrive-form {
      background-image: url('/frontend/img/thrive/pattern.png');
      background-size: 1640px 875px;
      background-color: #ead0ab;
  }
  .thrive-form .title {
      font-size: 1.8rem;
      margin-bottom: 40px;
      font-weight: 700;
  }
  .thrive-form .form-label {
      font-weight: 700;
  }
  .thrive-form .form-check-label {
      font-weight: 500;;
  }
  .thrive-form .form-check-label a {
      color: #000;
  }
  .thrive-form .form-check-label a:hover {
      color: #fff;
  }
  .thrive-form .btn-submit {
      border: 2px solid #000;
      background: #000;
      color: #fff;
  }
  .thrive-form .btn-submit:hover {
      box-shadow: inset 0 -3.25em 0 0 #ead0ab;
      color: #000;
  }

  .thrive-info h1 {
      font-size: 3rem;
      font-weight: 500;
      letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 0;
  }
  .thrive-info p {
      font-size: 22px;
      color: #efcfa8;
  }
  .thrive-info .text-underline {
      width: 260px;
      height: 2px;
      background-color: currentColor;
      margin: 50px auto;
  }

  .unit-plan.thrive .floorSwiper {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      width: 50%;
      padding-bottom: 40px;
  }
  .unit-plan.thrive .floorSwiper.floorthyra {
      width: 45%;
  }
  .unit-plan.thrive .floorSwiper.floorthames {
      width: 60%;
  }
  .unit-plan.thrive .btn-plan {
      border: 1px solid #fff;
      color: #5e3429;
      padding: 7px 5px;
      width: 185px;
  }
  .unit-plan.thrive .btn-plan.active {
      border: 1px solid #efcfa8;
      background-color: #efcfa8;
  }
  .unit-plan.thrive .content {
      color: #fff;
  }
  .unit-plan.thrive .content h1 {
      font-size: 3.2rem;
      letter-spacing: 5px;
      font-weight: 500;
      text-transform: uppercase;
  }
  .unit-plan.thrive .title-underline {
      width: 235px;
      background-color: #efcfa8;
  }
  .unit-plan.thrive .content .text p {
      font-size: 24px;
      margin-bottom: 0;
  }
  .unit-plan.thrive .plan-info {
      font-size: 20px;
      color: #efcfa8;
      text-transform: capitalize;
  }
  .unit-plan.thrive .img-info-plan {
      max-width: 45px;
      height: auto;
      filter: brightness(0) invert(1);
      margin-right: 15px;
  }
  .underline-banner.thrive {
      background-color: #efcfa8;
  }
  .thrive-life-quality {
      position: relative;
  }
  .thrive-life-quality img {
      min-height: 500px;
      object-fit: cover;
  }
  .thrive-life-quality .shadow-img::before {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
  .thrive-life-quality .text-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
      font-size: 1rem;
      width: 90%;
  }
  .thrive-brochure {
      color: #efcfa8;
      background-image: url('/frontend/img/thrive/pattern.png');
      background-size: 1640px 875px;
  }
  .btn-download.thrive {
      color: #5e3429;
      padding: 10px 15px;
  }
  .btn-download.thrive:hover {
      box-shadow: inset 0 -3.25em 0 0 #5e3429;
      color: #fff;
  }

  .map.thrive .nav {
      --bs-nav-link-color: #5e3429;
      --bs-nav-link-hover-color: #fff;
  }
  .map.thrive .nav-pills {
      --bs-nav-pills-link-active-color: #5e3429;
  }
  .map.thrive .nav-pills .nav-link.active {
      font-weight: 800;
  }
  .map.thrive .nav-link:focus {
      color: #5e3429;
  }

  .gallery.thrive .gallerySwiper .swiper-button-prev,
  .gallery.thrive .gallerySwiper .swiper-button-next {
      background-color: #5e3429;
  }

  .project-contact.thrive {
      color: #5e3429;
  }

  .related-project.thrive .title-main .box-line {
      background-color: #5e3429;
  }
  .related-project.thrive .title-main .first,
  .related-project.thrive .title-main .second {
      color: #5e3429;
  }
  .related-project.thrive .card {
      --bs-card-color: #000;
      --bs-card-bg: #efcfa8;
  }
  .related-project.thrive .btn-read-more {
      background-color: #000;
      border-color: #000;
  }
  .related-project.thrive .btn-read-more:hover {
      box-shadow: inset 0 -3.25em 0 0 #efcfa8;
      color: #000;
  }
  /*--------------------------------------------------------------
  # See more Section
  --------------------------------------------------------------*/
  .see-more {
      background-color: #bfa66e;
      padding: 60px 0;
      text-align: center;
  }
  .see-more a {
      display: inline-flex;
      transition: 0.5s;
      align-items: center;
  }
  .see-more a:hover {
      transform: scale(1.1);
      transition: 0.5s;
  }
  .see-more .text {
      margin-bottom: 0;
      color: #fff;
      text-transform: uppercase;
  }
  .see-more svg {
      margin-left: 2rem;
  }

  .see-more-consult {
      text-align: center;
  }
  .see-more-consult a {
      display: inline-flex;
      transition: 0.5s;
      align-items: center;
  }
  .see-more-consult a:hover {
      transform: scale(1);
      transition: 0.5s;
  }
  .see-more-consult a:hover path {
      fill: #000;
  }
  .see-more-consult .text {
      margin-bottom: 0;
      color: #fff;
      text-transform: uppercase;
  }
  .see-more-consult svg {
      margin-left: 1rem;
  }

  .see-more-read {
      text-align: start;
  }
  .see-more-read a {
      display: inline-flex;
      transition: 0.5s;
      align-items: center;
      border: 2px solid #fff;
      background: #000;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
  }
  .see-more-read a:hover {
      transform: scale(1);
      transition: 0.5s;
  }
  .see-more-read .text {
      margin-bottom: 0;
      color: #fff;
      text-transform: uppercase;
  }
  .see-more-read svg {
      margin-left: 1rem;
  }

  .see-more-center {
      text-align: center;
  }
  .see-more-center a {
      display: inline-flex;
      transition: 0.5s;
      align-items: center;
  }
  .see-more-center a:hover {
      transform: scale(1);
      transition: 0.5s;
  }
  .see-more-center .text {
      margin-bottom: 0;
      color: #fff;
      text-transform: uppercase;
  }
  .see-more-center svg {
      margin-left: 1rem;
  }
  /*--------------------------------------------------------------
  # Articles Section
  --------------------------------------------------------------*/
  .article {
      padding-top: 150px;
  }
  .card-article {
      position: relative;
      height: 100%;
  }
  .card-article img {
      display: block;
      width: 100%;
      height: 100%;
  }
  .shadow-img {
      height: 100%;
  }
  .shadow-img::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      /* background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); */
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.7) 90%);
      display: flex;
      align-items: center;
      color: #fff;
  }
  .shadow-img .text-block {
      position: absolute;
      bottom: 5%;
      left: 5%;
      color: #fff;
  }
  /*--------------------------------------------------------------
  # Bottom home content
  --------------------------------------------------------------*/
  .about-us {
      position: relative;
  }
  .about-us img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .about-us .shadow-img::before {
      display: flex;
      justify-content: center;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
  }
  .about-us .text-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
      font-size: 1.1rem;
  }
  .about-us .btn-read-more {
      background-color: #bfa66e;
      border: 0;
      padding: 10px 40px;
  }
  /*--------------------------------------------------------------
  # Banner
  --------------------------------------------------------------*/
  .banner {
      position: relative;
  }
  .shadow-banner::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%);
      display: flex;
      align-items: center;
      color: #fff;
  }
  .banner img {
      display: block;
      width: 100%;
      height: auto;
  }
  .underline-banner {
      background-color: #bfa66e;
      width: 100%;
      height: 18px;
  }

  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  #hero {
    width: 100%;
    background: #fff;
  }

  #hero.home {
    padding-top: 0px;
    padding-bottom: 0;
  }

  #hero h1 {
    margin: 0 0 10px 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    color: #fff;
    /* letter-spacing: 2px; */
  }

  #hero h2 {
      margin-bottom: 50px;
      font-size: 36px;
  }
  #hero.about h2 {
      font-size: 24px;
      /* max-width: 600px; */
      text-align: justify;
  }
  #hero.about h3 {
      font-size: 18px;
      font-weight: 400 !important;
      text-align: justify;
  }

  #hero .btn-get-started {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #47b2e4;
  }

  #hero .btn-get-started:hover {
    background: #209dd8;
  }

  #hero .btn-watch-video {
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: 0.5s;
    margin: 10px 0 0 25px;
    color: #fff;
    line-height: 1;
  }

  #hero .btn-watch-video i {
    line-height: 0;
    color: #fff;
    font-size: 32px;
    transition: 0.3s;
    margin-right: 8px;
  }

  #hero .btn-watch-video:hover i {
    color: #47b2e4;
  }

  #hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
  }

  

  @media (max-width: 991px) {
    #hero {
      height: auto;
      text-align: center;
    }

    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: auto;
      left: 0;
      width: 100%;
    }

    #hero .animated {
      animation: none;
    }

    #hero .hero-img {
      text-align: center;
    }

    #hero .hero-img img {
      width: 50%;
    }
  }

  @media (max-width: 768px) {
      #hero h1,
      .introSwiper h1 {
          font-size: 28px;
          line-height: 36px;
      }
      #hero .font-20,
      .introSwiper .font-20 {
          font-size: 18px;
      }

      #hero h2 {
          font-size: 18px;
          line-height: 24px;
          margin-bottom: 30px;
      }
      #hero.about h2 {
          font-size: 24px;
      }
      #hero.about h3 {
          font-size: 18px;
      }

      #hero .hero-img img {
          width: 70%;
      }
  }

  @media (max-width: 575px) {
    #hero .hero-img img {
      width: 80%;
    }

    #hero .btn-get-started {
      font-size: 16px;
      padding: 10px 24px 11px 24px;
    }
  }

  @keyframes up-down {
    0% {
      transform: translateY(10px);
    }

    100% {
      transform: translateY(-10px);
    }
  }

  /*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/
  section {
    padding: 80px 0;
    overflow: hidden;
  }

  .section-bg {
    background-color: #f3f5fa;
  }

  .section-title {
    text-align: center;
    padding-bottom: 30px;
  }

  .section-title h2 {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #37517e;
  }

  .section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
  }

  .section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #47b2e4;
    bottom: 0;
    left: calc(50% - 20px);
  }

  .section-title p {
    margin-bottom: 0;
  }
  /*--------------------------------------------------------------
  # Keep in touch
  --------------------------------------------------------------*/
  .keep-in-touch {
      background-color: #bfa66e;
      padding: 30px 0;
      color: #fff;
  }
  .keep-in-touch .form-control {
      background-color: transparent;
      color: #fff;
      border-radius: 0;
      border: 2px solid #fff;
      padding: 0.9rem 1.3rem;
  }
  .keep-in-touch .form-control::placeholder {
      color: #fff;
  }
  .keep-in-touch .form-control:focus {
      box-shadow: none;
  }
  .keep-in-touch .btn-keep,
  .keep-in-touch .btn-keep:active {
      background-color: #fff;
      border-radius: 0;
      transition: 0.35s;
  }
  .keep-in-touch .btn-keep:hover {
      box-shadow:
      inset -4em 0 0 0 #bfa66e,
      inset 4em 0 0 0 #bfa66e;
  }
  .keep-in-touch .btn-keep:hover svg path {
      fill: #fff;
  }

  /* thirra */
  .keep-in-touch.thirra {
      background-color: #6a203b;
  }
  .keep-in-touch.thirra svg path {
      fill: #6a203b;
  }
  .keep-in-touch.thirra .btn-keep:hover {
      box-shadow: inset -4em 0 0 0 #6a203b, inset 4em 0 0 0 #6a203b;
  }

  /* serio  */
  .keep-in-touch.serio {
      background-color: #e37f5b;
  }
  .keep-in-touch.serio svg path {
      fill: #e37f5b;
  }
  .keep-in-touch.serio .btn-keep:hover {
      box-shadow: inset -4em 0 0 0 #e37f5b, inset 4em 0 0 0 #e37f5b;
  }

  /* thrive  */
  .keep-in-touch.thrive {
      background-color: #5e3429;
  }
  .keep-in-touch.thrive svg path {
      fill: #5e3429;
  }
  .keep-in-touch.thrive .btn-keep:hover {
      box-shadow: inset -4em 0 0 0 #5e3429, inset 4em 0 0 0 #5e3429;
  }



  .faq .nav-pills {
      --bs-nav-pills-border-radius: 0;
      --bs-nav-pills-link-active-color: #000;
      --bs-nav-pills-link-active-bg: #fff;
      border-bottom: 2px solid;
  }
  .faq .nav {
      --bs-nav-link-padding-x: 1rem;
      --bs-nav-link-padding-y: 0.7rem;
      --bs-nav-link-color: #000;
      --bs-nav-link-hover-color: #818181;
      --bs-nav-link-disabled-color: #6c757d;
      --bs-nav-link-font-size: 18px;
  }
  .faq .nav-pills .nav-link.active,
  .faq .nav-pills .show>.nav-link {
      border-bottom: 3px solid;
      /* font-weight: 600; */
  }
  .faq .tab-content {
      margin-top: 4rem;
  }
  .faq .accordion {
      --bs-accordion-color: #000;
      --bs-accordion-border-width: 0;
      --bs-accordion-border-radius: 0;
      --bs-accordion-inner-border-radius: 0;
      --bs-accordion-btn-focus-border-color: none;
      --bs-accordion-btn-focus-box-shadow: none;
      --bs-accordion-btn-color: #000;
      --bs-accordion-active-color: #000;
      --bs-accordion-active-bg: #fff;
      --bs-accordion-body-padding-x: 1.9rem;
      --bs-accordion-body-padding-y: 1.5rem;
      --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
  .faq .accordion-button {
      font-size: 18px;
      padding: 1rem 0.8rem 1rem 0;
      letter-spacing: .1px;
  }
  .faq .accordion-item {
      border-bottom: 1px solid #0000006b;
  }
  .faq .accordion-body {
      font-size: 18px;
      margin-bottom: 1.3rem;
      background-color: #efefef;
      text-align: justify;
  }

  .contact .form-control {
      border: 0;
      border-radius: 0;
      background-color: #efefef;
      padding: 0.8rem 1rem;
      font-size: 18px;
  }
  .contact .text {
      max-width: 510px;
      margin: auto;
      font-size: 18px;
  }

  .blog .item {
      margin-bottom: 7rem;
  }
  .blog .btn-submit {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 170px;
  }
  .blog .btn-submit:hover path{
      fill: #fff;
  }

  .blog-detail {
      font-size: 18px;
  }
  .blog-detail p,
  .blog-detail ul {
      margin-bottom: 2rem;
      text-align: justify;
  }
  .blog-detail p:last-child {
      margin-bottom: 0;
  }
  .blog-detail-prev,
  .blog-detail-next {
      font-size: 18px;
      color: #818181;
      letter-spacing: .5px;
      transition: 0.4s;
  }
  .blog-detail-prev:hover,
  .blog-detail-next:hover {
      color: #000;
  }
  .p-truncate {
      display: -webkit-box;
      max-width: 100%;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  

  .zoom-in img {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
  }
  .zoom-in:hover img {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
  }

  @media (max-width: 991px) {

      #hero.about h2 {
          max-width: 100%;
      }
      .slide-content {
          width: 70%;
      }
      .list-content-col {
          justify-content: center;
      }
      .project .btn-read-more {
          margin-top: 8rem;
      }
      .title-main .sub {
          width: auto;
      }
      .about-us {
          height: 55vh;
      }
      .philosophySwiper .swiper-button-next,
      .philosophySwiper .swiper-button-prev {
          width: 60px;
      }
      .introSwiper {
          height: 70vh;
      }
      .unit-plan .content-top .text .first {
          font-size: 2.5rem;
      }
      .unit-plan .content-top .text .second {
          font-size: 1.5rem;
      }
      .unit-plan .title-underline {
          width: 65%;
          margin: 3% 0 0 0;
      }
      .unit-plan .content-bottom .text {
          top: 10px;
      }
      .unit-plan .content-bottom .plan-info {
          margin-right: 0;
          margin-bottom: 10px;
      }
      .floorSwiper {
          top: 22%;
          left: 13%;
          width: 300px;
      }
      .button-plan-list {
          top: 10%;
      }
      .map img {
          width: 100%;
      }
      .serio-info .text-content {
          font-size: 1.2rem;
          width: 85%;
      }
      .unit-plan.serio .content h1,
      .unit-plan.thrive .content h1 {
          font-size: 2.8rem;
      }
      .unit-plan.serio .content .text,
      .unit-plan.thrive .content .text {
          font-size: 18px;
      }
      .unit-plan.thrive .floorSwiper.floorthyra {
          width: 50%;
      }
      .introSwiper .swiper-slide {
        font-size: 16px;
        padding-bottom: 0px;
        padding-right: 0px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background-size: cover;
        background-position: center;
    }
  }
  @media (max-width: 767px) {



      .introSwiper .swiper-button-next,
      .introSwiper .swiper-button-prev {
          display: none;
      }
      .slide-content {
          width: 90%;
      }
      .floorSwiper {
          top: 27%;
          left: 7%;
          width: 270px;
      }
      .gallerySwiper {
          padding: 0 0 40px 0;
      }
      .gallerySwiper .swiper-button-prev,
      .gallerySwiper .swiper-button-next {
          display: none;
      }
      .unit-plan.serio .content h1,
      .unit-plan.thrive .content h1 {
          font-size: 2.6rem;
      }
  }
  @media (max-width: 575px) {
      .menu--left .menuToggle span {
          left: 0;
      }
      .menu--left .menuToggle input {
          left: 17px;
      }


      #header .logo svg {
        max-height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .introSwiper {
          height: 65vh;
      }
      .introSwiper .swiper-slide {
          font-size: 16px;
      }
      .about-us {
          height: 80vh;
      }
      .about-us .btn-read-more {
          padding: 10px 20px;
      }
      .title-main .box-line {
          width: 120px;
      }
      .philosophySwiper .swiper-button-next,
      .philosophySwiper .swiper-button-prev {
          width: 40px;
      }
      .unit-plan .content-bottom .text img {
          max-width: 40px
      }
      .floorSwiper {
          top: 46%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 220px;
      }
      .button-plan-list {
          top: 31%;
      }
      .unit-plan .content-top img {
          object-fit: cover;
      }
      .unit-plan .content-bottom {
          height: 800px;
      }
      .unit-plan .content-bottom .text {
          top: 49%;
          padding: 0 10px;
          width: 100%;
          min-height: 30%;
      }
      .btn-plan {
          padding: 5px 20px 5px 0;
          width: 140px;
          margin-bottom: 10px;
          font-size: 16px;
      }
      .map .nav-pills .nav-link {
          margin: 0 8px;
      }
      .serio-info .text-content {
          font-size: 1rem;
      }
      .serio-summary .title h1 {
          font-size: 2.5rem;
      }
      .serio-summary .text-content {
          font-size: 1.2rem;
      }
      .unit-plan.serio .button-plan-list,
      .unit-plan.thrive .button-plan-list {
          position: relative;
      }
      .unit-plan.serio .floorSwiper {
          width: 90%;
      }
      .unit-plan.serio .content h1,
      .unit-plan.thrive .content h1 {
          font-size: 2.2rem;
      }
      .unit-plan.serio .content .text{
          font-size: 16px;
      }
      .unit-plan.thrive .content .text p {
          font-size: 18px;
      }
      .blog .item {
          margin-bottom: 4rem;
      }
  }

  /* @media (min-width: 767px) */
  @media (min-width: 767px) {
      .gallerySwiper .swiper-slide:nth-child(odd) {
          order: 1;
          /* Move odd-numbered slides to the first position */
      }
      .gallerySwiper .swiper-slide:nth-child(even) {
          order: 2;
          /* Move even-numbered slides to the second position */
      }
  }

  .left-text {
      float: left; /* ย้ายข้อความไปด้านซ้าย */
      margin-left: 20px; /* ระยะห่างข้อความจากวิดีโอด้านซ้าย */
  }

  .right-text {
      float: right; /* ย้ายข้อความไปด้านขวา */
      margin-right: 20px; /* ระยะห่างข้อความจากวิดีโอด้านขวา */
  }



  .btn-read-more:hover #btn-consult path {
      /* fill: #fff; */
      transform: scale(1);
      transition: 0.5s;
  }

  .btn-read-center:hover #btn-consult path {
      /* fill: #fff; */
      transform: scale(1);
      transition: 0.5s;
  }



  .container12 {
      margin: 0;
      overflow: hidden;
      background-color: #c11d2c;
  }

  .text-container-work {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: space-between;
      height: 100%;
  }

  .background-black {
      background-color: #000;
  }

  .background-grey {
      background-color: #f0f0f0;
  }

  .background-white {
      background-color: #fff;

  }

  .text-our-services {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      text-align: justify;
  }

  .btn-home-service::after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 0%;
      position: relative;
      background: #000;
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
  }
  .btn-home-service:hover:after {
      width: 100%;
      left: 0;
  }
  .read-more-services {
      display: inline-flex;
      font-size: 18px;
      font-weight: 700;
  }
  .read-more-services:hover {
      color: #000;
  }

  .card-our-services {
      position: relative;
      height: 100%;
  }
  .card-our-services img {
      display: block;
      width: 100%;
      height: 100%;
  }

  .home-text-start {
      text-align: start;
  }

  .home-text-end {
      text-align: end;
  }

  .font-20-bold {
      font-size: 18px;
      font-weight: 700;
      text-align: justify;
  }
  .font-20-semibold {
      font-size: 18px;
      font-weight: 600;
      text-align: justify;
  }
  .font-20{
      font-size: 18px;
  }

  .font-24-bold {
      font-size: 24px;
      font-weight: 700;
  }
  .font-24-semibold {
      font-size: 24px;
      font-weight: 600;
  }
  .font-24{
      font-size: 24px;
  }

  .font-18-bold {
      font-size: 18px;
      font-weight: 700;
  }
  .font-18 {
      font-size: 18px;
  }
  .font-26-semibold {
      font-size: 26px;
      font-weight: 600;
  }

  .w-115 {
      width: 115px;

  }

  .align-self {
      align-self: center;
  }

  .testimonials {
      padding-right: 60px;
      padding-left: 60px;
      padding-bottom: 40px;
      background-color: #000;
      padding-top: 40px;
      color: white;
      justify-content: space-between;
  }

  .owl-carousel.testimonial .owl-dots {
      text-align: center;
      margin-top: 15px;
    }

    .owl-carousel.testimonial button.owl-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      background: #ccc;
      margin: 0 3px;
    }

    .owl-carousel.testimonial button.owl-dot.active {
      background-color: #aaa;
    }

    .owl-carousel.testimonial button.owl-dot:focus {
      outline: none;
    }

  .bg-1 {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
  }

  .card-content{
    align-items: start;
    flex-wrap: wrap;
  }

  .card-content-page2{
    align-items: start;
    flex-wrap: wrap;
  }


    .card-blog:hover .btn-red-products {
      color: #c11d2c;
      background-color: #FFF;
      border-color: #c11d2c;
      border-radius: 50px;
    }

    .card-blog img {
      width: 100%;
      object-fit: cover;
    }


  .list-content-col {
      display: flex;
  }

  .award-bottom-solid {
      border-bottom: 1.5px solid #000000;
      margin-top: 80px;
      margin-bottom: 80px;
  }

  .services-hover .hover {
      display: none;

    }

    .services-hover:hover {
      justify-content: center;

    }

    .services-hover:hover .main{
      transition: .5s ease;
      display: none;
    }

    .services-hover:hover .hover {
      transition: .5s ease;
      display: block;
    }
      .card-our-services:hover .shadow-img::before {
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 0%);
      }


  .container__img-holder {
      cursor: pointer;
    }

    .container .container__img-holder:nth-child(3n+1) {
      margin-left: 0;
    }

    .container__img-holder img {
      width: 100%;
      display: block;
    }

    .services-form-widget-purple {
      border: 2px solid #000;
    }

    .service-item {
      box-shadow: 0 0 45px rgba(0, 0, 0, .06);
    }


    /* Popup Styling */
    .img-popup {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgb(0 0 0 / 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
      z-index: 2;
    }

    .img-popup img {
      max-width: 900px;
      width: 100%;
      opacity: 0;
      transform: translateY(-100px);
      -webkit-transform: translateY(-100px);
      -moz-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
      -o-transform: translateY(-100px);
    }

    .close-btn {
      width: 35px;
      height: 30px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 120px;
      right: 20px;
      cursor: pointer;
    }
    .prev-btn,
    .next-btn {
      width: 35px;
      height: 30px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 47%;
      cursor: pointer;
    }
    .prev-btn {
        left: 40px;
      }
      .next-btn {
        right: 40px;
    }

    .close-btn .bar,
    .prev-btn .bar,
    .next-btn .bar {
      height: 4px;
      background: #fff;
    }

    .close-btn .bar:nth-child(1) {
      transform: rotate(45deg);
    }
    .close-btn .bar:nth-child(2) {
      transform: translateY(-4px) rotate(-45deg);
    }
  /*
    .prev-btn .bar:nth-child(1) {
      transform: rotate(45deg);
    }
    .prev-btn .bar:nth-child(2) {
      transform: translateY(-4px) rotate(-45deg);
    }

    .next-btn .bar:nth-child(1) {
      transform: rotate(45deg);
    }
    .next-btn .bar:nth-child(2) {
      transform: translateY(-4px) rotate(-45deg);
    } */

    .opened {
      display: flex;
    }

    .opened img {
      animation: animatepopup 1s ease-in-out .8s;
      -webkit-animation: animatepopup .3s ease-in-out forwards;
    }

    @keyframes animatepopup {

      to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
      }

    }

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

      .container .container__img-holder:nth-child(3n+1) {
        margin-left: 0px;
      }

    }



  @media(max-width: 991px){

      .home-text-start {
          text-align: center;
      }

      .home-text-end {
          text-align: center;
      }
  }

  @media(max-width: 768px){

      .home-text-start {
          text-align: center;
      }

      .home-text-end {
          text-align: center;
      }
  }

  /* FAQ */
  ul.accordion-list {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      padding: 20px;
      margin: 0;
      list-style: none;
    }

    ul.accordion-list li {
      position: relative;
      display: contents;
      width: 100%;
      height: auto;
      background-color: #FFF;
      padding: 20px;
      margin: 0 auto 15px auto;
      border: 1px solid #eee;
      border-radius: 5px;
      cursor: pointer;
    }

    ul.accordion-list li.active h3:after {
      transform: rotate(45deg);
    }

    ul.accordion-list li h3 {
      font-weight: 700;
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
      font-size: 15px;
      letter-spacing: 0.01em;
      cursor: pointer;
    }

    ul.accordion-list li h3:after {
      content: url("frontend/img/icon/servies-5.svg");
      font-family: "material-design-iconic-font";
      position: absolute;
      right: 0;
      top: 0;
      color: #Fcc110;
      transition: all 0.3s ease-in-out;
      font-size: 18px;
    }

    ul.accordion-list li div.answer {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      cursor: pointer;
    }

    ul.accordion-list li div.answer p {
      position: relative;
      display: block;
      font-weight: 300;
      padding: 10px 0 0 0;
      cursor: pointer;
      line-height: 150%;
      margin: 0 0 15px 0;
      font-size: 14px;
    }

.text-h1-green {
    color: #048944;
}
.text-justify {
    text-align: justify;
}
/*--------------------------------------------------------------
# Articles Section
--------------------------------------------------------------*/





.card-products {
    transition: 0.3s;
    border-radius: 30px;
    border: none;
    background-color: #ebebeb;
    position: relative;
    background: #fff;
    height: auto;
    box-shadow: 0 5px 10px rgb(1 1 1 / 40%);
    overflow: hidden;
  }

  .card-products img {
    border-radius: 30px 30px 0 0;
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

.card-blog {
    transition: 0.3s;
    border-radius: 0px 0px 30px 30px;
    border: none;
    background-color: #ebebeb;
    position: relative;
    height: auto;
    box-shadow: 0 5px 10px rgb(1 1 1 / 40%);
    overflow: hidden;
  }
  .card-blog:hover svg path {
    fill: white;
}

  .card-blog:hover {
    background-color: #048944;
    color: #fff !important;
  }

  .card-blog:hover h5 {
    color: #fff !important;
  }

  .card-blog:hover p {
    color: #fff !important;
  }

  .card-blog:hover .btn-red-products {
    color: #048944;
    background-color: #FFF;
    border-color: #048944;
    border-radius: 50px;
  }

  .card-blog img {
    border-radius: 0px 0px 0 0;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  @media(max-width: 767px){
    .card-products {
      transition: 0.3s;
      border-radius: 15px;
      border: none;
      background-color: #ebebeb;
      position: relative;
      background: #fff;
      height: auto;
      box-shadow: 0 5px 10px rgb(1 1 1 / 40%);
      overflow: hidden;
    }

    .card-products img {
      border-radius: 15px 15px 0 0;
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card-blog {
      transition: 0.3s;
      border-radius: 15px;
      border: none;
      background-color: #ebebeb;
      position: relative;
      background: #fff;
      height: auto;
      box-shadow: 0 5px 10px rgb(1 1 1 / 40%);
      overflow: hidden;
    }

    .card-blog img {
      border-radius: 15px 15px 0 0;
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

  }


    .a-hover:hover svg path {
    fill: #000;
    }

    .shadow-banner::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%);
        display: flex;
        align-items: center;
        color: #fff;
    }

    #LawyersCard .card {
        transition: 0.3s;
        border-radius: 30px;
        border: none;
        height: 100%;
        width: 100%;
        background-color: transparent;
        padding: 0px;
    }

    #LawyersCard .card:hover {
        box-shadow: 0px 0px 0px rgba(127, 137, 161, 0.25);
    }

    #LawyersCard .card-body {
        padding: 1.5rem 1.5rem 1.5rem 1.5rem;
        text-align: center;
    }

    #LawyersCard .card:hover img {
        opacity: 1;
    }

    #LawyersCard .card:hover p {
        color: #000;
    }



    #LawyersCard .item:hover {
        background-color: #fff;
        color: #000;
        cursor: pointer;
        scale: 0.5;
        transform: scale(2);
        transition: 0.5s;
    }

    #LawyersCard .item:hover h5 {
        color: #048944; /* เปลี่ยนเป็นสีที่คุณต้องการ */
        /* และคุณสามารถเพิ่ม transition หรืออื่น ๆ ตามต้องการได้ */
    }

    .card {
        height: 300px;
        width: 100%;
        background-color: #048944; /* สีเขียว */
        padding: 20px;
        text-align: center;
        position: relative;
        transition: background-color 0.5s;
        border-radius: 0;
        border: 0.5px solid white;
    }

    .card p {
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
    }

    .card img {
        width: 100px; /* ปรับขนาดรูปตามต้องการ */
        display: block;
        margin: 0 auto;
        transition: opacity 0.5s;
    }

    .card:hover {
        background-color: #ffffff; /* สีขาว */
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    }

    .card:hover img {
        opacity: 0;
    }

    .card .title {
        padding-right: 40px;
        padding-left: 40px;
        color: #fff;
        transform: scale(1);
        transition: 0.5s;
    }

    .card:hover .title {
        color: #048944;
        transform: translateY(-120px); /* เลื่อนขึ้นไปด้านบน 30px */
    }

    .card .detail {
        color: #000000;
        position: relative;
        top: -20px;
        margin-bottom: -20px;
        opacity: 0;
        transition: transform 0.3s;
    }

    .card:hover .detail {
        padding-right: 40px;
        padding-left: 40px;
        opacity: 1;
        transition: opacity 0.5s;
        transform: translateY(-80px);
    }

    @media (max-width: 1399px) {
        .card .title {
          padding-right: 5px;
          padding-left: 5px;
      }

        .card:hover .detail {
          padding-right: 5px;
          padding-left: 5px;
      }
    }
    

    .tab {
        cursor: pointer;
        /* margin-right: 30px; */
        padding: 5px 10px;
        font-weight: 400;
        color: #313133;
        border-bottom: 3px solid transparent;
        transition: color 0.3s, border-color 0.3s;
      }

      .tabs {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }

      .tab-item {
        margin: 0 0px;
        text-align: center;
      }

      .tab.active {
        color: #048944;
        border-color: #048944;
        font-weight: 600;
      }

      .tab:hover {
        color: #048944;
        border-color: #048944;
      }

      #pills-tab {
        display: flex;
        flex-direction: column;
      }






#news.tab-content,
#activities.tab-content {
  display: none;
}

#news.tab-content.active,
#activities.tab-content.active {
  display: block;
}

#lawyers-pills .nav-link {
    color: #000;
}

#lawyers-pills .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #048944;
    background-color: #fff;
}

#lawyers-pills #pills-tab {
    list-style-type: none;
    display: flex;
    flex-direction: column;
}



#lawyers-pills #pills-tab .nav-link.active::before {
    content: "\2022"; /* Unicode character for disc */
    color: #048944; /* Color for active disc */
    margin-right: 5px; /* Optional: Adjust the spacing between the disc and the text */
    font-size: 28px;
}

      #lawyers .tab-content > .tab-pane {
        display: none;
      }

      #lawyers .tab-content > .tab-pane.active {
        display: block;
      }



      @media(max-width: 430px){
        .tabs h2{
          font-size: 1.25rem;
        }
      }

      @media(max-width: 390px){
        .tabs h2{
          font-size: 1rem;
        }
      }

      @media(max-width: 320px){
        .tab {
          margin-right:5px;
        }
      }

      .list-content-col {
        display: flex;
      }

      .list-content {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .font-bold {
        font-size: 30px;

      }



/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.detail ul {
    padding-left: 1rem;
}

.modal-team .modal-header {
    border-bottom: unset !important;
    padding: 2rem;
    background: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.modal-team .modal-body.news-detail {
    padding: 0 5rem;
    background: transparent;
}
.modal-team .modal-content{
    background: #048944;
    background: #048944;
}
.modal-team .text-detail p{
    color: #fff;
}

.modal-team .news-detail .text-detail h5{
    font-weight: 400;
}

.modal-team .modal-footer {
    border-top: unset !important;
    padding: 2.5rem 0;
}

.modal-team hr {
    border-top: 2px solid #fff;
    opacity: .25;
}

.modal-team .btn-close {
    background: transparent url(/frontend/img/3-our-practices/xmark-solid.svg) center/1.5em auto no-repeat;
    opacity: 1;
}

@media (max-width: 1199px) {
    .modal-team .modal-body.news-detail {
        padding: 0 1rem;
    }

    .modal-team .modal-footer {
        padding: 1rem 0;
    }

    .modal-team .modal-header {
        padding: 1rem;
    }
}
#photo-slide .item {
    position: relative;
    /* background-color: #f0f0f0; */
    /* border: 1px solid #ccc; */
    padding: 30px;
    overflow: hidden;
}

@media (max-width: 575px) {
  #photo-slide .item {
    padding: 10px;
  }
}

.item {
    position: relative;
    /* background-color: #f0f0f0; */
    /* border: 1px solid #ccc; */
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-top: 30px;
    overflow: hidden;
  }

  .item:hover {
    background-color: #048944;
    color: #fff;
    cursor: pointer;
  }




  .delete-btn {
    position: absolute;
    top: 0;
    right: -1400px;
    background-color: #000;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    transition: right 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .padding-left-3 {
    padding-left: 2.5rem;
  }

  .item:hover .delete-btn {
    right: -1200px;
  }

  .overflow-x {
    overflow-x: auto;
  }

  .hide-ipad-phone {
    display: block;
  }

  .show-ipad-phone {
    display: none;
  }

  .border-mobile-black {
    border-bottom: 0px solid #000;
  }

  #imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #preview {
        margin: auto;
    }

    .upload-button-black {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
        color: #000;
        cursor: pointer;
        border-radius: 5px;
        }


  .upload-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    color: #048944;
    cursor: pointer;
    border-radius: 5px;
    }

    .upload-button svg {
        margin-left: 15px; /* Adjust the spacing between text and SVG as needed */
    }

    /* Style the radio buttons as squares */
    input[type="radio"] {
        display: none; /* Hide the original radio buttons */
    }

    input[type="radio"] + label {
        display: inline-block;
        width: 20px; /* Width of the square */
        height: 20px; /* Height of the square */
        background-color: #ccc; /* Default color */
        margin-right: 10px; /* Space between squares */
        border-radius: 3px; /* Rounded corners */
        cursor: pointer;
    }

    input[type="radio"]:checked + label {
        background-color: #048944; /* Color when checked */
    }

    /* Additional styling for the labels */
    label {
        vertical-align: middle;
    }

    .form-style .form-control {
        border-radius: 0;
    }

    .input-with-tail {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-with-tail input {
        border-radius: 4px 0 0 4px;
    }

    .input-with-tail .tail {
        height: 38px;
        width: auto;
        position: absolute;
        right: 0;
        top: 0;
        padding: 9px;
        background-color: #d1d1d1;
        color: white;
        font-size: 12px;
    }

    .custom-btn-color {
        color: #fff;
        background-color: #048944;
        border-color: #048944;
    }

    .custom-btn-color:hover {
        color: #fff;
        background-color: #026632;
        border-color: #026632;
    }

    .schedule-table {
        /* เปลี่ยนสีพื้นหลัง */
        background-color: #048944;
      }
      .schedule-table td {
        background-color: #fff;
      }

      /* เปลี่ยนสีของ text ใน <td> ในตาราง */
      .schedule-table td {
        color: #000;
      }

      /* หรือหากต้องการปรับสีของ text ในตารางด้วย */
      .schedule-table th {
        color: #fff;
      }

      /* สำหรับเปลี่ยนสีพื้นหลังของตารางเมื่อผู้ใช้โฮเวอร์เพื่อเน้น */
      .schedule-table:hover {
        background-color: #026632;
      }

    .hide-education-input {
        display: none;
    }

    .none-display {
        display: none;
    }

    .hide-employment-input {
        display: none;
    }

    .hide-reference-input {
      display: none;
    }

    input[type="file"] {
        /* ปิดการแสดงปุ่มสัมผัส */
        appearance: none;
        /* สไตล์สำหรับปุ่มทั่วไป */
        border: 1px solid #28a745;
        padding: 8px 12px;
        background-color: #28a745;
        color: white;
        border-radius: 4px;
        cursor: pointer;
      }

      /* สไตล์เมื่อปุ่มมีการโฮเวอร์ */
      input[type="file"]:hover {
        background-color: #218838;
        border-color: #218838;
      }




  @media (max-width: 991px) {
    .item:hover .delete-btn {
        right: -90%;
      }

    .padding-left-3 {
        padding-left: 1.5rem;
      }
}

@media (max-width: 767px) {
    .border-mobile-black {
        border-bottom: 1px solid #000;
      }

    .hide-ipad-phone {
        display: none;
      }

    .show-ipad-phone {
        display: flex;
      }

    .item:hover .delete-btn {
        display: none;
      }

    .padding-left-3 {
        padding-left: 1.3rem;
      }
}

@media (max-width: 575) {
    .item:hover .delete-btn {
        right: -88%;
      }

    .padding-left-3 {
        padding-left: 1.5rem;
      }
}

@media (max-width: 430px) {
    .item:hover .delete-btn {
        right: -85%;
      }
}

.bg-green {
    background-color: #048944;
}

@media(max-width: 430px){
    .padding-3 {
        padding: 10px;
    }
}

.text-red {
    color: red;
}

.container-iframe {
    width: 100%; /* กำหนดความกว้างตามที่คุณต้องการ */
    height: 450px; /* กำหนดความสูงตามที่คุณต้องการ */
  }
  
  /* กำหนดให้ iframe ขยายตามความกว้างและความสูงของ container-iframe */
  .container-iframe iframe {
    width: 100%; /* ให้ความกว้างของ iframe ขยายตาม container */
    height: 100%; /* ให้ความสูงของ iframe ขยายตาม container */
    border: 0; /* ลบเส้นขอบของ iframe */
  }
  
  .padding-50 {
    padding-right: 30px;
  }

  .padding-10 {
    padding-left: 10px;
  }
  
  
  .padding-40 {
    padding-right: 25px;
  }

  .padding-0 {
    padding-right: 0px;
  }

  .grid-display {
    display: grid;
  }

  .padding-15px {
    padding-right: 15px;
  }

  @media(max-width: 992px){
    .container-iframe {
      height: 400px; /* กำหนดความสูงตามที่คุณต้องการ */
    }

    .grid-display {
        display: block;
      }
  }

  @media(max-width: 401px){
    .padding-15px {
        padding-right: 0px;
      }

  }

  @media(max-width: 991px){
    .padding-mobile {
      padding-right: 40px;
    }
  }

  .h-45 {
    height: 45px;
    margin-right:20px;
  }

  .swiper-pagination-bullet, .swiper-pagination-bullet-active {
    background-color: #048944;
  }