/* IMPORT CZCIONEK */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Open+Sans:wght@400;600&display=swap');

/* ZMIENNE KOLORYSTYCZNE (Zgodne z Twoim logo) */
:root {
    --primary-blue: #0f3e69; /* Ciemny granat */
    --accent-blue: #0056b3;  /* Jaśniejszy niebieski do hoverów */
    --bg-light: #f8f9fa;     /* Jasne tło sekcji */
    --cta-green: #209c86;    /* Zielony przycisk z projektu */
}

/* OGÓLNE USTAWIENIA */
body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-blue);
    font-weight: 700;
}

a { text-decoration: none; }

/* NAVBAR (Pasek nawigacji) */
.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Logo w pasku - ograniczenie wysokości */
.navbar-brand img {
    height: 50px; 
    width: auto;
}

/* --- HERO SECTION (To tutaj ładuje się duże zdjęcie tła) --- */
.hero-section {
    position: relative;
    /* !!! WAŻNE: Plik musi nazywać się hero.jpg i być w folderze images !!! */
    background: url('images/hero.jpg') center/cover no-repeat;
    padding: 120px 0;
    color: white;
}

/* Niebieska nakładka na zdjęcie (Gradient) */
.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Gradient od ciemnego granatu do przezroczystości */
    background: linear-gradient(90deg, rgba(15,62,105,0.95) 0%, rgba(15,62,105,0.8) 50%, rgba(15,62,105,0.1) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Tekst musi być nad gradientem */
}

.hero-section h1 {
    color: white;
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* IKONY I PUDEŁKA (GRID) */
.icon-box {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

/* Duża ikona w tle po prawej stronie sekcji */
.icon-box-large {
    font-size: 10rem;
    color: var(--primary-blue);
    opacity: 0.1; /* Półprzezroczysta */
}

/* ŻÓŁTY ALERT */
.custom-alert {
    background-color: #fff8e1;
    border-left: 5px solid #ffc107;
    color: #856404;
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* FOOTER CTA (Dolna sekcja z przyciskiem) */
.footer-cta {
    background-color: var(--primary-blue);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.footer-cta h2 { color: white; }

.btn-cta {
    background-color: var(--cta-green);
    color: white;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    transition: transform 0.2s, background-color 0.2s;
    display: inline-block;
    margin-top: 20px;
}

.btn-cta:hover {
    background-color: #1a8a75;
    transform: scale(1.05);
    color: white;
}

/* STYLIZACJA MODALA (OKIENKO LOGOWANIA) */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-primary:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}