/* =========================================== 
 TRUBAČI STARS - CSS VARIABLES 
 =========================================== */ 
 
:root{
 
 --primary-gold:#D4A847;
 --primary-gold-light:#E6C876;
 --primary-gold-dark:#B8912F;
 --primary-gold-rgb:212,168,71;
 
 
 --bg-primary:#ffffff;
 --bg-secondary:#f8f9fa;
 --bg-tertiary:#f1f3f5;
 --bg-accent:#fef9e7;
 
 
 --text-primary:#1a1a2e;
 --text-secondary:#4a4a5a;
 --text-muted:#6c757d;
 --text-light:#868e96;
 
 
 --border-color:#e9ecef;
 --border-light:#f1f3f5;
 --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
 --shadow-md:0 4px 20px rgba(0,0,0,0.08);
 --shadow-lg:0 8px 40px rgba(0,0,0,0.1);
 --shadow-gold:0 4px 20px rgba(212,168,71,0.2);
 
 
 --gradient-gold:linear-gradient(135deg,#D4A847,#E6C876);
 --gradient-section:linear-gradient(180deg,#ffffff 0%,#f8f9fa 100%);
 
 
 --font-display:'Playfair Display',Georgia,serif;
 --font-body:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
 
 
 --section-padding:100px;
 --container-max:1200px;
 
 
 --transition:all 0.3s ease;
 --transition-slow:all 0.5s ease;
}
/* =========================================== 
 TRUBAČI STARS - BASE STYLES 
 =========================================== */ 
 
 
*,*::before,*::after{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
 
html{
 scroll-behavior:smooth;
 font-size:16px;
}
 
body{
 font-family:var(--font-body);
 background-color:var(--bg-primary);
 color:var(--text-primary);
 line-height:1.7;
 overflow-x:hidden;
}
 
a{
 text-decoration:none;
 color:inherit;
 transition:var(--transition);
}
 
img{
 max-width:100%;
 height:auto;
 display:block;
}
 
ul,ol{
 list-style:none;
}
 
 
.container{
 max-width:var(--container-max);
 margin:0 auto;
 padding:0 20px;
}
 
 
section{
 padding:var(--section-padding) 0;
}
 
.section-label{
 display:inline-block;
 font-size:0.85rem;
 font-weight:600;
 color:var(--primary-gold);
 text-transform:uppercase;
 letter-spacing:3px;
 margin-bottom:15px;
}
 
.section-title{
 font-family:var(--font-display);
 font-size:clamp(2rem,5vw,3rem);
 font-weight:700;
 color:var(--text-primary);
 margin-bottom:15px;
}
 
.section-title .gold{
 color:var(--primary-gold);
}
 
.section-subtitle{
 font-size:1.1rem;
 color:var(--text-muted);
 max-width:600px;
}
 
.section-header{
 text-align:center;
 margin-bottom:60px;
}
 
.section-header .section-subtitle{
 margin:0 auto;
}
 
 
.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding:16px 36px;
 font-size:1rem;
 font-weight:600;
 border-radius:50px;
 border:none;
 cursor:pointer;
 transition:var(--transition);
 text-transform:uppercase;
 letter-spacing:1px;
 position:relative;
 overflow:hidden;
}
 
.btn::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 background:rgba(255,255,255,0.2);
 border-radius:50%;
 transform:translate(-50%,-50%);
 transition:width 0.6s ease,height 0.6s ease;
}
 
.btn:hover::before{
 width:300px;
 height:300px;
}
 
.btn-primary{
 background:var(--gradient-gold);
 color:#fff;
 box-shadow:var(--shadow-gold);
}
 
.btn-primary:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 30px rgba(212,168,71,0.35);
}
 
.btn-secondary{
 background:var(--bg-primary);
 color:var(--text-primary);
 border:2px solid var(--border-color);
}
 
.btn-secondary:hover{
 border-color:var(--primary-gold);
 color:var(--primary-gold);
 background:var(--bg-accent);
}
 
.btn-large{
 padding:20px 48px;
 font-size:1.1rem;
}
 
.btn-full{
 width:100%;
 justify-content:center;
}
/* =========================================== 
 TRUBAČI STARS - NAVIGATION 
 =========================================== */ 
 
.navbar{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:1000;
 background:rgba(255,255,255,0.98);
 backdrop-filter:blur(20px);
 border-bottom:1px solid var(--border-color);
 transition:var(--transition);
}
 
.navbar.scrolled{
 box-shadow:var(--shadow-md);
}
 
.nav-container{
 max-width:var(--container-max);
 margin:0 auto;
 padding:0 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 height:80px;
}
 
.nav-logo{
 display:flex;
 align-items:center;
 gap:12px;
 font-size:1.5rem;
 color:var(--text-primary);
 text-decoration:none;
}
 
.nav-logo img{
 height:55px;
 width:auto;
 object-fit:contain;
}
 
.nav-logo-text{
 font-family:var(--font-display);
 font-size:1.3rem;
 font-weight:700;
 background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary-gold) 50%,var(--text-primary) 100%);
 background-size:200% auto;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 letter-spacing:1px;
 text-transform:uppercase;
 position:relative;
 transition:all 0.3s ease;
}
 
.nav-logo:hover .nav-logo-text{
 background-position:100% center;
}
 
.nav-logo i{
 color:var(--primary-gold);
 font-size:1.75rem;
}
 
.nav-logo strong{
 color:var(--primary-gold);
}
 
.nav-menu{
 display:flex;
 align-items:center;
 gap:8px;
}
 
.nav-link{
 padding:10px 18px;
 font-weight:500;
 font-size:0.95rem;
 color:var(--text-secondary);
 border-radius:8px;
 transition:var(--transition);
 position:relative;
}
 
.nav-link:hover{
 color:var(--primary-gold);
 background:var(--bg-accent);
}
 
.nav-link::after{
 content:'';
 position:absolute;
 bottom:-2px;
 left:50%;
 width:0;
 height:2px;
 background:var(--primary-gold);
 transition:all 0.3s ease;
 transform:translateX(-50%);
}
 
.nav-link:hover::after{
 width:60%;
}
 
.nav-link--cta{
 background:var(--gradient-gold);
 color:#fff !important;
 padding:12px 24px;
 font-weight:600;
}
 
.nav-link--cta:hover{
 transform:translateY(-2px);
 box-shadow:var(--shadow-gold);
 background:var(--gradient-gold);
}
 
.nav-link--cta::after{
 display:none;
}
 
 
.mobile-menu-toggle{
 display:none;
 flex-direction:column;
 gap:6px;
 background:none;
 border:none;
 cursor:pointer;
 padding:10px;
}
 
.mobile-menu-toggle span{
 width:28px;
 height:3px;
 background:var(--text-primary);
 border-radius:3px;
 transition:var(--transition);
}
/* ===========================================
 TRUBAČI STARS - HERO SECTION
 =========================================== */

.hero{
 position:relative;
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(135deg,#fefefe 0%,#f5f5f5 25%,#fffbeb 50%,#fef9e7 75%,#ffffff 100%);
 overflow:hidden;
 padding-top:80px;
 contain:layout style;
}


.hero::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:
 radial-gradient(circle at 20% 80%,rgba(212,168,71,0.15) 0%,transparent 40%),
 radial-gradient(circle at 80% 20%,rgba(212,168,71,0.1) 0%,transparent 40%),
 radial-gradient(circle at 40% 40%,rgba(180,140,50,0.08) 0%,transparent 30%);
 animation:heroFloat 20s ease-in-out infinite;
 pointer-events:none;
 will-change:transform;
}

.hero::after{
 content:'';
 position:absolute;
 inset:0;
 background:
 linear-gradient(45deg,transparent 40%,rgba(212,168,71,0.05) 50%,transparent 60%);
 background-size:200% 200%;
 animation:heroShimmer 8s ease-in-out infinite;
 pointer-events:none;
 will-change:transform;
}

@keyframes scaleInLCP{
 from{transform:scale(0.92)}
 to{transform:scale(1)}
}

@keyframes heroFloat{
 0%,100%{transform:translate(0,0) rotate(0deg)}
 25%{transform:translate(2%,1%) rotate(1deg)}
 50%{transform:translate(0,2%) rotate(0deg)}
 75%{transform:translate(-2%,1%) rotate(-1deg)}
}

@keyframes heroShimmer{
 0%,100%{background-position:200% 200%}
 50%{background-position:0% 0%}
}

.hero-overlay{
 position:absolute;
 inset:0;
 background:
 radial-gradient(ellipse at center,rgba(212,168,71,0.08) 0%,transparent 60%),
 radial-gradient(ellipse at 20% 80%,rgba(212,168,71,0.06) 0%,transparent 50%),
 radial-gradient(ellipse at 80% 30%,rgba(180,140,50,0.05) 0%,transparent 50%);
 pointer-events:none;
 animation:overlayPulse 6s ease-in-out infinite;
}

@keyframes overlayPulse{
 0%,100%{opacity:1}
 50%{opacity:0.7}
}

.hero-content{
 position:relative;
 z-index:2;
 text-align:center;
 padding:40px 20px;
 max-width:900px;
}

.hero-badge{
 display:inline-flex;
 align-items:center;
 gap:12px;
 padding:12px 28px;
 background:rgba(255,255,255,0.9);
 border:2px solid var(--primary-gold);
 border-radius:50px;
 font-size:0.85rem;
 font-weight:600;
 color:var(--primary-gold);
 margin-bottom:30px;
 box-shadow:0 4px 20px rgba(212,168,71,0.2);
 opacity:0;
 animation:fadeInDown 0.5s ease 0.1s forwards;
 backdrop-filter:blur(10px);
}

.hero-badge i{
 color:var(--primary-gold);
}

.hero-title{
 margin-bottom:20px;
}

.hero-title-small{
 display:block;
 font-family:var(--font-display);
 font-size:clamp(1.5rem,4vw,2.5rem);
 font-weight:400;
 color:#1a1a1a;
 letter-spacing:8px;
 text-transform:uppercase;
 opacity:0;
 animation:fadeInUp 0.5s ease 0.2s forwards;
}

