/* =====================================================
   ZIALE WEBSITE STYLE SHEET
   Zambia Institute of Advanced Legal Education
   Government / Legal Institution Theme
===================================================== */


/* ===============================
   ROOT VARIABLES
================================ */

:root {

    --ziale-black: #111111;
    --ziale-red: #8B0000;
    --ziale-red-light: #b30000;
    --ziale-gray: #6c757d;
    --ziale-dark-gray: #343a40;
    --ziale-light-gray: #f5f5f5;
    --ziale-white: #ffffff;

    --shadow:
    0 10px 30px rgba(0,0,0,0.12);

    --transition:
    all .35s ease;

}


/* ===============================
   GLOBAL SETTINGS
================================ */


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:#333;

    background:
    var(--ziale-white);

    line-height:1.7;

}


a {

    text-decoration:none;

    transition:
    var(--transition);

}


img {

    max-width:100%;

}



/* ===============================
   TOP BAR
================================ */


.top-bar {

    background:
    var(--ziale-black);

    color:white;

    padding:
    10px 0;

    font-size:14px;

}


.top-bar a {

    color:white;

    margin-left:20px;

}


.top-bar a:hover {

    color:
    #dc143c;

}


.top-bar-actions {
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.top-bar-links {
    display:flex;
    align-items:center;
    gap:1rem;
}

.social-icons {
    display:flex;
    align-items:center;
    gap:.5rem;
}

.social-icons a,
.footer-social a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.22);
    color:white;
    background:rgba(255,255,255,0.08);
    transition:all .25s ease;
    text-decoration:none;
}

.social-icons a:hover,
.footer-social a:hover {
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.4);
    background:#ffffff;
    color:#111111;
}

.social-icons a.facebook:hover,
.footer-social a.facebook:hover {
    background:#1877f2;
    border-color:#1877f2;
    color:#ffffff;
}

.social-icons a.x:hover,
.footer-social a.x:hover {
    background:#010101;
    border-color:#010101;
    color:#ffffff;
}

.social-icons a.youtube:hover,
.footer-social a.youtube:hover {
    background:#ff0000;
    border-color:#ff0000;
    color:#ffffff;
}

.footer-social {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.75rem;
    margin-top:1rem;
}

.footer-social a {
    color:#8B0000;
    background:#f8f9fa;
    border-color:#8B0000;
}

.footer-links {
    list-style:none;
    padding:0;
    margin:0;
    display:inline-flex;
    flex-wrap:wrap;
    gap:0.75rem;
    justify-content:flex-end;
}

.footer-links li {
    margin:0;
}

.footer-links a {
    color:#111111;
    transition:color .25s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color:#8B0000;
}

@media (max-width: 767px) {
    .top-bar .container {
        flex-direction:column;
        align-items:flex-start;
        gap:0.85rem;
    }

    .footer-social {
        justify-content:flex-start;
    }
}



/* ===============================
   NAVBAR
================================ */


/* ===============================
   PROFESSIONAL NAVBAR
================================ */

.main-nav{
    background:#ffffff;
    padding:12px 0;
    transition:all .35s ease;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    border-bottom:1px solid #e5e5e5;
    z-index:1000;
}

.main-nav.scrolled{
    background:#ffffff;
    padding:8px 0;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}

.main-nav .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.navbar-brand{
    display:flex;
    align-items:center;
    flex:0 1 auto;
    max-width:520px;
    margin-right:4rem;
}

.navbar-brand img{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-right:18px;
}

.navbar-brand span{
    color:#111111;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.3px;
    white-space:nowrap;
    margin-right:32px;
}

.navbar-collapse{
    /* ensure collapse area can shift to the right */
    margin-left:auto;
}

.navbar-nav{
    display:flex;
    align-items:center;
    gap:36px;
}

.nav-item{
    margin:0;
}

.nav-link{
    color:#111111 !important;
    font-size:17px;
    font-weight:600;
    padding:12px 8px !important;
    margin-left:0;
    position:relative;
    transition:all .3s ease;
}

