/* =====================================================
   OSP SZYNWAŁD - GŁÓWNY ARKUSZ STYLI
   ===================================================== */


/* ================= RESET ================= */

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


html {
    scroll-behavior: smooth;
}


body {

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

    color: #222;

    background: #fff;

    line-height: 1.6;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


/* ================= ZMIENNE ================= */


:root {

    --red: #c1121f;

    --dark-red: #8f0d17;

    --black: #161616;

    --dark: #222;

    --gray: #f5f5f5;

    --white: #ffffff;

    --shadow: 0 15px 40px rgba(0,0,0,0.12);

    --transition: .3s ease;

}



/* ================= KONTENER ================= */


.container {

    width: min(1200px, 90%);

    margin: auto;

}



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


header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(255,255,255,0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 5px 20px rgba(0,0,0,.08);

}



.header-container {

    min-height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



/* LOGO */


.logo {

    display: flex;

    align-items: center;

    gap: 15px;

}



.logo img {

    width: 65px;

    height: 65px;

    object-fit: contain;

}



.logo-text h2 {

    font-size: 18px;

    line-height: 1.2;

    color: var(--black);

    font-weight: 700;

}



.logo-text p {

    color: var(--red);

    font-size: 18px;

    font-weight: 600;

}



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


nav ul {

    list-style: none;

    display: flex;

    gap: 30px;

}



nav a {

    font-weight: 500;

    position: relative;

    transition: var(--transition);

}



nav a:hover {

    color: var(--red);

}



nav a::after {

    content: "";

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 0;

    height: 3px;

    background: var(--red);

    transition: var(--transition);

}



nav a:hover::after {

    width: 100%;

}



/* HAMBURGER */


.hamburger {

    display: none;

    cursor: pointer;

}



.hamburger span {

    display: block;

    width: 32px;

    height: 3px;

    background: var(--black);

    margin: 6px 0;

}



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


.hero {

    height: 100vh;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    background:

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

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

    background-size: cover;

    background-position: center;

    color:white;

}



.hero-content {

    position: relative;

    z-index:2;

    max-width:900px;

}



.hero h1 {

    font-size: clamp(40px,6vw,75px);

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

}



.hero p {

    font-size:20px;

    margin-bottom:40px;

}



.hero-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



/* ================= BUTTONY ================= */


.btn {

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 35px;

    border-radius:50px;

    background:var(--red);

    color:white;

    font-weight:600;

    transition:var(--transition);

}



.btn:hover {

    background:var(--dark-red);

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}



.btn-outline {

    background:transparent;

    border:2px solid white;

}



.btn-outline:hover {

    background:white;

    color:var(--dark);

}



/* ================= STRZAŁKA ================= */


.scroll-down {

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    font-size:30px;

    color:white;

}


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


section {

    padding:100px 0;

}



.section-title {

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}



.section-title h2 {

    font-size:42px;

    margin-bottom:20px;

    color:var(--dark);

}



.section-title p {

    color:#666;

    font-size:18px;

}



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


.about-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.about-card {

    padding:40px 30px;

    text-align:center;

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}



.about-card:hover {

    transform:translateY(-10px);

}



.about-card i {

    font-size:45px;

    color:var(--red);

    margin-bottom:20px;

}



.about-card h3 {

    font-size:40px;

    color:var(--red);

}

/* ================= STATYSTYKI ================= */


.stats-section {

    background:

    linear-gradient(
        rgba(193,18,31,.95),
        rgba(143,13,23,.95)
    );

    color:white;

}



.stats-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.stat-box {

    text-align:center;

    padding:35px 20px;

    background:rgba(255,255,255,.1);

    border-radius:20px;

    backdrop-filter:blur(5px);

}



.stat-box i {

    font-size:45px;

    margin-bottom:20px;

}



.stat-box h3 {

    font-size:45px;

    font-weight:800;

}



.stat-box p {

    font-size:18px;

}



/* ================= AKTUALNOŚCI ================= */


.news-section {

    background:#f8f8f8;

}



.news-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.news-card {

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}



.news-card:hover {

    transform:translateY(-10px);

}



.news-image {

    height:230px;

    overflow:hidden;

}



.news-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.news-card:hover img {

    transform:scale(1.08);

}



.news-content {

    padding:30px;

}



.news-date {

    color:var(--red);

    font-size:14px;

}



.news-content h3 {

    margin:15px 0;

    font-size:22px;

}



.news-content p {

    color:#666;

}



.read-more {

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    color:var(--red);

    font-weight:600;

}



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


.gallery-section {

    background:white;

}



.gallery-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.gallery-item {

    height:250px;

    overflow:hidden;

    border-radius:15px;

}



.gallery-item img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img {

    transform:scale(1.1);

}



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


.contact-section {

    background:#f5f5f5;

}



.contact-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:50px;

}



.contact-box {

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

}



.contact-box i {

    font-size:40px;

    color:var(--red);

    margin-bottom:20px;

}



.contact-box h3 {

    margin-bottom:15px;

}



.contact-box a {

    color:var(--red);

    font-weight:600;

}



.map-container {

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}



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


footer {

    background:#151515;

    color:white;

    padding:60px 0 20px;

}



.footer-content {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}



.footer-logo {

    display:flex;

    align-items:center;

    gap:15px;

}



.footer-logo img {

    width:60px;

}



.footer-links {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.footer-links a:hover {

    color:var(--red);

}



.footer-social a {

    font-size:35px;

    color:white;

    transition:.3s;

}



.footer-social a:hover {

    color:#1877f2;

}



.footer-bottom {

    text-align:center;

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.2);

    color:#ccc;

}



/* ================= ANIMACJE ================= */


.hero-content {

    animation:showHero 1s ease;

}



@keyframes showHero {


    from {

        opacity:0;

        transform:translateY(40px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* ================= PRZYCISK POWROTU ================= */


.scroll-down {

    animation:bounce 2s infinite;

}



@keyframes bounce {


    0%,100% {

        transform:translate(-50%,0);

    }


    50% {

        transform:translate(-50%,15px);

    }

}

/* ================= POJEDYNCZA AKTUALNOŚĆ ================= */


.news-single {

    padding-top:160px;

}


.news-single h1 {

    font-size:42px;

    max-width:900px;

    margin-bottom:20px;

}


.news-single .date {

    color:var(--red);

    margin-bottom:40px;

}


.single-image {

    width:100%;

    max-height:500px;

    object-fit:cover;

    border-radius:20px;

    margin-bottom:40px;

}


.news-single p {

    font-size:18px;

    max-width:900px;

    margin-bottom:25px;

    color:#555;

}

/* ================= NAGŁÓWEK PODSTRON ================= */


.page-header {

    padding-top:170px;

    padding-bottom:80px;

    text-align:center;

    color:white;

    background:

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

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

    background-size:cover;

    background-position:center;

}



.page-header h1 {

    font-size:55px;

    margin-bottom:15px;

}



.page-header p {

    font-size:20px;

}

.news-tag {

    display:inline-block;

    color:var(--red);

    font-weight:700;

    font-size:13px;

    text-transform:uppercase;

    margin-bottom:10px;

}


.date {

    font-size:14px;

    color:#777;

    margin:10px 0;

}