section.static .container { padding: 60px 0; }
section.static p { padding: 20px 21%; line-height: 170%; }
#hero h1 { text-align: left; }
#hero p { font-weight: 600; text-align: left; }
#hero .flex > div { padding-right: 18%; }
#hero .container > .flex { flex-direction: column; gap: 20px; align-items: flex-start; }
#headline { background: var(--green); color: white; padding: 40px 0; }
#headline > .flex { justify-content: space-around; gap: 0; padding: 0 20px; }
#headline .flex > .flex { gap: 20px; flex: 25%; justify-content: flex-start; padding-right: 40px; }
#headline p { font-weight: 600; padding: 0; margin: 0; text-align: left; }
#teambuilding { background: url("/modules/main/images/image_01.jpg"); background-size: cover; background-position: center center; color: white; }
#motivation { background: url("/modules/main/images/image_02.jpg"); background-size: cover; background-position: center center; color: white; }

.popup { position: fixed; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; padding: 30px 46px; background: rgba(255,255,255,0.9); backdrop-filter: blur(2px); box-shadow: 0 0 30px rgba(0,0,0,0.2); border-radius: 20px; }
.popup h4 { font-size: 32px; font-weight: bold; }
.popup span.green { color: var(--green); font-weight: bold; }
.popup .close { position: absolute; padding: 16px; top: 10px; right: 10px; width: 18px; height: 18px; background: #aaa; -webkit-mask-image: url("/libraries/Feather/x.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 18px; cursor: pointer; }

@media (max-width: 1440px) { 
section.static .container { padding: 40px 0; }
#hero img { width: 580px; }
#headline > .flex { padding: 0 60px; }
}

@media (max-width: 1280px) { 
section.static .container { padding: 20px 0; }
#hero .flex > div { padding-right: 80px; }
#headline > .flex { padding: 0 40px; }
}

@media (max-width: 1024px) { 
section.static p { padding: 10px 20px; }
#hero .container.flex { flex-wrap: wrap; gap: 40px; }
#hero img { width: 46%; min-width: 300px; }
#hero .flex > div { padding-right: 0px; }
#hero br { display: none; }
#headline > .flex { flex-wrap: wrap; gap: 20px; align-content: center; padding: 0 20px; }
#headline .flex > .flex { padding-right: 0; min-width: 35%; }
#headline img { height: 46px; }
.popup { max-width: 100%; width: 90%; }
}