html {
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', 'Prompt', sans-serif;
    overflow-x: hidden;
    font-weight: 300;
    background-color: #0f0f0f;
    /* พื้นหลังดำทึบ */
    color: #cccccc;
    /* ตัวหนังสือสีเทาเงิน */
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1a1a1a;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #8B0000;
    /* Scrollbar สีแดงเข้ม */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #a30000;
}

/*banner*/
.banner h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, calc(-100% - 15px));
    -webkit-transform: translate(-50%, calc(-100% - 15px));
    transform: translate(-50%, calc(-100% - 15px));
    font-size: 44px;
    font-weight: 600;
    color: #fff;
    z-index: 1;
    letter-spacing: 5px;
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px 10px #000000;
    /* เงาเข้มขึ้น */
    text-transform: uppercase;
    text-align: center;
    max-width: 90%;
}

.banner p {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, 15px);
    -webkit-transform: translate(-50%, 15px);
    transform: translate(-50%, 15px);
    font-size: 16px;
    text-shadow: 2px 2px 10px #000000;
    color: #ddd;
    z-index: 1;
    letter-spacing: 1px;
    text-align: center;
    max-width: 90%;
}

.banner a {
    color: #fff;
    text-decoration: none;
}

.banner img {
    width: 100%;
    position: relative;
    opacity: 0.8;
    /* ลดความสว่างรูป Banner ลงเพื่อให้ตัวหนังสือเด่น */
}

/*banner*/

.box_history {
    background-color: #1a1a1a;
    /* พื้นหลังกล่องประวัติสีเทาเข้ม */
    background-image: none;
    /* ลบรูปพื้นหลังเดิมออก */
    width: 58%;
    height: 100%;
    position: absolute;
    top: 0;
    padding: 60px 200px 144px 204px;
    border-right: 5px solid #8B0000;
    /* เส้นขอบแดง */
}

.box_history img {
    width: 100px !important;
    padding-bottom: 20px;

}

.text_video {
    padding-bottom: 60px;
}

.text_video_a a:hover {
    color: #ff3333;
}

.text_video_a a {
    color: #fff;
    text-decoration: none;
}

.text_video_a {
    padding-top: 10px;
}

.text_video h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    color: #fff;
}

.bor_img_sgs {
    border: 3.5px solid #8B0000;
    /* กรอบแดงเข้ม */
    margin: 0;
    margin-bottom: 60px;
}

.bor_img_sgs img {
    border-right: 3px solid #8B0000;
}

.textimg_sgs h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    color: #fff;
}

.textimg_sgs h4 {
    /*ปรับรูป iso ปี 2021 และ ขนาดตัวหนังสือระยะห่างต่างๆ*/
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    font-style: italic;
    padding: 0px 0px;
    letter-spacing: 1px;
    color: #ddd;
}

.vdo img {
    position: absolute;
    color: #000;
    font-weight: 600;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 5%;
}

/* --- ส่วนหัวข้อที่มีขีดเส้นใต้สีแดงเข้ม --- */
.text_trainning::after,
.text_ourproducts::after,
.text_history::after,
.our_history::after,
.text_general::after,
.text_readmore::after {
    content: "";
    height: 4px;
    width: 70px;
    display: inline-block;
    vertical-align: top;
    background-color: #8B0000;
    /* แดงเลือดหมูหรูหรา */
    box-shadow: 0px 0px 10px rgba(139, 0, 0, 0.5);
    /* เงาแดงเรืองแสงนิดๆ */
}

.text_trainning h2,
.text_ourproducts h2,
.text_history h4,
.our_history h2,
.text_general h2,
.text_readmore h3 {
    font-size: 36px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #fe0202;
    /* หัวข้อสีขาว */
}

.text_trainning {
    padding: 50px 0 10px;
    text-align: center;
}

.vdo_popup img,
.text-reviews img,
.img_history img,
.img_profess img {
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
}

.pad_our_products {
    padding: 0 0 130px;
}

/*panel-title*/
.panel_title_download h4 {
    font-weight: bold;
    color: #fff;
}

.panel_title_download {
    padding: 50px 0 0;
}

.panel-heading.active .panel-title>a {
    background: #1a1a1a;
    color: #8B0000;
    /* แดงเข้ม */
    font-weight: 600;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 0.5px;
    border: 1px solid #8B0000;
}

.panel-default {
    margin-bottom: 10px;
    background-color: #1a1a1a;
    border: none;
}

.text_panel i {
    color: #8B0000;
    padding-right: 10px;
    font-size: 17px;
}

.text_panel {
    padding: 0;
    list-style: none;
    color: #ccc;
    padding-left: 20px;
}

.text-product p {
    text-align: center;
}

.text_download p {
    padding: 5px 0 10px;
    margin: 0;
    line-height: 1.8;
}

.panel-title>a,
.panel-title>a:active {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    border: none;
    color: #fff;
    background-color: #222;
    /* สีพื้นปุ่ม Download */
    font-weight: 600;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333;
    transition: 0.3s;
}

.panel-title>a:hover {
    background-color: #8B0000;
}

.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.panel-heading a:before {
    font-family: 'FontAwesome';
    content: "\f107";
    float: right;
    transition: all 0.5s;
    color: #fff;
}

.wrapper {
    width: 100%;
    padding-bottom: 60px;
}

.panel-heading {
    padding: 0;
    border: 0;
}

/* ปุ่ม Applying */
.applying a {
    border: 2px solid #8B0000;
    color: #fff;
    background-color: #000;
    display: inline-block;
    padding: 0 17px;
    height: 34px;
    line-height: 33px;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 13px;
    border-radius: 35px;
    font-weight: 600;
}

.applying a:hover {
    background-color: #8B0000;
    border: 2px solid #8B0000;
    color: #fff;
    text-decoration: none;
}

.applying {
    position: absolute;
    right: 15px;
}

.panel-body h6 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}

.panel-body {
    padding: 15px;
    position: relative;
    background-color: #111;
}

.taxt_career h5 {
    color: #8B0000;
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 10px;
}

.taxt_career h4 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.taxt_career {
    padding-top: 50px;
}

.icon-career {
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 39px;
    padding-bottom: 50px;
    margin: 0;
}

.icon-career img {
    width: 2.5%;
    filter: invert(1);
    /* กลับสีไอคอนให้เป็นขาว */
}

.text_career h5 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.text_career h6 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ccc;
}

.bg_text_career {
    background-color: #1a1a1a;
}

.text_career {
    padding-top: 50px;
}

.our_products {
    text-align: center;
    padding: 50px 0 20px;
}

.our_products::after {
    background-color: #8B0000;
    /* แดงเข้ม */
}

/*tab*/
.tabs-gallery {
    margin: 0 auto;
}

.tab-pane img {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
}

.line-gallery {
    color: #fff;
    padding-top: 10px;
}

.nav-link {
    padding: 4px 0 4px;
}

.nav-tabs {
    border: none;
}

.loadmore {
    text-align: center;
}

.loadmore a {
    text-decoration: underline;
    color: #fff;
}

.nav-tabs .nav-item {
    margin-bottom: 0px;
    margin-right: 5px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #8B0000;
    /* Active Tab สีแดง */
    background: none;
    font-weight: 600;
    border-bottom: 2px solid #8B0000;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.nav-tabs .nav-link {
    color: #aaa;
    font-size: 14px;
    border-radius: 35px;
    width: 100%;
    text-align: left;
}

.nav-tabs .nav-link:hover {
    color: #fff;
}

.box_products {
    margin: 10px;
    background-color: #1a1a1a;
    /* กล่องสินค้าดำ */
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
}

.text_products {
    padding: 20px;
    text-align: center;
}

