/* Minification failed. Returning unminified contents.
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(62,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(62,71): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(150,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(151,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(157,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(162,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(163,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(167,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(168,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(184,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(193,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(200,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(224,22): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(236,22): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(243,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(251,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(260,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(392,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(433,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(447,25): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(456,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(467,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(500,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(516,25): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(535,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(551,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(557,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(563,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(568,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(571,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(581,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(589,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(599,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(608,22): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(609,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(621,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(644,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(673,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(677,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(697,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(814,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(817,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(828,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(834,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(838,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(851,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(890,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(925,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(931,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(939,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(940,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(947,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(956,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(981,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(991,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1007,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1008,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1010,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1019,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1020,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1022,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(1026,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1043,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1044,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1052,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1053,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1064,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1079,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1083,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1089,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1096,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(1111,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1117,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1122,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1147,26): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1148,21): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1153,22): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1167,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1180,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1190,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1196,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1201,21): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1208,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1230,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1239,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1240,31): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1246,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1247,31): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1281,31): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1301,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1309,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1320,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1325,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1329,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1338,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1350,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1420,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(1424,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1542,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1543,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1553,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1555,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(1564,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(1571,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(1582,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1588,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1599,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1602,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1611,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1616,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1622,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1623,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1637,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(1650,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(1651,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1656,33): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1687,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1696,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1697,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1709,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1714,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1724,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1728,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1729,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1737,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1745,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1752,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1757,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1761,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1808,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1811,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(1819,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1826,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(1842,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1850,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1861,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2094,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(2323,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light'
(2326,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-hover'
(2372,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(2386,21): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
 */
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #47a2cf;
    --secondary-color: #44b3a0;
    --accent-color: #d3a02a;
    --light-blue: #88c7e8;
    --beige: #cbbcb8;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --border-color: #e0e0e0;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
    font-size: inherit !important;
    overflow-x: hidden;
}

body {
    font-family: "DM Sans", sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
    padding-bottom: 0 !important;
    font-size: inherit !important;
}

.container {
    /*max-width: 1600px;*/
    margin: 0 auto;
/*    padding: 0 20px;  */
padding: 0 !important;
max-width:100%;
}

.navbar{margin-bottom:0 !important;}

/* Top-level page wrapper — no Bootstrap grid padding/margin so full-width sections have no white bars */
.fp-page-content {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--light-blue) 100%);
    color: white;
    text-align: center;
    /*margin-top: 70px;*/
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0;
    width: 100%;
    animation: fadeInUp 1s ease;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 1s ease;
}

.hero .container {
    padding: 0 !important;
    margin: 0 !important;
}



.hero-title {
    font-size: 3.5rem !important;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-size: 1.5rem !important;
    margin-bottom: 1rem;
    opacity: 0.95;
}

.hero-description {
    font-size: 1.1rem !important;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1rem !important;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background: var(--accent-color);
    color: var(--bg-white);
}

.btn-primary:hover {
    background: #b88a1e;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--bg-white);
    border: 2px solid var(--bg-white);
}

