/* Kod do zakladki projekty */
.card {
    width: 90%; /* lub np. max-width: 350px; */
    height: 550px; /* stała wysokość dla wszystkich kart */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
    border-radius: 12px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    transition: transform 0.2s ease-in-out;
    position: relative;
    
  
  }
  
  .card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

  .card-body {
    background-color: #fff;
    padding: 15px;
    text-align: center;
    flex-grow: 1;
  }


.card-title {
    font-size: 1.25rem; /* Większa czcionka tytułu */
    font-weight: bold;
}

.card-text {
    color: #666; /* Przyjemniejszy kolor tekstu */
}


.card:hover {
    transform: scale(1.50); /* Powiększenie przy najechaniu */
    z-index: 10; /* Wysunięcie na wierzch */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Mocniejszy cień */
}

h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    position: relative;
}



h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background-color: #333;
    margin: 10px auto 0;
}

h2.no-border::after {
  display: none;
}



/* strzałki */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: white; /* Jasne tło */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  opacity: 1; /* zawsze widoczne */
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 1 1-.708-.708L9.293 8 4.646 3.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.carousel-logo {
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 500px; /* Zwiększ rozmiar, jeśli chcesz */
  height: auto;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out; /* Zmieniamy czas przejścia na 1 sekundę */
}

.carousel-logo.fade-in {
  opacity: 1;
}

.carousel-logo.fade-out {
  opacity: 0;
}
/* centrowanie zdjecia do aranzacji */
.centered-img {
  object-fit: contain;
  height: 230px;
  width: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .card {
    width: 90%;
    margin: 20px auto;
    transform: none !important;
    overflow: hidden; /* najważniejsze – obcina wystające strzałki */
    height: 690px; /* <-- DODAJ TEN PARAMETR lub dostosuj wartość */
  }

  .card:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

 
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 30px;
      height: 30px;
      background-size: 60% 60%;
    }
  

  .carousel-control-prev,
  .carousel-control-next {
    width: 15%; /* ogranicza klikane pole po bokach */
  }

  .carousel-inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .card-img-top {
    height: auto;
    max-height: 200px;
    object-fit: cover;
  }
}
/* Koniec kod do zakladki projekty */
/* Kod do zakladki oferty */
.card1 {
  width: 90%; /* lub np. max-width: 350px; */
  height: 400px; /* stała wysokość dla wszystkich kart */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  border-radius: 12px; /* Zaokrąglone rogi */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Delikatny cień */
  transition: transform 0.2s ease-in-out;
  position: relative;
  

}


