body {
  background: linear-gradient(
    70deg,
    #002b2b 0%,
    #005050 15%,
    #357a7a 40%,
    #66b2b2 60%,
    #99cccc 85%,
    #cce6e6 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(2, 1ft);
  color: white !important;
  font-family: "Outfit", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 500 !important;
}
.navbar {
  background-color: rgba(0, 0, 0, 0.4) !important;
  font-family: "Protest Guerrilla", sans-serif !important;
  font-weight: 100 !important;
  position: fixed !important;
  width: 100%;
  top: 0;
  z-index: 1000;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.blur-card {
  background-color: rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px !important;
  padding: 15px;
  border: none !important;
}
.image-box-450x280 {
  width: 100%;
  max-width: 450px;
  height: 280px;
  overflow: hidden;
  margin: 0 auto;
}

.image-box-450x280 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  object-position: center;
}

.klimak-slider-section .card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.klimak-slider-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
@keyframes slideOutAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes slideInAnimation {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.carousel-item.is-leaving {
  animation-name: slideOutAnimation;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.carousel-item.active {
  animation-name: slideInAnimation;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
.custom-button {
  display: flex;
  align-items: center;
  background-color: rgb(
    250,
    93,
    15
  ); /* A fő gomb színe, ami az icon mellett lesz */
  color: #000;
  padding-right: 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  height: 40px; /* Beállítjuk a gomb magasságát, hogy az ikon elférjen benne */
}

.custom-button:hover {
  background-color: #e65c00;
}

.custom-button .icon-img {
  height: 100%; /* Az ikon kép kitölti a gomb magasságát */
  max-width: 70px; /* Az ikon kép maximális szélessége */
  object-fit: contain; /* Biztosítja, hogy a kép arányosan illeszkedjen */
  margin-right: 15px; /* Térköz az ikon és a szöveg között */
  /* A kép már tartalmazza a narancssárga kört, ezért nincs szükség külön háttérstílusra */
}
.typing-text-wrapper {
  font-size: 1.5rem; /* Még nagyobb szövegméret */
  font-weight: 700; /* Még vastagabb */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Erős árnyék a jobb olvashatóságért */
  color: #fff; /* Fehér szín */
  text-align: center;
  max-width: 1000px; /* Nagyobb max szélesség, mielőtt sort tör */
  width: 90%; /* Reszponzív szélesség */
  box-sizing: border-box;
  line-height: 1.3; /* Sorok közötti térköz a jobb olvashatóságért */
}

.static-prefix {
  font-size: 2.2rem;
  display: inline;
  margin-right: 8px; /* Több térköz a "Tudtad?" után */
  color: #ffcc00; /* Kiugró szín a "Tudtad?"-nek */
  font-weight: 900; /* Még vastagabb */
}

.animated-text {
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.animated-text::after {
  content: "|";
  display: inline-block;
  animation: blink 1s step-end infinite;
  margin-left: 8px; /* Több térköz a kurzor előtt */
  color: rgba(255, 255, 255, 0.9); /* Jól látható kurzor */
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Média lekérdezések - Reszponzivitás */
@media (max-width: 768px) {
  .typing-text-wrapper {
    font-size: 1.8rem; /* Kisebb font mobilra */
  }
  .static-prefix {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .typing-text-wrapper {
    font-size: 1.4rem; /* Még kisebb font nagyon kis képernyőre */
  }
  .static-prefix {
    font-size: 1.4rem;
  }
}
.custom-button2 {
  display: flex;
  align-items: center;
  background-color: rgb(
    255,
    193,
    54
  ); /* A fő gomb színe, ami az icon mellett lesz */
  color: #000;
  padding-right: 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  height: 40px; /* Beállítjuk a gomb magasságát, hogy az ikon elférjen benne */
}

.custom-button2:hover {
  background-color: #e65c00;
}

.custom-button2 .icon-img {
  height: 100%; /* Az ikon kép kitölti a gomb magasságát */
  max-width: 70px; /* Az ikon kép maximális szélessége */
  object-fit: contain; /* Biztosítja, hogy a kép arányosan illeszkedjen */
  margin-right: 15px; /* Térköz az ikon és a szöveg között */
  /* A kép már tartalmazza a narancssárga kört, ezért nincs szükség külön háttérstílusra */
}
/* Közös nyíl méret */
.toggle-arrow,
.back-arrow {
  width: 50px;   /* tetszés szerint állíthatod */
  height: 50px;
}

/* Lenyitó nyíl: alapból lefelé mutat, kattintáskor forog */
.toggle-arrow {
  cursor: pointer;
  transition: transform 2s ease;
  transform: rotate(0deg); /* lefelé */
}
.toggle-arrow.rotated {
  transform: rotate(180deg); /* felfelé */
}

/* Vissza nyíl: fixen balra mutat */
.back-arrow {
  transform: rotate(90deg);
}
.more-arrow {
  width: 20px;  /* nyíl mérete */
  height: auto;
  transition: transform 0.3s ease;
}

/* Hover animáció – kis elfordulás */
a:hover .more-arrow {
  transform: translateX(5px) rotate(0deg); /* jobbra csúszik egy picit */
}

/* Ha inkább 180°-os forgást akarsz */
a:hover .more-arrow {
  transform: rotate(180deg);
}
.custom-button3 {
  display: flex;
  align-items: center;
  background-color: rgb(0, 166, 255); 
  color: #000;
  padding-right: 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  height: 40px;
  transition: all 0.3s ease; /* Általános animáció a gomb tulajdonságaihoz */
}

/* Kék gomb specifikus stílusai */
.blue-button {
  background-color: rgb(0, 166, 255);
}

.blue-button:hover {

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Nagyobb árnyék hoverre */
  transform: translateY(-3px); /* Enyhén felemeli a gombot */
}

/* Külön stílus a kék gomb ikonjának, ami a kék kört is tartalmazza */
.blue-button .icon-img {
    background-color: rgb(0, 166, 255);
    border-radius: 50%;
    height: 100%;
    width: 50px;
    padding: 5px;
    object-fit: contain;
    margin-right: 15px;
    transition: all 0.3s ease; /* Animáció az ikonhoz */
}

.blue-button:hover{
    transform: scale(1) rotate(-3deg); /* Enyhe méretnövekedés és forgatás */
}