/* ====== GENERAL ====== */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

a {
    text-decoration: none;
}

/* ====== HEADER ====== */
.main-header {
    width: 100%;
    background: #001f3f;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 20px;
    flex-wrap: wrap;
}

/* Logo */
.logo a {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

/* Navigation */
.main-nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-nav ul li a {
    color: #fff;
    padding: 8px 12px;
    display: inline-block;
}

/* Dropdown */
.has-dropdown {
    position: relative;
}

.has-dropdown .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #001f3f;
    color: #fff;
    list-style: none;
    padding: 5px 0;
    min-width: 180px;
    display: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
}

.has-dropdown.show .dropdown {
    display: block;
}

.dropdown li a {
    display: block;
    padding: 8px 15px;
    color: #001f3f;
}

.dropdown li a:hover {
    background: #f2f2f2;
    color:#001f3f;
}

/* Search */
.header-search {
    display: flex;
    gap: 5px;
}

.header-search input {
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
    outline: none;
}

.header-search button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #fff;
    color: #fff;
    cursor: pointer;
}

/* Hamburger menu for mobile */
.menu-toggle {
    display: none;
    font-size: 26px;
    cursor: pointer;
    color: #fff;
}

/* ====== RESPONSIVE ====== */
@media(max-width: 900px) {
    .main-nav {
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }
    .main-nav.open {
        display: flex;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }
    .has-dropdown .dropdown {
        position: relative;
        top: 0;
        box-shadow: none;
    }
    .header-search {
        width: 100%;
        margin-top: 10px;
    }
    .menu-toggle {
        display: block;
    }
}
    body{margin:0;font-family:Arial, sans-serif;background:#f8f9fa;color:#333;}
a{text-decoration:none;color:#001f3f;}
h2{margin:15px 0;font-size:22px;color:#001f3f;}

/* -------------------- HERO SLIDER -------------------- */
/* ================= HERO CAROUSEL ================= */

.hero-carousel {
    position: relative;
    max-width: 1200px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 12px;
}

/* Wrapper */
.carousel-wrapper {
    overflow: hidden;
    width: 100%;
}

/* Track */
.carousel-track {
    display: flex;
    transition: transform 0.6s ease;
}

/* Slide */
.carousel-slide {
    position: relative;
    min-width: 100%;
    height: 420px;
    display: block;
    text-decoration: none;
    color: #fff;
}

/* Image perfect fit */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* KEY FIX */
    display: block;
}

/* Dark gradient overlay */
.carousel-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.25),
        transparent
    );
}

/* Caption */
.carousel-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    max-width: 70%;
}

/* Category */
.carousel-caption .category {
    background: #ff6b00;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Title */
.carousel-caption h3 {
    margin: 12px 0 6px;
    font-size: 28px;
    line-height: 1.3;
}

/* Date */
.carousel-caption .post-date {
    font-size: 14px;
    color: #fff;
    opacity: 0.9;
}

/* Hover effect */
.carousel-slide:hover img {
    transform: scale(1.03);
    transition: transform 0.6s ease;
}

/* Navigation buttons */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 28px;
    padding: 12px 16px;
    cursor: pointer;
    z-index: 5;
    border-radius: 50%;
}

.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0,0,0,0.75);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .carousel-slide {
        height: 280px;
    }

    .carousel-caption {
        left: 16px;
        bottom: 16px;
        max-width: 90%;
    }

    .carousel-caption h3 {
        font-size: 20px;
    }
}

/* -------------------- MAIN LAYOUT -------------------- */
.main-container{display:flex;max-width:1200px;margin:0 auto;gap:30px;flex-wrap:wrap;}
.main-left{flex:3;min-width:720px;display:flex;flex-direction:column;gap:30px;}
.main-right{flex:1;min-width:260px;display:flex;flex-direction:column;gap:22px;}

/* Latest news list */
.latest-news {
    margin-bottom: 40px;
}

.latest-news h2 {
    font-size: 24px;
    color: #001f3f;
    margin-bottom: 15px;
    border-bottom: 2px solid #001f3f;
    display: inline-block;
    padding-bottom: 5px;
}

.latest-news ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-news li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.latest-news li:hover {
    transform: translateY(-3px);
}

