/*==========================================
      IULIA POPA & SIRIUS BAND
      PREMIUM CSS
==========================================*/

:root{

--gold:#FFD54A;
--gold2:#F4B400;
--green:#0b2f24;
--green2:#103c2d;
--dark:#111111;
--white:#ffffff;
--gray:#d7d7d7;

--radius:18px;

--shadow:0 15px 40px rgba(0,0,0,.35);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:linear-gradient(180deg,#0a1914,#122c21,#0b1914);

color:var(--white);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1200px,92%);

margin:auto;

}

/*=========================
HEADER
==========================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(10,18,15,.88);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,.08);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

}

.logo img{

width:78px;

border-radius:12px;

transition:.4s;

box-shadow:0 8px 25px rgba(0,0,0,.35);

}

.logo img:hover{

transform:scale(1.08);

}

nav ul{

display:flex;

gap:34px;

align-items:center;

}

nav a{

font-weight:600;

font-size:16px;

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--gold);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

/*=========================
HERO
==========================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:220px 20px 140px;

text-align:center;

background:

linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.55)),

url("../images/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:radial-gradient(circle at center,

rgba(255,213,74,.08),

transparent 65%);

}

.hero-content{

position:relative;

z-index:2;

max-width:950px;

animation:fadeUp 1s ease;

}

.hero h1{

font-family:'Cinzel',serif;

font-size:82px;

color:var(--gold);

letter-spacing:2px;

margin-bottom:10px;

text-shadow:0 8px 18px rgba(0,0,0,.45);

}

.hero h2{

font-size:40px;

font-weight:700;

margin-bottom:25px;

}

.hero h3{

font-size:28px;

font-weight:400;

color:#f2f2f2;

margin-bottom:30px;

letter-spacing:2px;

}

.hero p{

font-size:22px;

color:#efefef;

margin:auto;

max-width:900px;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin-bottom:35px;

}

.btn{

background:linear-gradient(135deg,var(--gold),var(--gold2));

padding:18px 42px;

border-radius:60px;

font-weight:700;

color:#222;

box-shadow:var(--shadow);

transition:var(--transition);

}

.btn:hover{

transform:translateY(-5px);

}

.btn-outline{

border:2px solid var(--gold);

padding:18px 42px;

border-radius:60px;

font-weight:700;

transition:var(--transition);

}

.btn-outline:hover{

background:var(--gold);

color:#222;

}

.hero-scroll{

margin-top:15px;

}

.hero-scroll a{

color:var(--gold);

font-size:18px;

transition:.3s;

}

.hero-scroll a:hover{

letter-spacing:1px;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==========================================
SECTIUNI GENERALE
==========================================*/

section{

padding:110px 0;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.subtitle{

display:inline-block;

color:var(--gold);

font-size:15px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:12px;

}

.section-title h2{

font-family:'Cinzel',serif;

font-size:48px;

color:var(--gold);

margin-bottom:20px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:20px;

color:#dddddd;

}

/*==========================================
POVESTE
==========================================*/

.story-grid{

display:grid;

grid-template-columns:1.3fr .9fr;

gap:60px;

align-items:center;

}

.story-text p{

font-size:19px;

margin-bottom:28px;

color:#ececec;

text-align:justify;

}

.story-text strong{

color:var(--gold);

}

.story-image img{

border-radius:22px;

box-shadow:var(--shadow);

transition:.5s;

}

.story-image img:hover{

transform:scale(1.03);

}

/*==========================================
CARDURI
==========================================*/

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.card{

background:rgba(255,255,255,.05);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:35px;

transition:.4s;

box-shadow:0 10px 25px rgba(0,0,0,.20);

}

.card:hover{

transform:translateY(-10px);

background:rgba(255,213,74,.08);

border-color:rgba(255,213,74,.45);

}

.card h3{

font-size:28px;

color:var(--gold);

margin-bottom:18px;

}

.card p{

font-size:17px;

color:#efefef;

}

/*==========================================
FORMATIA
==========================================*/

.members{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

}

.member{

background:#0d2d27;

border-radius:20px;

overflow:hidden;

text-align:center;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.30);

border:3px solid #d4af37;

}

