@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

body {
    background-color: #FFFFFF; /* Tło strony */
    font-family: 'Montserrat', sans-serif;  /* Czcionka */
    color: #616161; /* Kolor tekstu */
    margin: 0;
    padding: 0;
}

a:link {
    color: #CC0000; /* Kolor linków */
	text-decoration: underline;
}

a:hover {
    color: #A20000; /* Kolor linków po najechaniu */
    text-decoration: underline;
}

/* Kartki */
.card {
    margin-bottom: 30px; /* Odstępy między kartami */
}

.card-title {
    font-size: 1.4rem; /* Wielkość tytułów */
    font-weight: 500;
}

.card-body {
    padding: 20px;
}

.card-img-top {
    width: 100%;
    height: auto;
    border-top-left-radius: 0px;
}

/* Tekst */
.card-text {
    font-size: 1rem;
    line-height: 1.6;
}

#contact button[type="submit"]:disabled {
  background-color: grey; /* Szary kolor tła dla nieaktywnego przycisku */
  cursor: not-allowed; /* Zmiana kursora, aby sugerować, że przycisk jest zablokowany */
  opacity: 0.5; /* Zmniejszenie przejrzystości, aby pokazać, że przycisk jest nieaktywny */
}

#contact button[type="submit"]:not(:disabled) {
  background: #F50000; /* Kolor tła aktywnego przycisku */
  cursor: pointer;
}

#contact button[type="submit"]:hover:not(:disabled) {
  background: #A20000; /* Kolor tła przycisku po najechaniu */
}

#contact button[type="submit"]:active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input[type="text"], 
#contact input[type="email"], 
#contact input[type="tel"], 
#contact input[type="url"], 
#contact textarea, 
#contact button[type="submit"] { 
  font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; 
}

#contact {
  background: #FFFFFF;
  padding: 25px;
  margin-top: 15px 0;
}

#contact h3 {
  color: #F96;
  display: block;
  font-size: 30px;
  font-weight: 400;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"], 
#contact input[type="email"], 
#contact input[type="tel"], 
#contact input[type="url"], 
#contact textarea {
  width: 100%;
  border: 1px solid #CCC;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover, 
#contact input[type="email"]:hover, 
#contact input[type="tel"]:hover, 
#contact input[type="url"]:hover, 
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #AAA;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: auto; /* Umożliwia dopasowanie szerokości przycisku do tekstu */
  min-width: 150px; /* Możesz dostosować tę wartość, aby przycisk miał minimalną szerokość */
  max-width: 100%; /* Zapewnia, że przycisk nie będzie szerszy niż kontener */
  border: none;
  background: #F50000;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
  border-radius: 8px;
  white-space: nowrap; /* Zapobiega zawijaniu tekstu na przycisku */
  text-overflow: ellipsis; /* Jeśli tekst jest za długi, wyświetli się wielokropek */
  overflow: hidden; /* Zapobiega przekraczaniu przycisku */
}

#contact button[type="submit"]:hover {
  background: #A20000;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus, 
#contact textarea:focus {
  outline: 0;
  border: 1px solid #999;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}.card #collapseOne1 #contact {
    margin-top: 0px;
}
.card.col-md-4.col-xl-12 .card-body.text-center a {
    font-size: large;
    font-weight: bold;
}
.card.col-md-4.col-xl-12 .card-body.text-center a {
    font-weight: bold;
    font-size: large;
}
.container-fluid .container .card.col-md-4.col-xl-12.ziel {
    padding-right: 33px;
    padding-left: 33px;

}
h5 a .btn.btn-lgreen {
    background-color: #326B2F;
    color: #FFFFFF;
    font-size: large;
    border-radius: 8px;
    font-weight: bolder;
    width: 96%;
    margin: 0 auto;
    display: block;
	text-decoration: underline;
}
.container .card.col-md-4.col-xl-12 .card-text.text-center.stopka {
    font-size: small;
    text-align: center;
}
.container .card.col-md-4.col-xl-12 .row {
    padding-bottom: 0px;
    margin-bottom: 0px;
}




.row .col-xl-4 .card.col-md-4.col-xl-12 {
    margin-top: 18px;
    margin-bottom: 18px;
    padding-top: 16px;
    border-radius: 7px;
    border-color: #808080;
    border-width: thick;
    }

.row .col-xl-4 .card.col-md-4.col-xl-12.dol {
    margin-top: 18px;
    margin-bottom: 18px;
    padding-top: 16px;
    border-radius: 7px;
    border-color: #808080;
    border-width: thick;
	    }
.col-12.col-lg-4 .card .card-body.dol {
}

.dol {
}
.row .col-xl-4 .card.col-md-4.col-xl-12.dol {
    height: 250px;
}
.card.col-md-4.col-xl-12.dol .card-body.text-center .card-title.dol {
    padding-top: 0px;
    margin-top: -19px;
}
.ziel {
}

.foto {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    border-color: #FFFFFF;
}
.container-fluid .container .card-img-container {
}

