@charset "utf-8";

/* ===================================================
   Auto brake parts — homepage clone layout
   Palette: red #D8261C / blue #005ba4 / footer #69696C
   =================================================== */

:root {
    --red: #D8261C;
    --blue: #005ba4;
    --link: #0c3b64;
    --link-hover: #1782d2;
    --text: #555;
    --gray-box: #EAEAEA;
    --gray-bg: #dfdfdf;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol, li { list-style: none; }
img { max-width: 100%; border: 0; display: block; }

body {
    color: var(--text);
    font-family: 'Poppins', 'Segoe UI', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5rem;
    background: #fff;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

.container-in {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
}

.webtitle {
    color: #1d1d1d;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 1rem;
}
.webtitle a { color: #1d1d1d; }
.webtitle a:hover { color: var(--blue); }

.more1 {
    background: var(--red);
    color: #fff !important;
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 0.9rem;
    margin: 0 0 1rem 0;
}
.more1:hover { background: #000; }

/* ===================== header ===================== */
#header {
    width: 100%;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: #fff;
}

.headerin {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#logo {
    float: left;
    padding: 0.9rem 0;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}
#logo img { width: 190px; }

.top-nav {
    width: 100%;
    background: var(--red);
    margin-top: 0.5rem;
}

.mainmenu {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.mainmenu > li { position: relative; }
.mainmenu > li > a {
    color: #fff;
    display: block;
    padding: 0.7rem 2rem;
    margin-right: 1px;
    font-size: 1rem;
    line-height: 1rem;
    position: relative;
}
.mainmenu > li.active > a,
.mainmenu > li > a:hover,
.mainmenu > li:hover > a,
.mainmenu > li.open > a {
    background: #000;
    color: #fff;
}
.mainmenu > li.has-dropdown > a::after {
    content: "";
    display: inline-block;
    margin-left: 0.45rem;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}
/* JS-injected caret replaces the ::after arrow; flex-aligned with the label */
.mainmenu > li.js-caret > a::after { display: none; }
.mainmenu li.js-caret a {
    display: inline-flex;
    align-items: center;
}
.mainmenu li.js-caret a .caret {
    display: inline-flex;
    width: 20px;
    height: 20px;
    padding: 4px;
    margin: -6px -1px -6px 0;
    box-sizing: content-box;
    cursor: pointer;
    transition: transform .18s ease;
}
.mainmenu li.js-caret.open a .caret { transform: rotate(180deg); }
.mainmenu li.js-caret a .caret svg { width: 100%; height: 100%; display: block; }

/* dropdown (desktop) */
.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 260px;
    background: #000;
    z-index: 1000;
}
.mainmenu li.open .dropdown-menu { display: block; }
.dropdown-menu a {
    display: block;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
}
.dropdown-menu a:hover { color: var(--red); }

/* hamburger */
.nav-toggle {
    display: none;
    float: right;
    margin: 1.3rem 0.5rem 0 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    color: var(--red);
    line-height: 1;
}

/* ===================== banner slider ===================== */
#container {
    width: 100%;
    margin: 120px 0 0 0;
    background: #eee;
    overflow: hidden;
}

.block-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.block-slider .slide { display: none; position: relative; }
.block-slider .slide.active { display: block; }
.block-slider img.slide-img { width: 100%; height: auto; }

.banner_txt {
    position: absolute;
    width: 100%;
    max-width: 600px;
    left: 47%;
    right: 0;
    top: 4%;
    padding: 3rem;
}
.banner_txt1 {
    position: absolute;
    width: 100%;
    max-width: 600px;
    left: 47%;
    right: 0;
    top: 4%;
    padding: 3rem;
}
.banner_txt2 {
    position: absolute;
    width: 100%;
    max-width: 520px;
    left: auto;
    right: 2%;
    top: 44%;
    padding: 0;
}
.banner_txt2 .bannerinfo {
    display: inline-block;
    background: rgba(0, 0, 0, .58);
    padding: 1.1rem 1.4rem;
}
.banner_txt h1, .bannerinfo h1 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,.55);
}

