@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #fffbe6;
    color: #222;
    overflow-x: hidden;
}

/* Prevent any horizontal layout shifts and ensure predictable sizing */
html, body {
    box-sizing: border-box;
    overscroll-behavior-x: none; /* prevents swipe-to-navigate causing sideways movement on mobile */
}
*, *::before, *::after { box-sizing: inherit; }

/* Avoid full-viewport 100vw causing scrollbars due to scrollbar width */
.avoid-100vw { max-width: 100%; width: 100%; }

header {
    background: transparent;
    color: #fff;
    text-align: center;
    padding-bottom: 0.5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

.main-nav {
    background: none;
    padding: 0.5em 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    transition: background 0.3s, box-shadow 0.3s;
}

.main-nav.scrolled {
    background: #fffbe6;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.13);
    position: fixed;
}

.main-nav .nav-logo img {
    height: 120px;
    width: auto;
    transition: filter 0.3s, height 0.3s, transform 0.3s;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.main-nav .nav-logo a:hover img {
    transform: scale(1.12);
    filter: brightness(1.1) drop-shadow(0 4px 16px #ffd60055);
}

.main-nav.scrolled .nav-logo img {
    filter: none;
}

.nav-logo {
    margin-left: 2em;
    margin-right: 2em;
    flex: 0 0 auto;
}

.main-nav ul {
    list-style: none;
    margin: 0 2em 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 2em;
    flex: 1 1 auto;
}

.main-nav a {
    color: #fffde4;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5em 1em;
    border-radius: 4px;
    transition: background 0.2s, color 0.3s;
}

.main-nav.scrolled a {
    color: #b38b00;
}

.main-nav a.active, .main-nav a:hover {
    background: #ffd600;
    color: #ffffff !important;
    outline: none;
}

.main-nav .nav-logo a:active {
    background: none;
    outline: none;
    box-shadow: none;
}

.main-nav .nav-logo a:focus,
.main-nav .nav-logo a:active {
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.main-nav .nav-logo a {
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.hero-image {
    width: 100%;
    height: 100vh;
    min-height: 400px;
    background: url('hero.jpg') center/cover no-repeat;
    margin-bottom: -40px;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 48px 0 rgba(255, 193, 7, 0.18), 0 2px 8px 0 rgba(255, 193, 7, 0.10);
    overflow: hidden;
    margin-top: 0;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45));
    z-index: 2;
}

.hero-text {
    color: #fffde4;
    font-size: 3.2em;
    font-weight: 700;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    text-shadow: 0 6px 32px rgba(255,193,7,0.4), 0 6px 32px rgba(0,0,0,0.6);
    text-align: center;
    max-width: 90vw;
    line-height: 1.1;
    letter-spacing: 1.5px;
    padding: 0 1em;
    position: relative;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-style: normal;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-left: none;
    border-right: none;
}

main {
    padding: 2em;
    max-width: 900px;
    margin: 0 auto;
}

.hero {
    background: #fffde4;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.10);
    margin-bottom: 2em;
}

.ocupam {
    margin: 3em 0 0 0;
    text-align: center;
}

.ocupam h2 {
    margin-bottom: 2em;
    font-size: 2em;
    color: #b38b00;
}

.ocupam-grid {
    display: flex;
    justify-content: center;
    gap: 2em;
    flex-wrap: nowrap;
}

.ocupam-box {
    background: #fffde4;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.13);
    padding: 2em 1.5em;
    min-width: 220px;
    min-height: 180px;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid #ffd600;
}

.ocupam-box:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 6px 24px rgba(255, 193, 7, 0.18);
}

.ocupam-icon svg {
    color: #ffd600;
    fill: #ffd600;
}

.ocupam-icon svg rect,
.ocupam-icon svg circle {
    fill: #ffd600 !important;
    stroke: #b38b00 !important;
}

.ocupam-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0.5em;
    color: #b38b00;
    text-align: center;
}

.ocupam-desc {
    font-size: 1em;
    color: #444;
    text-align: center;
}

section {
    background: #fffde4;
    margin-bottom: 1.5em;
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.08);
}

