﻿
/* Top bar (every page) */
.site-topbar {
    height: 48px;
    background: #c40000;
    display: flex;
    align-items: center;
}

/* Header behavior (every page) */
#header.site-header {
    top: 48px;
    transition: top .25s ease;
    z-index: 9999;
}

    #header.site-header.is-at-top {
        top: 0;
    }


/*top info bar*/
.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.top-info-bar {
    background-color: #b81c22;
    height: 44px;
    display: flex;
    align-items: center;
}

.top-info-content {
    display: flex;
    align-items: center;
    gap: 25px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
}

    .info-item i {
        font-size: 14px;
        color: #fff;
    }

/* Mobile */
@media (max-width: 768px) {
    .top-info-content {
        justify-content: center;
        gap: 15px;
    }

    .info-item span {
        font-size: 12px;
    }
}


/* Hide scrollbar but allow scrolling */

/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Firefox */
html,
body {
    scrollbar-width: none;
}

/* IE & old Edge */
html,
body {
    -ms-overflow-style: none;
}




/* 🔴 Red Contact Bar */
.site-footer-contact {
    background: #c40000;
    color: #fff;
    padding: 15px 0;
    font-size: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .footer-contact-item i {
        font-size: 18px;
    }

/* Dark Footer */
#footer.site-footer {
    background: #111827;
    color: #fff;
}

.site-footer-top {
    padding: 60px 0 40px;
}