.latest-news img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.news-info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.category-tag {
    display: inline-block;
    background: #001f3f;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.news-info h3 {
    margin: 3px 0 5px;
    font-size: 18px;
}

.news-info h3 a {
    color: #001f3f;
    text-decoration: none;
}

.news-info h3 a:hover {
    color: #ff6b00;
}

.post-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
}

.post-date {
    font-size: 12px;
    color: #999;
}

/* Banner styling */
.banner {
    margin: 10px 0;           /* reduces top/bottom space */
    padding: 0;               /* remove any extra padding */
    overflow: hidden;         /* avoid overflow if image slightly larger */
    border-radius: 6px;       /* keep smooth corners */
}

.banner img {
    width: 100%;
    height: 180px;            /* adjust height as needed */
    object-fit: cover;        /* ensures image covers the box without stretching */
    display: block;
}


/* Contributions grid */
.contributions .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.contributions .grid-item{background:#fff;padding:10px;border-radius:6px;transition:transform 0.3s;}
.contributions .grid-item:hover{transform:scale(1.03);}
.contributions .grid-item img{width:100%;height:160px;object-fit:cover;border-radius:4px;}

/* Publications */
.publications .pub-grid{display:flex;gap:20px;}
.pub-left{flex:2;display:flex;flex-direction:column;gap:15px;}
.pub-right{flex:1;display:flex;flex-direction:column;gap:10px;}
.pub-item img{width:100%;height:250px;object-fit:cover;border-radius:4px;}
.pub-item-small img{width:100%;height:100px;object-fit:cover;border-radius:4px;}

.upcoming-events {
    background: #f8f9fb;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Arial', sans-serif;
}

.upcoming-events h2 {
    font-size: 20px;
    color: #001f3f; /* navy header */
    margin-bottom: 15px;
    border-bottom: 2px solid #001f3f;
    display: inline-block;
    padding-bottom: 4px;
}

.upcoming-events ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
}

