:root
 {
    --cassiopeia-color-primary: #a10f15;
    --cassiopeia-color-link: #a10f15;
    --link-color: #30638d;
    --link-color-rgb: 48, 99, 141;
    --cassiopeia-color-hover: #a10f15;
    --link-hover-color: #954b56;
    --link-hover-color-rgb: 149, 75, 86;
}

.container-header .mod-menu {
  color: green;
}
.container-header {
    z-index: 10;
    background-color: var(--cassiopeia-color-primary);
    background-image: var(--cassiopeia-color-primary);
    /* background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%); */
    position: relative;
    box-shadow: inset 0 5px 5px #00000008;
}

/* ticker - start */

.ticker {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* Cała szerokość ekranu */
  /* background: #fde366; */
  /* background: #8c0505; */
  background: #041e43;
  overflow: hidden;
  border-top: 1px solid #e5e5e5;
  padding: 8px 0;
  /* font-family: Arial, sans-serif; */
  z-index: 10;
}


    .ticker__wrapper {
      display: flex;
      width: max-content;
      animation: scroll-left 30s linear infinite;
    }

    .ticker__item {
      white-space: nowrap;
      margin-right: 50px;
    }

    .ticker__item a {
      text-decoration: none;
      color: #ffffff;
      /* font-weight: lighter; */
      font-weight: normal;
    }

    .ticker__item a:hover {
      text-decoration: underline;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

/* tickier - koniec */

/* 3 boxy - start */

.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; 
  margin: 20px 0;
}

.box-link {
  text-decoration: none;
  color: inherit;
  flex: 1 1 300px; /* minimum 300px, elastycznie się układa */
  /* max-width: 330px; */
    max-width: 100%;
}

.info-box-light {
  /* background: #f9f9f9; */
  background: #fafafa;
  /* border-radius: 12px; */
  padding: 20px;
  text-align: center;
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
  height: 100%;
    text-align: left;
}

.info-box-light:hover {
  /* transform: translateY(-5px); */
  /* box-shadow: 0 6px 15px rgba(0,0,0,0.15); */
    background: #f1f1f1;
}

.info-box-light img {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
}

.info-box-light span {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
}

.info-box-light:hover span {
  color: var(--body-color);
}

.info-box-light h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #333;
}

.info-box-light p {
  font-size: 0.95em;
  color: #666;
}

/* wariant: deepblue - start */
.info-box-deepblue {
  background: #0e3055;
  padding: 20px;
  /* text-align: center; */
  text-align: left;
  height: 100%;
}

.info-box-deepblue:hover {
    background: #0c2745;
}

.info-box-deepblue img {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
}

.info-box-deepblue span {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
  color: #ffffff;
}

.info-box-deepblue:hover span {
  color: #ffffff;
}

.info-box-deepblue h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #ffffff;
}

.info-box-deepblue p {
  font-size: 0.95em;
  color: #ffffff;
}
/* wariant: deepblue - koniec */

/* wariant: white - start */
.info-box-white {
  background: #ffffff;
  padding: 20px;
  /* text-align: center; */
  text-align: left;
  height: 100%;
}

.info-box-white:hover {
    background: #f5f5f5;
}

.info-box-white img {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
}

.info-box-white span {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
  color: var(--body-color);
}

.info-box-white:hover span {
  color: var(--body-color);
}

.info-box-white h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: var(--body-color);
}

.info-box-white p {
  font-size: 0.95em;
  color: var(--body-color);
}
/* wariant: white - koniec */

/* 3 boxy - koniec */

/* boxy na 2 kolumny - start */
.simple-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 30px 0;
}

.simple-box {
  flex: 1 1 300px;
  /* max-width: 500px; */
  max-width: 100%; 
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.simple-box img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.simple-box h4 {
  font-size: 1.3em;
  margin: 10px 0;
  color: #333;
}

.simple-box p {
  font-size: 1em;
  color: #555;
  line-height: 1.5em;
}
/* boxy na 2 kolumny - koniec */

/* flip boxy - start */

.flip-cardX-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}

.flip-cardX {
  background-color: transparent;
  width: 300px;
  height: 320px;
  perspective: 1000px;
}

.flip-cardX-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-cardX:hover .flip-cardX-inner {
  transform: rotateY(180deg);
}

.flip-cardX-front,
.flip-cardX-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  box-sizing: border-box;
}

.flip-cardX-front {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-cardX-front img {
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
}

.flip-cardX-front h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.flip-cardX-back {
  background-color: #007bff;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-cardX-back p {
  font-size: 0.95em;
  margin: 10px 0 20px;
  padding: 0 10px;
}

.flip-cardX-button {
  background: white;
  color: #007bff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.flip-cardX-button:hover {
  background: #e6e6e6;
}

/* flip boxy - koniec */




/* 4 boxy - start */

.featured-box-container-header {
  background: #ffd602;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  /* margin: 20px 0; */
}

.featured-box-container {
  background: #ffd602;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  /* margin: 20px 0; */
  margin-bottom: 20px;
}

.featured-box-link {
  text-decoration: none;
  color: inherit;
  flex: 1 1 300px; /* minimum 300px, elastycznie się układa */
  /* max-width: 330px; */
    max-width: 100%;
}

.featured-info-box {
  /* background: #f9f9f9; */
  /* background: #ffffff; */
  /* border-radius: 12px; */
  padding: 20px;
  text-align: center;
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
  height: 100%;
}

.featured-info-box:hover {
  /* transform: translateY(-5px); */
  /* box-shadow: 0 6px 15px rgba(0,0,0,0.15); */
  /* background: #f1f1f1; */
}

.featured-info-box img {
  /* max-width: 64px; */
  max-width: 100%;
  max-height: 180px;
  height: auto;
  margin-bottom: 15px;
}

.featured-info-box h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #333;
}

.featured-info-box p {
  font-size: 0.95em;
  /* color: #666; */
}

.featured-info-box:hover p {
  color: #666; 
}

.featured-info-box span {
  max-width: 64px;
  height: auto;
  margin-bottom: 15px;
}

.featured-info-box:hover span {
  color: var(--body-color);
}

/* 4 boxy - koniec */