.btn-secondary:hover {
    background: var(--bg-white);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Section Styles */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

    .section-header h2 {
        font-size: 2.5rem !important;
        color: var(--text-dark);
        margin-bottom: 1rem;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

.underline {
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 0 auto;
    border-radius: 2px;
}

.section-description {
    margin-top: 1.5rem;
    color: var(--text-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem !important;
    line-height: 1.7;
}

/* About Section */

.stat-item {
    flex: 1;
    text-align: center;
    padding: 0 2rem;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 60px;
    background: var(--text-dark);
    opacity: 0.2;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--text-dark);
    opacity: 0.3;
}

.stat-number {
    font-size: 3rem !important;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.95rem !important;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.5;
}

/* Services Section */

/* Resources Section */
.resources-section {
    background: var(--bg-white);
    padding: 3rem 0 1rem 0;
    scroll-margin-top: 70px;
}

.resources-section:nth-of-type(odd) {
    background: #fafafa;
}

/* Pastel Backgrounds for Publications, Videos, and News */
/*#publications.resources-section {
    background: #e8f4f8;
}

#videos.resources-section {
    background: #f5f2e8;
}

#news.resources-section {
    background: #e8f0f5;
}*/

    .resources-section.quick-links-resources-1 {
        background: #e8f4f8;
    }
    .resources-section.quick-links-resources-2 {
        background: #f5f2e8;
    }
    .resources-section.quick-links-resources-3 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-4 {
        background: #e8f0f5;
    }
    .resources-section.quick-links-resources-5 {
        background: #f5f1e4;
    }
    .resources-section.quick-links-resources-6 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-7 {
        background: #eff0f1;
    }
    .resources-section.quick-links-resources-8 {
        background: #f7f4e8;
    }
    .resources-section.quick-links-resources-9 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-10 {
        background: #e8f4f8;
    }

    .resources-section.quick-links-resources-11 {
        background: #f5f2e8;
    }

    .resources-section.quick-links-resources-12 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-13 {
        background: #e8f4f8;
    }

    .resources-section.quick-links-resources-14 {
        background: #f5f2e8;
    }
    .resources-section.quick-links-resources-15 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-16 {
        background: #e8f4f8;
    }

    .resources-section.quick-links-resources-17 {
        background: #f5f2e8;
    }
    .resources-section.quick-links-resources-18 {
        background: #f7e7e7;
    }

    .resources-section.quick-links-resources-19 {
        background: #e8f0f5;
    }

    .resources-section.quick-links-resources-20 {
        background: #f5f1e4;
    }

    .resources-section.quick-links-resources-21 {
        background: #f7e7e7;
    }
    .resources-section.quick-links-resources-22 {
        background: #eff0f1;
    }

    .resources-section.quick-links-resources-23 {
        background: #f7f4e8;
    }
    .resources-section.quick-links-resources-24 {
        background: #f7e7e7;
    }

    .resources-section.quick-links-resources-25 {
        background: #e8f4f8;
    }

    .resources-section.quick-links-resources-26 {
        background: #f5f2e8;
    }
    .resources-section.quick-links-resources-27 {
        background: #f7e7e7;
    }

    .resources-section.quick-links-resources-28 {
        background: #e8f4f8;
    }

    .resources-section.quick-links-resources-29 {
        background: #f5f2e8;
    }
    .resources-section.quick-links-resources-30 {
        background: #f7e7e7;
    }
.resources-header {
    text-align: left;
    margin-bottom: 2rem;
    padding: 0 20px;
}

    .resources-header h2 {
        font-size: 1.75rem !important;
        color: var(--text-dark);
        margin-top: 0;
        margin-bottom: 1.5rem;
        margin-left: 0;
        padding-left: 0;
        font-weight: 600;
        letter-spacing: -0.01em;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

.resources-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    margin: 0;
    padding: 0 20px;
}

.resource-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding-left: 0;
}

.resource-item {
    padding: 0.8rem 0;
    padding-left: 0;
    background: transparent;
    border-bottom: none;
    transition: all 0.3s ease;
    text-align: left;
}

.resource-item:hover {
    padding-left: 0;
}

    .resource-item h3 {
        color: var(--text-dark);
        margin: 0;
        padding-left: 0;
        font-size: 1rem !important;
        font-weight: 400;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

        .resource-item h3::before {
            content: '→';
            font-size: 0.9rem !important;
            color: var(--text-light);
            transition: transform 0.3s ease;
        }

.resource-item:hover h3::before {
    transform: translateX(5px);
}

.resource-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem !important;
}

.resource-link:hover {
    color: var(--text-dark);
    gap: 0.8rem;
}

/* Hide new elements in default/non-colorful styles */
.resource-icon,
.resource-meta {
    display: none;
}

/* Ensure resource-card behaves like resource-item in default styles */
.resource-card {
    padding: 0.8rem 0;
    padding-left: 0;
    background: transparent;
    border-bottom: none;
    transition: all 0.3s ease;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
    border: none;
    height: auto;
    display: block;
}

.resource-card:hover {
    padding-left: 0;
    transform: none;
    box-shadow: none;
    border: none;
}

    .resource-card h3 {
        color: var(--text-dark) !important;
        margin: 0;
        padding-left: 0;
        font-size: 1rem !important;
        font-weight: 400;
        letter-spacing: -0.01em;
        display: block;
        align-items: center;
       /* gap: 0.8rem;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .resource-card h3::before {
            font-size: 0.9rem !important;
            color: var(--text-light);
            transition: transform 0.3s ease;
            flex-shrink: 0;
            margin-right: 0.8rem;
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url("/Content/Images/link-icon.svg");
            background-size: contain;
            background-repeat: no-repeat;
        }

.resource-card:hover h3::before {
    transform: translateX(5px);
}

/* Contact Section */
.contact {
    background: var(--bg-light);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item h3 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 1.5rem !important;
}

.contact-item h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 1.2rem !important;
}

.contact-item p {
    color: var(--text-light);
    line-height: 1.6;
}

.contact-form {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 500;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--border-color);
        border-radius: 5px;
        font-size: 1rem !important;
        font-family: inherit;
        transition: border-color 0.3s ease;
    }

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
}

