@charset "UTF-8";
/**
    Author: WEBSNP
    Author email: websnp@gmail.com
    Version: 0.0.0.1
*/

/**
----------------
Table Of Content
----------------
0. Common CSS Start
1. Header CSS Start
2. Banner CSS Start
3. Events CSS Start
4. Enquiries CSS Start
5. News CSS Start
6. What We Do CSS Start
7. About CSS Start
8. Pass President CSS Start
9. Honour Received CSS Start
10. Membership CSS Start
11. Bottom Slider CSS Start
12. Ad CSS Start
13. Footer CSS Start
*/

:root {
    /* Colors primary #243b75 */

    /*--primary_color: #3734a8;*/
    --primary_color: #1a2b56; /* Professional Brand Navy */
    --hover_color: #243b75; 
    --secondary_color: rgba(26, 43, 86, 0.2);
    --dropdown_bg: #f0f4f9;
    --footer_color: #d1dde9;
    --title_color: #1a2b56;
    --title2_color: #bec7cf;
    --indian_blue: rgba(26, 43, 86, 0.9);
    --we_do_hover_color: #e2e8f0;
    --yellow_color: #f36e1c;
    --red_color: #ff0015;
    --white_color: #ffffff;
    --black_color: #000000;
    --text_color: #0c0c0c;
    --heading_dark: #1a2b56; 

    /* Round */
    --round_sm: 5px;
    --round_md: 10px;
    --round_lg: 25px;
    --round_full: 50%;

    /* Typography - Scale 1.200 Minor Third, 16 size body based! */
    --h1: 2.5rem;    /* ~40px */
    --h2: 2rem;      /* ~32px */
    --h3: 1.75rem;   /* ~28px */
    --h4: 1.5rem;    /* ~24px */
    --h5: 1.25rem;   /* ~20px */
    --h6: 1.1rem;    /* ~18.5px */
    --lg: 1.125rem;  /* 18px */
    --bs: 1rem;      /* 16px - Professional Base */
    --sm: 0.875rem;  /* 14px - For Footer & Small Text */

    /* Duration */
    --transition: all ease-in-out .3s;

    /* Font Family */
    --body: "Poppins", sans-serif;
}

a {
    color: var(--primary_color);
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
li,
span,
address,
blockquote {
    margin: 0;
    padding: 0;
}

canvas{
    display:block;
}

ul,
ol {
    list-style: none;
}

a,
abbr[title] {
    display: inline-block;
    text-decoration: none;
}

img,
svg {
    vertical-align: middle;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

.main-footer {
    font-size: var(--sm);
    color: var(--footer_color);
}

.main-footer a {
    font-size: inherit;
    color: rgba(255, 255, 255, 0.75);
    transition: var(--transition);
}

.main-footer a:hover {
    color: var(--white_color);
}

.main-footer h5, .main-footer h6 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white_color);
    margin-bottom: 1.25rem;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--body);
    font-size: var(--bs);
    color: var(--text_color);
    line-height: 1.6; /* Premium readability */
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-family: var(--body) !important;
}

/* Enforce brand font on all interactive elements */
button, input, select, textarea, .btn {
    font-family: var(--body);
}

* {
    font-family: inherit;
    box-sizing: border-box;
}

body {
    font-size: var(--bs);
    scroll-behavior: smooth;
    color: var(--text_color);
    background-color: var(--white_color);
    font-family: var(--body) !important;
    font-weight: 400;
}

a:visited {
    color: inherit;
    text-decoration: none;
}


