* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #eaf0f7;
    font-family: 'Poppins', Arial, sans-serif;
    color: #24364b;
}

.kontener {
    width: 95%;
    max-width: 1250px;
    margin: 20px auto;
}s
/* NAGŁÓWEK */
header {
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 3px 12px #b4c3d0;
}

.logo {
    float: left;
    width: 25%;
}

.logo img {
    width: 210px;
    max-width: 100%;
    margin-top: 5px;
}

nav {
    float: right;
    width: 75%;
    text-align: right;
    padding-top: 20px;
}

nav a {
    color: #183657;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin: 8px;
    padding: 8px;
    transition: 0.3s;
}

nav a:hover {
    color: #008cdb;
    border-bottom: 2px solid #008cdb;
}

.hero {
    height: 380px;
    padding: 60px 35px;
    background-image: url("https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600");
    background-size: cover;
    background-position: center;
}

.hero-tekst {
    width: 60%;
    background-color: #102940e8;
    color: white;
    padding: 30px;
    border-radius: 12px;
    animation: pojawienie 1s;
}

.hero-tekst h1 {
    font-size: 31px;
    margin: 10px 0;
}

.hero-tekst p {
    font-size: 14px;
    line-height: 1.7;
}

.maly-tekst {
    color: #63cfff;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 11px;
}

.przycisk {
    display: inline-block;
    background-color: #008cdb;
    color: white;
    text-decoration: none;
    padding: 11px 20px;
    border-radius: 7px;
    margin-top: 10px;
    font-weight: 600;
    transition: 0.3s;
}

.przycisk:hover {
    background-color: #ffffff;
    color: #008cdb;
    transform: scale(1.05);
}

.zalety {
    background-color: #ffffff;
}

.zaleta {
    float: left;
    width: 33.33%;
    padding: 25px;
    min-height: 210px;
    text-align: center;
    border-right: 1px solid #dce5ee;
}

.zaleta h3 {
    color: #183657;
    font-size: 17px;
}

.zaleta p {
    font-size: 13px;
    color: #617184;
}

.ikona {
    background-color: #e0f2ff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    padding-top: 9px;
    margin: auto;
    transition: 0.3s;
}

.ikona:hover {
    background-color: #a9ddff;
    transform: scale(1.15);
}


/* BOCZNY */
.sidebar {
    float: left;
    width: 25%;
    padding: 15px;
    background-color: #edf3f8;
}

.panel {
    background-color: white;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 3px 10px #d3dce5;
}

.sidebar h3 {
    font-size: 17px;
    color: #123b64;
}

.panel ul {
    list-style: none;
    padding: 0;
}

.panel li {
    padding: 12px 5px;
    border-bottom: 1px solid #e2e9f0;
}

.panel a {
    color: #31516e;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.panel a:hover {
    color: #008cdb;
    padding-left: 8px;
}

.promocja {
    background-color: #173b62;
    color: white;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.promocja h3 {
    color: #70d5ff;
}

.stara-cena {
    color: #c0cede;
    text-decoration: line-through;
}

.nowa-cena {
    color: #78ddff;
    font-size: 29px;
    font-weight: 800;
}

.newsletter {
    margin-top: 20px;
    padding: 20px;
    background-color: #d5eaff;
    border-radius: 10px;
    text-align: center;
}

.newsletter input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b8cddd;
    border-radius: 5px;
}

.newsletter button {
    width: 100%;
    background-color: #008cdb;
    color: white;
    padding: 11px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.newsletter button:hover {
    background-color: #123b64;
}


/* GŁÓWNA ZAWARTOŚĆ */
.glowna {
    float: right;
    width: 75%;
    padding: 15px;
    background-color: white;
}

.glowna h2 {
    color: #123b64;
    font-size: 23px;
}

.podtytul {
    color: #697b8e;
    font-size: 13px;
}


/* O NAS */

.onas {
    background-color: #eaf5ff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.onas p {
    line-height: 1.8;
    font-size: 14px;
}



.uslugi {
    background-color: #f3f7fc;
    padding: 20px;
    border-radius: 10px;
}

.karta {
    float: left;
    width: 48%;
    margin: 1%;
    padding: 15px;
    background-color: white;
    border: 1px solid #d8e1e9;
    border-radius: 12px;
    box-shadow: 0 4px 12px #d6dce3;
    transition: 0.3s;
}

.karta:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px #b7c8d7;
}