.member:hover{

transform:translateY(-12px);

}

.member img{

    width:170px;
    height:170px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    border:4px solid #d4af37;
    margin:20px auto;
    display:block;
}

.member:hover img{

transform:scale(1.08);

}

.member h3{

margin-top:25px;

font-size:30px;

color:var(--gold);

}

.member span{

display:block;

margin:12px 0;

font-weight:600;

font-size:18px;

color:#ffffff;

}

.member p{

padding:0 25px 30px;

color:#dddddd;

font-size:17px;

line-height:1.7;

}

.member.featured{

border:2px solid var(--gold);

background:linear-gradient(180deg,

rgba(255,213,74,.08),

rgba(255,255,255,.05));

}

.member.featured h3{

font-size:34px;

}

.member.featured::before{

content:"SOLISTĂ";

display:inline-block;

margin-top:20px;

padding:8px 18px;

background:var(--gold);

color:#222;

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

}
/*==========================================
REPERTORIU
==========================================*/

#repertoriu{

background:linear-gradient(180deg,#10291f,#0b1914);

}

#repertoriu .cards{

margin-top:60px;

}

#repertoriu .card{

text-align:center;

padding:40px 30px;

}

#repertoriu .card h3{

font-size:28px;

margin-bottom:18px;

}

#repertoriu .card:hover{

transform:translateY(-12px) scale(1.03);

}

/*==========================================
GALERIE FOTO
==========================================*/

#galerie{

background:#08130f;

}

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:50px;

}

.gallery img{

width:100%;

height:280px;

object-fit:cover;

border-radius:22px;

cursor:pointer;

transition:.45s;

box-shadow:0 15px 35px rgba(0,0,0,.35);

border:3px solid transparent;

}

.gallery img:hover{

transform:scale(1.05);

border-color:var(--gold);

box-shadow:0 25px 50px rgba(0,0,0,.45);

}

/*==========================================
VIDEO
==========================================*/

#video{

background:linear-gradient(180deg,#0d2119,#08130f);

}

.videos{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:35px;

margin-top:60px;

}

.videos iframe{

width:100%;

height:250px;

border:none;

border-radius:22px;

box-shadow:var(--shadow);

transition:.4s;

background:#000;

}

.videos iframe:hover{

transform:translateY(-8px);

}

/*==========================================
ANIMATII
==========================================*/

.gallery img,

.member,

.card,

iframe{

opacity:0;

transform:translateY(40px);

animation:fadeCard .9s forwards;

}

.gallery img:nth-child(2){

animation-delay:.15s;

}

.gallery img:nth-child(3){

animation-delay:.30s;

}

.gallery img:nth-child(4){

animation-delay:.45s;

}

.gallery img:nth-child(5){

animation-delay:.60s;

}

.gallery img:nth-child(6){

animation-delay:.75s;

}

.gallery img:nth-child(7){

animation-delay:.90s;

}

.gallery img:nth-child(8){

animation-delay:1.05s;

}

@keyframes fadeCard{

to{

opacity:1;

transform:translateY(0);

}

}
/*==========================================
RECENZII
==========================================*/

#testimoniale{

background:linear-gradient(180deg,#10291f,#0b1914);

}

#testimoniale .cards{

margin-top:60px;

}

#testimoniale .card{

text-align:center;

padding:40px;

}

#testimoniale .card h3{

font-size:32px;

margin-bottom:20px;

color:var(--gold);

}

#testimoniale .card strong{

display:block;

margin-top:20px;

color:var(--gold);

font-size:20px;

letter-spacing:1px;

}

/*==========================================
CONTACT
==========================================*/

#contact{

background:#08130f;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

margin-top:60px;

align-items:start;

}

.contact-grid h3{

color:var(--gold);

font-size:24px;

margin-bottom:12px;

}

.contact-grid p{

margin-bottom:25px;

font-size:18px;

color:#f2f2f2;

}

