/* CSS Variables based on FICTAP's colors */
        :root {
            --fictap-blue: #1d4ed8; /* Blue-700 / Primary */
            --fictap-blue-dark: #1e3a8a; /* Blue-900 */
            --fictap-amber: #286090; /* Amber-400 / Accent */
            --background-light: #f9fafb; /* Gray-50 */
            --text-dark: #1f2937; /* Gray-800 */
            --font-family: 'Roboto', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }

        /* Base & Typography */
        body {
            font-family: var(--font-family);
            background-color: var(--background-light);
            color: var(--text-dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            line-height: 1.6;
            margin: unset !important;
        }

        h1, h2, h3, h4 {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.2;

        }


        /*   Hero Banner   */
        .hero-banner-text {
            width: 900px;
        }   
        
        .second-text {
            font-size: 25px;
        }

        /* Utility Classes (Replicating Tailwind) */
        .container {
            max-width: 1440px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

      .timeline-item > div
        .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-full { border-radius: 9999px; }
        .uppercase { text-transform: uppercase; }
        .transition { transition: all 0.3s ease-in-out; }

        /* HEADER & NAVIGATION */
        .top-bar {
            background-color: var(--fictap-blue-dark);
            color: white;
            padding: 0.5rem 0;
            font-size: 0.875rem;
            border-bottom: 1px solid #1e3a8a; /* Blue-900 */
            display: none;
        }

        .mr-2 
        @media (min-width: 768px) {
            .top-bar { display: block; }
            .top-bar .flex-space-x-6 > * + * { margin-left: 1.5rem; }
            .top-bar .flex-space-x-4 > * + * { margin-left: 1rem; }
        }

        /* STICKY HEADER STYLES */
        header {
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: sticky; /* This makes the entire header element stick */
            top: 0;           /* Sticks it at the very top of the viewport */
            z-index: 50;
        }

        .header-content {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-section img {
            height: 4rem; /* h-16 */
            width: auto;
            object-fit: contain;
        }

        .logo-text h1 {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--fictap-blue);
            letter-spacing: -0.05em; /* tracking-tighter */
        }
        @media (min-width: 1024px) {
            .logo-text { display: block; }
            .logo-text h1 { font-size: 2rem; }
        }

        .desktop-nav a {
            font-weight: 700;
            font-size: 0.875rem;
            letter-spacing: 0.05em; /* tracking-wide */
            color: #4b5563; /* gray-600 */
            text-decoration: none;
            padding: 0.5rem;
        }
        .desktop-nav a:hover {
            color: var(--fictap-blue);
        }
        .desktop-nav > a + a { margin-left: 1.5rem; }

        @media (max-width: 767px) {
            .desktop-nav { display: none; }
        }

        /* Mobile Menu */
        .mobile-menu-btn { color: var(--fictap-blue); font-size: 1.5rem; }
        @media (min-width: 768px) {
            .mobile-menu-btn { display: none; }
            h2 {
             font-size: 2rem;
             margin-bottom: 5px;
            }

        }

        #mobile-menu {
            position: absolute;
            width: 100%;
            background-color: white;
            border-top: 1px solid #f3f4f6;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            height: calc(100vh - 4rem); /* Adjust based on header height */
            z-index: 40;
            overflow-y: auto;
            display: none;
        }

        #mobile-menu a {
            padding: 0.5rem;
            display: block;
            font-weight: 700;
            color: #374151; /* gray-700 */
            border-radius: 0.25rem;
        }
        #mobile-menu a:hover {
            background-color: #f9fafb;
        }


/* blue background overlay*/
#news {
    position: relative;
    overflow: hidden;
}