.bx-prev, .bx-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 60px;
    text-align: center;
    font-size: 4em;
    color: #e1321a;
    z-index: 99;
    opacity: .55;
    user-select: none;
}
.bx-prev { left: 2%; }
.bx-next { right: 2%; }
.bx-prev:hover, .bx-next:hover { opacity: 1; }

.bx-pager {
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99;
}
.bx-pager a {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 6px;
    border: 1px solid var(--red);
    border-radius: 50px;
}
.bx-pager a.active { background: var(--red); }

/* ===================== about ===================== */
.bg3 { background: #fff; overflow: hidden; padding: 4rem 0 3rem 0; }

.homeabout {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    color: #333;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}
.colleft {
    width: 50%;
    padding: 3.2rem 2rem 0 0;
    line-height: 1.6rem;
}
.colright { width: 50%; }
.colright img {
    width: 100%;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.homeabout .webtitle { text-align: left; }
.homeabout .webtitle a { font-size: 2rem; }
.homeabout p { color: #333; margin-bottom: 1rem; }

/* ===================== products ===================== */
.mainpro {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 2rem 0;
}
.mainpro p {
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    color: #666;
    padding-bottom: 2rem;
    width: 70%;
}
.mainpro ul { width: 100%; display: flex; flex-wrap: wrap; padding-top: 1rem; }
.mainpro ul > li {
    width: 49%;
    margin: 0 2% 2rem 0;
    border-top: 5px solid var(--red);
    background: #fff;
    padding-bottom: 1rem;
    text-align: center;
}
.mainpro ul > li:nth-child(2n) { margin-right: 0; }
.mainpro ul > li:nth-child(2n+1) { clear: both; }
.product_img { width: 100%; padding-bottom: 0.2rem; }
.product_img img { width: 100%; }
.product_img:hover { opacity: .7; }
.product_con { width: 100%; padding: 0.5rem; }
.product_con a, .product_con span {
    color: #1d1d1d;
    font-size: 0.875rem;
    text-align: center;
    display: block;
}
.mainpro ul > li:hover .product_con a,
.mainpro ul > li:hover .product_con span { color: var(--blue); }

/* ===================== custom service ===================== */
.custom { background: #fff; padding: 4rem 0; }
.custom-bg { background: var(--gray-box); }
.custom-row { display: flex; flex-wrap: wrap; margin-top: 1px; }
.custom-imgcell { width: 33.3333%; position: relative; }
.custom-txtcell { width: 66.6667%; }
.custom-imgcell img { width: 100%; height: 100%; object-fit: cover; }
.triangle span, .triangle1 span {
    position: absolute;
    top: 15%;
    width: 0; height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.triangle span { right: 0; border-right: 30px solid var(--gray-box); }
.triangle1 span { left: 0; border-left: 30px solid var(--gray-box); }
.custom-txtcell {
    padding: 1rem 1.5rem 1rem 2rem;
}
.custom-title {
    color: #000;
    font-weight: bold;
    margin: 10px 0;
    display: block;
    font-size: 1.2rem;
}

/* ===================== case studies ===================== */
.appbg { background: var(--gray-bg); }
.application {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
}
.application ul { width: 100%; display: flex; flex-wrap: wrap; padding-top: 1rem; }
.application ul > li {
    width: 33.33333%;
    border: 1px #7e7e7e solid;
    border-right: 0;
    position: relative;
}
.application ul > li:last-child { border-right: 1px solid #7e7e7e; }
.application ul > li img { width: 100%; }
.application ul > li p {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    transition: .3s;
}
.application ul > li span {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.2;
    text-shadow: 1px 1px 1px #111;
}
.application ul > li:hover p { background-color: rgba(0,91,164,.4); }

/* ===================== footer ===================== */
#footer {
    width: 100%;
    margin: 0 auto;
    font-size: 0.9rem;
    background: #69696C;
    color: #fff;
}
.etw_footin {
    margin: 0 auto;
    width: 96%;
    max-width: 1100px;
    overflow: hidden;
    padding: 1.5rem 0;
}
.footer-cols { display: flex; flex-wrap: wrap; }
.footer-col { width: 25%; padding-bottom: 1rem; }

.etw_hometitle {
    padding: 0.5rem 0 1rem 0;
    font-size: 1.125rem;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}
.etw_hometitle a { color: #fff; display: block; }
.etw_hometitle a:hover { color: #000; }

.cot_add, .cot_tel, .cot_email, .cot_people, .cot_whatsapp {
    position: relative;
    padding-left: 25px;
    display: block;
    margin-bottom: 3px;
    padding-top: 0.2rem;
    text-align: left;
}
.cot_add::before   { content: "\1F4CD"; }
.cot_people::before{ content: "\1F464"; }
.cot_email::before { content: "\2709";  }
.cot_tel::before   { content: "\1F4DE"; }
.cot_whatsapp::before { content: "\1F4AC"; }
.cot_add::before, .cot_people::before, .cot_email::before,
.cot_tel::before, .cot_whatsapp::before {
    position: absolute; left: 0; top: 0.15rem;
    font-size: 14px;
    filter: grayscale(1) brightness(2.2);
}

.pblist li a {
    display: block;
    padding-bottom: 0.6rem;
    line-height: 1rem;
    color: #fff;
    font-size: 0.9rem;
}
.pblist li a:hover { color: #000; }

.left_share { padding-top: 10px; }
/* legacy letter-square rules retired: footer now uses .sicons-dark brand badges */

.footer_right { position: relative; z-index: 5; padding: 0 30px; }
.footer_right::before { content: none; }
.footer_right img { margin-top: 2.6rem; margin-bottom: 15px; width: 190px; }
.footer_right p { font-size: 14px; color: #fff; line-height: 22px; }

.footercop {
    width: 100%;
    border-top: 1px #777 solid;
    padding-top: 1rem;
    text-align: center;
    padding-bottom: 1rem;
    margin-top: 1rem;
}

/* ===================== gallery page ===================== */
.page-head {
    background: #fff;
    padding: 2rem 0 1rem;
    border-bottom: 1px solid #eee;
}
.page-head .webtitle { text-align: left; padding-bottom: 0; }
.gallery {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    display: flex;
    flex-wrap: wrap;
}
.gallery li {
    width: 48%;
    margin: 0 2% 2rem 0;
    border-top: 5px solid var(--red);
    background: #fff;
}
.gallery li:nth-child(2n) { margin-right: 0; }
.gallery li img {
    width: 100%;
    display: block;
    height: 420px;
    object-fit: cover;
    object-position: center top;
}
@media (max-width: 767.98px) {
    .gallery li { width: 100%; margin-right: 0; }
    .gallery li img { height: 300px; }
}

/* ===================== products page ===================== */
.breadcrumb {
    width: 100%;
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.875rem;
}
.breadcrumb .crumbin { width: 96%; max-width: 1100px; margin: 0 auto; color: #888; }
.breadcrumb a { display: inline-block; padding: 0.55rem 0; color: #333; }
.breadcrumb a:hover { color: var(--red); }

.prodwrap {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    overflow: hidden;
}
.prodsider { float: left; width: 26%; }
.prodmain { float: right; width: 71%; }

.sider-title {
    background: var(--red);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1rem;
    padding: 1.1rem 0;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.sider-list { border: 1px solid #e5e5e5; border-top: none; background: #fff; margin-bottom: 1.6rem; }
.sider-list li { border-bottom: 1px solid #e5e5e5; }
.sider-list li:last-child { border-bottom: none; }
.sider-list li a {
    display: block;
    position: relative;
    padding: 0.65rem 0.8rem 0.65rem 1.6rem;
    color: #444;
    font-size: 0.9rem;
    line-height: 1.1rem;
}
.sider-list li a::before {
    content: "\25B8";
    position: absolute;
    left: 0.75rem;
    top: 0.62rem;
    color: var(--red);
}
.sider-list li a:hover { color: var(--red); background: #fafafa; }

.sider-inquiry { border: 1px solid #e5e5e5; background: #fff; margin-top: 1.6rem; }
.inquiry-title {
    background: #e9e9e9;
    color: #333;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.8rem 1rem;
}
.inquiry-body { padding: 0.9rem 1rem 1.1rem; }
.inquiry-body p { color: #666; font-size: 0.85rem; line-height: 1.5rem; margin-bottom: 0.9rem; }
.inquiry-btn {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-size: 0.9rem;
    padding: 0.45rem 1.1rem;
}
.inquiry-btn:hover { background: #000; color: #fff; }

.prod-title { font-size: 1.75rem; color: #222; margin-bottom: 0.4rem; }
.prod-intro { color: #555; font-size: 0.95rem; line-height: 1.6rem; margin-bottom: 1.6rem; }

.prodgrid { display: flex; flex-wrap: wrap; margin-right: -2%; }
.prodcard {
    width: 48%;
    margin: 0 2% 2rem 0;
    background: #fff;
    border-top: 5px solid var(--red);
    display: block;
}
.prodcard:nth-child(2n) { margin-right: 0; }
.pc-img { display: block; background: #ececec; }
.pc-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: opacity .3s;
}
.prodcard:hover .pc-img img { opacity: .85; }
.pc-txt { display: block; background: #d9d9d9; padding: 0.8rem 1rem 1rem; }
.pc-txt strong {
    display: block;
    text-align: center;
    color: #1d1d1d;
    font-size: 1rem;
    margin-bottom: 0.45rem;
}
.pc-txt em {
    display: block;
    font-style: normal;
    color: #444;
    font-size: 0.85rem;
    line-height: 1.5rem;
    text-align: justify;
}
.prodcard:hover .pc-txt strong { color: var(--blue); }

/* ===================== factory page ===================== */
.fhero { width: 100%; max-height: 420px; overflow: hidden; }
.fhero img { width: 100%; height: 420px; object-fit: cover; display: block; }
.factory-intro { width: 96%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 0 1rem; }
.factory-intro h2 { font-size: 1.75rem; color: #222; margin-bottom: 0.8rem; }
.factory-intro p { color: #555; line-height: 1.8rem; font-size: 0.95rem; margin-bottom: 0.8rem; text-align: justify; }
.fsec {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 0 1.5rem;
    border-top: 1px solid #eee;
}
.fsec .webtitle { text-align: left; padding-bottom: 0.4rem; }
.fsec .secsub { color: #777; font-size: 0.9rem; line-height: 1.5rem; margin-bottom: 1.2rem; }
.fgallery { display: flex; flex-wrap: wrap; margin-right: -2%; }
.fgallery li {
    width: 48%;
    margin: 0 2% 1.6rem 0;
    border-top: 5px solid var(--red);
    background: #fff;
    overflow: hidden;
}
.fgallery li:nth-child(2n) { margin-right: 0; }
.fgallery li img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}
.fgallery li:hover img { opacity: .85; }

.fvideos { display: flex; flex-wrap: wrap; justify-content: center; margin-right: -2%; }
.fvideos video {
    width: 48%;
    margin: 0 2% 1.6rem 0;
    display: block;
    background: #000;
    border-top: 5px solid var(--red);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.fvideos video:nth-child(2n) { margin-right: 0; }

@media (max-width: 767.98px) {
    .fgallery li { width: 100%; margin-right: 0; }
    .fhero img { height: 240px; }
    .fvideos video { width: 100%; margin-right: 0; }
}

@media (max-width: 767.98px) {
    .prodsider, .prodmain { float: none; width: 100%; }
    .prodmain { margin-top: 2rem; }
    .prodcard { width: 100%; margin-right: 0; }
}

/* ===================== dealer page ===================== */
.dlhero {
    background: var(--red);
    color: #fff;
    padding: 2.6rem 0 2.4rem;
}
.dlhero .dlin {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}
.dlhero h1 { margin: 0; font-size: 2.2rem; line-height: 1.15; letter-spacing: .04em; }
.dlhero p { margin: .6rem 0 0; opacity: .92; }

.dsec {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.6rem 15px 0;
}
.dlead { color: #555; margin-top: 1rem; line-height: 1.8; }

.dcards {
    display: flex;
    flex-wrap: wrap;
    margin-right: -2%;
    margin-top: 1.6rem;
}
.dgrid6 li {
    width: 48%;
    margin: 0 2% 1.2rem 0;
    background: #fff;
    border: 1px solid #eee;
    border-top: 4px solid var(--red);
    padding: 1.05rem 1.15rem;
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    list-style: none;
}
.dgrid6 li:nth-child(2n) { margin-right: 0; }
.dnum {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: Poppins, sans-serif;
    font-size: .95rem;
}
.dnum img { width: 1.4rem; height: 1.4rem; display: block; }
.dnum.icn { background: #fff; border: 1px solid #e0e0e0; }
.dcards li strong { display: block; margin-bottom: .25rem; color: #222; font-size: 1.02rem; }
.dcards li .txt { display: block; color: #666; font-size: .95rem; line-height: 1.65; padding-top: .12rem; }

.dtable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background: #fff;
}
.dtable th {
    background: var(--blue);
    color: #fff;
    text-align: left;
    padding: .75rem 1rem;
    font-weight: 500;
    border: 1px solid var(--blue);
}
.dtable td { border: 1px solid #e8e8e8; padding: .72rem 1rem; color: #444; }
.dtable tr:nth-child(even) td { background: #fafafa; }

.dchips {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}
.dchips li {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid var(--red);
    padding: .6rem 1.15rem;
    color: #444;
}

.dsteps {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem;
    padding: 0;
}
.dsteps li {
    counter-increment: step;
    flex: 1 1 125px;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid var(--blue);
    padding: .9rem .8rem .85rem;
    font-size: .93rem;
    color: #555;
    text-align: center;
}
.dsteps li::before {
    content: "0" counter(step);
    display: block;
    color: var(--red);
    font-weight: 700;
    font-size: 1.12rem;
    margin-bottom: .3rem;
    font-family: Poppins, sans-serif;
}

.dsupport {
    display: flex;
    flex-wrap: wrap;
    margin-right: -2%;
    margin-top: 1.6rem;
}
.dsupport li {
    width: 23.5%;
    margin: 0 2% 1.4rem 0;
    list-style: none;
    background: #fff;
    border-top: 4px solid var(--red);
}
.dsupport li strong { display: block; padding: .9rem 1rem .75rem; color: #222; font-size: 1rem; }
.dsupport li span {
    display: block;
    background: #d9d9d9;
    color: #333;
    padding: .8rem 1rem;
    font-size: .93rem;
    line-height: 1.65;
    min-height: 6.2em;
}

.dcta {
    max-width: 1100px;
    margin: 2.6rem auto 0;
    padding: 2.4rem 15px 2.6rem;
    text-align: center;
    background: var(--blue);
    color: #fff;
}
.dcta h2 { margin: 0 0 .55rem; font-size: 1.55rem; }
.dcta p { opacity: .9; margin: 0 0 .4rem; }
.dbtn {
    display: inline-block;
    background: var(--red);
    color: #fff;
    padding: .68rem 1.9rem;
    margin: .9rem .35rem 0;
    font-weight: 600;
    border-radius: 2px;
}
.dbtn:hover { color: #fff; opacity: .92; }
.dbtn2 {
    background: none;
    border: 1px solid rgba(255,255,255,.75);
    color: #fff;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .dlhero h1 { font-size: 1.6rem; }
    .dsec { padding-top: 2rem; }
    .dgrid6 li, .dsupport li { width: 100%; margin-right: 0; }
    .dsupport li span { min-height: 0; }
    .dsteps li { flex: 1 1 100%; }
}

/* ===================== language switcher ===================== */
.lang-switch {
    position: absolute;
    right: 495px;
    top: 30px;
    z-index: 2000;
}
.lang-cur {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    border: 1px solid #e3e3e3;
    padding: .34rem .7rem;
    cursor: pointer;
    font-family: inherit;
    font-size: .92rem;
    color: #333;
}
.lang-cur img { width: 20px; height: 20px; border-radius: 50%; display: block; }
.lang-cur i {
    font-style: normal;
    color: var(--red);
    font-size: .75rem;
    line-height: 1;
}
.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    list-style: none;
    margin: 0;
    padding: .35rem 0;
    width: 175px;
    background: #fff;
    border: 1px solid #e3e3e3;
    box-shadow: 0 8px 22px rgba(0,0,0,.13);
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu,
.lang-switch.open .lang-menu { display: block; }
.lang-menu li a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem 1rem;
    color: #444;
    font-size: .93rem;
}
.lang-menu li a:hover { background: #f6f6f6; color: var(--red); }
.lang-menu li.active a { color: var(--red); font-weight: 600; }
.lang-menu img { width: 18px; height: 18px; border-radius: 50%; display: block; }

@media (max-width: 991.98px) {
    #header { position: relative; }
    .lang-switch { right: 56px; top: 17px; transform: none; }
    .lang-cur { padding: .25rem .55rem; font-size: .85rem; }
}

/* ===================== contact page ===================== */
.cwrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}
.cintro {
    max-width: 900px;
    margin: 0 auto 2.2rem;
    text-align: center;
    color: #555;
    font-size: .98rem;
    line-height: 1.75;
}
.ccards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 2.6rem;
}
.ccard {
    background: #fff;
    border: 1px solid #ececec;
    border-top: 3px solid var(--red);
    padding: 1.5rem 1.2rem;
    text-align: center;
}
.ccard .ic {
    width: 46px;
    height: 46px;
    margin: 0 auto .75rem;
    background: #fbecec;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccard .ic svg { width: 21px; height: 21px; fill: var(--red); }
.ccard h4 { margin: 0 0 .35rem; font-size: .95rem; color: #222; }
.ccard p, .ccard a { font-size: .88rem; color: #666; line-height: 1.55; word-break: break-word; }
.ccard a:hover { color: var(--red); }
.cmain {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 24px;
    margin-bottom: 2.8rem;
}
.cguid, .cformbox {
    background: #fff;
    border: 1px solid #ececec;
    padding: 1.7rem;
}
.cgtitle, .cftitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--red);
    display: inline-block;
}
.cguid ul { margin: 0; padding-left: 1.1rem; }
.cguid li { font-size: .89rem; color: #555; line-height: 1.7; margin-bottom: .55rem; }
.cformbox label {
    display: block;
    font-size: .84rem;
    color: #333;
    margin: .85rem 0 .3rem;
    font-weight: 500;
}
.cformbox input, .cformbox select, .cformbox textarea {
    width: 100%;
    padding: .58rem .75rem;
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: .9rem;
    background: #fafafa;
}
.cformbox input:focus, .cformbox select:focus, .cformbox textarea:focus {
    outline: none;
    border-color: var(--red);
    background: #fff;
}
.cformbox textarea { min-height: 120px; resize: vertical; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cbtn {
    margin-top: 1.2rem;
    background: var(--red);
    color: #fff;
    border: none;
    padding: .72rem 2.2rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .04em;
    font-family: inherit;
}
.cbtn:hover { background: #b81d15; }
.csups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
}
.csups li {
    background: #f5f5f6;
    padding: 1.25rem 1.15rem;
    font-size: .87rem;
    color: #555;
    line-height: 1.65;
}
.csups li strong { display: block; color: #222; font-size: .93rem; margin-bottom: .35rem; }

@media (max-width: 991.98px) {
    .ccards { grid-template-columns: repeat(2, 1fr); }
    .cmain { grid-template-columns: 1fr; }
    .csups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ccards, .csups { grid-template-columns: 1fr; }
    .frow { grid-template-columns: 1fr; }
}

/* ===================== contact page v2 (triton style) ===================== */
.thero { padding: .4rem 0 1.6rem; }
.thero h1 {
    font-size: 2.7rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}
.thero p {
    max-width: 940px;
    color: #444;
    font-size: .98rem;
    line-height: 1.85;
    margin: 0;
}
.chatband {
    background: #fff;
    padding: 2rem 0 2.4rem;
    margin-bottom: 2.6rem;
}
.chatband h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1.1rem;
}
.chatrow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.chatrow .lab {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: #111;
    margin-bottom: .7rem;
}
.chatrow p, .chatrow a {
    font-size: .93rem;
    color: #333;
    margin: 0;
}
.chatrow a:hover { color: var(--red); }
.sicons-dark { display: flex; gap: 13px; align-items: center; margin-top: .35rem; flex-wrap: wrap; justify-content: center; }
.sicons-dark .flex-br { flex-basis: 100%; height: 0; }
.sicons-dark a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sicons-dark a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
}
.sicons-dark a svg { width: 21px; height: 21px; fill: #fff; display: block; }
.sicons-dark a[aria-label="Facebook"]  { background: #1877F2; }
.sicons-dark a[aria-label="Instagram"] { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sicons-dark a[aria-label="X"]         { background: #111; }
.sicons-dark a[aria-label="TikTok"]    { background: #010101; }
.sicons-dark a[aria-label="LINE"]      { background: #06C755; }
.sicons-dark a[aria-label="LINE"] svg  { width: 30px; height: 30px; }
.sicons-dark a[aria-label="WhatsApp"]  { background: #25D366; }
.sicons-dark a[aria-label="WhatsApp"] svg { width: 28px; height: 28px; }
.footer-col .sicons-dark { margin-top: 1.1rem; }
.sicons-dark a[aria-label="LinkedIn"]  { background: #0A66C2; }
.nformwrap {
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 0 15px;
}
.nformwrap label {
    display: block;
    font-size: .84rem;
    color: #333;
    margin: .85rem 0 .3rem;
    font-weight: 500;
}
.nformwrap input, .nformwrap textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    font-family: inherit;
    font-size: .92rem;
}
.nformwrap select {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    font-family: inherit;
    font-size: .92rem;
}
.inpwrap { position: relative; }
.inpwrap svg {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    fill: #222;
    pointer-events: none;
}
.inpwrap input { padding-right: 38px; }
.nformwrap input:focus, .nformwrap textarea:focus {
    outline: none;
    border-color: #111;
    background: #f5f5f5;
}
.nformwrap textarea { min-height: 130px; resize: vertical; }
.socialstrip {
    background: #13293f;
    padding: 2.3rem 0;
}
.socialstrip .slab {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #2ba3ea;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.sicons-ring { display: flex; gap: 16px; }
.sicons-ring a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sicons-ring a svg { width: 19px; height: 19px; fill: #fff; }
.sicons-ring a:hover { background: #2ba3ea; border-color: #2ba3ea; }

#container.cpage { background: #fff; }

.cwrap.contact-hero {
    padding: 3rem 15px 2.6rem;
}
.contact-hero h1 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -.01em;
    margin: 0 0 1.5rem;
}

@media (max-width: 767.98px) {
    .contact-hero { padding: 1.8rem 15px 1.8rem; }
    .contact-hero h1 { font-size: 1.9rem; margin-bottom: 1rem; }
    .chatband h2 { font-size: 1.45rem; }
    .chatrow { grid-template-columns: 1fr; gap: 18px; }
}

/* ===================== responsive ===================== */
@media (max-width: 1199.98px) {
    .banner_txt  { top: 3%;  left: 44%; }
    .banner_txt1 { left: 44%; top: 3%; }
    .banner_txt2 { left: auto; right: 3%; top: 40%; }
    .banner_txt h1, .bannerinfo h1 { font-size: 1.5rem; line-height: 2rem; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .mainmenu > li > a { font-size: 0.9rem; padding: 0.7rem 1.1rem; }
}

@media (max-width: 991.98px) {
    #header { position: inherit; }
    #container { margin-top: 0; }

    .nav-toggle { display: block; }

    .top-nav {
        background: #fff;
        border-top: 1.5px solid #eee;
        margin-top: 0;
    }
    .mainmenu {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
    }
    .mainmenu.open { display: block; }
    .mainmenu > li > a {
        font-weight: 300;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(0,0,0,.1);
        color: #111;
        padding: 0.8rem 1.5rem;
    }
    .mainmenu > li.active > a,
    .mainmenu > li > a:hover,
    .mainmenu > li.open > a { color: var(--blue); background: none; }
    .dropdown-menu {
        display: none;
        position: static;
        background: #fff;
        box-shadow: none;
    }
    .dropdown-menu a { color: #111; border-bottom: 1px solid rgba(0,0,0,.05); }

    .banner_txt, .banner_txt1, .banner_txt2 { display: none; }

    .colleft, .colright { width: 100%; }
    .colleft { padding: 2rem 1rem 0 1rem; }
    .homeabout .webtitle { text-align: center; }

    .custom-imgcell { width: 40%; }
    .custom-txtcell { width: 60%; }

    .application ul > li { width: 50%; }
    .application ul > li:nth-child(2n) { border-right: 1px solid #7e7e7e; }
    .application ul > li span { font-size: 1rem; line-height: 1.4rem; }

    .footer-col { width: 33.3333%; }
    .footer_right { padding: 0; width: 100%; clear: both; margin-top: 1rem; }
    .footer_right::before { content: none; }
}

@media (max-width: 767.98px) {
    .webtitle { font-size: 1.25rem; }
    .mainpro ul > li { width: 49%; }
    .custom-imgcell { width: 100%; padding-bottom: 1rem; }
    .custom-imgcell.triangle span, .custom-imgcell.triangle1 span { display: none; }
    .custom-txtcell { width: 100%; }
    .application ul > li { width: 50%; }
}

@media (max-width: 575.98px) {
    .mainpro p { width: 90%; }
    .application ul > li { width: 100%; border-right: 1px solid #7e7e7e; }
    .footer-col { width: 100%; }
    .footer_right img { margin-top: 1rem; }
}


/* ===================== floating contact dock ===================== */
.float-dock {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3000;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.float-dock a.fd {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .18s ease;
    position: relative;
}
.float-dock a.fd:hover { background: #b81d15; transform: scale(1.08); }
.float-dock svg { width: 22px; height: 22px; fill: #fff; display: block; }
.fd-panel {
    position: absolute;
    right: 54px;
    top: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 8px;
    display: none;
}
.float-dock .fd:hover + .fd-panel, .fd-panel:hover { display: block; }
@media (max-width: 767px) {
    .float-dock { right: 8px; padding: 8px 6px; gap: 9px; }
    .float-dock a.fd { width: 38px; height: 38px; }
    .float-dock svg { width: 19px; height: 19px; }
}

/* hover labels on dock buttons */
.float-dock a.fd[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(.92);
    background: #111;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 9px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}
.float-dock a.fd[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* whatsapp qr code popup */
.fd-pop {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    padding: 14px 14px 10px;
    display: none;
    text-align: center;
}
.float-dock a.fd-wa:hover ~ .fd-pop-wa,
.float-dock a.fd-wx:hover ~ .fd-pop-wx,
.fd-pop:hover { display: block; }
.fd-pop::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 9px solid transparent;
    border-left-color: #fff;
}
.fd-pop img {
    width: 240px;
    height: auto;
    display: block;
    background: #fff;
}
.fd-pop span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-top: 8px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .fd-pop img { width: 170px; }
}