* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }


  body {
    /* font-family: 'Segoe UI', sans-serif;  */
    background: white;
    color: #1e1e1e;
    line-height: 1.6;
     font-family: 'Lato', sans-serif;
  }
  header {
    display: flex;
    align-items: stretch; /* ważne! */
    justify-content: center;
    background: #706c6c;
    padding: 0; /* padding przeniesiemy do elementów wewnętrznych */
    color: white;
    
  }
  
  .logo {
    display: flex;
    align-items: center;
    padding: 0 2rem;
  }
  
  .logo img {
    height: 60px;
  }
  
  nav {
    
    display: flex;
  }
  
  nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    align-items: stretch;
  }
  
  nav li {
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  
  nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.5rem;
    color: white;
    text-decoration: none;
    font-size: 1.4rem;
    height: 100%;
    transition: background-color 0.3s, color 0.3s;
  }
  
  nav li:hover {
    background-color: #ffffff;
  }
  
  nav a:hover {
    color: #ee5e5b;
    text-decoration: none;
  }
  
  

  .lang-switch button {
    margin-left: 0.5rem;
    background: #ee5e5b;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    font-weight: bold;
    cursor: pointer;
  }

  .lang-switch button:not(.active) {
    background: #ccc;
    color: black;
  }

  main {
    padding: 3rem 2rem;
  }

  .about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }

  .about .text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
  }

  .about .text h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .about .text p {
    margin-bottom: 1rem;
  }

  .about .text strong {
    font-weight: 700;
  }

  .about .image img {
    border-radius: 1rem;
    max-width: 400px;
    width: 100%;
    height: auto;
  }




  .nav2 ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

 .nav2 a {
    color: white;
    text-decoration: none;
    font-weight: 500;
  }

  .nav2 a.highlight {
    color: #f06000;
  }

  .dark-section{

    display: flex;
    
    justify-content: space-between;
    background: #1e2626;
    height: 90vh;
    color: white;
    flex-wrap: wrap;
  }

  .container-footer{

    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    padding: 2rem;
  }


  .top-bar {
    background-color: white;
    padding: 10px 0;
    border-bottom: 2px solid #ddd;
    font-size: 0.95rem;
}

.top-bar a, .top-bar p {
    color: #555;
    margin-bottom: 0;
}

.top-bar .highlight {
    color: #ee5e5b;
    font-weight: 600;
}

.top-bar i {
    color: #ee5e5b;
    margin-right: 5px;
}

.logo-text {
    font-weight: bold;
    font-size: 1.4rem;
    color: #555;
}

.logo-subtext {
    color: #ee5e5b;
    font-size: 0.8rem;
}

.social-icons a {
    color: #ee5e5b;
    margin-left: 10px;
}

.top-bar .contact-item {
    margin-left: 20px;
}

.logo15{

    display: flex;
    align-items: center;

    border: 3px solid #f06000;
    border-radius: 10%;
    height: 100%;
    text-align: center;
    margin: 0;
  
}

.krs-box {
    border: 4px solid #ee5e5b;
    border-radius: 25px;
    
    display: flex;
    align-items: center;
    width: fit-content;
    background-color: white;
    color: #ee5e5b;
    font-weight: bold;
    font-size: 1.5rem;
    height: 90%;
  }
  
  .krs-value,
  .krs-symbol {
    padding: 0 10px;
  }
  
  .krs-separator {
    width: 4px;
    height: 60px;
    background-color: #ee5e5b;
    margin: 0 5px;
  }
  

  .custom-caption {
    font-size: 2rem ;
    top: 20%;            /* Wyżej */
    left: 14%;            /* Lewa strona */
    z-index: 10;
    max-width: 80%;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    
  }

  .custom-caption a {

    font-size: 1.2rem;
    margin-top: 0;
  }
  

  .logo-colored {
    color: #ee5e5b;
  }
  

  .carousel-control-prev-icon,
