/* FILE: public/css/app.css */

/* ── BASE ── */
html { scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; overflow-x: hidden; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #f7f4ef; }
::-webkit-scrollbar-thumb { background: #D42B2B; border-radius: 2px; }

/* ── NAV ── */
#navbar { background:#fff; border-bottom:1px solid #e8e4dd; box-shadow:0 2px 16px rgba(0,0,0,0.06); transition:box-shadow 0.3s ease; }
.nav-link {
    position: relative; font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(17,17,17,0.55); text-decoration: none;
    transition: color 0.25s; padding: 4px 0;
}
.nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: #D42B2B;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: #111; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* ── SECTION LABEL ── */
.lbl {
    font-family: 'Bebas Neue', sans-serif; font-size: .72rem;
    letter-spacing: .22em; color: #D42B2B; text-transform: uppercase;
}
.rl { width: 44px; height: 3px; background: #D42B2B; }

/* ── MARQUEE ── */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-track { animation: marquee 75s linear infinite; white-space: nowrap; display: inline-flex; gap: 0; }

/* ── PRODUCT CARD ── */
.prod-card {
    background: #fff; border: 1px solid #e8e4dd;
    transition: all 0.35s cubic-bezier(.2,.8,.2,1);
    overflow: hidden; cursor: pointer;
}
.prod-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(17,17,17,0.12);
    border-color: #D42B2B;
}
.prod-card:hover .prod-icon-bg { background: #D42B2B; }
.prod-card:hover .prod-icon { color: #fff; }
.prod-card:hover .prod-arrow { transform: translateX(6px); color: #D42B2B; }
.prod-card:hover .prod-name { color: #D42B2B; }
.prod-card:hover .prod-img { transform: scale(1.65); }
.prod-icon-bg {
    width: 56px; height: 56px; background: #f7f4ef;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
}
.prod-icon { color: #D42B2B; transition: color 0.3s; }
.prod-arrow { transition: all 0.3s; color: #8a8580; }
.prod-img-wrap { overflow: hidden; background: #fff; }
.prod-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; padding: 16px; transform: scale(1.5); }

/* ── WHY CARD ── */
.why-card {
    background: #fff; border: 1px solid #e8e4dd; padding: 32px;
    transition: all 0.3s; position: relative; overflow: hidden;
}
.why-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: #D42B2B;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
}
.why-card:hover::before { transform: scaleX(1); }
.why-card:hover { box-shadow: 0 16px 40px rgba(17,17,17,0.08); transform: translateY(-4px); }

/* ── VALUE CARD ── */
.val-card {
    background: #fff; border: 1px solid #e8e4dd; padding: 32px;
    transition: all .3s; position: relative; overflow: hidden;
}
.val-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: #D42B2B;
    transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.val-card:hover::after { transform: scaleX(1); }
.val-card:hover { box-shadow: 0 16px 40px rgba(17,17,17,0.08); transform: translateY(-4px); }

/* ── TIMELINE ── */
.timeline-item { position: relative; padding-left: 48px; }
.timeline-item::before {
    content: ''; position: absolute; left: 16px; top: 0; bottom: -32px;
    width: 2px; background: #e8e4dd;
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
    position: absolute; left: 9px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #D42B2B; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #D42B2B;
    z-index: 1;
}

/* ── CERT BADGE ── */
.cert-badge {
    background: #fff; border: 1px solid #e8e4dd; padding: 24px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: all .3s;
}
.cert-badge:hover { border-color: #D42B2B; box-shadow: 0 8px 24px rgba(212,43,43,.1); transform: translateY(-3px); }

/* ── FACILITY CARD ── */
.facility-card { overflow: hidden; }
.facility-card img { transition: transform .6s ease; }
.facility-card:hover img { transform: scale(1.04); }

/* ── CLIENT LOGO ── */
.client-logo {
    display: flex; align-items: center; justify-content: center;
    padding: 24px 32px; border: 1px solid #e8e4dd; background: #fff;
    transition: all 0.3s;
}
.client-logo:hover { border-color: #D42B2B; box-shadow: 0 8px 24px rgba(212,43,43,0.1); }

/* ── CLIENT CARD ── */
.client-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; background: #D42B2B;
    transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.client-card:hover::after { transform: scaleX(1); }
.client-card:hover .client-name { color: #D42B2B; }
.client-name { transition: color .3s; }

/* ── PERK CARD ── */
.perk-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: #D42B2B;
    transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.perk-card:hover::after { transform: scaleX(1); }

/* ── TESTIMONIAL CARD ── */
.testi-card::before {
    content: '\201C'; font-family: 'Bebas Neue', sans-serif; font-size: 6rem;
    color: #D42B2B; opacity: .12; position: absolute; top: -10px; left: 16px; line-height: 1;
}

/* ── CAREER BANNER ── */
.career-banner { background: #111; position: relative; overflow: hidden; }
.career-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(212,43,43,0.2) 0%, transparent 60%);
}
.career-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(212,43,43,0.04) 0, rgba(212,43,43,0.04) 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
}

/* ── CONTACT STRIP ── */
.contact-strip {
    background: #111;
    background-image: repeating-linear-gradient(45deg, rgba(212,43,43,0.04) 0, rgba(212,43,43,0.04) 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
}

/* ── FILTER TABS ── */
.cat-tab {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem;
    letter-spacing: 0.18em; padding: 10px 22px;
    border: 1px solid #e8e4dd; color: #8a8580;
    cursor: pointer; transition: all 0.25s;
    white-space: nowrap; background: #fff;
}
.cat-tab:hover { border-color: #D42B2B; color: #D42B2B; }
.cat-tab.active { background: #D42B2B; border-color: #D42B2B; color: #fff; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.afu { animation: fadeUp .7s ease forwards; }
.d1{animation-delay:.1s} .d2{animation-delay:.22s} .d3{animation-delay:.34s}

/* ── MOBILE MENU ── */
#mobileMenu { display: none; }

/* ── NEWS CARDS ── */
.featured-card { transition: all .35s cubic-bezier(.2,.8,.2,1); }
.featured-card:hover { box-shadow: 0 20px 56px rgba(17,17,17,.1); border-color: #D42B2B; }
.featured-card:hover .news-img { transform: scale(1.04); }
.featured-card:hover .read-arrow { transform: translateX(6px); }

.news-card .news-img { transition: transform .55s ease; }
.news-card:hover .news-img { transform: scale(1.05); }
.news-card:hover .read-arrow { transform: translateX(6px); }
.read-arrow { transition: transform .3s ease; }

/* ── CATEGORY BADGES ── */
.cat-badge {
    font-family: 'Bebas Neue', sans-serif; font-size: .62rem;
    letter-spacing: .15em; padding: 3px 10px; display: inline-block;
}
.cat-badge.product { background: rgba(212,43,43,.1); color: #D42B2B; border: 1px solid rgba(212,43,43,.25); }
.cat-badge.company { background: rgba(17,17,17,.07); color: #111; border: 1px solid rgba(17,17,17,.15); }
.cat-badge.industry { background: rgba(42,100,180,.08); color: #2a64b4; border: 1px solid rgba(42,100,180,.2); }
.cat-badge.award { background: rgba(180,130,0,.08); color: #a07800; border: 1px solid rgba(180,130,0,.2); }
.cat-badge.csr { background: rgba(42,157,143,.1); color: #2a9d8f; border: 1px solid rgba(42,157,143,.25); }

/* ── INFO CARD ── */
.info-card { background:#fff; border:1px solid #e8e4dd; padding:28px; transition:all .3s; position:relative; overflow:hidden; }
.info-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#D42B2B; transform:scaleY(0); transform-origin:top; transition:transform .4s; }
.info-card:hover::after { transform:scaleY(1); }
.info-card:hover { box-shadow:0 12px 36px rgba(17,17,17,.08); transform:translateY(-3px); }

/*FILTER */

    .filter-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        border: 1.5px solid #e2e0db;
        border-radius: 12px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #2a2926;
        cursor: pointer;
        width: 100%;
        transition: border-color .2s, box-shadow .2s, background .15s;
        user-select: none;
    }
    .filter-btn:hover {
        border-color: #b5b3ae;
        box-shadow: 0 2px 8px rgba(0,0,0,.07);
    }
    .filter-btn.active {
        border-color: #1a1a1a;
        background: #1a1a1a;
        color: #fff;
    }
    .filter-btn.active .filter-icon,
    .filter-btn.active .chevron { color: #fff; }
    .filter-btn.active .chevron { transform: rotate(180deg); }

    .filter-icon { color: #6b6964; flex-shrink: 0; transition: color .2s; }
    .btn-label   { flex: 1; text-align: left; }

    .chevron {
        color: #9a9791;
        flex-shrink: 0;
        transition: transform .25s cubic-bezier(.4,0,.2,1), color .2s;
    }

    .filter-sheet {
        position: absolute;
        top: calc(100% + 8px);
        left: 0; right: 0;
        background: #fff;
        border: 1.5px solid #e2e0db;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
        z-index: 50;
        overflow: hidden;
        transform-origin: top center;
        transform: scaleY(0.92) translateY(-6px);
        opacity: 0;
        pointer-events: none;
        transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    }
    .filter-sheet.open {
        transform: scaleY(1) translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 12px;
        border-bottom: 1px solid #f0ede9;
    }
    .sheet-title {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9a9791;
    }
    .clear-btn {
        font-size: 12px;
        font-weight: 500;
        color: #6b6964;
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 6px;
        transition: background .15s, color .15s;
    }
    .clear-btn:hover { background: #f4f3ef; color: #2a2926; }
    .hidden-clear { visibility: hidden; pointer-events: none; }

    .option-list {
        padding: 8px;
        max-height: 300px;
        overflow-y: auto;
    }
    .option-list::-webkit-scrollbar { width: 4px; }
    .option-list::-webkit-scrollbar-thumb { background: #e2e0db; border-radius: 4px; }

    .sector-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: background .15s;
        border: 1.5px solid transparent;
        margin-bottom: 2px;
    }
    .sector-option:hover    { background: #f7f6f3; }
    .sector-option.selected { background: #f0f9f0; border-color: #b9e4bc; }

    .option-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .option-name { flex: 1; font-size: 14px; font-weight: 400; color: #2a2926; }
    .sector-option.selected .option-name  { font-weight: 500; color: #1b5e20; }

    .option-count { font-size: 11px; color: #b5b3ae; font-weight: 500; }
    .sector-option.selected .option-count { color: #4caf50; }

    .check-icon { opacity: 0; color: #4caf50; transition: opacity .15s; flex-shrink: 0; }
    .sector-option.selected .check-icon { opacity: 1; }

    /*HIDE NUMBER INPUT ARROWS */
    
    .phone-input::-webkit-outer-spin-button,
    .phone-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    .phone-input {
      -moz-appearance: textfield;
    }
    
    /*Blog */
    
.attachment__name,
.attachment__size {
  display: none;
}

.prose table,
.prose th,
.prose td {
  font-family: 'Barlow', sans-serif !important;
}
    
.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}