* {
  box-sizing: border-box;
}


.navbar_KN {
    color: red;
    background-color: green;
}
.logo_KN{
    text-align: left;
    background-color: white;
}
.navbar-toggler-logo_COP{
    border: none;
    background: none;
    padding: 0;
    font-size: 1.25rem;
    color: inherit;
    cursor: pointer;
}
.btn_KN{
  font-family: 'Trebuchet MS';
}
.btn_KN:hover{
  /* font-weight: 600; */
  /* background-color: rgb(238, 231, 231); */
  color: rgb(106, 106, 217);
}
.btnMain_KN:hover{
  /* font-weight: 550 !important; */
  /* background-color: rgb(238, 231, 231); */
  color: rgb(106, 106, 217);
}
.collapse-button {
    display: none;
  }
  @media (max-width: 991.98px) {
    .collapse-button {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 10px;
    }
  }

.caveat_Google {
  font-family: "Caveat", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


.social-icon {
  width: 300px; /* Domyślna szerokość obrazka */
  height: auto; /* Automatyczne dostosowanie wysokości */
}
/* Media query dla urządzeń mobilnych */
@media (max-width: 768px) {
  .social-icon {
    width: 150px; /* Szerokość obrazka dla urządzeń mobilnych */
  }
}

.opinion-box {
  border: 1px solid #ddd; /* Obramowanie */
  border-radius: 10px; /* Zaokrąglone rogi */
  padding: 20px; /* Wewnętrzne odstępy */
  text-align: center; /* Wyśrodkowanie tekstu */
  font-family: 'Caveat', cursive; /* Styl czcionki */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cień */
  margin-top: 20px; /* Górny margines */
  color: black; /* Kolor tekstu */
}
.bg-1 {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); /* Gradient tła */
}
.bg-2 {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Gradient tła */
}
.bg-3 {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); /* Gradient tła */
}
.bg-4 {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); /* Gradient tła */
}
.opinion-text {
  font-size: 1.2rem; /* Wielkość czcionki tekstu opinii */
  margin-bottom: 10px; /* Dolny margines */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
.opinion-author {
  font-size: 1rem; /* Wielkość czcionki autora opinii */
  font-style: italic; /* Kursywa dla autora */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.fas {
  color: #fff; /* Kolor ikon Font Awesome */
}
@media (min-width: 768px) {
  .opinion-box {
    margin-left: 20px; /* Lewy margines */
    margin-right: 20px; /* Prawy margines */
  }
}

    .img-responsive {
      max-height: 100px; /* Domyślna wysokość dla widoków mobilnych */
    }
    @media (min-width: 768px) {
      .img-responsive {
        max-height: 150px; /* Większa wysokość dla widoków standardowych */
      }
      #header-text {
        font-size: 2.5rem; /* Większa czcionka dla widoków standardowych */
      }
    }
    @media (max-width: 768px) {
      #header-text {
        font-size: 1.5rem; /* Większa czcionka dla widoków standardowych */
      }
    }



      @media (min-width: 992px) {
        .navbar-nav {
          justify-content: center; /* Wyśrodkowanie elementów na większych ekranach */
          width: 100%; /* Rozciągnięcie elementów na całą szerokość */
        }
      }
        .navbar-nav > li {
          flex: 1; /* Równe rozciągnięcie elementów na całą szerokość */
        }
    

    .flex-grow-1 {
      flex-grow: 1; /* Standardowy wzrost dla pozostałych elementów */
    }
    .flex-grow-2 {
      flex-grow: 2; /* Większy wzrost dla ostatniego elementu */
    }
    .flex-grow-3 {
      flex-grow: 3; /* Większy wzrost dla ostatniego elementu */
    }


    .my-row {
      border-bottom: 2px solid #000; /* Ustawienie obramowania tylko na dole na 2px, czarny kolor */
      padding: 10px; /* Odstęp wewnętrzny (opcjonalne) */
    }

    @media (min-width: 768px) {
      .contact-p-spacing p {
        margin: 20px 0; /* Większy odstęp dla widoków standardowych */
      }
    }
    
    @media (max-width: 767px) {
      .contact-p-spacing p {
        margin: 5px 0; /* Mniejszy odstęp dla widoków mobilnych */
      }
    }
    




/* Questions */
.questionText {
  font-family: 'Exo 2', sans-serif;
}

