.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .vh-70{
    height: 70vh;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    --bs-gutter-x: 0 !important; 
   --bs-gutter-y: 0;
  }

  .gradient{
    height: 140px;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0.81) 0%, rgba(0,0,0,0) 87%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.81) 0%, rgba(0,0,0,0) 87%);
    background: linear-gradient(180deg, rgba(0,0,0,0.81) 0%, rgba(0,0,0,0) 87%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
 }

 .bottom-20{
    bottom: 50px;
 }

 .start-20{
    left: 50px;
 }

 .baner-gradient {
    background: rgb(0, 0, 0);
    background: linear-gradient(29deg, rgba(0, 0, 0, 0.6575342465753424) 0%, rgba(0, 0, 0, 0) 45%);
}

.socialmenu.position-absolute.bottom-0.end-0.z-2 {
    right: 30px !important;
}



.min-vh-50{
  min-height: 50vh;
}

.logo-czarne {
  height: 80px;
  width: 200px;
  object-fit: contain;
}

.przerywnik{
  min-height: 40vh;
}

img.przerywnik-logo {
  width: 200px;
}

.zespol{
   min-height: 600px;
 }

 .relative{
   width: 100%;
  height: 100%;
  position: relative;
  background-color: black;
 }
 .zespol-hover{
  cursor: pointer;
 }
 .nakladka{
  transition: 0.3s;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background: rgb(0,0,0);
background: linear-gradient(27deg, rgba(0,0,0,0.6575342465753424) 0%, rgba(0,0,0,0) 77%);
 }
 .zespol-hover:hover .nakladka {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.opis {
  width: 90%;
  margin: auto;
  overflow: hidden;
  position: absolute;
  left: 5%; /* Adjusted to ensure it aligns with the hover effect */
  bottom: 1%; /* Initial position near the bottom */
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for transform and opacity */
  opacity: 0; /* Start with title hidden */
  transform: translateY(20px); /* Start slightly below */
}

.opis-dlugi p {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.opis-dlugi {
  opacity: 0; /* Initially hidden */
  height: 0; /* Initially collapsed */
  overflow: hidden;
  transition: opacity 0.5s ease 0.5s, height 0.5s ease 0.5s, transform 0.5s ease 0.5s; /* Delayed transition for description */
  transform: translateY(20px); /* Start slightly below */
}

.zespol-hover * {
  transition: 0.5s ease; /* Smooth transition for all child elements */
}

/* On hover, slide the title up and fade it in */
.zespol-hover:hover .opis {
  transform: translateY(0); /* Slide up to natural position */
  opacity: 1; /* Fade in the title */
}

/* On hover, show and slide up the description */
.zespol-hover:hover .opis-dlugi {
  transform: translateY(0); /* Slide up to natural position */
  opacity: 1; /* Fade in the description */
  height: auto; /* Expand the height */
}

.title-todown{
  width: 90%;
  margin-left: 5%;
  transition: 0.5s;
}

.zespol-hover:hover  .title-todown {
  transform: translateY(200%);
}
.zespol-hover{
  overflow: hidden;
}

.title-todown{
  bottom: 20px !important;
}

input, textarea {
  width: 100%;
  font-weight: bold;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea{
  border: black 3px solid !important;  
  background-color: transparent !important;
  padding: 30px;
  color: black;
}

input[type="text"], input[type="email"]{
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;

}
.logo-left {
  width: 120px;
  object-fit: contain;
  left: 30px;
  bottom: 30px;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
  width: auto;
  background: black;
  color: white !important;
  padding: 10px 30px;
  font-weight: bold;
}
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.titles h2, .titles p, .titles a button {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.titles.animate h2 {
  animation: fadeInUp 0.5s ease-in-out forwards;
}

.titles.animate p {
  animation: fadeInUp 0.5s ease-in-out 0.2s forwards;
}

.titles.animate a button {
  animation: fadeInUp 0.5s ease-in-out 0.4s forwards;
}



@media screen and (max-width: 911px){
  .start-20 {
    left: 20px;
 }


 .start-20 {
  left: 20px;
}

 .show{
  height: 200px !important;
 }


.title {
  width: 70% !important;
}

.hidden{
  display: none;
}
 
}