*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f4f8fc;color:#222}
header{
    background-image:url("images/bannervinimi.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:white;
    height:600px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    color:white;
    padding-bottom:30px;
    text-align:center;
}
.logo{width:50px}

nav{background:#fff;padding:50px;text-align:center;position:sticky;top:0;box-shadow:0 2px 8px rgba(0,0,0,.1)}
nav a{margin:0 15px;text-decoration:none;color:#0b4ea2;font-weight:bold}
.container{max-width:1200px;margin:auto;padding:40px 20px}
.hero{text-align:center;padding:60px 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:25px}
.card{background:#fff;padding:25px;border-radius:15px;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:.3s}
.card:hover{transform:translateY(-5px)}
.btn{display:inline-block;background:#d62828;color:#fff;padding:12px 20px;border-radius:8px;text-decoration:none;margin:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}
.placeholder{height:220px;border:2px dashed #bbb;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff}
footer{background:#0b4ea2;color:#fff;text-align:center;padding:25px;margin-top:40px}

.categorii{
    text-align:center;
    margin:25px 0;
}

.categorii button{
    background:#0b4ea2;
    color:white;
    border:none;
    padding:12px 22px;
    margin:6px;
    border-radius:30px;
    cursor:pointer;
    font-weight:bold;
    font-size:20px;
    transition:.3s;
}

.categorii button:hover{
    background:#d62828;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
}

.poza{
    display:none;
    width:100%;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

#lightbox{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

#lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:15px;
}

.poza{
    cursor:pointer;
}

form{
    max-width:700px;
    margin:auto;
}

form input,
form textarea{
    width:100%;
    padding:15px;
    font-size:18px;
    border-radius:10px;
    border:1px solid #ccc;
    margin-bottom:15px;
    box-sizing:border-box;
}

form button{
    width:100%;
    padding:15px;
    font-size:20px;
    background:#0b4ea2;
    color:white;
    border:none;
    border-radius:10px;
    cursor:pointer;
}

form button:hover{
    background:#d62828;
}


.card form{max-width:800px;margin:0 auto;}
.card form input,.card form textarea,.card form button{display:block;width:100%!important;}
.card form textarea{height:220px;}
.card form{
    display:flex;
    flex-direction:column;
    gap:20px;
    max-width:800px;
    margin:0 auto;
}

.card form input,
.card form textarea,
.card form button{
    width:100%;
    display:block;
}

.card form textarea{
    min-height:180px;
}

.card form button{
    padding:15px;
    background:#0b4ea2;
    color:white;
    border:none;
    border-radius:10px;
    font-size:18px;
    cursor:pointer;
}




/* ===================== MOBIL ===================== */
@media only screen and (max-width: 768px){

@media only screen and (max-width:768px){

header{
    height:140px;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center;
    padding:0;
    margin:0;
}

nav{
    padding:15px 5px;
}

nav a{
    font-size:16px;
    margin:5px;
}

.hero{
    padding:20px 10px;
}

.hero h2{
    font-size:28px;
}

.hero p{
    font-size:18px;
}

.btn{
    width:100%;
    display:block;
    margin:10px 0;
}

.cards{
    grid-template-columns:1fr;
}

.card{
    font-size:18px;
}

}

nav{
    padding:20px 10px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

nav a{
    margin:0;
    font-size:22px;
}

.container{
    padding:20px 15px;
}

.hero{
    padding:30px 10px;
}

.hero h2{
    font-size:42px;
    line-height:1.2;
}

.hero p{
    font-size:22px;
}

.btn{
    display:block;
    width:100%;
    margin:15px 0;
    font-size:22px;
    padding:18px;
}

.cards{
    grid-template-columns:1fr;
    gap:15px;
}

.card{
    padding:20px;
    font-size:22px;
}

form{
    max-width:100%;
}

form input,
form textarea{
    width:100%;
    font-size:20px;
    padding:16px;
}

form button{
    width:100%;
    font-size:22px;
    padding:18px;
}

footer{
    font-size:18px;
    line-height:1.6;
    padding:20px;
}

}