@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora/static/Sora-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sora-bold';
    src: url('../fonts/sora/static/Sora-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'staatliches';
    src: url('../fonts/Staatliches/Staatliches-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url('../fonts/Alegreya/AlegreyaSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Maitree';
    src: url('../fonts/Maitree/Maitree-Regular.ttf') format('truetype');
}

h1{
  font-family: 'Ubuntu';
  font-weight: 700;
  text-transform: uppercase;
  font-style: italic;
}

h2{
  font-family: 'Alegreya';
  font-size: 2rem;
  font-weight: 800;
}

h3{
  font-family: 'Alegreya';
  font-size: 1.5rem;
  font-weight: 800;
}

header nav a{
  font-family: 'Alegreya';
}


.web-card h3{
  font-size: 1.7rem!important;
}

li{
  font-family: 'Maitree';
}

p, #package-grid{
  font-family: 'Maitree';
}

footer h2{
  font-family: 'Alegreya';
  font-size: 2rem;
  font-weight: 500;
}

.glow-line {
  margin: 10vh 20px;
  height: 3px;
  position: relative;
  background: rgb(255, 123, 0);
  overflow: hidden;
}

/* Vastagabb mozgó fénycsík */
.glow-line::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 200%;
  height: 50px;
  background: radial-gradient(circle, rgba(126, 4, 4, 0.8) 0%, transparent 40%);
  animation: move-glow-both 7s ease-in-out infinite;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Box-shadow mozgása kifelé – középről indul */
.glow-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 0%;
  background: transparent;
  box-shadow: 0 0 30px 10px orange, 0 0 60px 20px orange, 0 0 80px 30px orange;
  transform: translateX(-50%);
  animation: shadow-spread 7s ease-in-out infinite;
  pointer-events: none;
}

/* Glow animáció: középről két irányba szétterjedő fénycsík */
@keyframes move-glow-both {
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  50% {
    clip-path: inset(0 0% 0 0%);
  }
  100% {
    clip-path: inset(0 50% 0 50%);
  }
}

/* Box-shadow: középről terjedő ragyogás */
@keyframes shadow-spread {
  0% {
    width: 0%;
    opacity: 0.7;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0%;
    opacity: 0.7;
  }
}

@keyframes move-glow {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(50%);
    }
}


.menus a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 3px;
    background: #BC6C25;
    transition: width 0.3s cubic-bezier(.4,0,.2,1);
}

.menus a:hover {
    color: #BC6C25;
}

.menus a:hover::after {
    width: 100%;
}

.menus a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition:  0.3s ease;
    position: relative;
    padding-bottom: 0px;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Biztosítja, hogy a body legalább a képernyő magassága legyen */
  position: relative; /* Szükséges, hogy az absolute pozicionálású elemek ehhez képest pozicionálódjanak */
}

/* Background shapes styles */
.bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.shape {
  position: absolute;
  opacity: 0.15;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.911) 0%, rgba(255,120,0,0) 70%);
  overflow: hidden;
}

.shape-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: 
    linear-gradient(rgb(255, 255, 255) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255, 255, 255) 1px, transparent 1px);
  background-size: 50px 50px;
}


/*back to top*/
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #111827;
    color: #BC6C25;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    z-index: 9999;
    transition: opacity .25s ease, transform .25s ease;
  }
  .back-to-top.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .back-to-top svg.arrow2 {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 2;
  }
  .progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg); /* hogy felülről induljon a kör */
  }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:focus:-webkit-autofill {
  -webkit-text-fill-color: #fff !important; /* autofill szöveg */
  caret-color: #fff !important;            /* kurzor */
  -webkit-box-shadow: 0 0 0 1000px #666666 inset !important; /* háttér */
  box-shadow: 0 0 0 1000px #666666 inset !important;
  background-color: #222 !important; /* fallback */
}

#particles{
    opacity: 0.2 !important;
}

h4{
  color: #c5c5c5!important;
}


.alert_border{
    border: 2px solid #BC6C25;  
    border-radius: 12px;    
}
.alert_icon{
    color: #BC6C25 !important;
    border: 2px solid #BC6C25 !important;
}