.upcoming-events li {
    background: #fff;
    width: 150px;      /* square box width */
    height: 150px;     /* square box height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 10px;
    cursor: pointer;
}

.upcoming-events li:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.upcoming-events .event-date {
    font-size: 12px;
    font-weight: bold;
    color: #001f3f;         /* navy text */
    background: #e6ebf5;     /* light navy background */
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.upcoming-events a {
    color: #001f3f;         /* navy text */
    font-size: 14px;
    text-decoration: none;
}

.upcoming-events a:hover {
    text-decoration: underline;
}

/* MOBILE */
@media(max-width: 768px){
    .upcoming-events ul {
        justify-content: center;
    }
    .upcoming-events li {
        width: 120px;
        height: 120px;
    }
}


/* Sidebar widgets */
.widget{background:#fff;padding:15px;border-radius:6px;}
.widget input[type=email]{width:100%;padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px;}
.widget button{width:100%;padding:8px;background:#001f3f;color:#fff;border:none;border-radius:4px;cursor:pointer;}
.widget .social-icons{display:flex;gap:10px;font-size:22px;justify-content:center;}
.widget .social-icons a{display:inline-block;color:#001f3f;background:#f0f0f0;padding:6px;border-radius:50%;}
.widget.recent-news {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.widget.recent-news h3 {
    margin-bottom: 12px;
    color: #001f3f;
    font-size: 18px;
    border-bottom: 2px solid #001f3f;
    display: inline-block;
    padding-bottom: 4px;
}

.widget.recent-news ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget.recent-news li a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: #001f3f;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget.recent-news li a:hover {
    transform: translateX(4px);
    color: #001f3f;
}

.widget.recent-news img {
    width: 70px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.widget.recent-news .news-text {
    display: flex;
    flex-direction: column;
}

.widget.recent-news .news-date {
    font-size: 11px;
    color: #555;
    margin-bottom: 4px;
}

.widget.recent-news .news-title {
    font-size: 14px;
    font-weight: 500;
}
.widget.maritime-info {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.widget.maritime-info h3 {
    color: #001f3f; /* navy blue */
    font-size: 18px;
    border-bottom: 2px solid #001f3f;
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 12px;
}

.widget.maritime-info ul {
    list-style:none;
    padding:0;
    margin:0;
}

.widget.maritime-info ul li {
    margin-bottom: 12px;
}

.widget.maritime-info ul li p {
    font-size: 14px;
    color: #001f3f; /* navy blue text */
    line-height: 1.5;
    margin:0;
}

.widget.hot-trends {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.widget.hot-trends h3 {
    color: #001f3f;
    font-size: 18px;
    border-bottom: 2px solid #001f3f;
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 12px;
}

.widget.hot-trends .trend-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.widget.hot-trends .trend-tags a {
    display: inline-block;
    padding: 6px 12px;
    background: #001f3f;
    color: #fff;
    font-size: 13px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.widget.hot-trends .trend-tags a:hover {
    background: #fff;
    color: #001f3f;
    border: 1px solid #001f3f;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hot trends */
.trend-tags{display:flex;flex-wrap:wrap;gap:8px;}
.trend-tags span{background:#f2f4f7;padding:5px 10px;border-radius:4px;font-size:13px;}

/* Responsive */
@media(max-width:1000px){.main-left{min-width:100%;}.main-right{min-width:100%;}}
@media(max-width:600px){.hero-caption{max-width:90%;bottom:20px;left:15px;} .hero-caption h2{font-size:20px;}}

.widget.contact-us {
    background: #001f3f; /* navy background */
    color: #fff;
    padding: 18px;
    border-radius: 6px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.widget.contact-us h3 {
    font-size: 18px;
    margin-bottom: 12px;
    border-bottom: 2px solid #fff; /* underline effect */
    display: inline-block;
    padding-bottom: 4px;
}

.widget.contact-us p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.widget.contact-us a {
    color: #ff6b00; /* accent color for link */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.widget.contact-us a:hover {
    color: #ffd580;
    text-decoration: underline;
}

/* Hover effect on widget */
.widget.contact-us:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* ================= HERO FEATURE ================= */
.hero-ceo {
    max-width:1200px;
    margin:80px auto 40px;
    position:relative;
    border-radius:8px;
    overflow:hidden;
}

.hero-ceo-slide img {
    width:100%;
    height:400px;
    object-fit:cover;
}

.hero-caption {
    position:absolute;
    bottom:20px;
    left:20px;
    background:rgba(0,31,63,0.7);
    padding:20px;
    border-radius:6px;
    color:#fff;
    max-width:70%;
}

.hero-caption .category {
    background:#fff;
    color:#001f3f;
    padding:3px 8px;
    font-size:12px;
    border-radius:3px;
    text-transform:uppercase;
    margin-bottom:10px;
    display:inline-block;
}

.hero-caption h2 {
    margin:5px 0;
    font-size:24px;
}

.hero-caption p {
    font-size:14px;
    margin:5px 0;
}

.btn-readmore {
    display:inline-block;
    margin-top:8px;
    padding:6px 12px;
    background:#fff;
    color:#001f3f;
    border-radius:4px;
    text-decoration:none;
    font-size:13px;
}

/* ================= PAGE LAYOUT ================= */
.ceo-page-container {
    max-width:1200px;
    margin:0 auto 60px;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.ceo-left {flex:3; min-width:300px;}
.ceo-sidebar {flex:1; min-width:260px; display:flex; flex-direction:column; gap:20px;}

/* ================= CEO GRID ================= */
.ceo-articles h2 {color:#001f3f; margin-bottom:15px;}
.ceo-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.ceo-card {
    background:#fff;
    border-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    overflow:hidden;
    transition:0.3s;
}

.ceo-card:hover {transform:translateY(-4px);}

.ceo-card img {width:100%; height:180px; object-fit:cover;}

.ceo-card-content {
    padding:15px;
}

.ceo-card-content .category {
    display:inline-block;
    background:#001f3f;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    margin-bottom:5px;
    text-transform:uppercase;
}

.ceo-card-content h3 {margin:5px 0; font-size:18px;}
.ceo-card-content h3 a {text-decoration:none; color:#001f3f;}
.ceo-card-content .post-date {font-size:12px; color:#555; margin-bottom:5px;}
.ceo-card-content .desc {font-size:14px; color:#555; line-height:1.5;}
.btn-readmore-small {
    display:inline-block;
    margin-top:5px;
    font-size:12px;
    color:#001f3f;
    text-decoration:underline;
}

/* ================= PAGINATION ================= */
.pagination {text-align:center; margin-top:25px;}
.pagination a {
    margin:0 5px;
    padding:6px 10px;
    border-radius:4px;
    background:#f2f4f7;
    color:#001f3f;
    text-decoration:none;
}
.pagination a.active, .pagination a:hover {
    background:#001f3f;
    color:#fff;
}

/* ================= SIDEBAR WIDGETS ================= */
.widget {
    background:#fff;
    padding:18px 20px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.widget h3 {margin-bottom:10px; color:#001f3f;}
.widget input {width:100%; padding:8px; margin-bottom:10px; border:1px solid #ccc; border-radius:4px;}
.widget button {width:100%; padding:8px; background:#001f3f; color:#fff; border:none; cursor:pointer; border-radius:4px;}
.widget button:hover {background:#004080;}
.widget .social-icons {display:flex; justify-content:center; gap:10px; font-size:18px;}
.widget .social-icons a {text-decoration:none;}
.widget.banner-widget img {width:100%; border-radius:6px;}

/* Recent News Sidebar */
.recent-news-item {
    display:flex;
    gap:10px;
    margin-bottom:10px;
}
.recent-news-item img {width:60px; height:60px; object-fit:cover; border-radius:4px;}
.recent-news-item .news-text {display:flex; flex-direction:column; justify-content:center;}
.news-date {font-size:11px; color:#555;}
.news-text a {color:#001f3f; font-size:13px; text-decoration:none;}

/* Responsive */
@media(max-width:900px){
    .ceo-page-container {flex-direction:column;}
    .hero-caption {max-width:90%;}
}
/* ================= MAIN BANNER ================= */
.contrib-banner {
    position:relative;
    width:100%;
    max-width:1200px;
    margin:80px auto 40px;
    border-radius:8px;
    overflow:hidden;
}

.contrib-banner img {
    width:100%;
    height:350px;
    object-fit:cover;
}

.banner-caption {
    position:absolute;
    bottom:20px;
    left:20px;
    background:rgba(0,31,63,0.7);
    padding:20px;
    border-radius:6px;
    color:#fff;
}

.banner-caption h1 {
    margin:0 0 8px;
    font-size:28px;
}

.banner-caption p {
    font-size:14px;
}

/* ================= PAGE CONTAINER ================= */
.contrib-page-container {
    max-width:1200px;
    margin:0 auto 60px;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.contrib-left {flex:3;}
.contrib-sidebar {flex:1; display:flex; flex-direction:column; gap:20px;}

/* ================= CONTRIBUTION CARDS ================= */
.contrib-card {
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    margin-bottom:20px;
    transition:0.3s;
}

.contrib-card:hover {transform:translateY(-3px);}
.contrib-card img {width:100%; height:200px; object-fit:cover;}
.contrib-content {padding:15px;}
.contrib-content .category {
    display:inline-block;
    background:#001f3f;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    margin-bottom:6px;
    text-transform:uppercase;
}
.contrib-content h2 {margin:5px 0 8px; font-size:18px;}
.contrib-content h2 a {color:#001f3f; text-decoration:none;}
.contrib-content .post-date {font-size:12px; color:#555; margin-bottom:8px;}
.contrib-content .desc {font-size:14px; line-height:1.5; color:#555;}
.read-more {color:#ff6b00; text-decoration:none; font-size:13px;}

/* ================= PAGINATION ================= */
.pagination {text-align:center; margin-top:20px;}
.pagination a {
    display:inline-block;
    margin:0 5px;
    padding:6px 10px;
    border-radius:4px;
    background:#f2f4f7;
    color:#001f3f;
    text-decoration:none;
}
.pagination a.active, .pagination a:hover {
    background:#001f3f;
    color:#fff;
}

/* ================= SIDEBAR WIDGETS ================= */
.widget {
    background:#fff;
    padding:18px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.widget h3 {margin-bottom:10px; color:#001f3f;}
.widget input {width:100%; padding:8px; margin-bottom:10px; border-radius:4px; border:1px solid #ccc;}
.widget button {width:100%; padding:8px; background:#001f3f; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.widget button:hover {background:#004080;}

/* Latest News in Sidebar */
.news-item {display:flex; gap:10px; margin-bottom:10px;}
.news-item img {width:60px; height:60px; object-fit:cover; border-radius:4px;}
.news-text {display:flex; flex-direction:column; justify-content:center;}
.news-date {font-size:11px; color:#555;}
.news-text a {color:#001f3f; text-decoration:none; font-size:13px;}

/* Responsive */
@media(max-width:900px){
    .contrib-page-container {flex-direction:column;}
    .banner-caption {max-width:90%;}
}
/* ================= MAIN BANNER ================= */
.pub-banner {
    position: relative;
    max-width:1200px;
    margin:80px auto 40px;
    border-radius:8px;
    overflow:hidden;
}

.pub-banner img {
    width:100%;
    height:300px;
    object-fit:cover;
}

.banner-caption {
    position:absolute;
    bottom:15px;
    left:20px;
    background:rgba(0,31,63,0.7);
    padding:15px 20px;
    border-radius:6px;
    color:#fff;
}

.banner-caption h1 {margin:0 0 6px; font-size:28px;}
.banner-caption p {font-size:14px;}

/* ================= PAGE CONTAINER ================= */
.pub-page-container {
    max-width:1200px;
    margin:0 auto 60px;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.pub-left {flex:3;}
.pub-sidebar {flex:1; display:flex; flex-direction:column; gap:20px;}

/* ================= PUBLICATIONS GRID ================= */
.pub-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

.pub-card {
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    transition:0.3s;
}

.pub-card:hover {transform:translateY(-3px);}
.pub-card img {width:100%; height:180px; object-fit:cover;}
.pub-content {padding:12px 15px;}
.pub-content h2 {font-size:16px; margin:5px 0;}
.pub-content h2 a {color:#001f3f; text-decoration:none;}
.post-date {font-size:12px; color:#555; margin-bottom:6px;}
.desc {font-size:14px; color:#555; line-height:1.5;}
.read-more {color:#ff6b00; text-decoration:none; font-size:13px;}

/* ================= PAGINATION ================= */
.pagination {text-align:center; margin-top:20px;}
.pagination a {
    display:inline-block;
    margin:0 5px;
    padding:6px 10px;
    border-radius:4px;
    background:#f2f4f7;
    color:#001f3f;
    text-decoration:none;
}
.pagination a.active, .pagination a:hover {
    background:#001f3f;
    color:#fff;
}

/* ================= SIDEBAR WIDGETS ================= */
.widget {
    background:#fff;
    padding:18px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.widget h3 {margin-bottom:12px; color:#001f3f;}
.widget input {width:100%; padding:8px; margin-bottom:10px; border-radius:4px; border:1px solid #ccc;}
.widget button {width:100%; padding:8px; background:#001f3f; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.widget button:hover {background:#004080;}

/* Latest News in Sidebar */
.news-item {display:flex; gap:10px; margin-bottom:10px;}
.news-item img {width:60px; height:60px; object-fit:cover; border-radius:4px;}
.news-text {display:flex; flex-direction:column; justify-content:center;}
.news-date {font-size:11px; color:#555;}
.news-text a {color:#001f3f; text-decoration:none; font-size:13px;}

/* Responsive */
@media(max-width:900px){
    .pub-page-container {flex-direction:column;}
    .banner-caption {max-width:90%;}
}
/* ================= EVENTS BANNER ================= */
.events-banner {
    position: relative;
    max-width:1200px;
    margin:80px auto 40px;
    border-radius:8px;
    overflow:hidden;
}

.events-banner img {
    width:100%;
    height:300px;
    object-fit:cover;
}

.banner-caption {
    position:absolute;
    bottom:15px;
    left:20px;
    background:rgba(0,31,63,0.7);
    padding:15px 20px;
    border-radius:6px;
    color:#fff;
}

.banner-caption h1 {margin:0 0 6px; font-size:28px;}
.banner-caption p {font-size:14px;}

/* ================= PAGE CONTAINER ================= */
.events-container {
    max-width:1200px;
    margin:0 auto 60px;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.events-left {flex:3;}
.events-sidebar {flex:1; display:flex; flex-direction:column; gap:20px;}

/* ================= EVENTS GRID ================= */
.events-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

.event-card {
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    transition:0.3s;
}

.event-card:hover {transform:translateY(-3px);}
.event-card img {width:100%; height:180px; object-fit:cover;}
.event-content {padding:12px 15px;}
.event-content h2 {font-size:16px; margin:5px 0;}
.event-content h2 a {color:#001f3f; text-decoration:none;}
.event-date {font-size:12px; color:#555; margin-bottom:6px;}
.event-desc {font-size:14px; color:#555; line-height:1.5;}
.read-more {color:#ff6b00; text-decoration:none; font-size:13px;}

/* ================= PAGINATION ================= */
.pagination {text-align:center; margin-top:20px;}
.pagination a {
    display:inline-block;
    margin:0 5px;
    padding:6px 10px;
    border-radius:4px;
    background:#f2f4f7;
    color:#001f3f;
    text-decoration:none;
}
.pagination a.active, .pagination a:hover {
    background:#001f3f;
    color:#fff;
}

/* ================= SIDEBAR WIDGETS ================= */
.widget {
    background:#fff;
    padding:18px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.widget h3 {margin-bottom:12px; color:#001f3f;}
.widget input {width:100%; padding:8px; margin-bottom:10px; border-radius:4px; border:1px solid #ccc;}
.widget button {width:100%; padding:8px; background:#001f3f; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.widget button:hover {background:#004080;}

/* Latest News in Sidebar */
.news-item {display:flex; gap:10px; margin-bottom:10px;}
.news-item img {width:60px; height:60px; object-fit:cover; border-radius:4px;}
.news-text {display:flex; flex-direction:column; justify-content:center;}
.news-date {font-size:11px; color:#555;}
.news-text a {color:#001f3f; text-decoration:none; font-size:13px;}

/* Responsive */
@media(max-width:900px){
    .events-container {flex-direction:column;}
    .banner-caption {max-width:90%;}
}
.jobs-wrapper {
    max-width:1200px;
    margin:40px auto;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

/* LEFT JOB LIST */
.jobs-left {flex:3; display:grid; gap:20px;}
.job-card {
    display:flex;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    overflow:hidden;
    transition:0.3s;
}
.job-card:hover {transform:translateY(-2px);}
.job-img {width:160px; flex-shrink:0;}
.job-img img {width:100%; height:100%; object-fit:cover;}
.job-content {padding:18px; display:flex; flex-direction:column;}
.job-content h2 {font-size:18px; margin-bottom:6px;}
.job-content h2 a {text-decoration:none; color:#001f3f;}
.job-meta {font-size:13px; color:#666; margin-bottom:8px;}
.job-desc {font-size:14px; color:#444; line-height:1.6; margin-bottom:12px;}
.job-apply {
    display:inline-block;
    padding:8px 14px;
    background:#001f3f;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    margin-top:auto;
}
.job-apply:hover {background:#004080;}
.no-jobs {padding:20px; background:#fff; border-radius:6px;}

/* PAGINATION */
.pagination {text-align:center; margin-top:20px;}
.pagination a {
    display:inline-block;
    margin:0 5px;
    padding:6px 10px;
    border-radius:4px;
    background:#eee;
    color:#001f3f;
    text-decoration:none;
}
.pagination a.active, .pagination a:hover {
    background:#ff6b00;
    color:#fff;
}

/* ================= SIDEBAR ================= */
.jobs-sidebar {flex:1; display:flex; flex-direction:column; gap:22px;}
.widget {
    background:#fff;
    padding:18px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.widget h3 {margin-bottom:12px; color:#001f3f;}
.widget input {width:100%; padding:8px; margin-bottom:8px; border-radius:4px; border:1px solid #ccc;}
.widget button {width:100%; padding:8px; background:#ff6b00; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.widget button:hover {background:#e65c00;}
.widget.featured-jobs ul, .widget.job-filters ul {list-style:none; padding:0; margin:0;}
.widget.featured-jobs li, .widget.job-filters li {margin-bottom:6px;}
.widget.featured-jobs a, .widget.job-filters a {color:#001f3f; text-decoration:none;}
.widget.hiring-banner {background:#001f3f; color:#fff; text-align:center;}
.widget.hiring-banner a {color:#fff; text-decoration:underline; display:inline-block; margin-top:8px;}

/* Responsive */
@media(max-width:900px){
    .jobs-wrapper {flex-direction:column;}
    .job-card {flex-direction:column;}
    .job-img {width:100%; height:200px;}
}