.nav-link:hover,
.nav-link:focus{
    color:#8B0000 !important;
}

.nav-link.active{
    color:#8B0000 !important;
    font-weight:700;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:#8B0000;
    transition:.3s;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}


/* =========================
   HERO SLIDER
========================= */

.hero-slider{
    position:relative;
    min-height:90vh;
    overflow:hidden;
}


.hero-slider .swiper{
    width:100%;
    height:100%;
}


.swiper-slide {

    height:100%;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}


/* Single light overlay */
.swiper-slide::before {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.25);

    z-index:1;

}


/* Hero text */
.hero-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    color:#fff;

    z-index:10;

    max-width:800px;

}


.hero-content h1{

    font-size:60px;

    font-weight:700;

    margin-bottom:20px;

}


.hero-content p{

    font-size:22px;

    margin-bottom:30px;

}


/* Background Images */

.slide1 {

    background-image:url("../images/hero/legal1.jpg");

}


.slide2 {

    background-image:url("../images/hero/legal2.jpg");

}


.slide3 {

    background-image:url("../images/hero/legal3.jpg");

}


/* Slider controls */

.swiper-pagination,
.swiper-button-next,
.swiper-button-prev{

    z-index:20;

}

/* ===============================
   ZIALE HERO BUTTONS
   Professional Legal Theme
================================ */

.btn-ziale {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 40px;

    margin-top:10px;

    background:#b60606;

    color:#ffffff !important;

    border:2px solid #8B0000;

    border-radius:4px;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

    z-index:20;

}


/* Red background animation */

.btn-ziale::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:100%;

    background:#8B0000;

    transition:all .35s ease;

    z-index:-1;

}


.btn-ziale:hover::before {

    width:100%;

}


.btn-ziale:hover {

    color:#ffffff !important;

    border-color:#8B0000;

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}


/* ===============================
 SECTION TITLES
================================ */


.section-title h2 {

    font-weight:800;

    text-transform:uppercase;

    color:
    var(--ziale-black);

}



.section-title h2::after {

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:
    var(--ziale-red);

    margin:
    15px auto;

}



/* ===============================
 CARDS
================================ */


.announcement-card,
.course-card,
.service-box,
.news-card,
.publication-card {


    background:white;

    border-radius:8px;
        border:1px solid #e5e5e5;
        box-shadow:0 10px 25px rgba(0,0,0,.12);

    box-shadow:
    var(--shadow);

    overflow:hidden;

    transition:
    var(--transition);

    height:100%;

}



.announcement-card:hover,
.course-card:hover,
.service-box:hover,
.news-card:hover,
.publication-card:hover,
.download-card:hover {

    transform:
    translateY(-10px);

}


.download-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
}

.download-card-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 18px;
    background: #fce8e8;
    color: var(--ziale-red);
    font-size: 1.8rem;
}

.download-card h4 {
    margin-bottom: 12px;
    font-size: 1.2rem;
    color: var(--ziale-black);
}

.download-card p {
    color: #5a5a5a;
    line-height: 1.8;
    margin-bottom: 22px;
}

.download-card .btn-ziale {
    align-self: flex-start;
    padding: 12px 26px;
}




.announcement-card img {

    height:220px;

    width:100%;

    object-fit:cover;

}



.card-body {

    padding:
    25px;

}



.read-more {

    color:
    var(--ziale-red);

    font-weight:bold;

}




/* ===============================
 SERVICES
================================ */


.quick-services {

    background:
    var(--ziale-light-gray);

    padding:
    70px 0;

}



.service-box {

    padding:
    35px 25px;

    text-align:center;

}



.service-box i {

    font-size:
    45px;

    color:
    var(--ziale-red);

}



.service-box h4 {

    margin-top:20px;

    font-weight:700;

}



/* ===============================
 COURSES
================================ */


.courses-section {

    background:white;

}



.course-card {

    padding:
    40px 25px;

    text-align:center;

}



.course-card i {

    font-size:
    55px;

    color:
    var(--ziale-red);

}