.exo-2_Google {
  font-family: "Exo 2", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.questionsAtlernativeBgColor {
  background-color: rgb(244, 244, 244);
}


/* Realizations / Patterns / Delivery */
@media (max-width: 767px) {
  .mobile-margin-realizations {
    margin-top: 40px;
    margin-bottom: 10px; /* Dodanie marginesu góra-dół dla widoku mobilnego */
  }
}
.realization-text {
  text-align: center; /* Wyśrodkowanie tekstu */
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

/* GAZEBOS */
.gazebo-name-font {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.0rem;
  min-height: 2.2em; /* gwarantuje 2 linie tekstu */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 576px) {
  .gazebo-name-font {
    font-size: 1rem;
    min-height: 2.8em;
  }
}


.gazebo-description {
  font-size: 1rem;
  text-align: center;
  margin-top: 0; /* usunięty górny odstęp */
  margin-bottom: 0; /* usunięty górny odstęp */
}

@media (max-width: 576px) {
  .gazebo-description {
    font-size: 0.85rem;
  }
}

    .border_gazebos {
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      color: inherit;
      transition: transform 0.2s;
      background-color: #fff;
      padding: 0.5rem;
    }

    .border_gazebos:hover {
      transform: scale(1.05);
    }
      .gazebo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
    }

.gazebo-box {
  flex: 0 0 calc(50% - 1rem); /* 2 kolumny na telefonie */
}

@media (min-width: 768px) {
  .gazebo-box {
    flex: 0 0 calc(33.333% - 1rem); /* 3 kolumny na tabletach */
  }
}

@media (min-width: 992px) {
  .gazebo-box {
    flex: 0 0 calc(25% - 1rem); /* 4 kolumny na desktopie */
  }
}


.contact_button {
  background-color: #75d175; /* Jasny zielony kolor */
  color: white; /* Biały tekst */
  border: none;
  padding: 15px 30px;
  font-size: 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: block;
}

.contact_button:hover {
  background-color: #228b22; /* Ciemny zielony przy najechaniu */
  color: white;
}

.contact_button_mail {
  background-color: #5962e0; /* Jasny zielony kolor */
  color: white; /* Biały tekst */
  border: none;
  padding: 15px 30px;
  font-size: 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: block;
}

.contact_button_mail:hover {
  background-color: #212cc5; /* Ciemny zielony przy najechaniu */
  color: white;
}


/* Wyrównanie tekstu do lewej tylko na ekranach większych od 768px */
@media (min-width: 768px) {
  .contact_button_text_left {
    text-align: center;
  }
}

#technical-summary-section {
  margin-top: 50px; /* Większy margines nad całym fragmentem */
}

#technical-summary-section .col-md-6.pb-3 {
  margin-bottom: 30px; /* Większy margines między sekcjami */
}








.color-selection {
  display: flex;
  gap: 10px;
}

.color-square {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.color-input {
  display: none;
}

.color-input:checked + .color-square {
  border-color: #000;
  border-width: 4px;
  transform: scale(1.1);
}



.gont-selection {
  display: flex;
  gap: 10px;
}

.gont-square {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.gont-input {
  display: none;
}

.gont-input:checked + .gont-square {
  border-color: #000;
  border-width: 4px;
  transform: scale(1.1);
}

/* XXXXXXXXXXXXXXXXX */

.custom-select {
  appearance: none; /* Usunięcie domyślnego wyglądu */
  background-color: #ffffff; /* Klasyczne białe tło */
  border: 1px solid #cccccc; /* Subtelne obramowanie */
  border-radius: 4px; /* Delikatne zaokrąglenie */
  padding: 8px 12px; /* Wewnętrzne odstępy dla wygody */
  font-size: 16px; /* Wyraźna, klasyczna czcionka */
  color: #333333; /* Stonowany kolor tekstu */
  cursor: pointer; /* Kursor wskazujący */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Subtelna animacja */
}

.custom-select:hover {
  border-color: #0078d4; /* Zmiana obramowania na delikatny niebieski przy najechaniu */
  box-shadow: 0 0 5px rgba(0, 120, 212, 0.3); /* Miękki efekt świetlny */
}

.custom-select:focus {
  outline: none; /* Brak domyślnego zaznaczenia */
  border-color: #005a9e; /* Mocniejszy niebieski na focus */
  box-shadow: 0 0 8px rgba(0, 90, 158, 0.5); /* Intensywniejszy efekt focus */
}

.custom-select option {
  background-color: #ffffff; /* Opcje zachowują klasyczne białe tło */
  color: #333333; /* Tekst opcji w subtelnym kolorze */
}



/* xxxxxxxxxxxxxxxxx */






/* PRODUCTS */
.price_style{
  font-family: "Exo 2", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: rgb(106, 162, 23);

}
.choice_style{
  font-weight: 600;
  
}
.width-choose-field {
  width: 100%; /* Ustawienie szerokości na 100% rodzica */
  max-width: 250px; /* Maksymalna szerokość pola wyboru */
}


/* START Photos section on product */
.btn-close {
  transform: scale(1.5); /* Zwiększa rozmiar o 50% */
  filter: invert(19%) sepia(97%) saturate(7483%) hue-rotate(0deg) brightness(100%) contrast(119%);
}
img[data-bs-toggle="modal"]:hover {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
  .mobile-margin-realizations-product {
    /* margin-top: 40px; */
    margin-bottom: 10px; /* Dodanie marginesu góra-dół dla widoku mobilnego */
  }
}
/* END Photos section on product */

.fixed-image {
  height: 200px;
  object-fit: contain;
  width: 100%;
}
@media (max-width: 767px) {
  .fixed-image {
    max-height: 100px;
    object-fit: contain;
  }
}



/* Image CLICK */
.realization-img {
    transition: filter 0.3s ease;
}

.realization-img:hover {
    filter: brightness(1.1) saturate(1.8);
 }