:root {
    --primary-color: #005f69;
    --accent-color: #f47e21;
    --accent-color-hover: #c56115;
    --text-color: #333;
    --light-color: #fff;
    --border-radius: 10px;
    --box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.12);
    --transition: all 0.3s ease;
    --font-family-primary: 'SVN-Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-primary);
    color: var(--primary-color);
}

body {
    font-family: var(--font-family-primary);
    color: var(--text-color);
    overflow-x: hidden;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}


/* Prevent FOUC (Flash of Unstyled Content) */
body.loading {
    opacity: 0;
    visibility: hidden;
}

body.loaded {
    opacity: 1;
    visibility: visible;
}


/* Ensure SDG icons and organizer logos maintain square aspect ratio */
.category-icon, .organizer-logo,
.category-icon img, .organizer-logo img {
    display: block;
    object-fit: contain;
    object-position: center;
    aspect-ratio: 1/1;
}

html {
    scroll-behavior: smooth;
}

.mark {
    color: #000;
    background: #fafa55;
    text-decoration: none;
    padding: 0 .25em .15em;
}