.carousel-control-next-icon {
    
  width: 4rem !important;   /* domyślnie jest 20px */
  height: 4rem  !important;
  background-size: 100% 100%;
  filter: invert(100%); /* jeśli chcesz, żeby były białe */

 
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Przyciemnia tło */
    z-index: 1;
  }
  

.whatWeDo{


  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

}







/* Ogólne style galerii */
.kot {
    background-color: #ffffff;  /* Białe tło dla każdego kotka */
            /* Zaokrąglone rogi dla estetyki */
    overflow: hidden;            /* Ukrycie nadmiarowych elementów (np. obrazków wychodzących poza kontener) */
   

}

/* Efekt przy najechaniu */
.kot:hover {
    cursor: pointer;
}

/* Wymiary obrazków */
.kot-image {
    width: 100%;
    height: 200px; /* Wszystkie obrazki będą miały tę samą wysokość */
    object-fit: cover; /* Dopasowanie zdjęcia bez zniekształceń */
    border-radius: 8px; /* Zaokrąglone rogi dla zdjęć */
}

/* Stylizacja tekstu */
.kot-name {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    color: #333; /* Ciemniejszy kolor dla imienia */
    text-align: left;
}

.kot-age {
   text-align: left;
    font-size: 1rem;
    color: #555; /* Szary kolor dla wieku */
}

.kot-description {
    font-size: 0.9rem;
    color: #777; /* Jaśniejszy szary dla opisu */
    margin-top: 10px;
     text-align: left;
}




.kot .card-body{

  /* background-color: #ee5e5b; */
  opacity: 0.8;
  
}



.kot .card-body .btn{

  background-color: #fff;
  border: #fff;
  color: #1e2626;
}

.kot .card-body .btn:hover{

  background-color: #fff;
  border: #fff;
  color: #1e2626;
}

.kot .card-text{
  color: #000000;
   text-align: justify;
   font-size: 1rem;
}

.kot .card-title h5{

  color: rgb(0, 0, 0);
  font-family: monospace !important;
}

.kot .card-title h5:hover{

  color: #ee5e5b;
}

 .kot .card {
  overflow: hidden;
  height: 300px;
  position: relative;
  transition: all 0.3s ease;
  
}

.kot .card-img-top {
 
  height: 250px;
  object-fit: cover;
  width: 100%;
  transition: all 0.4s ease;

}

.kot .card-body {
  transition: all 0.3s ease;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fafafb;
}



.link{
  text-align: start;
  color: #ee5e5b;
}












/* ======================================================================================================== */

footer {
  background-color: #2c3e50; /* Ciemnoniebieski/szary */
  color: #ecf0f1;          /* Bardzo jasny szary/biały */
  padding: 30px 20px;
  text-align: center;
  margin-top: 50px;
  opacity: 0;
}

.footer-container p {
  margin-bottom: 15px;
  font-size: 1.1em;
}

.social-icons a {
  color: #ecf0f1;
  font-size: 1.8em;        /* Większe ikony */
  margin: 0 12px;
  transition: color 0.3s ease; /* Płynne przejście koloru */
}

.social-icons a:hover {
  color: #3498db;          /* Kolor po najechaniu (np. niebieski) */
}

/* Jeśli nie używasz Font Awesome, musisz dostarczyć własne ikony jako obrazy lub SVG */

.charleft.ginput_counter.gfield_description {
  display: none !important;
}



.overlay {
  position: absolute;
  z-index: 1;
}

.navbar {
  position: relative;
  z-index: 10;
}

.dropdown-menu {
  z-index: 15;
}


.cat-container {
    position: relative;
    display: inline-block;
}

.heart-number {
    position: absolute;
    top: 22%;   /* przesunięcie w pionie */
    left: 15%;  /* przesunięcie w poziomie */
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none;
}


input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #ee5e5b; /* kolor przycisku */
}