.news-bg-pattern {
    position: absolute;
    background: url('/static/images/overlay-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}


.news-overlay {
    position: absolute;
    inset: 0;
    background: url('/static/images/overlay-bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.35; /* adjust to your liking */
    mix-blend-mode: screen; /* optional smooth blending */
    z-index: 2;
}

#news .container {
    position: relative;
    z-index: 3;
}

        /* HERO SECTION */
        #home {
            position: relative;
            color: white;
            height: 650px;
            overflow: hidden;
        }
        
        /* Hero Slider Custom Styling (replacing Slick) */
        .hero-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }
        .slide.active {
            opacity: 1;
            z-index: 2; /* Active slide visible layer */
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Custom gradient for blending/overlay */
            background: linear-gradient(to right, rgba(29, 78, 216, 0.3) 0%, rgba(29, 78, 216, 0.6) 20%); 
            z-index: 10;
        }

        .hero-content {
            position: relative;
            z-index: 20;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .hero-content h1 {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }
        .hero-content h1 span {
            color: white;
        }
        @media (min-width: 768px) {
            .hero-content h1 { font-size: 4.5rem; }
        }

        .hero-content p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            max-width: 42rem;
            color: #e5e7eb; /* gray-200 */
            font-weight: 300;
        }

        .hero-actions a {
            display: inline-block;
            padding: 0.75rem 2rem;
            border-radius: 0.375rem;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: var(--fictap-amber);
            color: white;
            border: solid 2px #286090;
        }
        .btn-primary:hover {
            background-color: white; /* Amber-300 */
            color: #286090;
            border: solid 2px #286090;
        }

        .btn-secondary {
            border: 2px solid white;
            color: white;
        }
        .btn-secondary:hover {
            background-color: white;
            color: var(--fictap-blue-dark);
        }

        /* Responsive Hero Actions */
        .hero-actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        @media (min-width: 640px) {
            .hero-actions {
                flex-direction: row;
                gap: 1rem;
            }
        }

        /* SECTION 2: History */
        #history {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: white;
            position: relative;
        }

        .history-content {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            align-items: center;
        }
        @media (min-width: 768px) {
            .history-content { flex-direction: row; }
        }

        .history-image-wrap {
            position: relative;
            width: 100%;

        }
        @media (min-width: 768px) {
            .history-image-wrap { width: 50%; }
        }

        .history-image-wrap img {
            width: 100%;
            border-radius: 0.75rem;
/*            box-shadow: 5px 10px 0px 1px #1e3a8a;*/
            position: relative;
            z-index: 10;
            height: 500px !important;
            object-fit: cover;
        }

        .history-image-wrap .decor-top {
            position: absolute;
            top: -1rem;
            left: -1rem;
            width: 6rem;
            height: 6rem;
            background-color: rgba(29, 78, 216, 0.1); /* fictap-blue/10 */
            border-radius: 9999px;
            z-index: 0;
        }

        .history-image-wrap .decor-bottom {
            position: absolute;
            bottom: -1.5rem;
            right: -1.5rem;
            background-color: var(--fictap-amber);
            width: 66.666667%; /* w-2/3 */
            height: 33.333333%; /* h-1/3 */
            z-index: 0;
            border-bottom-right-radius: 0.75rem;
        }

        .history-text {
            width: 100%;
        }
        @media (min-width: 768px) {
            .history-text { width: 50%; }
        }

        .history-text h4 {
            color: var(--fictap-blue);
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }
        .history-text h2 {
            font-size: 2.25rem;
            font-weight: 900;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) {
             .history-text h2 { font-size: 2.5rem; }
        }

        .history-text p {
            color: #4b5563; /* gray-600 */
            margin-bottom: 1.5rem;
        }

        .quote-box {
            padding: 1rem;
            background-color: #eff6ff; /* blue-50 */
            border-left: 4px solid var(--fictap-blue);
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
        .quote-box p {
            font-style: italic;
            color: #374151; /* gray-700 */
            font-weight: 500;
            margin: 0;
        }

        /* SECTION 3: Objectives (Pillars) */
        #objectives {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: #f3f4f6; /* gray-100 */
        }

        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-header span { 
            color: var(--fictap-blue); 
            font-weight: 700; 
            letter-spacing: 0.05em;
        }
        .section-header h2 { 
            font-size: 2.25rem; 
            font-weight: 900; 
            margin-top: 0.5rem; 
        }
        @media (min-width: 768px) {
             .section-header h2 { font-size: 3rem; }
        }

        .section-header .divider {
            width: 6rem;
            height: 0.375rem;
            background-color: var(--fictap-amber);
            margin-left: auto;
            margin-right: auto;
            margin-top: 1.5rem;
        }

        .objectives-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2rem;
        }
        @media (min-width: 768px) {
            .objectives-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (min-width: 1024px) {
            .objectives-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .pillar-card {
            background-color: white;
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border-top-width: 4px;
            text-align: center; /* Center the content */
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .pillar-card:nth-child(odd) { border-top-color: var(--fictap-blue); }
        .pillar-card:nth-child(even) { border-top-color: var(--fictap-amber); }

        .pillar-card:hover {
            transform: translateY(-0.5rem);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .pillar-card .icon-wrap {
            width: 4rem;
            height: 4rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
            margin-left: auto;
            margin-right: auto;
        }
        .pillar-card .icon-wrap { 
            background-color: #bfdbfe; /* blue-100 */
            color: var(--fictap-blue);
        }
/*        .pillar-card:nth-child(even) .icon-wrap { 
            background-color: #fef3c7; 
            color: #d97706; 
        }
*/
        .pillar-card h3 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .pillar-card p {
            color: #4b5563;
            font-size: 1.125rem;
        }


/* CTA */

.flex-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.cta-content {
    color: #fff;
}
.cta-content h2{
    font-size: 3rem;
}
#call-to-action {
    padding: 100px 0px !important;
}


        /* SECTION 4: Board */
        #board {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: white;
        }

        .chair-card-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 5rem;
        }

        .chair-card {
            width: 100%;
            background-color: #f9fafb; /* gray-50 */
            padding: 2.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border-bottom: 4px solid var(--fictap-blue);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            text-align: center;
        }
        @media (min-width: 1024px) {
            .chair-card {
                width: 60%;
                flex-direction: row;
                text-align: left;
            }
        }

        .chair-image {
            position: relative;
            width: 10rem;
            height: 10rem;
            flex-shrink: 0;
        }

        .chair-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 9999px;
            border: 4px solid var(--fictap-blue);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .chair-details h3 {
            font-size: 1.875rem;
            font-weight: 800;
            color: #111827; /* gray-900 */
        }
        .chair-details p:nth-of-type(1) {
            color: #d97706; /* amber-600 */
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: 0.75rem;
        }
        .chair-details p:nth-of-type(2) {
            color: #4b5563; /* gray-600 */
            font-style: italic;
        }

        .officers-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2rem;
        }
        @media (min-width: 640px) {
            .officers-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (min-width: 1024px) {
            .officers-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .board-member-card {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.75rem;
            border-top-width: 4px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s;
            border-top: solid 5px #286090;
        }
/*        .board-member-card:nth-child(odd) { border-top-color: var(--fictap-amber); }
        .board-member-card:nth-child(even) { border-top-color: var(--fictap-blue); }*/
        .board-member-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .member-image {
            width: 10rem;
            height: 10rem;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1rem;
        }
        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 9999px;
            border: 2px solid #e5e7eb; /* gray-200 */
        }

        .member-details h4 {
            font-weight: 700;
            font-size: 1.25rem;
            color: #111827;
            margin-bottom: 10px;
        }
        .member-details p {
            color: var(--fictap-blue);
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .btn-center {
            margin-top: 40px;
            justify-content: center;
            }

        /* SECTION 5: News */
        #news {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: var(--fictap-blue);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        /* Subtle background pattern */
        .news-bg-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.1;
            background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .news-header {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 3rem;
        }
        @media (min-width: 768px) {
            .news-header {
                flex-direction: row;
                align-items: flex-end;
            }
        }

        .news-header h4 {
            font-weight: 700;
            color: var(--fictap-amber);
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }
        .news-header h2 {
            font-size: 2.25rem;
            font-weight: 900;
        }
        @media (min-width: 768px) {
             .news-header h2 { font-size: 3rem; }
        }

        .news-header a {
            margin-top: 1rem;
            padding: 0.5rem 1.5rem;
            border: 1px solid white;
            border-radius: 0.25rem;
            text-decoration: none;
            color: white;
            transition: background-color 0.3s, color 0.3s;
        }
        .news-header a:hover {
            background-color: white;
            color: var(--fictap-blue);
        }
        @media (min-width: 768px) {
            .news-header a { margin-top: 0; }
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2rem;
        }
        @media (min-width: 768px) {
            .news-grid { grid-template-columns: repeat(3, 1fr); }
        }

        .news-article {
            background-color: white;
            color: #1f2937; /* gray-800 */
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transform: translateY(0);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .news-article:hover {
            transform: translateY(-0.5rem);
        }

        .news-image-wrap {
            height: 16rem;
            overflow: hidden;
        }
        .news-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s;
        }
        .news-article:hover .news-image-wrap img {
            transform: scale(1.1);
        }

        .news-content-wrap { padding: 1.5rem; }

        .news-meta {
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            color: #6b7280; /* gray-500 */
            margin-bottom: 0.75rem;
        }
        .news-meta i { margin-right: 0.5rem; }

        .news-content-wrap h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        .news-content-wrap h3:hover { color: var(--fictap-blue); }

        .news-content-wrap p {
            color: #4b5563; /* gray-600 */
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }
        .news-content-wrap a {
            color: var(--fictap-blue);
            font-weight: 700;
            font-size: 0.875rem;
            text-decoration: none;
        }
        .news-content-wrap a:hover { text-decoration: underline; }

        .Activities-news-grid P {
            font-size:20px;
        }
        .Activities-news-grid {
            display: grid;
            grid-template-columns: repeat(1, 3fr);
            gap: 2rem;
        }


        .news-content-wrap-new {
            padding: 0 20px 20px 20px;
        }

        @media (min-width: 768px) {
            .Activities-news-grid { grid-template-columns: repeat(3, 1fr); }

        }

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-header a {
    display: inline-block;
    text-align: center;
}

        /* SECTION 6: Gallery */
        #gallery {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: #f3f4f6; /* gray-100 */
        }

        .gallery-header h2 { font-size: 2.25rem; font-weight: 900; }
        @media (min-width: 768px) {
             .gallery-header h2 { font-size: 3rem; }
        }

        .gallery-header .divider {
            width: 5rem;
            height: 0.25rem;
            background-color: var(--fictap-blue);
            margin-left: auto;
            margin-right: auto;
            margin-top: 1rem;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
        }
        @media (min-width: 768px) {
            .gallery-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .gallery-item {
            position: relative;
            height: 16rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery-item:nth-child(2) { /* md:col-span-2 */
            grid-column: span 1 / span 1;
        }
        @media (min-width: 768px) {
            .gallery-item:nth-child(2) {
                grid-column: span 2 / span 2;
            }
        }
        .gallery-item:nth-child(6) { /* md:col-span-2 */
            grid-column: span 1 / span 1;
        }
        @media (min-width: 768px) {
            .gallery-item:nth-child(6) {
                grid-column: span 2 / span 2;
            }
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(29, 78, 216, 0.7); /* fictap-blue/70 */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        .gallery-overlay i { color: white; font-size: 1.875rem; }


        /* FOOTER */
        #contact {
            background-color: #1f2937; /* gray-900 */
            color: #d1d5db; /* gray-300 */
            padding-top: 5rem;
            padding-bottom: 2rem;
            margin-top: auto; /* Push footer to the bottom */
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 3rem;
            margin-bottom: 4rem;
        }
        @media (min-width: 768px) {
            .footer-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .col-info {
            grid-column: span 1 / span 1;
        }
        @media (min-width: 768px) {
            .col-info { grid-column: span 2 / span 2; }
        }

        .col-info h3 {
            font-size: 1.875rem;
            font-weight: 900;
            color: white;
            margin-bottom: 1.5rem;
        }
        .col-info p {
            color: #9ca3af; /* gray-400 */
            margin-bottom: 1.5rem;
            padding-right: 1.5rem;
        }
        .cta-content p {
            width: 600px;
        }
        .social-links a {
            background-color: #374151; /* gray-800 */
            width: 3rem;
            height: 3rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-right: 1rem;
            text-decoration: none;
        }
        .social-links a {
   text-decoration: none;
}
        .social-links a:hover {
            background-color: var(--fictap-blue);
        }

        .footer-heading {
            color: white;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            letter-spacing: 0.05em;
            border-bottom: 2px solid var(--fictap-blue);
            display: inline-block;
            padding-bottom: 0.5rem;
        }

        .footer-links li { margin-bottom: 0.75rem; }
        .footer-links a {
            color: #d1d5db;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        .footer-links a:hover { color: var(--fictap-amber); }
        .footer-links i { margin-right: 0.5rem; font-size: 0.75rem; }
        
        .contact-details li { margin-bottom: 1rem; display: flex; align-items: center; }
        .contact-icon-wrap {
/*            width: 2rem;
            height: 2rem;*/
/*            border-radius: 0.25rem;
            background-color: #374151;
*/            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem;
            margin-top: 0.25rem;

        }

        ul.contact-details {
        padding: unset;
        }

        ul.footer-links li::marker {
             font-size: 0;
        }

        ul.footer-links {
         padding: unset;
            }       
        .contact-details i { color: #fff; }
/*        .contact-details li:hover .contact-icon-wrap { background-color: var(--fictap-blue); }*/

        .copyright-section {
            border-top: 1px solid #374151; /* gray-800 */
            padding-top: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            color: #9ca3af; /* gray-500 */
        }
        @media (min-width: 768px) {
            .copyright-section { flex-direction: row; }
        }

        .footer-utility-links {
            margin-top: 1rem;
            display: flex;
            gap: 1.5rem;
        }
        @media (min-width: 768px) {
            .footer-utility-links { margin-top: 0; }
        }
        .footer-utility-links a { color: #9ca3af; text-decoration: none; }
        .footer-utility-links a:hover { color: white; }

        /* Keyframes for Hero animation (replacing Tailwind's fade-in-up) */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .fade-in-up {
            opacity: 0;
            animation: fadeInUp 0.8s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }


/*events*/

.events {
  display: flex;
  flex-direction: column; /* Mobile default */
  gap: 40px;
}

/* Left and Right columns */
.upcoming-events-1,
.event-content {
  flex: 1;        
}


/* Responsive Video */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}

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


/* Desktop 50/50 layout */
@media (min-width: 768px) {
  .events {
    flex-direction: row; /* Side by side */
    align-items: center;
  }
}


@media (max-width: 762px) {
            .news-header {
            display: flex;
            justify-content: space-between;
         align-items: ;align-items: flex-start;

      }   

}

/*responsive*/
@media (max-width: 1024px){
.hero-banner-text {
     width: 100%;
}
     
     h1, h2, h3, h4 {
        margin-top: 5px;
     }

      .cta-content p {
            width: 100%;
        }
}

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff; /* keep background solid so content behind doesn’t show */
}
.mr-2 {
    margin-right: 10px;
    color: white !important;
}

/* Prevent layout shifting */
body {
    padding-top: 90px; /* adjust depending on your header height */
}

@media (max-width: 768px) {
    body {
        padding-top: 50px; /* mobile header is usually taller */
    }
}


/*about*/
#About .internal-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:600px;
    /* Custom gradient for blending/overlay */
     background: linear-gradient(to right, rgba(29, 78, 216, 0.3) 0%, rgba(29, 78, 216, 0.6) 20%); 
     z-index: 0 !important;

        }

#About .hero-content {
        position: relative;
        z-index: 20;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
}

#about-us-info{
            padding-top: 5rem;
            padding-bottom: 1rem;
            background-color: white;
            position: relative;
        }

#about-us-hymn {
            padding-top: 1rem;
            padding-bottom: 5rem;
            background-color: white;
            position: relative;
        }


#about-us-info .history-content,
#about-us-hymn .history-content{
            display: flex;
            flex-direction: column;
            gap: 3rem;
            align-items: center;
        }

