.line-top {
     border-top: 1px solid var(--border);
 }

 .footer-nav-list .text p {
     font-size: 20px;
     color: black;
     font-family: var(--font_teko);
     text-transform: uppercase;
     line-height: 1;
 }

 .service-details-area {
     padding-top: 100px
 }

 @media only screen and (max-width: 1399px) {
     .service-details-area {
         padding-top: 80px
     }
 }

 .service-details-area .thumb-main {
     position: relative
 }

 .service-details-area .thumb-main img {
     width: 100%
 }

 .service-details-area .thumb-main .hero-social {
     writing-mode: vertical-lr;
     display: flex;
     gap: 20px;
     align-items: center;
     position: absolute;
     left: -210px;
     bottom: -180px
 }

 .dir-rtl .service-details-area .thumb-main .hero-social {
     justify-content: flex-end
 }

 @media only screen and (max-width: 1919px) {
     .service-details-area .thumb-main .hero-social {
         left: 30px;
         bottom: 30px;
         background-color: var(--white);
         padding: 20px 10px
     }
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .thumb-main .hero-social {
         writing-mode: initial;
         padding: 10px 20px
     }
 }

 @media only screen and (max-width: 767px) {
     .service-details-area .thumb-main .hero-social {
         left: 10px;
         bottom: 10px
     }
 }

 .service-details-area .thumb-main .hero-social .title {
     position: relative;
     padding-inline-end: 80px;
     display: inline-block;
     font-size: 14px;
     color: var(--primary);
     text-transform: uppercase
 }

 @media only screen and (max-width: 1919px) {
     .service-details-area .thumb-main .hero-social .title {
         color: var(--black)
     }
 }

 .service-details-area .thumb-main .hero-social .title:before {
     position: absolute;
     content: "";
     width: 1px;
     height: 60px;
     background-color: var(--border);
     bottom: 0;
     left: 50%;
     transform: translateX(-50%)
 }

 .dir-rtl .service-details-area .thumb-main .hero-social .title:before {
     top: 0;
     bottom: auto
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .thumb-main .hero-social .title:before {
         width: 60px;
         height: 1px;
         inset-inline-end: 0;
         top: 50%;
         transform: translateY(-50%)
     }
 }

 .service-details-area .thumb-main .hero-social .hero-social-links {
     display: flex;
     gap: 25px
 }

 .service-details-area .thumb-main .hero-social .hero-social-links a {
     color: var(--primary)
 }

 @media only screen and (max-width: 1919px) {
     .service-details-area .thumb-main .hero-social .hero-social-links a {
         color: var(--black)
     }
 }

 .service-details-area .thumb-main .hero-social .hero-social-links a:hover {
     color: var(--secondary)
 }

 .service-details-area .thumb-main .hero-social .hero-social-links a i {
     font-size: 16px
 }

 .service-details-area .section-title-box {
     display: grid;
     gap: 20px 60px;
     grid-template-columns: 1fr 520px;
     align-items: center;
     margin-top: 46px
 }

 @media only screen and (max-width: 1199px) {
     .service-details-area .section-title-box {
         grid-template-columns: 1fr 460px
     }
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .section-title-box {
         grid-template-columns: 1fr
     }
 }

 .service-details-area .section-title-box .feature-list {
     display: grid;
     gap: 10px 50px;
     grid-template-columns: auto auto;
     justify-content: space-between
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .section-title-box .feature-list {
         justify-content: flex-start
     }
 }

 @media(max-width: 575px) {
     .service-details-area .section-title-box .feature-list {
         grid-template-columns: auto
     }
 }

 .service-details-area .section-title-box .feature-list li {
     color: var(--primary)
 }

 .service-details-area .section-title-box .feature-list li:not(:first-child) {
     margin-top: 10px
 }

 .service-details-area .section-title-box .feature-list li:before {
     content: "+";
     margin-inline-end: 13px
 }

 .service-details-area .text-wrapper {
     margin-top: 27px
 }

 .service-details-area .text-wrapper .text:not(:first-child) {
     margin-top: 23px
 }

 .service-details-area .steps-wrapper-box {
     border-top: 1px solid var(--border);
     margin-top: 66px
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .steps-wrapper-box {
         border-top: 0
     }
 }

 .service-details-area .working-steps {
     display: grid;
     gap: 40px 30px;
     grid-template-columns: repeat(4, 1fr)
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .working-steps {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media(max-width: 575px) {
     .service-details-area .working-steps {
         grid-template-columns: repeat(1, 1fr)
     }
 }

 .service-details-area .working-step {
     padding-top: 50px;
     position: relative
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .working-step {
         padding-top: 20px;
         border-top: 1px solid var(--border)
     }
 }

 .service-details-area .working-step:before {
     position: absolute;
     content: "";
     width: 7px;
     height: 7px;
     background-color: var(--primary);
     border-radius: 50%;
     top: -4px;
     inset-inline-start: 0
 }

 .service-details-area .working-step .title {
     font-size: 22px;
     line-height: 1.29
 }

 .service-details-area .working-step .text {
     margin-top: 15px
 }

 .service-details-area .thumb-gallery {
     margin-top: 53px;
     display: grid;
     gap: 30px;
     grid-template-columns: repeat(3, 1fr)
 }

 @media only screen and (max-width: 991px) {
     .service-details-area .thumb-gallery {
         gap: 10px
     }
 }

 @media(max-width: 575px) {
     .service-details-area .thumb-gallery {
         grid-template-columns: repeat(2, 1fr)
     }
 }


 .service-area .section-title {
     /*max-width: 740px;*/
     margin-inline: auto
 }

 @media only screen and (max-width: 1919px) {
     /*.service-area .section-title {
        max-width: 630px
    }*/
 }

 @media only screen and (max-width: 1199px) {
     /*.service-area .section-title {
        max-width: 460px
    }*/
 }

 @media only screen and (max-width: 991px) {
     .service-area .section-title {
         /*max-width: 460px;*/
         margin: 0
     }
 }

 .service-area .section-header .text {
     max-width: 300px;
     margin-inline-start: 580px
 }

 @media only screen and (max-width: 1399px) {
     .service-area .section-header .text {
         margin-inline-start: 520px
     }
 }

 @media only screen and (max-width: 1199px) {
     .service-area .section-header .text {
         margin-inline-start: 430px
     }
 }

 @media only screen and (max-width: 991px) {
     .service-area .section-header .text {
         max-width: 460px;
         margin: 0
     }
 }

 .service-area .section-header .text-wrapper {
     margin-top: 22px
 }

 @media only screen and (max-width: 1199px) {
     .service-area .section-header .text-wrapper {
         margin-top: 12px
     }
 }

 .service-area .section-header .section-title-wrapper {
     position: relative
 }

 .service-area .section-header .section-title-wrapper .shape-1 {
     position: absolute;
     width: 93px;
     top: -60px;
     inset-inline-start: 43%;
     z-index: 99
 }

 @media only screen and (max-width: 1199px) {
     .service-area .section-header .section-title-wrapper .shape-1 {
         display: none
     }
 }

 .service-area .services-wrapper-box {
     margin-top: 73px
 }

 @media only screen and (max-width: 1919px) {
     .service-area .services-wrapper-box {
         margin-top: 53px
     }
 }

 @media only screen and (max-width: 1199px) {
     .service-area .services-wrapper-box {
         margin-top: 33px
     }
 }

 .service-box {
     border-bottom: 1px solid #ececec;
     padding: 44px 0;
     display: grid;
     gap: 20px 60px;
     grid-template-columns: 160px 1fr 100px
 }

 .dark .service-box {
     border-color: #252525
 }

 @media only screen and (max-width: 1199px) {
     .service-box {
         padding: 24px 0;
         grid-template-columns: 100px 1fr 100px
     }
 }

 @media only screen and (max-width: 767px) {
     .service-box {
         grid-template-columns: auto
     }
 }

 .service-box:first-child {
     border-top: 1px solid #ececec
 }

 .dark .service-box:first-child {
     border-color: #252525
 }

 .service-box .number {
     font-size: 30px;
     font-family: var(--font_teko);
     font-weight: 600;
     color: var(--primary)
 }

 @media only screen and (max-width: 1199px) {
     .service-box .number {
         font-size: 22px
     }
 }

 .service-box .title {
     font-size: 36px;
     text-transform: uppercase;
     line-height: .88
 }

 @media only screen and (max-width: 1199px) {
     .service-box .title {
         font-size: 26px
     }
 }

 /*
.service-box .text {
    max-width: 340px
}*/

 .service-box .feature-list {
     margin-top: 18px
 }

 .service-box .feature-list li {
     font-size: 18px;
     line-height: 1.41;
     color: var(--primary)
 }

 .service-box .icon {
     width: 88px;
     height: 115px;
     border: 1px solid #ececec;
     border-radius: 44px;
     display: inline-flex;
     justify-content: center;
     align-items: center
 }

 .dark .service-box .icon {
     border-color: #252525
 }

 .service-box .content {
     display: grid;
     gap: 20px 60px;
     /*grid-template-columns: 360px 1fr*/
 }

 .service-area .services-wrapper-box {
     margin-top: 73px
 }

 @media only screen and (max-width: 1919px) {
     .service-area .services-wrapper-box {
         margin-top: 53px
     }
 }

 @media only screen and (max-width: 1199px) {
     .service-area .services-wrapper-box {
         margin-top: 33px
     }
 }

 .service-details-area {
     border-bottom: 1px solid var(--border);
 }

 .service-area {
     border-bottom: 1px solid var(--border);
 }

 p.text-eligibility {
     padding: 0;
     margin: 0;
     line-height: 1.41;
     font-weight: 400;
     font-size: 22px;
     color: var(--primary);
     font-family: var(--font_plusjakartasans);

 }

 @media only screen and (max-width: 1399px) {
     p.text-eligibility {
         font-size: 20px;
     }
 }

 @media only screen and (max-width: 1199px) {
     p.text-eligibility {
         font-size: 18px;
     }
 }

 @media only screen and (max-width: 991px) {
     p.text-eligibility {
         font-size: 16px;
     }
 }

 /*** new ***/


 .contact-area {
     background-color: var(--black);
     position: relative;
     z-index: 1;
     overflow: hidden
 }

 .dark .contact-area {
     background-color: #171717
 }

 .contact-area-inner {
     display: grid;
     gap: 30px 60px;
     grid-template-columns: auto auto;
     align-items: center;
     justify-content: space-between
 }

 @media only screen and (max-width: 991px) {
     .contact-area-inner {
         grid-template-columns: auto
     }
 }

 @media only screen and (min-width: 1919px) {
     .contact-area .section-spacing {
         padding-top: 120px;
         padding-bottom: 120px
     }
 }

 .contact-area .shape-1 {
     position: absolute;
     inset-inline-end: -6%;
     top: -15%;
     z-index: -1;
     width: 440px
 }

 @media only screen and (max-width: 1399px) {
     .contact-area .shape-1 {
         top: -45%
     }
 }

 @media only screen and (max-width: 1199px) {
     .contact-area .shape-1 {
         width: 340px
     }
 }

 @media only screen and (max-width: 991px) {
     .contact-area .shape-1 {
         width: 270px;
         top: -35%
     }
 }

 @media only screen and (max-width: 767px) {
     .contact-area .shape-1 {
         display: none
     }
 }

 .dir-rtl .contact-area .shape-1 img {
     transform: rotateY(180deg)
 }

 .contact-area .section-title {
     max-width: 690px;
     color: var(--white)
 }

 @media only screen and (max-width: 1919px) {
     .contact-area .section-title {
         max-width: 630px
     }
 }

 @media only screen and (max-width: 1199px) {
     .contact-area .section-title {
         max-width: 580px
     }
 }

 @media only screen and (max-width: 991px) {
     .contact-area .section-title {
         max-width: 450px
     }
 }

 .contact-area .section-content .text {
     max-width: 600px;
     color: var(--white-2)
 }

 .contact-area .section-content .text-wrapper {
     margin-top: 27px
 }

 @media only screen and (max-width: 991px) {
     .contact-area .section-content .text-wrapper {
         margin-top: 17px
     }
 }

 .contact-area .wc-btn-primary {
     border-color: var(--white)
 }

 .contact-area .wc-btn-circle {
     border-color: var(--white)
 }

 .contact-area .section-title {
     max-width: 690px;
     color: var(--white);
 }



 .section-title.has_text_move_anim {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 0.5rem;
     /* ระยะห่างระหว่างคำ */
 }

 .section-title.has_text_move_anim>div {
     display: inline;
     white-space: nowrap;
 }

 .wc-btn-group {
     display: flex;
     width: -moz-fit-content;
     width: fit-content
 }

 .wc-btn-group>*:nth-child(1) {
     transform: scale3d(0.5, 0.5, 1);
     margin-inline-end: -40px
 }

 .wc-btn-group>*:nth-child(2) {
     transform: scale3d(1, 1, 1)
 }

 .wc-btn-group>*:nth-child(3) {
     transform: scale3d(1, 1, 1);
     margin-inline-start: 0
 }

 .wc-btn-group:hover>*:nth-child(1) {
     transform: scale3d(1, 1, 1);
     margin-inline-end: 0
 }

 .wc-btn-group:hover>*:nth-child(2) {
     transform: scale3d(1, 1, 1)
 }

 .wc-btn-group:hover>*:nth-child(3) {
     transform: scale3d(0.5, 0.5, 1);
     margin-inline-start: -40px
 }

 @keyframes mask_animation {
     from {
         -webkit-mask-position: 0 0;
         mask-position: 0 0
     }

     to {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0
     }
 }

 @keyframes mask_animation_2 {
     from {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0
     }

     to {
         -webkit-mask-position: 0 0;
         mask-position: 0 0
     }
 }


 .wc-btn-group {
     display: flex;
     width: -moz-fit-content;
     width: fit-content
 }

 .wc-btn-group>*:nth-child(1) {
     transform: scale3d(0.5, 0.5, 1);
     margin-inline-end: -60px
 }

 .wc-btn-group>*:nth-child(2) {
     transform: scale3d(1, 1, 1)
 }

 .wc-btn-group>*:nth-child(3) {
     transform: scale3d(1, 1, 1);
     margin-inline-start: 0
 }

 .wc-btn-group:hover>*:nth-child(1) {
     transform: scale3d(1, 1, 1);
     margin-inline-end: 0
 }

 .wc-btn-group:hover>*:nth-child(2) {
     transform: scale3d(1, 1, 1)
 }

 .wc-btn-group:hover>*:nth-child(3) {
     transform: scale3d(0.5, 0.5, 1);
     margin-inline-start: -60px
 }

 .wc-btn-circle {
     text-align: center;
     width: 70px;
     height: 70px;
     font-weight: 500;
     font-size: 16px;
     line-height: 1.5;
     color: var(--black);
     border-radius: 100%;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: center;
     background-color: var(--white)
 }

 @media only screen and (max-width: 1199px) {
     .wc-btn-circle {
         width: 50px;
         height: 50px
     }
 }

 .wc-btn-circle:hover {
     background-color: var(--black);
     color: var(--white)
 }


 .wc-btn-circle {
     background-color: var(--white);
     width: 60px;
     height: 60px;
     font-size: 18px;
     color: var(--black);
     border: 1px solid var(--black)
 }

 .dark .wc-btn-circle {
     background-color: var(--black);
     color: var(--white);
     border-color: var(--white)
 }

 .wc-btn-circle:hover {
     background-color: var(--white);
     color: var(--black)
 }

 .dark .wc-btn-circle:hover {
     background-color: var(--black);
     color: var(--white);
     border-color: var(--white)
 }

 .wc-btn-circle i {
     transform: rotate(-45deg)
 }

 .wc-btn-primary {
     font-size: 15px;
     font-weight: 500;
     text-transform: uppercase;
     background-color: var(--white);
     color: var(--black);
     padding: 0 35px;
     border-radius: 40px
 }

 .dark .wc-btn-primary {
     background-color: var(--black);
     color: var(--white)
 }

 .wc-btn-primary:hover {
     background-color: var(--white);
     color: var(--black);
     border-color: var(--black)
 }

 .dark .wc-btn-primary:hover {
     background-color: var(--black);
     color: var(--white);
     border-color: var(--white)
 }

 .contact-area .wc-btn-circle {
     border-color: var(--white)
 }

 .wc-btn-group {
      display: flex;
      width: -moz-fit-content;
      width: fit-content
    }

    .wc-btn-group>*:nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -40px
    }

    .wc-btn-group>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group>*:nth-child(3) {
      transform: scale3d(1, 1, 1);
      margin-inline-start: 0
    }

    .wc-btn-group:hover>*:nth-child(1) {
      transform: scale3d(1, 1, 1);
      margin-inline-end: 0
    }

    .wc-btn-group:hover>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group:hover>*:nth-child(3) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-start: -40px
    }

    .wc-btn-circle {
      text-align: center;
      width: 40px;
      height: 40px;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--black);
      border-radius: 100%;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      background-color: var(--white)
    }

    @media only screen and (max-width: 1199px) {
      .wc-btn-circle {
        width: 40px;
        height: 40px
      }
    }

    .wc-btn-circle:hover {
      background-color: var(--black);
      color: var(--white)
    }

    .wc-btn-oval {
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--white);
      border: 1px solid #3f3a36;
      display: inline-block;
      padding: 32px 52px;
      text-align: center;
      transition: all .3s;
      border-radius: 50% 50% 50% 50%/50% 50% 50% 50%
    }

    .wc-btn-circle {
      background-color: var(--white);
      width: 40px;
      height: 40px;
      font-size: 18px;
      color: var(--black);
      border: 1px solid var(--black)
    }

    .dark .wc-btn-circle {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-circle:hover {
      background-color: var(--white);
      color: var(--black)
    }

    .dark .wc-btn-circle:hover {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-circle i {
      transform: rotate(-45deg)
    }

    .wc-btn-primary {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase;
      background-color: var(--white);
      color: var(--black);
      padding: 0 35px;
      border-radius: 40px
    }

    .dark .wc-btn-primary {
      background-color: var(--black);
      color: var(--white)
    }

    .wc-btn-primary:hover {
      background-color: var(--white);
      color: var(--black);
      border-color: var(--black)
    }

    .dark .wc-btn-primary:hover {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-normal {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase
    }

    .wc-btn-normal i {
      transform: rotate(-45deg)
    }

    .wc-btn-group {
      display: flex;
      width: -moz-fit-content;
      width: fit-content
    }

    .wc-btn-group>*:nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -60px
    }

    .wc-btn-group>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group>*:nth-child(3) {
      transform: scale3d(1, 1, 1);
      margin-inline-start: 0
    }

    .wc-btn-group:hover>*:nth-child(1) {
      transform: scale3d(1, 1, 1);
      margin-inline-end: 0
    }

    .wc-btn-group:hover>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group:hover>*:nth-child(3) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-start: -60px
    }