.hero-title-main{
 display:block;
 font-family:var(--font-display);
 font-size:clamp(4rem,12vw,8rem);
 font-weight:700;
 background:var(--gradient-gold);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 line-height:1;
 text-shadow:none;
 animation:scaleInLCP 0.6s ease 0.3s both;
}

.hero-subtitle{
 font-size:clamp(1.1rem,2.5vw,1.4rem);
 color:#333;
 font-weight:500;
 margin-bottom:25px;
 opacity:0;
 animation:fadeInUp 0.5s ease 0.45s forwards;
}

.hero-description{
 max-width:650px;
 margin:0 auto 40px;
 opacity:0;
 animation:fadeIn 0.4s ease 0.55s forwards;
}

.hero-description p{
 font-size:1.1rem;
 color:#555;
 line-height:1.8;
}

.hero-cta{
 display:flex;
 gap:20px;
 justify-content:center;
 flex-wrap:wrap;
 margin-bottom:50px;
 opacity:0;
 animation:fadeInUp 0.5s ease 0.65s forwards;
}

.hero-stats{
 display:flex;
 justify-content:center;
 gap:60px;
 flex-wrap:wrap;
 margin-bottom:80px;
}

.stat{
 text-align:center;
 opacity:0;
 animation:bounceIn 0.5s ease forwards;
}

.stat:nth-child(1){animation-delay:0.75s}
.stat:nth-child(2){animation-delay:0.85s}
.stat:nth-child(3){animation-delay:0.95s}

.stat-number{
 display:block;
 font-family:var(--font-display);
 font-size:2.8rem;
 font-weight:700;
 color:var(--primary-gold);
}

.stat-label{
 font-size:0.9rem;
 color:#555;
 text-transform:uppercase;
 letter-spacing:2px;
}

.scroll-indicator{
 position:absolute;
 bottom:40px;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 color:#333;
 font-size:0.9rem;
 font-weight:500;
 cursor:pointer;
 z-index:10;
 opacity:0;
 animation:fadeIn 0.5s ease 1.1s forwards,bounce 2s infinite 1.5s;
}

.scroll-indicator i{
 font-size:1.2rem;
}

@keyframes bounce{
 0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}
 40%{transform:translateX(-50%) translateY(-10px)}
 60%{transform:translateX(-50%) translateY(-5px)}
}
/* =========================================== 
 TRUBAČI STARS - SECTIONS (About,Services,etc.) 
 =========================================== */ 
 
 
.about{
 background:var(--bg-primary);
}
 
.about-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:80px;
 align-items:center;
}
 
.about-intro{
 font-size:1.2rem;
 color:var(--text-primary);
 margin-bottom:20px;
}
 
.about-text p{
 margin-bottom:20px;
 color:var(--text-secondary);
}
 
.about-features{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:15px;
 margin-top:30px;
}
 
.feature{
 display:flex;
 align-items:center;
 gap:12px;
 padding:12px 16px;
 background:var(--bg-secondary);
 border-radius:10px;
 font-weight:500;
 color:var(--text-primary);
}
 
.feature i{
 color:var(--primary-gold);
 font-size:1.1rem;
}
 
.about-image{
 position:relative;
}
 
.about-image img{
 border-radius:20px;
 box-shadow:var(--shadow-lg);
}
 
.about-image-badge{
 position:absolute;
 bottom:-20px;
 left:-20px;
 background:var(--gradient-gold);
 color:#fff;
 padding:25px 30px;
 border-radius:16px;
 text-align:center;
 box-shadow:var(--shadow-gold);
}
 
.badge-number{
 display:block;
 font-family:var(--font-display);
 font-size:2.5rem;
 font-weight:700;
}
 
.badge-text{
 font-size:0.85rem;
 opacity:0.9;
}
 
 
.services{
 background:var(--bg-secondary);
}
 
.services-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px;
}
 
.service-card{
 position:relative;
 background:var(--bg-primary);
 border-radius:20px;
 padding:40px 30px;
 text-align:center;
 box-shadow:var(--shadow-sm);
 border:1px solid var(--border-color);
 transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),
 box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
 
.service-card:hover{
 transform:translateY(-10px);
 box-shadow:var(--shadow-lg);
 border-color:var(--primary-gold);
}
 
.service-card.featured{
 background:linear-gradient(135deg,#fffbeb 0%,#fff 100%);
 border:2px solid var(--primary-gold);
}
 
.service-badge{
 position:absolute;
 top:-12px;
 left:50%;
 transform:translateX(-50%);
 background:var(--gradient-gold);
 color:#fff;
 padding:8px 20px;
 border-radius:20px;
 font-size:0.75rem;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:1px;
}
 
.service-icon{
 width:80px;
 height:80px;
 margin:0 auto 25px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--bg-accent);
 border-radius:50%;
 font-size:2rem;
 color:var(--primary-gold);
}
 
.service-card h3{
 font-family:var(--font-display);
 font-size:1.5rem;
 color:var(--text-primary);
 margin-bottom:15px;
}
 
.service-card > p{
 color:var(--text-muted);
 margin-bottom:25px;
 line-height:1.7;
}
 
.service-features{
 text-align:left;
}
 
.service-features li{
 display:flex;
 align-items:center;
 gap:10px;
 padding:8px 0;
 color:var(--text-secondary);
 font-size:0.95rem;
}
 
.service-features li i{
 color:var(--primary-gold);
 font-size:0.85rem;
}
 
 
.gallery{
 background:var(--bg-primary);
}
 
.gallery-subtitle{
 font-family:var(--font-display);
 font-size:1.4rem;
 color:var(--text-primary);
 margin-bottom:25px;
 display:flex;
 align-items:center;
 gap:10px;
}
 
.gallery-subtitle i{
 color:var(--primary-gold);
}
 
.gallery-videos{
 margin-bottom:60px;
}
 
.gallery-photos{
 margin-bottom:20px;
}
 
 
.video-grid{
 display:grid;
 grid-template-columns:repeat(6,1fr);
 gap:15px;
 margin-bottom:30px;
}
 
.video-item{
 position:relative;
 border-radius:16px;
 overflow:hidden;
 background:#000;
 aspect-ratio:9/16;
}
 
 
.video-item.youtube-short iframe{
 width:100%;
 height:100%;
 border:none;
 border-radius:16px;
}
 
.video-item video{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.4s ease;
}
 
.video-item:hover video{
 transform:scale(1.05);
}
 
.video-play-btn{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 width:70px;
 height:70px;
 background:rgba(212,168,71,0.9);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 font-size:1.5rem;
 transition:all 0.3s ease;
 pointer-events:none;
}
 
.video-item:hover .video-play-btn{
 background:var(--primary-gold);
 transform:translate(-50%,-50%) scale(1.1);
}
 
.video-item.playing .video-play-btn{
 opacity:0;
}
 
 
.show-more-btn{
 display:none;
 margin:30px auto 0;
}
 
 
.hidden-mobile{
 display:block;
}
 
.gallery-masonry{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:15px;
}
 
.gallery-column{
 display:flex;
 flex-direction:column;
 gap:15px;
}
 
.gallery-item{
 border-radius:12px;
 overflow:hidden;
 cursor:pointer;
 transition:var(--transition);
}
 
.gallery-item:hover{
 transform:scale(1.02);
 box-shadow:var(--shadow-lg);
}
 
.gallery-item img{
 width:100%;
 height:auto;
 object-fit:cover;
 transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
 
.gallery-item:hover img{
 transform:scale(1.1);
}
 
 
@media (max-width:768px){
 .video-grid{
 grid-template-columns:repeat(3,1fr);
 gap:10px;
}
 
 .video-item{
 aspect-ratio:9/16;
}
 
 .video-play-btn{
 width:50px;
 height:50px;
 font-size:1.2rem;
}
 
 .hidden-mobile{
 display:none !important;
}
 
 .hidden-mobile.show{
 display:block !important;
}
 
 .show-more-btn{
 display:flex;
}
 
 .show-more-btn.hidden{
 display:none;
}
 
 .gallery-masonry{
 grid-template-columns:repeat(3,1fr);
 gap:10px;
}
 
 .gallery-column.hidden-mobile.show{
 display:flex !important;
}
}
 
@media (max-width:480px){
 .video-grid{
 grid-template-columns:repeat(3,1fr);
 gap:8px;
}
 
 .gallery-masonry{
 grid-template-columns:repeat(3,1fr);
 gap:8px;
}
 
 .video-play-btn{
 width:40px;
 height:40px;
 font-size:1rem;
}
}
 
 
.repertoire{
 background:var(--bg-secondary);
}
 
.repertoire-content{
 max-width:1000px;
 margin:0 auto;
}
 
.repertoire-text{
 text-align:center;
 margin-bottom:50px;
}
 
.repertoire-text p{
 color:var(--text-secondary);
 margin-bottom:15px;
 font-size:1.05rem;
}
 
.repertoire-categories{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:25px;
 margin-bottom:40px;
}
 
.category-card{
 background:var(--bg-primary);
 padding:30px 20px;
 border-radius:16px;
 text-align:center;
 box-shadow:var(--shadow-sm);
 border:1px solid var(--border-color);
 transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),
 box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
 
.category-card:hover{
 transform:translateY(-5px);
 border-color:var(--primary-gold);
 box-shadow:var(--shadow-md);
}
 
.category-icon{
 width:60px;
 height:60px;
 margin:0 auto 15px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--bg-accent);
 border-radius:50%;
 font-size:1.5rem;
 color:var(--primary-gold);
}
 
.category-card h4{
 color:var(--text-primary);
 margin-bottom:10px;
 font-size:1.1rem;
}
 
.category-card p{
 color:var(--text-muted);
 font-size:0.9rem;
 line-height:1.6;
}
 