/* Footer */
.fp_footer {
    background: var(--text-dark);
    color: var(--bg-white);
    padding: 3rem 0 1rem;
}

.footer-content {
   min-width: 250px;
   max-width: 100%;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--bg-white);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--bg-white);
}

.fp_footer .copy-right {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--bg-white);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    /* Mobile Dropdown Styles — scoped to custom .nav-menu only,
       NOT the Flexpage sitemap menu which also uses class "submenu" */
    .nav-menu .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--bg-light);
        margin-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }

    .dropdown.active .nav-menu .submenu {
        max-height: 500px;
        padding: 0.5rem 0;
    }

    .nav-menu .submenu a {
        padding: 0.7rem 2rem;
    }

    .nav-menu .submenu a:hover {
        padding-left: 2rem;
    }

    .dropdown > a {
        cursor: pointer;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-subtitle {
        font-size: 1.2rem !important;
    }

    .hero-description {
        font-size: 1rem !important;
    }

    .about-content {
        gap: 3rem;
    }

    .about-text {
        font-size: 1.1rem !important;
        padding: 0 1rem;
    }

    .about-stats {
        flex-direction: column;
        gap: 2rem;
        padding-top: 1rem;
    }

    .stat-item {
        padding: 0;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    .stat-item::before {
        width: 40px;
    }

    .stat-number {
        font-size: 2.5rem !important;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 2rem !important;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

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

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .about-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-item::before {
        width: 30px;
    }

    .stat-number {
        font-size: 2rem !important;
    }
}

/* Documents Page Specific Styles */

/* Breadcrumb Section */
.breadcrumb-section {
    background: var(--bg-light);
    padding: 1.5rem 0;
    margin-top: 70px;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem !important;
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--secondary-color);
}

.breadcrumb span {
    color: var(--text-light);
}

/* Page Header with Background Image */
.page-header {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-top: 70px;*/
    margin:0 !important;
    padding:0 !important;
    background: var(--bg-white);
    overflow: hidden;
}

.header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-image: url('/content/images/cow-3542489_1920.jpg');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}

.header-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.header-content {
    position: relative;
    z-index: 1;
    text-align: center;
    /*padding: 4rem 2rem;*/
    width: 100%;
    padding:0;
}

.page-title {
    font-size: 3rem !important;
    font-weight: 600;
    color: var(--bg-white);
    /*margin: 0 0 2rem 0;*/
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    margin: 0;
}

.header-content .page-title img {
    height: 400px;
    width: 100vw;
    object-fit:cover;
    object-position:center;
}

.header-content .page-title h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    font-size: clamp(20px, 9vw, 85px);
}
.navbar-default-container h1 {
    font-size: 36px;
}
.page-nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.page-nav-link {
    color: var(--bg-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem !important;
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--bg-white);
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.page-nav-link:hover {
    background: var(--bg-white);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.content-subtitle {
    font-size: 1.75rem !important;
    font-weight: 600;
    color: var(--text-dark);
    margin: 2rem 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    letter-spacing: -0.01em;
}

/* Content Section */
.content-section {
    background: var(--bg-white);
    padding: 4rem 0;
}

/* Two Column Layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.main-content {
    min-width: 0; /* Prevents grid overflow */
}

.sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}

.sidebar-section {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.sidebar-section:last-child {
    /*margin-bottom: 0;*/
}

    .sidebar-section h3 {
        font-size: 1.5rem !important;
        color: var(--text-dark);
        margin-bottom: 1rem;
        font-weight: 600;
        padding-bottom: 0.75rem;
        border-bottom: none;
    }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-nav-link {
    display: block;
    padding: 8px 16px;
    background: var(--bg-white);
    color: var(--text-dark);
    text-decoration: none;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem !important;
    text-align: center;
    transition: all 0.3s ease;
}

.sidebar-nav-link:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.follow-us p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-dark);
    background: var(--bg-white);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-icon:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.contact-details {
    color: var(--text-dark);
    line-height: 1.8;
}

    .contact-details p {
        margin-bottom: 0.75rem;
        font-size: 1rem !important;
    }

.contact-details p:last-child {
    margin-bottom: 0;
}

.contact-details strong {
    font-weight: 600;
    color: var(--text-dark);
}

