#gl{
    margin: 25px;
    align-items: stretch;
    padding: 40px;
}
h5{
    font-size: medium;
}
#gl nav{
    border-radius: 20px 0px 0px 20px;
    flex: 1;

    text-align: center;
    background-color: rgb(102, 104, 105);
}
#gl nav ul{
    list-style: none;
}
#gl article{
    border-radius: 0px 20px 20px 0px;
    flex: 1;
    background-color: rgb(102, 104, 105);
}
#gl nav ul li a{
    display: block;
   text-decoration: none; 
   color: orangered;
   background-color: rgb(136, 139, 143);
   margin: 5px;
   border-radius: 20px;
}
#gl nav ul li.active {
    background-color: antiquewhite;
    color: #E63946;
    font-weight: bold;
}
#gl nav ul li:hover{
    transform: scale(1.1);
    transition: 2s;
}
#tekst {
    text-align: center;
}
#tekst p{
    background-color: #E63946;
    padding: 15px;
    border-radius: 20px;
}
.gallery-img{
    height: 200px;
    width: 60%;
}

footer{
    position: relative;
    bottom: 0;
    width: 100%;
}

#oferty2{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.offer-card {

  background: #fff url('../img/bg-flames.png');
  background-size: cover;
  border-radius: 0px 12px 12px 0px;
  padding: 20px;
  flex: 1 1 280px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  border-left: #E63946 5px solid;
  box-shadow: #E63946 4px 5px 10px 7px;
}

.offer-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.offer-card h3 {
  margin-top: 0;
  color: #222;
}

.offer-card p {
  color: #555;
}

/* Animacje wejścia z różnych kierunków */
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromTop {
  from { opacity: 0; transform: translateY(-80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideFromBottom {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Przypisanie klas do animacji */
.from-left   { animation-name: slideFromLeft; }
.from-right  { animation-name: slideFromRight; }
.from-top    { animation-name: slideFromTop; }
.from-bottom { animation-name: slideFromBottom; }

/* rozszezanie teskstu*/
.oferttekst{
  max-height: 250px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.oferttekst.roz{
  max-height: 650px;
  animation: slideFadeDown 2s ease forwards;
}
#oferty2 button {
  margin-top: 10px;
  background-color: #b31111;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95em;
  transition: background-color 0.3s ease;
}

#oferty2 button:hover {
  background-color: #910000;
  transform: scale(1.05);
  transition: 2s;
}
@keyframes slideFadeDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}