.logo-brand-img {
     height: 120px !important;
     width: auto !important;
     z-index: 99;
     position: absolute;
     top: 10%;

     border: 0px solid #3498db;
     border-radius: 50%;
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
     background-color: transparent;
 }

 .d2ms-logo-text {
     padding-left: 130px;
     line-height: 0.5rem;
 }

 .header-main .main-menu ul li .submenu li a {
     position: relative;
     z-index: 11;
     font-size: 16px;
     font-weight: 300;
     color: var(--header);
     padding: 0 25px;
     padding-bottom: 5px;
     padding-top: 5px;
     width: 100%;
     margin: 5px;
     border-left: 4px solid var(--theme);
     /* overflow-y: scroll; */
 }

 .header-main .main-menu ul li:hover>.submenu {
     visibility: visible;
     opacity: 1;
     transform: translateY(0px);
     /* height: 400px; */
     overflow: scroll;
 }

 .container-wide-header {
     max-width: 100%;
     /* padding-left: 40px; */
     /* padding-right: 40px; */
     margin-left: auto;
     margin-right: auto;
 }

 @media (min-width: 1200px) {
     .container-wide-header {
         max-width: 1350px;
     }
 }

 @media (min-width: 1600px) {
     .container-wide-header {
         max-width: 1600px;
     }
 }

 .header-3 .header-main .header-right .header-button {
     position: relative;
     margin-left: 0px;

 }

 .header-3 .header-main .header-right .header-button::before {
     width: 0px;
     height: 0px;
     border-top: none;
     border-right: none;
     content: "";
     /* left: -63px; */
     position: absolute;
     bottom: -5%;
     transform: rotate(-48deg);
     z-index: 9;
     overflow: hidden;
 }

 .header-3::before {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: var(--theme);
     left: 100%;
 }

 .header-main .main-menu ul li a {
     font-size: 13px;
 }

 .logo-text-moc1 {
     font-size: 13px;
 }

 .contact-info-area {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     background-color: #0F0D1C;
     padding: 40px 20px;
     border-radius: 12px;
     gap: 30px;
 }

 .contact-info-items {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     max-width: 400px;
     flex: 1 1 300px;
     text-align: left;
     word-break: break-word;
     background-color: #1A1826;
     padding: 20px;
     border-radius: 10px;
     transition: transform 0.3s ease;
 }

 .contact-info-items:hover {
     transform: translateY(-5px);
     background-color: #221f33;
 }

 .contact-info-items .icon svg {
     flex-shrink: 0;
     margin-top: 5px;
 }

 .contact-info-items .content h4 {
     margin: 0;
     line-height: 1.6;
     word-break: break-word;
     display: block;
     width: 100%;
     white-space: normal;
     color: white;
 }

 .contact-info-items .content p {
     margin: 0 0 6px;
     font-weight: bold;
     color: #f98600;
 }

 .about-logo img {
     max-width: 130px;
     margin-bottom: 20px;
 }

 .gt-social.style2 a {
     display: inline-block;
     margin: 0 8px;
     font-size: 18px;
     color: #f98600;
 }

 .gt-social.style2 a:hover {
     color: #ffffff;
 }

 .footer-layout .widget {
     margin-bottom: 30px;
 }

 .widget ul {
     list-style: none;
     padding: 0;
     margin-top: 12px;
 }

 .widget ul li {
     margin-bottom: 6px;
 }

 .widget ul li a {
     color: #bbbbbb;
     transition: color 0.3s;
 }

 .widget ul li a:hover {
     color: #f98600;
 }

 .widget strong {
     display: block;
     font-size: 18px;
     margin-bottom: 10px;
     color: #ffffff;
 }

 @media (max-width: 768px) {
     .contact-info-area {
         flex-direction: column;
         align-items: center;
     }

     .contact-info-items {
         justify-content: center;
     }
 }

 .w-per {
     width: 100% !important;
     max-width: none;
 }

 .hero-wrapper {
     position: relative;
     width: 100vw;
     height: 700px;
     overflow: hidden;
 }

 .hero-slide-card {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 100vw;
     height: 700px;
     /* max-height: 100vh; */
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0;
     z-index: 1;
     transition: opacity 0.8s ease-in-out;
 }

 .hero-slide-card.active {
     opacity: 1;
     z-index: 2;
 }

 .hero-pagination {
     position: absolute;
     bottom: 20px;
     left: 20px;
     right: 20px;
     z-index: 10;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .hero-pagination-left,
 .hero-pagination-right {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .hero-slide-number {
     color: white;
     font-size: 24px;
     /* จาก 16px เป็น 24px */
     font-weight: bold;
 }

 .hero-progress-container {
     width: 200px;
     /* จาก 120px เป็น 200px */
     height: 8px;
     /* จาก 4px เป็น 8px */
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     overflow: hidden;
 }

 .hero-progress-bar {
     height: 100%;
     background-color: white;
     width: 0%;
     transition: width 0.4s ease;
 }

 .hero-arrow {
     cursor: pointer;
     width: 40px;
     height: 40px;
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 50%;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .hero-arrow svg {
     width: 24px;
     height: 24px;
 }

 .hero-details {
     position: absolute;
     top: 50%;
     left: 60px;
     transform: translateY(-50%);
     z-index: 3;
     color: white;
     max-width: 600px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: left;
     padding-right: 20px;
 }

 .place-box .text {
     font-size: 14px;
     color: #ccc;
     margin-bottom: 8px;
     text-transform: uppercase;
 }

 .title-box-1 .title-1 {
     font-size: 48px;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .title-box-2 .title-2 {
     font-size: 36px;
     font-weight: 300;
     opacity: 0.8;
     margin-bottom: 15px;
 }

 .desc {
     font-size: 18px;
     line-height: 1.6;
     color: #ddd;
 }

 .hero-progress-container {
     width: 120px;
     height: 7px;
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 2px;
     overflow: hidden;
 }

 .hero-progress-bar {
     height: 100%;
     background-color: white;
     width: 0%;
     transition: width 0.4s ease;
 }

 .hero-slide-number {
     color: white;
     font-size: 25px;
 }


 .hero-pagination-left {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-left: 20px;
     /* ✅ เพิ่มระยะจากซ้าย */
 }

 .hero-pagination-right {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-right: 20px;
     /* ✅ เพิ่มระยะจากขวา */
 }


 @media (max-width: 768px) {
     .hero-slide-number {
         font-size: 20px;
         /* จาก 14px */
         font-weight: bold;
     }

     .hero-progress-container {
         width: 140px;
         /* จาก 80px */
         height: 6px;
         /* เพิ่มความสูง */
     }

     .hero-pagination {
         bottom: 12px;
         left: 12px;
         right: 12px;
     }

     .hero-arrow {
         width: 36px;
         height: 36px;
     }

     .hero-arrow svg {
         width: 18px;
         height: 18px;
     }

     .hero-slide-number {
         font-size: 14px;
     }

     .hero-progress-container {
         width: 80px;
     }



     .hero-details {
         left: 20px;
         padding: 20px;
         transform: translateY(-50%);
     }

     .title-box-1 .title-1 {
         font-size: 28px;
     }

     .title-box-2 .title-2 {
         font-size: 22px;
     }

     .desc {
         font-size: 14px;
     }
 }