/* ==========================================================
   Lembcke.us Site Package
   Main Stylesheet
   ========================================================== */

:root {
    --primary: #0A2E6F;
    --secondary: #1F4E95;
    --light: #F7F9FC;
    --text: #333333;
    --gray: #777777;
    --border: #E4E7EC;
    --shadow: 0 12px 30px rgba(0,0,0,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:var(--text);
    line-height:1.7;
}

/* ==========================================================
   Header
   ========================================================== */

.site-header{

    position:sticky;
    top:0;

    background:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 60px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    z-index:999;
}

.site-header img{

    height:62px;
}

.site-header nav{

    display:flex;
    gap:35px;
}

.site-header nav a{

    text-decoration:none;
    color:var(--primary);

    font-weight:bold;

    transition:.3s;
}

.site-header nav a:hover{

    color:var(--secondary);
}

/* ==========================================================
   Hero
   ========================================================== */

.hero{

    max-width:1400px;

    margin:auto;

    min-height:85vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:80px 60px;
}

.hero-text{

    flex:1;
}

.hero-logo{

    width:420px;
    max-width:100%;

    margin-bottom:35px;
}

.hero h1{

    color:var(--primary);

    font-size:2.1rem;

    margin-bottom:20px;
}

.hero p{

    color:#555;

    font-size:1.2rem;

    max-width:650px;

    margin-bottom:40px;
}

.buttons{

    display:flex;

    gap:20px;
}

.buttons a{

    text-decoration:none;

    padding:14px 32px;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;
}

.buttons a:first-child{

    background:var(--primary);

    color:white;
}

.buttons a:last-child{

    border:2px solid var(--primary);

    color:var(--primary);
}

.buttons a:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);
}

.hero-photo{

    flex:1;

    display:flex;

    justify-content:center;
}

.hero-photo img{

    width:420px;

    border-radius:25px;

    box-shadow:var(--shadow);
}

/* ==========================================================
   Sections
   ========================================================== */

.section{

    max-width:1200px;

    margin:auto;

    padding:90px 40px;
}

.section h2{

    text-align:center;

    color:var(--primary);

    font-size:2.2rem;

    margin-bottom:35px;
}

.section p{

    font-size:1.1rem;

    color:#555;

    margin-bottom:18px;
}

/* ==========================================================
   Cards
   ========================================================== */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:40px;
}

.card{

    background:white;

    border:1px solid var(--border);

    border-radius:15px;

    padding:35px;

    transition:.35s;

    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);
}

.card h3{

    color:var(--primary);

    margin-bottom:15px;
}

/* ==========================================================
   Contact
   ========================================================== */

.contact{

    text-align:center;
}

/* ==========================================================
   Footer
   ========================================================== */

footer{

    background:var(--primary);

    color:white;

    text-align:center;

    padding:40px;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:960px){

.site-header{

    flex-direction:column;

    gap:20px;

    padding:20px;
}

.site-header nav{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;
}

.hero{

    flex-direction:column-reverse;

    text-align:center;

    padding:60px 25px;
}

.hero-photo{

    width:360px;
    max-width:100%;
    height:auto;

    border-radius:24px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    object-fit:cover;

    transition:.3s ease;
}

.hero-photo:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 60px rgba(0,0,0,.20);
}

.buttons{

    justify-content:center;

    flex-wrap:wrap;
}

.hero-logo{

    width:280px;
}

.section{

    padding:70px 25px;
}

/* Navigation logo */
.nav-logo {
    height: 58px;
    width: auto;
    display: block;
}
}