:root{
      --bg: #ffffff;
      --text: #111111;
      --muted: #6b6b6b;
      --accent: #f4a261; /* coral/gold accent */
      --dark: #0f0f0f;
      --card-radius: 12px;
      --max-width: 1100px;
      --gap: 20px;
      font-size: 16px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      color:var(--text);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      background:rgba(255,255,255,0.95);
      backdrop-filter: blur(4px);
      border-bottom:1px solid #eee;
      z-index:1000;
    }
    .nav-wrap{
      max-width:var(--max-width);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--gap);
      padding:14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--dark);
    }
    .brand .logo{
      width:42px;height:42px;border-radius:8px;
      background:linear-gradient(135deg,#f7d6b7,#f4a261);
      display:grid;place-items:center;font-weight:700;
      color:#111;
    }
    .brand h1{font-size:1.05rem; margin:0; letter-spacing:0.6px}
    nav a{
      color:var(--muted);
      text-decoration:none;
      margin-left:14px;
      font-weight:600;
      font-size:0.95rem;
    }
    nav a:hover{color:var(--dark)}

    /* Hero */
    .hero{
      min-height:68vh;
      display:grid;
      align-items:center;
      padding:40px 20px;
      background-image: linear-gradient(0deg, rgba(0,0,0,0.18), rgba(0,0,0,0.18)), url('https://images.unsplash.com/photo-1520974735194-6a16e36e99a5?auto=format&fit=crop&w=1600&q=80');
      background-size:cover;
      background-position:center;
      color: #fff;
    }
    .hero-inner{
      max-width:var(--max-width);
      margin:0 auto;
      display:grid;
      grid-template-columns: 1fr;
      gap:24px;
      align-items:center;
    }
    .hero h2{font-size:clamp(1.6rem,4vw,2.6rem); margin:0 0 8px; line-height:1.05}
    .hero p{margin:0 0 18px; color:rgba(255,255,255,0.95); font-size:1rem}
    .hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .btn{
      display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;
      background:var(--accent); color:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,0.12);
    }
    .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.22)}
    .hero .mini-contact{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,0.9);font-weight:600}

    /* Main content */
    main{max-width:var(--max-width);margin:30px auto;padding:0 20px 80px}
    .section{padding:36px 0;border-bottom:1px solid #f3f3f3}
    .section h3{margin:0 0 12px;font-size:1.25rem}
    .lead{color:var(--muted);margin-bottom:12px}

    /* About */
    .about-grid{display:grid;grid-template-columns: 1fr 380px; gap:24px;align-items:start}
    .about-text p{margin-bottom:12px;color:var(--muted)}
    .skills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .skill{background:#fff;border-radius:10px;padding:10px;border:1px solid #f2f2f2;font-weight:600}

    /* Collections */
    .collections-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
      gap:18px;
      margin-top:16px;
    }
    .card{
      background:#fff;border-radius:var(--card-radius);overflow:hidden;border:1px solid #eee;
      display:flex;flex-direction:column;
      transition:transform .18s ease, box-shadow .18s ease;
    }
     .h2{
      background:#fff;border-radius:var(--card-radius);overflow:hidden;border:1px solid #eee;
      display:flex;flex-direction:column;
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,10,10,0.06)}
    .card img{width:100%;height:200px;object-fit:cover;display:block}
    .card .card-body{padding:14px;flex:1;display:flex;flex-direction:column}
    .card .title{font-weight:800;margin-bottom:6px}
    .card .desc{color:var(--muted);font-size:0.95rem;margin-bottom:10px}
    .card .card-actions{margin-top:auto;display:flex;gap:10px;align-items:center}

    .small-note{font-size:0.95rem;color:var(--muted);margin-top:14px}

    /* Gallery */
    .gallery-grid{display:grid;grid-template-columns: repeat(auto-fit,minmax(160px,1fr));gap:12px}
    .gallery-grid img{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid #eee}

    /* Contact */
    .contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
    .contact-card{background:#fff;border-radius:10px;padding:14px;border:1px solid #eee;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
    .contact-card strong{font-size:0.98rem}
    .socials{display:flex;gap:10px}
    .socials a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;border:1px solid #eee;font-weight:700}

    /* Footer */
    footer{padding:18px 20px;background:#0b0b0b;color:#fff;margin-top:30px}
    .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
    .footer-inner a{color:#fff;text-decoration:none}

    /* Responsive */
    @media (max-width:920px){
      .about-grid{grid-template-columns: 1fr}
      .hero{min-height:56vh}
    }
    @media (max-width:580px){
      nav a{display:none}
      .nav-wrap{padding:12px}
      .hero{padding:24px 16px}
      .brand h1{font-size:0.95rem}
      .card img{height:160px}
      .gallery-grid img{height:120px}
    }

    /* small helpers */
    .center{text-align:center}
    .muted{color:var(--muted)}
    /* Intro Fullscreen */
#intro {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4000;
  overflow: hidden;
  animation: introFadeOut 1s ease forwards;
  animation-delay: 5s; /* fade out after 5s */
}

/* Logo Letters */
.intro-logo span {
  font-size: 5rem;
  font-weight: bold;
  color: gold;
  margin: 0 10px;
  display: inline-block;
  opacity: 0;
  transform: scale(0.5);
  animation: zoomPulse 1.5s infinite alternate, glowSweep 3s linear infinite, finalZoom 5s ease forwards;
}

/* Stagger each letter slightly */
.intro-logo span:nth-child(1) { animation-delay: 0.3s; }
.intro-logo span:nth-child(2) { animation-delay: 0.6s; }
.intro-logo span:nth-child(3) { animation-delay: 0.9s; }

/* Pulsing zoom effect */
@keyframes zoomPulse {
  from { transform: scale(0.5); opacity: 0.6; }
  to { transform: scale(1.2); opacity: 1; }
}

/* Colorful glow sweep */
@keyframes glowSweep {
  0% { text-shadow: 0 0 10px red, 0 0 20px orange, 0 0 30px gold; color: gold; }
  25% { text-shadow: 0 0 15px blue, 0 0 25px purple, 0 0 35px pink; color: white; }
  50% { text-shadow: 0 0 20px cyan, 0 0 30px teal, 0 0 40px lightblue; color: lightblue; }
  75% { text-shadow: 0 0 15px green, 0 0 25px lime, 0 0 35px yellow; color: gold; }
  100% { text-shadow: 0 0 10px red, 0 0 20px orange, 0 0 30px gold; color: gold; }
}

/* Final zoom out like Netflix */
@keyframes finalZoom {
  0% { transform: scale(1); opacity: 1; }
  80% { transform: scale(6); opacity: 1; }
  100% { transform: scale(8); opacity: 0; }
}

/* Fade out intro */
@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* Music Player Styles */
#music-player {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: gold;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  z-index: 5000;
  font-family: 'Poppins', sans-serif;
}

#music-player button {
  background: gold;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}

#music-player button:hover {
  background: #ffcc33;
}