.text_products h4 {
    font-size: 20px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.text_products h5 {
    font-size: 18px;
    margin: 5px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ccc;
}

.text_products h3 {
    margin: 0;
    color: #8B0000;
    /* ราคาสีแดงเข้ม */
    font-size: 22px;
}

.text_products h3 span {
    color: #666;
    text-decoration: line-through;
    font-size: 18px;
}

.bg_product {
    background-color: #0f0f0f;
    background-image: none;
}

.bg_gallery {
    background-color: #000;
    background-image: none;
    padding: 60px 0;
}

.tab-content {
    padding-bottom: 55px;
}

.pad_training {
    padding-bottom: 30px;
}

.box_readmore img {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #333;
}

.box_readmore h6 {
    text-align: center;
    padding-bottom: 30px;
    color: #fff;
}

.pad_img_fmc {
    padding: 50px 0;
}

.form-prodict {
    /* 70% clipped long brand names (e.g. PARKER ENGINEERED POLYMER) under the arrow */
    width: 100%;
    padding: 8px 30px 8px 12px;
    outline: none;
    font-size: 16px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
}

.text_readmore {
    text-align: center;
}

.text_ptext p {
    text-align: center;
    padding-bottom: 20px;
    color: #ccc;
}

.pad_projects {
    padding-top: 50px;
}

.modal-body a {
    background-color: #8B0000;
    padding: 3px 15px;
    color: #fff;
    text-decoration: none;
}

.modal-content {
    /* !important restores the intended dark modal — Bootstrap 4.6.2's
       .modal-content{background:#fff} was turning it white, leaving the
       white catalog text unreadable. */
    background-color: #1a1a1a !important;
    color: #fff !important;
}
.modal-content h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; }
.modal-body p { color: #eaeaea !important; -webkit-text-fill-color: #eaeaea !important; }
.modal-body a[download] { color: #fff !important; -webkit-text-fill-color: #fff !important; }

.t_right {
    text-align: right;
}

.button_website i {
    padding-left: 10px;
}

.button_download i {
    padding-right: 10px;
}

/* ปุ่ม Download / Website สีแดง-ดำ */
.button_download a {
    background-color: #000;
    border: 1px solid #8B0000;
    color: #fff;
    display: inline-block;
    padding: 3px 16px;
    height: 39px;
    line-height: 33px;
    transition: 0.5s;
    font-size: 16px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.button_download a:hover {
    background-color: #8B0000;
    border: 1px solid #8B0000;
    color: #fff;
    text-decoration: none;
}

.button_website a:hover {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
    text-decoration: none;
}

.button_website a {
    background-color: #8B0000;
    border: 1px solid #8B0000;
    color: #fff;
    display: inline-block;
    padding: 3px 16px;
    height: 39px;
    line-height: 33px;
    transition: 0.5s;
    font-size: 16px;
    width: 100%;
    text-align: center;
}

.pad_button {
    padding: 30px 0 50px;
}

.text_history h4 {
    font-size: 30px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #fff;
    text-align: left;
}

.pad_history {
    padding: 50px 0;
}

.img_history img {
    width: 100%;
}

.box_imgcompany {
    margin-top: -130px;
    /* ดึงกล่องรูป3รูปขึ้นไปทับแบนเนอร์ในหน้า company */
    position: relative;
    z-index: 10;
    /* บังคับให้อยู่ชั้นบนสุด */
}

.box_imgcompany img {
    width: 100%;
    border: 10px solid #1a1a1a;
    /* เปลี่ยนขอบรูปบริษัทเป็นสีเทาเข้ม */
}

.our_history {
    padding-top: 40px;
    /* ลดระยะห่างลง เพราะรูปไม่ลอยทับแล้ว */
    text-align: center;
    margin: 0 auto;
}

.bg_general {
    background-color: #141414;
    /* เปลี่ยนพื้นหลังทั่วไปเป็นดำด้าน */
    padding-bottom: 30px;
}

.img_profess img {
    width: 100%;
}

.our_profess {
    padding: 80px 0;
}

.our_profess p {
    font-size: 20px;
    color: #ccc;
}

.our_profess h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    color: #fff;
}

.bg_profess {
    background-color: #1a1a1a;
    /* เปลี่ยนพื้นหลัง Profess เป็นดำ */
    border-top: 3px solid #8B0000;
    margin-bottom: 60px;
}

.text_imgcompany p {
    text-align: center;
    padding-bottom: 20px;
    line-height: 23px;
}

.text_imgcompany {
    padding-bottom: 40px;
}

.text_imgcompany h6 {
    line-height: 23px;
    color: #fff;
}

.text_imgcompany img {
    margin-bottom: 30px;
}

.box_general {
    text-align: center;
    background-color: #1a1a1a;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    padding: 30px 0;
    border-radius: 6px;
    height: 217px;
    /* <--- ตัวการที่ทำให้กล่องเพี้ยนอยู่ตรงนี้ครับ! */
    margin-bottom: 30px;
    border: 1px solid #333;
}


.box_general:hover {
    border-color: #8B0000;
    /* ชี้แล้วขอบแดง */
}

/*ปรับสีไอคอนในหน้า company*/
.box_general img {
    padding-bottom: 10px;
    width: 60px;
    filter: invert(54%) sepia(90%) saturate(6744%) hue-rotate(10deg) brightness(101%) contrast(106%);
}

.box_general p {
    margin-bottom: 2px;
    color: #bbb;
    font-size: 15px;
}

.box_general h5 {
    font-weight: 600;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.5px;
    margin: 0;
    color: #fff;
}

.text_general {
    padding: 50px 0 15px;
    text-align: center;
    margin: 0 auto;
}

/*boxhome (เปลี่ยนจากกล่องเหลืองเป็นกล่องโทนดำหรู) */

.box img {
    width: 45px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    /* ไอคอนสีขาว */
}

.box p {
    font-size: 13px;
    /*ตัวอักษรของ box 3 อัน discover more*/
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box h5 {
    font-weight: 600;
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}

.box {
    text-align: center;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.bg_box {
    background-image: none;
    background-color: #0f0f0f;
}

.bg_footer {
    background-image: none;
    background-color: #000;
    border-top: 5px solid #8B0000;
}

.padding_box {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

@media (max-width: 767px) {
    .padding_box {
        flex: none;
        width: 100%;
    }
}

/* ปรับสีกล่อง Discover, Products, Contact ให้เป็น Dark Theme */
.discover {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-bottom: 3px solid #8B0000;
    border-radius: 15px;
}

.products {
    background-color: #222;
    border: 1px solid #333;
    border-bottom: 3px solid #8B0000;
    border-radius: 15px;
}

.contactus {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-bottom: 3px solid #8B0000;
    border-radius: 15px;
}

.button_box a:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

.button_box a {
    background-color: #8B0000;
    /* ปุ่มสีแดงเข้ม */
    border: none;
    color: #fff;
    display: inline-block;
    padding: 0px 16px;
    height: 27px;
    line-height: 29px;
    transition: 0.5s;
    font-size: 13px;
}

.padding_boxrow {
    padding: 60px 15px;
    display: flex;
    flex-wrap: wrap;
}

/* --- Adjustments for Thai Language (ขนาดตัวอักษรภาษาไทย) --- */
html[lang="th"] .mainmenu li a,
html[lang="th"] .cd-main-nav li a {
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.8px !important;
    padding: 15px 22px !important;
    /* เพิ่มระยะห่างข้างและใช้ฟอนต์ Prompt เพื่อให้ยืดตัวกว้างเท่าภาษาอังกฤษ */
    font-family: 'Prompt', sans-serif !important;
}

html[lang="th"] .box h5 {
    font-size: 23px !important;
    font-family: 'Prompt', 'Bai Jamjuree', sans-serif !important;
}

html[lang="th"] .box p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-family: 'Prompt', 'Bai Jamjuree', sans-serif !important;
}

html[lang="th"] .button_box a {
    font-size: 15px !important;
    font-family: 'Prompt', 'Bai Jamjuree', sans-serif !important;
}

/*boxhome*/

.text_ourproducts {
    text-align: center;
    padding: 0 0 10px;
}

.text_ourproducts h2 {
    font-size: 36px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #fff;
}

.text_ourproducts span {
    color: #8B0000;
}

.img_customer img {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #95959538;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

.form-email:focus {
    color: #fff;
    background: none;
    outline: 0;
    box-shadow: none;
    border-bottom: 1.5px solid #8B0000;
}

.form-email:hover {
    background: none;
}

.form-email {
    display: block;
    width: 100%;
    padding: .375rem 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    outline: none;
    background: none;
    background-clip: padding-box;
    border: none;
    border-bottom: 1.5px solid #666;
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.textform-email h5 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.submit:focus {
    outline: none;
}

.submit {
    border: none;
    background-color: #8B0000;
    /* ปุ่ม Subscribe สีแดง */
    color: #fff;
    padding: 7px 15px;
    width: 100%;
    cursor: pointer;
}

.submit:hover {
    background-color: #a30000;
}

.bg_form-email {
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 30px 0;
    margin: 50px 0 60px;
}

/*ขยับคำพูดInnovative and competitive solutions<br>to cater for all offshore requirements*/
.box_vertical {
    position: absolute;
    right: 150px;
    bottom: 280px;
    color: #fff;
}

.find_out_more a:hover {
    border: 2px solid #8B0000;
    background-color: #8B0000;
    color: #fff;
    text-decoration: none;
}

.find_out_more a {
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    padding: 0 12px;
    height: 34px;
    line-height: 33px;
    text-transform: uppercase;
    transition: 0.5s;
    font-size: 14px;
    border-radius: 6px;
}

.pad_contact {
    padding-left: 0;
}

.map-contact {
    padding: 10px 0 0;
}

.text-form-contact p {
    margin-bottom: 5px;
    color: #ccc;
}

.text-form-contact span {
    color: #8B0000;
    font-weight: 600;
}

.information {
    padding-top: 50px;
}

.information h4 {
    font-weight: 600;
    position: relative;
    padding-left: 45px;
    margin: 0;
    padding-bottom: 10px;
    font-size: 18px;
    color: #fff;
}

.information h4:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 30px;
    height: 3px;
    background-color: #8B0000;
    padding-right: 20px;
}

.padding_icon_contact {
    padding: 15px 0 0;
}

.text_map p {
    margin: 0;
    font-size: 14px;
    color: #aaa;
}

.form-contact {
    border: none;
    border-radius: 0px;
    background-color: #222;
    font-size: 15px;
    width: 100%;
    padding: 8px 5px;
    outline: 0;
    color: #fff;
    margin-bottom: 20px;
    border: 1px solid #444;
}

.send-contact {
    padding: 10px 0 60px;
}

.send-contact a {
    background: #8B0000;
    padding: 10px 30px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.send-contact a:hover {
    background: #fff;
    color: #000;
}

/*footer*/

.bg_copyright {
    background-color: #050505;
    margin-top: 1px;
    padding: 10px 0;
    color: #666;
    text-align: center;
    font-size: 14px;
}

.padding_footer {
    padding: 40px 0 35px;
}

.text_footer {
    color: #fff;
}

.text_footer h5 {
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 13px;
    color: #fff;
}

.text_footer::after {
    content: "";
    height: 3px;
    width: 35px;
    display: inline-block;
    vertical-align: top;
    background-color: #8B0000;
    /* ขีดเล็กๆใน Footer เป็นสีแดง */
}

.ultext_footer i {
    padding-right: 10px;
    color: #8B0000;
    margin-top: 3px;
    flex-shrink: 0;
}

.ultext_footer li {
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
    margin-bottom: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.ultext_footer li:hover {
    color: #ed1c24 !important;
}

.contact-link {
    color: #cccccc !important;
    text-decoration: none !important;
    transition: 0.3s ease;
    line-height: 1.6;
}

/* ตอนเอาเมาส์ชี้ ให้เปลี่ยนเป็นสีแดงและขีดเส้นใต้ */
.contact-link:hover {
    color: #ed1c24 !important;
    text-decoration: underline !important;
}

.ultext_footer {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #ccc !important;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.social a {
    padding-right: 8px;
    color: #fff;
}

.social a:hover {
    color: #8B0000;
}

.pad_footer {
    padding-left: 0;
}

/* Responsive (คงไว้เหมือนเดิมแต่ปรับสีตาม theme) */
@media (max-width: 1199px) {
    /* ... (Code เดิมของคุณ) ... */
    /* สามารถคง code responsive ไว้ได้เลย เพราะมันจะอิงสีจาก Class ด้านบน */
}

/* ... (Code Responsive อื่นๆ) ... */





/* =========================================
   LIQUID GLASS (RED/BLACK EDITION) - FIXED
   ========================================= */

/* --- 1. พื้นหลังโทน ดำ-แดง (Black & Red Theme) --- */
body {
    /* พื้นหลังดำ ไล่เฉดไปแดงเลือดหมูเข้มๆ */
    background: linear-gradient(135deg, #000000 0%, #1a0505 50%, #2b0000 100%) fixed !important;
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
}

/* สร้าง Class กระจก (ปรับเป็นโทนมืด) */
.glass-panel,
.service_section .box,
.product_section .box,
.client_section .box,
.dropdown-menu {
    background: rgba(20, 0, 0, 0.6) !important;
    /* พื้นหลังกระจกสีดำแดงจางๆ */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;

}


/* ปรับสีหัวข้อเป็นสีขาว */
h1,
h2,
h3,
h4,
h5,
h6,
.heading_container h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

p {
    color: #eeeeee !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

p span {
    color: #eeeeee !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}


.navbar-nav .nav-link {
    color: #ffffff !important;
}


/* --- 3. แก้ไขปุ่มกด (Buttons) ให้ตัวหนังสืออยู่ตรงกลางเป๊ะๆ --- */

.button_box a,
.slider_section .btn-box a,
.contact_section button {
    /* ใช้ Flexbox จัดกึ่งกลาง แก้ปัญหาตัวหนังสือตก */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(237, 28, 36, 0.1) !important;
    /* พื้นแดงจางๆ */
    backdrop-filter: blur(5px);

    color: #fff !important;
    border-radius: 50px !important;

    /* ปรับขนาดปุ่ม */
    height: 45px !important;
    /* กำหนดความสูงแน่นอน */
    padding: 0 40px !important;
    /* Padding ซ้ายขวา (บนล่างเป็น 0 เพราะใช้ height คุมแล้ว) */

    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(237, 28, 36, 0.2);
    transition: all 0.4s ease;
    text-decoration: none;
    /* ลบขีดเส้นใต้ */
}

/* Effect ปุ่มเรืองแสงเมื่อชี้ */
.button_box a:hover,
.slider_section .btn-box a:hover,
.contact_section button:hover {
    background: #ff9900 !important;
    /* พื้นหลังแดงเต็ม */
    color: #fff !important;

    transform: scale(1.05);
    /* ขยายใหญ่ขึ้นนิดนึง */
}


/* --- 4. ปรับแต่งส่วนอื่นๆ ให้เข้าธีม --- */

/* กล่อง Service ไอคอน */
.service_section .box .img-box {
    background: linear-gradient(45deg, #ed1c24, #8a0b0b);
    /* แดงไล่สี */
    box-shadow: 0 5px 15px rgba(237, 28, 36, 0.4);
}

/* ฟอร์มติดต่อ */
.contact_section input,
.contact_section textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.contact_section input:focus,
.contact_section textarea:focus {
    border-color: #ed1c24 !important;
    box-shadow: 0 0 10px rgba(237, 28, 36, 0.5) !important;
}

/* ลบพื้นหลังสีขาวเดิมๆ ออกให้หมด */
.service_section,
.about_section,
.product_section,
.project_section,
.client_section,
.contact_section,
.footer_section,
.info_section {
    background-color: transparent !important;
}

/* Footer กระจก */
.footer_section .container {
    background: rgba(0, 0, 0, 0.8);
    border-top: 3px solid #ed1c24;
}

.info_section h4 {
    color: #ff9900 !important;
}

/* ========================================= */



/* =========================================
   LIQUID GLASS: CLEAN & COOL EDITION
   (Original Layout Preserved + Glass Skin)
   ========================================= */

/* --- 1. พื้นหลังเว็บ (Black & Red Deep Ocean) --- */
body {
    /* พื้นหลังดำไล่เฉดแดงเลือดหมู ดูลึกลับ น่าค้นหา */
    background: linear-gradient(135deg, #050505 0%, #1a0000 50%, #2b0000 100%) fixed !important;
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
}

/* --- 2. แก้ไขส่วนเมนู (Navbar) ให้เป็นกระจก แต่โครงสร้างเดิม --- */

/* 2.1 ตอนเริ่มต้น (บนสุด) */
.wrap_mainmenu {
    background: transparent !important;
    /* พื้นหลังใส โชว์โลโก้ใหญ่ */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}





/* --- ล้างค่าขอบและเงาเก่าออก (Force Clean) --- */
.mainmenu li a,
.mainmenu li a:hover,
.mainmenu li a.active {
    border: none !important;
    /* ลบเส้นขอบทุกด้าน */
    box-shadow: none !important;
    /* ลบเงาเรืองแสง */
    background: transparent !important;
    /* ลบแถบสีพื้นหลัง */
    outline: none !important;
}

/* --- 3. ส่วนเนื้อหา: กล่องกระจก (Glass Panels) --- */
/* เปลี่ยนกล่อง Services, Products, Projects ให้เป็นกระจก */
.service_section .box,
.product_section .box,
.client_section .box,
.about_section .img-box img {
    background: rgba(255, 255, 255, 0.1) !important;
    /* พื้นหลังจางๆ */
    border-radius: 20px !important;
    border: 1px solid rgba(237, 28, 36, 0.3);
    /* ขอบแดงจางๆ */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    color: #fff;

}

/* Effect กล่องลอยขึ้นเมื่อชี้ */
.service_section .box:hover,
.product_section .box:hover {
    transform: translateY(-10px);
    border-color: #ed1c24;
    /* ขอบแดงเข้ม */
    box-shadow: 0 15px 40px rgba(237, 28, 36, 0.2);
}

/* ปรับสีหัวข้อต่างๆ */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

p {
    color: #eeeeee !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

p span {
    color: #eeeeee !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}


/* --- 4. ปุ่มกด (Buttons) สไตล์แฟชั่น --- */
.button_box a,
.slider_section .btn-box a,
.contact_section button {
    background: transparent !important;
    border: 2px solid #ed1c24 !important;
    /* ขอบแดง */
    color: #fff !important;
    border-radius: 50px !important;
    padding: 10px 35px !important;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(237, 28, 36, 0.2);



    /* จัดกลาง */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Effect ปุ่ม: เทสีแดงเมื่อชี้ */
.button_box a:hover,
.slider_section .btn-box a:hover,
.contact_section button:hover {
    background: #ed1c24 !important;
    color: #fff !important;
    box-shadow: 0 0 25px rgba(237, 28, 36, 0.8);
    transform: scale(1.05);
}


/* --- 5. ฟอร์มติดต่อ (Glass Input) --- */
.contact_section input,
.contact_section textarea,
.form-search {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.contact_section input:focus,
.contact_section textarea:focus {
    border-color: #ed1c24 !important;
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.4) !important;
}

/* --- 6. Footer --- */
.footer_section {
    background: rgba(0, 0, 0, 0.8) !important;
    border-top: 3px solid #ed1c24;
    margin-top: 50px;
}

/* แก้ไข Z-Index ของโลโก้เดิม ให้มั่นใจว่าอยู่บนสุด */
.text-logo {
    z-index: 2000;
    position: absolute;
    /* บังคับตำแหน่งเดิม */
}


/* =========================================
   CYBER SLASH: TOP BAR ONLY ⚡
   (Dropdowns remain normal)
   ========================================= */

/* 1. ปรับเฉพาะ "เมนูแถบบนสุด" (ใช้เครื่องหมาย > เพื่อเจาะจงเฉพาะตัวแม่) */
.mainmenu>li>a {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    /* ห้ามมน เพื่อให้รับกับทรงเฉียง */
    padding: 10px 30px !important;
    margin: 0 5px !important;

    color: #e0e0e0 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    overflow: visible;
    text-decoration: none;
    display: block;
}




/* 3. เอฟเฟกต์เส้นพลังงานวิ่งด้านล่าง (แถบบนเท่านั้น) */
.mainmenu>li:not(.language)>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #ed1c24;
    /* สีแดง */

    transform: skewX(-20deg);
    /* เอียงตาม */
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #ed1c24;
    /* แสงนีออน */
}

/* 4. เมื่อเอาเมาส์ไปชี้ (Hover) - แถบบน */
.mainmenu>li:not(.language)>a:hover {
    color: #fff !important;
    transform: translateY(-3px);
    /* ลอยขึ้นนิดนึง */
}

/* เปลี่ยนสีพื้นหลังกรอบเฉียง */
.mainmenu>li:not(.language)>a:hover::before {
    background: rgba(237, 28, 36, 0.9);
    /* แดงเข้ม */
    border-color: #ed1c24;
    transform: skewX(-20deg) scale(1.1);
    /* ขยายใหญ่ขึ้นแบบเอียงๆ */
    box-shadow: 0 0 20px rgba(237, 28, 36, 0.6);
}

/* เส้นวิ่งเต็ม */
.mainmenu>li:not(.language)>a:hover::after {
    width: 100%;
}


/* 5. >> ป้องกันไม่ให้เมนูย่อย (Dropdown) เพี้ยน << */
.dropdown-menu {
    border-radius: 10px !important;
    /* เมนูย่อยกลับมามนปกติ */
    transform: none !important;
    /* ห้ามเอียง */
    margin-top: 15px !important;
    background: rgba(10, 0, 0, 0.95) !important;
    border: 1px solid rgba(255, 50, 50, 0.3) !important;
}

.dropdown-item {
    transform: none !important;
    /* ลิงก์ข้างในห้ามเอียง */
    border: none !important;
    /* ลบเส้นขอบแปลกๆ */
}

/* เมนูย่อยชี้แล้วเป็นแถบธรรมดา */
.dropdown-item:hover {
    background-color: rgba(237, 28, 36, 0.8) !important;
    color: #fff !important;
}

/* ========================================= */

/* --- Premium Liquid Glass Buttons --- */
.button_box a,
.submit,
.send-contact a,
.find_out_more a {


    /* ขอบปกติ: สีขาวจางๆ ให้ดูเหมือนขอบแก้ว */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;

    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 55px !important;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* เงาด้านในให้ปุ่มดูมีมิติ */
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05),
        0 5px 15px rgba(0, 0, 0, 0.3) !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
}

/* --- จังหวะที่เอาเมาส์ไปชี้ (Hover) --- */
.button_box a:hover,
.submit:hover,
.send-contact a:hover,
.find_out_more a:hover {
    /* เปลี่ยนขอบเป็นสีแดงตามที่คุณต้องการ */
    border-color: #ed1c24 !important;

    /* เรืองแสงสีแดงจางๆ รอบปุ่ม */
    box-shadow: 0 0 20px rgba(237, 28, 36, 0.4),
        inset 0 0 10px rgba(237, 28, 36, 0.2) !important;

    /* ยกปุ่มขึ้นนิดนึงให้ดูมี Interaction */
    transform: translateY(-3px);
    background: rgba(237, 28, 36, 0.1) !important;
    /* ฉาบสีแดงใสๆ ลงในเนื้อแก้ว */
}


/* --- Floating Liquid Glass Navbar --- ปรับแถบเมนูบาร์ตอนเลื่อนขึ้นสุด*/
.mainmenu-align {
    background: rgba(255, 255, 255, 0.03) !important;
    /* กระจกใสมาก */
    backdrop-filter: blur(50px) !important;
    /* ความเบลอระดับพรีเมียม (ลดรัศมีเพื่อ 60fps บนเครื่องอ่อน) */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* ขอบกระจกบางๆ */
    border-radius: 100px !important;
    /* ความโค้งมนระดับสูงสุด */
    margin: 8px auto !important;
    /* ให้เมนูลอยขึ้นจากขอบบน */
    width: 120% !important;
    /* ขยายแถบบาร์เมนูให้ยาวขึ้น */
    max-width: 1400px !important;
    padding: 10px 15px !important;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    left: 50%;
    transform: translateX(-50%);
}

/* --- เมื่อเลื่อนจอลงมา (Sticky Mode) ชิดขอบบนสุด เต็มความกว้าง --- */
.wrap_mainmenu.sticky .mainmenu-align {
    /* === ตำแหน่ง: ชิดขอบบนสุดเลย ไม่มีช่องว่าง === */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;

    /* === รูปทรง: ไม่มีมุมโค้ง ชิดขอบตรงๆ === */
    border-radius: 0 !important;

    /* === สี: Dark Glass พรีเมียม === */
    background: rgba(14, 14, 16, 0.88) !important;
    /* lighter blur + no saturate() = much cheaper to composite each frame while sticky */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    /* === เส้นขอบล่างสีแดงบางๆ เป็น accent === */
    border: none !important;
    border-bottom: 1px solid rgba(237, 28, 36, 0.35) !important;

    /* === เงา === */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;

    /* === Transition === */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* === Padding === */
    padding: 6px 30px !important;
    z-index: 10000 !important;
}

/* ปรับสีตัวอักษรให้เข้มขึ้นเพื่อให้อ่านง่ายบนพื้นสว่าง */
.wrap_mainmenu.sticky .mainmenu li a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ปรับตำแหน่งโลโก้ในแถบเมนู */
.logostick img {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
    margin-right: 20px;
}

/* ปรับเมนูลิสต์ให้ดูโปร่ง */
.mainmenu li a {
    background: transparent !important;
    border: none !important;
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    letter-spacing: 1.2px !important;
    padding: 10px 20px !important;
    transition: 0.3s;
}

/* Hover เมนู: ขอบแดงเรืองแสงแบบปุ่มเป๊ะๆ */
.mainmenu li a:hover,
.mainmenu li a.active {
    border: none !important;
    /* ลบเส้นขอบทุกด้าน */
    box-shadow: none !important;
    /* ลบเงาเรืองแสง */
    background: transparent !important;
    /* ลบแถบสีพื้นหลัง */
    outline: none !important;
}

/* ปรับ Dropdown Menu ให้เป็นกระจกมนๆ เข้าชุดกัน */
.dropdown-menu {
    background: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 15px !important;
    margin-top: 15px !important;
}

/* สะพานเชื่อมล่องหน ป้องกันเมาส์หลุดออกจากช่องว่างระหว่างเมนูกับดรอปดาวน์ */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent !important;
}

/* --- เมนูแบบไม่มีขอบ เน้นเส้นใต้ขยายตัว --- */
.mainmenu li a {
    position: relative;
    /* เพื่อให้เส้นใต้เกาะไปกับตัวเมนู */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 10px 15px !important;
    /* ระยะห่างปกติที่คุณโอเคแล้ว */
    transition: color 0.1s ease;
    display: block;
}

/* สร้างเส้นขีดเริ่มต้น (ซ่อนไว้โดยให้ความกว้างเป็น 0) */
.mainmenu li a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    /* ระยะห่างของเส้นจากตัวอักษร */
    left: 50%;
    /* เริ่มขยายจากตรงกลาง */
    width: 0;
    height: 2px;
    /* ความหนาของเส้นขีด */
    background-color: #ed1c24;
    /* สีแดง Syntex */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* จังหวะเลื่อนขยายแบบนุ่มนวล */
    transform: translateX(-50%);
}

/* เมื่อเอาเมาส์ไปชี้: ให้เส้นขยายความกว้างออกมา */
.mainmenu li a:hover::after,
.mainmenu li a.active::after {
    width: 70%;
    /* ให้เส้นขยายออกมา 70% ของความกว้างเมนู (ปรับได้ตามชอบ) */
}

/* เปลี่ยนสีตัวอักษรตอน Hover เล็กน้อย */
.mainmenu li a:hover {
    color: #ffffff !important;
    background: transparent !important;
    /* มั่นใจว่าไม่มีแถบสีแดงที่พื้นหลัง */
}



/* =========================================
   LIQUID GLASS SEARCH BAR (ปรับให้นุ่มเหมือนน้ำ)
   ========================================= */

/* 1. ปรับแต่งช่อง Search */
.form-search {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    /* เพิ่มความเบลออีกนิดให้ดูละมุน */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px !important;
    color: #fff !important;
    padding: 4px 20px !important;
    width: 160px;
    outline: none !important;

    /* [จุดที่แก้] ปรับ Animation ให้สมูทขึ้น (ช้าลง + มีแรงหน่วง) */
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    /* cubic-bezier ตัวนี้จะทำให้ขยับแบบ "เด้งดึ๋ง" นิดๆ ตอนปลายเหมือนหยดน้ำ */

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 2. Hover Effect: ลอยขึ้นแบบนุ่มๆ ไม่กระโชกโฮกฮาก */
.form-search:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;

    /* [จุดที่แก้] ลดระยะการขยับลง แต่ให้ยืดออกด้านข้างแทนนิดหน่อย */
    transform: translateY(-2px) scale(1.05);
    width: 235px;
    /* ยืดออกให้เหมือนของเหลวไหลออกข้าง */

    box-shadow: 0 15px 30px rgba(0, 0, 0, 1.25),
        0 0 20px rgba(255, 255, 255, 0.15);
    /* แสงออร่านุ่มๆ */
}

/* 3. Focus Effect: ตอนพิมพ์ */
.form-search:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #fb3f00 !important;
    width: 250px;
    /* ยืดออกกว้าง */
    transform: translateY(0) scale(1);
    /* กลับมาตั้งหลัก */
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.3);
    padding-left: 25px !important;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
    /* ตอนพิมพ์ให้สมูทแบบเร็วๆ */
}

/* --- การ์ดตรง Our Product --- */
.glass-product-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /*gap ช่องว่างระหว่างกรอบใสตรง Our Product*/
    padding: 40px 0;
}

@media (min-width: 1200px) {
    .glass-product-grid {
        width: 120% !important;
        max-width: 120% !important;
        margin-left: -10% !important;
        /* จัดกึ่งกลางคอนเทนเนอร์กริดทั้งหมด */
    }
}

/*ปรับขนาดขอบใสตรง Our Product ตรง padding*/
.glass-product-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px;
    padding: 48px !important;
    /* เพิ่มขึ้น 20% จาก 40px */
    width: 100% !important;
    /* ให้เต็มขอบเขตของคอนเทนเนอร์กริดที่ขยายกว้างแล้ว */
    max-width: 100% !important;
    margin: 20px auto !important;
    /* เพิ่มระยะห่างบนล่างเล็กน้อยให้สมดุล */

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

.glass-product-card:hover {
    /* lift only (no scale) so the full-width card never grows past the grid edge */
    transform: translateY(-10px);
    border-color: #ed1c24 !important;
    /* ขอบแดงตอนชี้เข้าธีมปุ่ม */
    box-shadow: 0 20px 40px rgba(237, 28, 36, 0.15);
}

/*ขนาดรูปตรง Our Product*/
.product-img-box {
    flex: 0 0 75% !important;
    max-width: 75% !important;
}

.product-img-box img {
    width: 100% !important;
    filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.product-info-box {
    flex: 1;
    padding: 24px 48px !important;
    /* ใหญ่ขึ้น 20% จาก 20px 40px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #fff;
}

.product-info-box h4 {
    font-size: 31px !important;
    /* ใหญ่ขึ้น 20% จาก 26px */
    font-weight: 600;
    margin-bottom: 15px;
}

.product-info-box p {
    font-size: 18px !important;
    /* ใหญ่ขึ้น 20% จาก 15px */
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ป้องกันปุ่มรายละเอียดตัดคำขึ้นบรรทัดใหม่ */
.product-info-box .button_box a {
    white-space: nowrap !important;
    font-size: 18px !important;
    /* ใหญ่ขึ้น 20% จาก 15px */
}

@media (max-width: 1199px) {
    .glass-product-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 30px !important;
        width: 100% !important;
        /* คืนค่าขนาดปกติบนแท็บเล็ต/มือถือ เพื่อไม่ให้ล้นหน้าจอ */
        max-width: 100% !important;
    }

    .product-img-box {
        flex: none !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }

    .product-info-box {
        padding: 0 !important;
        text-align: center !important;
        align-items: center !important;
    }

    .product-info-box h4 {
        font-size: 26px !important;
        /* คืนค่าขนาดปกติบนแท็บเล็ต/มือถือ */
        margin-bottom: 12px;
    }

    .product-info-box p {
        font-size: 15px !important;
        /* คืนค่าขนาดปกติบนแท็บเล็ต/มือถือ */
        margin-bottom: 20px;
    }

    .product-info-box .button_box a {
        font-size: 15px !important;
        /* คืนค่าขนาดปกติบนแท็บเล็ต/มือถือ */
    }
}


/* --- บังคับวิดีโอให้อยู่กึ่งกลางหน้าจอ --- */
.vertical-center-4 {
    position: relative;
    width: 100% !important;
    height: 100vh !important;
    /* ปรับให้เต็มความสูงหน้าจอ (100vh) จะดูสวยกว่า */
    min-height: 600px;
    /* กันไม่ให้เตี้ยเกินไปในจอมือถือ */
    overflow: hidden;
    background: #000;
    /* กันขอบขาว */
}

.main_video {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* หัวใจสำคัญคือตรงนี้ครับ */
    min-width: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    /* บังคับให้วิดีโอครอบคลุมพื้นที่ทั้งหมดโดยไม่เสียสัดส่วน */
    z-index: 1;
}

/* =========================================
   LIQUID GLASS THEME (COMPANY PAGE)
   ========================================= */

/* 1. ปรับพื้นหลังให้ดูเป็น Deep Space (มืดแต่มีมิติ) */
body,
html {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* 2. ปรับแบนเนอร์ด้านบนให้ดูอลังการ */
.video-banner-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

@media (max-width: 1199px) {
    .video-banner-container {
        height: 60vh;
    }
}

@media (max-width: 767px) {
    .video-banner-container {
        height: 40vh;
    }
}

.pad-banner .banner {
    position: relative;
    overflow: hidden;
    height: 700px;
}

.pad-banner .banner img {
    filter: brightness(0.4) contrast(1.2);
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.pad-banner .banner h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, calc(-100% - 20px));
    -webkit-transform: translate(-50%, calc(-100% - 20px));
    transform: translate(-50%, calc(-100% - 20px));
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    z-index: 2;
    text-shadow: 0 0 20px rgba(237, 28, 36, 0.5);
    text-align: center;
    max-width: 90%;
}

.pad-banner .banner p {
    top: 50%;
    -ms-transform: translate(-50%, 20px);
    -webkit-transform: translate(-50%, 20px);
    transform: translate(-50%, 20px);
    text-align: center;
    max-width: 90%;
}





.box_general:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(237, 28, 36, 0.3) !important;
}

/* 4. หัวข้อตัวอักษร (แดง Syntex) */
h2,
h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    position: relative;
    display: inline-block;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #ed1c24;
}

.text_ourproducts h2::after {
    display: none !important;
}

/* 5. ปรับรูปภาพ Company ให้มนและดูนวล */
.box_imgcompany img {
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border: none !important;
}

/* 6. ปุ่ม View Company Profile (ปุ่มแดงเรืองแสง) */
.text_video_a a {
    display: inline-block;
    background: #ed1c24 !important;
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.4);
    transition: 0.4s;
}

.text_video_a a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(237, 28, 36, 0.6);
}

/* 7. ปรับตาราง General Info ให้ดูโปร่ง */
.box_general h5 {
    color: #ffffff !important;
    font-weight: 400;
    margin-top: 10px;
}

.box_general p {
    color: #ed1c24 !important;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
}

/* =========================================
   CINEMATIC VISION CARD (SPLIT DESIGN)
   ========================================= */
.vision-modern-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* ช่วยให้จัดเรียงในมือถือได้ */
    background: #0a0a0a;
    /* พื้นหลังดำเข้ม */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* ขอบกระจกบางๆ */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    margin: 50px 0;
    transition: all 0.5s ease;
}

/* เอฟเฟกต์ตอนชี้เมาส์ที่กล่องนี้ */
.vision-modern-wrapper:hover {
    box-shadow: 0 25px 50px rgba(237, 28, 36, 0.15);
    /* เรืองแสงสีแดง Syntex ใต้กล่อง */
    border-color: rgba(237, 28, 36, 0.3);
    transform: translateY(-5px);
    /* ลอยขึ้นนิดนึง */
}

/* --- ฝั่งเนื้อหา (ซ้าย) --- */
.vision-content-side {
    flex: 1;
    min-width: 300px;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #0d0d0d 0%, #151515 100%);
}

.vision-logo {
    width: 80px;
    /* ขนาดโลโก้ */
    margin-bottom: 30px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

.vision-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vision-title span {
    color: #ed1c24;
    /* เน้นคำว่า The Top เป็นสีแดง */
}

.vision-text {
    color: #cccccc !important;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* เส้นขีดลูกเล่น */
.vision-line {
    width: 60px;
    height: 4px;
    background: #ed1c24;
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 2px;
}

.vision-modern-wrapper:hover .vision-line {
    width: 100%;
    /* พาดผ่านเต็มกล่องตอน Hover */
    box-shadow: 0 0 10px rgba(237, 28, 36, 0.5);
}

/* --- ฝั่งรูปภาพ (ขวา) --- */
.vision-image-side {
    flex: 1;
    min-width: 300px;
    position: relative;
    overflow: hidden;
}

/* ทำให้รูปภาพดูมืดๆ คมๆ เข้ากับธีม */
.vision-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: brightness(0.6) contrast(1.2);
}

.vision-modern-wrapper:hover .vision-image-side img {
    transform: scale(1.08);
    /* เอฟเฟกต์ซูมภาพแบบช้าๆ */
    filter: brightness(0.8) contrast(1.2);
}

/* เงาดำไล่ระดับเชื่อมระหว่างภาพกับข้อความ */
.vision-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, #151515 0%, transparent 100%);
    z-index: 1;
}

/* คำว่า VISION ใหญ่ๆ ทับบนรูป */
.vision-huge-text {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: 80px !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase;
    z-index: 3;
    margin: 0 !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* --- สำหรับหน้าจอมือถือ --- */
@media (max-width: 768px) {
    .vision-content-side {
        padding: 40px 20px;
    }

    .vision-huge-text {
        font-size: 50px !important;
        bottom: 20px;
        right: 20px;
    }

    .vision-image-side {
        min-height: 250px;
    }

    .vision-gradient-overlay {
        width: 100%;
        height: 30%;
        background: linear-gradient(0deg, transparent 0%, #151515 100%);
    }
}

/* =========================================
   FIX 1: ลบแถบพื้นหลังสีขาวของ Slider ให้กลืนกับเว็บ
   ========================================= */
#flexslider_history,
#flexslider_history .flex-viewport,
.flexslider {
    background: transparent !important;
    /* บังคับโปร่งใส ทะลุเห็นพื้นหลังสีดำของเว็บ */
    border: none !important;
    /* ลบเส้นขอบสีขาวทิ้ง */
    box-shadow: none !important;
    /* ลบเงาขอบขาวทิ้ง */
}

/* =========================================
   FIX 2: ปลุกชีพลูกศรซ้าย-ขวา (Modern Glass Arrows)
   ========================================= */
/* ยกเลิกคำสั่งซ่อนปุ่มของคนทำเว็บคนก่อน */
#flexslider_history .flex-direction-nav .flex-prev,
#flexslider_history .flex-direction-nav .flex-next {
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* ซ่อนไว้ก่อน จะโชว์ขึ้นมาเฉพาะตอนเอาเมาส์ชี้ที่สไลด์ */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ดีไซน์ปุ่มให้เป็นวงกลมกระจก (Glassmorphism) */
    width: 60px !important;
    height: 60px !important;
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(237, 28, 36, 0.5);
    /* ขอบสีแดงบางๆ */
    border-radius: 50% !important;
    color: #fff !important;
    text-shadow: none !important;

    /* จัดให้อยู่กึ่งกลางแนวตั้งเป๊ะๆ */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

/* ไอคอนลูกศรด้านในให้ใหญ่และชัดขึ้น */
#flexslider_history .flex-direction-nav a::before {
    font-size: 24px !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* เอฟเฟกต์ 1: ตอนเอาเมาส์เข้าไปในโซน Slider ให้ปุ่มลูกศรโผล่มาด้านข้าง */
#flexslider_history:hover .flex-direction-nav .flex-prev {
    opacity: 1 !important;
    left: 2px !important;
    /* ระยะห่างจากขอบซ้าย */
}

#flexslider_history:hover .flex-direction-nav .flex-next {
    opacity: 1 !important;
    right: 2px !important;
    /* ระยะห่างจากขอบขวา */
}

/* เอฟเฟกต์ 2: ตอนเอาเมาส์ไปชี้ที่ "ตัวปุ่มลูกศร" ให้เรืองแสงสีแดง Syntex */
#flexslider_history .flex-direction-nav a:hover {
    background: rgba(237, 28, 36, 0.95) !important;
    /* พื้นแดงทึบ */
    border-color: #ed1c24 !important;
    box-shadow: 0 0 25px rgba(237, 28, 36, 0.8) !important;
    /* เงาเรืองแสงแดง */
    transform: translateY(-50%) scale(1.1) !important;
    /* ขยายใหญ่ขึ้นนิดนึงดึงดูดสายตา */
}

/* ขยับจุดไข่ปลา (Dots) ด้านล่างลงมานิดนึงไม่ให้ทับกล่อง */
.flex-control-nav {
    bottom: -30px !important;
}

/* =========================================
   FIX 3: ลบคำว่า Previous/Next ให้เหลือแค่ไอคอนลูกศร
   ========================================= */
#flexslider_history .flex-direction-nav a {
    font-size: 0 !important;
    /* หดตัวหนังสือคำว่า Next/Prev ให้หายไป */
    color: transparent !important;
    /* ทำให้ตัวหนังสือโปร่งใส (กันพลาด) */
    text-shadow: none !important;
}

/* บังคับให้แสดงเฉพาะ "ไอคอนลูกศร" ด้านใน */
#flexslider_history .flex-direction-nav a::before {
    font-size: 20px !important;
    /* ขนาดลูกศร */
    color: #ffffff !important;
    /* สีลูกศร (ขาว) */
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   PREMIUM GLOWING RED HOVER FOR PRODUCTS DROPDOWN & SUBMENUS
   ========================================================================== */
.dropdown-menu>li>a,
.dropdown-item {
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.dropdown-menu>li:hover>a,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(237, 28, 36, 0.15) !important;
    /* Elegant semi-transparent Syntex red */
    color: #ff3333 !important;
    /* Vivid glowing red text */
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.85), 0 0 15px rgba(255, 51, 51, 0.45) !important;
    /* Glow effect */
    padding-left: 18px !important;
    /* Micro-interaction: smooth slide-in */
    box-shadow: inset 4px 0 0 0 #ed1c24 !important;
    /* Left-side glowing red accent border */
}

/* Hide empty submenus and their arrows under Other Products */
.dropdown-menu>li:nth-child(2)>.dropdown-menu>li>.dropdown-menu {
    display: none !important;
}

.dropdown-menu>li:nth-child(2)>.dropdown-menu>li>a>i {
    display: none !important;
}

/* ==========================================================================
   MAIN MENU TEXT COLOR - PREMIUM CORPORATE ORANGE & GLOWING EFFECT
   ========================================================================== */
/* Desktop Main Navigation Links - Normal Dark Header State */
.mainmenu>li>a {
    color: #ed1c24 !important;
    /* Premium corporate red matching Syntex logo brand color */
    font-weight: 600 !important;
    /* Elegant semi-bold font weight for crisp readability */
    text-shadow: 0 0 6px rgba(237, 28, 36, 0.35) !important;
    /* Premium subtle red glow */
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Desktop Main Navigation Links - Hover / Focus State */
.mainmenu>li>a:hover,
.mainmenu>li>a:focus {
    color: #ffffff !important;
    /* Clean white highlight */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(237, 28, 36, 0.7) !important;
    /* Stunning white-red neon glow */
}

/* Desktop Main Navigation Links - Active State */
.mainmenu>li>a.active {
    color: #ffffff !important;
    /* Active link highlighted in white */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(237, 28, 36, 0.5) !important;
}

/* Scrolled Down State (Sticky Header - White Background) */
.wrap_mainmenu.sticky .mainmenu>li>a {
    color: #ed1c24 !important;
    /* Premium corporate red when scrolled down */
    font-weight: 600 !important;
    /* Keep elegant semi-bold font weight when sticky */
    text-shadow: 0 0 8px rgba(237, 28, 36, 0.45) !important;
    /* Elegant glowing neon red */
}

.wrap_mainmenu.sticky .mainmenu>li>a:hover,
.wrap_mainmenu.sticky .mainmenu>li>a:focus {
    color: #ffffff !important;
    /* White color on hover for gorgeous contrast */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 18px rgba(237, 28, 36, 0.85) !important;
    /* Intensely glowing red & white neon shadow */
}

.wrap_mainmenu.sticky .mainmenu>li>a.active {
    color: #ffffff !important;
    /* Keep active link highlighted in white with glowing red outline when sticky */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px rgba(237, 28, 36, 0.6) !important;
}

/* Mobile Main Navigation Links */
.cd-main-nav>li>a {
    color: #ed1c24 !important;
    font-weight: 600 !important;
    /* Elegant semi-bold font weight for mobile as well */
    text-shadow: 0 0 6px rgba(237, 28, 36, 0.3) !important;
    transition: all 0.28s ease-in-out !important;
}

.cd-main-nav>li>a:hover,
.cd-main-nav>li>a:focus,
.cd-main-nav>li>a.active {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(237, 28, 36, 0.6) !important;
}

/* Fix mobile glassmorphic menu shape and position */
@media (max-width: 991px) {

    /* Reset container layout to maximize screen real estate on mobile (<= 991px) to prevent margins in landscape mode */
    html body .menuxs .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html body .menuxs .row.bg_menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .menuxs .col-12.line_menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Force parent navbar to be relative and have a clean height */
    html body .menuxs nav.wrap_mainmenu {
        position: relative !important;
        display: block !important;
        height: 72px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Keep brand logo positioned perfectly relative to wrap_mainmenu */
    html body .menuxs nav.wrap_mainmenu .text-logo {
        position: absolute !important;
        top: 8px !important;
        left: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }

    html body .menuxs nav.wrap_mainmenu .text-logo img {
        width: 55px !important;
        height: 55px !important;
        display: block !important;
    }

    /* Keep hamburger button aligned on the far right of wrap_mainmenu */
    html body .menuxs nav.wrap_mainmenu .btn_menu {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 1000 !important;
        display: block !important;
    }

    .mainmenu-align,
    .wrap_mainmenu.sticky .mainmenu-align {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 72px !important;
        transform: none !important;
        padding-bottom: 20px !important;
        margin: 0 !important;
        background: rgba(26, 26, 30, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    }

    .mainmenu>li>a {
        padding: 15px 20px !important;
        font-size: 16px !important;
    }

    .mainmenu>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 0 !important;
        display: block !important;
    }

    .form-search,
    .form-search:focus {
        width: calc(100% - 40px) !important;
        margin: 15px 20px !important;
    }

    /* Fix giant language flags in mobile expanded menu */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language {
        display: inline-block !important;
        width: auto !important;
        border-bottom: none !important;
        margin: 10px 12px 20px 12px !important;
        vertical-align: middle !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language a {
        display: inline-block !important;
        padding: 0 !important;
        background: none !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language img {
        width: 32px !important;
        height: auto !important;
        border-radius: 2px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
        display: inline-block !important;
        transition: transform 0.2s ease !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language img:hover {
        transform: scale(1.15) !important;
    }
}


/* Mobile dropdown hover override for JS toggle */
@media (max-width: 991px) {

    /* Hide standard hover dropdowns so they don't pop up randomly on touch scroll */
    .mainmenu .dropdown-submenu:hover>.dropdown-menu {
        display: none !important;
    }

    /* Let the submenu be visible when manually toggled by JavaScript */
    .mainmenu .dropdown-submenu>.dropdown-menu {
        display: none;
    }

    .mainmenu .dropdown-submenu>a.expanded+.dropdown-menu {
        display: block !important;
    }

    /* Sibling dropdown lists should display as blocks instead of absolute positioned menus */
    .mainmenu .dropdown-submenu .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        margin-top: 5px !important;
        padding-left: 15px !important;
    }
}

/* ==========================================================================
   TABLET NAVBAR & MENU OPTIMIZATION (992px - 1199px)
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 992px) {

    /* Reset container layout to maximize screen real estate on tablets */
    html body .menuxs .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Ensure the navigation bar behaves as a sleek flexbox container */
    html body .menuxs nav.wrap_mainmenu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 80px !important;
        position: relative !important;
        background: transparent !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* Sleek sticky state for tablet navigation on scroll */
    html body .menuxs nav.wrap_mainmenu.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 65px !important;
        background: rgba(15, 15, 15, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7) !important;
        z-index: 99999 !important;
        padding: 0 20px !important;
        transform: none !important;
    }

    /* Main brand logo: beautifully sized and always visible to prevent layout shifts */
    html body .menuxs nav.wrap_mainmenu .text-logo {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        z-index: 1000 !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        flex-shrink: 0 !important;
        transform: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html body .menuxs nav.wrap_mainmenu .text-logo img {
        width: 75px !important;
        height: auto !important;
        display: block !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html body .menuxs nav.wrap_mainmenu.sticky .text-logo img {
        width: 50px !important;
    }

    /* The capsule navigation list containing menu links, search, and language controls */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        background: rgba(18, 18, 20, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 0 14px !important;
        margin: 0 !important;
        width: auto !important;
        max-width: 85% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 1 !important;
        transform: none !important;
        /* CRITICAL: Override transform: translateX(-50%) from desktop */
    }

    /* When sticky, the capsule merges seamlessly into the solid dark top bar */
    html body .menuxs nav.wrap_mainmenu.sticky ul.mainmenu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Individual menu list item wrapper */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li {
        display: block !important;
        position: relative !important;
        margin: 0 2px !important;
        padding: 0 !important;
    }

    /* Navigation link text style: ultra-compact and readable */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a {
        display: block !important;
        padding: 6px 9px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        letter-spacing: 0.2px !important;
        text-transform: uppercase !important;
        background: none !important;
        transition: all 0.25s ease !important;
        position: relative !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a:hover,
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a.active {
        color: #fe0202 !important;
        text-shadow: 0 0 8px rgba(254, 2, 2, 0.6) !important;
    }

    /* Elegant and precise bottom indicator line on hover and active states */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a::after {
        content: "" !important;
        position: absolute !important;
        bottom: 1px !important;
        left: 7px !important;
        right: 7px !important;
        height: 2px !important;
        background-color: #fe0202 !important;
        box-shadow: 0 0 8px #fe0202 !important;
        transform: scaleX(0) !important;
        transition: transform 0.25s ease !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a:hover::after,
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li>a.active::after {
        transform: scaleX(1) !important;
    }

    /* Completely hide redundant inline stick logo inside the mainmenu */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu .logostick,
    html body .menuxs nav.wrap_mainmenu.sticky ul.mainmenu .logostick {
        display: none !important;
    }

    /* Search Input Container inside menu list */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.search {
        margin: 0 4px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Compact Search Input */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.search input.form-search {
        width: 65px !important;
        height: 24px !important;
        padding: 2px 8px !important;
        font-size: 11px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 20px !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.search input.form-search:focus {
        width: 90px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border-color: #fe0202 !important;
        box-shadow: 0 0 8px rgba(254, 2, 2, 0.45) !important;
    }

    /* Side-by-side Language Flags */
    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language {
        display: flex !important;
        align-items: center !important;
        padding: 0 2px !important;
        margin: 0 !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language a {
        padding: 0 2px !important;
        background: none !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language img {
        width: 15px !important;
        height: auto !important;
        border-radius: 1px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
        transition: transform 0.2s ease !important;
    }

    html body .menuxs nav.wrap_mainmenu ul.mainmenu>li.language img:hover {
        transform: scale(1.2) !important;
    }

    /* Hide standard hamburger and other menu mobile indicators inside the navbar */
    html body .menuxs nav.wrap_mainmenu .btn_menu {
        display: none !important;
    }
}

/* ==========================================================================
   GALLERY CATEGORY TABS (Premium Button Styling)
   ========================================================================== */
.tabs-gallery .nav-tabs {
    border-bottom: none !important;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tabs-gallery .nav-tabs .nav-item {
    margin-bottom: 10px;
}

.tabs-gallery .nav-tabs .nav-link {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    color: #aaaaaa !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 500;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.tabs-gallery .nav-tabs .nav-link:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.tabs-gallery .nav-tabs .nav-link.active {
    background-color: #ed1c24 !important;
    /* Syntex Red */
    color: #ffffff !important;
    border-color: #ed1c24 !important;
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.4) !important;
}

@media (max-width: 767px) {
    .text_ourproducts h2 {
        font-size: 26px !important;
    }
}

/* ==========================================================================
   MOBILE & TABLET NESTED SUBMENU STYLING & ACCORDION UX FIXES
   ========================================================================== */
@media (max-width: 991px) {

    /* Level 1 Submenu (e.g. Products list: Valve Products, Other Products) */
    .mainmenu>li.dropdown-submenu>.dropdown-menu {
        background: rgba(255, 255, 255, 0.03) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
        padding-left: 10px !important;
    }

    /* Level 2 Submenu (e.g. Seal & O-Rings, Steam Traps under Other Products) */
    .mainmenu .dropdown-menu .dropdown-submenu>.dropdown-menu {
        background: rgba(0, 0, 0, 0.2) !important;
        border-left: 2px solid #ed1c24 !important;
        /* Syntex Red left-border indicator */
        padding-left: 15px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* Stylize submenu links for clean visual hierarchy */
    .mainmenu .dropdown-menu a {
        font-size: 15px !important;
        color: #dddddd !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .mainmenu .dropdown-menu .dropdown-menu a {
        font-size: 14px !important;
        color: #bbbbbb !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Show and style chevron icons on mobile submenu triggers */
    .mainmenu .dropdown-submenu>a i {
        display: inline-block !important;
        float: right !important;
        margin-top: 5px !important;
        color: #ed1c24 !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Rotate arrow downwards when submenu expands */
    .mainmenu .dropdown-submenu>a.expanded i {
        transform: rotate(90deg) !important;
    }
}

/* =========================================================
   iOS-smooth main-menu expand / collapse  (desktop only)
   ---------------------------------------------------------
   Fixes the janky sticky transition:
   1) ONE easing + ONE duration in BOTH directions, so the bar
      "shrinks back" exactly the same way it stretched out
      (the old code used 0.5s one way and 0.35s the other).
   2) The bar is kept perfectly centred in both states, so it no
      longer slides sideways while it grows/shrinks (the old code
      animated transform translateX(-50%) -> none).
   3) Only cheap size/skin properties are animated. The heavy
      backdrop blur is left to snap because tweening it every
      frame is what made scrolling stutter.
   These !important rules deliberately win over the older,
   conflicting per-page inline <style> rules and earlier rules
   in this file. Scoped to >=992px so the mobile/tablet drawer
   (max-width:991px) is untouched.
   ========================================================= */
@media (min-width: 992px) {

    /* --- Anti-flicker on collapse ---------------------------------------
       The wrapper used to turn solid white when sticky and fade on its own
       0.4s clock, out of sync with the dark bar's 0.55s fade. That mismatch
       is the "blink" seen just before the bar shrinks back. The visible bar
       is .mainmenu-align, so the wrapper can stay transparent with no
       transition of its own. */
    .wrap_mainmenu {
        transition: none !important;
    }
    .wrap_mainmenu.sticky {
        background: transparent !important;
        box-shadow: none !important;
    }

    .wrap_mainmenu .mainmenu-align,
    .wrap_mainmenu.sticky .mainmenu-align {
        /* identical horizontal anchoring in both states = no sideways slide */
        left: 50% !important;
        right: auto !important;
        /* translateZ(0) promotes the bar to its own GPU layer so the
           position fixed<->absolute swap doesn't cause a repaint blink */
        transform: translateX(-50%) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;

        /* box-shadow is intentionally NOT animated: the non-sticky state has an
           inset shadow and the sticky state does not, and animating between an
           inset and a non-inset shadow list snaps/glitches. Let it cut instantly. */
        transition:
            width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            padding 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            margin 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            background-color 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }

    /* Let the menu links recolour smoothly in step with the bar */
    .wrap_mainmenu .mainmenu li a {
        transition: color 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
            text-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }
}

/* =========================================================
   Valve / Product Showcase popup (Syntex dark + red theme)
   Opens from a product card image on the homepage.
   ========================================================= */
.vs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.vs-overlay.open { opacity: 1; visibility: visible; }
.vs-modal {
    width: 100%;
    max-width: 1100px;
    max-height: 100vh;
    overflow: auto;
    background: linear-gradient(160deg, #1c1c20, #121214);
    border: 1px solid rgba(237, 28, 36, 0.35);
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    padding: 28px 30px 24px;
    position: relative;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vs-overlay.open .vs-modal { transform: none; }
.vs-close {
    position: absolute;
    top: 12px;
    right: 18px;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.25s;
}
.vs-close:hover { opacity: 1; color: #ed1c24; transform: rotate(90deg); }
.vs-title { color: #fff; font-weight: 700; text-align: center; margin: 0 0 22px; letter-spacing: 1px; }
.vs-title span { color: #ed1c24; }
.vs-body { display: flex; gap: 22px; }
.vs-tabs { display: flex; flex-direction: column; gap: 10px; flex: 0 0 200px; }
.vs-tab {
    text-align: left;
    padding: 12px 18px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cfcfcf;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
    white-space: nowrap;
}
.vs-tab:hover { border-color: rgba(237, 28, 36, 0.5); color: #fff; }
.vs-tab.active { background: #ed1c24; border-color: #ed1c24; color: #fff; box-shadow: 0 6px 18px rgba(237, 28, 36, 0.4); }
.vs-stage { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.vs-arrow {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.25s;
}
.vs-arrow:hover { background: #ed1c24; border-color: #ed1c24; }
.vs-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 14px;
    flex: 1;
    scrollbar-width: none;
}
.vs-track::-webkit-scrollbar { display: none; }
.vs-track { cursor: grab; }
.vs-track.vs-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
.vs-card img { -webkit-user-drag: none; user-select: none; }
.vs-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.25s;
    text-decoration: none;
    display: block;
}
.vs-card:hover { border-color: #ed1c24; transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.vs-card-img { height: 150px; background: #fff; display: flex; align-items: center; justify-content: center; }
.vs-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vs-card-body { padding: 14px 16px; }
.vs-card-name { color: #fff; font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.vs-card-type { color: #ed1c24; font-size: 12.5px; margin: 0; letter-spacing: 0.5px; }
.vs-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; }
.vs-progress { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
.vs-progress span { display: block; height: 100%; width: 0; background: #ed1c24; border-radius: 4px; transition: width 0.2s ease; }
.vs-viewbtn {
    flex: 0 0 auto;
    padding: 11px 26px;
    border-radius: 40px;
    background: transparent;
    border: 1.5px solid #ed1c24;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s;
    white-space: nowrap;
}
.vs-viewbtn:hover { background: #ed1c24; color: #fff; }
/* hint that product card images open the popup */
.glass-product-card .product-img-box { cursor: pointer; position: relative; }
@media (max-width: 768px) {
    .vs-modal { padding: 22px 16px; }
    .vs-body { flex-direction: column; gap: 14px; }
    .vs-tabs { flex-direction: row; overflow-x: auto; flex: none; padding-bottom: 6px; scrollbar-width: none; }
    .vs-tabs::-webkit-scrollbar { display: none; }
    .vs-tab { flex: 0 0 auto; }
    .vs-card { flex-basis: calc((100% - 16px) / 2); }
    .vs-arrow { display: none; }
}
@media (max-width: 480px) { .vs-card { flex-basis: 100%; } }

/* =========================================================
   Respect "reduce motion": users (and low-end devices) who ask
   for less animation get near-instant transitions, eliminating
   any animation jank entirely. No visual change for everyone else.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   content-visibility: skip rendering heavy, below-the-fold blocks
   until they scroll near the viewport -> cheaper scrolling on
   low-end devices. Only applied to static blocks (no carousels,
   so JS width-measurement is unaffected). 'auto' size is remembered
   after first render to avoid scrollbar jumps.
   ========================================================= */
.bg_footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
.glass-product-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
}

/* =========================================================
   Modern brand product cards (more_product pages) — white card
   + red category chip, matching the reference product grid.
   ========================================================= */
.box_readmore.pg-card {
    position: relative;
    background: #f4f4f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow: hidden;
    padding: 0 0 18px;
    margin-bottom: 26px;
    text-align: center;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.28s ease, border-color 0.28s ease;
    will-change: transform;
}
.box_readmore.pg-card:hover {
    transform: translateY(-6px);
    border-color: #ed1c24;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}
.pg-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #ed1c24;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 5px 13px;
    border-radius: 30px;
    box-shadow: 0 3px 9px rgba(237, 28, 36, 0.4);
    white-space: nowrap;
}
.pg-img {
    background: #fff;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 22px 22px;
}
.pg-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.box_readmore.pg-card h6 {
    color: #16161a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.45;
    margin: 16px 16px 0 !important;
    padding: 0 !important;
    min-height: 42px;
}
@media (max-width: 767px) {
    .pg-img { height: 170px; padding: 22px 16px 16px; }
    .box_readmore.pg-card h6 { font-size: 13.5px !important; }
}
/* product cards are clickable -> go to the detail page */
.box_readmore.pg-card { cursor: pointer; }

/* =========================================================
   Product detail page (product-detail.html) — light content
   panel with red accents, between the dark menu & footer.
   ========================================================= */
.pd-container {
    background: #fff;
    color: #1a1a1a;
    max-width: 1180px;
    /* clear the overlapping menu bar (this page has no top banner) */
    margin: 150px auto 46px;
    padding: 34px 36px 46px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.pd-crumb { font-size: 13px; color: #8a8a8a; margin-bottom: 24px; }
.pd-crumb a { color: #8a8a8a; text-decoration: none; }
.pd-crumb a:hover { color: #ed1c24; }
.pd-crumb span { color: #ed1c24; font-weight: 600; }
.pd-main { display: flex; gap: 42px; align-items: flex-start; }
.pd-gallery {
    flex: 0 0 46%;
    background: #f5f5f7;
    border-radius: 14px;
    padding: 40px;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-gallery img { max-width: 100%; max-height: 420px; object-fit: contain; }
.pd-info { flex: 1; min-width: 0; }
.pd-chip {
    display: inline-block;
    background: #ed1c24;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 5px 15px;
    border-radius: 30px;
    margin-bottom: 14px;
}
.pd-name {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.2;
    /* override the dark-theme white heading + glow so it reads dark-gray on white */
    color: #2d2d33 !important;
    -webkit-text-fill-color: #2d2d33 !important;
    text-shadow: none !important;
}
.pd-desc { font-size: 15px; line-height: 1.75; color: #444; margin: 0; }
.pd-muted { color: #000000; font-style: italic; }
.pd-specs { width: 100%; border-collapse: collapse; margin-top: 24px; }
.pd-specs th {
    text-align: left; font-weight: 600; color: #222; font-size: 14px;
    padding: 11px 16px 11px 0; width: 44%; border-bottom: 1px solid #eee; vertical-align: top;
}
.pd-specs td { color: #ed1c24; font-size: 14px; padding: 11px 0; border-bottom: 1px solid #eee; }
.pd-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.pd-btn {
    background: #ed1c24; color: #fff; padding: 11px 26px; border-radius: 30px;
    text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.22s; display: inline-block;
}
.pd-btn:hover { background: #c8151c; color: #fff; }
.pd-btn-outline { background: transparent; color: #ed1c24; border: 1.5px solid #ed1c24; }
.pd-btn-outline:hover { background: #ed1c24; color: #fff; }
.pd-section { margin-top: 46px; border-top: 1px solid #ececec; padding-top: 30px; }
.pd-section h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #2d2d33 !important;
    -webkit-text-fill-color: #2d2d33 !important;
    text-shadow: none !important;
}
.pd-h3-gap { margin-top: 26px !important; }
.pd-feat { columns: 2; column-gap: 40px; margin: 0; padding-left: 18px; }
.pd-feat li { color: #444; font-size: 14.5px; margin-bottom: 7px; break-inside: avoid; }
.pd-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pd-rcard {
    position: relative; background: #f4f4f6; border: 1px solid #e6e6e9; border-radius: 14px;
    overflow: hidden; text-decoration: none; text-align: center; padding-bottom: 14px;
    transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.25s, border-color 0.25s;
}
.pd-rcard:hover { transform: translateY(-5px); border-color: #ed1c24; box-shadow: 0 12px 26px rgba(0,0,0,0.15); }
.pd-rchip { position: absolute; top: 10px; left: 10px; background: #ed1c24; color: #fff; font-size: 10.5px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }
.pd-rimg { background: #fff; height: 160px; display: flex; align-items: center; justify-content: center; padding: 26px 18px 16px; }
.pd-rimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-rname { color: #16161a; font-weight: 600; font-size: 13.5px; margin: 12px 12px 0; line-height: 1.4; }
.pd-notfound { text-align: center; padding: 80px 20px; }
.pd-notfound h3 { color: #fff; margin-bottom: 20px; }
@media (max-width: 900px) {
    .pd-main { flex-direction: column; gap: 24px; }
    .pd-gallery { flex: none; width: 100%; min-height: 260px; padding: 26px; }
    .pd-related { grid-template-columns: repeat(2, 1fr); }
    .pd-feat { columns: 1; }
}
@media (max-width: 991px) {
    .pd-container { margin-top: 100px; }
}
@media (max-width: 600px) {
    .pd-container { padding: 22px 16px 34px; margin: 90px 10px 30px; }
    .pd-name { font-size: 25px; }
    .pd-related { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Force detail-panel text to dark/readable colours. The dark site theme sets
   <p>/<li> to near-white (#eee) with !important, which is unreadable on this
   white panel — these !important + text-fill overrides win it back. */
.pd-container .pd-desc { color: #3f3f45 !important; -webkit-text-fill-color: #3f3f45 !important; }
.pd-container .pd-desc.pd-muted,
.pd-container .pd-muted { color: #6a6a70 !important; -webkit-text-fill-color: #6a6a70 !important; }
.pd-container .pd-feat li { color: #444 !important; -webkit-text-fill-color: #444 !important; }
.pd-container .pd-rname { color: #222 !important; -webkit-text-fill-color: #222 !important; }
.pd-container .pd-crumb,
.pd-container .pd-crumb a { color: #8a8a8a !important; -webkit-text-fill-color: #8a8a8a !important; }
.pd-container .pd-crumb span { color: #ed1c24 !important; -webkit-text-fill-color: #ed1c24 !important; }
.pd-container .pd-specs th { color: #2b2b30 !important; -webkit-text-fill-color: #2b2b30 !important; }

/* ============================================================
   SMOOTH WOW ENTRANCE ANIMATIONS (iOS-like)
   animate.css defaults jump a full element-height with a plain
   ease over 1s, which looks harsh. These overrides win by
   specificity (.wow.fadeInX beats .fadeInX regardless of CSS
   load order) and swap in short-travel, GPU-composited motion
   with a deep ease-out curve.
   ============================================================ */
.wow.animated {
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@-webkit-keyframes sxFadeDown {
    from { opacity: 0; -webkit-transform: translate3d(0, -26px, 0); transform: translate3d(0, -26px, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}
@keyframes sxFadeDown {
    from { opacity: 0; -webkit-transform: translate3d(0, -26px, 0); transform: translate3d(0, -26px, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes sxFadeLeft {
    from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}
@keyframes sxFadeLeft {
    from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes sxFadeRight {
    from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0);  transform: translate3d(30px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}
@keyframes sxFadeRight {
    from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0);  transform: translate3d(30px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
}

.wow.fadeInDown  { -webkit-animation-name: sxFadeDown;  animation-name: sxFadeDown; }
.wow.fadeInLeft  { -webkit-animation-name: sxFadeLeft;  animation-name: sxFadeLeft; }
.wow.fadeInRight { -webkit-animation-name: sxFadeRight; animation-name: sxFadeRight; }


/* ============================================================
   HERO VIDEO (index)
   All sizing knobs live in index.html -> <style id="hero-video-settings">
   (--hero-height / --hero-fit / --hero-focus / --hero-gap-* / --hero-radius)
   so they can be tuned in ONE place with no cache-version bump.
   The var() fallbacks below equal the default banner look.
   ============================================================ */
.hero-video {
    width: 100%;
    height: var(--hero-height, auto);
    object-fit: var(--hero-fit, cover);
    object-position: center var(--hero-focus, 50%);
    border-radius: var(--hero-radius, 0px);
    display: block;
    background-color: #0d0d0d;
}

/* Full-bleed hero: the -15px cancels the Bootstrap gutters so a
   0px gap really touches the screen edge; each side then adds its
   own independent --hero-gap-* inset from the control panel. */
.hero-row {
    margin-top: var(--hero-gap-top, 0px);
    margin-bottom: var(--hero-gap-bottom, 0px);
    margin-left: calc(-15px + var(--hero-gap-left, 0px)) !important;
    margin-right: calc(-15px + var(--hero-gap-right, 0px)) !important;
}

.hero-row > .col-12 {
    padding: 0 !important;
}

.hero-row #flexslider,
.hero-row .flexslider {
    margin: 0 !important;
}


/* ============================================================
   SMOOTH TAB SWITCHING (gallery / project categories)
   Bootstrap only fades tab panes; add a soft upward drift with
   the same iOS ease used by the WOW entrance animations.
   ============================================================ */
.tab-content .tab-pane.fade {
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(0, 16px, 0);
}

.tab-content .tab-pane.fade.show {
    transform: translate3d(0, 0, 0);
}

/* pill highlight glides instead of snapping */
.nav-tabs .nav-link {
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-tabs .nav-link:hover { transform: translateY(-2px); }


/* ============================================================
   FORGIVING SUBMENU HOVER (desktop)
   The Valve Products flyout used to be pure :hover with a 15px
   gap - one diagonal mouse move and it snapped shut. Now the
   flyout overlaps its parent, has an invisible side bridge, and
   stays open for a 0.35s grace period after the mouse strays,
   so travelling into it is easy.
   ============================================================ */
@media (min-width: 992px) {

    /* keep rendered so it can fade + stay hoverable during the grace period */
    .mainmenu .dropdown-menu .dropdown-submenu > .dropdown-menu {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateX(10px);
        transition: opacity 0.16s ease, transform 0.16s ease,
                    visibility 0s linear 0.35s; /* close grace period */
        /* overlap the parent panel instead of leaving a gap */
        left: calc(100% - 6px) !important;
        top: -16px !important;
        margin-top: 0 !important;
    }

    .mainmenu .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    /* invisible bridge covering the approach path on the flyout left edge */
    .mainmenu .dropdown-menu .dropdown-submenu > .dropdown-menu::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -28px;
        width: 28px;
        background: transparent;
    }

    /* slightly taller rows = easier targets */
    .mainmenu .dropdown-menu .dropdown-menu > li > a {
        padding: 11px 16px !important;
    }
}


/* ============================================================
   PRODUCT DETAIL - MULTI IMAGE GALLERY
   product_data.js entries may carry an images:[...] array.
   Main picture on top, clickable thumbnail strip below with a
   red active ring and a soft crossfade on switch.
   ============================================================ */
.pd-gallery {
    flex-direction: column;
    gap: 16px;
}
.pd-gallery .pd-mainimg {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.pd-gallery .pd-mainimg img { transition: opacity 0.18s ease; }
.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.pd-thumb {
    width: 66px;
    height: 66px;
    padding: 5px;
    background: #fff;
    border: 2px solid #e3e3e8;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pd-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.pd-thumb.active {
    border-color: #ed1c24;
    box-shadow: 0 0 0 1px #ed1c24;
}
@media (max-width: 600px) {
    .pd-thumb { width: 54px; height: 54px; }
}


/* ============================================================
   MOBILE ACCORDION MENU FIXES (<= 991px)
   1. The open menu scrolls INSIDE its own box instead of
      dragging the whole page along (overscroll contained).
   2. .mobile-viewall = the injected "View all" first row of
      each submenu, since headings are now open/close toggles.
   ============================================================ */
@media (max-width: 991px) {
    .menuxs .mainmenu {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .mobile-viewall > a {
        font-size: 13px;
        font-style: italic;
        opacity: 0.8;
    }
}
@media (min-width: 992px) {
    .mobile-viewall { display: none !important; }
}


/* ============================================================
   IOS-STYLE STICKY MORPH (desktop >= 992px)
   The menu is position:fixed in BOTH states, so pin / un-pin
   never swaps layout modes. The pill simply MORPHS into the
   full-width bar and back - top, width, radius and colour all
   interpolate while the element stays at opacity 1 the whole
   time. Nothing fades, so nothing can blink.
   Blur strength is identical in both states so the glass never
   re-rasterizes mid-morph (that flash reads as flicker too).
   ============================================================ */
@media (min-width: 992px) {

    .menuxs .mainmenu-align {
        position: fixed !important;
        top: 68px;                 /* measured resting spot of the pill */
        margin: 0 !important;
        width: calc(100% - 32px) !important;   /* side breathing room like before */
        z-index: 10000 !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        animation: none !important;
        transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    background-color 0.4s ease,
                    border-color 0.4s ease,
                    box-shadow 0.4s ease !important;
    }

    .menuxs .wrap_mainmenu.sticky .mainmenu-align {
        top: 0 !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        animation: none !important;
        transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    background-color 0.4s ease,
                    border-color 0.4s ease,
                    box-shadow 0.4s ease !important;
    }

    /* legacy enter/exit animations would fight the morph - all off */
    .wrap_mainmenu.sticky .mainmenu > li,
    .mainmenu-align.sx-return { animation: none !important; }
    .sx-ghost { display: none !important; }

    /* the big brand logo must float ABOVE the glass pill, not get
       blurred underneath it (it scrolls away before the bar pins) */
    .menuxs .text-logo {
        z-index: 10001 !important;
    }
}

/* mobile bar: keep it simple - just soften the colour/shadow change */
@media (max-width: 991px) {
    .wrap_mainmenu, .menuxs {
        transition: background-color 0.35s ease, box-shadow 0.35s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menuxs .mainmenu-align,
    .menuxs .wrap_mainmenu.sticky .mainmenu-align { transition: none !important; }
}


/* ============================================================
   CONTACT SEND BUTTON (.btn_orange had no styling at all)
   Solid red gradient pill - the form's primary action - with
   the same glow/lift language as the rest of the theme.
   ============================================================ */
.btn_orange {
    /* same red + glow as the "Open in Google Maps" button (btn-danger) */
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 52px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn_orange:hover,
.btn_orange:focus {
    background: #c82333 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.5);
}
.btn_orange:active {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(230, 57, 70, 0.35);
}
.btn_orange i { margin-right: 9px; }


/* ============================================================
   ACTIVITY EVENT CALENDAR (index, under "Our Activities")
   Month label -> event rows: date badge | details | banner.
   Same glass-card language as the rest of the theme.
   ============================================================ */
.sx-events { padding: 10px 0 30px; }

/* widen to exactly match the Our Products glass grid (120% / -10%) */
@media (min-width: 1200px) {
    .sx-events {
        width: 120%;
        margin-left: -10%;
    }
}

.sx-ev-month {
    color: #9a9aa0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 34px 0 6px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.sx-ev-month::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(237, 28, 36, 0.5), rgba(255, 255, 255, 0.08));
}

.sx-event {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.sx-event:hover {
    transform: translateY(-4px);
    border-color: rgba(237, 28, 36, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.sx-ev-date {
    flex: 0 0 74px;
    align-self: center;   /* vertically centred on the card's left side */
    text-align: center;
    background: rgba(237, 28, 36, 0.12);
    border: 1px solid rgba(237, 28, 36, 0.4);
    border-radius: 14px;
    padding: 10px 0 12px;
}
.sx-ev-dow  { display: block; color: #ed4a50; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.sx-ev-day  { display: block; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.1; }

.sx-ev-body { flex: 1; min-width: 0; }
.sx-ev-range { color: #9a9aa0; font-size: 14px; letter-spacing: 0.5px; margin-bottom: 2px; }
.sx-ev-body h4 { margin: 2px 0 6px; font-size: 24px; }
.sx-ev-venue { margin: 0 0 8px; }
.sx-ev-venue, .sx-ev-venue span { font-size: 15px !important; color: #cfcfd4 !important; line-height: 1.5 !important; }
.sx-ev-venue strong { color: #fff; }
.sx-ev-desc, .sx-ev-desc span { font-size: 15px !important; color: #b9b9c0 !important; line-height: 1.6 !important; margin: 0; }

.sx-ev-img { flex: 0 0 430px; }
.sx-ev-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;   /* portrait photos crop neatly instead of stretching the card */
    border-radius: 12px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 991px) {
    .sx-event { flex-wrap: wrap; }
    .sx-ev-img { flex: 1 1 100%; order: 3; }
    .sx-ev-img img { height: 220px; }
}
@media (max-width: 600px) {
    .sx-event { padding: 16px; gap: 16px; }
    .sx-ev-date { flex-basis: 60px; }
    .sx-ev-day { font-size: 24px; }
    .sx-ev-body h4 { font-size: 19px; }
}

/* ================= TRAINING GALLERY UNIFORM THUMBNAILS ================= */
/* Mixed portrait/landscape photos render as identical 3:2 tiles in the grid;
   fancybox still opens the full uncropped photo.
   Scoped via .sx-train-gallery (a class only on training.html's tab-content) -
   project.html reuses .tab-pane/.pad_training AND the tabcat0-7 ids for its
   customer-logo filter tabs, so neither may appear in this selector. */
.sx-train-gallery .pad_training img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}