form{

display:flex;

flex-direction:column;

gap:18px;

}

input,

textarea{

padding:18px;

background:#123126;

border:1px solid rgba(255,255,255,.12);

border-radius:15px;

font-size:17px;

color:white;

transition:.35s;

outline:none;

}

input:focus,

textarea:focus{

border-color:var(--gold);

box-shadow:0 0 15px rgba(255,213,74,.25);

}

textarea{

min-height:180px;

resize:vertical;

}

button{

background:linear-gradient(135deg,var(--gold),var(--gold2));

padding:18px;

border:none;

border-radius:50px;

font-size:20px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

button:hover{

transform:translateY(-4px);

}

/*==========================================
FOOTER
==========================================*/

footer{

padding:70px 20px;

background:#06110d;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

width:120px;

margin:auto;

margin-bottom:25px;

}

footer h3{

font-family:'Cinzel',serif;

font-size:34px;

color:var(--gold);

margin-bottom:18px;

}

footer p{

color:#dddddd;

margin-bottom:10px;

}

/*==========================================
WHATSAPP
==========================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#25D366;

font-size:32px;

color:white;

box-shadow:0 15px 35px rgba(0,0,0,.35);

transition:.35s;

z-index:9999;

}

.whatsapp:hover{

transform:scale(1.12);

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:992px){

.hero{

padding-top:190px;

}

.story-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

nav ul{

gap:20px;

}

}

@media(max-width:768px){

.hero h1{

font-size:50px;

}

.hero h2{

font-size:28px;

}

.hero h3{

font-size:22px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn,

.btn-outline{

width:100%;

max-width:320px;

text-align:center;

}

.section-title h2{

font-size:34px;

}

.members,

.cards,

.gallery,

.videos{

grid-template-columns:1fr;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.logo img{

width:65px;

}

}

@media(max-width:480px){

.hero{

padding:170px 20px 100px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:22px;

}

.hero h3{

font-size:18px;

letter-spacing:1px;

}

.section-title h2{

font-size:28px;

}

.subtitle{

font-size:13px;

}

}
/* =========================
   GALERIE FOTO
========================= */

.gallery{
    padding:50px 0;
    background:#0b0f1a;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.gallery-item{
    border-radius:14px;
    overflow:hidden;
    border:2px solid rgba(255,212,74,.25);
    background:#151515;
    transition:.35s;
}

.gallery-item:hover{
    transform:translateY(-5px);
    border-color:#ffd44a;
}

.gallery-item img{
    width:100%;
    height:180px;
    object-fit:contain;
    object-position:center 40%;
    display:block;
}

@media(max-width:768px){
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-item img{
        height:150px;
    }
}

@media(max-width:480px){
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:220px;
    }
}
.video-section{
    padding:80px 0;
    background:#0b0f1a;
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:25px;
}

.video-grid video{
    width:100%;
    border-radius:18px;
    border:2px solid #d4af37;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
/*==========================
VIDEO
==========================*/

.video-section{
    padding:70px 0;
    background:#0b1f1a;
}

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

.video-grid iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.3s;
}

.video-grid iframe:hover{
    transform:translateY(-6px);
}
.instrument-box{
    background:linear-gradient(135deg,#FFD700,#C9A227);
    color:#111;
    padding:12px;
    margin-top:15px;
    border-radius:14px;
    font-weight:700;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.35);
}

.instrument-box span{
    display:block;
    margin-top:5px;
    font-size:14px;
    font-weight:600;
}
/* ===== SERVICII PREMIUM ===== */

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    margin-top:40px;
}

.service-card{
    background:rgba(255,255,255,.05);
    border:2px solid #d4af37;
    border-radius:22px;
    padding:30px 20px;
    text-align:center;
    transition:.35s;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(212,175,55,.35);
}

.service-circle{
    width:110px;
    height:110px;
    margin:0 auto 20px;
    border:3px solid #FFD54A;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#FFD54A,#c99700);
}

.service-circle i{
    font-size:48px;
    color:#111;
}

