body { font-family: 'Titillium Web', sans-serif; overflow-x: hidden;
    position: relative; /* KELL a scrollspy-hoz */
}
h1,h2,h3,h4,h5 { text-transform: uppercase; letter-spacing: 1px; }

/* SVG méret igazítása a navbarhoz */
.navbar-brand svg {
    height: 80px; /* illeszkedik a navbar magasságához */
}

/* Navbar */
.navbar { background: linear-gradient(145deg,#555,#999,#555); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.navbar .nav-link { color: #fff !important; }
.navbar .nav-link:hover { color: #ffd700 !important; }

/* Carousel */
#carousel .carousel-item img { height: 500px; object-fit: cover; width: 100%; }
@media(max-width:768px){ #carousel .carousel-item img{ height:300px; } }

/* Card style */
.custom-card {
    background: linear-gradient(135deg,#f5f5f5,#dcdcdc,#f5f5f5);
    border: 1px solid #b0b0b0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    height: 100%;
    transition: all .3s;
}
.custom-card:hover {
    background: linear-gradient(135deg,#e6e6e6,#cfcfcf,#e6e6e6);
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* References */
#references img {
    height: 250px; object-fit: cover; width: 100%;
    border-radius: 8px;
    transition: transform .3s;
}
#references img:hover { transform: scale(1.05); }

/* Buttons */
.btn-primary {
    background: linear-gradient(145deg,#777,#aaa,#777);
    border: 1px solid #666;
    color: #fff;
}
.btn-primary:hover { color:#ffd700; }

/* Footer */
footer { background: linear-gradient(145deg,#555,#999,#555); color:#fff; }

.navbar-logo {
    height: 40px; /* illeszkedik a navbar magasságához */
    width: auto;  /* arány megtartása */
}

@media (min-width: 992px) {
    .navbar-logo {
        height: 50px; /* nagyobb kijelzőn kicsit nagyobb logó */
    }
}

/* Szolgáltatások ikonok színesítése */
#services .fa-fire { color: #e63946; }     /* piros */
#services .fa-water { color: #0077b6; }    /* kék */
#services .fa-wrench { color: #6a994e; }   /* zöld */
#services .fa-droplet { color: #1d3557; }  /* sötétkék */
#services .fa-burn { color: #ff7f11; }     /* narancs */

/* Gomb hover effekt */
.btn-primary {
    background: linear-gradient(145deg,#777,#aaa,#777);
    border: 1px solid #666;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(145deg, #ff8800, #ffae42, #ff8800);
    border-color: #e67e22;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255,136,0,0.6);
}

/* Anchor ugrás javítása sticky navbar mellett */
html {
    scroll-padding-top: 80px; /* a navbar magasságától függően állítsd (pl. 60-80px) */
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}

/* Hover */
.navbar .nav-link:hover {
    color: #ff8800 !important; /* narancs */
}

/* Aktív link kiemelése scrollspy-hoz */
.navbar .nav-link.active {
    color: #ffd700 !important;
    font-weight: 700;
}

.hydro {
    fill: #00aaff;
}

.gaz {
    animation: ember 4s infinite;
}

/* Buborék animáció */
.bubble {
    fill: #00ccff;
    opacity: 0;
    animation: rise 5s infinite;
}

@keyframes rise {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { transform: translateY(-40px) scale(1); opacity: 0.6; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}

/* Parázsló effekt */
@keyframes ember {
    0%   { fill: #ff6600; opacity: 1; }
    25%  { fill: #ff3300; opacity: 0.9; }
    50%  { fill: #cc2200; opacity: 0.7; } /* minimum 70% láthatóság */
    75%  { fill: #ff3300; opacity: 0.85; }
    100% { fill: #ff6600; opacity: 1; }
}

/* Szikrák animációja */
.spark {
    fill: #ff9933;
    opacity: 0;
    animation: flicker 3s infinite;
}

@keyframes flicker {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}