footer {
    background: #ffd600;
    color: #222;
    padding: 0;
    margin-top: 2em;
    font-size: 1em;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 16px rgba(255, 193, 7, 0.08);
}
.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2em 2em 0.5em 2em;
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1.5px solid #fffbe6;
    padding-bottom: 1em;
}
.footer-info {
    flex: 1 1 220px;
    min-width: 180px;
    font-size: 1.08em;
    line-height: 1.7;
}
.footer-links {
    flex: 1 1 180px;
    min-width: 160px;
    text-align: center;
}
.footer-links h4 {
    margin-bottom: 0.5em;
    color: #b38b00;
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.footer-links a {
    color: #222;
    text-decoration: none;
    margin: 0 0.2em;
    font-weight: 500;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #b38b00;
}
.footer-social {
    flex: 1 1 120px;
    min-width: 120px;
    text-align: center;
}
.footer-social h4 {
    margin-bottom: 0.5em;
    color: #b38b00;
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.footer-social a {
    margin: 0 0.3em;
    display: inline-block;
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0 0.2em 0;
    font-size: 0.98em;
}
.footer-copy {
    color: #b38b00;
    font-weight: 600;
}
.footer-legal a {
    color: #222;
    text-decoration: underline;
    margin: 0 0.2em;
    font-size: 0.97em;
}
.footer-legal a:hover {
    color: #b38b00;
}
@media (max-width: 900px) {
    .partners {
        padding: 1.2em 0.7em;
    }
    .partners-logos {
        gap: 1em;
    }
    .footer-content {
        padding: 1.2em 0.7em 0.5em 0.7em;
    }
    .footer-main {
        flex-direction: column;
        gap: 1em;
        align-items: stretch;
        text-align: center;
    }
    .footer-info, .footer-links, .footer-social {
        min-width: 0;
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5em;
        text-align: center;
    }
}

/* Responsive images for all galleries, sliders, and sections */
img, .gallery-grid img, .projects-gallery img, .portofoliu-gallery img, .showroom-gallery img, .depozit-gallery img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.10);
}

/* Responsive grid for galleries */
.gallery-grid, .projects-gallery, .portofoliu-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
    align-items: stretch;
}

/* Slider images */
.hero-slider .slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 45vw;
    min-height: 320px;
    max-height: 520px;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 32px 0 rgba(255, 193, 7, 0.13);
    margin-bottom: 2em;
}
.hero-slider .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.7s;
    z-index: 1;
}
.hero-slider .slide.active {
    opacity: 1;
    z-index: 2;
}
.hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 24px 24px;
}
.hero-slider .slide-caption {
    position: absolute;
    left: 0; right: 0; bottom: 2em;
    color: #fffde4;
    background: rgba(0,0,0,0.32);
    padding: 1.5em 2em;
    border-radius: 0 0 24px 24px;
    text-align: center;
    font-size: 1.5em;
    text-shadow: 0 2px 16px #b38b00;
}

/* Footer social icons */
.footer-social img {
    height: 24px;
    width: 24px;
    margin: 0 0.3em;
    vertical-align: middle;
    transition: filter 0.2s, transform 0.2s;
    object-fit: contain;
}
.footer-social img:hover {
    filter: brightness(1.2) drop-shadow(0 2px 8px #ffd60088);
    transform: scale(1.12);
}

.partners {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 900px;
    text-align: center;
    position: relative;
}

.partners h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2.2em;
    margin-bottom: 1.2em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}

.partners-logos {
    display: flex;
    flex-wrap: wrap;  /* Permite logo-urilor să se împartă pe mai multe linii */
    gap: 2em;
    justify-content: center; /* Centerizează logo-urile pe mai multe linii */
    align-items: center;
    margin: 2em 0 1em 0;
    scrollbar-width: thin;
    scrollbar-color: #ffd600 #fffde4;
}

.partners-logos::-webkit-scrollbar {
    height: 8px;
    background: #fffde4;
}

.partners-logos::-webkit-scrollbar-thumb {
    background: #ffd600;
    border-radius: 8px;
}

/* Responsivitate pe ecrane mari (peste 900px) */
@media (min-width: 900px) {
    .partners-logos img {
        max-width: 120px; /* Dimensiune mică a logo-urilor pe ecrane mari */
        height: auto; /* Păstrează raportul de aspect */
    }
}

/* Responsivitate pe ecrane mai mici de 900px */
@media (max-width: 900px) {
    .partners {
        padding: 2em 1.5em; /* Ajustează padding-ul pentru dispozitive mai mici */
    }

    .partners-logos {
        gap: 1.5em;  /* Mărește spațiul între logo-uri pe ecrane mai mici */
        justify-content: center; /* Centerizează logo-urile pe ecrane mici */
    }

    .partners-logos img {
        max-width: 180px; /* Logo-urile devin mai mari pe ecrane medii */
        height: auto; /* Păstrează raportul de aspect */
    }
}

