:root {
     --primary: #003767;
     --secondary: #79bde8;
     --light-bg: #f8fafc;
     --border-color: #e5e7eb;
}
 h2,h3,h4,h5,h6{
     margin-top: 0rem !important;
}
/* ============================================================ SECTION UTILITIES ============================================================ */
 .section-title {
     font-size: 1.75rem;
     font-weight: 700;
     color: #003767;
     margin-bottom: 0.75rem;
}
 @media (min-width: 768px) {
     .section-title {
         font-size: 2rem;
    }
}
 .section-underline {
     width: 80px;
     height: 4px;
     background: #79bde8;
}
/* ============================================================ ABOUT SECTION ============================================================ */
 .about-content {
     color: #4a5568;
     line-height: 1.7;
}
 .about-content .lead {
     color: #003767;
     font-size: 1.125rem;
}
 .initiatives-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: 0.75rem;
}
 @media (min-width: 768px) {
     .initiatives-list {
         grid-template-columns: repeat(2, 1fr);
    }
}
 .initiatives-list li {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.5rem 0;
}
 .initiatives-list li i {
     color: #003767;
     font-size: 1.125rem;
     flex-shrink: 0;
}
/* ============================================================ RESOURCE CARDS ============================================================ */
 .resource-card {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     padding: 1.5rem;
     background: #ffffff;
     border: 2px solid #e5e7eb;
     border-radius: 0;
     color: inherit;
     transition: all 0.3s ease;
     text-align: left;
     appearance: none;
     -webkit-appearance: none;
     cursor: pointer;
}
 .resource-card:hover {
     border-color: #003767;
     box-shadow: 0 10px 25px -5px rgba(0, 55, 103, 0.15);
     transform: translateY(-4px);
}
 .card-overlay-link {
     position: absolute;
     inset: 0;
     z-index: 3;
     text-decoration: none;
     background: transparent;
     border: none;
     padding: 0;
     cursor: pointer;
}
 .resource-card .resource-icon, .resource-card .resource-title, .resource-card .resource-desc, .resource-card .resource-link {
     position: relative;
     z-index: 2;
}
 button.resource-card {
     cursor: pointer;
     appearance: none;
}
 .resource-icon {
     width: 56px;
     height: 56px;
     background: #e8f4fc;
     border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
}
 .resource-icon i {
     font-size: 1.5rem;
     color: #003767;
}
 .resource-title {
     font-size: 1.125rem;
     font-weight: 700;
     color: #003767;
     margin-bottom: 0.5rem;
}
 .resource-desc {
     font-size: 0.875rem;
     color: #6b7280;
     margin-bottom: 1rem;
     flex-grow: 1;
}
 .resource-link {
     font-size: 0.875rem;
     font-weight: 600;
     color: #003767;
     display: flex;
     align-items: center;
     gap: 0.5rem;
}
 .resource-card:hover .resource-link {
     color: #79bde8;
}
 .resource-card:hover .resource-link i {
     transform: translateX(4px);
}
 .resource-link i {
     transition: transform 0.3s ease;
}
/* ============================================================ LOCATION SECTION ============================================================ */
 .location-card {
     padding: 2rem;
     background: #ffffff;
     border: 2px solid #e5e7eb;
     border-radius: 0;
}
 .location-icon {
     width: 48px;
     height: 48px;
     background: #e8f4fc;
     border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .location-icon i {
     font-size: 1.25rem;
     color: #003767;
}
 .text-link {
     color: #003767;
     text-decoration: none;
     border-bottom: 1px solid #79bde8;
     transition: all 0.3s ease;
}
 .text-link:hover {
     color: #79bde8;
}
/* ============================================================ BUTTONS — sharp edges (no border-radius) ============================================================ */
 .btn-primary-custom {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     background: #003767;
     color: #ffffff;
     border: 2px solid #003767;
     border-radius: 0 !important;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
}
 .btn-primary-custom:hover {
     background: #79bde8;
     border-color: #79bde8;
     color: #003767;
}
 .btn-outline-custom {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     background: transparent;
     color: #003767;
     border: 2px solid #003767;
     border-radius: 0 !important;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
}
 .btn-outline-custom:hover {
     background: #003767;
     color: #ffffff;
}
/* Override Bootstrap's rounded corners on .btn */
 .btn {
     border-radius: 0 !important;
}
/* ============================================================ PARTNERS IN PREVENTION BOX ============================================================ */
 .pip-box {
     border: 2px solid #003767;
     padding: 2rem;
     background: #f0f6fc;
}
 .pip-box-label {
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #79bde8;
}
 .pip-box-title {
     font-size: 1.25rem;
     font-weight: 700;
     color: #003767;
}
 .pip-box-desc {
     font-size: 0.9rem;
     color: #4a5568;
     line-height: 1.7;
}
/* ============================================================ MODALS — sharp edges ============================================================ */
 .modal-content {
     border: none;
     border-radius: 0 !important;
}
 .modal-header {
     border-bottom: 2px solid #e5e7eb;
     padding: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
}
 .modal-icon {
     width: 48px;
     height: 48px;
     background: #e8f4fc;
     border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .modal-icon i {
     font-size: 1.25rem;
     color: #003767;
}
 .modal-title {
     font-weight: 700;
     color: #003767;
     margin: 0;
}
 .modal-body {
     padding: 1.5rem;
     color: #4a5568;
     line-height: 1.7;
}
/* ============================================================ BACKGROUND / BORDER UTILITIES ============================================================ */
 .bg-light {
     background-color: var(--light-bg) !important;
}
 .border-top {
     border-top-color: #e5e7eb !important;
}