/* ===================================================== ES GmbH Website style.css ===================================================== */ :root{ --primary:#0B3C6F; --primary-light:#4DA8DA; --secondary:#EAF6FD; --text:#233142; --white:#ffffff; --shadow:0 12px 35px rgba(0,0,0,.08); --radius:14px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Inter',sans-serif; color:var(--text); background:#fff; line-height:1.7; } .container{ width:min(1140px,92%); margin:auto; } /* =========================== HEADER =========================== */ header{ position:fixed; top:0; left:0; right:0; background:white; box-shadow:0 2px 12px rgba(0,0,0,.05); z-index:999; } header .container{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; } .logo{ font-size:1.8rem; font-weight:700; color:var(--primary); } .logo span{ color:var(--primary-light); } nav ul{ display:flex; list-style:none; gap:32px; } nav a{ text-decoration:none; color:var(--primary); font-weight:600; transition:.3s; } nav a:hover{ color:var(--primary-light); } /* =========================== HERO =========================== */ .hero{ padding:160px 0 100px; background:linear-gradient(135deg,#ffffff 0%,#EAF6FD 100%); } .hero-content{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; } .hero h1{ font-size:3.4rem; line-height:1.15; color:var(--primary); margin-bottom:30px; } .hero p{ font-size:1.1rem; margin-bottom:40px; } .hero-image img{ width:100%; max-width:520px; display:block; margin:auto; } /* =========================== BUTTONS =========================== */ .btn{ display:inline-block; background:var(--primary); color:white; text-decoration:none; padding:16px 34px; border-radius:50px; font-weight:600; transition:.35s; } .btn:hover{ background:var(--primary-light); transform:translateY(-3px); } .white{ background:white; color:var(--primary); } .white:hover{ background:#f3f8fb; } /* =========================== SECTIONS =========================== */ section{ padding:90px 0; } section h2{ font-size:2.2rem; text-align:center; margin-bottom:25px; color:var(--primary); } section> .container> p{ max-width:850px; margin:auto; text-align:center; } /* =========================== CARDS =========================== */ .cards{ margin-top:55px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; } .card{ background:white; border-radius:var(--radius); padding:35px; box-shadow:var(--shadow); transition:.3s; } .card:hover{ transform:translateY(-8px); } .card h3{ color:var(--primary); margin-bottom:14px; } /* =========================== CTA =========================== */ .cta{ background:linear-gradient(135deg,var(--primary),#154F90); color:white; text-align:center; } .cta h2{ color:white; } .cta p{ margin:25px 0 40px; } /* =========================== CONTACT =========================== */ .contact-box{ max-width:620px; margin:40px auto 0; background:white; padding:45px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; } .contact-box p{ margin:18px 0; font-size:1.15rem; } .contact-box a{ color:var(--primary); text-decoration:none; font-weight:600; } .contact-box a:hover{ color:var(--primary-light); } /* =========================== FOOTER =========================== */ footer{ background:#082544; color:white; text-align:center; padding:35px 0; } footer a{ color:#9edcff; text-decoration:none; } footer a:hover{ color:white; } /* =========================== ANIMATION =========================== */ .card, .hero-image img, .contact-box{ transition:all .35s ease; } /* =========================== RESPONSIVE =========================== */ @media (max-width:900px){ .hero-content{ grid-template-columns:1fr; text-align:center; } .hero h1{ font-size:2.5rem; } nav ul{ gap:18px; } } @media (max-width:700px){ header .container{ flex-direction:column; gap:15px; } nav ul{ flex-wrap:wrap; justify-content:center; } .hero{ padding-top:190px; } .hero h1{ font-size:2rem; } section{ padding:70px 0; } .card{ padding:28px; } .contact-box{ padding:28px; } }