.contact-details a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.sidebar-image {
    /*margin-top: 2.5rem;*/
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

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

.document-content {
    max-width: 100%;
    margin: 0;
    line-height: 1.8;
    color: var(--text-dark);
}

    .document-content p {
        margin-bottom: 1.5rem;
        font-size: 1.05rem !important;
        color: var(--text-dark);
    }

    .document-content h2 {
        font-size: 1.75rem !important;
        color: var(--text-dark);
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        font-weight: 600;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        letter-spacing: -0.01em;
    }

.document-content h2:first-of-type {
    margin-top: 2rem;
}

.content-link {
    margin-bottom: 3rem;
    text-align: left;
}

    .content-link .btn {
        display: inline-block;
        white-space: normal;
        word-wrap: break-word;
        max-width: 100%;
        padding: 1rem 2rem;
        font-size: 1.05rem !important;
        background: var(--text-dark);
        color: var(--bg-white);
        border: none;
    }

.content-link .btn:hover {
    background: var(--text-dark);
    opacity: 0.9;
    transform: none;
}

.benefits-list {
    list-style: disc;
    padding-left: 2rem;
    margin: 2rem 0;
}

.benefits-list li {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.contact-info {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: transparent;
    border-radius: 0;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 400;
    font-size: 1.05rem !important;
    color: var(--text-dark);
}

.document-content sub {
    font-size: 0.8em !important;
    vertical-align: sub;
}

/* Documents Header */
.documents-header {
    background: var(--bg-white);
    padding: 3rem 0;
}

    .documents-header .section-header h1 {
        font-size: 2.5rem !important;
        color: var(--text-dark);
        margin-bottom: 1rem;
    }

    .documents-header .section-header p {
        color: var(--text-light);
        font-size: 1.1rem !important;
        margin-top: 1rem;
    }

/* Category Filter */
.category-filter {
    background: var(--bg-white);
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 70px;
    z-index: 100;
    box-shadow: none;
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-tab {
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-dark);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem !important;
}

.filter-tab:hover {
    background: transparent;
    color: var(--text-dark);
    border-bottom-color: var(--text-dark);
    transform: none;
}

.filter-tab.active {
    background: transparent;
    color: var(--text-dark);
    border-bottom-color: var(--text-dark);
    box-shadow: none;
    font-weight: 600;
}

/* Documents List */
.documents-list {
    background: #f5f3f2;
    padding: 3rem 0;
    min-height: 60vh;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.document-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 2rem;
}

.document-card:hover {
    transform: none;
    box-shadow: none;
    border-bottom-color: var(--text-dark);
}

.document-card.hidden {
    display: none;
}

.document-icon {
    font-size: 3rem !important;
    margin-bottom: 0.5rem;
}

.document-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.document-card .document-content h3 {
    color: var(--text-dark);
    font-size: 1.5rem !important;
    margin-bottom: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.document-card .document-content p {
    color: var(--text-light);
    line-height: 1.7;
    flex: 1;
    font-size: 1rem !important;
}

.document-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem !important;
}

.document-date {
    color: var(--text-light);
}

.document-type {
    background: var(--primary-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem !important;
}

.document-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem !important;
}

.document-link:hover {
    color: var(--text-dark);
    gap: 0.8rem;
}

/* Documents Page Responsive Design */
@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .page-header {
        min-height: 250px;
    }

    .page-title {
        font-size: 2.5rem !important;
        margin-bottom: 1.5rem;
    }

    .page-nav {
        gap: 1rem;
    }

    .page-nav-link {
        font-size: 0.9rem !important;
        padding: 0.4rem 0.8rem;
    }

    .resources-header h2 {
        font-size: 1.6rem !important;
    }

    .resources-grid {
        gap: 0;
    }

    .resource-item {
        padding: 0.7rem 0;
    }

    .documents-header .section-header h1 {
        font-size: 2rem !important;
    }

    .category-filter {
        top: 70px;
        padding: 1.5rem 0;
    }

    .filter-tabs {
        gap: 0.4rem;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .filter-tabs::-webkit-scrollbar-track {
        background: var(--bg-light);
    }

    .filter-tabs::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 2px;
    }

    .filter-tab {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem !important;
        white-space: nowrap;
    }

    .documents-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .document-card {
        padding: 1.5rem;
    }

    .breadcrumb {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .page-header {
        min-height: 200px;
    }

    .page-title {
        font-size: 2rem !important;
        margin-bottom: 1rem;
    }

    .page-nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    .page-nav-link {
        font-size: 0.85rem !important;
    }

    .resources-header h2 {
        font-size: 1.5rem !important;
    }

   /* .header-content {
        padding: 2rem 1rem;
    }*/

    .content-section {
        padding: 2.5rem 0;
    }

    .document-content {
        padding: 0 1rem;
    }

        .document-content h2 {
            font-size: 1.6rem !important;
            margin-top: 2rem;
        }

    .content-subtitle {
        font-size: 1.4rem !important;
    }

    .document-content p {
        font-size: 1rem !important;
    }

    .content-link .btn {
        font-size: 1rem !important;
        padding: 0.9rem 1.5rem;
    }

    .benefits-list li {
        padding: 0.5rem 0;
    }

    .documents-header {
        padding: 2rem 0;
    }

        .documents-header .section-header h1 {
            font-size: 1.8rem !important;
        }

    .filter-tab {
        padding: 0.5rem 1rem;
        font-size: 0.85rem !important;
    }

    .document-card {
        padding: 1.2rem;
    }

    .document-icon {
        font-size: 2.5rem !important;
    }

    .fp_flex.fp_align-items-center.fp_justify-content-center.fp_toolbar {
        justify-content: space-between !important;
        margin: 0 50px;
        width: 85vw !important;
    }
    .fp_flex.fp_logo {
        margin-left: 0;
    }
    .fp_flex.login {
         margin-right: 0; 
    }
}

/* Login Button */
.btn-login {
    padding: 8px 20px;
    background: var(--primary-color);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.95rem !important;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-login:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Login Section */
.login-section {
    min-height: calc(100vh - 73px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    padding: 100px 20px 80px;
}

.dashboard-section {
    min-height: 100vh;
    padding: 100px 20px 80px;
    background: var(--bg-light);
}

/* Dashboard Header */
.dashboard-header {
    margin-bottom: 3rem;
    text-align: center;
}

    .dashboard-header h2 {
        font-size: 2.5rem !important;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

.dashboard-subtitle {
    color: var(--text-light);
    font-size: 1.1rem !important;
}

.dashboard-content {
    max-width: 1600px;
    margin: 0 auto;
}

/* Articles Section */
.articles-section {
    background: var(--bg-white);
    border-radius: 10px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
}

.section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

    .section-header-inline h3 {
        font-size: 1.75rem !important;
        color: var(--text-dark);
        font-weight: 600;
        margin: 0;
    }

.article-count {
    background: var(--primary-color);
    color: var(--bg-white);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem !important;
    font-weight: 600;
}

.articles-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.article-card, .newsRec-container {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

    .article-card:hover, .newsRec-container:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-color);
    }

.article-card.unread {
    background: #f0f7fa;
    border-left: 4px solid var(--primary-color);
}

.article-header, .newsRec-container h3.main-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.newsRec-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

    /* Date */
    .newsRec-container > div[style*="italic"] {
        order: 1;
    }

    /* Title */
    .newsRec-container > h3.main-title {
        order: 2;
    }

    /* Content */
    .newsRec-container > .content {
        order: 3;
    }
.article-date {
    font-size: 0.85rem !important;
    color: var(--text-light);
}

.article-status {
    font-size: 0.8rem !important;
    font-weight: 600;
}

.unread-badge {
    background: var(--accent-color);
    color: var(--bg-white);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
}

.article-content {
    margin-bottom: 1rem;
}

.article-title, .newsRec-container h3.main-title {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.article-preview {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem !important;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.article-category {
    background: var(--secondary-color);
    color: var(--bg-white);
    padding: 0.3rem 0.8rem;
    border-radius: 5px;
    font-size: 0.85rem !important;
    font-weight: 600;
}

.article-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem !important;
    transition: all 0.3s ease;
}

.article-card:hover .article-link {
    color: var(--secondary-color);
}

.articles-actions {
    margin-top: 2rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

/* Dashboard Sidebar Styling */
.dashboard-section .sidebar-section {
    background: var(--bg-white);
}

.dashboard-section .sidebar-image {
    background: var(--bg-white);
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-header h2 {
        font-size: 2rem !important;
    }

    .articles-section {
        padding: 1.5rem;
    }

    .section-header-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .article-card {
        padding: 1.25rem;
    }

    .article-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

.container.login{
    width: 100% !important;
}

.login-section .container {
    max-width: 1400px;
    padding: 0 40px;
    width: auto !important;
}

.login-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.login-card {
    background: var(--bg-white);
    padding: 2rem 2.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

    .login-card h2 {
        color: var(--text-dark);
        font-size: 2rem !important;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

.login-subtitle {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 1rem !important;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

    .login-form .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-dark);
        font-weight: 500;
        font-size: 0.95rem !important;
    }

    .login-form .form-group input {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid var(--border-color);
        border-radius: 5px;
        font-size: 1rem !important;
        font-family: inherit;
        transition: border-color 0.3s ease;
        box-sizing: border-box;
        max-width: 100%;
    }

.login-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-login-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem !important;
    margin-top: 0.5rem;
}

.login-message {
    margin-top: 1.5rem;
    padding: 12px;
    border-radius: 5px;
    font-size: 0.95rem !important;
    text-align: center;
    display: none;
}

.login-message.login-success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.login-message.login-error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive Login */
@media (max-width: 768px) {
    .nav-actions {
        gap: 0.5rem;
    }

    .btn-login {
        padding: 6px 16px;
        font-size: 0.9rem !important;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

        .login-card h2 {
            font-size: 1.75rem !important;
        }
}



.fp_flex.languages{
    min-width:35px;
}
    .fp_flex.languages .dropdown-menu.language {
        min-width: 35px !important;
    }

.navbar-default.fp_navbar .fp_toolbar {
    width: 80% !important;
}

/* Center only the middle top-level navigation items. */
.fp_sitemapMenu-menu > .level0.navbar-nav.fp_sitemapMenu-navbar {
    justify-content: center;
}

.level2.submenu.navbar-nav.fp_sitemapMenu-navbar,
.level3.submenu.navbar-nav.fp_sitemapMenu-navbar {
    width: auto;
}

.qf-clickable-card {
    cursor: pointer;
}

/* Fix dropdown gap that causes menu to disappear on hover */
/*ul.level1 {
    margin-top: 0 !important;
    padding-top: 4px !important;
}

ul.level2, ul.level3, ul.level4 {
    margin-left: -3px !important;
}*/



@media (min-width: 1200px) {
    .fp-page-content .flexpage-blocks .flexpage-blockWrapper.fpMultiColumn {
        width: auto !important;
        max-width: 1404px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== Mobile Navigation Menu ===== */
.fp_menu {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: auto;
    display: flex !important;
    align-items: center;
}

.Menu-Icon {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    z-index: 1000000000000;
}

.Menu-Icon span {
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #58595B;
    border-radius: 2px;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.Menu-Icon span:nth-child(1) { top: 2px; }
.Menu-Icon span:nth-child(2) { top: 9px; }
.Menu-Icon span:nth-child(3) { top: 16px; }

.Menu-Icon.open {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
}

.Menu-Icon.open span { top: 9px; }
.Menu-Icon.open span:nth-child(1) { transform: rotateZ(45deg); }
.Menu-Icon.open span:nth-child(2) { display: none; }
.Menu-Icon.open span:nth-child(3) { transform: rotateZ(-45deg); top: 9px; }

@media (min-width: 971px) {
    .Menu-Icon {
        display: none;
    }
   /* .level0 > li > ul {
        top: 100% !important;
        margin-top: -5px;
    }*/
}

@media (max-width: 970px) {
    .navbar-default.fp_navbar .fp_toolbar {
        width: 90vw !important;
        position: relative;
    }

    /* Give logo room so it doesn't overlap the hamburger */
    .fp_logo {
        margin-left: 50px;
    }

    /* Prevent all scroll when menu is open */
    body.open,
    html.fp_open-site {
        overflow: hidden;
    }

    body:not(.open) .fp_sitemapMenu-item {
        display: none;
    }

    /* Hide toolbar siblings so they don't bleed through the overlay */
    body.open .fp_logo,
    body.open .fp_flex.languages,
    body.open .fp_flex.login {
        visibility: hidden;
    }

    .open .fp_tools {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #f8f8f8;
        min-height: 100vh;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100vw;
        z-index: 100000;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 40px;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .open .fp_flex.fp_sitemapMenu,
    .open .fp_flex.fp_sitemapMenu-menu,
    .open .fp_flex.fp_sitemapMenu-navbar {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Each menu item: flex row so text + arrow sit side by side */
    .open .fp_sitemapMenu-item {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 20px 0 24px !important;
        border-bottom: 1px solid rgba(0,0,0,0.07);
        width: 100% !important;
        box-sizing: border-box;
        float: none !important;
    }

    /* Item text: auto width so arrow sits right next to the label, no stretch */
    .open .fp_sitemapMenu-item > a.fp_sitemapMenu-item-text,
    .open .fp_sitemapMenu-item > span.fp_sitemapMenu-item-text {
        flex: 0 0 auto !important;
        float: none !important;
        padding: 0 !important;
        height: 30px !important;
        line-height: normal !important;
        font-size: 1rem !important;
        color: var(--text-dark) !important;
        text-decoration: none !important;
    }

    /* Arrow span: compact, sits immediately after text */
    .open span.fp_subMenu-down-arrow {
        display: inline-flex !important;
        min-width: 36px !important;
        height: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px 12px !important;
        cursor: pointer;
        flex-shrink: 0;
        position: static !important;
    }

    /* Submenu: hidden by default on mobile. display:none is non-important so
       jQuery .show()/.hide() (via toggleSubmenu) can override it.
       position:static !important overrides site.css's position:absolute.
       max-height/overflow overrides any generic .submenu rule that collapses height. */
    .open li.fp_sitemapMenu-item > ul.submenu {
        display: none;
        position: static !important;
        flex-direction: column !important;
        width: 100% !important;
        flex-basis: 100%;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        min-width: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        visibility: visible !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Submenu items: indented */
    .open ul.submenu > li.fp_sitemapMenu-item {
        padding-left: 30px !important;
    }

    /* Arrow triangle */
    .fp_subMenu-down-arrow::after {
        content: "" !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #555;
        transition: transform 0.3s ease-in-out;
        transform: rotate(0deg);
    }

    .fp_subMenu-down-arrow.rotate-arrow::after {
        transform: rotate(90deg);
    }
    .logo{
        width:30%;
        margin-left:10px;
    }
    .nav-actions.fp_flex.fp_justify-content-end.fp_align-items-center{
        width:50%;  
    }
    .nav-actions .fp_flex.languages {
        margin-right: 0 !important;
    }
    .logo h1 {
        font-size: 26px;
    }


    .open .fp_flex.fp_sitemapMenu-menu {
        height: 100%;
        overflow: scroll;
    }
}

/****************old css***********/
.DSM-main {
    font-size: 20px;
    font-weight: bold;
    color: #2397D5 !important;
}

h1, h2, h3, h4 {
    font-weight: bold;
    color: #2c3e50;
}

h1, strong, .DSM-green, .DSM-blue, .menu li.separator, .menu li a.topLevel {
    font-weight: bold;
}

h2, h3, h4 {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

h5, h6 {
    font-weight: normal;
    padding: 0px;
    margin: 0px;
}

h6 {
    font-size: 10px;
}


h1 {
    font-size: 18px;
    padding-bottom: 0px;
}

h2, p.subtitle {
    font-size: 16px;
}

h3, h4, .DSM-blue, .dsm, .address {
    font-size: 18px;
    color: #34C5F4 !important;
}

h3, h4 {
    font-size: 18px;
    color: #009999 !important;
}

h4, h2 {
    color: #222222 inherit !important;
   /* text-decoration: underline;*/
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

blockquote {
    border-left: 4px solid #cccccc;
    margin-left: 20px;
    padding-left: 15px;
}

em {
    font-style: italic;
}

ol {
    list-style: decimal outside none;
    margin-left: 20px;
}

ul {
    list-style: disc outside none;
    margin-left: 20px;
}

.mainArea ol, .explanation ol {
    list-style: decimal outside none;
    margin-left: 20px;
}



.hero h1, .hero h2, .hero h3, .hero h4,
.hero-title, .hero-content h2 {
    color: #ffffff !important;
}

.Title, .Title strong, .Title u, .Title em, .Title strike, .Title span {
    color: #2397d5;
    font-size: 16pt;
    font-weight: bold;
    text-align: left;
}


.folder-content {
    padding: 20px;
    border: 3px solid #2397d5;
    color: #222222 !important;
}
    .folder-content .materials {
        width: 98%;
    }


.fpFolderContent.folderContentResources.resources-section {
    margin-top: -1% !important;
    padding: 0 20px 4rem 0 !important;
    width: calc(100% - 4px);
}



@media(min-width: 2430px) {
    .fpFolderContent.folderContentResources.resources-section {
        margin-top: -0.48% !important;
    }

}

    .fpFolderContent.folderContentResources.resources-section .fp_folderContentGrid.container {
        padding-left: 30px !important;
    }

    .fpFolderContent.folderContentResources.resources-section .fp_folderContentGrid .dxgvDataRow_MetropolisBlue td.dxgv {
        padding: 0 !important;
    }

.fp-page-content .flexpage-default-container,
.fp-page-content .fp_emails-templates-grid {
    padding: 16px !important;
}

.impersonate-section {
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    padding: 2rem 2.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
}


.folderContentResources.resources-section .fp_folderContentGrid .dxgvControl_MetropolisBlue, 
.folderContentResources.resources-section .fp_folderContentGrid .dxgvDisabled_MetropolisBlue,
.folderContentResources.resources-section .fp_folderContentGrid .dxgvTable_MetropolisBlue,
.folderContentResources.resources-section .fp_folderContentGrid .dxgvDataRowAlt_MetropolisBlue {
    background-color: transparent !important;
}

.folderContentResources.resources-section .fp_folderContentGrid .dxgvTable_MetropolisBlue tbody {
    display: flex;
    flex-direction: column;
    max-width: 900px;
}

.folderContentResources.resources-section .fp_folderContentGrid tr.dxgvDataRow_MetropolisBlue {
    display: block;
}

.folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
    padding: 0.8rem 0;
    transition: all 0.3s ease;
}

.folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink {
    padding: 0.8rem 0;
    transition: all 0.3s ease;
}
    .folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink span.fp_gridNameValue {
        display: block !important;
        flex:1;
        min-width:0;
        font-size: 1rem;
        font-weight: 400;
        font-family: "DM Sans", sans-serif;
        color: var(--text-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width:100%;
    }

    /* Hover effect */
    .folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink:hover span, 
    .folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink:hover::before {
        text-decoration: underline;
    }

    .folderContentResources.resources-section .fp_folderContentGrid a.gvDownloadLink::before {
        color: var(--text-light);
        flex-shrink: 0;
        font-size: 0.9rem !important;
        transition: transform 0.3s;
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url("/Content/Images/link-icon.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
.folderContentResources.resources-section .fp_folderContentGrid table,
.folderContentResources.resources-section .fp_folderContentGrid tbody,
.folderContentResources.resources-section .fp_folderContentGrid tr,
.folderContentResources.resources-section .fp_folderContentGrid td {
    display: block;
    width: 100%;
    border: none !important;
}


@media(max-width: 767px) {
    .fp_footer .footer-content {
        text-align: center;
    }
    .fp_footer .footer-content ul {
        margin-left: 0 !important;
    }

    .inner-addon.left-addon.search{
        display:none;
    }
}



.multicolumn-Layout{
    justify-self: center;
}
    .multicolumn-Layout #multicolumn-Layout > #multicolumn-col-Layout-1 {
        min-width: 67%;
    }

@media(min-width: 768px) {
    .multicolumn-Layout #multicolumn-Layout > #multicolumn-col-Layout-1 {
        -ms-flex-preferred-size: 67%;
        flex-basis: 67%;
        max-width: 67%;
        width: 67%;
    }
}
.multicolumn-Layout #multicolumn-Layout > #multicolumn-col-Layout-2 {
    min-width: 33%;
}

@media(min-width: 768px) {
    .multicolumn-Layout #multicolumn-Layout > #multicolumn-col-Layout-2 {
        -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
        max-width: 33%;
        width: 33%;
    }
}


/******************CMS Button custom css*******/
.red_button {
    color: #FF0000 !important;
}

.dsm_blue {
    font-size: 18px;
    color: #34C5F4 !important;
    font-weight: bold;
}

.dsm_green {
    font-size: 18px;
    color: #009999 !important;
    font-weight: bold;
}

.dsm_main {
    font-size: 20px;
    font-weight: bold;
    color: #2397D5 !important;
}



.form-control.search {
    width: 95% !important;
}
.btn.btn-default.search{
    background:none !important;
}

.inner-addon.left-addon.search {
    padding-right: 25px;
    margin-top: 7px;
    width:450px;
    }

    .inner-addon.left-addon.search .flexpage-blockWrapper.fpSearch {
        min-height: auto !important;
    }

        .inner-addon.left-addon.search .flexpage-blockWrapper.fpSearch .flexpage-block-container {
            min-height: auto !important;
            padding-bottom: 8px !important;
        }

    .inner-addon.left-addon.search .fp_searchWrapper .fp_searchResultsPopup {
        width: 100%;
    }

    .inner-addon.left-addon.search .fp_searchWrapper .fp_searchResults.fp_searchResultsPopup {
        min-width: 500px;
        position: fixed;
        width: min(500px, 100vw);
        left: auto;
    }
@media(max-width: 1290px) {
    .inner-addon.left-addon.search .fp_searchWrapper .fp_searchResults.fp_searchResultsPopup {
        right: 50px;
    }
    }
    /* ── Green h3 block inside CMS content ── */
    .cmscontent h3 {
        line-height: 1.5 !important;
        padding: 6px 0 !important;
        margin-bottom: 8px !important;
    }

.matrixwardenPrint {
    cursor: pointer;
    padding-bottom:8px;
    float:right;
}