.row .col-12.col-lg-4.dol .card {
    border-width: medium;
    border-color: #848484;
    border-radius: 8px;
}
/* 1️⃣ Efekt zoom-in po załadowaniu strony dla wszystkich obrazów z .card-img-top.two */
@keyframes zoomIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.04);
    }
}

img.card-img-top.two {
    animation: zoomIn 3s ease-in-out forwards;
}

/* 2️⃣ Ukrycie obrazów wjeżdżających z lewej i prawej strony przed animacją */
img.card-img-top.li, 
img.card-img-top.ri {
    opacity: 0;
    transform: translateX(0);
    transition: transform 1s ease-out, opacity 1s ease-out;
    will-change: transform, opacity;
}

/* 3️⃣ Efekt wjazdu z lewej strony */
img.card-img-top.li.visible {
    opacity: 1;
    transform: translateX(0);
    animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 4️⃣ Efekt wjazdu z prawej strony */
img.card-img-top.ri.visible {
    opacity: 1;
    transform: translateX(0);
    animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(00px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.container .card.foto.foot .card-text.text-center.stopka {
    font-size: small;
    text-align: center;
}
.container .row .card.col-12.col-lg-8.grdiv {
    background-color: #326B2F;
    border-radius: 18px;
    color: #FFFFFF;
    margin-left: 0px;
    padding-left: 19px;
    padding-right: 13px;
    max-width: 95%;
}
.container .card.foto .card-body.grdiv {
    border-radius: 18px;
    background-color: #326B2F;
    color: #FFFFFF;
    margin-left: 15px;
    padding-left: 19px;
    padding-right: 13px;
    margin-right: 15px;
}

.container-fluid .container .row {
    border-color: #FFFFFF;
    border-top-right-radius: 0px;
}
.container .row .card.col-12.col-lg-4 {
    border: none;
}
.container .row .card.col-12.col-lg-8 {
    border: none;
}
.container-fluid .container .card-img-container {
    display: flex;
}
.container .card-img-container .card-img-top {



}
.container-fluid .container .card.foto {
}
.container .card.foto .card-body {
}



.container-fluid .container .row {
    margin-top: 35px;
}




@media (max-width: 768px) {  /* Dla urządzeń mobilnych */
    .grdiv {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: calc(100% - 30px) !important; /* Odejmujemy 15px z obu stron */
    }
}


}

/* Kontener obrazka - zapobiega zmianie wysokości */
.card-img-container {
	position: relative;
    width: 100%;
    height: 400px; /* 🔹 Domyślna wysokość dla dużych ekranów */
    overflow: hidden; /* Zapobiega wychodzeniu obrazu poza kontener */
}

/* kontener obrazka - ograniczenie wysokości */
.card-img-container {
    position: relative;
    width: 100%;
    height: 400px; /* Możesz dostosować */
    max-height: 400px; /* 🔹 Ograniczenie maksymalnej wysokości */
    overflow: hidden; /* 🔹 Zapobiega wychodzeniu obrazu poza kontener */
}

/* obrazek wewnątrz kontenera */
.card-img-container img.card-img-top {
	width: 100%;
    height: auto; /* 🔹 Ustawienie na `auto`, aby uniknąć zmiany wysokości */
    max-height: 400px; /* 🔹 Zapobiega zwiększaniu wysokości */
    object-fit: cover;
    transition: transform 3s ease-in-out;
    animation: zoomIn 3s ease-in-out forwards;
}



@keyframes zoomIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.04);
    }
}
/* 🔹 MEDIA QUERIES - Dynamiczna wysokość dla różnych ekranów */
@media (max-width: 1200px) { 
    .card-img-container {
        height: 350px;
    }
}
@media (max-width: 992px) { 
    .card-img-container {
        height: 300px;
    }
}

@media (max-width: 768px) { 
    .card-img-container {
        height: 250px;
    }
}

@media (max-width: 480px) { 
    .card-img-container {
        height: 200px;
    }
}
/* Efekt fade-in dla nagłówków */
.hidden-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-in, transform 0.8s ease-in;
    will-change: opacity, transform;
}

.hidden-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efekt fade-in dla listy */
.hidden-list li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-in, transform 0.8s ease-in;
}

.hidden-list li.visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-info {
    font-size: 1.5rem; /* Powiększa czcionkę */
    font-weight: bold; /* Pogrubia tekst */
    color: #CC0000; /* Możesz zmienić kolor, jeśli chcesz */
    display: block; /* Zapewnia poprawne formatowanie w linii */
    margin-top: 10px; /* Dodaje odstęp dla lepszego wyglądu */
}
/* Efekt zoom-in tylko dla h5.zum */
h5.zum {
    opacity: 0; /* Ukrycie na początku */
    transform: scale(0.8); /* Początkowy rozmiar mniejszy niż normalnie */
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    will-change: transform, opacity;
}

/* Po wejściu na ekran – animacja zoom-in */
h5.zum.visible {
    opacity: 1;
    transform: scale(1); /* Powrót do normalnego rozmiaru */
}
/* Dodanie odstępu nad logo FP LIDER */
.card.foto:first-child {
    margin-top: 25px !important;
}
.one {
}
.2 {
}
.two {
}