.service-card h3{
    color:#fff;
    font-size:22px;
}
/*=========================
REPERTORIU PREMIUM
=========================*/

.repertoire-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

margin-top:40px;

}

.repertoire-card{

background:rgba(255,255,255,.05);

border:2px solid #d4af37;

border-radius:22px;

padding:30px 20px;

text-align:center;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.repertoire-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(212,175,55,.35);

}

.repertoire-circle{

width:100px;

height:100px;

margin:0 auto 20px;

display:flex;

justify-content:center;

align-items:center;

border-radius:22px;

background:linear-gradient(145deg,#FFD54A,#c79600);

box-shadow:0 8px 20px rgba(255,212,74,.35);

}

.repertoire-circle i{

font-size:44px;

color:#111;

}

.repertoire-card h3{

font-size:20px;

color:#fff;

line-height:1.4;

margin-top:10px;

}
/*=========================
DE CE NOI PREMIUM
=========================*/

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

margin-top:50px;

}

.why-card{

background:rgba(255,255,255,.05);

border:2px solid #d4af37;

border-radius:24px;

padding:35px 25px;

text-align:center;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 35px rgba(212,175,55,.35);

}

.why-icon{

width:90px;

height:90px;

margin:0 auto 20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(145deg,#FFD54A,#c99700);

border-radius:22px;

box-shadow:0 8px 20px rgba(255,212,74,.35);

}

.why-icon i{

font-size:40px;

color:#111;

}

.why-card h3{

font-size:24px;

color:#FFD54A;

margin-bottom:15px;

}

.why-card p{

font-size:17px;

line-height:1.7;

color:#f5f5f5;

}
.section-intro{
    text-align:center;
    margin-bottom:60px;
}

.section-intro span{
    color:#FFD54A;
    font-size:15px;
    letter-spacing:4px;
    font-weight:bold;
}

.section-intro h2{
    color:#fff;
    font-size:46px;
    margin:18px 0;
    font-family:"Cinzel",serif;
}

.section-intro p{
    max-width:850px;
    margin:auto;
    color:#ddd;
    font-size:19px;
    line-height:1.8;
}
/*======================
FOOTER PREMIUM
======================*/

.footer{

padding:60px 20px;

margin-top:80px;

background:#0b1416;

border-top:3px solid #d4af37;

text-align:center;

}


.footer-premium{
    background:#111;
    border-top:2px solid #d4af37;
    padding:60px 20px;
    text-align:center;
}

.footer-logo h2{
    color:#d4af37;
    font-size:38px;
    margin-bottom:10px;
}

.footer-logo p{
    color:#fff;
    font-size:20px;
    margin-bottom:35px;
}

.footer-contact p{
    color:#fff;
    margin:12px 0;
    font-size:18px;
}

.footer-contact i{
    color:#d4af37;
    margin-right:10px;
}

.footer-social{
    margin:35px 0;
}

.footer-social a{
    width:60px;
    height:60px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:2px solid #d4af37;
    border-radius:50%;
    color:#d4af37;
    font-size:26px;
    margin:8px;
    transition:.3s;
}

.footer-social a:hover{
    background:#d4af37;
    color:#111;
}

.footer-btn{
    display:inline-block;
    background:#d4af37;
    color:#111;
    padding:16px 38px;
    border-radius:50px;
    font-weight:bold;
    text-decoration:none;
    margin:25px 0;
    font-size:18px;
}

.footer-btn:hover{
    transform:translateY(-4px);
}

.copyright{
    color:#aaa;
    margin-top:30px;
}

.motto{
    color:#d4af37;
    font-style:italic;
    font-size:24px;
    margin-top:15px;
}
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:65px;
    height:65px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    text-decoration:none;
    box-shadow:0 0 25px rgba(37,211,102,.5);
    z-index:9999;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.12);
}
.top-banner{
    background:linear-gradient(90deg,#c89b3c,#f5d36b,#c89b3c);
    color:#111;
    text-align:center;
    padding:12px;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
}