:root {
  --card-w: 280px;
  --border-width: 1px;
  --border-1: var(--primary-500);

  /* top */
  --border-2: var(--primary-600);

  /* bottom */
  --primary-700: hsl(243, 26%, 15%);
  --primary-600: hsl(248, 4%, 43%);
  --primary-500: hsl(257, 3%, 47%);
  --surface-3: var(--primary-700);
}

html {
  scroll-behavior: smooth;
}

.our-mission-bg {
  filter: opacity(0.2) grayscale();
}

.bg-image::after {
  content: "";
  border: solid 1px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    50deg,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(26, 26, 26, 0.64) 56%,
    rgba(121, 121, 121, 0) 100%
  );
  z-index: 1;
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/bg.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.72) contrast(1.2) grayscale(10%);
  z-index: 0;
}

.arrow-box__left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 101.3%;

  /* trójkąt wyjdzie na prawo od boxa */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid rgba(255, 255, 255, 0.5);

  /* kolor trójkąta */
}

.arrow-box__right::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -7.3%;

  /* trójkąt wyjdzie na prawo od boxa */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 14px solid rgba(255, 255, 255, 0.5);

  /* kolor trójkąta */
}

.card {
  width: var(--card-w);

  /* height: 350px; */
}

.card-clipm {
  clip-path: path(
    "M 0,340 L 0,40 A 10,10 0,0,1 10,30 L 180,30 A 10,10 0,0,0 190,20 L 190,10 A 10,10 0,0,1 200,0 L 270,0 A 10,10 0,0,1 280,10 L 280,340 A 10,10 0,0,1 270,350 L 10,350  Z"
  );
}

.card > img {
  width: var(--card-w);
  aspect-ratio: 5/7;
  object-fit: cover;
}

.card-content {
  position: absolute;
  transform: rotate(90deg);
  transform-origin: 0 top;
  top: 0;
  right: 100%;
  left: 123%;
}

.card-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2px;
  width: 300px;
  height: 150px;
  border-radius: 0.25rem;
  background: hsl(from var(--surface-3) h s l / 0.15);
  backdrop-filter: blur(12px);
}

.card-2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  border: var(--border-width) solid transparent;
  background: linear-gradient(
      rgba(255, 255, 255, 0.225),
      rgba(255, 255, 255, 0.125)
    )
    border-box;

  /* background-color: aqua; */
  mask: linear-gradient(black, black) border-box,
    linear-gradient(black, black) padding-box;
  mask-composite: subtract;
}

.icon-bg {
  background-color: rgba(9, 200, 6, 0.584);
}

.bg-gradient-myover {
  filter: brightness(1);
  background: linear-gradient(
    120deg,
    rgba(230, 224, 69, 1) 30%,
    rgba(78, 172, 145, 1) 56%,
    rgba(36, 64, 138, 1) 100%
  );
}

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.mozaika {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
  height: 400px;

  /* margin: auto; */
}

.maraton-card {
  background-color: rgba(20, 20, 20, 0.95);
  box-shadow: 0 0 100px 80px rgba(0, 0, 0, 0.7);
}

.mozaika div {
  position: relative;
  overflow: hidden;
}

.mozaika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.3);
  transition: all 250ms;
}

.img1 {
  flex: 2 1 calc(66.66% - 5px);
  height: calc(60% - 5px);
}

.img2 {
  flex: 1 1 calc(33.33% - 5px);
  height: calc(60% - 5px);
}

.img3 {
  flex: 1 1 calc(50% - 5px);
  height: calc(40% - 5px);
}

.img4 {
  flex: 1 1 calc(50% - 5px);
  height: calc(40% - 5px);
}

.transparent-bg {
  background-color: rgba(34, 45, 53, 0.3);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  /* 5 kolumn */
  grid-template-rows: repeat(4, auto);

  /* 4 wiersze */
  grid-template-areas:
    ". . . img1 img2"
    ". . img3 cw-on-board img4"
    ". img5 views img6 atmo"
    "img7 comfort img8 relax img9";
}

.grid-item {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.grid-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.grid-item.text {
  padding: 24px;
  background-color: #f5f5f5;
}

.img1 {
  grid-area: img1;
}

.img2 {
  grid-area: img2;
}

.img3 {
  grid-area: img3;
}

.img4 {
  grid-area: img4;
}

.img5 {
  grid-area: img5;
}

.img6 {
  grid-area: img6;
}

.img7 {
  grid-area: img7;
}

.img8 {
  grid-area: img8;
}

.img9 {
  grid-area: img9;
}

.cw-on-board {
  grid-area: cw-on-board;
}

.views {
  grid-area: views;
}

.atmo {
  grid-area: atmo;
}

.relax {
  grid-area: relax;
}

.comfort {
  grid-area: comfort;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.gradient-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.card-hover:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.icon-lg {
  width: 3rem;
  height: 3rem;
  fill: currentColor;
}

.icon-xl {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.wave-background {
  position: relative;
  background: linear-gradient(to bottom, #e0f7fa, #ffffff);

  /* przykładowe tło */
  overflow: hidden;
}

.wave-background::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'><path fill='%23ffffff' fill-opacity='1' d='M0,160L40,165.3C80,171,160,181,240,176C320,171,400,149,480,149.3C560,149,640,171,720,165.3C800,160,880,128,960,106.7C1040,85,1120,75,1200,96C1280,117,1360,171,1400,197.3L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z'/></svg>")
    no-repeat bottom center;
  background-size: cover;
  pointer-events: none;

  /* fale są tylko tłem */
}

.navbar-scrolled {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-scrolled .logo {
  transform: scale(0.8);
}

.logo {
  transition: transform 0.3s ease;
}

.navbar {
  transition: all 0.3s ease;

  /* Added semi-transparent background so white text is always visible */
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Media queries dla lepszego dopasowania obrazka */
/* Małe urządzenia (telefony) */
@media (max-width: 768px) {
  .bg-image::before {
    background-image: url("assets/small-bg.jpg");
    background-size: cover;
    background-position: center center;

    /* Opcjonalnie: zmień pozycję na górę jeśli ważne elementy są u góry */
    /* background-position: center top; */
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "img1 cw-on-board"
      "views img4"
      "img5 atmo"
      "relax img8"
      "img9 comfort"
      "img2 img3"
      "img6 img7";
  }

  .grid-item {
    min-height: 120px;
  }
}

/* Średnie urządzenia (tablety) */
@media (min-width: 769px) and (max-width: 1024px) {
  .bg-image::before {
    background-image: url("assets/small-bg.jpg");
    background-size: cover;
    background-position: center top;
  }
}

/* Orientacja pozioma na urządzeniach mobilnych */
@media (max-width: 768px) and (orientation: landscape) {
  .bg-image::before {
    background-size: cover;
    background-position: center center;

    /* Możesz dostosować pozycję dla krajobrazu */
    background-position: center top;
  }
}

.swiper {
  padding: 40px 0;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
}

.bg-green {
  background-color: rgba(124, 207, 0, 0.1);
}