:root{
  --primary-color:#3498db;
  --secondary-color:#2980b9;
  --white:#fff;
  --light-gray:#f5f5f5;
  --dark:#333;
  --transition:all .3s ease;
}

/* ================================
   RESET + BASE
================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"Readex Pro",sans-serif;
  background:var(--white);
  color:var(--dark);
  line-height:1.6;
  overflow-x:hidden;
}

/* ================================
   HEADER + NAVIGATION
================================ */
header{
  background:var(--white);
  position:fixed;
  width:100%;
  z-index:1000;
  transition:var(--transition);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.header-scrolled{box-shadow:0 5px 20px rgba(0,0,0,.1);}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
}
.logo{display:flex;align-items:center;}
.logo img{height:40px;margin-right:10px;}
.logo h1{font-size:32px;font-family:"Bodoni Moda",serif;}
.nav-links{display:flex;list-style:none;}
.nav-links li{margin-left:30px;}
.nav-links a{
  text-decoration:none;
  color:var(--dark);
  font-weight:600;
  position:relative;
  transition:var(--transition);
}
.nav-links a:hover{color:var(--primary-color);}
.nav-links a::after{
  content:'';
  position:absolute;
  width:0;
  height:2px;
  background:var(--primary-color);
  bottom:-5px;
  left:0;
  transition:var(--transition);
}
.nav-links a:hover::after{width:100%;}
.mobile-menu-btn{
  display:none;
  background:none;
  border:none;
  font-size:24px;
  color:var(--primary-color);
  cursor:pointer;
}

/* ================================
   HERO SECTION
================================ */
.hero{
  height:100vh;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url('images/salon.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  text-align:center;
  padding-top:80px;
}
.hero-content{
  max-width:800px;
  margin:auto;
}
.hero h2{
  font-size:48px;
  margin-bottom:20px;
  font-family:"Bodoni Moda",serif;
  line-height:1.05;
  letter-spacing:0.2px;
  color:var(--dark);
}
.hero p{
  font-size:20px;
  margin-bottom:30px;
}

/* Hero buttons unified: both blue, invert on hover */
.btn,
.btn-outline {
  background: var(--primary-color);
  color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  padding: 12px 30px;
  text-decoration: none;
  display: inline-block;
  transition: all .3s ease;
  font-weight: 600;
}
.btn:hover,
.btn-outline:hover {
  background: #fff;
  color: var(--primary-color);
  transform: translateY(-3px);
}

/* ================================
   SECTIONS: ABOUT / SERVICES / TEAM
================================ */
.services,.about,.team,.reels-gallery,.contact{
  padding:100px 0;
}
.section-title{
  text-align:center;
  margin-bottom:60px;
}
.section-title h2{
  font-family:"Bodoni Moda",serif;
  font-weight:700;
  font-size:clamp(32px,5vw,48px);
  color:var(--dark);
  line-height:1.05;
  letter-spacing:0.2px;
  margin-bottom:20px;
}
.section-title p{color:#444;max-width:700px;margin:0 auto;}

/* Services grid */
.services{background:var(--light-gray);}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}
.service-card{
  background:#fff;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  padding:30px;
  text-align:center;
  transition:var(--transition);
  opacity:0;
  transform:translateY(20px);
}
.service-card.animate{opacity:1;transform:translateY(0);transition:opacity .6s ease-out,transform .6s ease-out;}
.service-card:hover{transform:translateY(-10px);}
.service-icon{font-size:48px;color:var(--primary-color);margin-bottom:15px;}
.service-card h3{
  margin-bottom:10px;
  font-family:"Bodoni Moda",serif;
  font-weight:600;
}

/* About */
.about-content{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:50px;
}
.about-image{flex:1;min-width:300px;border-radius:10px;overflow:hidden;padding:2rem;}
.about-image img{width:100%;height:auto;display:block;}
.about-text{flex:1;min-width:300px;}
.about-text h2 { font-family: "Bodoni Moda", serif; font-size: 40px; }

/* Team */
.team{background:var(--light-gray);}
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}
.team-member{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:var(--transition);
  text-align:center;
  opacity:0;
  transform:translateY(20px);
}
.team-member.animate{opacity:1;transform:translateY(0);transition:opacity .6s ease-out,transform .6s ease-out;}
.team-member:hover{transform:translateY(-10px);}
.member-image{height:500px;overflow:hidden;}
.member-image img{width:100%;height:100%;object-fit:cover;}
.member-info{padding:20px;}
.member-info h3{
  font-size:22px;
  margin-bottom:5px;
  color:var(--dark);
  font-family:"Bodoni Moda",serif;
}

/* ================================
   GALLERY (REELS) – stable infinite loop
================================ */
.reels-gallery{background:var(--light-gray);}
.reel-viewport{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  --reel-height:460px;
  --gap:18px;
  --duration:18s; /* faster default (was 28s) */
}
.reel-track{
  display:inline-flex;
  gap:var(--gap);
  will-change:transform;
  animation:reel-marquee var(--duration) linear infinite;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  -webkit-backface-visibility:hidden;
}
@keyframes reel-marquee{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(-50%,0,0);} /* two groups => -50% */
}
.reel-frame{
  flex:0 0 auto;
  height:var(--reel-height);
  border-radius:16px;
  overflow:hidden;
  background:#eee;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.reel-frame img{height:100%;width:auto;object-fit:contain;display:block;pointer-events:none;}
.reel-viewport[data-fit="cover"] .reel-frame img{width:100%;height:100%;object-fit:cover;}
.reel-fade{
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(24px,6vw,80px);
  pointer-events:none;
  z-index:2;
}
.reel-fade.left{left:0;background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,0));}
.reel-fade.right{right:0;background:linear-gradient(to left,rgba(255,255,255,.9),rgba(255,255,255,0));}

