.greenheader { background: #4D9242; /*background: linear-gradient(135deg, #388e3c 0%, #81c784 100%);*/ background: linear-gradient(135deg, #eaf5e9 0%, #f5f9f4 100%); color: #222; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 0 0 12px 12px; display: flex; align-items: center; min-height: 190px; } .greenheader .logo-left, .greenheader .logo-right { flex: 0 0 auto; margin: 0; padding: 20px; } .greenheader .logo-left img, .greenheader .logo-right img { width: 150px; height: auto; display: block; } .greenheader .hero-context { /*flex: 1 1 auto;*/ flex: 1; text-align: center; margin: 0; padding: 20px; } .greenheader h1 { color: #2e7d4c; font-size: 3em; margin: 0 auto 20px auto; } .greenheader p { color: #222; font-size: 1.3em; font-weight: 500; max-width: 600px; margin: 0 auto; } @media (max-width: 768px) { .greenheader { flex-wrap: wrap; } .greenheader .logo-left, .greenheader .logo-right { flex: 0 0 50%; display: flex; justify-content: center; } .greenheader .logo-left img, .greenheader .logo-right img { max-width: 50%; } .greenheader .hero-context { flex: 0 0 100%; order: 2; } } .section { margin-top: 60px; background: #ffffffcc; border-radius: 12px; padding: 30px 40px; box-shadow: 0 6px 15px rgba(50, 150, 50, 0.1); transition: box-shadow 0.3s ease; } .section:hover { box-shadow: 0 8px 25px rgba(50, 150, 50, 0.25); } .section h2 { color: #2e7d32; border-bottom: 3px solid #81c784; padding-bottom: 10px; margin-bottom: 25px; font-size: 2em; letter-spacing: 1.5px; } .green-projects-list { width: 100%; display: grid; /*flex-wrap: wrap;*/ /*grid-template-columns: repeat(auto-fit, 280px);*/ grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); gap: 25px; justify-content: center; /*justify-content: space-between;*/ } .green-project-card { /*flex: 1 1 clamp(250px, 300px, 350px);*/ /*display: flex;*/ /*flex-direction: column;*/ background-color: #a5d6a7; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); width: 100%; /*flex: 1 1 280px;*/ /*max-width: 350px;*/ /*width: clamp(250px, 300px, 350px);*/ color: #1b5e20; overflow: hidden; transition: transform 0.3s ease; } .green-project-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); color: #1b5e20; text-decoration: none; } .green-project-card img { width: 100%; height: 180px; object-fit: cover; border-bottom: 3px solid #2e7d32; } .green-project-card-content { padding: 15px 20px; flex-grow: 1; } .green-project-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.4em; } .green-project-card p { font-size: 1em; color: #2e4a2e; line-height: 1.4; } .green-meter-container { display: flex; flex-wrap: wrap; gap: 20px; /*justify-content: space-between;*/ } .green-meter-section { background-color: #f2fdf4; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); height: 150px; flex-shrink: 3; padding: 5px; width: 150px; flex: auto; } .green-meter-counter { margin-top: 5px; text-align: center; font-size: 22px; font-weight: bold; color: #295e21; } .green-meter-icon { margin-top: 5px; text-align: center; font-size: 36px; } .green-meter-title { margin-top: 5px; text-align: center; color: #727472; } .green-achievements-block { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 16px; } .green-achievements-block img { width: clamp(100px, 18vw, 150px); height: auto; display: block; } .green-news-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; } .green-news-block { display: flex; width: clamp(300px, 500px, 600px); gap: 16px; color: #222; text-decoration: none; } #scroller { position: relative; } #scroller .innerScrollArea { overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #scroller ul { padding: 0; margin: 0; position: relative; } #scroller li { padding: 0 30px; margin: 0; list-style-type: none; position: absolute; } #scroller img { height: 60px; }