.transform-y {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.transform-y:hover {
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    -o-transform: translateY(-4px);
}

.section-spacing {
    margin: 50px 0;
}

@media (max-width: 767.98px) {
    .section-spacing {
        margin: 25px 0 !important;
    }
}

.section-title .title-line {
    display: none; /* Replaced by h2::before accent bar */
}

.section-title h6 {
    text-transform: uppercase;
    font-size: var(--sm);
    color: var(--text_color);
    letter-spacing: 2px;
}

.section-title h2 {
    text-transform: uppercase;
    color: var(--heading_dark);
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -0.01em;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 25px;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: var(--hover_color, #f47920);
    border-radius: 4px;
}

.btn-fill,
.btn-outline {
    padding: 8px 32px;
    text-transform: uppercase;
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    font-size: var(--sm);
    font-weight: 500;
}

.btn-fill {
    color: var(--white_color) !important;
    background-color: var(--primary_color);
    border: 1px solid var(--primary_color);
}
.btn-fill:hover {
    opacity: .7;
}
.txt-primary{
    color: var(--primary_color) !important;
}

.btn-outline {
    color: var(--primary_color);
    background-color: var(--white_color);
    border: 1px solid var(--primary_color);
}

.btn-outline:hover {
    background-color: var(--primary_color);
    color: var(--white_color);
}

.section-title-2 {
    text-align: center;
}

.section-title-2 h6 {
    text-transform: uppercase;
    font-size: var(--sm);
    color: var(--white_color);
    letter-spacing: 2px;
}

.section-title-2 p {
    color: var(--white_color);
    font-size: var(--lg);
}

.section-title-2 h2 {
    /*text-transform: uppercase;*/
    font-size: var(--h1);
    color: var(--title2_color);
    letter-spacing: 2px;
    font-weight: 700;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.section-title-2 h2:before,
.section-title-2 h2::after {
    content: " ";
    flex: 1 0 0%;
    height: 4px;
    background: var(--title2_color);
    margin: 0 1.5rem 0 0;
}

.section-title-2 h2:after {
    margin: 0 0 0 1.5rem;
}
/* Common CSS End */

.main-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: var(--white_color);
    box-shadow: 0 2px 12px rgba(26, 43, 86, 0.10);
    border-bottom: 1px solid rgba(26, 43, 86, 0.06);
}

.main-header.sticky-header {
    animation: sticky-header 1 .7s ease-in-out;
    -webkit-animation: sticky-header 1 .7s ease-in-out;
}

@keyframes sticky-header {
    0% {
        top: -40px;
    }
    100% {
        top: 0;
    }
}
/* Submenu Indicator Styling - High Reliability Chevrons */
.main-header .desktop .dropdown-items ul li a i.submenu-indicator {
    font-size: 11px;
    margin-right: 12px;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sanitize against 'dot' issues and forced styling */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    line-height: 1;
    width: auto;
    height: auto;
}

.main-header .desktop .dropdown-items ul li a:hover i.submenu-indicator {
    opacity: 1;
    color: var(--primary_color);
    transform: translateX(4px);
}
.main-header .desktop {
    padding-top: 0;
}

.main-header .desktop .row {
    align-items: center;
    min-height: 80px; 
}

.main-header .desktop .social a {
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    color: var(--white_color);
    font-size: 17px;
    background-color: var(--primary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.main-header .desktop .login-btn {
    padding: 2px 20px;
    font-size: var(--sm);
    text-transform: uppercase;
    border: 1px solid var(--primary_color);
    font-weight: 600;
    color: var(--primary_color);
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-header .desktop .login-btn:hover {
    color: var(--white_color);
    background-color: var(--primary_color);
}

.main-header .desktop .nav-items > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.main-header .desktop .nav-items > li > a {
    position: relative;
    padding: 0 8px;
    height: 100%;
    color: var(--heading_light);
    display: flex;
    font-size: 14.2px;
    font-weight: 500;
    align-items: center;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Dropdown Indicator Icon Styling */
.main-header .desktop .nav-items a i.dropdown-i {
    font-size: 10px;
    margin-left: 6px;
    opacity: 0.7;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rotate Indicator on Hover */
.main-header .desktop .dropdown-main:hover > a i.dropdown-i {
    transform: rotate(180deg);
    opacity: 1;
}

.main-header .desktop .nav-items a:hover,
.main-header .desktop .nav-items a.active {
    color: var(--primary_color);
}

.main-header .desktop .nav-items a:hover::after,
.main-header .desktop .nav-items a.active::after {
    display: none;
}

.main-header .desktop .nav-items a::before {
    position: absolute;
    content: '';
    bottom: 14px;
    left: 14px;
    height: 2px;
    width: 0;
    background-color: var(--primary_color);
    transition: var(--transition);
}

.main-header .desktop .nav-items a:hover::before,
.main-header .desktop .nav-items a.active::before {
    width: calc(100% - 28px);
}

/* Remove old underline logic */
.main-header .desktop .nav-items a::before {
    display: none;
}

/* targeted spacing for search to prevent overlap while letting nav stay compact */
.main-header div:has(> .btn-search) {
    margin-left: 20px;
}

.main-header .btn-search {
    background-color: var(--primary_color);
    border: none;
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    color: var(--white_color);
    border-radius: var(--round_full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
}

.main-header .btn-search:hover {
    background-color: var(--heading_dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- 2026 Mega Menu Re-Design --- */

/* Base Dropdown Container - State-of-the-Art Glassmorphism */
.main-header .desktop .dropdown-items {
    position: absolute;
    top: 120%; 
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    padding: 14px 24px 24px 24px; /* Reduced top padding to remove whitespace */
    background-color: rgba(255, 255, 255, 0.94); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    /* High-Precision Alignment Logic */
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: max-content;
    min-width: 260px;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.02),
        0 12px 25px rgba(0, 0, 0, 0.05),
        0 30px 60px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    outline: 1px solid rgba(0, 0, 0, 0.02);
    transition: 
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-header .desktop .dropdown-items h6:first-child {
    margin-top: 5px; /* Tighten the gap above the first heading */
}

/* Specific Alignment for the first menu (NICCI) to prevent left overflow */
.main-header .desktop .nav-items > li:first-child .dropdown-items.centered-compact {
    left: 0;
    margin-left: -60px; /* Shifted more to the left as preferred */
    transform: translateX(0) translateY(12px);
}

.main-header .desktop .nav-items > li:first-child:hover .dropdown-items.centered-compact {
    transform: translateX(0) translateY(0);
}

/* Hover State - Final Vertical Position */
.main-header .desktop .dropdown-main:hover .dropdown-items {
    opacity: 1;
    visibility: visible;
    top: 105%; 
    transform: translateX(-50%) translateY(0);
}

.main-header .desktop .nav-items > li:first-child:hover .dropdown-items.centered-compact {
    top: 105%;
}

/* Full Width Mega Menu (e.g., NICCI menu) */
.main-header .desktop .dropdown-items.width-full {
    width: 100%;
    max-width: 1200px; /* Standard mega menu max scale */
}

/* Focused Centered Menu - for NICCI 3-column layout */
.main-header .desktop .dropdown-items.centered-compact {
    width: 940px; 
    max-width: 95vw;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
}

.main-header .desktop .dropdown-main:hover .dropdown-items.centered-compact {
    transform: translateX(-50%) translateY(0);
}

/* Base Hover State - Perfect Centering */
.main-header .desktop .dropdown-main:hover .dropdown-items {
    opacity: 1;
    visibility: visible;
    top: 100%; 
    transform: translateX(-50%) translateY(0);
}



/* Mega Menu Section Headers - Polished & Compact */
.main-header .desktop .dropdown-items h6 {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 14px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.8px;
    color: var(--primary_color);
    border-bottom: 2px solid rgba(26, 43, 86, 0.08);
    padding-bottom: 6px;
    opacity: 0.9;
}

/* Mega Menu Links - High Contrast & Compact */
.main-header .desktop .dropdown-items ul li a {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    margin-bottom: 2px;
    text-transform: capitalize;
    color: var(--heading_dark);
    font-size: 13.8px;
    font-weight: 600; /* Sharp typography */
    white-space: nowrap; /* Prevents text wrapping */
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header .desktop .dropdown-items ul li a i {
    font-size: 11px;
    margin-right: 12px;
    transition: transform 0.25s ease;
    opacity: 0.7;
}

/* Mega Menu Link Hover State - Micro Motion */
.main-header .desktop .dropdown-items ul li a:hover {
    color: var(--primary_color);
    background-color: rgba(26, 43, 86, 0.05); /* Slightly darker for better contrast */
    transform: translateX(6px);
}

.main-header .desktop .dropdown-items ul li a:hover i {
    transform: translateX(3px); /* Interactive icon motion */
    opacity: 1;
}

/* Remove default nav link underline logic from dropdown links */
.main-header .desktop .dropdown-items ul li a::before {
    display: none;
}

/* Mega Menu Link Icons (Font Awesome) */
.main-header .desktop .dropdown-items ul li a i {
    font-size: 12px;
    margin-right: 12px;
    color: #666;
    transition: all 0.2s ease;
}

/* Icon Hover State */
.main-header .desktop .dropdown-items ul li a:hover i {
    color: var(--primary_color);
}

.main-header .header-searchbar {
    padding: 20px 0;
    background-color: var(--secondary_color);
    display: none;
}

.main-header .header-searchbar .contianer {
    position: absolute;
}

.main-header .header-searchbar .d-flex {
    background-color: var(--secondary_color);
}

.main-header .header-searchbar input {
    padding: 2px 8px;
    border: none;
    border-top-left-radius: var(--round_sm);
    border-bottom-left-radius: var(--round_sm);
}

.main-header .header-searchbar input {
    padding: 2px 8px;
    border: none;
    height: 36px;
    border-top-left-radius: var(--round_sm);
    border-bottom-left-radius: var(--round_sm);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.main-header .header-searchbar .searchbar-btn {
    background-color: var(--primary_color);
    border: 1px solid var(--primary_color);
    text-transform: uppercase;
    font-size: var(--sm);
    font-weight: 500;
    height: 37px;
    color: var(--white_color);
    border-top-right-radius: var(--round_sm);
    border-bottom-right-radius: var(--round_sm);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.main-header .mobile {
    padding: 4px 0;
}

.main-header .solid-bar {
    background-color: transparent;
    border: none;
    font-size: 29px;
    color: var(--primary_color);
}

.main-header .offcanvas {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.main-header .offcanvas-header .offcanvas-title {
    margin: 0;
}

.main-header .offcanvas-header .offcanvas-title img {
    height: auto !important;
    max-height: 42px !important; 
    max-width: 200px !important;
    width: auto !important;
    object-fit: contain;
}

.main-header .offcanvas-header .close-btn {
    background-color: transparent;
    border: none;
}

.main-header .offcanvas-header .close-btn svg {
    height: 24px;
    width: 24px;
}

.main-header .offcanvas-header .close-btn svg path {
    fill: var(--primary_color);
}

.main-header .offcanvas-body {
    padding: 0;
    border-top: 1px solid rgb(194, 194, 194);
    border-bottom: 1px solid rgb(194, 194, 194);
}

.offcanvas-footer {
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}

.main-header .mobile .dropdown-main .d-flex {
    padding: 12px 20px; /* Reduced vertical padding */
    border-top: 1px solid rgba(22, 25, 75, 0.08);
    cursor: pointer;
    align-items: center;
    transition: background 0.2s ease;
}

.main-header .mobile .dropdown-main .mobile-menu-toggle.active {
    background: rgba(46, 49, 146, 0.04);
}

.main-header .mobile .dropdown-main:first-child .d-flex {
    border-top: none;
}

.main-header .mobile .nav-items a {
    text-transform: uppercase;
    color: var(--heading_dark); /* Use brand navy */
    font-size: 15px; 
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-header .mobile .nav-items a:hover {
    color: var(--primary_color);
}

.main-header .mobile .nav-items .arrow {
    position: absolute;
    right: 20px;
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(22, 25, 75, 0.15); /* Subtler border with brand navy tint */
    border-radius: var(--round_full);
    color: var(--primary_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-header .mobile .nav-items .arrow.active {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.main-header .mobile .dropdown-items {
    padding: 0 0 8px; /* Reduced bottom padding */
    display: none;
    background-color: #f8fafc;
    border-bottom: 1px solid rgba(22, 25, 75, 0.05);
}

.main-header .mobile .dropdown-items h6 {
    margin-bottom: 4px;
    margin-top: 8px;
    text-transform: uppercase;
    font-size: var(--bs);
}

.main-header .mobile .dropdown-items h6:first-child {
    margin-top: 0;
}

.main-header .mobile .dropdown-items ul {
    padding: 0 8px;
    margin-bottom: 0px; /* Removed bottom margin between ul blocks */
}

.main-header .mobile .dropdown-items ul a {
    text-transform: capitalize;
    font-weight: 500;
    padding: 6px 32px; /* Reduced from 10px to 6px */
    display: flex;
    align-items: center;
    color: var(--text_color);
    font-size: 14.5px; /* Slightly smaller for sub-links */
}

.main-header .mobile .dropdown-items ul a i {
    display: inline-block;
    font-size: 10px;
    padding-right: 8px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.main-header .mobile .dropdown-items ul li a:hover i {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}

.main-header .mobile .social a {
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    color: var(--white_color);
    font-size: 17px;
    background-color: var(--primary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.main-header .mobile .login-btn {
    padding: 6px 0;
    font-size: var(--bs);
    text-transform: uppercase;
    border: 1px solid var(--primary_color);
    font-weight: 600;
    color: var(--white_color);
    background-color: var(--primary_color);
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-header .mobile .login-btn:hover {
    opacity: .7;
}
/* Header CSS End */
#particles-js {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.main-banner .particles-js-canvas-el {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.main-banner .prev,
.main-banner .next {
    position: absolute;
    top: 50%;
    z-index: 11;
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    background-color: rgba(16, 113, 203, 0.1);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.main-banner .prev:hover,
.main-banner .next:hover {
    color: var(--white_color);
    background-color: rgba(16, 113, 203, 0.4);
}

.main-banner .prev {
    left: 20px;
}

.main-banner .next {
    right: 20px;
}

.main-banner .slider-content {
    position: relative; /* Added for overlay positioning */
    height: 600px;
    overflow: hidden; /* prevent overflow */
}

.slider-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Changed to subtle black overlay */
    z-index: 1; /* Place the overlay below the text */
}

.slider-content > * {
    position: relative;
    z-index: 2; /* Ensure all slider content is above overlay */
}

.slider-content a h2,
.slider-content h4,
.slider-content h3,
.slider-content p,
.slider-content p.date {
    color: #fff; /* Changed to white text for contrast */
    /* Optional: add text shadow for better readability */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.slider-content a h2 {
    font-size: var(--h1);
    font-weight: 600;
    line-height: 1.3;
}

.slider-content h4 {
    font-weight: 600;
}

.slider-content h3 {
    font-weight: 600;
}

.slider-content p {
    font-weight: 500;
    font-size: var(--h5);
}

.slider-content p.date {
    font-size: var(--h4);
}
.slider-content > div.position-absolute {
    pointer-events: none;
}


/* Banner CSS End */

.events .tab-btn {
    padding: 8px 32px;
    text-transform: uppercase;
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    font-size: var(--sm);
    font-weight: 500;
    color: var(--primary_color);
    background-color: var(--white_color);
    border: 1px solid var(--primary_color);
}

.events .tab-btn:hover {
    background-color: var(--secondary_color);
}

.events .tab-btn.active {
    color: var(--white_color);
    background-color: var(--primary_color);
    border: 1px solid var(--primary_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.events .tab-btn.active:hover {
    opacity: .7 !important;
}

.events .training-tab-content.d-block {
    display: block;
}

/* ── Section-header slider nav buttons (News, Major Initiatives etc.) ─── */
.slider-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--primary_color, #243b75);
    background: #fff;
    color: var(--primary_color, #243b75);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.slider-nav-btn:hover {
    background: var(--primary_color, #243b75);
    color: #fff;
}

.event-card .prev,
.event-card .next,
.training-card .prev,
.training-card .next,
.programs-slider-row .prev,
.programs-slider-row .next {
    height: 44px;
    width: 44px;
    min-width: 44px;
    font-size: 18px;
    background-color: #ffffff !important;
    color: var(--primary_color);
    border: 2px solid var(--primary_color);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-card .prev:hover,
.event-card .next:hover,
.training-card .prev:hover,
.training-card .next:hover,
.programs-slider-row .prev:hover,
.programs-slider-row .next:hover {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color);
    color: #ffffff;
}

.programs-slider-row { padding: 8px 0; }

.event-card .slick-dots,
.training-card .slick-dots {
    position: absolute;
    left: 8px;
    bottom: -140px;
}

.event-card .slick-dots li,
.training-card .slick-dots li {
    display: inline-block;
    margin-right: 4px;
}

.event-card .slick-dots li button,
.training-card .slick-dots li button {
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
    background-color: var(--secondary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.event-card .slick-dots li.slick-active button,
.training-card .slick-dots li.slick-active button {
    background-color: var(--primary_color);
}

.event-card-slider .card-item,
.training-card-slider .card-item {
    margin: 8px 12px;
    background: #ffffff;
    border-radius: var(--round_md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.event-card-slider .card-item:hover,
.training-card-slider .card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

.event-card-slider .img,
.training-card-slider .img {
    overflow: hidden;
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
}

.event-card-slider .img img,
.training-card-slider .img img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--round_sm);
    display: block;
    transition: var(--transition);
}

.event-card-slider .img:hover img,
.training-card-slider .img:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.event-card-slider .item-title,
.training-card-slider .item-title {
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: calc(4 * 1.5 * 0.95rem); /* Reserve space for 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
}

.event-card-slider .item-title a,
.training-card-slider .item-title a {
    color: #333;
    transition: var(--transition);
    font-weight: 600;
}

.event-card-slider .item-title a:hover,
.training-card-slider .item-title a:hover {
    text-decoration: none;
    opacity: .8;
}

.event-card-slider .date,
.training-card-slider .date {
    font-size: var(--sm);
}

.events hr {
    color: var(--text_color);
}
/* Events CSS End */

.enquiries-banner {
    height: auto;
}
/* Enquiries CSS End */

.news .prev,
.news .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    height: 40px;
    width: 40px;
    line-height: 36px;
    font-size: 18px;
    text-align: center;
    background-color: #ffffff !important;
    color: var(--primary_color);
    border: 2px solid var(--primary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
    cursor: pointer;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news .prev:hover,
.news .next:hover {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color);
    color: #ffffff;
}

.news .prev {
    left: -15px;
    z-index: 10;
}

.news .next {
    right: -15px;
    z-index: 10;
}

.news .slick-dots {
    position: absolute;
    right: 8px;
    bottom: -48px;
}

.news .slick-dots li {
    display: inline-block;
    margin-right: 4px;
}

.news .slick-dots li button {
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
    background-color: var(--secondary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.news .slick-dots li.slick-active button {
    background-color: var(--primary_color);
}

.news-slider .news-item {
    height: 400px;
    z-index: 1;
    margin: 10px 15px;
    border-radius: var(--round_md);
    -webkit-border-radius: var(--round_md);
    -moz-border-radius: var(--round_md);
    -ms-border-radius: var(--round_md);
    -o-border-radius: var(--round_md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.news-slider .news-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.news-slider .news-item::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,0.4),rgba(0,0,0,0.8),rgba(0,0,0,0.8));
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
}

.news-slider .news-item .news-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
}

.news-slider .news-item .news-content .heading {
    color: var(--red_color);
    text-transform: capitalize;
    font-size: var(--sm);
    font-weight: 500;
}

.news-slider .news-item .news-content .title {
    color: var(--white_color);
    font-size: var(--h6);
}

.news-slider .news-item .news-content .line {
    height: 4px;
    width: 50px;
    background-color: var(--primary_color);
}
/* News CSS End */

.what-we-do {
    padding: 48px 0;
    background: url(../images/what-we-do_bg.png) no-repeat center / cover;
}

.we-do-item {
    height: 100%;
    padding: 28px 22px;
    background-color: var(--white_color);
    border-radius: var(--round_md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.we-do-item a {
    color: var(--text_color);
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
}

.we-do-item a:hover {
    text-decoration: none;
}

.we-do-item:hover {
    background-color: var(--we_do_hover_color);
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.we-do-item h5 {
    text-transform: uppercase;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.we-do-item p.description {
    font-size: var(--sm);
    line-height: 1.65;
    flex: 1;
}
/* What We Do CSS End */

.about .world-gif {
    background: url(../images/world-gif.gif);
    opacity: 10%;
    height: 1500px;
    width: 700px;
    background-size: 700px;
    position: absolute;
    top: 0;
    left: 0;
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    pointer-events: none; /* Allows clicks on elements behind it */
}

.about h1 {
    font-weight: 600;
    font-size: var(--h4);
}

.about p {
    font-size: var(--lg);
}

.about .items img {
    width: 52px;
}

.about h6 {
    font-weight: 700;
}

.about .items p.description {
    font-size: var(--sm);
}

.about .logo img {
    width: 80%;
}
/* About CSS End */

/* Past President Arrow Buttons */
.past-presidents .prev,
.past-presidents .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
    font-size: 18px;
    background-color: #ffffff !important;
    color: var(--primary_color);
    border: 2px solid var(--primary_color);
    border-radius: var(--round_full);
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.past-presidents .prev:hover,
.past-presidents .next:hover {
    background-color: var(--primary_color) !important;
    color: #ffffff;
}

.past-presidents .prev {
    left: -15px;
}

.past-presidents .next {
    right: -15px;
}

.past-presidents .slick-dots {
    position: absolute;
    right: 8px;
    bottom: -40px;
}

.past-presidents .slick-dots li {
    display: inline-block;
    margin-right: 4px;
}

.past-presidents .slick-dots li button {
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
    background-color: var(--secondary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.past-presidents .slick-dots li.slick-active button {
    background-color: var(--primary_color);
}

.past-presidents-slider .item {
    margin: 4px 8px;
}

.past-presidents-slider .item .img img {
    height: 240px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
}
/* Past President CSS End */

/* Honours/Awards Arrow Buttons */
.honours .prev,
.honours .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
    font-size: 18px;
    background-color: #ffffff !important;
    color: var(--primary_color);
    border: 2px solid var(--primary_color);
    border-radius: var(--round_full);
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.honours .prev:hover,
.honours .next:hover {
    background-color: var(--primary_color) !important;
    color: #ffffff;
}

.honours .prev {
    left: -15px;
}

.honours .next {
    right: -15px;
}

.honours .slick-dots {
    position: absolute;
    right: 8px;
    bottom: -40px;
}

.honours .slick-dots li {
    display: inline-block;
    margin-right: 4px;
}

.honours .slick-dots li button {
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
    background-color: var(--secondary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.honours .slick-dots li.slick-active button {
    background-color: var(--primary_color);
}

.honours-slider .item {
    margin: 4px 8px;
}

.honours-slider .item .img img {
    height: 300px;
    padding: 4px;
    border: 1px solid rgba(16, 113, 203, 0.2);
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.honours-slider .item .img img:hover {
    border: 1px solid rgba(16, 113, 203, 0.5);
}
/* Honours Received CSS End */

.membership {
    padding: 72px 0 80px;
    background: linear-gradient(135deg, #262e79 20%, #c11f26 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid texture overlay */
.membership::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Badge above heading */
.membership-badge {
    display: inline-block;
    background: rgba(243,110,28,0.15);
    border: 1px solid rgba(243,110,28,0.45);
    color: #f36e1c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.membership-heading {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.membership-heading span {
    font-weight: 300;
    color: rgba(255,255,255,0.65);
    font-size: 0.65em;
    display: block;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
}

.membership-subtext {
    color: rgba(255,255,255,0.6);
    font-size: 0.92rem;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 0;
}

.membership-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: #f36e1c;
    color: #ffffff;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(243,110,28,0.35);
}

.membership-cta-btn:hover {
    background: #d95e14;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(243,110,28,0.45);
    text-decoration: none;
}

.membership-item-modern {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 28px 22px;
    height: 100%;
    text-align: left;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.membership-item-modern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f36e1c, transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.membership-item-modern:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(243,110,28,0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.membership-item-modern:hover::before {
    opacity: 1;
}

.membership-item-modern .icon-wrap {
    width: 48px;
    height: 48px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243,110,28,0.12);
    border: 1px solid rgba(243,110,28,0.3);
    border-radius: 10px;
    color: #f36e1c;
    font-size: 20px;
    transition: all 0.3s ease;
}

.membership-item-modern:hover .icon-wrap {
    background: #f36e1c;
    border-color: #f36e1c;
    color: #ffffff;
    transform: scale(1.05);
}

.membership-item-modern .title {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
}

.membership-item-modern p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    line-height: 1.65;
    margin-bottom: 0;
}
/* Membership CSS End */

.bottom-slider .world-gif {
    background: url("../images/world-gif.gif");
    opacity: 10%;
    height: 300px;
    width: 700px;
    background-size: 700px;
    position: absolute;
    top: 0;
    left: 0;
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Bottom Slider Arrow Buttons */
.btm-slider .prev,
.btm-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
    font-size: 18px;
    background-color: #ffffff !important;
    color: var(--primary_color);
    border: 2px solid var(--primary_color);
    border-radius: var(--round_full);
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btm-slider .prev:hover,
.btm-slider .next:hover {
    background-color: var(--primary_color) !important;
    color: #ffffff;
}

.btm-slider .prev {
    left: -15px;
}

.btm-slider .next {
    right: -15px;
}

.btm-slider .slick-dots {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.btm-slider .slick-dots li {
    display: inline-block;
    margin-right: 4px;
}

.btm-slider .slick-dots li button {
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
    background-color: var(--secondary_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
}

.btm-slider .slick-dots li.slick-active button {
    background-color: var(--primary_color);
}

.bottom-card-slider .item {
    height: 200px;
    width: 100%;
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
}

.bottom-card-slider .item {
    z-index: 1;
    margin: 4px 8px;
}

.bottom-card-slider .item::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
    z-index: -1;
}

.bottom-card-slider .item .content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 16px 8px 16px;
    color: var(--white_color);
}
/* Bottom Slider CSS End */

.ad-banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    height: 100%;
    width: 100%;
    display: none;
}

.ad-banner::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.ad-banner-content {
    width: 700px;
    top: 50%;
    left: 50%;
    z-index: 102;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.ad-banner-content .close-btn {
    position: absolute;
    top: -16px;
    right: -16px;
}

.ad-banner-content .close-btn button {
    height: 32px;
    width: 32px;
    line-height: 30px;
    text-align: center;
    background-color: var(--white_color);
    border: none;
    border: 1px solid var(--black_color);
    border-radius: var(--round_full);
    -webkit-border-radius: var(--round_full);
    -moz-border-radius: var(--round_full);
    -ms-border-radius: var(--round_full);
    -o-border-radius: var(--round_full);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.ad-banner-content .close-btn button:hover {
    background-color: gainsboro;
}

.ad-banner-content .close-btn svg {
    height: 20px;
    width: 20px;
}

.ad-banner-content .close-btn svg path {
    fill: var(--text_color);
}
/* Ad CSS End */

.main-footer {
    padding: 56px 0 40px;
    /* Deep professional navy footer */
    background-color: #0a0a3c;
    color: rgba(255,255,255,0.82);
}

.main-footer .left {
    width: 55%;
}

.main-footer .right {
    width: 45%;
}

/* ── Footer quick links ── */
.main-footer .nav-items a {
    color: rgba(255,255,255,0.75);
    padding-bottom: 20px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: var(--sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-footer .nav-items a:hover {
    color: #fff;
    padding-left: 4px;
}

.main-footer .nav-items a i {
    display: inline-block;
    font-size: 9px;
    padding-right: 8px;
    color: rgba(255,255,255,0.4);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.main-footer .nav-items a:hover i {
    transform: translateX(4px);
    color: rgba(255,255,255,0.7);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}
/* ── Footer right column headings ── */
.main-footer .right h6 {
    font-size: var(--bs);
    margin-bottom: 6px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.main-footer .right address,
.main-footer .right p {
    font-size: var(--sm);
    color: rgba(255,255,255,0.72);
}

.main-footer .right a {
    color: #93c5fd;
    font-size: var(--sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.main-footer .right a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Useful links heading */
.main-footer h5, .main-footer h4 {
    color: #fff;
    font-weight: 700;
}

/* Every text-muted inside footer */
.main-footer .text-muted { color: rgba(255,255,255,0.55) !important; }

.main-footer .map {
    background-color: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--round_md);
    -webkit-border-radius: var(--round_md);
    -moz-border-radius: var(--round_md);
    -ms-border-radius: var(--round_md);
    -o-border-radius: var(--round_md);
}

.main-footer .map .iframe {
    width: 57%;
}

.main-footer .map .iframe iframe {
    width: 100%;
    height: 100%;
    border-top-left-radius: var(--round_md);
    border-bottom-left-radius: var(--round_md);
}

.main-footer .map .details {
    width: 43%;
    padding: 12px 20px;
    color: rgba(255,255,255,0.85);
    font-size: var(--sm);
}

.main-footer .map .details h6 {
    font-weight: 600;
    font-size: var(--sm);
    color: #fff;
}

.main-footer .map .details p.days {
    font-weight: 500;
}

/* Social icons on footer */
.main-footer .social a {
    height: 44px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white_color);
    font-size: 17px;
    background-color: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    transition: var(--transition);
    text-decoration: none;
}
.main-footer .social a:hover {
    background-color: var(--primary_color);
    border-color: transparent;
    transform: translateY(-2px);
}
/* Copyright bar */
.main-footer .copyright-bar,
.main-footer hr {
    border-color: rgba(255,255,255,0.12);
}
.main-footer .copyright-bar p,
.main-footer .copyright-bar a {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}
.main-footer .copyright-bar a:hover { color: #fff; }
/* Footer CSS End */


.bg-offwhite {
    background-color: #f3f3f3;
}

.section-padding {
    padding: 64px 0;
}

.box-shadow {
    box-shadow: 0 0 8px 0 rgba(177,177,177,0.3);
}

.section-padding .section-title .title-line {
    top: 88px;
}

.our-heritage.hero-bg {
    height: 100vh;
    position: relative;
    z-index: 1;
}

.our-heritage.hero-bg::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.35);
}

.our-heritage span.italic-badge {
    font-style: italic;
    font-weight: 500;
    font-size: var(--sm);
    padding: 4px 8px;
    background: #043a5b;
    color: var(--white_color);
    border-radius: var(--round_sm);
    -webkit-border-radius: var(--round_sm);
    -moz-border-radius: var(--round_sm);
    -ms-border-radius: var(--round_sm);
    -o-border-radius: var(--round_sm);
}

.our-heritage h1 {
    margin-top: 8px;
    margin-bottom: 16px;
    color: var(--white_color);
}

.our-heritage .border-left {
    border-left: 1px solid #e2a330;
}

.our-heritage p {
    font-size: var(--lg);
    color: var(--white_color);
}

.our-heritage a {
    padding: 8px 20px;
    color: var(--white_color);
    background-color: #e2a330;
}

.our-timelines .timeline-card,
.our-timelines .timeline-content {
    height: 400px;
}

.our-timelines .timeline-card img {
    object-fit: cover;
    object-position: center;
}

.our-timelines .timeline-img {
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.our-timelines .timeline-content {
    background-color: var(--white_color);
    position: relative;
}

.our-timelines a:hover .timeline-content  {
    background-color: #dfe6ed;
}

.our-timelines .timeline-content::after {
    position: absolute;
    top: 24px;
    left: -12px;
    height: 24px;
    width: 24px;
    background-color: var(--white_color);
    content: '';
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.our-timelines .timeline-content h5,
.our-timelines .second-card h5 {
    margin-bottom: 16px;
}

.our-timelines a:hover .timeline-content::after {
    background-color: #dfe6ed;
}

.our-timelines .content-group .ms-3 {
    border-left: 1px solid #e2a330;
}

.our-timelines .icon {
    bottom: 32px;
    right: 32px;
    color: #e2a330;
    font-size: 18px;
}

.our-timelines .second-card {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.timeline-second::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
}

.our-leaders .leaders-card .big-img {
    /*height: 700px;*/
    object-fit: fill !important;
    object-position: center;
}

.our-leaders .leaders-card .sm-img {
    height: 338px;
    object-fit: cover;
    object-position: center;
}

.our-leaders .leaders-card .leader-heading {
    position: absolute;
    top: 20px;
    left: 0;
    padding: 0 24px;
    text-transform: uppercase;
    color: var(--white_color);
    font-size: var(--sm);
    font-weight: 300;
}

.our-leaders .leaders-card .leader-subheading {
    margin-top: 12px;
    font-style: italic;
    font-weight: 300;
    font-size: var(--sm);
}

.our-leaders .leaders-card .leader-content {
    position: absolute;
    bottom: 14%;
    left: 0;
    padding: 0 24px;
    color: var(--white_color);
}

.our-leaders .leaders-card .leader-content p {
    width: 45%;
    margin-top: 16px;
    font-weight: 300;
}

.our-leaders .leader-content .left-border {
    border-left: 1px solid #e2a330;
}

.our-leaders .leaders-card .fa-arrow-right {
    position: absolute;
    bottom: 4%;
    right: 24px;
    font-size: 18px;
    color: #e2a330;
}

.pionnering .pio-card.left {
    height: 700px;
}

.pionnering .pio-card.left .left-img {
    height: 362px;
    object-fit: cover;
    object-position: center;
}

.pionnering .pionner-content.left {
    padding: 32px 48px;
    height: 338px;
    background-color: var(--white_color);
    position: relative;
}

.pionnering .pionner-content.left::after {
    position: absolute;
    content: '';
    top: -12px;
    left: 16px;
    height: 24px;
    width: 24px;
    background-color: var(--white_color);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.pionnering .sec-card .sm-img {
    height: 338px;
    object-fit: cover;
    object-position: center;
}

.pionnering .pionner-content.left h6 {
    color: #243b75;
    font-weight: 400;
    font-size: var(--sm);
}

.pionnering .pionner-content.left h5 {
    padding-top: 64px;
    padding-bottom: 12px;
}

.pionnering .pionner-content .left-border {
    border-left: 1px solid #e2a330;
}

.pionnering .sec-card .sec-heading {
    position: absolute;
    top: 20px;
    left: 0;
    padding: 0 24px;
    text-transform: uppercase;
    color: var(--white_color);
    font-size: var(--sm);
    font-weight: 300;
}

.pionnering .sec-card .sec-subheading {
    margin-top: 12px;
    font-style: italic;
    font-weight: 300;
    font-size: var(--sm);
}

.pionnering .sec-card .sec-content {
    position: absolute;
    bottom: 14%;
    left: 0;
    padding: 0 24px;
    color: var(--white_color);
}

.pionnering .pio-card .fa-arrow-right,
.pionnering .sec-card .fa-arrow-right {
    position: absolute;
    bottom: 4%;
    right: 24px;
    font-size: 18px;
    color: #e2a330;
}

.heritage-stories .heritage-card,
.heritage-stories .heritage-content {
    height: 400px;
}

.heritage-stories .heritage-card img {
    object-fit: cover;
    object-position: center;
}

.heritage-stories .heritage-img {
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.heritage-stories .heritage-content {
    background-color: var(--white_color);
    position: relative;
}

.heritage-stories .sm-heading {
    position: absolute;
    font-size: var(--sm);
    font-weight: 400;
    color: #243b75;
    text-transform: uppercase;
    top: 20px;
    left: 24px;
}

.heritage-stories a:hover .heritage-content {
    background-color: #dfe6ed;
}

.heritage-stories .heritage-content::after {
    position: absolute;
    top: 24px;
    left: -12px;
    height: 24px;
    width: 24px;
    background-color: var(--white_color);
    content: '';
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.heritage-stories .heritage-content h5,
.heritage-stories .second-card h5 {
    margin-bottom: 16px;
}

.heritage-stories a:hover .heritage-content::after {
    background-color: #dfe6ed;
}

.heritage-stories .content-group .ms-3 {
    border-left: 1px solid #e2a330;
}

.heritage-stories .icon {
    bottom: 32px;
    right: 32px;
    color: #e2a330;
    font-size: 18px;
}

.heritage-stories .second-card {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
/* Our heritage CSS End */

.timeline-slider .slider .slide {
    height: 100vh;
    z-index: 1;
}

.timeline-slider .slider .slide-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    opacity: 1 !important;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
}

.timeline-slider .slider .slide-img img[data-animation] {
    opacity: 0;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    transition: opacity 0.6s ease-in-out 0.5s;
    -webkit-transition: opacity 0.6s ease-in-out 0.5s;
    -moz-transition: opacity 0.6s ease-in-out 0.5s;
    -ms-transition: opacity 0.6s ease-in-out 0.5s;
    -o-transition: opacity 0.6s ease-in-out 0.5s;
}

.timeline-slider .slide-nav {
    position: relative;
}

.timeline-slider .year-nav {
    display: flex;
    flex-direction: column;
    top: 0;
    left: 6%;
    z-index: 5;
    transform: translateY(30%);
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
}

.timeline-slider .year-nav button {
    background: none;
    border: none;
    color: #c5c5c5;
    font-size: 20px;
    cursor: pointer;
    font-weight: 500;
    padding: 16px 0;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    position: relative;
}

.timeline-slider .year-nav button::after {
    position: absolute;
    content: '';
    height: 20px;
    width: 1px;
    background-color: #919191;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.timeline-slider .year-nav button i {
    font-size: 24px;
    color: #919191;
}

.timeline-slider .year-nav li:first-child button::after {
    display: none;
}

.timeline-slider .year-nav button.active {
    color: #e2a330;
}

.timeline-slider .timeline-slider-content {
    padding: 20px 24px;
    color: var(--white_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.timeline-slider .timeline-slider-content:hover {
    background-color: rgba(72, 73, 73, 0.85);
}

.timeline-slider .timeline-slider-content h3 {
    font-size: var(--bs);
    font-weight: 400;
}

.timeline-slider .timeline-slider-content h2 {
    font-size: var(--h3);
    margin: 12px 0;
    font-weight: 700;
}

.timeline-slider .timeline-slider-content h4 {
    font-size: var(--lg);
    margin-bottom: 16px;
    font-weight: 400;
}
/* 1993 - 1997 CSS CSS End */

/* =========================================================================
   EXTRACTED FROM layout.blade.php
   ========================================================================= */
.carousel-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 30%;
    pointer-events: none;
}

.separator {
    margin: 0 8px;
    color: #0c0c0c;
    font-weight: bold;
}

/* Hashtag widget styles moved to layout.blade.php */


/* =========================================================================
   EXTRACTED FROM index.blade.php
   ========================================================================= */

    /* --- Publication Slider Styling --- */
    .book-card {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    margin: 10px 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.28s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.28s ease;
    will-change: transform;
}

    .book-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    /* Fixed-height image container — always same size regardless of image dimensions */
    .book-image {
        width: 100%;
        height: 190px;
        background-color: #f5f7fa;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .book-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    /* Title: fixed 3-line height so all cards are identical regardless of text length */
    .book-title {
    padding: 12px 14px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    color: #2c2c2c;
    text-align: left;
    /* 3 lines × (0.88rem × 1.45) + top+bottom padding = uniform height */
    height: calc(3 * 0.88rem * 1.45 + 26px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

/* Link inside the title */
.book-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    word-break: break-word;
}

.book-title a:hover {
    color: var(--primary_color, #243b75);
}

    .resource-icon {
        font-size: 1.05em;
        color: #dc3545;
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* --- Slick Slider Navigation Arrows Styling --- */
    .slick-prev,
    .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        /* Ensure these buttons are clickable */
        pointer-events: auto;
    }

    .slick-prev:hover,
    .slick-next:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .slick-prev {
        left: -20px; /* Adjust as needed for positioning relative to container */
    }

    .slick-next {
        right: -20px; /* Adjust as needed */
    }

    /* Slick Dots Styling */
    .slick-dots {
        text-align: center;
        margin-top: 30px;
        list-style: none;
        padding: 0;
    }

    .slick-dots li {
        display: inline-block;
        margin: 0 5px;
    }

    .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 12px;
        height: 12px;
        padding: 5px;
        cursor: pointer;
        border: 1px solid #007bff;
        background-color: transparent;
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }

    .slick-dots li.slick-active button {
        background-color: #007bff;
    }

    /* Ensure Slick elements are visible and styled */
    .slick-list {
        padding-bottom: 10px; /* Reduced — dots sit outside this now */
    }

    /* Book card: Slick equalizes all slides to the tallest card — with fixed title height,
       tallest card = 190px image + 3-line title, so ALL cards are always the same height */
    .bottom-card-slider .book-card {
        height: auto;
    }

    /* ── Lightbox fix: position:absolute in lightbox.min.css breaks scrolled pages ── */
    .lightboxOverlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99998 !important;
    }
    .lightbox {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 99999 !important;
        width: auto !important;
        height: auto !important; /* Ensure height is not forced */
        max-width: 90vw !important;
        max-height: 90vh !important;
        line-height: 0 !important;
        background: transparent !important; /* Prevent any background bleeding */
    }
    .lb-outerContainer {
        max-width: 90vw;
        max-height: 80vh; /* Slightly reduced to leave room for data container */
    }
    .lb-container {
        padding: 4px !important;
    }
    .lb-dataContainer {
        width: 100% !important;
        padding-top: 10px !important;
        background: #fff; /* Ensure label area is clean */
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .lb-image {
        max-width: 85vw !important;
        max-height: 75vh !important;
        height: auto !important;
        width: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* --- Popup Styling --- */
    
    /* --- New Popup Styling --- */
.new-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.new-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.new-popup-content {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Reduced max-width for better portrait image display on landscape screens */
    max-width: 50vw;
    max-height: 90vh; /* Constrains popup height to 90% of viewport */
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Adds a vertical scroller if content exceeds popup height */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.new-popup-overlay.is-visible .new-popup-content {
    transform: translateY(0);
}

.new-popup-close {
    position: sticky; /* Make the close button stick to the top */
    top: 0;
    align-self: flex-end; /* Align the button to the right */
    margin: 10px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease, transform 0.2s ease;
    z-index: 10;
}

.new-popup-close:hover {
    color: #333;
    transform: rotate(90deg);
}

.new-popup-image-wrapper {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: flex-start; /* Align image to the top */
    background-color: #f0f0f0;
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.new-popup-img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the whole image is visible within its container */
    display: block;
}

.new-popup-body {
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Allows this section to grow if content is added */
}

.new-popup-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 20px;
    overflow-y: auto;
}

.new-popup-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.new-popup-button:hover {
    background-color: #243b75;
    transform: translateY(-2px);
}

    
    /*popu styling end */
    /* --- Subscription Form Styling --- */
    .subscription-form {
        padding: 20px;
        max-width: 500px;
        margin: 0 auto;
    }

    .subscription-form h3 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center;
    }

    .subscription-form .input-group {
        display: flex;
        flex-wrap: wrap;
    }

    .subscription-form .form-control {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        margin-right: -1px;
        min-width: 150px;
    }

    .subscription-form .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .subscription-form .btn {
        padding: 10px 15px;
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .subscription-form .btn:hover {
        background-color: #243b75;
        border-color: #004085;
    }

    .subscription-form .form-control:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .subscription-form .btn:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #form-message {
        margin-top: 15px;
        text-align: center;
        font-weight: bold;
    }

    /* --- Responsive Adjustments --- */
    @media (max-width: 768px) {
        .book-card {
            width: 90%; /* Adjusted for slightly better responsiveness on small screens */
            margin: 10px auto;
        }
        .slick-prev { left: 5px; }
        .slick-next { right: 5px; }
        .subscription-form .input-group {
            flex-direction: column;
        }
        .subscription-form .form-control,
        .subscription-form .btn {
            width: 100%;
            margin-right: 0;
            border-radius: 0.25rem !important;
        }
        .subscription-form .form-control {
            margin-bottom: 10px;
        }
    }


    /* NICCI Theme Section Styling — clean & professional */
    .nicci-theme-section {
        background-color: #f8fafc;
        /* border-top and border-bottom removed per user request */
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    /* Hide decorative elements that look like HR lines */
    .decorative-circle,
    .decorative-dots,
    .decorative-line,
    .motto-underline {
        display: none !important;
    }

    /* NICCI THEME label */
    .theme-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 8px;
    }

    .decorative-line {
        display: block;
        height: 1px;
        width: 60px;
        background: var(--primary_color);
        opacity: 0.35;
        flex-shrink: 0;
    }

    .theme-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--primary_color);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 4px;
    }

    /* Year range */
    .year-range {
        font-size: 1.1rem;
        font-weight: 400;
        color: #888;
        letter-spacing: 6px;
        margin-bottom: 15px;
        margin-top: -5px; /* Pull closer to title */
    }

    .year-divider {
        margin: 0 8px;
        opacity: 0.5;
    }

    /* Main motto */
    .motto-wrapper {
        position: relative;
        display: inline-block;
        margin-top: 0;
    }

    .motto-text {
        font-size: clamp(1.15rem, 2.2vw, 1.65rem);
        font-weight: 600;
        color: var(--title_color);
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1.4;
        margin-bottom: 0;
        position: relative;
    }

    /* Brand orange accent bar below motto — animated */
    .motto-text::after {
        content: '';
        display: block;
        margin: 12px auto 0;
        height: 2px;
        width: 80px;
        background: var(--yellow_color);
        border-radius: 2px;
        animation: mottoLineGrow 4s ease-in-out infinite;
    }

    @keyframes mottoLineGrow {
        0%, 100% { width: 60px; opacity: 0.5; }
        50% { width: 120px; opacity: 1; }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .theme-title { font-size: 0.65rem; }
        .year-range { font-size: 0.9rem; letter-spacing: 4px; }
        .motto-text { font-size: 1.1rem; }
        .decorative-line { width: 30px; }
    }


/* ═══════════════════════════════════════════════════════════
   SMART HERO BANNER  ·  v3 — Full-bleed, zero gap, responsive
   ═══════════════════════════════════════════════════════════ */

/* ── Container resets ── */
.smart-hero { position: relative; overflow: hidden; background: #07111d; }
/* Particles container & canvas: Top layer but 100% clickable-through. 
   Interaction is manually proxied from the parent section in script.js. */
.smart-hero #particles-js { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.smart-hero #particles-js canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
.smart-hero .banner-slider,
.smart-hero .slick-list,
.smart-hero .slick-track { overflow: visible !important; position: relative; z-index: 1; }

/* ── Slide base ── */
.hero-slide {
    position: relative;
    width: 100%;
    min-height: 620px;
    display: flex !important;
    align-items: flex-end;
    overflow: hidden;
}

/* ── Full-bleed background image — fills the entire slide ──
   object-position: center 20% shows the top 20% of the image
   so faces / key subjects are visible; only footer/floor may crop */
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 0;
    transition: transform 10s ease;
}
.banner-slider .slick-active .hero-bg-img {
    transform: scale(1.06);
}

/* Portrait images: anchor to the very top so faces never crop */
.hero-slide.img-portrait .hero-bg-img  { object-position: center top; }
/* Landscape: 15% from top keeps subjects visible */
.hero-slide.img-landscape .hero-bg-img { object-position: center 15%; }
/* Square: center is fine */
.hero-slide.img-square .hero-bg-img    { object-position: center center; }

/* ── Dual gradient overlay ──
   Left: strong dark gradient for text readability
   Bottom: dark vignette for date/button area */
.hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Primary directional gradient for text readability and depth */
        linear-gradient(105deg,
            rgba(22, 25, 75, 0.92)  0%,   /* Deep Midnight Navy (from Logo text) */
            rgba(22, 25, 75, 0.70) 35%, 
            rgba(46, 49, 146, 0.15) 65%,  /* Hint of the richer brand blue */
            rgba(7, 9, 39, 0)  100%),
        /* Bottom vignette for ground anchoring and contrast */
        linear-gradient(to top,
            rgba(7, 9, 39, 0.85) 0%, 
            rgba(7, 9, 39, 0)  55%);
}

/* ── Text panel — z-index 2 (above canvas). 
      pointer-events: none allows mouse to reach canvas behind.
      Inside, we set auto on things we want to click. ── */
.hero-text-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px 56px;
}

/* ── Inner text block — limited width so it stays inside the dark gradient ── */
.hero-text-inner {
    pointer-events: auto; /* Enable clicks for all content inside the text area */
    width: 100%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ── Eyebrow badge ── */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}
.hero-eyebrow-dot {
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: heroPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes heroPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.7); }
}

/* ── Title ── */
.hero-title {
    font-size: clamp(1.2rem, 2.4vw, 2.0rem);
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 15px rgba(0,0,0,.35);
    letter-spacing: .015em;
}

/* ── Date meta ── */
.hero-meta {
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .3px;
}

/* ── CTA row ── */
.hero-cta-row { display: flex; align-items: center; gap: 16px; }

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    background: var(--primary_color, #1a2b56);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    color: #ffffff !important; /* Force white text */
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: all .26s ease;
    box-shadow: 0 4px 20px rgba(26, 43, 86, 0.25);
}
.hero-cta:hover {
    background: #0d152a; /* Lighter/Darker navy hover */
    border-color: rgba(255,255,255,0.4);
    color: #ffffff !important;
    gap: 14px;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26, 43, 86, 0.35);
}
.hero-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 50px;
    color: rgba(255,255,255,.85);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: all .26s ease;
}
.hero-cta-ghost:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

/* ── Progress bar (animated, replaces slick dots) ── */
.hero-progress-bar {
    position: absolute;
    bottom: 0; left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #c9a84c, #e8c96d);
    z-index: 10;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(201,168,76,.5);
}

/* ── Slide counter ── */
.hero-counter {
    position: absolute;
    bottom: 28px;
    right: 40px;
    z-index: 10;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    letter-spacing: 2px;
    pointer-events: none;
}
.hero-counter span { color: #fff; font-size: .85rem; }

/* ── Slick nav arrows — styled like section sliders ── */
.smart-hero .prev,
.smart-hero .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    width: 44px;
    font-size: 18px;
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
}

.smart-hero .prev:hover,
.smart-hero .next:hover {
    background-color: rgba(255,255,255,0.35) !important;
    border-color: #ffffff;
    color: #ffffff;
}

.smart-hero .prev {
    left: 20px;
}

.smart-hero .next {
    right: 20px;
}

/* ── Slick dots — hide default, use progress bar instead ── */
.smart-hero .slick-dots { display: none !important; }

/* ── Shimmer while detecting ── */
.hero-slide.detecting {
    background: linear-gradient(90deg, #07111d 25%, #0f2236 50%, #07111d 75%);
    background-size: 200% 100%;
    animation: heroShimmer 1.3s infinite;
}
@keyframes heroShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ════════════════ RESPONSIVE ════════════════ */

/* Tablet (768–991px) */
@media (max-width: 991px) {
    .hero-slide { min-height: 500px; }
    .hero-text-panel { padding: 0 24px 52px; max-width: 100%; }
    .hero-text-inner { max-width: 480px; }
    .hero-counter { right: 24px; bottom: 22px; }
}

/* Mobile (≤ 767px) — full-bleed image, text at bottom */
@media (max-width: 767px) {
    .hero-slide { min-height: 420px; align-items: flex-end; }
    .hero-bg-img { object-position: center 10% !important; }
    /* Stronger bottom gradient on mobile for text legibility */
    .hero-gradient {
        background:
            linear-gradient(to top,
                rgba(7,17,29,.98) 0%,
                rgba(7,17,29,.75) 45%,
                rgba(7,17,29,.15) 100%),
            linear-gradient(105deg,
                rgba(7,17,29,.8) 0%,
                transparent 60%);
    }
    .hero-text-panel { padding: 0 22px 40px; }
    .hero-eyebrow { font-size: 9px; letter-spacing: 2px; padding: 4px 12px 4px 8px; }
    .hero-title { font-size: 1.3rem; letter-spacing: -.01em; }
    .hero-meta { font-size: .75rem; margin-bottom: 20px; }
    .hero-cta { padding: 11px 24px; font-size: .8rem; }
    .hero-cta-ghost { display: none; } /* hide ghost CTA on mobile to save space */
    .hero-counter { right: 16px; bottom: 16px; }
}

/* Very small mobile (≤ 380px) */
@media (max-width: 380px) {
    .hero-slide { min-height: 360px; }
    .hero-title { font-size: 1.15rem; }
}


/* Partners Scrolling Section CSS */
.partner-scroller-section {
    overflow: hidden;
    background-color: #f8f9fa;
}

.partner-scroller-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    white-space: nowrap;
}

.partner-logo-track {
    display: flex;
    animation: scrollLogos 8s ease-in-out infinite alternate;
    gap: 3rem;
    padding: 10px 0; /* Add some padding to prevent logos from touching the edges */
    width: max-content;
}

.partner-logo-track:hover {
    animation-play-state: paused;
}

.partner-logo {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-decoration: none; /* Remove underline from links */
}

.partner-logo img {
    height: 70px;
    width: 140px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.partner-logo img:hover {
    filter: grayscale(0%);
}

.partner-logo span {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Keyframes for the scrolling animation */
@keyframes scrollLogos {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-100% + 100vw));
    }
}



/* =========================================================================
   EXTRACTED FROM newsroom_page.blade.php
   ========================================================================= */

        /* --- Premium Pagination Styles --- */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            margin-bottom: 60px;
        }
        
        .pagination {
            font-size: 15px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .page-item .page-link {
            padding: 10px 18px;
            color: #1a2b56;
            border: none;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        .page-item.active .page-link {
            background-color: #1a2b56;
            color: #ffffff;
            border-color: #1a2b56;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
        }

        .page-item.disabled .page-link {
            color: #aaa;
            background-color: #f8f9fa;
        }

        .page-item .page-link:hover:not(.disabled) {
            background-color: #e0e6f6;
            color: #1a2b56;
        }
        
        .page-link svg, .page-link span {
            width: 1rem;
            height: 1rem;
            vertical-align: middle;
        }
        /* --- END Pagination Styles --- */

        .event-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .event-card {
            border: none;
            background: #ffffff;
            border-radius: var(--round_md);
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .event-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 32px rgba(0,0,0,0.1);
        }

        .event-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: var(--round_md) var(--round_md) 0 0;
            transition: transform 0.5s ease;
        }
        


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

        .event-card-content h5 a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .event-card-content h5 a:hover {
            color: var(--primary_color);
        }

        .date {
            color: #666;
            font-size: 14px;
        }

        .nav-tabs {
            border-bottom: none;
            display: flex;
            justify-content: center;
            background: #ffffff;
            padding: 8px;
            border-radius: 50px;
            margin-bottom: 40px;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            flex-wrap: wrap;
            gap: 5px;
        }

        .nav-tabs .nav-item {
            margin: 0;
        }

        .nav-tabs .nav-link {
            color: #555;
            font-weight: 600;
            padding: 10px 25px;
            border: none;
            border-radius: 50px;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .nav-tabs .nav-link:hover {
            background: rgba(0,0,0,0.03);
            color: var(--primary_color);
        }

        .nav-tabs .nav-link.active {
            background: var(--primary_color);
            color: #fff;
            box-shadow: 0px 6px 15px rgba(0,0,0,0.1);
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            padding: 20px;
        }

        .gallery-grid a {
            display: block;
            overflow: hidden;
            border-radius: 8px;
            transition: transform 0.3s ease;
            height: 200px;
        }

        .gallery-grid a:hover {
            transform: scale(1.03);
        }

        .gallery-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .gallery-grid a:hover img {
            transform: scale(1.1);
        }

        /* Video Section Styles */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
            padding: 20px;
        }

        .video-item {
            position: relative;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .video-item:hover {
            transform: translateY(-5px);
        }

        .video-thumbnail-container {
            position: relative;
            width: 100%;
            height: 180px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .video-item:hover .video-thumbnail {
            transform: scale(1.05);
        }

        .play-button-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: rgba(255, 0, 0, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            transition: all 0.3s ease;
        }

        .play-button-overlay i {
            color: white;
            font-size: 24px;
            margin-left: 5px;
        }

        .video-item:hover .play-button-overlay {
            background-color: rgba(255, 0, 0, 1);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .video-title {
            margin-top: 12px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            line-height: 1.3;
            padding: 0 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 40px;
        }

        .video-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .video-popup.active {
            opacity: 1;
            visibility: visible;
        }

        .video-popup-content {
            position: relative;
            width: 80%;
            max-width: 900px;
        }

        .video-popup iframe {
            width: 100%;
            height: 500px;
            border: none;
            border-radius: 8px;
        }

        .close-video {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 30px;
            cursor: pointer;
            background: none;
            border: none;
        }

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

        @media (max-width: 768px) {
            .event-grid {
                grid-template-columns: 1fr;
            }
            
            .video-grid, .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 15px;
            }
            
            .video-thumbnail-container {
                height: 150px;
            }
            
            .video-popup-content {
                width: 95%;
            }
            
            .video-popup iframe {
                height: 300px;
            }
            
            .nav-tabs {
                flex-wrap: wrap;
            }
            
            .nav-tabs .nav-item {
                margin: 5px;
            }
        }
    

/* =========================================================================
   EXTRACTED FROM show_program_full.blade.php
   ========================================================================= */

    img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .about-us-container {
        display: flex;
        flex-wrap: nowrap;
        background: #fff;
        border-radius: var(--round_md);
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        margin-bottom: 40px;
        overflow: hidden;
    }

    .content-section {
        flex: 1;
        padding: 50px;
        overflow-y: visible;
    }

    .program-hero-img {
        width: 100%;
        max-height: 550px;
        object-fit: cover;
        border-radius: var(--round_md);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        margin-bottom: 40px;
    }

    .program-title {
        font-size: 2.8rem;
        font-weight: 500;
        color: var(--primary_color);
        margin-bottom: 25px;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    .program-description {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #333;
    }

    .gallery-title {
        font-size: 1.8rem;
        font-weight: 600;
        margin: 40px 0 20px;
        color: var(--primary_color);
        border-bottom: 2px solid rgba(0,0,0,0.05);
        padding-bottom: 10px;
    }

    @media (max-width: 768px) {
        .about-us-container {
            flex-direction: column;
        }
        .content-section{
            padding: 20px;
        }
        .program-title {
            font-size: 2rem;
        }
    }

    .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .gallery-item img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        cursor: pointer;
        border-radius: var(--round_sm);
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .gallery-item img:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    }

    .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .lightbox-content {
        position: relative;
        text-align: center;
        max-width: 90%;
    }

    .lightbox img {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 5px;
    }

    .caption {
        color: #fff;
        font-size: 16px;
        margin-top: 10px;
    }

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

    .prev,
    .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        padding: 10px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }


/* =========================================================================
   EXTRACTED FROM show_program_sidebar.blade.php
   ========================================================================= */

    :root {
        --secondary-color: #6c757d;
        --accent-color: #ff6b00;
        --light-bg: #f8f9fa;
    }

    /* Main Layout */
    .about-us-container {
        display: flex;
        flex-wrap: wrap; /* Restore flex wrap to prevent overlapping */
        gap: 40px;
    }

    .content-section {
        flex: 1;
        min-width: 300px;
        padding: 40px;
        background: #ffffff;
        border-radius: var(--round_md);
        box-shadow: 0 5px 25px rgba(0,0,0,0.04);
        max-width: calc(100% - 320px); /* Prevent overlapping the sidebar (adjusted from 390px) */
    }

    .sidebar {
        flex: 0 0 280px; /* Reduced from 350px */
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    @media (max-width: 992px) {
        .about-us-container {
            flex-direction: column;
        }
        .sidebar {
            width: 100%;
        }
    }

    /* Typography */
    .content-section h2 {
        color: var(--primary_color);
        font-size: 2.5rem;
        font-weight: 500;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        letter-spacing: -0.5px;
        line-height: 1.2;
    }
    
    .content-text {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #333;
    }

    /* Images */
    .featured-image {
        width: 100%;
        height: auto;
        border-radius: var(--round_md);
        margin-bottom: 20px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    }



    /* Gallery */
    .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin: 35px 0;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: var(--round_sm);
        aspect-ratio: 4/3;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.5s;
    }

    .gallery-item:hover .thumbnail {
        transform: scale(1.1);
    }

    /* Share Buttons */
    .share-buttons {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .share-buttons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: white;
        font-size: 18px;
        transition: all 0.3s;
        position: relative;
    }

    .share-buttons a:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    }

    .facebook { background: #3b5998; }
    .twitter { background: #1da1f2; }
    .linkedin { background: #0077b5; }
    .whatsapp { background: #25d366; }
    .copy-link { background: var(--secondary-color); }

    .share-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        margin-bottom: 10px;
        opacity: 0;
        transition: opacity 0.3s;
        white-space: nowrap;
    }

    .share-tooltip:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

    .share-buttons a:hover .share-tooltip {
        opacity: 1;
    }

    /* Sidebar Widgets */
    .sidebar-widget {
        background: #ffffff;
        border-radius: var(--round_md);
        padding: 35px 30px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0,0,0,0.03);
        position: relative;
        overflow: hidden;
    }

    .sidebar-widget::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary_color) 0%, var(--hover_color) 100%);
        opacity: 0.8;
    }

    .sidebar-widget h4 {
        color: var(--primary_color);
        font-size: 1.35rem;
        font-weight: 500;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Buttons */
    .edit-btn, .add-photo-btn {
        display: inline-block;
        padding: 8px 20px;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.2s;
        color: white;
        text-decoration: none;
    }

    .edit-btn {
        background: var(--primary-color);
    }

    .edit-btn:hover {
        background: #004494;
        transform: translateY(-2px);
    }

    .add-photo-btn {
        background: var(--secondary-color);
    }

    .add-photo-btn:hover {
        background: #5a6268;
    }

    /* Global Frontend Add/Edit Buttons */
    .edit-button-wrapper, .add-button-wrapper {
        display: block;
        width: 100%;
    }

    .btn-frontend-edit, .btn-frontend-add {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 15px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none !important;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-frontend-edit {
        background: #1a2b56;
        color: #fff !important;
    }

    .btn-frontend-edit:hover {
        background: #f47920;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .btn-frontend-add {
        background: #28a745;
        color: #fff !important;
    }

    .btn-frontend-add:hover {
        background: #218838;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .gallery-container {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
        .sidebar-widget {
            padding: 20px;
        }
    }


/* =========================================================================
   EXTRACTED FROM show_sidebar2.blade.php
   ========================================================================= */

    img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .about-us-container {
        display: flex;
        flex-wrap: wrap; /* Restore flex wrap to prevent overlapping */
        gap: 40px;
    }

    .content-section {
        flex: 1;
        min-width: 300px;
        padding: 25px 30px;
        background: #ffffff;
        border-radius: var(--round_md);
        box-shadow: 0 5px 25px rgba(0,0,0,0.04);
        overflow-y: visible;
        max-height: none;
        max-width: calc(100% - 320px); /* Prevent overlapping the sidebar (adjusted from 390px) */
    }

    .content-section h2 {
        color: var(--primary_color);
        font-size: 2.2rem;
        font-weight: 500;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    .content-section > img {
        width: 100%;
        height: auto;
        border-radius: var(--round_md);
        margin-bottom: 20px;
    }

    .description {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #333;
    }

    .sidebar {
        flex-basis: 280px; /* Reduced from 400px */
        padding: 0; 
        position: sticky;
        top: 20px;
        min-height: min-content;
    }

    @media (max-width: 768px) {
        .about-us-container {
            flex-direction: column;
        }

        .sidebar {
            border-left: none;
            border-top: 1px solid #ddd;
            position: static; /* Remove sticky on mobile */
            height: auto;
        }
        .content-section{
            max-height: none;
            overflow-y: visible;
        }
    }

    .gallery-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .gallery-item img {
        width: 150px;
        height: auto;
        cursor: pointer;
        border-radius: 5px;
        transition: transform 0.2s ease-in-out;
    }

    .gallery-item img:hover {
        transform: scale(1.05);
    }

    .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .lightbox-content {
        position: relative;
        text-align: center;
        max-width: 90%;
    }

    .lightbox img {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 5px;
    }

    .caption {
        color: #fff;
        font-size: 16px;
        margin-top: 10px;
    }

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

    .prev,
    .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        padding: 10px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }
       .sidebar-widget {
        background-color: transparent; /* Removed background box */
        border-radius: 0;
        padding: 0; /* Removed padding */
        margin-bottom: 35px;
        box-shadow: none; /* Removed box shadow */
        border: none; /* Removed border */
        position: relative;
        overflow: hidden;
    }

    .sidebar-widget::before {
        display: none; /* Removed blue line */
    }

    .sidebar-widget h4 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1.35rem;
        font-weight: 500;
        color: var(--primary_color);
        letter-spacing: -0.5px;
    }

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


    /* Introduction Page Redesign — Premium Style */
    .intro-video-hero {
        background: #f8f9fc;
        border-radius: var(--round_md);
        padding: 40px;
        box-shadow: 0 15px 45px rgba(0,0,0,0.06);
        border: 1px solid rgba(1, 1, 128, 0.05);
        margin-top: -20px; /* Offset to feel integrated */
    }

    .video-highlight-wrapper {
        max-width: 900px;
        margin: 0 auto;
    }

    .video-badge {
        display: inline-block;
        background: var(--yellow_color);
        color: #fff;
        padding: 4px 12px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 2px;
        border-radius: 50px;
        margin-bottom: 15px;
    }

    .video-main-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--title_color);
        margin-bottom: 25px;
        line-height: 1.3;
    }

    .youtube-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        background: #000;
    }

    .youtube-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .page-header-minimal {
        margin: 40px 0 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #f0f0f0;
        position: relative;
    }

    .page-header-minimal::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: var(--primary_color);
    }

    .section-main-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--title_color);
        margin: 0;
    }

    .page-feature-img {
        width: 100%;
        height: auto;
        border-radius: var(--round_md);
        margin-bottom: 35px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    .modern-description {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #444;
        /* font-family removed — inherits Poppins from global */
    }

    .rich-body-content h2, 
    .rich-body-content h3 {
        color: var(--primary_color);
        font-size: 1.6rem;
        font-weight: 600;
        margin-top: 45px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .rich-body-content h2::before,
    .rich-body-content h3::before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 3px;
        background: var(--yellow_color);
        border-radius: 2px;
    }

    .rich-body-content p {
        margin-bottom: 20px;
    }

    /* Style the Vision/Mission/Goal sections specifically if they exist */
    /* Assuming they might be grouped or styled as cards in future logic */
    
    .btn-edit-page {
        background: var(--primary_color);
        color: #fff;
        padding: 10px 25px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-edit-page:hover {
        background: var(--title_color);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    @media (max-width: 768px) {
        .section-main-title { font-size: 1.8rem; }
        .intro-video-hero { padding: 20px; }
        .video-main-title { font-size: 1.4rem; }
    }


    .sidebar-widget ul li {
        margin-bottom: 5px;
    }

    .sidebar-widget ul li a {
        color: var(--primary_color);
        text-decoration: none;
    }

    .sidebar-widget ul li a:hover {
        text-decoration: underline;
    }

    .pdp_event_details_wrapper p {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .pdp_event_details_wrapper p span {
        margin-left: 10px;
    }

    .pdp_event_details_wrapper p i {
        margin-right: 5px;
    }

    .icon-calendar_custom i,
    .fa-solid.fa-calendar-clock,
    .icon-map-marker_custom i {
        font-size: 1.2em;
        color: var(--primary_color);
    }

    .share-buttons {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 20px;
        flex-wrap: nowrap;
    }

    .share-buttons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 5px;
        border-radius: 50%;
        text-decoration: none;
        color: #fff;
        font-size: 1.2em;
    }

    .share-buttons a.facebook { background-color: #1877f2; }
    .share-buttons a.twitter { background-color: #1da1f2; }
    .share-buttons a.linkedin { background-color: #0077b5; }
    .share-buttons a.google { background-color: #db4437; }
    .share-buttons a.whatsapp { background-color: #25d366; }

    .program-photo img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .publication-book img {
        width: 80px;
        height: 120px;
        object-fit: cover;
        border-radius: 5px;
        margin-right: 10px;
    }


/* =========================================================================
   EXTRACTED FROM show_full.blade.php
   ========================================================================= */

    /* Add Inter font import if not already in layouts/layout.blade.php */
   

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, #1a2b56 0%, #0d152a 100%); /* Deep blue gradient */
        color: white;
        padding: 6rem 0; /* More vertical space */
        margin-bottom: 4rem; /* Keep this to separate hero from main content */
        position: relative;
        overflow: hidden;
        text-align: center; /* Center align content */
        border-bottom-left-radius: 20px; /* Subtle curve at bottom */
        border-bottom-right-radius: 20px;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.08)" d="M0,0 L100,0 L100,100 L0,100 Z"></path></svg>'); /* Slightly stronger overlay */
        background-size: cover;
        opacity: 0.5; /* Increased opacity for better effect */
    }

    .page-title {
        font-size: 4.2rem; /* Larger, more impactful title */
        font-weight: 800;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block;
        letter-spacing: -0.03em; /* Tighter letter spacing for larger text */
    }

    .page-title::after {
        content: '';
        position: absolute;
        bottom: -15px; /* Adjust position */
        left: 50%; /* Center the underline */
        transform: translateX(-50%); /* Center the underline */
        width: 100px; /* Slightly wider underline */
        height: 5px; /* Thicker underline */
        background: #28a745; /* Green accent */
        border-radius: 3px;
    }



    /* Enhanced Responsive Images */
    .responsive-image-container {
        margin-bottom: 3rem; /* Space after image before content body */
        border-radius: 16px; /* More rounded corners */
        overflow: hidden;
        box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.15); /* Stronger, softer shadow */
        transition: transform 0.3s ease-in-out;
    }

    .responsive-image-container:hover {
        transform: translateY(-5px); /* Subtle lift on hover */
    }

    .featured-image-wrapper {
        position: relative;
        text-align: center;
        overflow: hidden;
    }

    .featured-image {
        width: 100%;
        height: auto;
        border-radius: var(--round_md);
        transition: transform 0.4s ease-in-out; /* Smooth transition */
        display: block;
    }

    .responsive-image-container:hover .featured-image {
        transform: translateY(-5px); /* Zoom in effect on hover removed to stop overlapping */
    }

    .content-body {
        font-size: 1.15rem; /* Slightly larger text for readability */
        line-height: 1.9; /* Increased line height for better readability */
        color: #4a4a4a; /* Softer text color */
        max-width: 850px; /* Wider content column */
        margin: 0 auto;
        padding: 0 1rem; /* Add horizontal padding for smaller screens */
        margin-bottom: 4rem; /* Space after body, before video section */
    }

    .content-body p {
        margin-bottom: 1.8rem; /* More space between paragraphs */
    }

    .content-body h2, .content-body h3, .content-body h4 {
        color: #1a2b56; /* Consistent heading color */
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .content-body ul {
        list-style: disc;
        padding-left: 25px;
        margin-bottom: 1.5rem;
    }

    .content-body li {
        margin-bottom: 0.8rem;
    }

    .content-body img:not(.emoji) {
        max-width: 100%;
        height: auto;
        margin: 2.5rem auto; /* Center images and add more vertical spacing */
        display: block; /* Ensure images are block level for centering */
        border-radius: 12px;
        box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
    }
    
    /* Prevent emojis from rendering massive */
    .content-body img.emoji, img.emoji, img[src*="emoji"] {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .05em 0 .1em !important;
        vertical-align: -0.1em !important;
        max-width: 1em !important;
    }

    /* Video Section */
    .video-section {
        background: #e0e6f6; /* Lighter blue for video section */
        padding: 6rem 0; /* More padding */
        margin-top: 4rem; /* Space before video section */
        margin-bottom: 4rem; /* Space after video section */
        text-align: center;
        border-radius: 16px; /* Consistent border radius */
    }

    .video-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .video-section .video-title {
        font-size: 1.8rem; /* Match program headings size */
        font-weight: 600;
        margin-bottom: 2rem;
        color: #1a2b56;
    }

    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        border-radius: 16px; /* Consistent border radius */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); /* Slightly less harsh shadow */
    }

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

    /* Featured Videos Section */
    .featured-videos-section {
        margin: 4rem 0;
    }

    .featured-videos-section .featured-videos-title {
        font-size: 1.6rem; /* Match program headings size */
        font-weight: 600;
        margin-bottom: 2rem;
        color: #1a2b56;
        text-align: center;
    }

    .featured-videos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .sidebar-widget {
        background: transparent;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    .sidebar-widget:hover {
        transform: none;
        box-shadow: none;
    }

    .sidebar-widget h4 {
        font-size: 1.25rem;
        padding: 0;
        margin: 0 0 15px 0;
        color: var(--heading_dark);
        background: transparent;
        border-bottom: none;
    }

    .youtube-video {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }

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

    /* Edit Button for Admin */
    .admin-edit-button {
        text-align: center;
        margin-top: 3rem; /* Space before edit button */
        margin-bottom: 5rem; /* Space after edit button (before footer) */
    }

    .admin-edit-button a {
        display: inline-flex; /* Use flex for icon and text */
        align-items: center;
        gap: 8px; /* Space between icon and text */
        padding: 0.8rem 1.8rem; /* More generous padding */
        background-color: #1a2b56; /* NICCI blue */
        color: white;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .admin-edit-button a:hover {
        background-color: #0d152a; /* Darker blue on hover */
        transform: translateY(-2px);
    }

    .admin-edit-button a svg {
        width: 20px;
        height: 20px;
        fill: currentColor; /* Inherit color from parent */
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
        .page-title {
            font-size: 3.5rem;
        }
        .content-body {
            max-width: 750px;
        }
        .video-section .video-title {
            font-size: 1.6rem;
        }
        .featured-videos-section .featured-videos-title {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        .hero-section {
            padding: 4rem 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        .page-title {
            font-size: 2.8rem;
            margin-bottom: 1rem;
        }

        .page-title::after {
            bottom: -10px;
            width: 80px;
            height: 4px;
        }
        
        .content-body {
            font-size: 1rem;
            line-height: 1.7;
            padding: 0 0.8rem;
            margin-bottom: 3rem; /* Adjust for mobile */
        }
        
        .video-section {
            margin-top: 3rem; /* Adjust for mobile */
            margin-bottom: 3rem; /* Adjust for mobile */
            padding: 4rem 0;
        }

        .video-section .video-title {
            font-size: 1.5rem;
        }

        .featured-videos-section .featured-videos-title {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
        }

        .featured-videos-grid {
            grid-template-columns: 1fr;
        }

        .admin-edit-button {
            margin-top: 2rem; /* Adjust for mobile */
            margin-bottom: 4rem; /* Adjust for mobile */
        }
    }

    @media (max-width: 480px) {
        .hero-section {
            padding: 3rem 0;
        }
    }

    /* Removed custom Fancybox theme overrides that were causing z-index and opacity bugs. Default Fancybox works perfectly. */

.sidebar-widget {
    background: transparent; /* Removed background box */
    padding: 0; /* Removed padding */
    border-radius: 0;
    box-shadow: none; /* Removed shadow */
    margin-bottom: 30px; /* Kept margin for spacing between widgets */
    border: none; /* Removed border */
}

.sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280; /* muted label grey */
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
}

/* Two-tone divider: short orange accent over the grey line */
.sidebar-title::after {
    content: '';
    position: absolute;
    bottom: -2px; /* sits on top of the border */
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--hover_color, #f47920);
}

.share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.share-buttons a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    transition: transform 0.3s ease, filter 0.3s ease;
    text-decoration: none;
}

.share-buttons a:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.share-buttons .facebook { background: #3b5998; }
.share-buttons .twitter { background: #1da1f2; }
.share-buttons .linkedin { background: #0077b5; }
.share-buttons .whatsapp { background: #25d366; }

.program-card-sidebar .program-photo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.program-card-sidebar:hover .program-photo img {
    transform: scale(1.03);
}

.program-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary_color, #1a2b56);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    transition: color 0.3s ease;
}

.program-link:hover {
    color: var(--hover_color, #f47920);
}

/* Global Frontend Edit Button */
.btn-frontend-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #fff;
    color: var(--primary_color, #1a2b56) !important;
    border: 1px solid var(--primary_color, #1a2b56);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.btn-frontend-edit:hover {
    background: var(--primary_color, #1a2b56);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 1, 128, 0.15);
}

.edit-button-wrapper {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
}

/* =========================================================================
   UNIFIED FULL-WIDTH PAGE LAYOUT (PROVINCE STYLE)
   ========================================================================= */

/* =========================================================================
   UNIFIED PAGE HERO SYSTEM (GLOBAL)
   ========================================================================= */

.page-hero {
    background: linear-gradient(135deg, #1a2b56 0%, #16213e 50%, #0f3460 100%);
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(192,57,43,.18) 0%, transparent 70%);
}

/* Background Image Support (for provinces/pages) */
.page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35; /* Subtle background for readability */
    mix-blend-mode: overlay;
    transition: transform 10s ease;
}

.page-hero:hover .page-hero-bg {
    transform: scale(1.08);
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(1, 1, 128, 0.8) 0%, transparent 100%);
}

.page-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--yellow_color); /* Consistent Brand Gold */
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-hero__heading {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 28px;
}

.page-hero__heading span {
    color: var(--yellow_color);
}

/* Integrated Hero Search Form */
.hero-search-form {
    display: flex;
    max-width: 640px;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 50px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: var(--transition);
    margin-top: 10px;
}

.hero-search-form:focus-within {
    background: rgba(255,255,255,.18);
    border-color: var(--yellow_color);
    box-shadow: 0 0 0 5px rgba(243, 110, 28, 0.2);
}

.hero-search-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 18px 28px;
    font-size: 1.05rem;
    color: #fff;
    font-family: var(--body);
}

.hero-search-form input::placeholder { 
    color: rgba(255,255,255,.6); 
}

.hero-search-form button {
    background: var(--red_color);
    border: none;
    padding: 0 32px;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.hero-search-form button:hover { 
    background: var(--primary_color);
    transform: translateX(2px);
}

/* Breadcrumb within Hero */
.hero-breadcrumb {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-breadcrumb a:hover { 
    color: #fff;
}

.hero-breadcrumb span {
    opacity: 0.5;
}

/* Hero Stats */
.hero-stat {
    font-size: .9rem;
    color: rgba(255,255,255,.7);
    margin-top: 24px;
}

.hero-stat strong { 
    color: #fff; 
    font-weight: 700; 
}

/* =========================================================================
   DEPRECATED STUFF (Retained briefly for transition)
   ========================================================================= */

/* ─── Main Content Body ─── */
.province-body-section {
    padding: 60px 0;
    background: #fff;
}

.province-body-section .province-content-inner {
    font-size: 1.08rem;
    line-height: 1.85;
    color: #374151;
}

.province-content-inner h2,
.province-content-inner h3,
.province-content-inner h4 {
    color: #0d152a;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.province-content-inner p {
    margin-bottom: 1rem;
}

.province-content-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.province-content-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.97rem;
}

.province-content-inner table th,
.province-content-inner table td {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.province-content-inner table th {
    background: #0d152a;
    color: #fff;
    font-weight: 600;
}

.province-content-inner table tr:nth-child(even) td {
    background: #f9fafb;
}

/* ─── Empty state ─── */
.province-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #9ca3af;
}

.province-empty-state i { 
    font-size: 3.5rem; 
    margin-bottom: 1rem; 
    color: #d1d5db; 
}

.province-empty-state h4 { 
    color: #6b7280; 
    font-size: 1.3rem; 
    margin-bottom: 0.5rem; 
}


/* Global Heading Colors */
.province-content-inner h1, 
.province-content-inner h2, 
.province-content-inner h3, 
.province-content-inner h4, 
.province-content-inner h5, 
.province-content-inner h6 {
    color: var(--heading_dark);
}

.content-text h1, 
.content-text h2, 
.content-text h3, 
.content-text h4, 
.content-text h5, 
.content-text h6 {
    color: var(--heading_dark);
}

.about-us-container h2,
.gallery-section h2 {
    color: var(--heading_dark);
}

/* ─── Details Pages Responsive Refinements ─── */
.about-us-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
}

.content-section {
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
}

.featured-image, .page-feature-img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin-bottom: 2rem !important;
    object-fit: cover !important;
}

.sidebar-widget {
    background: #f8fafc !important;
    padding: 24px !important;
    border-radius: 15px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(26, 43, 86, 0.05) !important;
}

.sidebar-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid rgba(26, 43, 86, 0.08) !important;
    color: var(--heading_dark) !important;
}

.share-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
}

.share-buttons a {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    transition: transform 0.2s ease !important;
}

.share-buttons a:hover {
    transform: translateY(-3px) !important;
}

.share-buttons .facebook { background: #1877F2 !important; }
.share-buttons .twitter { background: #1DA1F2 !important; }
.share-buttons .linkedin { background: #0077b5 !important; }
.share-buttons .whatsapp { background: #25D366 !important; }

/* Responsive adjustments for details pages */
@media (max-width: 991.98px) {
    .about-us-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .sidebar {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .content-section {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px 15px !important;
        min-width: 0 !important;
    }

    .section-spacing {
        margin: 30px 0 !important;
    }
    
    .province-content-inner, .content-text {
        padding: 0 5px !important;
    }

    /* Override hardcoded calc widths from legacy sections */
    .about-us-container .content-section,
    .about-us-container .sidebar {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.gallery-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 1.5rem !important;
}

.gallery-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: 4/3 !important;
}

.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.gallery-item:hover img {
    transform: scale(1.05) !important;
}

@media (max-width: 575.98px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .sidebar-widget {
        padding: 20px 15px !important;
    }
}

/* Force override of Bootstrap's text-primary on sidebar links */
.program-card-sidebar .program-link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading_dark) !important; 
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    line-height: 1.4;
}

.program-card-sidebar .program-link:hover {
    color: var(--hover_color) !important;
}

/* ═══════════════════════════════════════════════════
   Antigravity Consolidation — Extracted from layout.blade.php
   ═══════════════════════════════════════════════════ */

/* Carousel Particles */
.carousel-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 30%;
    pointer-events: none;
}

/* Breadcrumb Separator */
.separator {
    margin: 0 8px;
    color: #0c0c0c;
    font-weight: bold;
}

/* Hashtag widget styles are defined in layout.blade.php */

/* Footer — Extracted from layout.blade.php */
.main-footer h5 { color: #fff; margin-bottom: 15px; font-weight: bold; }
.main-footer ul.list-unstyled { padding-left: 0; }
.main-footer ul.list-unstyled li { margin-bottom: 8px; }
.main-footer ul.list-unstyled a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 13px; }
.main-footer ul.list-unstyled a:hover { color: #fff; text-decoration: underline; }
.main-footer ul.list-unstyled a i { font-size: 9px; margin-right: 6px; color: rgba(255,255,255,0.4); }
.main-footer .empty-space { min-height: 100px; }
.main-footer p { font-size: 13px; color: rgba(255,255,255,0.7); }
.main-footer address { color: rgba(255,255,255,0.7); font-size: 13px; }
.main-footer .right a,
.main-footer .company-info a,
.main-footer .contact a { color: #93c5fd !important; }
.main-footer .right a:hover,
.main-footer .company-info a:hover,
.main-footer .contact a:hover { color: #fff !important; }
.main-footer .single-line { white-space: nowrap; }