/* temporary debug styles removed */

/* Responsivitate pe ecrane foarte mici (sub 700px) */
@media (max-width: 700px) {
    .partners {
        padding: 1.2em 0.7em; /* Reducerea padding-ului pe ecrane foarte mici */
    }

    .partners-logos {
        gap: 1em; /* Mărește spațiul între logo-uri pe ecrane foarte mici */
    }

    .partners-logos img {
        max-width: 220px;  /* Logo-urile vor fi și mai mari pe ecrane mici */
        height: auto;  /* Păstrează raportul de aspect */
    }
}
/* When the mobile menu is open, show the logo without visual effects */
@media (max-width: 700px) {
    body.menu-open .main-nav .nav-logo img,
    body.menu-open .mobile-hero-logo img {
        filter: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
        -webkit-filter: none !important;
    }

    /* also remove any drop-shadows applied via pseudo-elements or parent styles */
    body.menu-open .main-nav .nav-logo,
    body.menu-open .mobile-hero-logo {
        box-shadow: none !important;
        background: transparent !important;
    }
}



.showroom-products h2 {
    text-align: center;
    font-size: 2.4em;
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 1.5em;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}

.about {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 900px;
    text-align: center;
    position: relative;
}
.about h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2.2em;
    margin-bottom: 1.2em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}
.about-content p {
    font-size: 1.18em;
    color: #444;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 700px;
    text-align: center;
    letter-spacing: 0.2px;
}
@media (max-width: 700px) {
    .about {
        padding: 1.2em 0.7em;
    }
    .about-content p {
        font-size: 1em;
    }
}

.services {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 1100px;
    text-align: center;
    position: relative;
}

.services h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2.2em;
    margin-bottom: 1.2em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 1200px) {
    .services-grid {
        gap: 3em; /* Crește gap-ul pe ecrane mari */
    }
}

.service-box {
    background: #fffde4;
    border: 2px solid #ffd600;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.10);
    padding: 2em 1.5em 1.5em 1.5em;
    min-width: 220px;
    max-width: 100%;  /* Lățimea maximă este 100% din containerul părinte */
    flex: 1 1 auto;    /* Permite să crească și să se ajusteze */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-box:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 6px 24px rgba(255, 193, 7, 0.18);
    background: rgba(255, 213, 0, 0.1); /* Fundal subtil pe hover */
}

.service-img {
    width: 100%;
    max-width: 180px;
    height: auto;   /* Permite imaginii să se ajusteze proporțional */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1em;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.10);
}

.service-box h3 {
    color: #b38b00;
    margin-bottom: 1em;  /* Crește spațiul dintre titlu și descriere */
    font-size: 1.2em;
    text-align: center;
}

.service-box p {
    font-size: 1em;
    color: #444;
    text-align: center;
    margin-bottom: 1em;
}

.service-box .btn {
    margin-top: auto;
    background: #ffd600;
    color: #222;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1.5em;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.service-box .btn:hover {
    background: #b38b00;
    color: #fffde4;
}

@media (max-width: 900px) {
    .services {
        padding: 1.2em 0.7em;
    }

    .services-grid {
        flex-direction: column;
        gap: 1em;
        align-items: stretch;
    }

    .service-box {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        box-sizing: border-box; /* Asigură că padding-ul și border-ul sunt incluse în lățime */
    }

    .service-img {
        max-width: 100%;
        height: 140px;
    }
}