/*timeline*/
        .timeline-container {
            position: relative;
        }
.timeline-card {
    align-content: center;
}
        .timeline-line {
            position: absolute;
            left: 48%;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e5e7eb;
            transform: translateX(-50%);
            z-index: 0;
        }

        .timeline-item {
            display: flex;
            margin-bottom: 4rem;
            position: relative;
        }
        
        /* Timeline Dot */
/*        .timeline-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 1px;
            background-color: #10b981;
            border: 4px solid #d1fae5;
            border-radius: 50%;
            z-index: 10;
            top: 0;
        }*/
        
        .end-dot .timeline-dot {
            background-color: #9ca3af;
            border-color: #f3f4f6;
        }

        /* Content Card Styling */
        .timeline-card {
            background-color: #ffffff;
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease-in-out;
        }

        .timeline-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-2px);
        }

        .timeline-card span {
            font-size: 0.875rem;
            font-weight: 600;
            color: #059669;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
        }

        .timeline-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-top: 0.25rem;
            margin-bottom: 0.75rem;
        }

        .timeline-card p {
            color: #374151;
            font-size: 1.125rem;
        }

        #timeline {
            padding-top: 5rem;
            padding-bottom: 5rem;
            background-color: #f3f4f6;
            position: relative;
        }

        .timeline-card:before {
    content:"";
    background-color: #286090;
    left: 48%;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    transform: translateX(-50%);
}

