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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins', sans-serif;

    background:#f5f8fc;

    color:#222;

}


/* ================= MENU ================= */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(13,71,161,0.95);

    z-index:1000;

}


.logo{

    color:white;

    font-size:30px;

    font-weight:700;

}


nav a{

    color:white;

    text-decoration:none;

    margin-left:25px;

    font-size:16px;

    transition:.3s;

}


nav a:hover{

    color:#90caf9;

}


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


.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;


    background:

    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    ),

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


    background-size:cover;

    background-position:center;

}


.hero-content{

    max-width:900px;

}


.hero h1{

    font-size:60px;

    line-height:1.2;

    margin-bottom:20px;

}


.hero p{

    font-size:22px;

    margin-bottom:35px;

}


/* PRZYCISKI */


.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}


.btn,
.btn-outline{


    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.btn{

    background:#2196f3;

    color:white;

}


.btn:hover{

    background:#1565c0;

    transform:translateY(-3px);

}


.btn-outline{

    border:2px solid white;

    color:white;

}


.btn-outline:hover{

    background:white;

    color:#0d47a1;

}



/* ================= SEKCJE ================= */


section{

    padding:100px 10%;

    scroll-margin-top:90px;

}


section h2{

    text-align:center;

    font-size:40px;

    color:#0d47a1;

    margin-bottom:50px;

}



/* ================= USŁUGI ================= */


.cards{

    display:grid;

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

    gap:30px;

}


.card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    transition:.3s;

}


.card:hover{

    transform:translateY(-10px);

}


.card h3{

    color:#0d47a1;

    margin-bottom:15px;

}



/* ================= O NAS ================= */


.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}


.about img{

    width:67%;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}


.about p{

    font-size:18px;

    line-height:1.8;

}



/* ================= GALERIA ================= */


.gallery{

    display:grid;

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

    gap:25px;

}


.gallery img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}


.gallery img:hover{

    transform:scale(1.05);

}



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


#kontakt{

    background:#0d47a1;

    color:white;

    text-align:center;

}


#kontakt h2{

    color:white;

}


.contact-box p{

    font-size:20px;

    margin:15px;

}



/* ================= STOPKA ================= */


footer{

    background:#062b63;

    color:white;

    text-align:center;

    padding:25px;

}



/* ================= TELEFON ================= */


@media(max-width:900px){


    header{

        flex-direction:column;

        padding:15px;

    }


    nav{

        margin-top:15px;

    }


    nav a{

        margin:0 8px;

        font-size:14px;

    }


    .hero h1{

        font-size:38px;

    }


    .hero p{

        font-size:17px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }


    .about{

        grid-template-columns:1fr;

    }

    .hidden{

        opacity:0;

        transform:translateY(40px);

        transition:0.8s;

    }


    .show{

        opacity:1;

        transform:translateY(0);

    }
}