:root {
    --kolor1: #0B2027;
    --kolor1rgb: 11, 32, 39;
    --kolor2: #70A9A1;
    --kolor3: #CFD7C7;
    --kolor-gb: #f3f3f3;
}
.kolor1{
    color: var(--kolor1);
  }
  .kolor2{
    color: var(--kolor2);
  }
  a.kolor2{
    color: var(--kolor2);
  }
  a.kolor2:hover{
    color: var(--kolor3);
  }
  .kolor3{
    color: var(--kolor3);
  }
  .kolorbg{
    color: var(--kolor-gb)!important;
  }
  a.kolorbg:hover{
    color: var(--kolor-gb);
  }
  
  .bg-kolor1{
    background: var(--kolor1)!important;
  }
  a.btn.bg-kolor1:hover, button.btn.bg-kolor1:hover{
    background: var(--kolor3)!important;
    color: var(--kolor1)!important;
  }
  .bg-kolor2{
    background: var(--kolor2)!important;
  }
  a.btn.bg-kolor2:hover, button.btn.bg-kolor2:hover{
    background: var(--kolor3)!important;
    color: var(--kolor1)!important;
  }
  .bg-kolor3{
    background: var(--kolor3)!important;
  }
  .bg-kolorbg{
    background: var(--kolor-gb)!important;
    color: var(--kolor1)!important;
  }
  a.btn.bg-kolor3:hover, button.btn.bg-kolor3:hover{
    background: var(--kolor3)!important;
    color: var(--kolor1)!important;
  }
body{
    font-family: 'Poppins', sans-serif;
    background: var(--kolor-gb);
}

/*======================================
-->   MENU
======================================*/

.navbar {
    background-color: rgba(var(--kolor1rgb), 0.8);
    padding-top: 18px;
    padding-bottom: 18px;
    box-shadow: 1px 2px 15px rgba(100, 100, 100, 0.3);
  }
  
  .navbar .nav-link {
    color: var(--kolor3);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.030em;
    transition: color .5s ease;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  
  .navbar .nav-link:hover {
    color: #F6F1D1;
    text-decoration: none;
  }
  
  .navbar .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #F6F1D1;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0;
  }
  
  .navbar .nav-link:hover::after {
    width: 100%;
  }

  .navbar-toggler {
    background-color: transparent;
  }
  
  .navbar-toggler span {
    display: block;
    background-color: #000000;
    height: 3px;
    width: 25px;
    margin: 5px 0;
    transition: all .4s ease;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }


  /* NAZWA SERWISU */

  .navbar .navbar-brand {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.030em;
  }
  
  .navbar .navbar-brand span {
    transition: color .5s ease;
  }
  
  .navbar .navbar-brand span:first-child {
    color: #70A9A1; 
  }

  .navbar .navbar-brand span:last-child {
    color: #CFD7C7;
  }
  
  .navbar .navbar-brand:hover span:first-child {
    color: #CFD7C7;
  }
  

/*======================================
-->   CAROUSEL
======================================*/
  

.custom-carousel, .carousel-item, .carousel-item.active {
    height: 50vh;
}

.custom-carousel .carousel-item {
    position: relative;
    height: 50vh;
    overflow: hidden; /* Pozostaw, aby zapobiec wyświetlaniu się obrazków poza kontenerem */
}

.custom-carousel .carousel-item img {
    width: 100%; /* Szerokość obrazka równa szerokości kontenera */
    height: 100%; /* Maksymalna wysokość obrazka */
    object-fit: cover;; /* Obrazek będzie pokrywał cały dostępny obszar, zachowując proporcje */
    position: relative; /* Pozycjonowanie względne */
    top: 50%; /* Przesunięcie od góry do 50% wysokości kontenera */
    transform: translateY(-50%); /* Przesunięcie obrazka w górę, aby środek był wyśrodkowany pionowo */
}

  .custom-carousel .carousel-inner {
    position: relative;
    overflow: hidden; /* Zapobiega wyświetlaniu się slajdów poza karuzelą */
}

.custom-carousel .carousel-item {
    position: absolute;
    top: 0;
    right: 100%; /* Zaczynamy poza widokiem z prawej strony */
    bottom: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease-in-out; /* Animacja przesuwania */
}

.custom-carousel .carousel-item.active {
    right: 0; /* Aktywny slajd przenosi się do widoku */
}

.custom-carousel .carousel-item-prev,
.custom-carousel .carousel-item-next,
.custom-carousel .carousel-item.active {
    position: relative;
    transform: translateX(0);
}

.custom-carousel .carousel-item-prev,
.custom-carousel .carousel-item-next {
    display: block;
}

.custom-carousel .carousel-item-left,
.custom-carousel .carousel-item-prev.left,
.custom-carousel .carousel-item-next.right,
.custom-carousel .carousel-item-right {
    position: absolute;
}

.custom-carousel .carousel-item-prev.left,
.custom-carousel .carousel-item-next.right {
    transform: translateX(0);
}

.custom-carousel .carousel-item-prev.left,
.custom-carousel .carousel-item-active {
    transform: translateX(-100%);
}

.custom-carousel .carousel-item-next.right,
.custom-carousel .carousel-item-active {
    transform: translateX(100%);
}

.custom-carousel .carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