.timeline-card:hover:before {
    content:"";
    background-color: #1d4ed8;
    left: -6%;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    

}
.text-content h2 {
   font-size: 1.5rem;
}
.history-text li {
   font-size: 1.125rem;
}
 
#objectives .history-content-2{
            display: flex;
            flex-direction: row;
            gap: 3rem;
            align-items: center;
            padding-top: 2rem;
        }

        /* Desktop Layout (Min-width 769px) */
        @media (min-width: 768px) {
            .timeline-line { display: block; }
            
            .timeline-item {
                flex-direction: row;
                justify-content: center;
                gap:50px;
            }

            .timeline-item > div {
                width: 100%;
                padding-right: 3rem; /* Spacing for the line */
            }

            .timeline-item.right-side > div {
                padding-left: 3rem;
                padding-right: 0;
            }

            .timeline-item:nth-child(even) > div.content-wrapper {
                order: 1;
                text-align: right;
            }


            .timeline-item:nth-child(odd):not(.end-dot) > div.content-wrapper {
                order: 2;
                text-align: left;
            }
            

            .timeline-item:nth-child(even) > div.image-wrapper {
                order: 2;
                padding-left: 3rem;
                padding-right: 0;
                display: flex;
                align-items: center;
            }

            .timeline-item:nth-child(odd):not(.end-dot) > div.image-wrapper {
                order: 1;
                padding-right: 3rem;
                padding-left: 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
            
            .timeline-item img {
                width: 100%;
                height: auto;
                border-radius: 0.5rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                object-fit: cover;
            }
            .timeline-card:before {
               left: -6%;
            }

        .timeline-card{
              position:relative;
            }
        }


        @media (max-width: 768px) {
            .timeline-line {
                left: 1rem;
                transform: none;
                display:none;
            }

            .timeline-dot {
                left: 1rem;
                transform: translateX(-50%);
            }
            
            /* Stack all content and push it to the right of the mobile line */
            .timeline-item {
                flex-direction: column;
/*                padding-left: 1rem; /* Space for the line and dot */*/
            }

            .timeline-item > div {
                width: 100%;
                padding: 0;
            }
            
            /* Hide images on mobile for cleaner look */
            .timeline-item .image-wrapper {
                display: none !important;
            }

            /* Ensure content wrapper is visible and formatted correctly */
            .timeline-item .content-wrapper {
                text-align: left !important;
                margin-top: 0.5rem; 
            }
            .timeline-card:before {
                display: none;
            }
            .timeline-item {
                gap: 10px;
            }
            .timeline-card {
                padding: 20px !important;
            }
            .timeline-item.flex.justify-center.mb-4.relative {
                display: none;
            }
            .timeline-card {
                 width: 94% !important;
            }
            .object-cover {
            width: 100%;
        }   

        .history-content-2 {
             display: flex;
            flex-direction: column-reverse !important;
            gap: 3rem;
            align-items: center;
        }
        }

@media (max-width: 767px) {
#About .internal-hero-overlay {
    height:400px;

}
#About .hero-content {
        height: 350px;
}
  #About .hero-content h1 {
    margin: unset;
    padding-top: 20px;
  } 
#about-us-hymn .events {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;

  }


}
/*Board*/
.bg-height {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:490px !important;
    /* Custom gradient for blending/overlay */
     background: linear-gradient(to right, rgba(29, 78, 216, 0.3) 0%, rgba(29, 78, 216, 0.6) 20%); 
     z-index: 0 !important;

        }

.bg-height-2 {
        position: relative;
        z-index: 20;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        z-index: 1;
}


#regional {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #f3f4f6;
    position: relative;
}
.section-header p {
    font-size: 18px;
}

@media (max-width: 767px) {
.bg-height {
    height:400px !important;
}
.bg-height-2{
        height: 350px;
}
}

ul.contact-details a {
    color: #fff;
    text-decoration: none !important;
}

ul.contact-details a:hover {
    color: #1D4ED8;
    text-decoration: none !important;
}