:root{
      --main-color: #FE6C00;
      font-family: "century-gothic", sans-serif;
}
html{
  font-family: "century-gothic", sans-serif;
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:  var(--main-color);

    font-family: "century-gothic", sans-serif;
    font-weight: 300;
    font-style: normal;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.menu a{
    font-size: 1.4rem;
    font-weight: 600 !important;
}

.menu a.menu-zrzutka img {
  height: 32px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transform-origin: center center;
  animation: pulse 2s ease-in-out infinite;
}

footer{
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer p{
  font-family: "century-gothic", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
}

/* --- PODSTAWY --- */
.header { position: relative; z-index: 100; }
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { font-size: 1.4rem; font-weight: 600 !important; text-decoration: none; color: #fff; }

.logo img, .mobile-logo img { height: 60px; width: auto; }

/* Zrzutka pulsuje jak wcześniej */
.menu a.menu-zrzutka img {
    height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    transform-origin: center center;
    animation: pulse 2s ease-in-out infinite;
}

/* --- DESKTOP --- */
.menu--desktop { justify-content: center; }
.menu--mobile, .mobile-bar { display: none; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .menu--desktop { display: none; }

    .mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--main-color);
    }

    .hamburger {
        width: 38px;
        height: 32px;
        border: 0;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .hamburger span {
        height: 3px;
        width: 100%;
        background: #fff;
        transition: transform .25s, opacity .25s;
    }
    .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(14px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    .hamburger--ghost { opacity: 0; pointer-events: none; }

    .menu--mobile {
        position: fixed;
        inset: 0 0 0 0;
        background: #000000cc;
        backdrop-filter: blur(4px);
        transform: translateX(-100%);
        transition: transform .3s ease;
        padding: 80px 24px 24px;
        flex-direction: column;
        gap: 20px;
    }

    .menu--mobile.open {
        transform: translateX(0);
    }

    .menu--mobile a {
        font-size: 1.6rem;
        color: #fff;
    }

    .menu--mobile .menu-zrzutka img {
        height: 40px;
    }
}


/* --- PODSTAWY --- */
.header { position: relative; z-index: 100; }
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { font-size: 1.4rem; font-weight: 600 !important; text-decoration: none; color: #fff; }

.logo img, .mobile-logo img { height: 60px; width: auto; }

/* Zrzutka pulsuje jak wcześniej */
.menu a.menu-zrzutka img {
    height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    transform-origin: center center;
    animation: pulse 2s ease-in-out infinite;
}

/* --- DESKTOP --- */
.menu--desktop { justify-content: center; }
.menu--mobile, .mobile-bar { display: none; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .menu--desktop { display: none; }

    .mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--main-color);
    }

    .hamburger {
        width: 38px;
        height: 32px;
        border: 0;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .hamburger span {
        height: 3px;
        width: 100%;
        background: #fff;
        transition: transform .25s, opacity .25s;
    }
    .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(14px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    .hamburger--ghost { opacity: 0; pointer-events: none; }

    .menu--mobile {
        position: fixed;
        inset: 0 0 0 0;
        background: #000000cc;
        backdrop-filter: blur(4px);
        transform: translateX(-100%);
        transition: transform .3s ease;
        padding: 80px 24px 24px;
        flex-direction: column;
        gap: 20px;
    }

    .menu--mobile.open {
        transform: translateX(0);
    }

    .menu--mobile a {
        font-size: 1.6rem;
        color: #fff;
    }

    .menu--mobile .menu-zrzutka img {
        height: 40px;
    }
}

/* Nie zmieniamy istniejących kolorów itd. Usuwamy tylko globalne zmniejszanie logo */
.logo img { height: auto; } /* przywraca oryginalny rozmiar z HTML/CSS obrazka */

/* Mobilne elementy domyślnie ukryte na desktopie */
.mobile-bar,
.menu--mobile {
    display: none;
}

/* Desktop menu jak było */
.menu--desktop {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

/* MOBILE STYLES */
@media (max-width: 992px) {
    /* Ukrywamy wersję desktopową */
    .menu--desktop { display: none; }

    /* Pokazujemy pasek mobilny */
    .mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--main-color);
    }

    /* Logo mobilne tylko na mobile */
    .mobile-logo img {
        height: 48px;
        width: auto;
    }

    /* Hamburger */
    .hamburger {
        width: 38px;
        height: 32px;
        border: 0;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .hamburger span {
        height: 3px;
        width: 100%;
        background: #fff;
        transition: transform .25s, opacity .25s;
    }
    .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(14px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    /* Menu wysuwane z góry, pionowe */
    .menu--mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--main-color);
        display: flex;
        flex-direction: column;  /* Pionowo */
        gap: 20px;
        padding: 80px 24px 24px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        z-index: 99;
    }
    .menu--mobile.open {
        max-height: 100vh; /* pełny ekran */
    }

    .menu--mobile a {
        font-size: 1.6rem;
        color: #fff;
        text-decoration: none;
    }

    .menu--mobile .menu-zrzutka img {
        height: 40px;
    }
}

/* DOMYŚLNIE (desktop) – pokazujemy tylko wersję desktopową */
.menu--desktop { display: flex !important; }
.mobile-bar,
.menu--mobile { display: none !important; }

/* MOBILE */
@media (max-width: 992px) {
    .menu--desktop { display: none !important; }
    .mobile-bar { display: flex !important; }

    .menu--mobile {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        position: fixed;
        top: 0; left: 0; right: 0;
        background: var(--main-color);
        padding: 80px 24px 24px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        z-index: 99;
    }
    .menu--mobile.open { max-height: 100vh; }
}


/* Niech header i oba mobilne elementy zawsze leżą najwyżej */
.header,
.mobile-bar,
.menu--mobile {
    position: relative;
    z-index: 9999 !important;
}

/* Jeżeli masz jakieś sekcje/banery z dużym z-index – zbija je niżej */
main, section, .hero, .banner, .wrap, .container {
    position: relative;
    z-index: 1;
}

/* Upewnij się, że mobilne menu przyjmuje kliknięcia */
.menu--mobile { pointer-events: auto; }

/* Jeśli masz półprzezroczyste tło/overlay – ono ma nie blokować klików */
.menu-backdrop { pointer-events: none; }


/* Wersja płynna – działa i na desktopie, i na mobile */
.hero .subtitle .type {
    font-size: clamp(18px, 4.8vw, 32px);  /* min, płynnie, max */
    line-height: 1.2;
    display: inline-block;               /* jeśli masz efekt pisania */
    word-break: break-word;
    hyphens: auto;
}

/* Jeśli wolisz sztywne progi tylko dla mobile: */
@media (max-width: 992px) {
    .hero .title {        /* jeśli też chcesz zmniejszyć H1 */
        font-size: 32px;
        line-height: 1.1;
    }
    .hero .subtitle .type {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .hero{
        margin-top: 0 !important;
    }
    .hero .title {
        font-size: 64px;
    }
    .hero .subtitle .type {
        font-size: 32px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    /* każdy element z klasą zaczynającą się od col- ma zajmować całą szerokość */
    .grid > [class^="col-"] {
        grid-column: 1 / -1 !important;
    }

    /* opcjonalnie zmniejsz odstępy na mobile */
    :root { --gap: 12px; }

    /* obrazki na 100% */
    .grid img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media (max-width: 768px) {
    .hero {
        margin-top: 0;
    }
}


@media (max-width: 992px) {
    .menu--mobile {
        height: 100vh;           /* pełna wysokość */
    }
    .menu--mobile.open {
        max-height: 100vh;
    }
}