/* =========================
   BASIS
========================= */

*{

margin:0;
padding:0;

box-sizing:border-box;

font-family:

Arial,sans-serif;

}


body{

background:#fff;

color:#222;

line-height:1.7;

overflow-x:hidden;

}



.container{

width:90%;

max-width:1200px;

margin:auto;

}



/* =========================
   HEADER
========================= */

.header{

background:white;

border-bottom:

1px solid #eee;

padding:20px 0;

position:sticky;

top:0;

z-index:999;

}



.nav{

display:flex;

justify-content:space-between;

align-items:center;

}



/* =========================
   LOGO
========================= */

.logo{

text-decoration:none;

}



.logo-text{

display:flex;

flex-direction:column;

}



.logo-text strong{

font-size:36px;

letter-spacing:2px;

color:#163a66;

}



.logo-text small{

font-size:14px;

color:#666;

margin-top:4px;

}



/* =========================
   NAVIGATION
========================= */

nav ul{

display:flex;

gap:40px;

list-style:none;

}



nav a{

text-decoration:none;

font-weight:600;

color:#222;

transition:.3s;

}



nav a:hover{

color:#163a66;

}



/* =========================
   HERO
========================= */

.hero{

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("../images/hero.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

min-height:85vh;

display:flex;

align-items:center;

padding:120px 0;

color:white;

}



.hero h1{

font-size:82px;

font-weight:300;

line-height:1.1;

max-width:800px;

margin-bottom:30px;

color:white;

}



.hero p{

font-size:28px;

max-width:700px;

color:white;

}



.button{

display:inline-block;

margin-top:40px;

padding:

18px 36px;

background:#163a66;

color:white;

text-decoration:none;

border-radius:6px;

transition:.3s;

}



.button:hover{

background:#0f223d;

}



/* =========================
   CARDS
========================= */

.cards{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(280px,1fr)
);

gap:35px;

padding:100px 0;

}



.card{

background:white;

overflow:hidden;

border-radius:12px;

box-shadow:

0 10px 30px
rgba(0,0,0,.08);

transition:.3s;

}



.card:hover{

transform:

translateY(-6px);

}



.card img{

width:100%;

height:250px;

object-fit:cover;

display:block;

}



.card h3{

padding:

25px 25px 10px;

font-size:24px;

}



.card p{

padding:

0 25px 30px;

color:#555;

}



/* =========================
   ABOUT
========================= */

.about{

display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

padding:120px 0;

align-items:center;

}



.about img{

width:100%;

height:500px;

object-fit:cover;

border-radius:12px;

}



.about-text h2{

font-size:42px;

margin-bottom:25px;

}



.about-text p{

font-size:20px;

color:#555;

}



/* =========================
   PROCESS
========================= */

.process{

background:#fafafa;

padding:120px 0;

}



.process h2{

margin-bottom:50px;

}



.process .card{

padding:40px;

text-align:center;

}



/* =========================
   KONTAKT
========================= */

.contact-home{

padding:120px 0;

text-align:center;

}



.contact-home h2{

font-size:48px;

margin-bottom:20px;

}



.contact-home p{

font-size:22px;

color:#666;

}



.contact-home .button{

margin:

20px 10px;

}



/* =========================
   FOOTER
========================= */

.footer{

background:#0f223d;

color:white;

padding:70px 0;

margin-top:100px;

}



.footer-grid{

display:flex;

justify-content:space-between;

gap:50px;

}



.footer h3,
.footer h4{

margin-bottom:15px;

}



.footer a{

color:white;

text-decoration:none;

}



.footer a:hover{

text-decoration:underline;

}



.copyright{

margin-top:50px;

text-align:center;

font-size:14px;

}



/* =========================
   LEGAL
========================= */

.legal-page{

padding:100px 0;

min-height:70vh;

}



.legal-page h1{

font-size:54px;

margin-bottom:40px;

}



.legal-page h2{

margin-top:40px;

margin-bottom:15px;

color:#163a66;

}



.legal-page p{

color:#444;

}



/* =========================
   MOBILE
========================= */

@media(max-width:900px){

.nav{

flex-direction:column;

gap:25px;

}



nav ul{

gap:20px;

}



.hero{

min-height:70vh;

padding:100px 0;

}



.hero h1{

font-size:48px;

}



.hero p{

font-size:22px;

}



.about{

grid-template-columns:

1fr;

}



.about img{

height:350px;

}



.footer-grid{

flex-direction:column;

}



.contact-home h2{

font-size:36px;

}

}