.repertoire-note{
 display:flex;
 align-items:flex-start;
 gap:15px;
 padding:25px;
 background:var(--bg-accent);
 border-radius:12px;
 border-left:4px solid var(--primary-gold);
}
 
.repertoire-note i{
 color:var(--primary-gold);
 font-size:1.3rem;
 flex-shrink:0;
 margin-top:3px;
}
 
.repertoire-note p{
 color:var(--text-secondary);
 margin:0;
}
 
 
.testimonials{
 background:var(--bg-primary);
}
 
.testimonials-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px;
}
 
.testimonial-card{
 background:var(--bg-secondary);
 padding:35px;
 border-radius:20px;
 border:1px solid var(--border-color);
 transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),
 box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
 
.testimonial-card:hover{
 box-shadow:var(--shadow-md);
 border-color:var(--primary-gold);
 transform:translateY(-10px);
}
 
.testimonial-stars{
 margin-bottom:20px;
}
 
.testimonial-stars i{
 color:var(--primary-gold);
 font-size:1rem;
 margin-right:3px;
}
 
.testimonial-text{
 color:var(--text-secondary);
 font-style:italic;
 line-height:1.8;
 margin-bottom:25px;
}
 
.testimonial-author{
 border-top:1px solid var(--border-color);
 padding-top:20px;
}
 
.testimonial-author strong{
 display:block;
 color:var(--text-primary);
 margin-bottom:5px;
}
 
.testimonial-author span{
 font-size:0.9rem;
 color:var(--text-muted);
}
 
 
.why-us{
 background:var(--bg-secondary);
}
 
.why-us-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px;
}
 
.why-card{
 background:var(--bg-primary);
 padding:35px;
 border-radius:16px;
 border:1px solid var(--border-color);
 transition:var(--transition);
}
 
.why-card:hover{
 transform:translateY(-5px);
 box-shadow:var(--shadow-md);
 border-color:var(--primary-gold);
}
 
.why-number{
 font-family:var(--font-display);
 font-size:3rem;
 font-weight:700;
 color:var(--primary-gold);
 opacity:0.3;
 margin-bottom:10px;
}
 
.why-card h4{
 font-family:var(--font-display);
 font-size:1.3rem;
 color:var(--text-primary);
 margin-bottom:12px;
}
 
.why-card p{
 color:var(--text-muted);
 line-height:1.7;
}
 
 
.pricing{
 background:linear-gradient(135deg,#fffbeb 0%,#fef9e7 50%,#fff 100%);
 padding:100px 0;
 position:relative;
 overflow:hidden;
}
 
.pricing::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:
 radial-gradient(circle at 10% 20%,rgba(212,168,71,0.1) 0%,transparent 40%),
 radial-gradient(circle at 90% 80%,rgba(212,168,71,0.08) 0%,transparent 40%);
 pointer-events:none;
}
 
.pricing .section-label,
.pricing .section-title,
.pricing .section-subtitle{
 color:var(--text-primary);
}
 
.pricing .section-title .gold{
 color:var(--primary-gold);
}
 
.pricing-showcase{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 align-items:start;
 margin-top:50px;
 position:relative;
 z-index:1;
}
 
.pricing-main-card{
 background:#fff;
 border:2px solid var(--primary-gold);
 border-radius:30px;
 padding:50px 40px;
 text-align:center;
 position:relative;
 overflow:hidden;
 box-shadow:0 20px 60px rgba(212,168,71,0.15);
}
 
.pricing-main-card::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:radial-gradient(circle,rgba(212,168,71,0.08) 0%,transparent 70%);
 animation:pulse-glow 4s ease-in-out infinite;
}
 
@keyframes pulse-glow{
 0%,100%{opacity:0.5;transform:scale(1)}
 50%{opacity:1;transform:scale(1.1)}
}
 
.pricing-icon-large{
 position:relative;
 z-index:1;
 width:100px;
 height:100px;
 margin:0 auto 30px;
 background:var(--gradient-gold);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:2.5rem;
 color:#fff;
 box-shadow:0 10px 40px rgba(212,168,71,0.4);
}
 
.pricing-range{
 position:relative;
 z-index:1;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:15px;
 margin-bottom:20px;
}
 
.price-from,
.price-to{
 font-family:var(--font-display);
 font-size:3rem;
 font-weight:700;
 color:var(--primary-gold);
}
 
.price-separator{
 font-size:2rem;
 color:var(--text-muted);
}
 
.pricing-note{
 position:relative;
 z-index:1;
 color:var(--text-secondary);
 font-size:1rem;
 margin-bottom:30px;
}
 
.pricing-features{
 position:relative;
 z-index:1;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:15px;
 margin-bottom:30px;
}
 
.pricing-feature{
 display:flex;
 align-items:center;
 gap:10px;
 padding:12px 15px;
 background:var(--bg-secondary);
 border-radius:10px;
 color:var(--text-primary);
 font-size:0.9rem;
 border:1px solid var(--border-color);
}
 
.pricing-feature i{
 color:var(--primary-gold);
 font-size:1.1rem;
}
 
.pricing-main-card .btn{
 position:relative;
 z-index:1;
}
 
.pricing-info-cards{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}
 
.pricing-info-card{
 background:#fff;
 border:1px solid var(--border-color);
 border-radius:20px;
 padding:30px 25px;
 text-align:center;
 transition:all 0.3s ease;
 box-shadow:0 5px 20px rgba(0,0,0,0.05);
}
 
.pricing-info-card:hover{
 border-color:var(--primary-gold);
 transform:translateY(-5px);
 box-shadow:0 15px 40px rgba(212,168,71,0.15);
}
 
.info-icon{
 width:60px;
 height:60px;
 margin:0 auto 20px;
 background:linear-gradient(135deg,rgba(212,168,71,0.15),rgba(212,168,71,0.08));
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.5rem;
 color:var(--primary-gold);
}
 
.pricing-info-card h4{
 font-family:var(--font-display);
 font-size:1.2rem;
 color:var(--text-primary);
 margin-bottom:10px;
}
 
.pricing-info-card p{
 color:var(--text-muted);
 font-size:0.9rem;
 line-height:1.6;
}
 
 
@media (max-width:992px){
 .pricing-showcase{
 grid-template-columns:1fr;
}
 
 .pricing-info-cards{
 grid-template-columns:repeat(4,1fr);
}
}
 
@media (max-width:768px){
 .pricing-info-cards{
 grid-template-columns:1fr 1fr;
}
 
 .pricing-features{
 grid-template-columns:1fr;
}
 
 .price-from,
 .price-to{
 font-size:2.2rem;
}
}
 
@media (max-width:480px){
 .pricing-info-cards{
 grid-template-columns:1fr;
}
 
 .pricing-main-card{
 padding:40px 25px;
}
}
 
 
.cta-section{
 background:linear-gradient(135deg,#fffbeb 0%,#fef9e7 100%);
 padding:80px 0;
 border-top:1px solid var(--border-color);
 border-bottom:1px solid var(--border-color);
}
 
.cta-content{
 text-align:center;
 max-width:700px;
 margin:0 auto;
}
 
.cta-content h2{
 font-family:var(--font-display);
 font-size:2.5rem;
 color:var(--text-primary);
 margin-bottom:15px;
}
 
.cta-content p{
 color:var(--text-secondary);
 font-size:1.1rem;
 margin-bottom:30px;
}
/* =========================================== 
 CITIES SECTION 
 =========================================== */ 
.cities{
 background:var(--bg-secondary);
 padding:100px 0;
}
 
.cities-intro{
 text-align:center;
 max-width:800px;
 margin:0 auto 50px;
 color:var(--text-secondary);
 font-size:1.1rem;
 line-height:1.8;
}
 
.cities-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:25px;
 margin-bottom:40px;
}
 
.city-card{
 background:var(--bg-primary);
 padding:30px 25px;
 border-radius:15px;
 text-align:center;
 box-shadow:0 5px 20px rgba(0,0,0,0.08);
 transition:transform 0.3s ease,box-shadow 0.3s ease;
 border:1px solid var(--border-color);
}
 
.city-card:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0,0,0,0.12);
}
 
.city-card i{
 font-size:2rem;
 color:var(--primary-gold);
 margin-bottom:15px;
}
 
.city-card h4{
 font-family:var(--font-display);
 font-size:1.3rem;
 color:var(--text-primary);
 margin-bottom:10px;
}
 
.city-card p{
 color:var(--text-secondary);
 font-size:0.9rem;
 line-height:1.6;
}
 
.cities-note{
 display:flex;
 align-items:flex-start;
 gap:15px;
 background:linear-gradient(135deg,#fff9e6 0%,#fffbeb 100%);
 padding:25px 30px;
 border-radius:15px;
 border-left:4px solid var(--primary-gold);
}
 
.cities-note i{
 color:var(--primary-gold);
 font-size:1.5rem;
 margin-top:3px;
}
 
.cities-note p{
 color:var(--text-secondary);
 line-height:1.7;
}
 
@media (max-width:992px){
 .cities-grid{
 grid-template-columns:repeat(2,1fr);
}
}
 
@media (max-width:576px){
 .cities-grid{
 grid-template-columns:1fr;
}
}
 
/* =========================================== 
 SONGS LIST IN REPERTOIRE 
 =========================================== */ 
.songs-list{
 margin-top:50px;
 background:var(--bg-primary);
 padding:40px;
 border-radius:20px;
 box-shadow:0 5px 20px rgba(0,0,0,0.08);
}
 
.songs-title{
 font-family:var(--font-display);
 font-size:1.5rem;
 color:var(--text-primary);
 margin-bottom:30px;
 text-align:center;
}
 
.songs-title i{
 color:var(--primary-gold);
 margin-right:10px;
}
 
.songs-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:30px;
}
 
.songs-column h5{
 color:var(--primary-gold);
 font-size:1.1rem;
 margin-bottom:15px;
 padding-bottom:10px;
 border-bottom:2px solid var(--primary-gold);
}
 
.songs-column ul{
 list-style:none;
 padding:0;
}
 
