*{
  box-sizing:border-box;
}

html, body{
  overflow-x:hidden;
}  

body{
  margin:0;
  font-family:Arial;
  background:url('hatter.jpg') no-repeat center/cover;
  color:white;
  text-align:center;
}

.logo{
  width:420px;
  margin:auto;
  display:block;
}

.text{
  max-width:800px;
  margin:30px auto;
  padding:35px;
  border-radius:25px;
  background:rgba(0,30,70,0.55);
  backdrop-filter: blur(12px);
  border:1px solid rgba(0,234,255,0.4);
  box-shadow:
  0 0 40px rgba(0,234,255,0.25),
  inset 0 0 25px rgba(0,234,255,0.15);
  line-height:1.7;
  font-size:20px;
  text-shadow:
  0 0 8px rgba(0,234,255,0.6),
  0 0 20px rgba(0,234,255,0.4);
}

.tiles{
  display:flex;
  flex-direction:column;
  gap:30px;
  align-items:center;
}

.row{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
}

.card{
  width:350px;
  height:220px;
  perspective:1000px;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s;
  transform-origin: center center;
}

.card:hover .inner{
  transform:rotateY(180deg);
}

.front,.back{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:20px;
  overflow:hidden;
  backface-visibility:hidden;
  border:2px solid #00eaff;
}

.front img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.label{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  font-weight:bold;
  font-size:18px;
  letter-spacing:1px;
  text-align:center;
  text-shadow:
  0 0 10px rgba(0,234,255,0.9),
  0 0 20px rgba(0,234,255,0.6);
}

.back{
  transform:rotateY(180deg);
  background:rgba(0,30,70,0.55);
  backdrop-filter: blur(10px);
  border:1px solid rgba(0,234,255,0.4);
  box-shadow:
  0 0 25px rgba(0,234,255,0.25),
  inset 0 0 15px rgba(0,234,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  font-size:16px;
  text-shadow:
  0 0 10px rgba(0,234,255,0.8);
}

/* CONTACT */
.contact{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:18px;
  padding:25px;
  font-size:18px;
}

.social-99{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.social-99 .contact-item2{
  width:auto;
}

.contact-item2{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
}

.contact-item2 span{
  min-width:25px;
  display:inline-block;
  text-align:center;
}

.contact a{
  color:white;
  text-decoration:none;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.05);
  padding:10px 12px;
  border-radius:10px;
  width:100%;
}

.footer{
  position:fixed;
  bottom:10px;
  width:100%;
  text-align:center;
  font-size:12px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.3);
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px){

  .logo{ width:320px; }

  .text{
    font-size:18px;
    padding:25px;
    margin:20px;
  }

  .card{
    width:280px;
    height:170px;
  }

  /* 🔥 CSAK EZ LETT HOZZÁADVA */
  .contact-item2{
    width:auto;
    justify-content:center;
  }

}

/* MOBIL */
@media (max-width: 600px){

  .logo{
    width:220px;
  }

  .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:20px !important;
    width:100% !important;
  }

  .card{
    width:90%;
    max-width:350px;
    height:200px;
  }

  .text{
    font-size:16px;
    padding:20px;
    margin:15px;
  }

  .contact-item2 a{
    color:white;
    text-decoration:none;
  }

  .back.contact{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }

  .contact{
    gap:12px;
  }
}