#track-title {
  font-size: 14px;
  font-weight: bold;
}
#track-artist {
  font-size: 12px;
  color: #ddd;
}
#progress-container {
  flex: 1;
  height: 5px;
  background: #444;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
/* Mission & Vision */
.mission p {
  max-width: 800px;
  margin: 10px auto;
  font-size: 1.1rem;
    display: block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;
      background:var(--accent); color:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,0.12);
      margin-bottom: 5px;
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.testimonials blockquote {
  background: #111;
  padding: 20px;
  border-left: 4px solid gold;
  border-radius: 8px;
  font-style: italic;
  color: #ddd;
}
.testimonials cite {
  display: block;
  margin-top: 10px;
  color: gold;
  font-weight: bold;
}

/* FAQ */
.faq .faq-item {
  display: block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;
      background:var(--accent); color:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,0.12);
      margin-bottom: 5px;
}
.faq h3 {
  color: rgb(71, 53, 4);
  margin-bottom: 8px;
}
.faq p {
  color: #ddd;
  margin: 0;
}
/* News/Advert Ticker */
.news-ticker {
  background:var(--accent); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
  position: relative;
}

/* LIVE badge */
.ticker-live {
  background: red;
  color: white;
  font-weight: bold;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 4px;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.4; }
}

/* Ticker text */
.ticker-track {
  display: inline-block;
  padding-left: 100%; /* start off-screen */
  animation: ticker-scroll 20s linear infinite;
}

.ticker-track span {
  display: inline-block;
  margin-right: 60px;
}

/* Scroll animation */
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Pause on hover */
.news-ticker:hover .ticker-track {
  animation-play-state: paused;
}


.mission.fade-in {
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  color: #000000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  margin-bottom: 5px;
}
/* Contact Section */
.contact {
  background: #111;
  padding: 40px;
  border-radius: 10px;
  margin-top: 40px;
}

.contact p {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #ccc;
}

.contact form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.contact input,
.contact textarea {
  padding: 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #222;
  color: white;
}

.contact button {
  background: gold;
  color: black;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.contact button:hover {
  background: #ffcc33;
}
/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  font-size: 24px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 10000;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}
/* Newsletter */
.newsletter {
  margin: 40px auto;   /* adds space above and below */
  padding: 20px;
  text-align: center;
  background: #111;    /* subtle background to make it stand out */
  border-radius: 10px;
  max-width: 500px;
}

.newsletter h4 {
  margin-bottom: 10px;
  color: gold;
}

.newsletter form {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.newsletter input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 220px;
}

.newsletter button {
  padding: 10px 16px;
  border: none;
  background: gold;
  color: black;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.newsletter button:hover {
  background: #ffcc33;
}
/* Blog Section */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.blog-post {
  background: #111;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  color: #ddd;
}

.blog-post h4 {
  color: gold;
  margin-bottom: 10px;
}
.blog-post p {
  font-size: 0.95rem;
  line-height: 1.4;
}
/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

.lightbox .close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}
@media (max-width: 600px) {
  .lightbox img {
    max-width: 95%;
    max-height: 70%;
  }
}
.whatsapp-float { animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* Filter Buttons */
.filter-buttons {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.filter-btn {
  background: none;
  border: 1px solid gold;
  color: gold;
  padding: 10px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
  margin-left: 5px;
}

.filter-btn:hover,
.filter-btn.active {
  background:  #f4a261;
  color: black;
  margin-left: 8px;
  border: 1px solid #f4a261;
}