* { box-sizing:border-box; margin:0; padding:0; font-family:'Poppins',sans-serif; }

/* Header */
header {
    background: linear-gradient(90deg,#3b82f6,#ff9800);
    color:#fff;
    padding:15px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:1000;
}
header h1 { font-size:1.35rem; }

.logo-img {
    max-height: 80px;   /* taller */
    max-width: 200px;   /* wider */
    width: auto;
    height: auto;
    display: block;
}

nav ul { display:flex; list-style:none; }
nav li { margin-left:20px; }
nav a { color:#fff; text-decoration:none; font-weight:500; transition:.2s; }
nav a:hover { opacity:.85; }
nav a.active { border-bottom:2px solid #ffeb3b; color:#ffeb3b; font-weight:600; }
.menu-toggle { display:none; flex-direction:column; justify-content:space-between; width:26px; height:20px; cursor:pointer; }
.menu-toggle span { height:3px; background:#fff; border-radius:3px; display:block; }
.close-btn { position:absolute; top:18px; right:18px; font-size:26px; color:#fff; cursor:pointer; display:none; }

@media(max-width:768px){
    header h1 { order:1; }
    .menu-toggle { display:flex; order:2; }
    nav ul {
        position:fixed; top:0; right:-280px; height:100%; width:280px;
        flex-direction:column; background:linear-gradient(90deg,#4C2C96,#4634A7);
        padding-top:80px; list-style:none; transition:right .25s; z-index:1200;
    }
    nav ul.active { right:0; }
    nav ul li { margin:20px 0; text-align:center; }
    nav li { margin-left:0; }
    .close-btn { display:block; }
}

/* Hero */
.hero {
    padding:100px 18px;
    text-align:center;
    color:#fff;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/bj-about-img.jpg') no-repeat center center;
    background-size:cover;min-height:50vh;display:flex;flex-direction:column;justify-content:center;
}
.hero h2{font-size:1.9rem;margin-bottom:18px;animation:fadeInDown 1s ease forwards}
.hero p{max-width:700px;margin:0 auto;font-size:1rem;color:#f0f0f0;animation:fadeInUp 1s ease forwards}
@media(max-width:768px){.hero{padding:70px 18px} .hero h2{font-size:1.5rem}}

/* Animations */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

/* About Section */
.jobs {
    padding:50px 18px 80px;
    background: #f9fafb;
}
.jobs h3 { text-align:center; margin-bottom:30px; font-size:1.6rem; color:#1f2937; }
.jobs-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 35px 30px;
    background: linear-gradient(145deg, #ffffff, #f0f4f8);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jobs-container::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: radial-gradient(circle, rgba(59,130,246,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events:none;
}
.jobs-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.15);
}
.jobs h4 {
    margin-top:25px;
    margin-bottom:12px;
    font-size:1.25rem;
    color:#1f2937;
    border-left:4px solid #3b82f6;
    padding-left:12px;
}
.jobs p { line-height:1.75; margin-bottom:16px; color:#374151; font-size:1rem; }
.jobs ul { padding-left:20px; margin-top:10px; list-style: none; }
.jobs ul li {
    position: relative;
    margin-bottom:12px;
    padding-left:28px;
    transition: color 0.3s ease;
}
.jobs ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left:0;
    top:0;
    color:#3b82f6;
}
.jobs ul li:hover { color:#1d4ed8; }

/* Footer */
footer { text-align:center; background:#0f1724; color:#9ca3af; padding:20px 10px; display:flex; justify-content:center; align-items:center; gap:12px; }
.fb-link { color:#3b82f6; font-weight:600; text-decoration:none; }
.fb-link:hover { color:#60a5fa; }

/* Scroll Up */
#scrollUp {
    display:none; position:fixed; bottom:40px; right:20px; z-index:1000;
    background:#3b82f6; color:#fff; border:none; border-radius:50%;
    width:45px; height:45px; font-size:22px; cursor:pointer;
    box-shadow:0 3px 6px rgba(0,0,0,0.2); transition:.3s;
}
#scrollUp:hover { background:#2563eb; }