body{
    background-color:rgb(186, 191, 232);
    margin:0;
    padding:0;
    font-family: "rajdhani", sans-serif;
}
.wit{
    font-weight:500;
    color: rgb(120, 120, 200)
}
.stopkadln{
    height: 30px;
    width: 100%;
    background-color: rgb(132, 132, 241);
    display: flex;
    align-items: center;
    padding-left:10px;
}
.rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.l{
    font-size: 12.56px;
}
.v{
    
    display: inline-block;
    font-weight: 800;
}
.v1{
    
    display: inline-block;
    font-weight: 700;
}
.v2{
    
    display: inline-block;
    font-weight: 500;
}
.v3{
    
    display: inline-block;
    font-weight: 400;
}
.v4{
    
    display: inline-block;
    font-weight: 300;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Import czcionki Rajdhani z Google Fonts */
@import url('https://googleapis.com');

/* Reset podstawowych marginesów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background-color: #0b1b31;
    
}

/* Górny komunikat powitalny */
.stopkadln {
    background-color: #1a0922; /* Nieco jaśniejszy odcień niebieskiego */
    padding: 8px 20px;
    text-align: center;
    font-size: 0.75rem;
    border-bottom: 1px solid #3a506b;
    color: white;
}

/* Główny pasek nawigacji (Navbar) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Zapewnia zawijanie elementów na mniejszych ekranach */
    padding: 15px 5%;
    background: linear-gradient(135deg, #0b1b31 0%, #1e3a8a 100%); /* Gradientowe niebieskie tło */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Sekcja Logo i Nazwy Marki */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; /* Zapobiega nadmiernemu ściskaniu logo */
}

.logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    cursor:cell;
    /* Efekt poświaty/gradientu wokół logo, jeśli samo nie ma przezroczystości */
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.5)); 
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Gradientowy tekst dla nazwy (jak na zdjęciu - odcienie morskiego/turkusu) */
    background: linear-gradient(45deg, #00f2fe 0%, #4facfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Menu z linkami */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap; /* Linki zawiną się pod spód na bardzo małych ekranach */
}

.nav-links li a {
    text-decoration: none;
    color: #93c5fd; /* Jasnoniebieski kolor linków */
    font-size: 1.2rem;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efekt po najechaniu myszką na opcje */
.nav-links li a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #4facfe;
}

/* Responsywność dla małych ekranów (np. smartfony) */
@media (max-width: 600px) {
    .navbar {
        flex-direction: column; /* Układa logo i linki w pionie na małym ekranie */
        gap: 15px;
        text-align: center;
    }
    
    .nav-links {
        justify-content: center;
        gap: 20px;
    }
}
.stopkagr{
    background-color: #76af68; /* Nieco jaśniejszy odcień niebieskiego */
    padding: 3px 10px;
    text-align: left;
    font-size: 0.9rem;
    border-bottom: 1px solid #3a506b;
    color: rgb(3, 45, 15);
    font-size: 13px;
}
.stopkadgr{
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left:20px;
}
*{
    font-family: 'rajdhani',sans-serif;
}
/* --- PRZYKLEJONA STOPKA (FIXED FOOTER) --- */
  .moja-przyklejona-stopka {
    position: fixed; /* Przykleja element do okna przeglądarki */
    bottom: 0;        /* Przykleja do dolnej krawędzi */
    left: 0;
    width: 100%;      /* Rozciąga stopkę na całą szerokość ekranu */
    z-index: 9999;    /* Zapewnia, że stopka będzie zawsze na wierzchu */
    
    /* Wymiary: niewielka wysokość */
    padding: 12px 20px;
    box-sizing: border-box;
    
    /* Wygląd: Półprzezroczyste szkło pasujące do karty */
    background: rgba(15, 23, 42, 0.75); /* Półprzezroczyste ciemne tło */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Cienka świecąca linia na górnej krawędzi stopki */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    
    /* Wycentrowanie zawartości stopki */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Właściwości tekstu */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
  }

  /* Zawartość stopki (tekst + ewentualne linki) */
  .moja-przyklejona-stopka .stopka-zawartosc {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Na telefonach w razie potrzeby zawinie tekst */
    text-align: center;
  }

  /* Stylizacja ewentualnych linków w stopce */
  .moja-przyklejona-stopka a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease, text-decoration 0.2s ease;
  }

  .moja-przyklejona-stopka a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  /* WAŻNE: Dodajemy odstęp na dole strony (body), aby stopka nie zasłaniała dolnej części Twojego diva podczas przewijania */
  body {
    padding-bottom: 80px !important; 
  }
  /* --- RESPONSOWNOŚĆ (EKRANY TELEFONÓW) --- */
  @media (max-width: 550px) {
    .moj-glass-card {
      padding: 16px; /* Możesz też nieco zmniejszyć ogólny padding karty */
    }

    .moj-glass-card .moj-card-body {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 12px; /* Zmniejszamy odstęp między obrazkiem a tekstem */
    }

    .moj-glass-card .moj-image-container {
      max-width: 160px;
    }

    .moj-glass-card .moj-card-title {
      font-size: 1.2rem;
      margin-bottom: 12px; /* Mniejszy odstęp pod tytułem */
    }

    /* --- TUTAJ ZMNIEJSZAMY ODSTĘPY MIĘDZY LINIJKAMI --- */
    .moj-glass-card .moj-side-text {
      font-size: 0.88rem;
      line-height: 1.35; /* Zmniejszona interlinia tekstu obok obrazka */
    }

    .moj-glass-card .moj-card-footer-text {
      font-size: 0.82rem;
      line-height: 1.35; /* Zmniejszona interlinia tekstu na dole */
      padding-top: 12px;  /* Mniejszy odstęp nad tekstem stopki w divie */
    }
  }
  .jj{
    color: rgb(221, 149, 149);
  }