/**
 * Plastik Re-produkt - Main Stylesheet
 * Design based on mockups with teal/green color scheme
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
    /* Colors */
    --color-primary: #00A896;
    --color-primary-dark: #008B8B;
    --color-primary-light: #02C39A;
    --color-secondary: #7B2CBF;
    --color-accent: #FFB703;

    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg: #FFFFFF;
    --color-bg-light: #F8F9FA;
    --color-bg-dark: #E9ECEF;

    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-warning: #FFC107;

    /* Typography */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Container */
    --container-max-width: 1200px;
}

/* ============================================
   Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Utility Classes */
.d-none {
    display: none !important;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ============================================
   Container
   ============================================ */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================
   Topbar
   ============================================ */
.topbar {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.topbar-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.topbar-contact {
    display: flex;
    gap: 1.5rem;
}

.topbar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-base);
}

.topbar-link:hover {
    color: var(--color-primary);
}

.topbar-link svg {
    flex-shrink: 0;
}

/* ============================================
   Header
   ============================================ */
.site-header {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all var(--transition-base);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    min-height: 70px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: var(--color-text);
    font-weight: 400;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    transition: color var(--transition-base);
    position: relative;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: 500;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background-color: var(--color-primary);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition-base);
}

/* ============================================
   Hero Sections
   ============================================ */
.hero-section {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mobile: flexible height */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
        height: auto;
    }
}

.hero-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile: ensure image fills container */
@media (max-width: 768px) {
    .hero-image {
        min-height: 60vh;
        object-fit: cover;
    }
}

/* Quote Bubble */
.hero-quote-bubble {
    position: absolute;
    top: 170px;
    left: 200px;
    z-index: 10;
    width: 400px;
    height: 360px;
}

.quote-bubble-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.quote-content {
    position: absolute;
    z-index: 2;
    padding: 90px 80px;
    color: white;
    width: 600px;
}

.quote-mark {
    position: absolute;
    top: 50px;
    left: 80px;
}

.quote-text {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-style: italic;
}

.quote-author {
    font-size: 0.95rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.9;
}

/* Funding Logo */
.hero-funding-logo {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 2000;
}

.hero-funding-logo img {
    max-width: 350px;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.funding-overlay-btn {
    position: absolute;
    top: 15px;
    left: 18px;
    width: 20px;
    height: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 11;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: bounce 2s ease-in-out infinite;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity var(--transition-base);
}

.scroll-indicator:hover {
    opacity: 1;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

.page-hero {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-xxl) 0 var(--spacing-xl) 0;
    text-align: center;
    color: white;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.95;
}

/* ============================================
   Sections
   ============================================ */
section {
    padding: 0;
    margin: 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-dark);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
}

/* ============================================
   Circular Economy Section
   ============================================ */
.circular-economy-section {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden;
}

/* Mobile: reduce padding */
@media (max-width: 768px) {
    .circular-economy-section {
        padding: var(--spacing-lg) 0;
    }
}

.circular-economy-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background-image: url('../../../design/re-CUP/kavics_korvonal_terkep.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.1;
    z-index: 0;
}

.economy-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.economy-diagram {
    position: relative;
}

.economy-diagram svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.economy-content {
    padding-right: 20px;
    padding-left: 20px;
    text-align: right;
    position: relative;
    z-index: 2;
}

.economy-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #005B52;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.economy-subtitle {
    font-size: 1.4rem;
    color: #26C4B5;
    margin-bottom: 30px;
    font-weight: 400;
}

.economy-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 20px;
}

.btn-economy-more {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #005B52;
    border: 2px solid #005B52;
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--transition-base);
    letter-spacing: 0.5px;
}

.btn-economy-more:hover {
    background-color: #005B52;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 91, 82, 0.3);
}

/* Circular Economy Content Boxes */
.circular-box {
    padding: 2.5rem;
    border-radius: 20px;
    color: white;
    min-height: 450px;
    transition: all 0.5s ease;
}