/* Enhance product / gallery responsiveness on small screens */
@media (max-width: 700px) {
    .products-categories, .gallery-grid, .projects-gallery, .portofoliu-gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.9em !important;
        align-items: center !important;
        padding: 0 0.6em !important;
    }

    .product-card, .project-card, .portofoliu-item, .service-box {
        width: 100% !important;
        max-width: 520px;
        margin: 0 auto !important;
        box-sizing: border-box;
        padding: 1em !important;
    }

    .product-img, .service-img, .project-img, .gallery-grid img, .depozit-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        object-fit: cover !important;
        border-radius: 10px;
    }

    /* Remove decorative floats/margins that prevent centering */
    .product-card img, .product-card .decorative, .product-card .badge {
        float: none !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Slightly reduce gaps for narrow screens */
    .products-categories { gap: 0.8em; }
}

    @media (max-width: 700px) {
        .avantaje-grid {
            display: flex !important;
            flex-direction: column !important;
            gap: 0.9em !important;
            align-items: center !important;
            padding: 0 0.6em !important;
        }

        .avantaj-card {
            width: 100% !important;
            max-width: 520px;
            margin: 0 auto !important;
            box-sizing: border-box;
            padding: 1em !important;
        }
    }

    /* Materials section: responsive stacking and centering on small screens */
    @media (max-width: 700px) {
        .materiale-grid {
            display: flex !important;
            flex-direction: column !important;
            gap: 1em !important;
            align-items: center !important;
            padding: 0 0.6em !important;
        }

        .material-card {
            width: 100% !important;
            max-width: 520px;
            margin: 0 auto !important;
            box-sizing: border-box;
            padding: 1em !important;
        }

        .depozit-img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            display: block !important;
            margin: 0 auto !important;
            object-fit: cover !important;
            border-radius: 12px;
        }
    }

@media (max-width: 600px) {
    .service-box .btn {
        padding: 0.7em 2em; /* Mărește padding-ul butonului pe ecrane mici */
        font-size: 1.1em;    /* Crește dimensiunea textului */
    }
}

.projects {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 1100px;
    text-align: center;
    position: relative;
}
.projects h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2.2em;
    margin-bottom: 1.2em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}
.projects-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: stretch;
}
.project-card {
    background: #fffde4;
    border: 2px solid #ffd600;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.10);
    padding: 0 0 1.5em 0;
    min-width: 220px;
    max-width: 320px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.project-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 6px 24px rgba(255, 193, 7, 0.18);
}
.project-img {
    width: 100%;
    max-width: 320px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    margin-bottom: 1em;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.10);
}
.project-info {
    padding: 0 1em;
}
.project-info h3 {
    color: #b38b00;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    text-align: center;
}
.project-info p {
    font-size: 1em;
    color: #444;
    text-align: center;
}
@media (max-width: 900px) {
    .projects {
        padding: 1.2em 0.7em;
    }
    .projects-gallery {
        flex-direction: column;
        gap: 1em;
        align-items: stretch;
    }
    .project-card {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    .project-img {
        max-width: 100%;
        height: 140px;
    }
}

.cta {
    background: linear-gradient(90deg, #fffbe6 60%, #ffd600 100%);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 700px;
    text-align: center;
    position: relative;
}
.cta-content h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2em;
    margin-bottom: 0.7em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}
.cta-content p {
    color: #444;
    font-size: 1.1em;
    margin-bottom: 1.5em;
}
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    margin: 0 auto;
    max-width: 420px;
}
.cta-form input,
.cta-form textarea {
    width: 100%;
    padding: 0.7em 1em;
    border: 1.5px solid #ffd600;
    border-radius: 6px;
    font-size: 1em;
    background: #fff;
    color: #222;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.06);
    resize: none;
}
.cta-form textarea {
    min-height: 80px;
    max-height: 200px;
}
.cta-form input:focus,
.cta-form textarea:focus {
    outline: none;
    border-color: #b38b00;
    box-shadow: 0 0 0 2px #ffd60055;
}
.cta-form .btn-cta {
    background: #ffd600;
    color: #222;
    border: none;
    border-radius: 4px;
    padding: 0.7em 2em;
    font-weight: 700;
    font-size: 1.1em;
    margin-top: 0.5em;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.10);
}
.cta-form .btn-cta:hover {
    background: #b38b00;
    color: #fffde4;
}
@media (max-width: 700px) {
    .cta {
        padding: 1.2em 0.7em;
    }
    .cta-form {
        max-width: 100%;
    }
}