.course-card h3 {

    margin:
    20px 0;

}



/* ===============================
 ABOUT
================================ */

.about-section img {
    width:100%;
    max-width:520px;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    box-shadow:
    var(--shadow);

}

.requirements-section {
    background: var(--ziale-light-gray);
}

.requirements-section .content-box,
.requirements-section .image-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: var(--shadow);
    padding: 30px;
}

.requirements-section .content-box h3,
.requirements-section .content-box h4 {
    color: var(--ziale-black);
    margin-bottom: 1rem;
}

.requirements-section .requirements-list,
.requirements-section .bullet-list {
    margin-left: 1.2rem;
    color: #4a4a4a;
    margin-bottom: 1.5rem;
}

.requirements-section .requirements-list li,
.requirements-section .bullet-list li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
}

.requirements-section .image-card img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    margin-top: 12px;
    color: #6c757d;
    font-size: 0.95rem;
    text-align: center;
}

.requirements-section .section-title p {
    max-width: 700px;
    margin: 0 auto;
}

/* ===============================
   PROGRAMME PAGE
================================ */

.programme-page {
    background: var(--ziale-light-gray);
    padding-bottom: 80px;
}

.programme-intro {
    background: white;
    border-radius: 18px;
    padding: 35px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}

.programme-intro p.lead {
    font-size: 1.05rem;
    color: #4f4f4f;
    line-height: 1.9;
}

.programme-card {
    background: white;
    border-radius: 18px;
    border: 1px solid #e7e4e1;
    box-shadow: var(--shadow);
    padding: 35px;
}

.programme-card h2,
.programme-card h3 {
    color: var(--ziale-black);
    margin-bottom: 18px;
}

.programme-section {
    margin-top: 30px;
}

.programme-section h4 {
    color: var(--ziale-black);
    margin-bottom: 15px;
}

.programme-list,
.programme-benefits-list,
.programme-entry-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.programme-list li,
.programme-benefits-list li,
.programme-entry-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    line-height: 1.8;
    color: #4d4d4d;
}

.programme-list li::before,
.programme-benefits-list li::before,
.programme-entry-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--ziale-red);
    font-size: 1.1rem;
}

.programme-sidebar {
    background: #8b0000;
    color: white;
    border-radius: 18px;
    padding: 30px;
}

.programme-sidebar h3 {
    color: white;
    margin-bottom: 18px;
}

.programme-sidebar p,
.programme-sidebar li {
    color: #f5f1ef;
}

.programme-sidebar a.btn-ziale {
    background: white;
    color: var(--ziale-black) !important;
    border-color: white;
}

.programme-sidebar a.btn-ziale:hover {
    color: white !important;
    background: var(--ziale-red);
}

.programme-highlight {
    font-weight: 700;
    color: var(--ziale-black);
}

.programme-page .section-title p {
    max-width: 760px;
    margin: 0 auto;
}

.about-section .btn-ziale {
    margin-top: 1rem;
}


/* ===============================
   JOBS & CAREERS
================================ */

.jobs-section {
    padding: 80px 0;
    background: #f9f8f6;
}

.jobs-section .section-title {
    margin-bottom: 50px;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.job-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    padding: 30px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.job-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
}

.job-card-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.job-label,
.job-status {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4b4b4b;
    background: #f4f2f1;
}

.job-status {
    color: #8b0000;
    background: #fff0f0;
}

.job-status-secondary {
    color: #333;
    background: #f0efed;
}

.job-card h3 {
    font-size: 1.55rem;
    margin-bottom: 16px;
    color: #111111;
}

.job-card p {
    color: #5a5a5a;
    line-height: 1.85;
    margin-bottom: 20px;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.job-meta i {
    margin-right: 8px;
    color: #8b0000;
}

.job-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.job-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: #f6f0f0;
    color: #8b0000;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
}

.btn-apply {
    padding: 14px 26px;
}

.jobs-panel {
    max-width: 980px;
    margin: 0 auto;
}