.circular-box .d-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-box img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.circular-box h4 {
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.circular-box h5 {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
}

.circular-box .text-muted-white {
    color: rgba(255, 255, 255, 0.95);
}

.circular-box .btn-primary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.circular-box .btn-primary:hover {
    background-color: white;
    color: #005B52;
    transform: translateY(-2px);
}

/* Animation Classes */
.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

/* CE Icon Styles */
.ce-icon {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    /* Make icons white for diagram overlay */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ce-icon:hover {
    transform: scale(1.1);
    filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
    opacity: 1;
}

/* ============================================
   Materials Section
   ============================================ */
/* ============================================
   Materials Section
   ============================================ */
.materials-section {
    background-color: var(--color-bg-dark);
    /* Light gray per mock */
    padding: var(--spacing-xxl) 0;
}

.materials-section .section-title {
    color: #005B52;
    text-transform: uppercase;
    font-size: 2.5rem;
    margin-bottom: 5px;
    text-align: center;
}

.materials-section .section-subtitle {
    color: #26C4B5;
    font-size: 1.1rem;
    margin-bottom: 80px;
    text-align: center;
    font-weight: 400;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
}

.material-card {
    display: flex;
    align-items: center;
    gap: 30px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.material-card:hover {
    /* Remove default hover */
    transform: none;
    box-shadow: none;
}

.material-visual {
    position: relative;
    width: 250px;
    height: 250px;
    flex-shrink: 0;
}

.material-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.material-overlay {
    position: absolute;
    top: -2px;
    /* Adjust for perfect fit */
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
    z-index: 2;
}



.material-info h3 {
    color: #00A896;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.material-info h3 .subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    color: #999;
}

.material-info p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 300px;
}

.btn-request {
    display: inline-block;
    padding: 8px 30px;
    border: 1px solid #777;
    border-radius: 20px;
    color: #555;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #E0E7E6;
    transition: all 0.3s ease;
}

.btn-request:hover {
    background-color: #005B52;
    color: white;
    border-color: #005B52;
}

/* ============================================
   Programs Section
   ============================================ */
.programs-section {
    background-color: var(--color-bg-light);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.program-card {
    background-color: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.program-logo {
    width: 150px;
    height: auto;
    margin: 0 auto var(--spacing-md);
}

.program-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-dark);
}

.program-card p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   Team Section
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
}

.team-member {
    text-align: center;
}

.member-photo {
    position: relative;
    width: 257px;
    height: 257px;
    margin: 0 auto var(--spacing-md);
    border-radius: 50%;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-member h3 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary-dark);
}

.member-title {
    color: var(--color-text-light);
    font-weight: 500;
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.cta-content p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    text-decoration: none;
}

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

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: white;
}

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

.btn-light:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary-dark);
}

/* ============================================
   Forms
   ============================================ */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

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

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-bg-dark);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition-base);
}

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

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background-color: var(--color-primary-dark);
    color: white;
    padding: var(--spacing-xxl) 0 var(--spacing-md);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-logo {
    max-width: 180px;
    margin-bottom: var(--spacing-md);
}

.footer-tagline {
    opacity: 0.9;
    line-height: 1.6;
}

.footer-title {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    color: white;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: white;
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.footer-social {
    margin-top: var(--spacing-md);
}

.footer-social .social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform var(--transition-base);
}

.social-link:hover {
    transform: scale(1.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-funding {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.footer-funding img {
    max-height: 80px;
    width: auto;
}

.footer-copyright {
    text-align: right;
    opacity: 0.8;
}

.footer-copyright p {
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

/* ============================================
   Scroll to Top Button
   ============================================ */
.scroll-to-top {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 999;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-3px);
}

/* ============================================
   404 Error Page
   ============================================ */
.error-content {
    text-align: center;
    padding: var(--spacing-xxl) 0;
}

.error-icon {
    color: var(--color-primary);
    margin: 0 auto var(--spacing-lg);
}

.error-message h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.error-message p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.error-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.helpful-links {
    margin-top: var(--spacing-xl);
}

.helpful-links h3 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-dark);
}

.helpful-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.helpful-links a {
    color: var(--color-primary);
    font-weight: 500;
}

/* ============================================
   Winning Grants Section
   ============================================ */
.winning-grants-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    color: white;
}

