/* ===== Global Reset and Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Updated body settings */
body {
    position: relative;
    margin: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #222;
    line-height: 1.6;
    z-index: 0;
    padding-inline: 1.5rem;
    /* consistent edge spacing for all content */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/pn.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    opacity: 0.07;
    z-index: -1;
    pointer-events: none;
}

.au-about-section {
    padding: 3rem 0;
}

.au-about-breadcrumb {
    font-size: 14px;
    color: #666;
}

.au-about-breadcrumb a {
    text-decoration: none;
    color: #000;
}

.au-about-breadcrumb span.active {
    font-weight: bold;
}

.au-about-title {
    font-size: 2rem;
    color: #222;
}

.au-about-intro {
    font-size: 16px;
    color: #444;
}

.au-about-grid .au-about-aspiration {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.au-about-aspiration img {
    width: 40px;
    height: auto;
}

.au-about-aspiration h6 {
    margin-top: 0.5rem;
    color: #333;
}

.au-about-aspiration p {
    font-size: 14px;
    color: #555;
}

.au-about-box {
    background-color: #ffc107;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.au-about-box h5 {
    margin-bottom: 0.75rem;
    font-weight: bold;
    color: #333;
}

.au-about-box a {
    display: block;
    padding: 4px 0;
    color: #000;
    text-decoration: none;
}

.au-about-box a:hover {
    text-decoration: underline;
}

.au-about-box img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

 /* News Bar */
 .news-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #ede6e6;
     padding: 5px 15px;
     flex-wrap: wrap;
     font-size: 14px;
 }

 .news-label {
     background-color: #991b35;
     color: #fff;
     padding: 5px 12px;
     font-weight: bold;
     border-radius: 4px;
     margin-right: 10px;
 }

 .news-marquee {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
 }

 .news-arrows button {
     background: transparent;
     border: none;
     font-size: 16px;
     cursor: pointer;
     margin-left: 5px;
 }

 .lang-select {
     font-size: 13px;
     color: #333;
     margin-left: 10px;
 }

 /* Top Bar */
 .top-bar {
     background-color: #d4c295;
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }

 .top-logo {
     max-height: 40px;
 }

 .top-links {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .top-links strong {
     font-size: 14px;
 }

 .social-icons a {
     color: #991b35;
     font-size: 16px;
     margin-left: 8px;
     transition: all 0.3s ease;
     padding: 8px;
     border-radius: 50%;
     display: inline-block;
 }

 .social-icons a:hover {
     background-color: #522B39;
     color: #fff;
     transform: rotate(360deg);
 }

 /* Banner Theme */
 .header-banner-wrapper {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     background-color: #fff;
     gap: 20px;
     padding: 10px 20px;
     overflow: hidden;
 }

 .header-banner {
     position: relative;
     flex: 1;
     max-width: calc(100% - 120px);
 }

 .header-banner img {
     width: 100%;
     height: auto;
     max-height: 130px;
     object-fit: contain;
 }

 .agenda-logo {
     max-height: 60px;
     width: auto;
 }

 .banner-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
 }

 .banner-arrow.left {
     left: 10px;
 }

 .banner-arrow.right {
     right: 10px;
 }
/* Banner Section */
.agenda-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
    text-align: center;
}

.agenda-banner .text-block {
    max-width: 500px;
}

.badge {
    background-color: orange;
    color: white;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
}


/* Column Lists */
.region-list,
.country-list {
    min-width: 200px;
    flex: 1 1 200px;
}

.region-list div,
.country-list div {
    padding: 5px 0;
    text-align: left;
}

.country-list img {
    width: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

.country-list .active {
    font-weight: bold;
}

/* Dropdown Image */
.dropdown-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    flex: 1 1 300px;
    border-radius: 4px;
}

/* Learn More Link */
.learn-more {
    margin-top: 10px;
    display: block;
    font-weight: bold;
    color: #5c2a2b;
    text-align: center;
    transition: color 0.3s ease;
}

.learn-more:hover {
    color: #000;
}

/* Standard Dropdown */
.standard-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d4c295;
    min-width: 220px;
    max-width: 95vw;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    border-radius: 4px;
    overflow: hidden;
}

.standard-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #222;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.standard-dropdown a:hover {
    background-color: #5c2a2b;
    color: white;
}

.nav-item:hover .standard-dropdown {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dropdown-content {
        flex-direction: column;
        left: 0;
        transform: none;
        width: 100%;
        padding: 15px;
    }

    .region-list,
    .country-list,
    .dropdown-image {
        width: 100%;
        flex: 1 1 auto;
        text-align: center;
    }

    .standard-dropdown {
        left: 0;
        transform: none;
        width: 100%;
    }
}

/* Navigation Arrows (e.g. for sliders) */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.arrow-left {
    left: 20px;
}

.arrow-right {
    right: 20px;
}

/* Banner Slider Container */
.banner-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
    width: 100%;
}

/* Each Slide */
.banner-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Slide Caption */
.banner-caption {
    position: absolute;
    bottom: 50px;
    left: 50px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    max-width: 600px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
}



/* Banner Caption Titles */
.banner-caption h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.3;
}

.banner-caption p {
    font-size: 16px;
    margin-top: 10px;
}

/* Press Ticker Bar */
.press-bar {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: #f5c143;
    color: #000;
    padding: 10px 20px;
    font-weight: bold;
    position: relative;
}

.press-bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: inherit;
    animation: scroll-left 15s linear infinite;
    white-space: nowrap;
}

.press-bar span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 15s linear infinite;
}