.custom-carousel .carousel-caption h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.custom-carousel .carousel-caption p {
    font-family: 'Poppins', sans-serif;
    color: #ddd;
    font-size: 1rem;
}

.custom-carousel .carousel-control-prev,
.custom-carousel .carousel-control-next {
    color: #222;
    font-size: 2rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}


@media only screen and (max-width: 768px) {
    .custom-carousel .carousel-caption {
        display: none;
    }
}

/*======================================
-->   INNE
======================================*/

h2.section-title{
    color: var(--kolor1);
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 4rem;
    position: relative;
    padding-left: 5px;
    text-shadow: 0px 0px 6px var(--kolor-gb);
}

h2.section-title::after {
  content: '';
  display: block;
  width: 100%; /* Szerokość na 100%, aby była widoczna od razu */
  height: 4px; /* Wysokość podkreślenia */
  background: var(--kolor2);
  position: absolute;
  bottom: 5px; /* Ustawienie pozycji podkreślenia */
  left: 0;
  z-index: -1;
}

h2.section-title .section-icon {
    position: absolute;
    color: var(--kolor2);
    bottom: 14px; /* Ustawienie pozycji na końcu podkreślenia */
    right: 10px; /* Dostosuj według potrzeb */
    font-size: 60%; /* Zmniejszenie rozmiaru ikony o 50% */
}


section {
    padding-top: 8rem;
}


.new-card-box {
    margin-bottom: 10px;
}


.new-card-img img {
    /* Stylizacje dla obrazków */
    width: 100%;
    height: auto;
}

.new-card-content {
    /* Stylizacje dla treści pod obrazkiem */
    padding: 15px;
}

.new-card-title {
    /* Stylizacje dla tytułów */
    font-size: 1.2em;
    margin-bottom: 10px;
}

.new-card-description {
    /* Stylizacje dla opisów */
    font-size: 1em;
    color: #666;
}

.new-link {
    /* Stylizacje dla linków */
    color: #007bff;
    text-decoration: none;
}

.new-link:hover {
    /* Stylizacje dla linków przy najechaniu */
    color: #0056b3;
}

.new-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4.3, 12.5, 15.3, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.new-card-img {
    position: relative;
}

.new-card-img:hover .new-card-overlay {
    opacity: 1;
}


/* SEKCJA z zoomem obrazka */
.card-box-b{
    margin-bottom: 10px;
}

.custom-section .card-box-b {
    position: relative;
    overflow: hidden;
}

.custom-section .img-box-b img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.custom-section .card-box-b:hover .img-box-b img {
    transform: scale(1.1);
}

.custom-section .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(4.3, 12.5, 15.3, 0.7);
    transition: .5s ease;
    opacity: 1;
    padding: 20px;
}

.custom-section .card-category-b {
    position: absolute; /* Zmieniono na pozycjonowanie absolutne */
    top: 10px;         /* Ustawienie odległości od górnej krawędzi */
    left: 10px;        /* Ustawienie odległości od lewej krawędzi */
    background-color: var(--kolor1);
    color: var(--kolor3);
    border-radius: 10px;
    display: inline-block;
    padding: 5px 10px;
    z-index: 10;       /* Upewnij się, że element jest nad obrazkiem */
}

.custom-section .card-title-b {
    font-size: 3em;
    color: var(--kolor-gb);
    padding: 5px 0;
    text-align:center;
}

.custom-section .card-date {
    text-align: right;
    font-size: 0.8em;
    color: var(--kolor-gb);
}



/*======================================
-->   FORM
======================================*/

.form {
    max-width: 400px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.card-login {
    text-align: center;
    padding: 20px;
    border: 0;
}

.card-login .card-header{
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin: 0;
    padding: 0;
}

.card-header h3 {
    color: var(--kolor1);
    position: relative;
}

.card-login .card-body .input-group{
    padding-top: 10px;
}
.card-login .fa{
    margin: 0;
}
.card-login i{
    color: var(--kolor3);
}

.card-login .card-footer{
    background: none;
    border: 0;
}

.input-group-text {
    background-color: var(--kolor1);
    border: none;
    color: #fff;
}

.form-control {
    border-color: var(--kolor1);
}

.form-control:focus {
    box-shadow: 0 0 0px var(--kolor1);
    border: 1px solid var(--kolor1);
    background: var(--kolor2);
    color: var(--kolor-gb);
}

.form-control:focus::placeholder {
    color: var(--kolor-gb);
    opacity: 1;
  }

.form-check-label {
    color: var(--kolor1);
}

.btn {
    background-color: var(--kolor1);
    color: #fff;
}

.btn:hover {
    background-color: var(--kolor2);
    border: 1px solid var(--kolor3);
}

.fa {
    font-size: 20px;
    margin-right: 10px;
}

/*======================================
-->   FOOTER
======================================*/


  footer {
    background: var(--kolor1);
    text-align: center;
    padding: 30px 0;
    color: var(--kolor3);
    margin-top: 50px;
  }
  footer a{
    color: var(--kolor3);
  }
  
  footer a:hover{
    color: var(--kolor2);
  }

  footer .copyright-footer {
    border-top: 1px solid #ddd;
    padding-top: 20px;
  }
  
  footer .credits {
    font-size: 14px;
  }