.grants-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../../design/Webdesign elemek/palyazataink_hatter_1920x1230px.jpg');
    background-size: cover;
    background-position: center;
    /* filter: brightness(0.6) sepia(1) hue-rotate(130deg) saturate(2); removed as per user request */
    z-index: 1;
}

.winning-grants-section .container {
    position: relative;
    z-index: 2;
}

.winning-grants-section .section-title {
    color: white;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Slider Layout */
.grants-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 20px;
}

.grants-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 20px;
    /* Space for scrollbar if visible */
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.grants-slider::-webkit-scrollbar {
    display: none;
}

.grant-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    max-width: 600px;
    /* Adjust based on design preference */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (min-width: 992px) {
    .grant-slide {
        flex: 0 0 calc(50% - 15px);
        /* Show 2 slides on large screens */
        scroll-snap-align: start;
    }
}

.grant-card-image {
    background-color: white;
    padding: 20px;
    /* White border effect around the board image */
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.grant-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.grant-content {
    /* Text is directly on the background */
    text-align: left;
    padding: 0 10px;
}

.grant-content h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.4;
    color: white;
}

.grant-content p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 20px;
    font-weight: 300;
}

.grant-content .btn-details {
    display: inline-block;
    padding: 8px 25px;
    border: 1px solid white;
    border-radius: 20px;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.grant-content .btn-details:hover {
    background-color: white;
    color: #005B52;
}

/* Navigation Buttons */
.slider-nav {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.slider-nav:hover {
    transform: scale(1.2);
}

.slider-nav svg {
    width: 40px;
    height: 40px;
    stroke-width: 3;
}

/* ============================================
   About Us (Rólunk) Section
   ============================================ */
.about-section {
    background-color: #005B52;
    /* Dark Teal */
    color: white;
    padding: 100px 0;
    overflow: hidden;
}

.about-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin-bottom: 100px;
}

.about-block:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .about-block {
        flex-direction: row;
        align-items: flex-start;
        /* Align top? or center? Text seems long, so maybe top or center */
    }

    .about-block.reverse {
        flex-direction: row-reverse;
    }

    .about-text,
    .about-image {
        flex: 1;
        width: 50%;
    }

    .about-text {
        padding-right: 40px;
    }

    .about-block.reverse .about-text {
        padding-right: 0;
        padding-left: 40px;
    }
}

.about-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.2;
}

.about-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 300;
}

.about-content strong {
    font-weight: 700;
    color: white;
}

.about-quote {
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 30px 0;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.about-quote-large {
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 30px 0;
    line-height: 1.6;
}

.quote-footer {
    text-align: right;
    font-weight: 600;
    margin-bottom: 5px !important;
}

.quote-source {
    text-align: right;
    font-size: 0.8rem !important;
    opacity: 0.7 !important;
}

.about-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image .img-fluid {
    width: 100%;
    /* Or auto with max-width */
    height: auto;
    max-width: 600px;
}

.think-green-logo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    /* Adjust size relative to parent */
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.text-right {
    text-align: right;
}

/* Adjustments for text alignment in blocks */
.about-block.reverse .about-text {
    text-align: right;
}

.about-block.reverse .about-quote {
    text-align: right;
}

/* Headings inside content */
.about-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 30px 0 15px;
    text-transform: uppercase;
}

/* Fixes for About Us Section Layout */

/* Position Bales image at bottom-left */
.about-section {
    padding-bottom: 0;
    /* Allow image to touch bottom */
}

.about-block.reverse {
    align-items: flex-end;
    /* Align image to bottom */
    margin-bottom: 0;
}

.about-block.reverse .about-image {
    position: relative;
    margin-left: -260px;
    margin-bottom: -192px;
    /* Push to very bottom to fix gaps */
    z-index: 1;
}