.jobs-panel-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 36px;
}

.jobs-panel-card h3 {
    margin-bottom: 18px;
    color: #111111;
}

.jobs-panel-card p {
    color: #5a5a5a;
    line-height: 1.9;
    margin-bottom: 18px;
}

.jobs-benefits-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 14px;
}

.jobs-benefits-list li {
    position: relative;
    padding-left: 30px;
    color: #4a4a4a;
    line-height: 1.8;
}

.jobs-benefits-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 0;
    color: #8b0000;
    font-size: 1.2rem;
}


/* ===============================
 VISIT SUMMARY
================================ */

.visit-summary {
    background: #f6f4f0;
}

.visit-summary-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.06);
    padding: 1.35rem 1.5rem;
}

.visit-summary-card h3 {
    font-size: 1.45rem;
    margin-bottom: 0.4rem;
    color: var(--ziale-black);
}

.visit-summary-card p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
}

.visit-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #e8f5ff;
    color: #1d6fd0;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.visit-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.visit-last-line {
    color: #6c757d;
    font-size: 0.95rem;
}

@media (max-width: 991px) {
    .visit-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-item {
    background: #f8f9ff;
    border-radius: 18px;
    padding: 1rem 0.9rem;
    transition: transform .3s ease, box-shadow .3s ease;
    min-height: 108px;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ziale-black);
}

@media (max-width: 767px) {
    .visit-stats-grid {
        grid-template-columns: 1fr;
    }
}


/* ===============================
 STATISTICS
================================ */


.statistics-section {

    background:
    var(--ziale-black);

    color:white;

    padding:
    70px 0;

}



.counter-box {

    padding:
    30px;

}



.counter-box i {

    font-size:
    45px;

    color:
    #dc143c;

}


.counter-box h2 {

    font-size:
    45px;

    margin:
    15px;

}



/* ===============================
 NEWS
================================ */


.news-section {

    background:
    var(--ziale-light-gray);

}



.news-card {

    padding:
    30px;

}



.news-date {

    color:
    var(--ziale-red);

    font-weight:bold;

}




/* ===============================
 PUBLICATIONS
================================ */


.publication-card {

    padding:
    35px;

    text-align:center;

}


.publication-card i {

    font-size:
    50px;

    color:
    var(--ziale-red);

}



/* ===============================
 GALLERY
================================ */


.gallery-image {

    width:100%;

    height:280px;

    object-fit:cover;

    transition:
    var(--transition);

}



.gallery-image:hover {

    transform:
    scale(1.05);

}



/* ===============================
 CONTACT
================================ */


.contact-section {

    background:
    var(--ziale-black);

    color:white;

}



.contact-section i {

    color:
    #dc143c;

}

.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.map-responsive {
    overflow:hidden;
    padding-bottom:55%;
    position:relative;
    height:0;
    max-width:100%;
    margin-top:0.5rem;
}

.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    border:0;
}



/* ===============================
 FOOTER
================================ */


footer {

    background:
    #000;

    color:white;

    padding:
    50px 0 20px;

}



footer a {

    color:white;

}



footer a:hover {

    color:
    #dc143c;

}

/* rest of footer styles remain unchanged */




/* ===============================
   INSTRUCTION PAGE
================================ */

.instruction-page {
    background: var(--ziale-light-gray);
}

.instruction-card {
    background: white;
    border-radius: 20px;
    border: 1px solid #e9e4e1;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
    padding: 30px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.instruction-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.12);
}

.instruction-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f7e4e4;
    color: var(--ziale-red);
    font-size: 1.7rem;
    margin-bottom: 20px;
}

.instruction-card h3 {
    margin-bottom: 15px;
    color: var(--ziale-black);
}

.instruction-card p {
    color: #5a5a5a;
    line-height: 1.9;
}

.instruction-note {
    background: white;
    border-radius: 20px;
    border: 1px solid #e5e0dc;
    box-shadow: var(--shadow);
    padding: 28px 34px;
}