.google-maps {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.10);
    padding: 2.5em 3em;
    margin: 3em auto 2em auto;
    max-width: 900px;
    text-align: left;
    position: relative;
}
.maps-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    align-items: flex-start;
    justify-content: space-between;
}
.maps-info {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 320px;
    color: #222;
    font-size: 1.08em;
    padding-top: 0.5em;
}
.maps-info h2 {
    font-family: 'Playfair Display', serif;
    color: #b38b00;
    font-size: 2em;
    margin-bottom: 0.7em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 16px #fffbe6, 0 2px 8px #ffd60044;
}
.maps-info p {
    margin: 0.5em 0;
    color: #444;
}
.maps-info a {
    color: #b38b00;
    text-decoration: underline;
}
.maps-embed {
    flex: 2 1 340px;
    min-width: 220px;
    max-width: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.maps-embed iframe {
    width: 100%;
    height: 220px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.10);
}
@media (max-width: 900px) {
    .google-maps {
        padding: 1.2em 0.7em;
    }
    .maps-content {
        flex-direction: column;
        gap: 1em;
    }
    .maps-embed {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    body, html {
        font-size: 16px;
        padding: 0;
        margin: 0;
    }
    header, .main-nav {
        padding: 0.2em 0;
        min-height: 60px;
    }
    .main-nav {
        flex-direction: column;
        gap: 0.5em;
    }
    .main-nav .nav-logo {
        margin: 0.5em 0 0.2em 0;
    }
    .main-nav .nav-logo img {
        height: 60px;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 0.2em;
        margin: 0;
        padding: 0;
        width: 100%;
        background: #fffbe6;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
    }
    .main-nav ul li {
        width: 100%;
        text-align: center;
    }
    .main-nav a {
        display: block;
        padding: 0.8em 0;
        font-size: 1.1em;
    }
    .hero-image {
        min-height: 220px;
        height: 40vh;
    }
    .hero-text {
        font-size: 1.5em;
        padding: 0 0.2em;
    }
    main {
        padding: 0.5em;
        max-width: 100%;
        box-sizing: border-box;
    }
    section, .about, .services, .projects, .cta, .google-maps, .partners {
        padding: 0.7em 0.2em;
        margin: 1em 0 1em 0;
        border-radius: 10px;
    }
    .services-grid, .projects-gallery, .gallery-grid, .products-categories, .partners-logos, .materiale-grid, .avantaje-grid, .servicii-grid, .portofoliu-gallery-profi, .certificari-grid {
        flex-direction: column !important;
        gap: 1em !important;
        align-items: stretch !important;
    }
    .service-box, .project-card, .product-card, .material-card, .avantaj-card, .serviciu-card, .portofoliu-item, .certificat-card {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .service-img, .project-img, .product-img, .gallery-item img, .portofoliu-item img {
        max-width: 100% !important;
        height: 120px !important;
    }
    .footer-content {
        padding: 1em 0.2em 0.5em 0.2em;
    }
    .footer-main {
        flex-direction: column;
        gap: 0.7em;
        align-items: stretch;
        text-align: center;
    }
    .footer-info, .footer-links, .footer-social {
        min-width: 0;
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5em;
        text-align: center;
    }
    .cta-form, .oferta-form, .contact-form {
        max-width: 100% !important;
        padding: 0;
        box-sizing: border-box;
    }
    .cta-form input, .cta-form textarea, .oferta-form input, .oferta-form textarea, .contact-form input, .contact-form textarea {
        font-size: 1em;
        padding: 0.7em 0.5em;
    }
    button, .btn, .btn-cta {
        font-size: 1.1em;
        padding: 0.7em 1.2em;
    }
    .maps-content {
        flex-direction: column;
        gap: 1em;
    }
    .maps-embed iframe {
        min-height: 160px;
        height: 160px;
    }
    .partners-logos {
        gap: 0.7em !important;
        padding: 0.5em 0 !important;
    }
    .partners-logos img {
        height: 32px !important;
    }
}

/* === Mobile sticky mini navbar === */
@media (max-width: 700px) {
    .main-nav {
        /* overlay the hero on small screens so logo and hamburger sit on the image */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: transparent;
        box-shadow: none;
        z-index: 110;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.4em 1em;
        transition: background 0.25s, box-shadow 0.25s;
    }
    .main-nav .nav-logo {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }
    .main-nav .nav-logo img {
        height: 68px !important; /* increased on mobile */
        max-width: 240px;
        display: block;
        transition: height 0.25s, filter 0.25s;
    }
    .hero-image {
        width: 100%;
    min-height: 180px;
    height: 44vw;
    max-height: 220px;
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    background: url('hero.jpg') center center/cover no-repeat;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 32px 0 rgba(255, 193, 7, 0.18), 0 2px 8px 0 rgba(255, 193, 7, 0.10);
    overflow: hidden;
  }
  .hero-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32));
    z-index: 2;
  }
    /* prevent accidental horizontal scroll from full-viewport widths */
    html, body {
        overflow-x: hidden;
    }
  .hero-text {
    color: #fffde4;
    font-size: 1.25em;
    font-weight: 700;
    text-shadow: 0 4px 16px rgba(255,193,7,0.25), 0 4px 16px rgba(0,0,0,0.5);
    text-align: center;
    max-width: 96vw;
    line-height: 1.1;
    padding: 0 0.5em 1.2em 0.5em;
    position: relative;
    z-index: 3;
    border-radius: 0;
    background: none;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  }
    .main-nav .menu-toggle {
        position: absolute;
    top: 20px; /* moved 10px down for visual adjustment */
    right: 34px; /* nudged further left to match requested alignment */
        z-index: 121;
        background: transparent;
        border: none;
        padding: 6px 8px; /* a bit wider padding to house stacked bars */
        width: auto;
        height: auto;
        display: inline-flex;
        flex-direction: column; /* stack spans vertically */
        align-items: center;
        justify-content: center;
        gap: 4px; /* consistent spacing between bars */
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* make hamburger bars high-contrast so they're visible on any background */
    .main-nav .menu-toggle span {
        display: block;
        width: 28px;
        height: 3px;
        margin: 0; /* spacing controlled by parent gap */
        background: #ffd600; /* bright brand yellow */
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.12) inset;
        transition: transform 0.28s ease, opacity 0.22s ease, background 0.18s ease;
    }
    /* when nav becomes scrolled (solid bg), use slightly darker yellow for contrast */
    .main-nav.scrolled .menu-toggle span {
        background: #b38b00;
    }
        /* lighten the hero overlay so header elements look merged with the image */
        .hero-image::after {
            background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18));
        }
    .main-nav .menu-toggle:focus {
        outline: 2px solid #ffd60066;
        outline-offset: 2px;
    }
    /* animated state (open/active) - support both classes used in files */
    .main-nav .menu-toggle.open span:nth-child(1),
    .main-nav .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(2px, 2px);
    }
    .main-nav .menu-toggle.open span:nth-child(2),
    .main-nav .menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-6px);
    }
    .main-nav .menu-toggle.open span:nth-child(3),
    .main-nav .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(2px, -2px);
    }
    .main-nav ul {
        display: none;
        position: absolute;
        /* menu opens lower so it doesn't overlap logo/hamburger — increased from 54px */
        top: 86px;
    left: 0;
        /* use percent width to avoid adding the viewport scrollbar width which can cause overflow */
        right: 0;
        width: 100%;
    background: #fffbe6;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.13);
    border-radius: 0 0 12px 12px;
    flex-direction: column;
    gap: 0.2em;
    z-index: 101;
    padding: 0.7em 0 0.7em 0;
    align-items: center;
  }
  .main-nav ul.open {
        display: flex;
    }
  .main-nav ul li {
        width: 100%;
    text-align: center;
    margin: 0.2em 0;
  }
  .main-nav a {
    display: block;
    padding: 1em 0;
    font-size: 1.1em;
    color: #b38b00 !important;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid #ffd60022;
        width: 100%;
        box-sizing: border-box;
  }
    /* Center links when mobile menu opens - covers both single UL and split nav (.nav-right) */
    .main-nav ul.open, .main-nav .nav-right.open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4em !important;
        padding: 0.6em 0 !important;
    }
    .main-nav .nav-right.open li, .main-nav ul.open li {
        width: auto !important;
        max-width: 92vw !important;
        text-align: center !important;
    }
        /* Make anchors centered and ensure the right-nav opens as a full-width dropdown */
        .main-nav ul.open a,
        .main-nav .nav-right.open a {
            display: block !important;
            width: 100% !important;
            max-width: 92vw !important;
            text-align: center !important;
            padding: 0.9em 0 !important;
        }
        /* Position the split right nav like a dropdown so items center visually */
        .main-nav .nav-right.open {
            position: absolute !important;
            top: 86px !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            background: #fffbe6 !important;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.13) !important;
            border-radius: 0 0 12px 12px !important;
            z-index: 101 !important;
            padding: 0.6em 0 !important;
            align-items: center !important;
        }
            /* Additional fallbacks: cover when .open is added to nav or to nav-left */
            .main-nav.open .nav-right,
            .main-nav.open .nav-left,
            .main-nav .nav-left.open {
                position: absolute !important;
                top: 86px !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                background: #fffbe6 !important;
                box-shadow: 0 2px 8px rgba(255, 193, 7, 0.13) !important;
                border-radius: 0 0 12px 12px !important;
                z-index: 101 !important;
                padding: 0.6em 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }
            .main-nav ul.open a,
            .main-nav .nav-right.open a,
            .main-nav .nav-left.open a,
            .main-nav.open ul a {
                text-align: center !important;
                margin: 0 auto !important;
                display: block !important;
                width: 100% !important;
                max-width: 92vw !important;
                padding: 0.9em 0 !important;
            }

                /* --- Improved mobile menu visual style --- */
                /* A visually cleaner dropdown: soft background, rounded corners, centered items */
                .main-nav ul.open,
                .main-nav .nav-right.open,
                .main-nav.open ul,
                .main-nav .nav-left.open {
                    background: rgba(255, 251, 230, 0.98) !important; /* softer than solid */
                    border-radius: 10px !important;
                    margin: 0.4em auto 0 !important;
                    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
                    padding: 0.6em 0 !important;
                    width: calc(100% - 2.4em) !important; /* keep small side gutters */
                    left: 1.2em !important;
                    right: 1.2em !important;
                }

                .main-nav ul.open li,
                .main-nav .nav-right.open li,
                .main-nav .nav-left.open li {
                    width: 100% !important;
                    margin: 0.25em 0 !important;
                    list-style: none !important;
                }

                .main-nav ul.open a,
                .main-nav .nav-right.open a,
                .main-nav .nav-left.open a {
                    display: block !important;
                    width: 100% !important;
                    padding: 0.85em 0 !important;
                    color: #b38b00 !important;
                    font-size: 1.05em !important;
                    font-weight: 600 !important;
                    text-align: center !important;
                    text-decoration: none !important;
                    background: transparent !important;
                    border-bottom: none !important; /* remove harsh separators */
                }

                    /* --- Fullscreen overlay for mobile menu (strong override) --- */
                    .main-nav ul.open {
                            position: relative !important;
                            display: flex !important;
                            flex-direction: column !important;
                            align-items: center !important;
                            justify-content: center !important;
                            background: transparent !important;
                            padding: 0 !important;
                            gap: 0 !important;
                            z-index: 9999 !important;
                        }

                        /* Centered card modal for mobile menu */
                            /* disable backdrop so menu items remain interactive */
                            body.menu-open::before {
                                display: none !important;
                            }

                        .main-nav ul.open {
                            position: fixed !important;
                            left: 50% !important;
                            top: 14% !important;
                            transform: translateX(-50%) !important;
                            width: calc(100% - 3em) !important;
                            max-width: 520px !important;
                            background: #fffbe6 !important;
                            border-radius: 12px !important;
                            box-shadow: 0 24px 60px rgba(0,0,0,0.18) !important;
                            padding: 0.6em 0.6em !important;
                            z-index: 9999 !important;
                            display: flex !important;
                            flex-direction: column !important;
                            align-items: center !important;
                        }

                        .main-nav ul.open li {
                            width: 100% !important;
                            margin: 0.2em 0 !important;
                            list-style: none !important;
                            display: flex !important;
                            justify-content: center !important;
                        }

                        .main-nav ul.open a {
                            display: inline-block !important;
                            color: #b38b00 !important;
                            font-size: 1.05rem !important;
                            font-weight: 700 !important;
                            padding: 0.8em 0 !important;
                            border-radius: 8px !important;
                            text-align: center !important;
                            width: 100% !important;
                            max-width: 100% !important;
                            background: transparent !important;
                            text-decoration: none !important;
                        }

                        .main-nav ul.open li + li { margin-top: 0.3em !important; }

                        /* When menu open, prevent body scroll */
                        body.menu-open {
                            overflow: hidden !important;
                            height: 100% !important;
                        }

                /* Subtle separators between items using box-shadow on li instead of border */
                .main-nav ul.open li + li {
                    box-shadow: inset 0 1px 0 rgba(255,214,0,0.06) !important;
                }

                /* Keep hamburger visible and positioned to the right of the centered logo */
                .main-nav .menu-toggle {
                    position: absolute !important;
                    right: 46px !important;
                    top: 40px !important;
                }

                    /* Fullscreen overlay menu variant when open: modern centered items */

                    .main-nav.overlay-open .overlay-panel,
                    .main-nav.open .overlay-panel,
                    .nav-right.open .overlay-panel {
                        position: fixed !important;
                        inset: 0 !important;
                        background: rgba(0,0,0,0.52) !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        z-index: 9999 !important;
                    }

                    .main-nav.overlay-open .overlay-panel .menu-inner,
                    .main-nav.open .overlay-panel .menu-inner,
                    .nav-right.open .overlay-panel .menu-inner {
                        background: #fffbe6 !important;
                        border-radius: 12px !important;
                        padding: 1.2em 1.4em !important;
                        width: calc(100% - 3em) !important;
                        max-width: 560px !important;
                        box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
                        text-align: center !important;
                    }

                    .main-nav.overlay-open .overlay-panel .menu-inner a,
                    .main-nav.open .overlay-panel .menu-inner a,
                    .nav-right.open .overlay-panel .menu-inner a {
                        display: block !important;
                        font-size: 1.2em !important;
                        font-weight: 700 !important;
                        color: #b38b00 !important;
                        padding: 0.9em 0 !important;
                        text-decoration: none !important;
                    }
  .main-nav a.active, .main-nav a:hover {
    background: #ffd600;
    color: #222 !important;
  }
  .partners-logos img {
    height: 28px !important;
    max-width: 80px;
  }
  /* === MOBILE LOGO ABOVE HERO === */
    .mobile-hero-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        z-index: 120;
        pointer-events: auto;
        transition: opacity 0.2s;
    }
    .mobile-hero-logo img {
        height: 96px; /* bigger on small screens per request */
        max-width: 72vw;
        display: block;
        margin: 0 auto;
        pointer-events: auto;
        filter: drop-shadow(0 4px 16px #ffd60033);
        background: none;
        border: none;
        border-radius: 0;
        transition: opacity 0.2s, height 0.2s;
        object-fit: contain;
    }
  .mobile-hero-logo.hide {
    opacity: 0;
    pointer-events: none;
  }
  /* Hide nav logo on mobile at top, show only after scroll */
  .main-nav .nav-logo {
    display: none;
  }
  .main-nav.scrolled .nav-logo {
    display: flex;
  }
  /* Hero image spacing for mobile */
  .hero-image {
    margin-top: 0;
    min-height: 180px;
    height: 38vw;
    max-height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
  /* Responsive images in galleries and sections */
  .gallery-grid img, .projects-gallery img, .product-img, .service-img {
    max-width: 98vw !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 700px) {
    /* When mobile menu is open, hide everything except header/nav/logo and show site background */
    body.menu-open {
        background: #fffbe6 !important; /* match site background */
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* hide top-level content except header and the floating mobile logo */
    body.menu-open > *:not(header):not(.mobile-hero-logo):not(.main-nav) {
        display: none !important;
    }

    /* ensure header/nav/logo stay visible and above the background */
    body.menu-open header,
    body.menu-open .main-nav,
    body.menu-open .mobile-hero-logo {
        display: block !important;
        z-index: 120 !important;
    }

    /* show the open menu centered as a card above the background */
    body.menu-open .main-nav ul.open {
        display: flex !important;
        position: fixed !important;
        left: 50% !important;
        top: 14% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 3em) !important;
        max-width: 520px !important;
        background: #fffbe6 !important;
        border-radius: 12px !important;
        box-shadow: 0 24px 60px rgba(0,0,0,0.18) !important;
        padding: 0.6em 0.6em !important;
        z-index: 130 !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* keep menu links interactive */
    body.menu-open .main-nav ul.open a {
        pointer-events: auto !important;
    }

}

@media (min-width: 701px) {
  .menu-toggle { display: none !important; }
  /* === DESKTOP: show nav logo always, hide mobile hero logo === */
  .mobile-hero-logo {
    display: none !important;
  }
  .main-nav .nav-logo {
    display: flex !important;
  }
}

/* === FORCE: show main menu on wider screens (desktop) === */
@media (min-width: 701px) {
    /* Ensure the nav shows inline on desktop */
    .main-nav ul {
        display: flex !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 !important;
    }
    .main-nav .menu-toggle,
    .menu-toggle {
        display: none !important; /* hide hamburger on desktop */
    }
    .main-nav .nav-logo {
        display: flex !important;
    }
    .main-nav ul li {
        width: auto !important;
        margin: 0 0.4em !important;
        text-align: left !important;
    }
    .main-nav a {
        display: inline-block !important;
        padding: 0.5em 0.9em !important;
        font-size: 1em !important;
        color: #b38b00 !important;
        background: none !important;
    }
    /* keep scrolled-state color consistent */
    .main-nav.scrolled a { color: #b38b00 !important; }
}