.about-block.reverse .about-image img.img-fluid {
    display: block;
    width: 100%;
    max-width: 800px;
    /* Allow it to be larger */
}

/* Position Think Green Logo at top-right of the bales image */
.about-block.reverse .think-green-logo {
    position: absolute;
    top: 15%;
    right: 15%;
    bottom: auto;
    left: auto;
    width: 25%;
    transform: translate(30%, -30%);
    /* Fine tune overlap */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

/* Ensure text is above image if overlap */
.about-block.reverse .about-text {
    z-index: 2;
    position: relative;
    padding-bottom: 80px;
    /* Add spacing at bottom since section padding is gone */
}

/* Fix for About Us Block 1 Text Width */
@media (min-width: 992px) {
    .about-block:first-child .about-text {
        width: 60%;
        flex: 0 0 60%;
        margin-left: -20px;
        /* Slight pull to left as requested "less margin at left" */
    }

    .about-block:first-child .about-image {
        width: 40%;
        flex: 0 0 40%;
    }
}

/* ============================================
   Contact Us Section
   ============================================ */
.contact-section {
    background-color: #005B52;
    /* Match About section */
    color: white;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Reusing grid concept or specific layout */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
}

@media (min-width: 992px) {
    .contact-grid {
        flex-direction: row;
        gap: 80px;
    }

    .contact-info,
    .contact-form-wrapper {
        flex: 1;
    }
}

/* Contact Info Styles */
.contact-company-name {
    font-size: 1.5rem;
    font-weight: 700;
}

.contact-details {
    margin-top: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.icon-wrapper {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
}

.details-text .label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 2px;
}

.details-text .value {
    font-size: 1rem;
    font-weight: 600;
}

.follow-us-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon img {
    /*border-radius: 50%;*/
    /*transition: transform 0.2s;*/
    /*background: white;*/
    /*!* Icons in design seem to have white bg *!*/
    /*padding: 2px;*/
    /* Add padding if needed */
}

.social-icon:hover img {
    transform: scale(1.1);
}

/* Contact Form Styles */
.form-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.form-desc {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 1.4;
}

.form-group {
    margin-bottom: 15px;
}

.contact-form .form-control {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    /* Rounded corners */
    font-size: 0.95rem;
    color: #333;
    background-color: white;
}

.contact-form textarea.form-control {
    resize: vertical;
}

.contact-form .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn-submit {
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid white;
    border-radius: 30px;
    /* Pill shape */
    background: transparent;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    font-size: 0.9rem;
}

.btn-submit:hover {
    background-color: white;
    color: #005B52;
}

/* Placeholder color */
.contact-form .form-control::placeholder {
    color: #999;
    opacity: 1;
}

/* Styling for contact links */
.contact-item a.value {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.contact-item a.value:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ============================================
   Footer Strip Redesign
   ============================================ */
.footer-strip {
    display: flex;
    width: 100%;
    min-height: 80px;
    background: white;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    /* Attach to contact section if needed, or margin */
}

/* Ensure no gap if contact section has padding */
/* Contact section had padding-bottom: 80px. You might want to reduce it or keep it. */

.footer-left {
    width: 25%;
    background-color: #2CA58D;
    /* Teal match logo shape */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 40px;
    border-top-right-radius: 80px;
    /* Stronger curve */
    border-bottom-right-radius: 80px;
    position: relative;
    z-index: 2;
}

.footer-strip-logo {
    height: 40px;
    filter: brightness(0) invert(1);
    /* Make logo white */
}

.footer-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.8rem;
    text-align: center;
    padding: 0 20px;
    z-index: 1;
    white-space: nowrap;
    /* Keep on one line if possible */
}

.footer-center p {
    margin: 0;
}

.footer-center a {
    color: #999;
    text-decoration: none;
    margin: 0 5px;
}

.footer-right {
    width: 25%;
    background-color: #9E9E9E;
    /* Gray */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 40px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    color: white;
    font-size: 0.8rem;
    position: relative;
    z-index: 2;
}

.footer-right p {
    margin: 0;
}

.footer-right strong {
    font-weight: 700;
}

@media (max-width: 992px) {
    .footer-strip {
        flex-direction: column;
        height: auto;
        padding: 20px 0;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        border-radius: 0;
        padding: 20px;
        justify-content: center;
    }

    .footer-center {
        padding: 20px;
        white-space: normal;
    }
}

/* Footer Refinements for Bisnode and SVG Shapes */

/* Remove old background colors/radius */
.footer-left,
.footer-right {
    background-color: transparent;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    /* Ensure SVG doesn't overflow */
}

/* SVG Shape Styling */
.footer-shape {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    /* Stretch to fill container */
    z-index: 0;
}

.shape-left {
    left: 0;
    transform: scaleX(-1);
    /* Flip to have curve on right */
    fill: #2CA58D;
}

.shape-right {
    right: 0;
    fill: #9E9E9E;
}

/* Ensure content is above shape */
.footer-strip-logo,
.footer-right p {
    position: relative;
    z-index: 1;
}

/* Adjust Center Section */
.footer-center {
    justify-content: space-between;
    /* Separate Text and Bisnode */
    padding: 0 40px;
    /* Add spacing */
    gap: 20px;
}

.copyright-text {
    text-align: right;
    flex: 1;
}

.copyright-text p {
    margin: 0;
}

.bisnode-logo-wrapper {
    flex: 0 0 auto;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .footer-center {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .copyright-text {
        text-align: center;
    }

    /* Adjust shape height on mobile if needed */
    .footer-left,
    .footer-right {
        min-height: 80px;
    }
}

/* Fix for Bisnode Image Size */
.bisnode-logo-wrapper img {
    height: 55px !important;
    width: auto !important;
    /*max-width: 150px;*/
}

/* Ensure footer doesn't expand uncontrollably */
.footer-strip {
    height: auto;
    min-height: 80px;
    align-items: center;
    /* Vertically align items */
}

/* Adjust shape z-index if needed */
.footer-shape {
    z-index: 0;
}

/* Update Footer Layout for Cropped Shapes */

.footer-left,
.footer-right {
    flex: 0 0 auto;
    /* Do not stretch, fit content */
    width: auto;
    padding: 0 60px;
    /* Add padding to approximate +15% width around text */
    min-width: 0;
    /* Allow shrinking if needed */
}

/* Ensure Logo and Text have space */
.footer-strip-logo {
    margin: 0 10px;
    /* Slight margin if needed */
}

/* Update center to take available space */
.footer-center {
    flex: 1;
}

/* Ensure SVG covers the container properly with slice */
.footer-shape {
    height: 100%;
    width: 100%;
    /* No object-fit for SVG, handled by preserveAspectRatio */
}

/* Update Footer Layout for Full Height Stretch */

.footer-strip {
    align-items: stretch;
    /* Stretch children to full height */
    padding: 0;
    /* Remove padding from container */
}

.footer-left,
.footer-right {
    padding: 0 40px;
    /* Keep horizontal padding for content */
    display: flex;
    align-items: center;
    /* Vertically center content */
    justify-content: center;
}

/* Ensure SVG covers exactly */
.footer-shape {
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
}

/* Center Copyright Text */
.copyright-text {
    text-align: center !important;
    /* Use !important or ensure specificity overrides previous rule */
}

/* Transparent Header (Homepage) */
.site-header.header-transparent {
    background-color: transparent;
    box-shadow: none;
    position: absolute;
    /* Overlay on hero */
    width: 100%;
    border-bottom: none;
}

/* White Text on Transparent Header */
.header-transparent .nav-link {
    color: white;
}

.header-transparent .nav-link:hover {
    color: var(--color-accent);
    /* or primary-light */
    opacity: 0.9;
}

/* Adjust Topbar if needed */
/* If topbar is above header, header-transparent absolute might overlap content below topbar 
   unless topbar is also styled or part of the flow.
   Usually Home transparent header involves Topbar being transparent or hidden? 
   Let's keep Topbar as is for now, but if Header is absolute, it starts at 0 relative to parent.
   If Topbar is static, Header starts AFTER Topbar? No, absolute is relative to nearest positioned ancestor (body/html).
   So Header will jump to top of screen. Topbar might be covered or behind.
   We might need to make Topbar absolute too, or just accept Header is below text? 
   Actually, usually Header is absolute, top: 0. Topbar might be overlay too.
*/

/* Let's try handling Topbar on Home */
/* Assuming Topbar stays at top, Header is below it? */
/* If Header is absolute top:0, it covers Topbar. */
/* We might want top: 40px (height of topbar)? */

.header-transparent {
    top: 0;
    /* Or adjust based on topbar */
}

/* If Topbar exists, we might want to hide it on Home, or make it transparent too? */
/* I'll hide topbar on Home for cleaner look if design dictates, but keeping it safe: */
/* Let's see. If .site-header is absolute, it overlaps context. */
/* Standard/Inner Page Header (Default) */
.site-header:not(.header-transparent) {
    background-color: white;
    /* Solid white background */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    position: relative;
    /* Normal flow or sticky */
    /* top: 0; sticky is defined in base styles */
}

.site-header:not(.header-transparent) .nav-link {
    color: var(--color-text);
    /* Dark text */
}

.site-header:not(.header-transparent) .nav-link:hover {
    color: var(--color-primary);
    /* Primary color on hover */
}

/* Active Home Link Styling */
.nav-link.nav-home-active {
    background-color: #f4f4f4;
    /* Light grey background */
    color: var(--color-primary);
    /* Teal text */
    padding: 10px 20px;
    border-radius: 4px;
    /* Optional rounded corners */
    font-weight: 600;
}

/* Ensure hover state is handled nicely */
.nav-link.nav-home-active:hover {
    background-color: #e0e0e0;
    color: var(--color-primary-dark);
}

.footer .logo {
    background-image: url(data:image/png;base64,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);
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
}

.footer .copyright h6 {
    font-size: 11px;
}

.footer .powered-by {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMjBweCIgaGVpZ2h0PSIxNjBweCIgdmlld0JveD0iMCAwIDMyNC4zMzMgMjkxLjY2NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzI0LjMzMyAyOTEuNjY3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBpZD0ia2F2aWNzX2FsYWtfNDZfIiBmaWxsPSIjQjNCM0IzIiBkPSJNNDQuMjQsNDYuMzc4QzIwLjc2Miw2My4xMTcsMy43MDMsODYuNjA4LDEuMTksMTIwLjExMQoJYy0xLjIyNywxNi4zMzksMy42NjIsMzIuNDk2LDkuNDE5LDQ3LjgzNmMxMy4xNzIsMzUuMTE0LDMyLjc1LDg2LjQ0Myw2Ni40MDIsMTA2LjM0M2MxNC45NDcsOC44NDIsMzIuNjczLDExLjQ0MSw0OS45MzUsMTMuMzM4CgljNTcuMTA4LDYuMjcyLDExOS43MDgsNS41MDcsMTU2LjUzOC00NS41NTRjMTguNjA4LTI1Ljc5NSwyNy43NTQtNTcuMTgyLDMzLjkxOC04OC4zODVjOC4xNjQtNDEuMzIsMTIuMzE2LTkyLjcxNi0xOS4yNzUtMTI1LjcyOQoJQzI2MS4yMjgtMTAuNjEzLDE4OC4yMDEsMC44ODQsMTQxLjQzNiw5LjkxOUMxMDkuMDUxLDE2LjE3LDcyLjEyMywyNi41MTEsNDQuMjQsNDYuMzc4Ii8+Cjwvc3ZnPgo=);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 286px;
    font-size: 11px;
    padding-left: 20px;
    padding-right: 20px;
}

#circular .ce {
    height: 330px;
    width: 100%;
    overflow: hidden;
}