/* ================================
   CONTACT / NAROČANJE (centered)
================================ */
.contact{
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(245,245,245,.9));
}
.contact .section-title{
  text-align:center;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.contact .section-title h2{margin-bottom:10px;}
.contact .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-inline:clamp(16px,5vw,32px);
}
.contact-container{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

/* CTA button (inside current card HTML, but centered) */
.contact-form{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.submit-btn{
  display:inline-block;
  background:linear-gradient(to right,var(--primary-color),var(--secondary-color));
  color:#fff;
  border:none;
  border-radius:60px;
  padding:22px 60px;
  font-size:22px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 12px 28px rgba(52,152,219,0.35);
}
.submit-btn:hover{
  transform:translateY(-4px);
  background:linear-gradient(to right,var(--secondary-color),var(--primary-color));
  box-shadow:0 16px 32px rgba(52,152,219,0.45);
}

/* Card with info */
.contact-info{
  background:#fff;
  padding:40px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.05);
  width:100%;
  max-width:720px;   /* centered width */
  margin:0 auto;     /* center card */
  text-align:left;   /* keep text left-aligned */
}
.contact-info h3{
  font-family:"Bodoni Moda",serif;
  font-size:clamp(22px,4.8vw,26px);
  margin-bottom:25px;
  color:var(--dark);
}
.info-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:22px;
  padding:15px;
  border-radius:10px;
  transition:all .3s ease;
}
.info-item:hover{background-color:rgba(52,152,219,.05);}
.info-icon{
  font-size:24px;
  color:var(--primary-color);
  margin-right:20px;
  min-width:40px;
  height:40px;
  background:rgba(52,152,219,.1);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.info-text h4{
  font-size:18px;
  margin-bottom:8px;
  color:var(--dark);
  font-weight:600;
}
.info-text p,.info-text a{
  color:var(--dark);
  text-decoration:none;
  line-height:1.6;
  font-size:16px;
}
.info-text a[href^="tel"],
.info-text a[href^="mailto"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  margin-top:8px;
  border-radius:50px;
  background:linear-gradient(to right,var(--primary-color),var(--secondary-color));
  color:#fff !important;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 6px 16px rgba(52,152,219,0.25);
}
.info-text a[href^="tel"]:hover,
.info-text a[href^="mailto"]:hover{
  transform:translateY(-3px);
  background:linear-gradient(to right,var(--secondary-color),var(--primary-color));
  box-shadow:0 8px 20px rgba(52,152,219,0.35);
}
.contact-social{
  display:flex;
  gap:15px;
  margin-top:20px;
  justify-content:center;
}
.contact-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  border-radius:50%;
  background:rgba(52,152,219,.1);
  color:var(--primary-color);
  font-size:20px;
  transition:all .3s ease;
}
.contact-social a:hover{background:var(--primary-color);color:#fff;}

/* ================================
   FOOTER
================================ */
footer{
  background:var(--dark);
  color:#fff;
  text-align:center;
  padding:60px 0 20px;
}
.footer-content{
  display:flex;
  flex-wrap:wrap;
  gap:50px;
  margin-bottom:40px;
  justify-content:center;
}
.footer-column{flex:1;min-width:200px;max-width:300px;}
.footer-column h3{font-size:20px;margin-bottom:20px;}
.footer-column p{margin-bottom:15px;color:#bbb;}
.footer-social{
  display:flex;
  gap:15px;
  justify-content:center;
}
.footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:rgba(255,255,255,.1);
  color:#fff;
  transition:var(--transition);
}
.footer-social a:hover{background-color:var(--primary-color);}
.copyright{font-size:14px;color:#bbb}

/* ================================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 768px){
  .mobile-menu-btn{display:block}
  body.menu-open{overflow:hidden;}

  .nav-links{
    position:fixed;
    top:80px;
    left:0;right:0;bottom:0;
    background:#fff;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:40px;
    transition:transform .35s ease,opacity .25s ease;
    transform:translateX(100%);
    opacity:0;
    pointer-events:none;
  }
  .nav-links.active{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-links li{margin:15px 0}
  .nav-links a::after{display:none}

  /* hero side padding */
  .hero-content{
    padding-inline:clamp(16px,6vw,28px);
    max-width:680px;
  }
  .hero h2{font-size:36px;margin-bottom:16px;}
  .hero p{font-size:18px;margin-bottom:22px;}

  /* gallery speed a bit faster for mobile */
  .reel-viewport{ --duration:12s; contain: paint layout style; -webkit-overflow-scrolling: touch; }
  .reel-track{ transform:translate3d(0,0,0); }

  /* contact */
  .contact{padding:80px 0;}
  .contact-info{
    padding:28px;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
  }
  .submit-btn{
    width:clamp(240px,85vw,420px);
    margin-bottom:20px;
  }
  .info-text a[href^="tel"],
  .info-text a[href^="mailto"]{
    width:100%;
    justify-content:center;
    padding:14px 16px;
    font-size:16px;
  }
}

/* small screens */
@media (max-width:380px){
  .contact-info{padding:22px;}
  .info-item{padding:10px;}
}

/* === Slower reel speed (desktop & mobile) === */
.reel-viewport { 
  --duration: 30s;   /* was 18s */
}

@media (max-width: 768px) {
  .reel-viewport { 
    --duration: 22s; /* was 12s */
  }
}