/* Scrolling Text Animation */
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* News & Events Section */
.news-events {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

/* News Header */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.news-header h2 {
    margin: 0;
    font-size: 26px;
    border-bottom: 3px solid #f5c143;
    padding-bottom: 5px;
    white-space: nowrap;
}

.see-all {
    text-decoration: none;
    color: #222;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: color 0.3s ease;
}

.see-all:hover {
    color: #5c2a2b;
}

/* Featured News Cards */
.featured-news {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.news-image img {
    width: 100%;
    max-width: 149px;
    aspect-ratio: 149 / 211;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .banner-caption h2 {
        font-size: 24px;
    }

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

    .news-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .featured-news {
        flex-direction: column;
        gap: 20px;
    }

    .news-image img {
        max-width: 100%;
        aspect-ratio: auto;
    }
}
/* News Content Block */
.news-content {
    flex: 1;
}

/* Tags Styling */
.tags .tag {
    display: inline-block;
    background: orange;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 3px;
}

.tag.live {
    background: red;
}

/* News Text Content */
.news-content h3 {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.4;
}

.news-content .date {
    font-size: 14px;
    margin: 10px 0;
    color: #666;
}

.news-content .desc {
    font-size: 15px;
    color: #444;
}

/* News Grid Layout */
.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* .news-card {
    background: #f9f9f9;
    flex: 1 1 calc(25% - 20px);
    padding: 15px;
    border-left: 4px solid #f5c143;
    border-radius: 0;
    transition: box-shadow 0.3s ease;
} */

.news-card {
    position: relative;
    background: #f9f9f9;
    flex: 1 1 calc(25% - 20px);
    padding: 15px 15px 15px 25px;
    /* leave space for the bar */
    border-radius: 0;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

/* Vertical yellow bar, flush with card edge */
.news-card::before {
    content: '';
    position: absolute;
    left: 0;
    /* 🔥 stick to the card edge */
    top: 20%;
    /* vertical positioning */
    height: 60%;
    width: 4px;
    background-color: #f5c143;
    border-radius: 0;
    /* no curves */
}

.news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* News Tag on Card */
.news-card .tag {
    background: #f5c143;
    color: #fff;
    padding: 2px 6px;
    font-size: 11px;
    margin-bottom: 10px;
    display: inline-block;
    font-weight: bold;
}

/* News Body */
.news-body p {
    font-size: 14px;
    margin: 0 0 8px 0;
}

.news-body .date {
    font-size: 13px;
    color: #666;
}

/* Aspirations Section */
.aspirations {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

/* Aspirations Header */
.aspirations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.aspirations-header h2 {
    font-size: 26px;
    margin: 0;
    border-bottom: 3px solid #f5c143;
    padding-bottom: 5px;
    white-space: nowrap;
}

/* Responsive Tweaks */
@media (max-width: 1024px) {
    .news-card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .news-grid {
        flex-direction: column;
    }

    .news-card {
        flex: 1 1 100%;
    }

    .news-content h3 {
        font-size: 18px;
    }

    .aspirations-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Read More Link */
.read-more {
    font-size: 14px;
    text-decoration: none;
    color: #222;
    font-weight: bold;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #5c2a2b;
}

/* Aspirations Grid */
.aspirations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 20px;
}

/* Aspirations Card */
.aspiration-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #222;
    border-left: 5px solid transparent;
}

.aspiration-card:hover {
    background-color: rgba(40, 9, 72, 0.6);
    color: #fff;
}

.aspiration-card:hover a.discover,
.aspiration-card:hover .discover i {
    color: #fff;
}

/* Aspirations Card Title Badge */
.aspiration-card .title span {
    font-size: 14px;
    background: #ccc;
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 5px;
}

/* Discover Link */
.discover {
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    display: inline-block;
    color: inherit;
    transition: color 0.3s ease;
}

.discover i {
    margin-right: 5px;
    transition: color 0.3s ease;
}

/* Color Variants for Aspirations Cards */
.aspiration-card.red {
    border-left-color: #e53935;
}

.aspiration-card.blue,
.aspiration-card.purple {
    border-left-color: #51284f;
}

.aspiration-card.yellow {
    border-left-color: #fbc02d;
}

.aspiration-card.pink {
    border-left-color: #d81b60;
}

/* Video Card Block */
.video-card {
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.video-card img {
    width: 100%;
    border-radius: 8px;
    display: block;
    height: auto;
}

/* Play Icon */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.play-icon:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .aspirations-grid {
        grid-template-columns: 1fr;
    }

    .aspiration-card {
        padding: 15px;
    }

    .video-card img {
        height: auto;
    }

    .play-icon {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }
}

/* Region Item Styling */
.region-item {
    cursor: pointer;
    padding: 5px 0;
    transition: background-color 0.3s ease, font-weight 0.3s ease;
}

.region-item:hover,
.region-item.active {
    background-color: #bcae78;
    font-weight: bold;
}

/* Region Panel Container */
.region-panel {
    display: none;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
}

/* Dropdown Flex Rules */
.dropdown-content {
    flex-wrap: nowrap;
}

.dropdown-content>.region-list {
    flex: 1;
    min-width: 200px;
}

.dropdown-content>.region-panel {
    flex: 3;
    min-width: 0;
}

/* Country Item Styling */
.country-item {
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, font-weight 0.3s ease;
    border-radius: 3px;
}

.country-item:hover,
.country-item.active {
    background-color: #bcae78;
    font-weight: bold;
    color: #000;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .dropdown-content {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .region-panel {
        flex-direction: column;
        gap: 20px;
    }

    .dropdown-content>.region-list,
    .dropdown-content>.region-panel {
        flex: 1 1 100%;
    }

    .region-item,
    .country-item {
        padding: 8px 12px;
    }
}

/* ========== Global Base Styles ========== */
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fff;
    color: #222;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* Typography Reset & Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    line-height: 1.2;
    font-weight: 600;
}

p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Link Styling */
a {
    color: #5e2430;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #000;
    text-decoration: underline;
}

/* Image Defaults */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== Layout Utilities ========== */

/* Responsive Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Flex Utilities */
.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    p {
        font-size: 15px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    .container {
        padding: 0 15px;
    }
}

/* ========== Button Styling ========== */
.btn {
    padding: 10px 20px;
    border: none;
    background-color: #7b3e48;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 15px;
    font-weight: 600;
}

.btn:hover {
    background-color: #5e2430;
    transform: translateY(-1px);
}

/* ========== Mobile & Tablet Responsive Layouts ========== */
@media (max-width: 768px) {

    /* Flex Layout Adjustments */
    .flex {
        flex-direction: column;
        gap: 10px;
    }

    /* Menu Items */
    .menu-item {
        display: block;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
    }

    /* Mega Menu */
    /* .mega-menu {
        flex-direction: column;
        width: 100% !important;
    } */

    /* Footer Adjustments */
    .footer-top {
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        margin-top: 10px;
    }

    /* Grids */
    .aspirations-grid,
    .news-grid,
    .resources-grid {
        grid-template-columns: 1fr !important;
    }


    /* Banner Caption Text */
    .banner-caption {
        font-size: 14px;
    }
}

/* ========== Extra Small Devices (Phones) ========== */
@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    p {
        font-size: 14px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ========== Banner Slider ========== */
.banner-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
    width: 100%;
}

.banner-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Banner Caption */
.banner-caption {
    position: absolute;
    bottom: 50px;
    left: 50px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    max-width: 600px;
    border-radius: 6px;
    font-size: 16px;
}

.banner-caption h2 {
    margin: 0;
    font-size: 32px;
}

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

/* Press Bar */
.press-bar {
    background: #f5c143;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

/* ========== Section General Styling ========== */
.section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: auto;
}

.section h2 {
    margin-bottom: 20px;
    font-size: 26px;
}

/* ========== News Feature Section ========== */
.news-feature {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.news-feature img {
    width: 100%;
    max-width: 500px;
    object-fit: cover;
    height: auto;
    border-radius: 6px;
}

.news-feature .content {
    flex: 1;
    min-width: 260px;
}

/* ========== News Grid ========== */
.news-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.news-card {
    flex: 1 1 200px;
    background: #f2f2f2;
    padding: 15px;
    border-radius: 6px;
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.news-card h4 {
    margin: 10px 0;
    font-size: 18px;
}

.news-card small {
    color: #666;
    font-size: 13px;
}

/* Badge */
.badge {
    background-color: orange;
    padding: 2px 6px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}



/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h2 {
    font-size: 26px;
    margin: 0;
    border-bottom: 3px solid #f5c143;
    padding-bottom: 5px;
    white-space: nowrap;
}

.see-all {
    text-decoration: none;
    color: #222;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: color 0.3s ease;
}

.see-all:hover {
    color: #5e2430;
}

/* ========== Responsive Tweaks ========== */
@media (max-width: 768px) {
    .banner-slider {
        height: 350px;
    }

    .banner-caption {
        left: 20px;
        right: 20px;
        bottom: 30px;
        padding: 15px;
        font-size: 14px;
    }

    .banner-caption h2 {
        font-size: 24px;
    }

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

    .news-feature {
        flex-direction: column;
    }

    .news-feature img {
        width: 100%;
        max-width: 100%;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Slide Content */
.slide-content h3 {
    font-size: 18px;
    margin: 0 0 5px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.4;
}

.slide-content small {
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
}

.slide-content p {
    font-size: 14px;
    line-height: 1.5;
}

/* Read More Link */
.read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #f5c143;
}

/* Stats Section */
.stats {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    text-align: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stats div {
    font-size: 14px;
}

.stats strong {
    font-size: 18px;
    display: block;
}

/* Icon Grouping */
.icons {
    display: flex;
    gap: 12px;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Slider Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #333;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    z-index: 5;
    opacity: 0.9;
    transition: background 0.3s ease;
}

.slider-arrow:hover {
    background: #ddd;
}

.slider-arrow.left {
    left: 15px;
}

.slider-arrow.right {
    right: 15px;
}

/* ========== Key Resources Section ========== */
.key-resources {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

/* Header Styling */
.resources-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.resources-header h2 {
    font-size: 26px;
    margin: 0;
    border-bottom: 3px solid #7b3e48;
    padding-bottom: 5px;
}

/* Navigation Links */
.resource-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.resource-nav a {
    text-decoration: none;
    color: #444;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 3px;
    transition: color 0.3s, border-bottom 0.3s;
}

.resource-nav a.active {
    color: #7b3e48;
    border-bottom: 2px solid #7b3e48;
}


 /* ========== Flagship Projects Section ========== */
 .flagship-projects {
     max-width: 1200px;
     margin: 60px auto;
     padding: 0 20px;
     font-family: Arial, sans-serif;
     position: relative;
 }

 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .section-header h2 {
     font-size: 28px;
     font-weight: bold;
 }

 .section-header .see-all {
     text-decoration: none;
     color: #007856;
     font-weight: 600;
 }

 .flagship-projects {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.flagship-slider-wrapper {
    overflow: hidden;
    position: relative;
}

.flagship-slider {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease-in-out;
}

.flagship-card {
    flex: 0 0 calc(33.333% - 13.33px);
    background-size: cover;
    background-position: center;
    height: 400px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.flagship-card .overlay {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: flex-end;
}

.slide-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.slide-content small {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    color: #f5c143;
}

.slide-content p {
    font-size: 14px;
    margin-bottom: 10px;
}



.read-more {
    color: #f5c143;
    font-weight: bold;
    text-decoration: none;
}

.slider-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.slider-arrow.left {
    left: 10px;
}

.slider-arrow.right {
    right: 10px;
}

/* Responsive */
@media (max-width: 991px) {
    .flagship-card {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .flagship-card {
        flex: 0 0 100%;
    }
}

/* Hover Overlay Effect */
.flagship-card {
    position: relative;
    overflow: hidden;
}

.hover-overlay {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background-color: #7b3e48;
    transform: rotate(45deg) scale(0);
    transition: transform 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

.hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 80%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
    pointer-events: none;
}

.flagship-card:hover .hover-overlay {
    transform: rotate(45deg) scale(1);
}

.flagship-card:hover .hover-content {
    opacity: 1;
}

.hover-content p {
    color: white;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.read-more-btn {
    background-color: #f5c143;
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: #e2ad34;
}
/* ========== Slider Button ========== */
.slider-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.slider-btn:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* ========== Resources Grid ========== */
.resources-grid {
    position: relative;
}

/* Resource Group Tabs */
.resource-group {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.resource-group.active {
    display: grid;
}

/* Resource Cards */
.resource-card {
    padding: 20px;
    border-radius: 6px;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.resource-card:hover {
    transform: translateY(-5px);
}

/* Card Tag */
.resource-card .tag {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 3px;
}

/* Card Title */
.resource-card h4 {
    margin: 5px 0 10px;
    font-size: 18px;
}

/* Card Description */
.resource-card p {
    font-size: 14px;
    line-height: 1.5;
}

/* Resource Card Color Variants */
.resource-card.red {
    background-color: #e53935;
}

.resource-card.lime {
    background-color: #cddc39;
    color: #222;
}

.resource-card.blue {
    background-color: #3f729b;
}

.resource-card.pink {
    background-color: #c2185b;
}

/* ========== Agenda Footer ========== */
.agenda-footer {
    background-color: #d3bc84;
    color: #222;
    font-family: Arial, sans-serif;
    padding: 40px 20px 20px;
    font-size: 14px;
}

/* Footer Top Grid */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

/* Footer Column */
.footer-column {
    flex: 1 1 200px;
    min-width: 200px;
}

/* Footer Headings */
.footer-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    border-bottom: 2px solid #5e4235;
    display: inline-block;
    padding-bottom: 3px;
}

/* Footer Links */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    text-decoration: underline;
    color: #5e2430;
}

/* Social Icons */
.social-icons i {
    font-size: 18px;
    margin-right: 10px;
    color: #222;
    cursor: pointer;
    transition: color 0.3s ease;
}

.social-icons i:hover {
    color: #5e2430;
}

/* ========== Responsive Tweaks ========== */
@media (max-width: 768px) {
    .resource-group {
        grid-template-columns: 1fr;
    }

    .footer-top {
        flex-direction: column;
        gap: 20px;
    }

    .footer-column {
        flex: 1 1 100%;
    }
}

/* ========== Social Icon Hover ========== */
.social-icons i:hover {
    color: #7b3e48;
}

/* ========== Footer Bottom ========== */
.footer-bottom {
    border-top: 1px solid #bcae78;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    gap: 15px;
}

.footer-links a {
    margin-right: 15px;
    color: #222;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    text-decoration: underline;
    color: #5e2430;
}

.footer-copy {
    font-size: 13px;
    color: #444;
}

/* ========== Knowledge Mega Menu ========== */
.knowledge-menu {
    position: relative;
}


.knowledge-menu .mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 1000px;
    background-color: #d3bc84;
    color: #000;
    display: flex;
    border-top: 4px solid #471d24;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.knowledge-menu:hover .mega-menu {
    display: flex;
}

.mega-column {
    flex: 3.1;
    padding: 0 15px;
}

/* Categories */
.categories .category {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.categories .category.active,
.categories .category:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Sublinks */
.sublinks div {
    padding: 6px 0;
}

.sublinks div.active a {
    font-weight: bold;
}

.sublinks a {
    text-decoration: none;
    color: inherit;
}

/* Preview */
.preview img {
    width: 100%;
    max-width: 220px;
    display: block;
    margin-bottom: 10px;
}

.preview p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Learn More Link */
.learn-more {
    color: #5e2430;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.learn-more:hover {
    color: #000;
}

/* ========== About Section ========== */
.about-section {
    padding: 40px 20px;
    font-family: Arial, sans-serif;
    color: #222;
}

.breadcrumb {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.au-breadcrumb-tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.au-tab {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    line-height: 1;
    z-index: 1;
}

.home-tab {
    background-color: #FFD700;
    /* Bright yellow */
    color: #333;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    margin-right: -6px;
    /* pull closer to simulate cut */
    z-index: 2;
}

.about-tab {
    background-color: #522B39;
    /* Dark maroon */
    color: white;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-left: 30px;
    z-index: 1;
}

/* Create the cut-out effect on the left side of the About tab */
.about-tab::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 20px;
    height: 100%;
    background-color: white;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    z-index: -1;
}
.au-about-rightnav {
    width: 100%;
    max-width: 300px;
}

.au-menu-box {
    margin-bottom: 30px;
}

.au-menu-title {
    background-color: #FFD700;
    color: #000;
    padding: 6px 12px;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    border-radius: 2px;
}

.au-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.au-menu-list li {
    border-bottom: 1px solid #ccc;
}

.au-menu-list li a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s ease, padding-left 0.3s ease;
}

.au-menu-list li a:hover {
    background-color: #f5f5f5;
    padding-left: 18px;
}

/* Active Link */
/* .au-menu-list li.active a {
    background: linear-gradient(to right, #522B39, #87636d);
    color: #fff;
    font-weight: bold;
} */
.au-menu-list li.active a {
    background: linear-gradient(to right, #522B39, #87636d);
    color: #fff;
    font-weight: bold;
}
.au-documents-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.au-doc-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    background: #fff;
    text-align: center;
}

.au-doc-image-wrapper {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.au-doc-img {
    width: 100%;
    display: block;
    transition: all 0.3s ease;
}

.au-doc-hover-download {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(82, 43, 57, 0.9);
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.au-doc-image-wrapper:hover .au-doc-img {
    filter: brightness(60%);
    transform: scale(1.05);
}

.au-doc-image-wrapper:hover .au-doc-hover-download {
    opacity: 1;
}

.au-doc-info {
    padding: 10px 8px 14px;
}

.au-doc-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.au-doc-download-btn {
    display: inline-block;
    background-color: #FFD700;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.au-doc-download-btn:hover {
    background-color: #e0be00;
}
.au-seminar-video-box {
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(to right, #f8f8f8, #ffffff);
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.au-seminar-title {
    font-size: 20px;
    font-weight: bold;
    color: #522B39;
    border-left: 5px solid #FFD700;
    padding-left: 14px;
    margin-bottom: 20px;
}

.au-seminar-video-wrapper video {
    width: 100%;
    max-height: 420px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.au-seminar-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.au-discussion-btn {
    background-color: #522B39;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.au-discussion-btn:hover {
    background-color: #3e1d2e;
}

.au-share-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.au-share-icons span {
    font-weight: 500;
    color: #444;
}

.au-share-icons a {
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
    font-size: 13px;
}

.au-share-icons .whatsapp {
    background-color: #25D366;
}

.au-share-icons .facebook {
    background-color: #3b5998;
}

.au-share-icons .twitter {
    background-color: #1DA1F2;
}
.au-priority-accordion {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: 'Segoe UI', sans-serif;
}

.au-section-title {
    text-align: center;
    margin-bottom: 30px;
    color: #522B39;
    font-size: 24px;
}

.accordion-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.accordion-header {
    background-color: #333;
    color: #f3f5f6;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease;
}

.accordion-header:hover {
    background-color: #d4c295;
}

.accordion-body {
    display: none;
    background-color: #fff;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
}

.accordion-body ul {
    padding-left: 20px;
    margin: 0;
}
.au-priority-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.au-priority-flex ul {
    flex: 1 1 65%;
}

.au-aspiration-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #FFD700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
    animation: spinEarth 15s linear infinite;
}

.au-aspiration-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Spin animation */
@keyframes spinEarth {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.accordion-body ul li {
    margin-bottom: 8px;
    font-size: 15px;
    color: #333;
}

/* Active class to show accordion */
.accordion-item.active .accordion-body {
    display: block;
}

.about-section h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.au-goal-section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.au-goal-title {
    text-align: center;
    font-size: 28px;
    color: #522B39;
    margin-bottom: 20px;
}

.au-goal-filter {
    text-align: center;
    margin-bottom: 30px;
}

.au-goal-filter select {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.au-goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.au-goal-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.au-goal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.au-goal-card h4 {
    margin-top: 0;
    color: #222;
}

.au-goal-card p {
    font-size: 14px;
    color: #555;
}

.goal-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #FFD700;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}

.au-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    justify-content: center;
}

.au-goal-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.au-goal-card:hover {
    transform: translateY(-5px);
}

.au-goal-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 12px;
}

.goal-content h4 {
    font-size: 15px;
    margin: 0 0 6px;
    color: #522B39;
}

.goal-content p {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
.au-goals-gallery {
    padding: 40px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.au-goal-title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 30px;
    color: #522B39;
}

.au-home-hero {
    position: relative;
    background: linear-gradient(to top, #001f3f, #003366);
    color: white;
    padding: 80px 20px 40px;
    text-align: center;
    overflow: hidden;
}

.au-hero-content h1 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #fff;
}

.au-hero-content p {
    max-width: 800px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.7;
    color: #fff;
}

/* Ocean Effect */
.au-ocean-effect .wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100px;
    background: url('https://i.imgur.com/3bX9Faf.png') repeat-x;
    animation: wave 8s linear infinite;
    opacity: 0.5;
}

.au-ocean-effect .wave:nth-child(2) {
    animation-delay: -4s;
    opacity: 0.3;
}

@keyframes wave {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1000px;
    }
}

/* Image Slider */
.au-slider {
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0;
    position: relative;
}

.slider-track {
    display: flex;
    width: 400%;
    animation: slide 20s infinite linear;
}

.slider-track img {
    width: 100%;
    flex: 1 0 100%;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 5px;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(-200%);
    }

    75% {
        transform: translateX(-300%);
    }

    100% {
        transform: translateX(0);
    }
}
.about-section .intro {
    font-size: 16px;
    margin-bottom: 20px;
}

/* About Page Layout */
.content-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.main-content {
    flex: 2;
    font-size: 15px;
    line-height: 1.7;
}

.main-content .highlight {
    background-color: #f5f5f5;
    border-left: 4px solid #f5c143;
    padding: 10px;
    margin: 20px 0;
    font-weight: bold;
}

.sidebar {
    flex: 1;
    min-width: 250px;
}

/* ========== Responsive Tweaks ========== */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .knowledge-menu .mega-menu {
        width: 100%;
        flex-direction: column;
    }

    /* .mega-column {
        padding: 10px 0;
    } */

    .content-grid {
        flex-direction: column;
    }

    .sidebar {
        min-width: 100%;
    }
}

/* ========== Sidebar Widgets ========== */
.sidebar .widget {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #5c2a2b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.sidebar .widget img {
    max-width: 100%;
    margin: 10px 0;
    border-radius: 4px;
}

.sidebar .widget h3 {
    margin-top: 0;
    color: #5c2a2b;
    font-size: 18px;
    line-height: 1.4;
}

/* ========== Responsive Layouts ========== */
@media (max-width: 768px) {
    .content-grid {
        flex-direction: column;
    }

    .sidebar {
        order: -1;
        /* Moves sidebar above content on mobile */
    }
}

/* ========== Highlight Toggle Section ========== */
.highlight-toggle {
    border-left: 4px solid #f5c143;
    background: #f5f5f5;
    margin: 20px 0;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
}

.highlight-toggle:hover {
    background: #eee;
}

.highlight-header {
    font-weight: bold;
    padding: 12px;
    font-size: 15px;
}

.highlight-body {
    padding: 10px 12px;
    display: none;
    border-top: 1px solid #e1e1e1;
    font-size: 15px;
    color: #444;
}

/* ========== Region Tabs ========== */
.regions {
    display: flex;
    gap: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.region-tab {
    cursor: pointer;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.region-tab:hover,
.region-tab.active {
    color: #5c2a2b;
    border-bottom: 2px solid #5c2a2b;
}

/* ========== Region Content Toggle ========== */
.region-content {
    display: none;
    margin-top: 20px;
}

.region-content.active {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ========== Country List Block ========== */
.country-list {
    flex: 1;
    background: #fff;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Country Buttons */
.country-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.country-list button:hover {
    background-color: #e0e0e0;
    border-color: #999;
}
/* ========== Country List Buttons ========== */
.country-list button:hover {
    background: #5c2a2b;
    color: #fff;
}

.country-list button.active {
    background: #f5c143;
    color: #000;
}

.country-list img {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

/* ========== Map Panel ========== */
.map-panel {
    flex: 2;
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 6px;
}

.map-top {
    flex: 1;
}

.map-top img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    border-radius: 4px;
}

/* Map Bottom Layout */
.map-bottom {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

/* Chart Box */
.chart-box {
    flex: 1;
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.chart-box img {
    width: 24px;
    height: 16px;
    vertical-align: middle;
    margin-bottom: 10px;
}

.chart-placeholder {
    width: 100%;
    height: 120px;
    background: #eaeaea;
    border-radius: 6px;
}

/* Chart Action Button */
.chart-box button {
    background-color: #f5c143;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    transition: background-color 0.3s;
}

.chart-box button:hover {
    background-color: #5c2a2b;
}

/* ========== Modal Styling ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    animation: fadeIn 0.4s ease;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #555;
}

.close-btn:hover {
    color: red;
}

/* ========== Fade-in Animation ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== Tab System ========== */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tab-buttons button {
    padding: 6px 14px;
    background-color: #eee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tab-buttons button.active {
    background-color: #51284f;
    color: #fff;
}

.tab-content {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 20px;
    min-height: 200px;
}

/* ========== Aspirations Grid Wrapper ========== */
.aspirations-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .map-panel {
        min-width: 100%;
        padding: 10px;
    }

    .map-bottom {
        flex-direction: column;
    }

    .chart-box {
        margin: 10px 0;
    }

    .tab-buttons {
        justify-content: flex-start;
    }
}

/* ========== Aspiration Card ========== */
.aspiration-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
    font-size: 11px;
    transition: transform 0.3s ease;
}

.aspiration-card:hover {
    transform: translateY(-2px);
}

/* All-Aspirations Special Styling */
.aspiration-card.all {
    background: #51284f;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.aspiration-card.all .asp-title {
    font-size: 11px;
    line-height: 1.2;
}

/* Aspiration Labels & Text */
.aspiration-card .asp-label {
    font-weight: 600;
    font-size: 10px;
    margin-bottom: 4px;
}

.aspiration-card .asp-text {
    font-size: 10px;
    color: #333;
    flex-grow: 1;
}

/* Progress Circle */
.aspiration-card .progress-circle {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    align-self: flex-end;
}

/* ========== Goals Section ========== */
.goals-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Goals Grid */
.goal-cards {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    width: 100%;
}

/* Individual Goal Card */
.goal-card {
    width: 100%;
    height: 70px;
    border: 2px solid #ccc;
    border-radius: 4px;
    text-align: center;
    padding: 5px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, border-color 0.3s;
}

.goal-card:hover {
    background-color: #f5f5f5;
    border-color: #51284f;
}

/* ========== Responsive Enhancements ========== */
@media (max-width: 1024px) {
    .goal-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .goal-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .goal-card {
        height: 60px;
        font-size: 9px;
    }

    .aspiration-card {
        font-size: 10px;
    }

    .aspiration-card .asp-label,
    .aspiration-card .asp-text {
        font-size: 9px;
    }
}

/* ========== Goal Cards (Extended Styles) ========== */
.goal-card img {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
}

.goal-card.active {
    background-color: #51284f;
    color: #fff;
}

.goal-card.all-goals {
    border: 2px solid #51284f;
    color: #51284f;
    font-weight: bold;
}

/* ========== Goal Description ========== */
.goal-description {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.4;
    color: #333;
}

.goal-description strong {
    font-size: 20px;
    color: #51284f;
}

/* ========== Responsive Grid for Goals ========== */
@media (max-width: 900px) {
    .goal-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .goal-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Info Form Grid ========== */
.info-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px 30px;
    margin-top: 20px;
}

.info-form-grid>div {
    display: flex;
    flex-direction: column;
}

.info-form-grid label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.info-form-grid input,
.info-form-grid textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    color: #222;
}

.info-form-grid input:focus,
.info-form-grid textarea:focus {
    outline: none;
    border-color: #007856;
}

/* Textarea Specifics */
.info-form-grid textarea {
    resize: vertical;
    min-height: 80px;
}

/* Mobile Optimization */
@media (max-width: 600px) {
    .info-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Form Submit Button ========== */
.form-submit {
    margin-top: 20px;
    text-align: right;
}

.form-submit button {
    padding: 10px 20px;
    background-color: #51284f;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit button:hover {
    background-color: #341e35;
}

/* ========== Request Header Dropdown ========== */
.request-header select {
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4L2 0zm0 5L0 3h4l-2 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 200px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.request-header select:focus {
    border-color: #51284f;
    box-shadow: 0 0 0 2px rgba(81, 40, 79, 0.1);
}

/* Request Header Wrapper */
.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ========== NE Page Base ========== */
.ne-page {
    font-family: 'Segoe UI', sans-serif;
    padding: 40px 20px;
    background-color: #fafafa;
}

/* NE Header */
.ne-header {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.ne-breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
}

.ne-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

.ne-intro {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}

/* ========== NE Tabs ========== */
.ne-tabs {
    display: flex;
    gap: 20px;
    margin: 30px auto;
    max-width: 1100px;
    flex-wrap: wrap;
}

.ne-tab {
    background: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 5px;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    color: #333;
    transition: color 0.3s, border-color 0.3s;
}

.ne-tab:hover {
    color: #51284f;
}

.ne-tab.active {
    border-color: #51284f;
    color: #51284f;
}

/* ========== NE Layout Structure ========== */
.ne-layout {
    display: flex;
    gap: 40px;
    max-width: 1100px;
    margin: auto;
    flex-wrap: wrap;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .ne-header h1 {
        font-size: 22px;
    }

    .ne-tabs {
        gap: 10px;
        justify-content: flex-start;
    }

    .request-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ne-layout {
        flex-direction: column;
        gap: 20px;
    }

    .request-header select {
        width: 100%;
        max-width: 100%;
    }
}
/* ========== Request Header Dropdown ========== */
.request-header select {
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4L2 0zm0 5L0 3h4l-2 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 200px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.request-header select:focus {
    border-color: #51284f;
    box-shadow: 0 0 0 2px rgba(81, 40, 79, 0.1);
}

/* Request Header Wrapper */
.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ========== NE Page Base ========== */
.ne-page {
    font-family: 'Segoe UI', sans-serif;
    padding: 40px 20px;
    background-color: #fafafa;
}

/* NE Header */
.ne-header {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.ne-breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
}

.ne-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

.ne-intro {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}

/* ========== NE Tabs ========== */
.ne-tabs {
    display: flex;
    gap: 20px;
    margin: 30px auto;
    max-width: 1100px;
    flex-wrap: wrap;
}

.ne-tab {
    background: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 5px;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    color: #333;
    transition: color 0.3s, border-color 0.3s;
}

.ne-tab:hover {
    color: #51284f;
}

.ne-tab.active {
    border-color: #51284f;
    color: #51284f;
}

/* ========== NE Layout Structure ========== */
.ne-layout {
    display: flex;
    gap: 40px;
    max-width: 1100px;
    margin: auto;
    flex-wrap: wrap;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .ne-header h1 {
        font-size: 22px;
    }

    .ne-tabs {
        gap: 10px;
        justify-content: flex-start;
    }

    .request-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ne-layout {
        flex-direction: column;
        gap: 20px;
    }

    .request-header select {
        width: 100%;
        max-width: 100%;
    }
}

/* ========== NE Sidebar ========== */
.ne-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.ne-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ne-sidebar li {
    margin-bottom: 10px;
}

.ne-sidebar a {
    text-decoration: none;
    color: #51284f;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ne-sidebar a:hover {
    color: #341e35;
}

/* ========== NE Main Content ========== */
.ne-main {
    flex: 1;
}

/* Section Header */
.ne-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.ne-section-title h2 {
    font-size: 20px;
    margin: 0;
}

.ne-all-link {
    font-size: 13px;
    text-decoration: underline;
    color: #999;
    transition: color 0.3s;
}

.ne-all-link:hover {
    color: #51284f;
}

/* ========== NE Cards ========== */
.ne-card {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    border-left: 4px solid #f26522;
    padding: 15px;
    margin-bottom: 25px;
    background-color: #fff;
    gap: 20px;
    border-radius: 5px;
}

.ne-image img {
    width: 220px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.ne-content {
    flex: 1;
}

/* Tags */
.ne-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ne-tag {
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    color: white;
}

.ne-news-tag {
    background-color: #f4b400;
}

.ne-event-tag {
    background-color: #f26522;
}

.ne-live-tag {
    background-color: #d93025;
}

/* Title & Summary */
.ne-title {
    font-size: 18px;
    margin: 5px 0;
    color: #333;
}

.ne-summary {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Date */
.ne-date {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========== NE Media Section ========== */
.ne-media-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

.ne-block {
    margin-bottom: 50px;
}

/* Block Header */
.ne-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.ne-block-header h2 {
    font-size: 22px;
    color: #333;
}

/* ========== Video Cards ========== */
.ne-video-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ne-video-card {
    width: 100%;
    max-width: 250px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.ne-video-card:hover {
    transform: translateY(-3px);
}

/* Large Format Video Card */
.ne-video-card.large {
    max-width: 500px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 1024px) {
    .ne-layout {
        flex-direction: column;
    }

    .ne-sidebar {
        width: 100%;
    }

    .ne-card {
        flex-direction: column;
    }

    .ne-image img {
        width: 100%;
    }

    .ne-video-card.large {
        flex-direction: column;
    }
}

/* ========== Video Thumbnail ========== */
.ne-video-thumb {
    position: relative;
    width: 250px;
    flex-shrink: 0;
}

.ne-video-thumb img {
    width: 100%;
    display: block;
    border-radius: 5px;
}

/* Play Button Overlay */
.ne-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.ne-play-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Video Description */
.ne-video-desc p {
    margin: 0 0 8px;
    font-weight: 500;
}

.ne-date {
    font-size: 12px;
    color: #888;
}

/* ========== Event Grid & Card ========== */
.ne-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.ne-event-card {
    background: #fff;
    border-left: 4px solid #f26522;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.ne-event-card:hover {
    transform: translateY(-3px);
}

.ne-event-tag {
    background-color: #f26522;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.ne-event-card h4 {
    font-size: 15px;
    margin: 0 0 8px;
    color: #333;
}

.ne-type {
    font-size: 12px;
    color: #555;
}

/* ========== Knowledge Page Layout ========== */
.kn-page {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', sans-serif;
}

.kn-breadcrumb {
    font-size: 13px;
    color: #777;
    margin-bottom: 5px;
}

.kn-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

.kn-header p {
    color: #555;
    margin-bottom: 30px;
}

/* KN Tabs */
.kn-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.kn-tab {
    background: none;
    border: none;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.kn-tab:hover {
    color: #51284f;
}

.kn-tab.active {
    border-color: #51284f;
    color: #51284f;
}

/* ========== KN Aspirations Grid ========== */
.kn-aspirations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* KN Aspirations Card */
.kn-asp-card {
    padding: 20px;
    border-radius: 10px;
    color: white;
    height: 100%;
    background: #51284f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, transform 0.3s ease;
}

.kn-asp-card:hover {
    transform: translateY(-3px);
    background: #341e35;
}

/* ========== Responsive Enhancements ========== */
@media (max-width: 768px) {
    .ne-video-thumb {
        width: 100%;
    }

    .kn-header h1 {
        font-size: 22px;
    }

    .kn-header p {
        font-size: 14px;
    }
}

/* ========== KN Aspiration Card Content ========== */
.kn-asp-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.kn-asp-card p {
    font-size: 14px;
    margin-bottom: 10px;
}

.kn-cta {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-decoration: underline;
}

/* KN Aspiration Color Variants */
.kn-asp-card.red {
    background-color: #f44336;
}

.kn-asp-card.blue {
    background-color: #2196f3;
}

.kn-asp-card.purple {
    background-color: #9c27b0;
}

.kn-asp-card.yellow {
    background-color: #ffcb05;
    color: #000;
}

.kn-asp-card.pink {
    background-color: #e6007e;
}

/* ========== KN Mixed Article/Video Section ========== */
.kn-mixed-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Article & Video Boxes */
.kn-article-box,
.kn-video-box {
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    position: relative;
}

.kn-article-box img,
.kn-video-box img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.kn-article-box p {
    font-size: 14px;
    margin-top: 10px;
    color: #333;
}

/* Video Play Button */
.kn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 14px;
    border-radius: 50%;
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.kn-play:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* ========== Resource Layout & Sidebar ========== */
.resource-layout {
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
}

.resource-sidebar {
    width: 320px;
    background-color: #fff;
    padding: 20px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    flex-shrink: 0;
}

.resource-sidebar h3 {
    margin-top: 0;
    font-size: 18px;
    color: #51284f;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .kn-mixed-section {
        grid-template-columns: 1fr;
    }

    .resource-layout {
        flex-direction: column;
    }

    .resource-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}
/* ========== Search Box ========== */
.search-box input {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: #51284f;
}

/* ========== Country List with Radio Buttons ========== */
.country-list label {
    display: flex;
    align-items: center;
    margin: 6px 0;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    transition: color 0.3s;
}

.country-list input[type="radio"] {
    margin-right: 10px;
}

/* ========== Resource Content Area ========== */
.resource-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background-color: #f8f8f8;
}

/* ========== Resource Card ========== */
.resource-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-3px);
}

.resource-card h4 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.resource-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .resource-layout {
        flex-direction: column;
    }

    .resource-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .resource-content {
        padding: 20px;
    }
}

/* Page Loader Container */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
}

/* AU Logo with Heartbeat */
.loader-logo {
    width: 100px;
    height: auto;
    animation: heartbeat 1.5s infinite ease-in-out;
    z-index: 2;
}

/* Expanding Green Pulse Circle */
.pulse-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(0, 128, 0, 0.1);
    animation: pulseCircle 2s infinite;
    z-index: 1;
}

/* Heartbeat Animation */
@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Expanding & Fading Green Circle */
@keyframes pulseCircle {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.2;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

.circular-text {
    position: absolute;
    width: 200px;
    height: 200px;
    animation: rotateText 6s linear infinite;
    z-index: 3;
}

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.circular-text text {
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: textPulse 4s ease-in-out infinite;
    fill: #007856;
    /* AU Green */
}

/* Optional text effect (breathing/pulsing) */
@keyframes textPulse {

    0%,
    100% {
        fill-opacity: 0.7;
    }

    50% {
        fill-opacity: 1;
    }
}

/* OUTER RING */
.outer-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: rgb(54, 6, 6);
    z-index: 0;
    animation: outerRingPulse 3s ease-in-out infinite;
}

/* Soft glowing effect */
@keyframes outerRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.15;
    }

    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

.nav-link.active {
    background-color: #522B39;
    color: #fff;
    border-radius: 8px;
    /* optional for rounded feel */
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 4px;
    background-color: #f5c143;
    border-radius: 2px;
}



/* Involve Panel Base */
.involve-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 350px;
    max-width: 90%;
    height: 100%;
    background-color: #fff;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transition: right 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show Panel */
.involve-panel.active {
    right: 0;
      z-index: 10000; /* ✅ Must be higher than nav-bar */

}

.involve-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
}

/* Divide the view into 1/6 and 5/6 */
.involve-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.involve-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sparkle Animation */
.africa-sparkle {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: sparkleOnce 1.8s ease-out 0.3s forwards;
}

/* Only plays once */
@keyframes sparkleOnce {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(0deg);
    }

    40% {
        opacity: 1;
        transform: scale(1.1) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.8) rotate(180deg);
    }
}

/* Content Area (remaining 5/6) */
.involve-body {
    flex: 5;
    padding: 40px 30px;
    text-align: center;
    position: relative;
}
/* Shared Form Section */
.form-section {
    margin-top: 30px;
    animation: fadeIn 0.4s ease;
}

.form-section.hidden {
    display: none;
}

/* Intro Paragraph */
.form-intro {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    text-align: left;
}

/* Input Styles */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.auth-form input {
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    outline: none;
    transition: border-color 0.3s ease;
}

.auth-form input:focus {
    border-color: #51284f;
}

/* Submit Button */
.submit-btn {
    background-color: #007856;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #005e44;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/* Toggle Icon */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    font-size: 28px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    z-index: 10001;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}



.banner-slide.video-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.main-nav {
    background-color: #d3c69a;
    padding: 0;
    font-family: Arial, sans-serif;
    position: relative;
    z-index: 1000;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    display: flex;
}

.nav-item {
    position: relative;
}

.nav-item a {
    display: block;
    padding: 14px 20px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    text-transform: capitalize;
    transition: background 0.3s;
}

.nav-item.active a {
    background-color: #53222b;
    color: #fff;
}

.nav-item:hover a {
    background-color: #b5a87c;
}

/* Dropdown Submenu */
.has-sub>a i {
    margin-left: 6px;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #d3c69a;
    border: 1px solid #c3b78a;
    border-radius: 4px;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.sub-menu li a {
    padding: 10px 16px;
    display: block;
    color: #000;
}

.sub-menu li a:hover {
    background-color: #b5a87c;
    color: #fff;
}

.nav-item:hover .sub-menu {
    display: block;
}

/* Mega Menu */
.has-mega:hover .mega-menu {
    display: block;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(0);
    width: 100vw;
    max-width: 1200px;
    background-color: #d3c69a;
    border-top: 2px solid #53222b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 30px;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 999;
}

.mega-menu-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}


.mega-column.regions li a,
.mega-column.countries li a {
    /* padding: 8px 10px; */
    cursor: pointer;
}

.mega-column.regions li:hover a,
.mega-column.regions li.active {
    background-color: #b5a87c;
    color: white;
}


/* Add divider on the left side of the info panel */
/* Info Panel */

.region-image {
    width: 150px;
    /* Increased from 120px */
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.learn-more-btn {
    font-weight: bold;
    font-size: 14px;
    color: #f5c143;
    text-decoration: none;
}

.tab-section {
    display: none;
}

.tab-section.active {
    display: block;
}

.ne-tab.active {
    background-color: #007856;
    color: #fff;
}
.au-region-tabs {
    text-align: center;
    padding: 20px;
}

.region-tab {
    padding: 10px 18px;
    margin: 0 5px;
    border: none;
    background: #eee;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.region-tab.active,
.region-tab:hover {
    background-color: #FFD700;
    color: #000;
}

.au-member-layout {
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    gap: 20px;
    padding: 20px;
}

.au-region-sidebar,
.au-region-menu {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    min-height: 100%;
}

.au-region-sidebar ul {
    list-style: none;
    padding: 0;
}

.au-region-sidebar li {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.au-region-sidebar li:hover {
    background: #FFD700;
}

.au-region-mapnews {
    padding: 0;
}

#leafletMap {
    border-radius: 8px;
    margin-bottom: 20px;
}

.au-region-news ul {
    list-style: disc;
    padding-left: 20px;
}

.au-region-menu ul {
    list-style: none;
    padding: 0;
}

.au-region-menu li a {
    display: block;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.au-region-menu li a:hover {
    color: #FFD700;
}
.country-tooltip {
    background: #FFD700;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 13px;
}

.country-tooltip {
    background: #FFD700;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}
.resources-tabs-container ul.resources-tabs-list {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-left: 0;
    margin-bottom: 0;
    scrollbar-width: none;
    /* Firefox */
}

.resources-tabs-container ul.resources-tabs-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.resources-tabs-list li.resources-tab-item {
    list-style: none;
}

.resources-tabs-list a.resources-tab-link {
    display: inline-block;
    padding: 8px 20px;
    font-weight: 600;
    color: #333;
    border: none;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.resources-tabs-list a.resources-tab-link:hover,
.resources-tabs-list a.resources-tab-link.active {
    border-bottom: 3px solid #f4c613;
    color: #000;
}
.resources-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.resources-tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Social Icons */
.resources-social i {
    transition: transform 0.2s ease;
}

.resources-social i:hover {
    transform: scale(1.2);
}

/* Banner Image */
.resources-banner-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

/* Location and Icon Badge Row */
.resources-meta-row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.resources-meta-row i {
    margin-right: 5px;
}

.resources-badge-icons span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: bold;
    cursor: default;
}
.au-speaker-section {
    margin-top: 40px;
    padding: 20px 0;
}

.au-speaker-layout {
    display: flex;
    gap: 30px;
}

.au-speaker-sidebar {
    width: 25%;
}

.speaker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.speaker-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.speaker-item.active .speaker-image::after {
    content: "";
    position: absolute;
    border: 3px solid #f7c20f;
    width: 80px;
    height: 80px;
    top: -5px;
    left: -5px;
    border-radius: 50%;
    z-index: 0;
}

.speaker-image {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.speaker-image img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #ccc;
}

.speaker-info {
    font-size: 14px;
}

.au-speaker-content {
    width: 50%;
}

.event-highlight-title {
    margin-bottom: 15px;
    color: #800000;
    font-weight: bold;
}

.event-highlight-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.event-highlight-list li {
    margin-bottom: 8px;
    font-size: 15px;
}

.event-highlight-list li strong {
    margin-right: 8px;
    color: #800000;
}

.event-description {
    font-size: 15px;
    color: #444;
}

.au-media-contact {
    width: 25%;
    font-size: 14px;
}
.au-speaker-sidebar h4,
.au-media-contact h4 {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.au-speaker-sidebar h4::after,
.au-media-contact h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background-color: #f7c20f;
    /* AU gold/yellow */
    border-radius: 2px;
}
.africa-unio-tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.africa-unio-tab-list {
    list-style: none;
    display: flex;
    gap: 40px;
    padding-left: 0;
    margin: 0;
}

.africa-unio-tab-item {
    font-weight: 600;
    padding: 12px 0;
    position: relative;
    cursor: pointer;
    color: #444;
}

.africa-unio-tab-item.active {
    color: #222;
}

.africa-unio-tab-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #f7c20f;
    border-radius: 2px;
}
.africa-unio-sidebar {
    width: 220px;
    background: #f9f9f9;
    padding: 15px;
    border-right: 1px solid #ddd;
    font-size: 14px;
}

.africa-unio-filter-list {
    list-style: none;
    padding-left: 0;
}

.africa-unio-filter-item {
    padding: 10px 0;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    font-weight: 500;
}

.africa-unio-filter-item.search {
    display: flex;
    align-items: center;
    padding-top: 15px;
    border-bottom: none;
}

.africa-unio-filter-item.search input {
    flex-grow: 1;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.africa-unio-search-btn {
    background: #f7c20f;
    border: none;
    padding: 6px 8px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 2px;
}

.africa-unio-search-btn i {
    font-size: 14px;
    color: #222;
}
.africa-unio-featured-event {
    background: #fff7ec;
    border-left: 5px solid #f7c20f;
    padding: 20px;
    margin-bottom: 30px;
}

.africa-unio-featured-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.africa-unio-featured-image img {
    width: 300px;
    height: auto;
    border-radius: 4px;
}

.africa-unio-featured-details {
    flex: 1;
}

.africa-unio-featured-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.event-tag {
    background-color: #f7c20f;
    color: #222;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 12px;
    text-transform: uppercase;
}

.live-tag {
    color: red;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.africa-unio-featured-details h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.africa-unio-featured-details p {
    font-size: 14px;
    color: #555;
}
.africa-unio-event-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 30px;
}

.africa-unio-event-card {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #f7c20f;
    padding: 15px 20px;
    width: calc(50% - 20px);
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

.africa-unio-event-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-badge {
    background: #f7c20f;
    font-size: 12px;
    font-weight: bold;
    color: #222;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
}

.africa-unio-event-card h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.event-meta {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.event-meta i {
    color: #444;
}

.event-type {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.event-icons span {
    font-size: 16px;
    margin-right: 8px;
}
.africa-unio-page-layout {
    display: flex;
    gap: 30px;
}

.africa-unio-main-content {
    flex: 1;
}
.africa-unio-event-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 20px;
}

.africa-unio-event-card {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #f7c20f;
    padding: 18px 20px;
    width: calc(50% - 20px);
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.africa-unio-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-left-color: #f7b500;
}

.event-badge {
    background: #f7c20f;
    color: #222;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

.africa-unio-event-card h5 {
    font-size: 16px;
    margin-bottom: 8px;
}

.event-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.event-type {
    background: #eee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.event-icons span {
    font-size: 16px;
    margin-right: 6px;
}
.africa-unio-calendar-wrapper {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-left: 4px solid #f7c20f;
    border-radius: 8px;
}

.calendar-heading {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.africa-unio-calendar table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.africa-unio-calendar th {
    background-color: #f7c20f;
    color: #000;
    padding: 10px;
    font-weight: 600;
    font-size: 13px;
}

.africa-unio-calendar td {
    padding: 15px 0;
    border: 1px solid #eee;
    font-size: 14px;
    color: #444;
}

.africa-unio-calendar td.has-event {
    background: #fff4d0;
    font-weight: bold;
    color: #111;
    position: relative;
    cursor: pointer;
}

.africa-unio-calendar td.has-event::after {
    content: "📌";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
}
.africa-unio-calendar-event-info {
    margin-top: 20px;
    background: #fff9e4;
    border-left: 3px solid #f7c20f;
    padding: 15px 20px;
    border-radius: 6px;
}

.africa-unio-calendar-event-info h5 {
    margin-bottom: 10px;
    font-size: 16px;
    color: #222;
}

.auc-grid-section {
    padding: 40px 20px;
    background: #f9f9f9;
}

.auc-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.auc-card {
    perspective: 1000px;
}

.auc-card-inner {
    position: relative;
    width: 100%;
    height: 350px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.auc-card:hover .auc-card-inner {
    transform: rotateY(180deg);
}

.auc-card-front,
.auc-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.auc-card-front {
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    padding: 20px;
    background-blend-mode: overlay;
}

.auc-card-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 0;
}

.auc-card-info {
    position: relative;
    z-index: 1;
}

.auc-card-front h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.auc-card-front p {
    font-size: 14px;
    color: #ddd;
}

.auc-card-back {
    background: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #222;
}

.auc-card-back h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.auc-card-back p {
    font-size: 14px;
    text-align: center;
    color: #555;
}
/* Play Button */
.auc-video-play-btn {
    width: 60px;
    height: 60px;
    background: #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: auc-pulse 2s infinite;
    cursor: pointer;
    z-index: 5;
}

/* Ripple Effect */
@keyframes auc-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* Modal Popup */
.auc-video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.auc-video-modal-content {
    position: relative;
    background: #000;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    max-width: 700px;
    animation: fadeIn 0.5s ease-in-out;
}

.auc-video-modal video {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.auc-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

/* Modal Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.auc-heading-half-underline {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}

.auc-heading-half-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    /* Thickness of underline */
    background-color: #ffc107;
    /* Yellow */
    width: 50%;
    /* Half the width of the text */
}
.auc-card-back-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: relative;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
}

.auc-card-back-content::before {
    content: "";
    position: absolute;
    left: 40px;
    /* Distance from left edge (adjust for ~1 inch margin) */
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 40px;
    /* Short vertical line */
    /* background-color: #ffc107; */
    /* Yellow color */
    border-radius: 2px;
}

/* ========== ABOUT PAGE BASE ========== */
.auabout-container {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.auabout-breadcrumb {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.auabout-breadcrumb a {
    color: #333;
    text-decoration: none;
}

.auabout-breadcrumb span {
    margin: 0 5px;
    color: #f7c20f;
}

.auabout-title {
    font-size: 36px;
    color: #4a2e2e;
    margin-bottom: 15px;
}

.auabout-intro {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* ========== FLEX LAYOUT ========== */
.auabout-wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Left Tabs */
.auabout-tabs {
    width: 20%;
    min-width: 200px;
}

.auabout-tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.auabout-tabs li {
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    cursor: pointer;
    background: #f8f8f8;
    transition: background 0.3s ease;
}

.auabout-tabs li:hover {
    background-color: #e8e8e8;
}

.auabout-tabs li.active {
    background-color: #d3c69a;
    font-weight: bold;
}

/* Center Content */
.auabout-content {
    width: 55%;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

/* Right Chairperson Panel */
.auabout-chair {
    width: 25%;
    background: #fff;
    padding: 0 0 20px;
    border-left: 3px solid #f7c20f;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.auabout-chair h4 {
    font-size: 20px;
    font-weight: bold;
    color: #4a2e2e;
    margin: 0 0 15px;
    padding: 10px 15px 5px;
    border-bottom: 2px solid #f7c20f;
}

.chair-box {
    padding: 0 15px;
}

.chair-img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 12px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chair-name {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 2px;
    color: #4a2e2e;
}

.chair-role {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.chair-quote {
    font-size: 14px;
    color: #444;
    background: #f8f8f8;
    padding: 10px 14px;
    border-left: 4px solid #ccc;
    font-style: italic;
    margin: 10px 0;
    position: relative;
}

.chair-quote i {
    color: #ccc;
    margin-right: 8px;
}

.chair-link {
    margin-top: 10px;
    text-align: right;
}

.chair-link a {
    font-size: 20px;
    color: #f7c20f;
    transition: color 0.3s ease;
}

.chair-link a:hover {
    color: #c19700;
}
.auabout-tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auabout-tabs li {
    padding: 10px 15px;
    background: #eee;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.auabout-tabs li.active {
    background: #FFD700;
    color: #000;
}

.about-tab-panel {
    display: none;
}

.about-tab-panel.active {
    display: block;
}

/* ========== Responsive ========== */
@media (max-width: 992px) {
    .auabout-wrapper {
        flex-direction: column;
    }

    .auabout-tabs,
    .auabout-content,
    .auabout-chair {
        width: 100%;
    }
}

/* ===== Aspiration Card Grid Layout ===== */
.aspiration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* ===== Individual Card Container ===== */
.aspiration-card {
    position: relative;
    height: 260px;
    perspective: 1000px;
    cursor: pointer;
}

/* ===== Inner Flip Container ===== */
.aspiration-card-inner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

.aspiration-card:hover .aspiration-card-inner {
    transform: rotateY(180deg);
}

/* ===== Front of Card ===== */
.card-front {
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

.card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    border-radius: 10px;
}

.card-front span {
    position: relative;
    z-index: 1;
}

/* ===== Back of Card ===== */
.card-back {
    background: #522B39;
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.card-back button {
    margin-top: 12px;
    background-color: #FFD700;
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-back button:hover {
    background-color: #e0be00;
}

/* ===== Responsive Tweak for Smaller Screens ===== */
@media (max-width: 768px) {
    .aspiration-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.asp2063-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.asp2063-card {
    perspective: 1000px;
    height: 320px;
    position: relative;
}

.asp2063-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    position: relative;
}

.asp2063-card:hover .asp2063-card-inner {
    transform: rotateY(180deg);
}

.asp2063-card-front,
.asp2063-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Front side */
.asp2063-card-front {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: white;
    position: relative;
}

.asp2063-card-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.asp2063-overlay {
    position: relative;
    z-index: 2;
}

.asp2063-overlay h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.asp2063-count {
    background: #FFD700;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Back side */
.asp2063-card-back {
    background: #fff;
    color: #333;
    padding: 25px;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.asp2063-btn {
    margin-top: 15px;
    background-color: #51284f;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.asp2063-btn:hover {
    background-color: #341e35;
}
.asp2063-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ensures exactly 3 per row */
    gap: 25px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .asp2063-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .asp2063-grid {
        grid-template-columns: 1fr;
    }
}


.auabout-accordion-section {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.auabout-accordion-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.auabout-accordion-header {
    background-color: #522B39;
    color: #fff;
    padding: 14px 20px;
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease;
}

.auabout-accordion-header:hover {
    background-color: #341e35;
}

.auabout-accordion-body {
    display: none;
    padding: 16px 20px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: #333;
}

.auabout-accordion-item.active .auabout-accordion-body {
    display: block;
}
.news-main-tabs {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.news-tab {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    color: #222;
    position: relative;
}

.news-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #f5c143;
}

.news-layout {
    display: flex;
    margin-top: 20px;
    gap: 20px;
}

.news-sidebar-tabs {
    width: 220px;
}

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

.news-sidebar-tabs li {
    padding: 10px;
    border-left: 4px solid transparent;
    cursor: pointer;
    color: #333;
    transition: all 0.3s ease;
}

.news-sidebar-tabs li.active,
.news-sidebar-tabs li:hover {
    border-left: 4px solid #f5c143;
    background-color: #f9f9f9;
}

.news-tab-content {
    flex: 1;
}

.news-tab-title {
    border-left: 4px solid #f5c143;
    padding-left: 10px;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #800000;
}

.news-card {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 15px;
}

.news-image img {
    width: 220px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

.news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-category {
    font-size: 12px;
    color: #f5c143;
    font-weight: bold;
    margin-bottom: 8px;
}

.news-info h3 {
    font-size: 16px;
    margin: 0;
    color: #222;
}

.news-info p {
    font-size: 14px;
    color: #555;
    margin: 8px 0;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
}

.news-share-icons i {
    margin-left: 8px;
    color: #555;
    cursor: pointer;
}

.afmap-section {
    font-family: 'Segoe UI', sans-serif;
    padding: 20px;
    background: #fdfdfd;
}

.afmap-regions {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.afmap-region-tab {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    color: #222;
    position: relative;
}

.afmap-region-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #f5c143;
}

.afmap-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Side Tabs */
.afmap-side-tabs {
    width: 230px;
}

.afmap-side-tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.afmap-side-tabs li {
    padding: 10px;
    border-left: 4px solid transparent;
    background: #f5f5f5;
    margin-bottom: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.afmap-side-tabs li.active,
.afmap-side-tabs li:hover {
    border-left-color: #f5c143;
    background-color: #fff;
}

/* Map Center */
.afmap-center {
    flex: 1;
}

.afmap-country-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.afmap-country-selector select {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
}

#afmap-leaflet {
    width: 100%;
    height: 300px;
    border-radius: 6px;
    background: #e0e0e0;
}

/* Country Profile */
.afmap-profile-box {
    width: 280px;
    background: #f9f9f9;
    border-left: 3px solid #008000;
    padding: 15px;
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.afmap-profile-header {
    font-weight: bold;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.afmap-profile-content {
    font-size: 14px;
    color: #444;
    overflow-y: auto;
    max-height: 220px;
}

.view-btn {
    background: #008000;
    color: white;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.afmap-description {
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}.card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.country-card {
    flex: 1 1 30%;
    min-width: 220px;
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-overlay {
    background-color: rgba(82, 43, 57, 0.8);
    /* #522B39 with opacity */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-content h3,
.card-content p {
    color: #fff;
    font-weight: bold;
    margin: 0.5rem 0;
}

.card-content h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
}

.card-content p {
    font-size: 1.1rem;
}

.country-card {
    flex: 1 1 30%;
    min-width: 220px;
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.country-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

.card-overlay {
    background-color: rgba(82, 43, 57, 0.8);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease;
}

.country-card:hover .card-overlay {
    background-color: rgba(82, 43, 57, 0.9);
    /* Slightly darker on hover */
}

.info-card-row {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.info-card {
    flex: 1 1 30%;
    background-color: #522B39;
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover,
.info-card.active {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
    background-color: #6a374d;
}

.card-inner {
    padding: 0.5rem;
}

.info-paragraphs .info-paragraph {
    display: none;
    animation: floatIn 0.5s ease forwards;
}

.info-paragraphs .info-paragraph.active {
    display: block;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Slider container */
.news-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    margin-top: 1rem;
}

/* Each slide */
.news-slider .slide {
    flex: 0 0 300px;
    height: 180px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    background-color: #f0f0f0;
}

.news-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover effect */
.news-slider .slide:hover {
    transform: scale(1.03);
}

/* Read More Button */
.read-more-btn {
    display: inline-block;
    margin-top: 1rem;
    background-color: #522B39;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: #6e3c4f;
}
.news-slider {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.news-slider::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.news-slider-wrapper {
    position: relative;
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 0;
    /* remove any rounding for full edge */
}

.news-slider-track {
    display: flex;
    transition: transform 0.4s ease;
    width: 100%;
}

.slide {
    flex: 0 0 100%;
    max-width: 100%;
    height: 200px;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}


/* Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(82, 43, 57, 0.8);
    color: white;
    border: none;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 2;
    border-radius: 4px;
}

.slider-arrow.left {
    left: 5px;
}

.slider-arrow.right {
    right: 5px;
}

.slider-arrow:hover {
    background-color: #6a374d;
}

.news-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.news-subscribe-form .form-group {
    width: 100%;
}

.news-subscribe-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.news-subscribe-form input:focus {
    border-color: #522B39;
    outline: none;
    box-shadow: 0 0 4px rgba(82, 43, 57, 0.4);
}

.view-btn {
    background-color: #522B39;
    color: #fff;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-btn:hover {
    background-color: #6e3c4f;
}

.africa-layout {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: flex-start;
}

.sidebar {
    width: 20%;
}

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

.sidebar li {
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.map-panel {
    width: 50%;
}

.selectors {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.selectors .dropdown select {
    padding: 0.4rem;
    margin-left: 0.5rem;
}

.map-container {
    border: 1px solid #ccc;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-container img {
    width: 100%;
    height: auto;
}

.info-card {
    width: 28%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
}

.info-header .flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.info-header .title {
    flex-grow: 1;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
}

.info-body {
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
}

.view-btn {
    background-color: #522B39;
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
}

.bottom-description {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: #444;
}

/* Banner Image */
.featured-banner img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 2rem;
    border-radius: 6px;
}

/* 3-Column Layout */
.featured-content {
    display: flex;
    gap: 2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 2rem 0;
    flex-wrap: wrap;
}

.featured-col {
    padding: 0 1rem;
}

.featured-col.register,
.featured-col.contact {
    flex: 1;
}

.featured-col.middle {
    flex: 2;
}

/* Register Form */
.featured-col.register form {
    display: flex;
    flex-direction: column;
}

.featured-col.register input {
    margin-bottom: 10px;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.featured-col.register button {
    background: #f6a623;
    color: #fff;
    border: none;
    padding: 0.6rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.featured-col.register small {
    font-size: 0.75rem;
    color: #666;
}

/* Highlights */
.event-highlights h4,
.speakers h4 {
    margin: 1.5rem 0 0.5rem;
}

.event-highlights ol {
    padding-left: 1.2rem;
}

.event-highlights li {
    margin-bottom: 0.5rem;
}

/* Speakers */
.speaker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.speaker {
    text-align: center;
    width: 120px;
}

.speaker img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #f6a623;
    margin-bottom: 0.5rem;
}

/* Contact */
.featured-col.contact h4 {
    margin-bottom: 1rem;
}

.featured-col.contact p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Bottom Description */
.featured-description {
    margin-top: 2rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.featured-col h4 {
    font-size: 1.1rem;
    /* smaller than default */
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 6px;
    color: #333;
}

.featured-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 4px;
    background-color: #f6a623;
    /* bold yellow line */
    border-radius: 2px;
}

.event-highlights-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1rem;
    background-color: #f9f9f9;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.event-highlights-box ol {
    margin: 0;
    padding-left: 1.2rem;
}

.event-highlights-box li {
    margin-bottom: 0.6rem;
    color: #333;
}
/* Header with yellow underline */
.speakers h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    color: #4a3f3f;
    font-weight: 600;
}

.speakers h4::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #f6a623;
    border-radius: 2px;
}

/* Speaker Grid */
.speaker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    margin-top: 1rem;
}



/* Each Speaker Card */
.speaker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Image Container with styled arc border */
.speaker-img-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 5px solid transparent;
    position: relative;
    background: conic-gradient(#f6a623 0deg 90deg, transparent 90deg 360deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.speaker-img-wrap img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
}

/* Text next to image */
.speaker p {
    font-size: 0.9rem;
    color: #333;
    margin: 0;
    line-height: 1.4;
}
.speaker-name {
    white-space: nowrap;
    font-weight: 600;
    margin-right: 4px;
}

.news-section {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.news-section.active {
    display: block;
    opacity: 1;
}

.event-schedule-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.event-days-sidebar {
    width: 20%;
    min-width: 160px;
    background-color: #f9f9f9;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.event-day {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 12px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
}

.event-day.active {
    background-color: #4d1933;
    color: #fff;
    font-weight: bold;
}

.event-day-content {
    width: 80%;
    padding: 20px;
}

.event-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 15px;
}

.event-programme-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.programme-tab {
    padding: 10px 15px;
    border: none;
    background: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.programme-tab.active {
    background-color: #f4cd1e;
    color: #000;
}

.event-description {
    font-size: 22px;
    font-family: 'Georgia', serif;
    margin-bottom: 25px;
}

.event-speakers h4 {
    margin-bottom: 10px;
    border-bottom: 2px solid #f4cd1e;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 18px;
}

.speaker-list {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.speaker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    text-align: center;
}

.speaker-img img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #f4cd1e;
    margin-bottom: 10px;
}

.speaker-details strong {
    font-weight: 700;
}

.speaker-details span {
    font-size: 14px;
    color: #555;
}

.news-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
}

.news-section h4::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 50px;
    height: 4px;
    background-color: #f6a623;
    border-radius: 2px;
}

.news-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.news-card-ui {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.news-card-ui:hover {
    transform: translateY(-5px);
}

.news-card-ui img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.news-card-body {
    padding: 1rem;
}

.news-card-body.no-image {
    padding-top: 1.5rem;
}

.news-tag {
    font-size: 0.75rem;
    color: #f6a623;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: inline-block;
    text-transform: uppercase;
}

.news-card-body p {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.news-meta {
    font-size: 0.8rem;
    color: #777;
}


.afu-main-nav {
    background-color: #522b39;
    font-family: 'Segoe UI', sans-serif;
}

.afu-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.afu-nav-item {
    position: relative;
}

.afu-nav-item a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    background-color: #d7c693;
    color: #222;
    border-right: 1px solid #714653;
    font-weight: 500;
    transition: background 0.3s;
}

.afu-nav-item.afu-active a {
    background-color: #522b39;
    color: white;
    font-weight: bold;
}

.afu-nav-item a:hover {
    background-color: #c6b376;
}

/* Dropdown */
.afu-has-dropdown:hover .afu-dropdown-menu {
    display: block;
}

.afu-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #d7c693;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.afu-dropdown-menu li a {
    padding: 0.75rem 1rem;
    display: block;
    border-bottom: 1px solid #c8b57e;
    color: #333;
}

.afu-dropdown-menu li a:hover {
    background-color: #c6b376;
}
/* Ensure menu bar parent is relative */
.afu-nav-item.afu-member-tab {
    position: relative;
}

/* Mega Dropdown */
.afu-member-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background: #d7c693;
    display: flex;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    gap: 2rem;
    border-top: 4px solid #522b39;
}

/* Column 1: Region List */
.afu-region-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
    border-right: 1px solid #8e7f65;
}

.afu-region-list li {
    padding: 0.7rem 1rem;
    cursor: pointer;
}

.afu-region-list li.active,
.afu-region-list li:hover {
    background: #bfae75;
}

/* Column 2: Country Flags */
.afu-country-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.afu-country-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0;
}

.afu-country-list img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

/* Column 3: Info and Image */
.afu-region-info {
    max-width: 300px;
    border-left: 1px solid #8e7f65;
    padding-left: 1.5rem;
}

.afu-region-info img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.afu-region-info p {
    font-size: 0.9rem;
    color: #222;
    line-height: 1.5;
}

.afu-learn-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: bold;
    color: #522b39;
    text-decoration: none;
}

/* ===== Toggle Button ===== */
.afu-mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    padding: 1rem;
    color: #522b39;
    cursor: pointer;
    z-index: 1000;
}

/* ===== Navigation Setup ===== */
.afu-main-nav {
    background-color: #522b39;
}

.afu-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.afu-nav-item a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    background-color: #d7c693;
    color: #222;
    border-right: 1px solid #714653;
    font-weight: 500;
}

/* ===== Responsive Styles ===== */
@media (max-width: 992px) {
    .afu-mobile-toggle {
        display: block;
    }

    .afu-main-nav {
        display: none;
        width: 100%;
    }

    .afu-main-nav.afu-show {
        display: block;
    }

    .afu-nav-menu {
        flex-direction: column;
        background-color: #d7c693;
    }

    .afu-nav-item a {
        padding: 1rem;
        border-bottom: 1px solid #ccc;
    }

    .afu-dropdown-menu {
        display: none;
        flex-direction: column;
        background-color: #e9dbb0;
    }

    .afu-nav-item.afu-has-dropdown:hover .afu-dropdown-menu {
        display: flex;
    }
}

.home-cards-section {
    margin-top: 0;
    padding: 0;
}

.home-cards-grid {
    display: flex;
    gap: 8px;
    padding: 0 10px;
}

.home-card {
    position: relative;
    flex: 1;
    height: 460px;
    overflow: hidden;
}

.home-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

.home-card:hover .home-card-bg {
    transform: scale(1.1) translateX(8%);
}

.home-card-content {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    height: 100%;
    padding: 25px 20px 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    /* added space from the top */
    margin-bottom: 8px;
}

.short-desc {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.metric-container {
    margin-top: auto;
    margin-bottom: 10px;
}

.circle-metric {
    width: 90px;
    height: 90px;
    background-color: #f5c143;
    color: #111;
    border-radius: 50%;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.metric-label {
    font-size: 15px;
    font-weight: 500;
    margin-top: 6px;
    color: #fff;
}

.full-desc {
    font-size: 14px;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
    margin-top: 12px;
}

.home-card:hover .full-desc {
    max-height: 200px;
    opacity: 1;
}