.instruction-note h4 {
    margin-bottom: 12px;
    color: var(--ziale-black);
}

.instruction-note p {
    color: #5c5c5c;
    line-height: 1.85;
}


/* ===============================
 ANIMATION HELPERS
================================ */


.fade-up {

animation:
fadeUp .8s ease;

}


@keyframes fadeUp {

from {

opacity:0;

transform:
translateY(30px);

}


to {

opacity:1;

transform:
translateY(0);

}

}



/* ===============================
 MOBILE RESPONSIVE
================================ */


@media (min-width:1200px){
    .navbar-brand{max-width:500px;}
    .navbar-brand span{font-size:14px;line-height:1.25;}
    .navbar-nav{gap:18px;}
}

@media (max-width:991px){

    .navbar-brand{max-width:80%;}
    .navbar-brand img{width:55px;height:55px;}
    .navbar-brand span{font-size:13px;line-height:1.3;}

    .navbar-collapse{
        margin-top:15px;
        background:#ffffff;
        padding:15px;
        border-radius:8px;
    }

    .navbar-nav{gap:0;}

    .nav-link{
        display:block;
        padding:14px 0 !important;
        margin-left:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-link:last-child{border-bottom:none;}

    .hero-content{
        width:90%;
        margin-left:0;
    }

    .hero-content h1{font-size:38px;}
    .hero-content p{font-size:18px;}
}



@media(max-width:576px){


.hero-slider,
.swiper-slide {

height:75vh;

}


.hero-content h1 {

font-size:
28px;

}


.top-bar .container {

flex-direction:
column;

text-align:center;

}
.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:45px;

height:45px;

border:none;

background:#8B0000;

color:white;

font-size:18px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}


.back-to-top.show{

opacity:1;

visibility:visible;

}


.back-to-top:hover{

background:#111111;

}


/* ==================================
   REPORTS PAGE
================================== */

.reports-page {
    background: var(--ziale-light-gray);
}

.report-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
    padding: 35px;
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.report-type {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: #f2e7e7;
    color: var(--ziale-red);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.report-card h3 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--ziale-black);
}

.report-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 12px 16px;
    background: var(--ziale-red);
    color: white;
    border-radius: 14px;
    font-weight: 700;
}

.report-card p {
    color: #565656;
    line-height: 1.85;
    margin-bottom: 24px;
}

.report-details {
    list-style: none;
    padding-left: 0;
    margin: 0 0 25px;
}

.report-details li {
    margin-bottom: 12px;
    color: #4f4f4f;
    line-height: 1.8;
}

.report-actions {
    display: flex;
    justify-content: flex-start;
}

.report-actions .btn-ziale {
    padding: 14px 30px;
}

/* ==================================
   ANNOUNCEMENT IMAGE FIX
================================== */

.announcement-card img {

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}


/* Image placeholder */

.announcement-card img[src=""],
.announcement-card img:not([src]) {

    background:#eeeeee;

}


/* Card body spacing */

.announcement-card .card-body {

    padding:30px;

}


.announcement-card h4 {

    color:#111;

    font-weight:700;

    margin-bottom:15px;

}


.announcement-card p {

    color:#555;

    min-height:70px;

}


.read-more {

    color:#8B0000;

    font-weight:700;

    text-transform:uppercase;

}


.read-more:hover {

    color:#111;

}


}


/* ===== Improvements ===== */
img{display:block;height:auto}
.hero-slider .swiper-slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.hero-content{
padding:1.5rem;
width:min(90%,800px);
}
.section-title{margin-bottom:3rem}
.navbar-toggler{border-color:rgba(255,255,255,.3)}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(139,0,0,.25)}
.service-box,.course-card,.announcement-card,.news-card,.publication-card{
border:1px solid rgba(0,0,0,.05);
}
footer hr{border-color:rgba(255,255,255,.15)}
.skip-link{
position:absolute;left:-9999px;top:auto;
}
.skip-link:focus{
left:20px;top:20px;background:#8B0000;color:#fff;padding:10px 16px;z-index:99999;
}