body {
  width: 100%;
  height: 100vh;
  background-image: url("../img/hero-bg.jpg");
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
.content {
  min-height: 100vh; /* A tartalom legalább a teljes magasságú legyen */
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5); /* Opció: áttetsző fehér háttér a tartalomhoz */
}

@media (min-width: 992px) {
  #body {
    padding-left: 160px;
    background-attachment: local ;
  }
}

.cardx .icon .img {
  fill: rgb(66, 21, 21);

}

.ikon {
  width: 60px;
  fill: #ffffff;
  color: red;
}

.cardx-text {
  color: gray;
}

.cardx-text1 {
  color: gray;
  text-align: left;
}

.cardx {
  transition: all 0.5s;
}

.cardx:hover .icon .ikon {
  filter: brightness(0) invert(1);
}

.cardx:hover {
  background-color: rgb(25, 38, 68);
  color: #fff;
}
.cardx1:hover {
  background-color: rgb(17, 58, 81);
  color: #fff;
}
.cardx2:hover {
  background-color: rgb(92, 72, 79);
  color: #fff;
}
.cardx3:hover {
  background-color: rgb(132, 62, 71);
  color: #fff;
}
.cardx4:hover {
  background-color: rgb(77, 65, 98);
  color: #fff;
}
.cardx5:hover {
  background-color: rgb(73, 100, 62);
  color: #fff;
}
.cardx6:hover {
  background-color: rgb(52, 41, 125);
  color: #fff;
}
.cardx7:hover {
  background-color: rgb(95, 55, 89);
  color: #fff;
}


.cardx:hover .icon,
.cardx:hover .cardx-text {
  color: #fff;
}

.cardx-margin{
  margin-bottom: 1.5rem;
}

.card01 {
  max-width: 22rem;
  text-decoration: none;
}

.header01 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
/*background-color: red; /* Opció: háttérszín a header div-nek */
}
.header01 img {
  height: 200px;
}


@media (max-width: 768px) {
  .card01 {
    margin: 10px 0;
  }
}

/* ######## FŐOLDAL ######## */


.focard01 {
  max-width: 32rem;
  text-decoration: none;
}
.foikon {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.focard-title1 {
  color: rgb(221, 59, 59);
  
}
.focard:hover {
  background-color: olivedrab;
  color: #fff;
}
.focard-text {
  color: gray;
}

.focard {
  transition: all 0.5s;

}

.focard:hover {
  background-color: rgb(204, 80, 80);
  color: #fff;
}

.focard:hover .icon,
.focard:hover .focard1-text {
  color: #fff;
}

.focard-margin{
  margin-bottom: 1.5rem;
}

.focard-body p{
  margin-top: 3rem;
  font-size: large;
  font-weight: 600;
}
@media (max-width: 768px) {
  .foikon {
    width: 100%;
    max-height: 100%;

  }
  .focard-body p {
    display: none;
  }
}


/* ########## ÁGAZATOK ########## */
.szakmak {
  fill: #ffffff;
  color: red;
  transition: transform 0.2s; /* Simább animáció */
  border-radius: 10px;
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: zoom-in;
}


.szakmak:hover {
  transform: scale(1.05); /* Nagyítás hover esetén */
}

.cardsz:hover {
  color: #fff;
}

.focardx-szakma {
  border-radius: 10px;
}

.focard-body2 p{
  font-size: large;
  font-weight: 600;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .szakmak {
    display: none;
  }
}

@media (min-width: 992px) {
  .szakmak,
  .focardx-szakma {
    transition: transform 0.2s; /* Simább animáció */
  }

  .szakmak:hover,
  .focardx-szakma:hover {
    transform: scale(1.05); /* Nagyítás hover esetén */
  }
}
.btn-contact {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: red;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-contact:hover {
  background-color: darkred;
}

.image-container {
  margin-bottom: 20px; /* Az összes kép aljára azonos margó */
}

.image-container img {
  width: 100%;
  height: auto;
  margin-bottom: 15px; /* Egységes margó körben */
}


/* ########## KAPCSOLAT ########## */

.contact {
  max-width: 900px; /* Állítsd be a kívánt maximális szélességet */
  width: 100%;
}
.php-email-form {
  padding: 20px;
  border: 1px solid #ddd;
  background: rgba(255, 255, 255, 0.8); /* Minimálisan átlátszó háttérszín */
  border-radius: 10px; /* Lekerekített sarkok */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); /* Enyhe árnyék */
}
.php-email-form .btn-submit {
  display: block;
  width: 100%;
  max-width: 100px; /* A gomb maximális szélessége */
  margin: 20px auto; /* Középre igazítás */
  padding: 10px 20px; /* Kényelmes méret */
  background-color: red; /* Piros háttérszín */
  color: white; /* Fehér szöveg */
  border: none; /* Keret nélküli */
  border-radius: 5px; /* Lekerekített sarkok */
  cursor: pointer; /* Mutatóvá változik az egér */
}
.php-email-form .btn-submit:hover {
  background-color: darkred; /* Sötétebb piros szín hover esetén */
}

.form-control {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
}

button[type="submit"] {
  background: #007bff;
  border: none;
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #0056b3;
}

.loading,
.error-message,
.sent-message {
  display: none; /* Alapértelmezetten rejtve */
}