@media (max-width: 768px) {
.card1 {
  width: 90%;
  margin: 20px auto;
  transform: none !important;
  overflow: hidden; /* najważniejsze – obcina wystające strzałki */
  
}

}


   .gallery-tile {
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            margin: 10px;
            display: inline-block;
        }
        .gallery-images {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .gallery-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }
        .gallery-images img.active {
            display: block;
        }
        .gallery-controls {
            text-align: center;
            margin: 10px 0;
        }
        .gallery-controls button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        .gallery-controls button:hover {
            background-color: #0056b3;
        }
        .description {
            padding: 15px;
            text-align: left;
        }


        
        
        .gallery-container {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          max-width: 1400px; /* zwiększamy */
          margin: 50px auto;
          margin-top: -20px;
          gap: 30px;
        }
        
        .gallery {
          position: relative;
          width: 700px; /* Powiększona szerokość */
          height: 460px; /* Powiększona wysokość */
          margin-top: 0; /* Usunięcie negatywnego marginesu */
        }
        
        .gallery img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px;
          display: none;
        }
        
        .gallery img.active {
          display: block;
        }
        
        .thumbnails {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 13px;
        }
        
        .thumbnails img {
          width: 80px;
          height: 50px;
          object-fit: cover;
          cursor: pointer;
          border: 2px solid transparent;
        }
        
        .thumbnails img.active {
          border: 2px solid #333;
        }
        
        .description {
          display: flex;
          width: 40%; /* Reszta kontenera */
          padding-left: 20px; /* Odstęp od galerii */
          flex-direction: column;
          justify-content: flex-start;
          text-align: left;
          margin-top: -10px;
        }
        
        .description h2 {
          font-size: 35px;
          margin-bottom: 10px;
          position: relative;
          text-align: center;
        }
        
        .description h2::after {
          content: '';
          display: block;
          width: 50px;
          height: 3px;
          background-color: #4a4a4a;
          margin-top: 6px;
          margin-left: auto;
          margin-right: auto;
        }
        
        .desc-area {
          font-size: 20px;
          margin-bottom: 15px;
          color: #2e2c2c;
        }
        
        .desc-text {
          font-size: 15px;
          line-height: 1.6;
          color: #222020;
        }
        
        .description ul {
          list-style-type: disc;
          margin-left: 20px;
          padding-left: 10px;
        }
        
        .description li {
          font-weight: normal;
          margin-bottom: 5px;
        }
        
        .nav-button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          background-color: rgba(255, 255, 255, 0.6); /* półprzezroczyste tło */
          border: none;
          border-radius: 50%;
          font-size: 20px;
          color: #333;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* cień */
          transition: background-color 0.3s ease;
          z-index: 10;
        }
        
        .nav-button:hover {
          background-color: rgba(255, 255, 255, 0.9);
        }
        
        .prev {
          left: 10px;
        }
        
        .next {
          right: 10px;
        }
        
        /* RESPONSYWNOŚĆ NA TELEFONY */
        @media (max-width: 768px) {
          .gallery-container {
            margin-top: 10px;
            flex-direction: column;
            align-items: center;
            padding: 0 15px;
          }
        
          .gallery {
            width: 100%; /* Dostosowanie galerii na małe ekrany */
            height: auto;
            margin-left: 0;
          }
        
          .thumbnails {
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
          }
        
          .thumbnails img {
            margin-top: 13;
            width: 60px;
            height: 40px;
          }
        
          .description {
            text-align: center;
            width: 100%;
            padding-left: 0;
          }
        
          .description h2 {
            font-size: 28px;
          }
        
          .desc-area {
            font-size: 18px;
          }
        
          .desc-text {
            font-size: 14px;
          }
        
          .description ul {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 10px;
          }
        }
        
        /* Responsywność na mniejszych urządzeniach */
        @media (max-width: 480px) {
          .description h2 {
            font-size: 24px;
          }
        
          .desc-area {
            font-size: 16px;
          }
        
          .desc-text {
            font-size: 13px;
          }
        }
        /* Mapka */
        .map-container {
          max-width: 800px; /* zmniejszamy szerokość na desktopie */
          margin: 40px auto;
          padding: 0 15px;
          text-align: center;
        }
        
        .map-container h3 {
          font-size: 24px;
          margin-bottom: 15px;
          color: #333;
        }
        
        /* Responsywna mapa */
        .map-responsive {
          position: relative;
          width: 100%;
          padding-bottom: 50%; /* proporcje 2:1 (możesz dać 56.25% dla 16:9) */
          height: 0;
          overflow: hidden;
          border-radius: 15px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .map-responsive iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 0;
          border-radius: 15px;
        }

        .video-container {
          position: relative;
          padding-bottom: 40%; /* proporcje 16:9 */
          height: 0;
          overflow: hidden;
          border-radius: 15px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          margin: 30px auto;
          max-width: 1000px; /* zmniejszenie maksymalnej szerokości na komputerach */
          max-height: 50px;
        }
        
        @media (max-width: 768px) {
          .video-container {
            padding-bottom: 56.25%; /* proporcje 16:9 zachowane na telefonach */
            max-width: 100%; /* pełna szerokość na telefonie */
          }
        }
        
        .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
        }


        
          /*oferty*/
        

        .section-title {
          font-size: 2rem;              /* duży, czytelny nagłówek */
          text-align: center;           /* wyśrodkowanie */
          font-weight: 500;             /* średnia waga – nowoczesna */
          color: #222;                  /* ciemny odcień – nie czysto czarny */
          margin-bottom: 10px;
          position: relative;
          margin-top: 0px;
      }
      
      /* Kreska pod spodem */
      .section-title::after {
          content: "";
          display: block;
          width: 110px;                  /* długość kreski */
          height: 4px;                  /* grubość kreski */
          background-color: #222;       /* kolor kreski */
          margin: 10px auto 0 auto;     /* wyśrodkowanie */
          border-radius: 2px;           /* lekko zaokrąglone końce */
      }

      @media (max-width: 768px) {
        .section-title {
            margin-top: 30px; /* lub inna wartość, zależnie od efektu */
            font-size: 1.5rem; /* opcjonalnie: ciut mniejszy font na telefonie */
        }
    
        .section-title::after {
            width: 70px;  /* proporcjonalnie krótsza kreska na małych ekranach */
            height: 3px;
        }



    }
    .section-title-technikum {
      font-size: 2rem;              /* duży, czytelny nagłówek */
      text-align: center;           /* wyśrodkowanie */
      font-weight: 500;             /* średnia waga – nowoczesna */
      color: #222;                  /* ciemny odcień – nie czysto czarny */
      margin-bottom: 10px;
      position: relative;
      margin-top: -90px;
  }
  
  /* Kreska pod spodem */
  .section-title-technikum::after {
      content: "";
      display: block;
      width: 110px;                  /* długość kreski */
      height: 4px;                  /* grubość kreski */
      background-color: #222;       /* kolor kreski */
      margin: 10px auto 0 auto;     /* wyśrodkowanie */
      border-radius: 2px;           /* lekko zaokrąglone końce */
  }

  @media (max-width: 768px) {
    .section-title-technikum {
        margin-top: 30px; /* lub inna wartość, zależnie od efektu */
        font-size: 1.5rem; /* opcjonalnie: ciut mniejszy font na telefonie */
    }

    .section-title-technikum::after {
        width: 70px;  /* proporcjonalnie krótsza kreska na małych ekranach */
        height: 3px;
    }
}