.footer-col h4 {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

    .footer-col ul li {
        margin-bottom: 10px;
    }

        .footer-col ul li a {
            color: #cbd5e1;
            text-decoration: none;
        }

            .footer-col ul li a:hover {
                color: #fff;
            }

/* Bottom Bar */
.site-footer-bottom {
    background: #0f172a;
    padding: 15px 0;
    font-size: 13px;
}

    .site-footer-bottom a {
        color: #cbd5e1;
        text-decoration: none;
    }

        .site-footer-bottom a:hover {
            color: #fff;
        }

/* Responsive */
@media (max-width: 768px) {
    .site-footer-contact .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .site-footer-bottom .container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}





/* Shared base for all 4 sections */
.products-section,
.news-section,
.projects-section,
.contact-section {
    position: relative;
    overflow: hidden;
    background: #fff ;/* white base */
}

    /* Keep your content above the background */
    .products-section > *,
    .news-section > *,
    .projects-section > *,
    .contact-section > * {
        position: relative;
        z-index: 2;
    }

    /* ===== PRODUCTS: Diagonal stripes + soft glow ===== */
.products-section {
    position: relative;
    background: #fff;
    overflow: hidden;
}

    .products-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: .42; /* elegant but visible */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%23ffffff'/%3E%3C!-- very light blueprint lines (whole background) --%3E%3Cg fill='none' stroke='%23b8c0c8' stroke-width='2' opacity='.35'%3E%3Cpath d='M140 720 L140 420 L420 250 L840 250 L980 340 L980 720 Z'/%3E%3Cpath d='M420 250 L420 720'/%3E%3Cpath d='M840 250 L840 720'/%3E%3Cpath d='M220 720 L900 720'/%3E%3Cpath d='M220 680 L900 680'/%3E%3Cpath d='M240 520 L360 520'/%3E%3Cpath d='M240 560 L360 560'/%3E%3Cpath d='M520 300 L780 300'/%3E%3Cpath d='M520 330 L780 330'/%3E%3Cpath d='M520 360 L780 360'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b8c0c8' stroke-width='2' opacity='.28'%3E%3Cpath d='M980 720 L980 380 L1180 260 L1480 260 L1540 330 L1540 720 Z'/%3E%3Cpath d='M1180 260 L1180 720'/%3E%3Cpath d='M1480 260 L1480 720'/%3E%3Cpath d='M1040 720 L1540 720'/%3E%3Cpath d='M1040 680 L1540 680'/%3E%3C/g%3E%3C!-- dotted highlight (left + right priority) --%3E%3Cg fill='%23c40000' opacity='.20'%3E%3Ccircle cx='120' cy='180' r='4'/%3E%3Ccircle cx='180' cy='210' r='4'/%3E%3Ccircle cx='240' cy='180' r='4'/%3E%3Ccircle cx='120' cy='250' r='4'/%3E%3Ccircle cx='180' cy='280' r='4'/%3E%3Ccircle cx='240' cy='250' r='4'/%3E%3Ccircle cx='120' cy='320' r='4'/%3E%3Ccircle cx='180' cy='350' r='4'/%3E%3Ccircle cx='240' cy='320' r='4'/%3E%3Ccircle cx='1360' cy='170' r='4'/%3E%3Ccircle cx='1420' cy='200' r='4'/%3E%3Ccircle cx='1480' cy='170' r='4'/%3E%3Ccircle cx='1360' cy='240' r='4'/%3E%3Ccircle cx='1420' cy='270' r='4'/%3E%3Ccircle cx='1480' cy='240' r='4'/%3E%3Ccircle cx='1360' cy='310' r='4'/%3E%3Ccircle cx='1420' cy='340' r='4'/%3E%3Ccircle cx='1480' cy='310' r='4'/%3E%3C/g%3E%3C!-- very subtle red guide lines (elegant accent) --%3E%3Cg fill='none' stroke='%23c40000' stroke-width='3' opacity='.12'%3E%3Cpath d='M420 250 L980 340'/%3E%3Cpath d='M1180 260 L1540 330'/%3E%3Cpath d='M120 620 C340 560 460 760 720 690 C980 620 1160 730 1480 660'/%3E%3C/g%3E%3C/svg%3E");
    }

    /* keep content above */
    .products-section > * {
        position: relative;
        z-index: 2;
    }
    /* ===== NEWS: Dots + “headline lines” ===== */
    .news-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: .26;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='900'%20viewBox='0%200%201600%20900'%3E%3Crect%20width='1600'%20height='900'%20fill='%23ffffff'/%3E%3Cdefs%3E%3Cpattern%20id='dots'%20width='28'%20height='28'%20patternUnits='userSpaceOnUse'%3E%3Ccircle%20cx='6'%20cy='6'%20r='2'%20fill='%23c40000'%20opacity='.35'/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20x='0'%20y='0'%20width='1600'%20height='900'%20fill='url(%23dots)'%20opacity='.35'/%3E%3Cg%20opacity='.45'%20fill='%23c40000'%3E%3Crect%20x='140'%20y='170'%20width='520'%20height='10'/%3E%3Crect%20x='140'%20y='200'%20width='420'%20height='10'/%3E%3Crect%20x='140'%20y='230'%20width='560'%20height='10'/%3E%3Crect%20x='980'%20y='240'%20width='420'%20height='10'/%3E%3Crect%20x='980'%20y='270'%20width='520'%20height='10'/%3E%3Crect%20x='980'%20y='300'%20width='360'%20height='10'/%3E%3C/g%3E%3Cpath%20d='M200%20740%20C500%20660%20780%20810%201100%20720%20C1320%20660%201430%20660%201520%20710'%20stroke='%23c40000'%20stroke-width='6'%20fill='none'%20opacity='.25'/%3E%3C/svg%3E");
    }

    /* ===== PROJECTS: “World / network arcs” (no external image needed) ===== */
    .projects-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: .25;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='900'%20viewBox='0%200%201600%20900'%3E%3Crect%20width='1600'%20height='900'%20fill='%23ffffff'/%3E%3Cg%20opacity='.28'%3E%3Ccircle%20cx='800'%20cy='450'%20r='310'%20fill='none'%20stroke='%23c40000'%20stroke-width='10'/%3E%3Ccircle%20cx='800'%20cy='450'%20r='230'%20fill='none'%20stroke='%23c40000'%20stroke-width='6'/%3E%3Ccircle%20cx='800'%20cy='450'%20r='150'%20fill='none'%20stroke='%23c40000'%20stroke-width='4'/%3E%3C/g%3E%3Cg%20fill='%23c40000'%20opacity='.22'%3E%3Ccircle%20cx='520'%20cy='390'%20r='4'/%3E%3Ccircle%20cx='610'%20cy='520'%20r='4'/%3E%3Ccircle%20cx='780'%20cy='330'%20r='4'/%3E%3Ccircle%20cx='980'%20cy='410'%20r='4'/%3E%3Ccircle%20cx='1080'%20cy='520'%20r='4'/%3E%3Ccircle%20cx='910'%20cy='590'%20r='4'/%3E%3C/g%3E%3Cg%20stroke='%23c40000'%20stroke-width='3'%20opacity='.18'%20fill='none'%3E%3Cpath%20d='M520%20390%20C650%20310%20720%20310%20780%20330'/%3E%3Cpath%20d='M610%20520%20C760%20610%20840%20610%20910%20590'/%3E%3Cpath%20d='M980%20410%20C1030%20360%201050%20360%201080%20520'/%3E%3C/g%3E%3C/svg%3E");
    }

    /* ===== CONTACT: Soft waves + subtle circles ===== */
    .contact-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: .2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='900'%20viewBox='0%200%201600%20900'%3E%3Crect%20width='1600'%20height='900'%20fill='%23ffffff'/%3E%3Cpath%20d='M0%20620%20C220%20550%20460%20690%20720%20620%20C980%20550%201180%20660%201600%20610%20L1600%20900%20L0%20900%20Z'%20fill='%23c40000'%20opacity='.18'/%3E%3Cpath%20d='M0%20530%20C260%20460%20500%20590%20780%20520%20C1060%20450%201260%20560%201600%20500'%20stroke='%23c40000'%20stroke-width='8'%20fill='none'%20opacity='.16'/%3E%3Cg%20opacity='.14'%20fill='none'%20stroke='%23c40000'%20stroke-width='5'%3E%3Ccircle%20cx='260'%20cy='250'%20r='90'/%3E%3Ccircle%20cx='260'%20cy='250'%20r='140'/%3E%3C/g%3E%3C/svg%3E");
    }





   /* product sub menu*/


#productsMegaWrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 114px; /* header height */
    display: none;
    z-index: 99999;
}

    #productsMegaWrapper .mega-inner {
        max-width: 1200px; /* SAME as your section container */
        margin: 0 auto;
        background: #fff;
        display: flex;
        border: 1px solid #eee;
        box-shadow: 0 15px 40px rgba(0,0,0,.15);
        min-height: 300px;
    }

.mega-col {
    padding: 20px;
}

.mega-cats {
    width: 250px;
    border-right: 2px solid #c40000;
}

.mega-list {
    flex: 1;
    padding-left: 25px;
}

.mega-preview {
    width: 300px;
    border-left: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mega-preview img {
        max-width: 100%;
        max-height: 220px;
        object-fit: contain;
    }

.mega-cat {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none;
    color: #111;
}

    .mega-cat.active {
        background: #c40000;
        color: #fff;
    }

.mega-item {
    display: block;
    padding: 8px;
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none;
    color: #111;
}

    .mega-item:hover {
        color: #c40000 !important;
    }



/* MAIN: 3 columns = cat | products | image */
#productsMegaWrapper .mega-inner {
    max-width: 1200px; /* match your section width */
    margin: 0 auto;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    display: flex;
    align-items: stretch;
}

/* LEFT category */
#productsMegaWrapper .mega-cats {
    flex: 0 0 240px; /* fixed width */
    border-right: 2px solid #c40000;
    padding: 16px;
}

/* MIDDLE products (takes remaining space) */
#productsMegaWrapper .mega-list {
    flex: 1 1 auto; /* IMPORTANT */
    min-width: 0; /* IMPORTANT (prevents overflow pushing layout) */
    padding: 16px 22px;
}

/* RIGHT preview image */
#productsMegaWrapper .mega-preview {
    flex: 0 0 320px; /* fixed width */
    border-left: 1px solid #eee;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2 columns inside the middle */
#productsMegaWrapper .mega-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* Make each column normal block flow */
#productsMegaWrapper #category-col-1,
#productsMegaWrapper #category-col-2 {
    min-width: 0;
}

/* Product item style */
#productsMegaWrapper .mega-item {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    text-decoration: none;
    color: #111;
}

/* preview image */
#productsMegaWrapper #megaPreviewImg {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}



/* scope to navbar only */
#navbar .has-submenu {
    position: relative;
}

/* dropdown box */
#navbar .nav-submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    padding: 10px 0;
    display: none;
    z-index: 99999;
}

    /* items */
    #navbar .nav-submenu li {
        list-style: none;
    }

    #navbar .nav-submenu a {
        display: block;
        padding: 10px 18px;
        text-decoration: none;
        color: #111;
        font-size: 14px;
    }

        #navbar .nav-submenu a:hover {
            color: #c40000;
            background: #fafafa;
        }

.nav-submenu li a {
    text-transform: none;
    border-bottom: 1px solid #f1f1f1;
    font-weight: 500;
}












/* --- Google Translate: always hide top banner --- */
iframe.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Keep the google widget hidden but functional */
.gtr-hidden {
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Remove powered by text / logo */
.goog-te-gadget {
    font-size: 0 !important;
}

    .goog-te-gadget span,
    .goog-logo-link,
    .goog-te-gadget a {
        display: none !important;
    }




.top-info-bar {
    background: #b81c22;
    color: #fff;
    height: 44px;
    display: flex;
    align-items: center;
}

.top-info-content {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-info-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.top-info-bar .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
}

.top-info-right {
    display: flex;
    align-items: center;
    gap: 10px;
}




.lang-dd {
    position: relative;
}

.lang-dd-btn {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

    .lang-dd-btn:hover {
        border-color: rgba(255,255,255,.6);
    }

.lang-dd-current {
    font-weight: 600;
}

.lang-dd-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 220px;
    background: #fff;
    color: #111;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    padding: 8px;
    display: none;
    z-index: 99999;
}

    .lang-dd-menu::before {
        content: "";
        position: absolute;
        right: 18px;
        top: -8px;
        width: 14px;
        height: 14px;
        background: #fff;
        transform: rotate(45deg);
        border-left: 1px solid #eee;
        border-top: 1px solid #eee;
    }

.lang-dd-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}

    .lang-dd-item:hover {
        background: #f6f7f9;
    }

    .lang-dd-item .flag {
        width: 26px;
        display: inline-flex;
        justify-content: center;
    }