:root {
  --primary: #3E0E34;   /* Deep plum from logo */
  --accent: #B7EA32;    /* Keep your original accent green */
  --light: #ffffff;     
  --muted: #7a6f78;     /* Soft muted purple/gray */
  --bg: #F2F1F6;        /* Logo background color */
  
  --radius:12px;
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Mukta',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--primary);  background: var(--bg);}
a{color:inherit;text-decoration:none}

/* Container */
.site-wrap{max-width:var(--max-width);margin:0 auto;padding:28px}

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  position: relative; /* needed for mobile dropdown */
  z-index: 1000;
  border-bottom: 2px solid var(--muted); /* <-- added */
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.logo {
  width: 48px;       /* same as original div */
  height: 48px;      /* same as original div */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px; /* optional, can remove if you want square */
  overflow: hidden;    /* ensures image fits within div */
  background: none;    /* remove previous gradient */
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ensures the image scales to fit without stretching */
  display: block;
}
/* #3E0E34
#F2F1F6 */
nav ul{
  display:flex;
  gap:18px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.cta{
  background: var(--primary);   /* deep plum */
  color: var(--light);
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
}

/* Mobile nav */
.nav-toggle{
  display:none;
  border:0;
  background:none;
  font-size:22px;
  cursor:pointer;
}
@media (max-width:840px){
  .nav-toggle{
    display:block;
    z-index:10; /* make sure it's above dropdown */
  }

nav ul{
    display:block;
    position:absolute;
    top:100%;
    right:0;
    width:220px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px,12px rgba(0,0,0,0.1);
    padding:10px 0;
    opacity:0;
    pointer-events:none;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex-direction: column;
    gap:0;
    z-index: 9999; /* Add this */
}


  nav ul.open{
    transform: scaleY(1);
    opacity:1;
    pointer-events:auto;
  }

  nav li{
    margin:0;
    padding:8px 16px;
  }

  nav li a{
    display:block;
  }
}




/* Hero */
.hero{display:flex;gap:32px;align-items:center;padding:40px 0}
.hero-left{flex:1}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;opacity:0;animation:fadeIn 1s ease-in forwards;animation-delay:0.3s;}
h1{font-size:36px;margin:12px 0;line-height:1.05;animation:heroReveal 1.6s ease-out both;}
p.lead{color:var(--muted);margin:16px 0;max-width:620px;opacity:0;animation:fadeIn 1s ease-in forwards;animation-delay:1s;}
.hero-cta{display:flex;gap:12px;margin-top:16px;opacity:0;animation:fadeIn 1s ease-in forwards;animation-delay:1.5s;}
.btn{padding:12px 18px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.btn-primary{  background: var(--primary);color: var(--light);}
.btn-outline{background:transparent;border:2px solid var(--primary)}
.hero-right{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hero-image{background:#eee;height:160px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:12px;color:#fff;font-weight:700}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.card {
  padding:18px;
  border-radius:12px;
  background:#fbfbfb;
  border:1px solid #f0f0f0;
  transition: all 0.35s ease;
}

.card:hover {
  background: #F7EAF4; /* soft plum-tinted background */
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(62,14,52,0.15);
  border-color: #E3C9DD;
}

.card h3{margin:8px 0}

/* Portfolio */
.portfolio{margin:28px 0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:10px;transition:transform 0.5s ease, box-shadow 0.5s ease;cursor:pointer}
.gallery img:hover{transform:scale(1.08);box-shadow:0 15px 25px rgba(0,0,0,0.3);}
.gallery img-container{position:relative;overflow:hidden;border-radius:10px;}
.gallery img-container img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.gallery img-container:hover img{transform:scale(1.1);}
.gallery img-container::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(23,23,23,0.2);opacity:0;transition:opacity 0.4s ease;}
.gallery img-container:hover::after{opacity:1;}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0}
.step {
  background:#fff;
  border:1px solid #eee;
  padding:14px;
  border-radius:10px;
  text-align:center;
  transition: all 0.35s ease;
}

.step:hover {
  background: #F7EAF4; /* same soft plum-tinted hover */
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(62,14,52,0.18);
  border-color: #DFBED7;
}


/* Testimonials + Pricing */
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:28px 0}
.testimonial{background:linear-gradient(180deg,#fff,#fafafa);padding:18px;border-radius:12px}
.price-card{background:var(--primary);color:var(--light);padding:18px;border-radius:12px}

/* Contact */
form{display:grid;gap:10px}
input,textarea,select{padding:12px;border-radius:8px;border:1px solid #ddd;font-family:inherit}
button[type=submit]{
  background: var(--primary);     /* deep plum */
  color: var(--light);
  border: 0;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
  transition: all 0.3s ease;
}

button[type=submit]:hover{
  background: #A4649B;            /* soft purple hover */
  color: var(--light);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(62,14,52,0.35);
}
input:focus,
textarea:focus,
select:focus{
  border-color: #A4649B;
  outline: none;
  box-shadow: 0 0 0 2px rgba(164,100,155,0.2);
}



/* Footer */
footer{margin-top:40px;padding:20px 0;color:var(--muted);text-align:center}

/* Utility */
.muted{color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;background:#f6fff0;border-radius:999px;font-weight:700;color:var(--primary)}

/* WhatsApp Floating Button */
.whatsapp-float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  right:20px;
  background-color:#25D366; /* WhatsApp green (kept for recognition) */
  color:white;
  border-radius:50%;
  text-align:center;
  font-size:32px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  z-index:1000;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:all 0.3s ease;
}

/* New hover to match The Dazzle Brand colors */
.whatsapp-float:hover{
  background:#3E0E34; /* your deep plum brand color */
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 6px 18px rgba(62,14,52,0.45);
}

.whatsapp-float i{margin-top:2px;}

/* Lightbox */
#lightbox{opacity:0;transition:opacity 0.3s ease;}
#lightbox[style*="display: flex"]{opacity:1;}
#lightbox img{width:90%;height:auto;max-height:80vh;object-fit:contain;}

/* Socials */
.socials a{
  color: #3E0E34;                 /* main plum color */
  transition: all 0.3s ease;
}

.socials a:hover{
  color: #A4649B;                 /* soft purple hover */
  transform: scale(1.18);
  text-shadow: 0 2px 8px rgba(62,14,52,0.35);
}


/* Buttons hover effects */
.btn-outline:hover{
  border-color:#A4649B; 
  color:var(--primary);
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(62,14,52,0.3);
}

.btn-primary:hover{
  background-color:#A4649B;
  color:var(--light);
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(62,14,52,0.35);
}

/* Nav hover effect excluding CTA */
nav ul li a:not(.cta):hover{  color:#A4649B; transition:color 0.3s ease;}

/* Scroll fade-in effect */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease-out, transform 0.8s ease-out;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroReveal{0%{opacity:0;transform:translateY(30px);letter-spacing:2px;}60%{opacity:1;transform:translateY(0);letter-spacing:1px;}100%{text-shadow:0 0 12px rgba(183,234,50,0.4);}}

/* Media Queries */
@media (max-width:840px){.hero{flex-direction:column}.services{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}

/* --- RESPONSIVE FIXES --- */
@media (max-width:600px){
  #contact form div[style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  input, textarea, select, button[type=submit]{width:100%;font-size:16px;}
  #contact form{padding:10px;}
  #contact h2{font-size:22px;text-align:center;}
}
@media (max-width:768px){
  .hero-cta{flex-direction:column;align-items:stretch;}
  .btn{width:100%;text-align:center;}
}

/* ==========================
   PORTFOLIO LIGHTBOX (NEW)
   ========================== */
#portfolio-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 999999;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#portfolio-lightbox.show {
  display: flex;
  opacity: 1;
}

#portfolio-lightbox img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

#portfolio-lightbox .controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 25px;
}

.lightbox-btn {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  color: white;
  border: 0;
  padding: 14px 18px;
  font-size: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lightbox-btn:hover {
  background: var(--accent);
  color: var(--primary);
  transform: scale(1.1);
}


/* Hide extra portfolio items */
.hidden-gallery {
  display: none;
}

.hidden-gallery.show {
  display: contents;
}

.gallery video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}