.songs-column li{
 color:var(--text-secondary);
 padding:8px 0;
 border-bottom:1px solid var(--border-color);
 font-size:0.95rem;
}
 
.songs-column li:last-child{
 border-bottom:none;
}
 
@media (max-width:992px){
 .songs-grid{
 grid-template-columns:repeat(2,1fr);
}
}
 
@media (max-width:576px){
 .songs-grid{
 grid-template-columns:1fr;
}
 
 .songs-list{
 padding:25px;
}
}
 
/* =========================================== 
 FAQ SECTION 
 =========================================== */ 
.faq{
 background:var(--bg-primary);
 padding:100px 0;
}
 
.faq-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:25px;
}
 
.faq-item{
 background:var(--bg-secondary);
 border-radius:15px;
 padding:25px 30px;
 border:1px solid var(--border-color);
 transition:box-shadow 0.3s ease;
}
 
.faq-item:hover{
 box-shadow:0 5px 20px rgba(0,0,0,0.08);
}
 
.faq-question h4{
 font-family:var(--font-display);
 font-size:1.1rem;
 color:var(--text-primary);
 display:flex;
 align-items:flex-start;
 gap:12px;
}
 
.faq-question i{
 color:var(--primary-gold);
 font-size:1.2rem;
 margin-top:2px;
}
 
.faq-answer{
 margin-top:15px;
 padding-top:15px;
 border-top:1px solid var(--border-color);
}
 
.faq-answer p{
 color:var(--text-secondary);
 line-height:1.7;
 font-size:0.95rem;
}
 
@media (max-width:768px){
 .faq-grid{
 grid-template-columns:1fr;
}
}/* =========================================== 
 TRUBAČI STARS - CONTACT SECTION 
 =========================================== */ 
 
.contact{
 background:var(--bg-primary);
}
 
.contact-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
}
 
.contact-intro h3{
 font-family:var(--font-display);
 font-size:1.5rem;
 color:var(--text-primary);
 margin-bottom:15px;
}
 
.contact-intro p{
 color:var(--text-muted);
 margin-bottom:30px;
}
 
.contact-items{
 display:flex;
 flex-direction:column;
 gap:20px;
}
 
.contact-item{
 display:flex;
 align-items:center;
 gap:20px;
 padding:20px;
 background:var(--bg-secondary);
 border-radius:12px;
 transition:var(--transition);
}
 
.contact-item:hover{
 background:var(--bg-accent);
 transform:translateX(5px);
}
 
.contact-icon{
 width:50px;
 height:50px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--bg-primary);
 border-radius:50%;
 font-size:1.2rem;
 color:var(--primary-gold);
 box-shadow:var(--shadow-sm);
}
 
.contact-icon.viber{
 background:linear-gradient(135deg,#7360f2 0%,#59267c 100%);
 color:#fff;
}
 
.contact-icon.whatsapp{
 background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);
 color:#fff;
}
 
.contact-details h4{
 color:var(--text-primary);
 font-size:1rem;
 margin-bottom:5px;
}
 
.contact-details a{
 color:var(--primary-gold);
 font-weight:500;
}
 
.contact-details a:hover{
 text-decoration:underline;
}
 
.contact-note{
 display:flex;
 align-items:flex-start;
 gap:15px;
 padding:20px;
 background:var(--bg-accent);
 border-radius:12px;
 margin-top:30px;
 border-left:4px solid var(--primary-gold);
}
 
.contact-note i{
 color:var(--primary-gold);
 font-size:1.2rem;
 flex-shrink:0;
}
 
.contact-note p{
 color:var(--text-secondary);
 margin:0;
 font-size:0.95rem;
}
 
 
.contact-form-section h3{
 font-family:var(--font-display);
 font-size:1.5rem;
 color:var(--text-primary);
 margin-bottom:25px;
}
 
.contact-form{
 background:var(--bg-secondary);
 padding:35px;
 border-radius:20px;
 border:1px solid var(--border-color);
}
 
.form-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}
 
.form-group{
 margin-bottom:20px;
}
 
.form-group label{
 display:block;
 font-weight:500;
 color:var(--text-primary);
 margin-bottom:8px;
 font-size:0.95rem;
}
 
.form-group input,
.form-group select,
.form-group textarea{
 width:100%;
 padding:14px 18px;
 border:2px solid var(--border-color);
 border-radius:10px;
 font-family:var(--font-body);
 font-size:1rem;
 color:var(--text-primary);
 background:var(--bg-primary);
 transition:var(--transition);
}
 
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
 outline:none;
 border-color:var(--primary-gold);
 box-shadow:0 0 0 4px rgba(212,168,71,0.1);
}
 
.form-group textarea{
 resize:vertical;
 min-height:120px;
}
/* =========================================== 
 TRUBAČI STARS - FOOTER 
 =========================================== */ 
 
.footer{
 background:var(--bg-secondary);
 border-top:1px solid var(--border-color);
 padding:60px 0 30px;
}
 
.footer-content{
 display:grid;
 grid-template-columns:2fr 1fr 1fr 1fr 2fr;
 gap:40px;
 margin-bottom:40px;
}
 
.footer-logo{
 display:flex;
 align-items:center;
 gap:15px;
 font-size:1.5rem;
 color:var(--text-primary);
 margin-bottom:15px;
}
 
.footer-logo img{
 height:80px;
 width:auto;
 object-fit:contain;
}
 
.footer-logo-text{
 font-family:var(--font-display);
 font-size:1.5rem;
 font-weight:700;
 background:linear-gradient(135deg,var(--primary-gold) 0%,#f5d485 50%,var(--primary-gold) 100%);
 background-size:200% auto;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 letter-spacing:2px;
 text-transform:uppercase;
 text-shadow:0 2px 10px rgba(212,168,71,0.3);
 transition:all 0.3s ease;
}
 
.footer-logo:hover .footer-logo-text{
 background-position:100% center;
}
 
.footer-logo i{
 color:var(--primary-gold);
}
 
.footer-logo strong{
 color:var(--primary-gold);
}
 
.footer-tagline{
 color:var(--text-muted);
 margin-bottom:20px;
}
 
.footer-social{
 display:flex;
 gap:12px;
}
 
.footer-social a{
 width:42px;
 height:42px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--bg-primary);
 border:1px solid var(--border-color);
 border-radius:50%;
 color:var(--text-secondary);
 transition:var(--transition);
}
 
.footer-social a:hover{
 background:var(--primary-gold);
 border-color:var(--primary-gold);
 color:#fff;
 transform:translateY(-3px);
}
 
.footer-links h4,
.footer-contact h4,
 
.footer-links ul li{
 margin-bottom:10px;
}
 
.footer-links a{
 color:var(--text-muted);
 transition:var(--transition);
}
 
.footer-links a:hover{
 color:var(--primary-gold);
 padding-left:5px;
}
 
.footer-contact p{
 display:flex;
 align-items:center;
 gap:10px;
 color:var(--text-muted);
 margin-bottom:10px;
}
 
.footer-contact i{
 color:var(--primary-gold);
 width:20px;
}
 
.footer-bottom{
 text-align:center;
 padding-top:30px;
 border-top:1px solid var(--border-color);
}
 
.footer-bottom p{
 color:var(--text-muted);
 font-size:0.9rem;
}
 
.footer-bottom a{
 color:var(--primary-gold);
}
 
.footer-bottom a:hover{
 text-decoration:underline;
}
 
 
.footer-contact .fa-viber{
 color:#7360f2;
}
 
.footer-contact .fa-whatsapp{
 color:#25d366;
}
 
/* =========================================== 
 FLOATING CALL BUTTON 
 =========================================== */ 
.floating-call-btn{
 position:fixed;
 bottom:30px;
 right:30px;
 z-index:999;
 display:flex;
 align-items:center;
 gap:10px;
 padding:15px 25px;
 background:linear-gradient(135deg,var(--primary-gold) 0%,#c49b30 100%);
 color:#fff;
 border-radius:50px;
 text-decoration:none;
 font-weight:600;
 font-size:1rem;
 box-shadow:0 8px 30px rgba(212,168,71,0.4);
 transition:all 0.3s ease;
 animation:floatingPulse 2s ease-in-out infinite;
}
 
.floating-call-btn:hover{
 transform:translateY(-3px) scale(1.05);
 box-shadow:0 12px 40px rgba(212,168,71,0.5);
}
 
.floating-call-btn i{
 font-size:1.2rem;
 animation:phoneRing 1.5s ease-in-out infinite;
}
 
.floating-call-text{
 display:inline;
}
 
@keyframes floatingPulse{
 0%,100%{
 box-shadow:0 8px 30px rgba(212,168,71,0.4);
}
 50%{
 box-shadow:0 8px 40px rgba(212,168,71,0.6);
}
}
 
@keyframes phoneRing{
 0%,100%{
 transform:rotate(0deg);
}
 10%,30%{
 transform:rotate(-10deg);
}
 20%,40%{
 transform:rotate(10deg);
}
 50%{
 transform:rotate(0deg);
}
}
 
 
@media (max-width:768px){
 .floating-call-btn{
 bottom:20px;
 right:20px;
 padding:15px;
 border-radius:50%;
}
 
 .floating-call-text{
 display:none;
}
}
 
 
 
.footer-links h4.footer-toggle,
.footer-links h3.footer-toggle{
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:space-between;
 user-select:none;
 -webkit-user-select:none;
}
.footer-links h4.footer-toggle::after,
.footer-links h3.footer-toggle::after{
 content:'\f078';
 font-family:'Font Awesome 6 Free','Font Awesome 5 Free';
 font-weight:900;
 font-size:0.7em;
 transition:transform 0.3s ease;
 margin-left:8px;
}
.footer-links h4.footer-toggle.active::after,
.footer-links h3.footer-toggle.active::after{
 transform:rotate(180deg);
}
.footer-links ul.footer-collapsible{
 max-height:0;
 overflow:hidden;
 transition:max-height 0.4s ease;
}
.footer-links ul.footer-collapsible.open{
 max-height:800px;
}
/* =========================================== 
 TRUBAČI STARS - LIGHTBOX 
 =========================================== */ 
 
.lightbox{
 display:none;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.9);
 z-index:2000;
 justify-content:center;
 align-items:center;
}
 
