/* Karty usług */
.card1 {
  background-color: #091d5a;
}

.card2 {
  background-color: #188dc0;
}

.card3 {
  background-color: #188dc0;
}

.card4 {
  background-color: #091d5a;
}

.card {
  text-align: center;
  transition: transform 0.2s ease;
  color: white;
  border: none;
}

.card:hover {
  transform: scale(1.03);
}

/* Przycisk wewnątrz kart */
.card button {
  background-color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

/* Styl dla linka wewnątrz przycisku */
.card button a {
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: color 0.3s ease;
}

/* Główna zmiana: po najechaniu na przycisk, tekst zmienia się na biały */
.card button:hover a {
  color: white;
}

/* Dodatkowo – zmiana tła przycisków na hover (zależnie od karty) */
.card1 button:hover,
.card4 button:hover {
  background-color: #188dc0;
  
}

.card2 button:hover,
.card3 button:hover {
  background-color: #091d5a;
  
}

/* Obrazki */
a > img {
  width: 70%;
}

div > img {
  width: 100%;
  float: none;
  height: auto;
  display: block;
}

/* Sekcja wprowadzenia */
#wprowadzenie .container-fluid {
  margin: 0px;
  padding-right: 0px;
  font-size: 1.2rem;
}

#wprowadzenie {
  background-color: #188dc0;
  color: white;
}

/* Sekcja "O nas" */
#onas .container-fluid {
  background-color: #091d5a;
  color: white;
  margin: 0px;
  height: 400px;
}

/* Sekcja "Realizacje" */
#realizacje .container-fluid {
  background-color: #188dc0;
  margin: 0px;
  height: 400px;
}

#tele {
  width: 100%;
  height: auto;
  display: block;
}

.kontakt2 {
  padding-bottom: 50px;
}

/* Styl dla tabletów */
@media (max-width: 992px) {
  #onas .container-fluid {
    height: 400px;
  }

  #realizacje .container-fluid {
    height: 400px;
  }
}

/* Styl dla mniejszych ekranów */
@media (max-width: 768px) {
  #onas .container-fluid {
    height: 350px;
    width: 100%;
  }

  #realizacje .container-fluid {
    width: 100%;
    height: 350px;
  }
}

@media (max-width: 576px) {
  #onas .container-fluid {
    height: 350px;
  }

  #realizacje .container-fluid {
    height: 350px;
  }
}