.karta img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: 0.3s;
}

.karta img:hover {
    transform: scale(1.03);
}

.karta h3 {
    color: #123b64;
    font-size: 16px;
}

.karta p {
    font-size: 12px;
    line-height: 1.7;
    min-height: 65px;
}

.link-usluga {
    color: #008cdb;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.link-usluga:hover {
    color: #123b64;
}


/* CENNIK */

.cennik {
    background-color: #edf4fa;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 13px;
}

th {
    background-color: #173b62;
    color: white;
}

th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #d5e0e8;
}

tr:hover {
    background-color: #dcefff;
}

.uwaga {
    font-size: 12px;
    color: #64778b;
}




.dlaczego {
    background-color: #e7f5f0;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
}

.lewy {
    float: left;
    width: 48%;
}

.prawy {
    float: right;
    width: 48%;
}

.dlaczego h3 {
    color: #164b59;
}

.dlaczego ul {
    list-style: none;
    padding: 0;
    font-size: 13px;
}

.dlaczego li {
    margin: 12px 0;
}




.galeria {
    background-color: #f2eefb;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.galeria img {
    float: left;
    width: 23%;
    height: 125px;
    margin: 1%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 3px 8px #bdc3cd;
    transition: 0.3s;
}

.galeria img:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 16px #9faabd;
}




.kontakt {
    background-color: #e8f2fa;
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
}

.dane {
    float: left;
    width: 40%;
    font-size: 13px;
}

.dane p {
    margin: 15px 0;
}

.dane a {
    color: #0077bc;
    text-decoration: none;
}

.dane a:hover {
    color: #173b62;
}

.kontakt form {
    float: right;
    width: 55%;
}

.kontakt label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.kontakt input,
.kontakt select,
.kontakt textarea {
    width: 100%;
    padding: 11px;
    margin-bottom: 12px;
    border: 1px solid #bdcedd;
    border-radius: 6px;
    font-family: 'Poppins', Arial, sans-serif;
}

.kontakt button {
    background-color: #008cdb;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-family: 'Poppins', Arial, sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

.kontakt button:hover {
    background-color: #173b62;
    transform: scale(1.05);
}






footer {
    background-color: #142f4e;
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 0 0 12px 12px;
    font-size: 12px;
}

footer a {
    color: #81d5ff;
    text-decoration: none;
    margin: 10px;
    transition: 0.3s;
}

footer a:hover {
    color: white;
}


/* FLOAT */

.kaktus {
    clear: both;
}




@keyframes pojawienie {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




@media (max-width: 850px) {

    .logo,
    nav {
        float: none;
        width: 100%;
        text-align: center;
    }

    nav a {
        display: inline-block;
    }

    .hero-tekst {
        width: 90%;
    }

    .zaleta {
        float: none;
        width: 100%;
        min-height: auto;
    }

    .sidebar,
    .glowna {
        float: none;
        width: 100%;
    }

    .dane,
    .kontakt form {
        float: none;
        width: 100%;
    }
}

@media (max-width: 550px) {

    .kontener {
        width: 100%;
        margin: 0;
    }

    .hero {
        height: auto;
        padding: 20px;
    }

    .hero-tekst {
        width: 100%;
        padding: 20px;
    }

    .hero-tekst h1 {
        font-size: 24px;
    }

    .karta {
        float: none;
        width: 98%;
    }

    .lewy,
    .prawy {
        float: none;
        width: 100%;
    }

    .galeria img {
        width: 48%;
    }

    table {
        font-size: 10px;
    }

    th, td {
        padding: 5px;
    }
}