.lightbox.active{
 display:flex;
}
 
.lightbox-image{
 max-width:90%;
 max-height:90%;
 border-radius:8px;
}
 
.lightbox-close,
.lightbox-prev,
.lightbox-next{
 position:absolute;
 background:rgba(255,255,255,0.1);
 border:none;
 color:#fff;
 font-size:2rem;
 cursor:pointer;
 padding:15px 20px;
 border-radius:8px;
 transition:var(--transition);
}
 
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
 background:var(--primary-gold);
}
 
.lightbox-close{
 top:20px;
 right:20px;
}
 
.lightbox-prev{
 left:20px;
 top:50%;
 transform:translateY(-50%);
}
 
.lightbox-next{
 right:20px;
 top:50%;
 transform:translateY(-50%);
}
/* =========================================== 
 TRUBAČI STARS - ANIMATIONS 
 =========================================== */ 
 
 
@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(25px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
 
@keyframes fadeInDown{
 from{
 opacity:0;
 transform:translateY(-25px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
 
@keyframes fadeInLeft{
 from{
 opacity:0;
 transform:translateX(-25px);
}
 to{
 opacity:1;
 transform:translateX(0);
}
}
 
@keyframes fadeInRight{
 from{
 opacity:0;
 transform:translateX(25px);
}
 to{
 opacity:1;
 transform:translateX(0);
}
}
 
@keyframes fadeIn{
 from{
 opacity:0;
}
 to{
 opacity:1;
}
}
 
@keyframes scaleIn{
 from{
 opacity:0;
 transform:scale(0.9);
}
 to{
 opacity:1;
 transform:scale(1);
}
}
 
@keyframes slideInUp{
 from{
 opacity:0;
 transform:translateY(50px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
 
@keyframes pulse{
 0%,100%{
 transform:scale(1);
}
 50%{
 transform:scale(1.03);
}
}
 
@keyframes shimmer{
 0%{
 background-position:-200% 0;
}
 100%{
 background-position:200% 0;
}
}
 
@keyframes float{
 0%,100%{
 transform:translateY(0);
}
 50%{
 transform:translateY(-8px);
}
}
 
@keyframes glow{
 0%,100%{
 box-shadow:0 0 5px rgba(212,168,71,0.3);
}
 50%{
 box-shadow:0 0 20px rgba(212,168,71,0.6);
}
}
 
@keyframes rotateIn{
 from{
 opacity:0;
 transform:rotate(-10deg) scale(0.9);
}
 to{
 opacity:1;
 transform:rotate(0) scale(1);
}
}
 
@keyframes bounceIn{
 0%{
 opacity:0;
 transform:scale(0.3);
}
 50%{
 transform:scale(1.05);
}
 70%{
 transform:scale(0.9);
}
 100%{
 opacity:1;
 transform:scale(1);
}
}
 
 
.animate-fade-in{
 animation:fadeIn 0.8s ease forwards;
}
 
.animate-fade-in-up{
 animation:fadeInUp 0.8s ease forwards;
}
 
.animate-fade-in-down{
 animation:fadeInDown 0.8s ease forwards;
}
 
.animate-fade-in-left{
 animation:fadeInLeft 0.8s ease forwards;
}
 
.animate-fade-in-right{
 animation:fadeInRight 0.8s ease forwards;
}
 
.animate-scale-in{
 animation:scaleIn 0.6s ease forwards;
}
 
.animate-bounce-in{
 animation:bounceIn 0.8s ease forwards;
}
 
 
.delay-100{transition-delay:0.05s;animation-delay:0.05s}
.delay-200{transition-delay:0.1s;animation-delay:0.1s}
.delay-300{transition-delay:0.15s;animation-delay:0.15s}
.delay-400{transition-delay:0.2s;animation-delay:0.2s}
.delay-500{transition-delay:0.25s;animation-delay:0.25s}
.delay-600{transition-delay:0.3s;animation-delay:0.3s}
.delay-700{transition-delay:0.35s;animation-delay:0.35s}
.delay-800{transition-delay:0.4s;animation-delay:0.4s}
 
/* =========================================== 
 SCROLL REVEAL ANIMATIONS (pcshop style) 
 =========================================== */ 
 
 
.reveal{
 opacity:0 !important;
 transform:translateY(40px);
 transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),
 transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
 
.reveal.revealed{
 opacity:1 !important;
 transform:translateY(0);
}
 
 
.reveal-left{
 opacity:0 !important;
 transform:translateX(-40px);
 transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),
 transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
 
.reveal-left.revealed{
 opacity:1 !important;
 transform:translateX(0);
}
 
 
.reveal-right{
 opacity:0 !important;
 transform:translateX(40px);
 transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),
 transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
 
.reveal-right.revealed{
 opacity:1 !important;
 transform:translateX(0);
}
 
 
.reveal-scale{
 opacity:0 !important;
 transform:scale(0.9);
 transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),
 transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
 
.reveal-scale.revealed{
 opacity:1 !important;
 transform:scale(1);
}
 
 
.stagger-children > .service-card,
.stagger-children > .gallery-column,
.stagger-children > .gallery-item,
.stagger-children > .category-card,
.stagger-children > .testimonial-card,
.stagger-children > .why-card,
.stagger-children > .feature,
.stagger-children > .contact-item,
.stagger-children > .stat,
.stagger-children > div,
.stagger-children > a{
 opacity:0;
 transform:translateY(30px);
 transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),
 transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
 
.stagger-children.revealed > .service-card,
.stagger-children.revealed > .gallery-column,
.stagger-children.revealed > .gallery-item,
.stagger-children.revealed > .category-card,
.stagger-children.revealed > .testimonial-card,
.stagger-children.revealed > .why-card,
.stagger-children.revealed > .feature,
.stagger-children.revealed > .contact-item,
.stagger-children.revealed > .stat,
.stagger-children.revealed > div,
.stagger-children.revealed > a{
 opacity:1;
 transform:translateY(0);
}
 
 
.stagger-children:not(.revealed) > *:nth-child(1){transition-delay:0.05s}
.stagger-children:not(.revealed) > *:nth-child(2){transition-delay:0.1s}
.stagger-children:not(.revealed) > *:nth-child(3){transition-delay:0.15s}
.stagger-children:not(.revealed) > *:nth-child(4){transition-delay:0.2s}
.stagger-children:not(.revealed) > *:nth-child(5){transition-delay:0.25s}
.stagger-children:not(.revealed) > *:nth-child(6){transition-delay:0.3s}
.stagger-children:not(.revealed) > *:nth-child(7){transition-delay:0.35s}
.stagger-children:not(.revealed) > *:nth-child(8){transition-delay:0.4s}
.stagger-children:not(.revealed) > *:nth-child(9){transition-delay:0.45s}
.stagger-children:not(.revealed) > *:nth-child(10){transition-delay:0.5s}
.stagger-children:not(.revealed) > *:nth-child(11){transition-delay:0.55s}
.stagger-children:not(.revealed) > *:nth-child(12){transition-delay:0.6s}
.stagger-children:not(.revealed) > *:nth-child(13){transition-delay:0.65s}
.stagger-children:not(.revealed) > *:nth-child(14){transition-delay:0.7s}
.stagger-children:not(.revealed) > *:nth-child(15){transition-delay:0.75s}
.stagger-children:not(.revealed) > *:nth-child(16){transition-delay:0.8s}
.stagger-children:not(.revealed) > *:nth-child(17){transition-delay:0.85s}
.stagger-children:not(.revealed) > *:nth-child(18){transition-delay:0.9s}
.stagger-children:not(.revealed) > *:nth-child(19){transition-delay:0.95s}
.stagger-children:not(.revealed) > *:nth-child(20){transition-delay:1s}
 
 
.stagger-children.revealed > *{
 transition-delay:0s !important;
}
 
 
@media (prefers-reduced-motion:reduce){
 .reveal,
 .reveal-left,
 .reveal-right,
 .reveal-scale{
 opacity:1 !important;
 transform:none !important;
 transition:none !important;
}
 
 .stagger-children > *{
 opacity:1 !important;
 transform:none !important;
 transition:none !important;
}
}
/* =========================================== 
 TRUBAČI STARS - RESPONSIVE DESIGN 
 =========================================== */ 
 
@media (max-width:1024px){
 .about-content{
 grid-template-columns:1fr;
 gap:40px;
}
 
 .about-image{
 order:-1;
}
 
 .services-grid{
 grid-template-columns:1fr;
}
 
 .repertoire-categories{
 grid-template-columns:repeat(2,1fr);
}
 
 .testimonials-grid{
 grid-template-columns:1fr;
}
 
 .why-us-grid{
 grid-template-columns:repeat(2,1fr);
}
 
 .footer-content{
 grid-template-columns:repeat(2,1fr);
}
}
 
@media (max-width:768px){
:root{
 --section-padding:60px;
}
 
 .nav-menu{
 position:fixed;
 top:80px;
 left:0;
 right:0;
 background:var(--bg-primary);
 flex-direction:column;
 padding:20px;
 gap:10px;
 transform:translateY(-150%);
 opacity:0;
 transition:var(--transition);
 border-bottom:1px solid var(--border-color);
 box-shadow:var(--shadow-md);
}
 
 .nav-menu.active{
 transform:translateY(0);
 opacity:1;
}
 
 .nav-link{
 width:100%;
 text-align:center;
 padding:15px;
}
 
 .mobile-menu-toggle{
 display:flex;
}
 
 .mobile-menu-toggle.active span:nth-child(1){
 transform:rotate(45deg) translate(6px,6px);
}
 
 .mobile-menu-toggle.active span:nth-child(2){
 opacity:0;
}
 
 .mobile-menu-toggle.active span:nth-child(3){
 transform:rotate(-45deg) translate(6px,-6px);
}
 
 .hero-cta{
 flex-direction:column;
 align-items:center;
}
 
 .hero-stats{
 gap:30px;
}
 
 .about-features{
 grid-template-columns:1fr;
}
 
 .gallery-masonry{
 grid-template-columns:repeat(2,1fr);
}
 
 .repertoire-categories{
 grid-template-columns:1fr;
}
 
 .contact-content{
 grid-template-columns:1fr;
}
 
 .form-row{
 grid-template-columns:1fr;
}
 
 .why-us-grid{
 grid-template-columns:1fr;
}
 
 .footer-content{
 grid-template-columns:1fr;
 text-align:center;
}
 
 .footer-social{
 justify-content:center;
}
 
 .footer-brand{
 margin-bottom:20px;
}
 
 .footer-logo{
 justify-content:center;
}
}
 
@media (max-width:480px){
 .hero-badge{
 padding:10px 20px;
 font-size:0.75rem;
}
 
 .stat-number{
 font-size:2rem;
}
 
 .btn{
 padding:14px 28px;
 font-size:0.9rem;
}
 
 .gallery-masonry{
 grid-template-columns:1fr;
}
 
 .contact-form{
 padding:25px 20px;
}
}
/* =========================================== 
 TRUBAČI STARS - SEO PAGES STYLES 
 =========================================== */ 
 
 
.seo-hero{
 padding:160px 0 80px;
 background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
 color:#fff;
 position:relative;
 overflow:hidden;
}
 
.seo-hero::before{
 content:'';
 position:absolute;
 top:0;left:0;right:0;bottom:0;
 background:url('/images/trubaci-01.webp') center/cover no-repeat;
 opacity:0.15;
 z-index:0;
}
 
.seo-hero .container{
 position:relative;
 z-index:1;
}
 
.seo-hero-content{
 max-width:800px;
}
 
.seo-hero .seo-breadcrumb{
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:20px;
 font-size:0.9rem;
 color:rgba(255,255,255,0.7);
}
 
.seo-hero .seo-breadcrumb a{
 color:var(--primary-gold);
 text-decoration:none;
}
 
.seo-hero .seo-breadcrumb a:hover{
 text-decoration:underline;
}
 
.seo-hero h1{
 font-family:var(--font-display);
 font-size:clamp(2.2rem,5vw,3.5rem);
 font-weight:700;
 line-height:1.2;
 margin-bottom:20px;
}
 
.seo-hero h1 .gold{
 color:var(--primary-gold);
}
 
.seo-hero .seo-hero-desc{
 font-size:1.15rem;
 line-height:1.8;
 color:rgba(255,255,255,0.85);
 margin-bottom:30px;
}
 
.seo-hero .seo-hero-stats{
 display:flex;
 gap:40px;
 margin-bottom:30px;
}
 
.seo-hero .seo-stat{
 text-align:center;
}
 
.seo-hero .seo-stat-number{
 display:block;
 font-family:var(--font-display);
 font-size:2.5rem;
 font-weight:700;
 color:var(--primary-gold);
}
 
.seo-hero .seo-stat-label{
 font-size:0.85rem;
 color:rgba(255,255,255,0.7);
 text-transform:uppercase;
 letter-spacing:1px;
}
 
.seo-hero .seo-hero-cta{
 display:flex;
 gap:15px;
 flex-wrap:wrap;
}
 
 
.seo-content{
 padding:80px 0;
}
 
.seo-content-grid{
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:60px;
 align-items:start;
}
 
.seo-main-content h2{
 font-family:var(--font-display);
 font-size:1.8rem;
 color:var(--text-primary);
 margin-bottom:20px;
 margin-top:40px;
}
 
.seo-main-content h2:first-child{
 margin-top:0;
}
 
.seo-main-content h2 .gold{
 color:var(--primary-gold);
}
 
.seo-main-content h3{
 font-family:var(--font-display);
 font-size:1.4rem;
 color:var(--text-primary);
 margin-bottom:15px;
 margin-top:30px;
}
 
.seo-main-content p{
 font-size:1.05rem;
 line-height:1.8;
 color:var(--text-secondary);
 margin-bottom:15px;
}
 
.seo-main-content ul{
 margin-bottom:20px;
 padding-left:0;
}
 
.seo-main-content ul li{
 padding:8px 0 8px 30px;
 position:relative;
 font-size:1.05rem;
 color:var(--text-secondary);
 line-height:1.6;
}
 
.seo-main-content ul li::before{
 content:'\f00c';
 font-family:'Font Awesome 6 Free';
 font-weight:900;
 position:absolute;
 left:0;
 color:var(--primary-gold);
 font-size:0.85rem;
}
 
 
.seo-sidebar{
 position:sticky;
 top:100px;
}
 
.seo-sidebar-card{
 background:var(--bg-secondary);
 border-radius:16px;
 padding:30px;
 margin-bottom:20px;
 border:1px solid var(--border-color);
}
 
.seo-sidebar-card h3{
 font-family:var(--font-display);
 font-size:1.3rem;
 margin-bottom:20px;
 color:var(--text-primary);
}
 
.seo-sidebar-card .seo-contact-item{
 display:flex;
 align-items:center;
 gap:12px;
 padding:12px 0;
 border-bottom:1px solid var(--border-light);
}
 
.seo-sidebar-card .seo-contact-item:last-child{
 border-bottom:none;
}
 
.seo-sidebar-card .seo-contact-item i{
 width:40px;
 height:40px;
 background:var(--gradient-gold);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 font-size:0.9rem;
 flex-shrink:0;
}
 
.seo-sidebar-card .seo-contact-item a{
 color:var(--text-primary);
 font-weight:500;
 font-size:1rem;
}
 
.seo-sidebar-card .seo-contact-item a:hover{
 color:var(--primary-gold);
}
 
.seo-sidebar-card .btn{
 margin-top:15px;
}
 
 
.seo-services-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:20px;
 margin:30px 0;
}
 
.seo-service-box{
 background:var(--bg-secondary);
 border-radius:12px;
 padding:25px;
 text-align:center;
 border:1px solid var(--border-color);
 transition:var(--transition);
}
 
.seo-service-box:hover{
 border-color:var(--primary-gold);
 transform:translateY(-3px);
 box-shadow:var(--shadow-gold);
}
 
.seo-service-box i{
 font-size:2rem;
 color:var(--primary-gold);
 margin-bottom:10px;
}
 
.seo-service-box h4{
 font-size:1rem;
 color:var(--text-primary);
 margin-bottom:5px;
}
 
.seo-service-box p{
 font-size:0.85rem;
 color:var(--text-muted);
 margin-bottom:0;
}
 
 
.seo-faq{
 padding:80px 0;
 background:var(--bg-secondary);
}
 
.seo-faq .section-header{
 text-align:center;
 margin-bottom:50px;
}
 
.seo-faq-grid{
 max-width:800px;
 margin:0 auto;
}
 
.seo-faq-item{
 background:var(--bg-primary);
 border-radius:12px;
 margin-bottom:12px;
 border:1px solid var(--border-color);
 overflow:hidden;
 transition:var(--transition);
}
 
.seo-faq-item:hover{
 border-color:var(--primary-gold-light);
}
 
.seo-faq-item.active{
 border-color:var(--primary-gold);
 box-shadow:var(--shadow-gold);
}
 
.seo-faq-question{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:20px 25px;
 cursor:pointer;
 gap:15px;
}
 
.seo-faq-question h4{
 font-size:1.05rem;
 font-weight:600;
 color:var(--text-primary);
 margin:0;
 flex:1;
}
 
.seo-faq-question i{
 color:var(--primary-gold);
 transition:var(--transition);
 font-size:0.9rem;
}
 
.seo-faq-item.active .seo-faq-question i{
 transform:rotate(180deg);
}
 
.seo-faq-answer{
 max-height:0;
 overflow:hidden;
 transition:max-height 0.3s ease;
}
 
.seo-faq-item.active .seo-faq-answer{
 max-height:500px;
}
 
.seo-faq-answer p{
 padding:0 25px 20px;
 font-size:1rem;
 line-height:1.7;
 color:var(--text-secondary);
 margin:0;
}
 
 
.seo-cta-section{
 padding:80px 0;
 background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
 color:#fff;
 text-align:center;
}
 
.seo-cta-content h2{
 font-family:var(--font-display);
 font-size:clamp(1.8rem,4vw,2.5rem);
 margin-bottom:15px;
}
 
.seo-cta-content p{
 font-size:1.1rem;
 color:rgba(255,255,255,0.8);
 margin-bottom:30px;
}
 
.seo-cta-buttons{
 display:flex;
 gap:15px;
 justify-content:center;
 flex-wrap:wrap;
}
 
 
.seo-related{
 padding:60px 0;
 background:var(--bg-secondary);
}
 
.seo-related .section-title{
 text-align:center;
 margin-bottom:40px;
}
 
.seo-related-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
 gap:15px;
}
 
.seo-related-card{
 background:var(--bg-primary);
 border:1px solid var(--border-color);
 border-radius:12px;
 padding:25px 20px;
 text-align:center;
 transition:var(--transition);
 text-decoration:none;
 color:var(--text-primary);
}
 
.seo-related-card:hover{
 border-color:var(--primary-gold);
 transform:translateY(-3px);
 box-shadow:var(--shadow-gold);
 color:var(--primary-gold);
}
 
.seo-related-card i{
 font-size:1.5rem;
 color:var(--primary-gold);
 margin-bottom:10px;
 display:block;
}
 
.seo-related-card h4{
 font-size:0.95rem;
 font-weight:600;
 margin:0;
}
 
 
.seo-testimonial{
 background:var(--bg-accent);
 border-radius:12px;
 padding:25px;
 margin:30px 0;
 border-left:4px solid var(--primary-gold);
}
 
.seo-testimonial p{
 font-style:italic;
 margin-bottom:10px !important;
}
 
.seo-testimonial .seo-testimonial-author{
 font-weight:600;
 color:var(--primary-gold);
 font-size:0.9rem !important;
 font-style:normal;
}
 
 
.seo-why-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 margin:30px 0;
}
 
.seo-why-box{
 background:var(--bg-primary);
 border:1px solid var(--border-color);
 border-radius:12px;
 padding:25px;
 text-align:center;
 transition:var(--transition);
}
 
.seo-why-box:hover{
 border-color:var(--primary-gold);
 box-shadow:var(--shadow-sm);
}
 
.seo-why-box .why-icon{
 width:50px;
 height:50px;
 background:var(--gradient-gold);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 12px;
 color:#fff;
 font-size:1.1rem;
}
 
.seo-why-box h4{
 font-size:1rem;
 margin-bottom:5px;
 color:var(--text-primary);
}
 
.seo-why-box p{
 font-size:0.85rem;
 color:var(--text-muted);
 margin:0;
}
 
 
.seo-pricing-highlight{
 background:linear-gradient(135deg,var(--primary-gold),var(--primary-gold-light));
 color:#fff;
 border-radius:16px;
 padding:30px;
 text-align:center;
 margin:30px 0;
}
 
.seo-pricing-highlight .price-range{
 font-family:var(--font-display);
 font-size:2.5rem;
 font-weight:700;
 margin-bottom:5px;
}
 
.seo-pricing-highlight .price-note{
 font-size:0.9rem;
 opacity:0.9;
}
 
 
.seo-gallery-mini{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
 margin:20px 0;
 border-radius:12px;
 overflow:hidden;
}
 
.seo-gallery-mini img{
 width:100%;
 height:200px;
 object-fit:cover;
 border-radius:8px;
 transition:var(--transition);
}
 
.seo-gallery-mini img:hover{
 transform:scale(1.05);
}
 
 
@media (max-width:768px){
 .seo-hero{
 padding:120px 0 60px;
}
 
 .seo-hero .seo-hero-stats{
 gap:20px;
}
 
 .seo-hero .seo-stat-number{
 font-size:1.8rem;
}
 
 .seo-content-grid{
 grid-template-columns:1fr;
 gap:40px;
}
 
 .seo-sidebar{
 position:static;
}
 
 .seo-services-grid{
 grid-template-columns:1fr;
}
 
 .seo-why-grid{
 grid-template-columns:1fr;
}
 
 .seo-gallery-mini{
 grid-template-columns:repeat(2,1fr);
}
 
 .seo-related-grid{
 grid-template-columns:repeat(2,1fr);
}
 
 .seo-hero .seo-hero-cta{
 flex-direction:column;
}
 
 .seo-cta-buttons{
 flex-direction:column;
 align-items:center;
}
}
 
@media (max-width:480px){
 .seo-hero .seo-hero-stats{
 flex-direction:column;
 gap:15px;
}
 
 .seo-gallery-mini{
 grid-template-columns:1fr;
}
 
 .seo-related-grid{
 grid-template-columns:1fr;
}
}
 
/* =========================================== 
 CONTACT FORM IN CTA SECTION 
 =========================================== */ 
.cta-contact-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:50px;
 align-items:start;
}
 
.cta-section .cta-content{
 text-align:left;
}
 
.cta-section .cta-content h2{
 font-family:var(--font-display);
 font-size:clamp(1.8rem,4vw,2.5rem);
 margin-bottom:15px;
}
 
.cta-section .cta-content p{
 font-size:1.1rem;
 color:rgba(255,255,255,0.8);
 margin-bottom:25px;
}
 
.cta-contact-info{
 margin-top:30px;
 display:flex;
 flex-direction:column;
 gap:12px;
}
 
.cta-contact-item{
 display:flex;
 align-items:center;
 gap:10px;
 color:rgba(255,255,255,0.85);
 font-size:0.95rem;
}
 
.cta-contact-item i{
 width:30px;
 text-align:center;
 color:var(--primary-gold);
 font-size:1rem;
}
 
.cta-contact-item a{
 color:rgba(255,255,255,0.9);
 text-decoration:none;
 transition:color 0.3s;
}
 
.cta-contact-item a:hover{
 color:var(--primary-gold);
}
 
.cta-form-wrap{
 background:rgba(255,255,255,0.08);
 border:1px solid rgba(255,255,255,0.15);
 border-radius:16px;
 padding:30px;
 backdrop-filter:blur(10px);
}
 
.cta-form-wrap h3{
 font-family:var(--font-display);
 font-size:1.4rem;
 color:#fff;
 margin-bottom:20px;
}
 
.cta-form-wrap h3 i{
 color:var(--primary-gold);
 margin-right:8px;
}
 
.cta-form-wrap .form-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px;
}
 
.cta-form-wrap .form-group{
 margin-bottom:14px;
}
 
.cta-form-wrap label{
 display:block;
 font-size:0.85rem;
 color:rgba(255,255,255,0.7);
 margin-bottom:5px;
 font-weight:500;
}
 
.cta-form-wrap input,
.cta-form-wrap select,
.cta-form-wrap textarea{
 width:100%;
 padding:10px 14px;
 background:rgba(255,255,255,0.1);
 border:1px solid rgba(255,255,255,0.2);
 border-radius:8px;
 color:#fff;
 font-size:0.95rem;
 font-family:inherit;
 transition:all 0.3s;
 box-sizing:border-box;
}
 
.cta-form-wrap input::placeholder,
.cta-form-wrap textarea::placeholder{
 color:rgba(255,255,255,0.4);
}
 
.cta-form-wrap input:focus,
.cta-form-wrap select:focus,
.cta-form-wrap textarea:focus{
 outline:none;
 border-color:var(--primary-gold);
 background:rgba(255,255,255,0.15);
 box-shadow:0 0 0 3px rgba(212,168,71,0.15);
}
 
.cta-form-wrap select option{
 background:#1a1a2e;
 color:#fff;
}
 
.cta-form-wrap .btn-full{
 width:100%;
 padding:12px;
 font-size:1rem;
 font-weight:600;
 margin-top:5px;
 cursor:pointer;
}
 
.cta-form-wrap .btn-full:disabled{
 opacity:0.7;
 cursor:not-allowed;
}
 
.form-status{
 margin-top:12px;
 padding:0;
 border-radius:8px;
 font-size:0.9rem;
 text-align:center;
 transition:all 0.3s;
}
 
.form-status.success{
 padding:12px;
 background:rgba(16,185,129,0.15);
 border:1px solid rgba(16,185,129,0.3);
 color:#6ee7b7;
}
 
.form-status.error{
 padding:12px;
 background:rgba(239,68,68,0.15);
 border:1px solid rgba(239,68,68,0.3);
 color:#fca5a5;
}
 
 
.footer-links ul{
 columns:1;
}
 
.footer-content{
 display:grid;
 grid-template-columns:1.5fr 1fr 1.5fr 1.5fr 1.2fr;
 gap:30px;
}
 
@media (max-width:1200px){
 .footer-content{
 grid-template-columns:1fr 1fr 1fr;
}
}
 
@media (max-width:768px){
 .cta-contact-grid{
 grid-template-columns:1fr;
 gap:30px;
}
 
 .cta-section .cta-content{
 text-align:center;
}
 
 .cta-contact-info{
 align-items:center;
}
 
 .cta-form-wrap .form-row{
 grid-template-columns:1fr;
}
 
 .footer-content{
 grid-template-columns:1fr 1fr;
}
}
 
@media (max-width:480px){
 .footer-content{
 grid-template-columns:1fr;
}
 
 .cta-form-wrap{
 padding:20px;
}
}




.process-steps{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:25px;
 margin-top:40px;
}
.process-step{
 background:var(--bg-secondary,#f8f9fa);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:14px;
 padding:30px 25px;
 text-align:center;
 transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
 position:relative;
}
.process-step:hover{
 transform:translateY(-4px);
 border-color:var(--primary-gold,#D4A847);
 box-shadow:0 12px 30px rgba(212,168,71,0.15);
}
.process-step-number{
 width:56px;
 height:56px;
 line-height:56px;
 border-radius:50%;
 background:linear-gradient(135deg,var(--primary-gold,#D4A847),#b48c32);
 color:#fff;
 font-weight:800;
 font-size:1.5rem;
 margin:0 auto 18px;
 box-shadow:0 6px 16px rgba(212,168,71,0.35);
}
.process-step h4{
 font-family:var(--font-display,'Playfair Display',serif);
 font-size:1.2rem;
 color:var(--text-primary,#1a1a2e);
 margin-bottom:10px;
}
.process-step p{color:var(--text-secondary,#4a4a5a);font-size:0.95rem;line-height:1.6}


.seo-pricing-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:25px;
 margin:40px 0;
}
.pricing-detail-card{
 background:var(--bg-primary,#fff);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:14px;
 padding:30px 25px;
 text-align:center;
 transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
}
.pricing-detail-card:hover{
 transform:translateY(-4px);
 border-color:var(--primary-gold,#D4A847);
 box-shadow:0 14px 30px rgba(212,168,71,0.18);
}
.pricing-detail-card i{font-size:2.4rem;color:var(--primary-gold,#D4A847);margin-bottom:12px}
.pricing-detail-card h4{font-family:var(--font-display,serif);font-size:1.25rem;margin-bottom:8px}
.pricing-detail-card .pricing-price{
 font-family:var(--font-display,serif);
 font-size:1.6rem;
 color:var(--primary-gold,#D4A847);
 font-weight:700;
 margin:8px 0 12px;
}


.seo-repertoire .seo-services-grid{
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}


.seo-why-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:22px;
 margin-top:35px;
}
.seo-why-card{
 background:var(--bg-secondary,#f8f9fa);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:12px;
 padding:26px 22px;
 text-align:center;
 transition:all 0.3s;
}
.seo-why-card:hover{border-color:var(--primary-gold);transform:translateY(-3px)}
.seo-why-card i{font-size:2.2rem;color:var(--primary-gold,#D4A847);margin-bottom:10px}
.seo-why-card h4{font-size:1.05rem;margin-bottom:8px;color:var(--text-primary)}
.seo-why-card p{color:var(--text-secondary);font-size:0.92rem;line-height:1.55}


.seo-testimonials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:25px;
 margin-top:35px;
}
.seo-testimonial-card{
 background:var(--bg-primary,#fff);
 border:1px solid var(--border-color);
 border-radius:14px;
 padding:30px 25px;
 box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.seo-testimonial-card .testimonial-stars{color:var(--primary-gold,#D4A847);margin-bottom:12px}
.seo-testimonial-card .testimonial-text{font-style:italic;color:var(--text-secondary);margin-bottom:18px;line-height:1.6}
.seo-testimonial-card .testimonial-author{font-weight:700;color:var(--text-primary)}


.faq-item{
 background:var(--bg-primary,#fff);
 border:1px solid var(--border-color);
 border-radius:12px;
 margin-bottom:16px;
 padding:20px 25px;
 transition:border-color 0.3s;
}
.faq-item:hover{border-color:var(--primary-gold)}
.faq-question h4{font-size:1.05rem;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:10px}
.faq-question h4 i{color:var(--primary-gold,#D4A847)}
.faq-answer p{color:var(--text-secondary);margin-top:12px;line-height:1.65}


.seo-process .section-header,
.seo-why-section .section-header,
.seo-pricing-section .section-header,
.seo-repertoire .section-header,
.seo-testimonials-section .section-header,
.faq .section-header,
.cities .section-header{
 text-align:center;
 margin-bottom:35px;
}


.seo-related-card{
 display:flex;
 flex-direction:column;
 align-items:center;
 background:var(--bg-secondary);
 border:1px solid var(--border-color);
 border-radius:14px;
 padding:24px 20px;
 text-align:center;
 text-decoration:none;
 color:inherit;
 transition:all 0.3s;
}
.seo-related-card:hover{
 border-color:var(--primary-gold);
 transform:translateY(-3px);
 box-shadow:0 12px 26px rgba(212,168,71,0.15);
}
.seo-related-card i{font-size:1.8rem;color:var(--primary-gold);margin-bottom:10px}
.seo-related-card h3{font-size:1.05rem;color:var(--text-primary)}
.seo-related-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 gap:18px;
 margin-top:30px;
}


.seo-process,.seo-why-section,.seo-pricing-section,.seo-repertoire,
.seo-testimonials-section,.faq,.cities,.seo-related{
 padding:80px 0;
}

@media (max-width:768px){
 .seo-process,.seo-why-section,.seo-pricing-section,.seo-repertoire,
 .seo-testimonials-section,.faq,.cities,.seo-related{padding:60px 0}
}




.pricing-detail-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:25px;
 margin:40px 0;
}
.pricing-details{
 margin-top:30px;
}


.repertoire-categories{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:25px;
 margin-top:40px;
}
.repertoire-category{
 background:var(--bg-secondary,#f8f9fa);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:14px;
 padding:30px 25px;
 text-align:center;
 transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.repertoire-category:hover{
 transform:translateY(-4px);
 border-color:var(--primary-gold,#D4A847);
 box-shadow:0 14px 30px rgba(212,168,71,0.18);
}
.repertoire-icon{
 width:70px;
 height:70px;
 line-height:70px;
 border-radius:50%;
 background:linear-gradient(135deg,var(--primary-gold,#D4A847),#b48c32);
 margin:0 auto 18px;
 box-shadow:0 6px 16px rgba(212,168,71,0.35);
}
.repertoire-icon i{
 font-size:1.8rem;
 color:#fff;
}
.repertoire-category h4{
 font-family:var(--font-display,serif);
 font-size:1.25rem;
 color:var(--text-primary,#1a1a2e);
 margin-bottom:12px;
}
.repertoire-category p{
 color:var(--text-secondary,#4a4a5a);
 font-size:0.95rem;
 line-height:1.65;
}


.seo-testimonials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:25px;
 margin-top:35px;
}
.seo-testimonial{
 background:var(--bg-primary,#fff);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:14px;
 padding:30px 25px;
 box-shadow:0 4px 14px rgba(0,0,0,0.05);
 transition:transform 0.3s,box-shadow 0.3s;
}
.seo-testimonial:hover{
 transform:translateY(-4px);
 box-shadow:0 14px 30px rgba(212,168,71,0.18);
}
.seo-testimonial .testimonial-stars{
 color:var(--primary-gold,#D4A847);
 font-size:1.1rem;
 margin-bottom:15px;
 letter-spacing:2px;
}
.seo-testimonial p{
 font-style:italic;
 color:var(--text-secondary,#4a4a5a);
 line-height:1.7;
 margin-bottom:18px;
}
.seo-testimonial .testimonial-author{
 font-weight:700;
 color:var(--text-primary,#1a1a2e);
 font-size:1rem;
}
.seo-testimonial .testimonial-event{
 color:var(--text-muted,#6c757d);
 font-size:0.85rem;
 margin-top:4px;
}


.seo-testimonials-section .container > div:nth-of-type(2),
.seo-testimonials-section [class*=testimonial][class*=grid],
.seo-testimonials-section .seo-testimonials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:25px;
 margin-top:35px;
}


.seo-pricing-highlight{
 background:linear-gradient(135deg,var(--primary-gold,#D4A847) 0%,#b48c32 100%);
 color:#fff;
 text-align:center;
 padding:50px 30px;
 border-radius:16px;
 margin:30px 0;
 box-shadow:0 14px 40px rgba(212,168,71,0.3);
}
.seo-pricing-highlight .price-range,
.seo-pricing-highlight h3{
 font-family:var(--font-display,serif);
 font-size:clamp(1.8rem,4vw,2.6rem);
 font-weight:700;
 margin-bottom:12px;
 color:#fff;
}
.seo-pricing-highlight .price-note,
.seo-pricing-highlight p{
 font-size:1rem;
 opacity:0.95;
 color:#fff;
}


@media (max-width:768px){
 .repertoire-categories,
 .pricing-detail-grid,
 .seo-testimonials-grid{
 grid-template-columns:1fr;
 gap:18px;
}
 .seo-pricing-highlight{padding:35px 22px}
}




.seo-testimonials-section .container{
 display:flex;
 flex-wrap:wrap;
 gap:25px;
}
.seo-testimonials-section .container > .section-header,
.seo-testimonials-section .container > p{
 flex:1 1 100%;
}
.seo-testimonials-section .container > .seo-testimonial{
 flex:1 1 calc(33.33% - 17px);
 min-width:260px;
 max-width:100%;
}
.seo-testimonial-author{
 color:var(--primary-gold,#D4A847);
 font-weight:700;
 display:inline-block;
 margin-top:12px;
}


.faq .container{
 max-width:900px;
 margin:0 auto;
}
.faq .container > .faq-item{
 background:var(--bg-primary,#fff);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:12px;
 padding:22px 26px;
 margin-bottom:14px;
 transition:border-color 0.3s,box-shadow 0.3s;
}
.faq .container > .faq-item:hover{
 border-color:var(--primary-gold,#D4A847);
 box-shadow:0 8px 22px rgba(212,168,71,0.12);
}
.faq-item h4,
.faq-item .faq-question h4{
 margin:0;
 font-size:1.08rem;
 color:var(--text-primary,#1a1a2e);
 display:flex;
 align-items:flex-start;
 gap:12px;
}
.faq-item h4 i,
.faq-item .faq-question h4 i{
 color:var(--primary-gold,#D4A847);
 font-size:1.1rem;
 margin-top:3px;
}
.faq-item p,
.faq-item .faq-answer p{
 margin-top:14px;
 color:var(--text-secondary,#4a4a5a);
 line-height:1.7;
}


.cities .cities-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:18px;
 margin-top:35px;
}
.cities-grid .city-item{
 background:var(--bg-secondary,#f8f9fa);
 border:1px solid var(--border-color,#e9ecef);
 border-radius:12px;
 padding:18px 20px;
 text-align:center;
 color:var(--text-primary,#1a1a2e);
 text-decoration:none;
 transition:all 0.3s;
 font-weight:600;
}
.cities-grid .city-item:hover{
 background:linear-gradient(135deg,var(--primary-gold,#D4A847),#b48c32);
 color:#fff;
 transform:translateY(-3px);
 border-color:var(--primary-gold);
 box-shadow:0 8px 20px rgba(212,168,71,0.25);
}


.seo-pricing-section .pricing-details{
 margin-top:30px;
}


.seo-pricing-section,
.seo-repertoire,
.seo-testimonials-section,
.faq,
.cities{
 padding:70px 0;
}

@media (max-width:768px){
 .seo-testimonials-section .container > .seo-testimonial{
 flex:1 1 100%;
}
 .seo-pricing-section,.seo-repertoire,.seo-testimonials-section,.faq,.cities{padding:50px 0}
}


#cc-banner{background:#fffbeb !important;border-top:2px solid #D4A847 !important;color:#1f2937 !important;box-shadow:0 -4px 24px rgba(20,15,5,0.18) !important;font-family:'Poppins',sans-serif !important}
#cc-text{color:#374151 !important}
#cc-text a{color:#5e4400 !important;text-decoration:underline;font-weight:600}
#cc-text a:hover{color:#3a2a00 !important}
#cc-accept{background:linear-gradient(135deg,#D4A847,#b48c32) !important;color:#1a1a1a !important;font-weight:700 !important;border:1px solid #b48c32 !important;box-shadow:0 2px 6px rgba(212,168,71,0.35)}
#cc-accept:hover{filter:brightness(1.05) !important;box-shadow:0 4px 10px rgba(212,168,71,0.5)}
#cc-decline{background:rgba(212,168,71,0.08) !important;color:#1f2937 !important;border:1px solid rgba(212,168,71,0.4) !important}
#cc-decline:hover{background:rgba(212,168,71,0.15) !important}