:root{
      --bg: #0c0c0c;
      --card: #121212;
      --muted: #9a9a9a;
      --text: #f5f5f5;
      --accent: #e5c38a; /* warm gold */
      --accent-2: #b38b4e; /* deeper gold */
      --ring: rgba(229,195,138,0.45);
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --radius: 20px;
      --maxw: 1200px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    section{padding:80px 20px}
    .container{max-width:var(--maxw);margin:0 auto}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  background-color: white;
  box-shadow: 2px 0 12px rgba(0,0,0,0.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
  padding: 1.5rem;
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}



    /* Header */


    header.nav{
      position:sticky;top:0;z-index:1000;background:rgba(12,12,12,0.3);backdrop-filter:saturate(140%) blur(10px);
      transition:all .25s ease;border-bottom:1px solid rgba(255,255,255,0.08);
    }
    header.nav.shrink{background:rgba(12,12,12,0.85);padding:6px 0}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:1px}
    .brand-mark{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px rgba(179,139,78,.4)}
    .brand-name{font-family:"Playfair Display",serif;font-size:18px}
    nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
    nav a{opacity:.9}
    nav a:hover{opacity:1}
    .cta{padding:10px 16px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-weight:600}
    .menu-btn{display:none}

/* Hero slideshow container */
.hero {
  position: relative;
  height: 70vh;
  min-height: 600px;
  overflow: hidden;
}

/* Slides container */
.slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Each slide */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-duration: 200ms;
  transition: opacity 1200ms ease-in-out;
  overflow: hidden;
}

/* Slide active state */
.slide.active {
  opacity: 1;
  z-index: 2;
}

/* Images inside slides */
.slide img {
  width: 100%;
  height: 100%;
  object-fit:cover;                  /* Ensure image covers entire slide */
  filter: contrast(1.05) saturate(1.1) brightness(0.92);
  display: block;
}

/* Overlay with subtle gradient for readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,12,12,0.7), rgba(12,12,12,0.35) 40%, rgba(12,12,12,0.1));
  z-index: 1;
}

/* Hero content vertically and horizontally centered */
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  text-align: center;
}

.hero {
  height: auto;
  padding: 6rem 2rem;  /* Top and bottom padding for vertical space */
  min-height: 500px;    /* Minimum height for presence */
  
  display: flex;
  align-items: center;  /* Vertically center content if flexible */
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.parallax-bg {
  /* The image you want for the background */
  background-image: url('images/p\ \(1\).JPG');
  
  /* Set a fixed height or padding for the section */
  min-height: 600px;
  
  /* Create the parallax effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* Optional: overlay for better text readability */
  position: relative;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

.parallax-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* dark overlay */
  z-index: 1;
}

.parallax-bg > .container {
  position: relative;
  z-index: 2;
  padding: 60px 20px;
}

.parallax-bg-testimonials {
  background-image: url('images/p\ \(2\).JPG');
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.parallax-bg-testimonials::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.parallax-bg-testimonials > .container {
  position: relative;
  z-index: 2;
  padding: 60px 20px;
}

.parallax-pricing {
  background-image: url('images/p.JPEG'); /* Replace with your background image path */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 700px; /* Adjust as needed */
  color: white;
  /* Optional: add shadow to text for better readability */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.parallax-pricing::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* dark overlay to improve text contrast */
  z-index: 1;
}

.parallax-pricing > .w-full.md\:w-4\/5.mx-auto {
  position: relative;
  z-index: 2;
  padding: 60px 0;
}







/* Typography for eyebrow text */
.eyebrow {
  letter-spacing: 0.25em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}

/* Main heading font size and style */
.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
  margin: 16px 0 10px;
  color: white;
}

/* Paragraph styling inside hero */
.hero p {
  max-width: 760px;
  color: #d9d9d9;
  font-size: clamp(16px, 2.2vw, 18px);
}

/* Call to action buttons container


    

    /* Section titles */
    .section-title{font-family:"Playfair Display",serif;font-size:32px;margin:0 0 16px}
    .section-sub{color:var(--text);max-width:760px}

    /* About */
    .about{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
    .about .card{background:var(--card);padding:26px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.05)}
    .about .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
    .tag{border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:999px;color:#ddd;font-size:14px}

    /* Portfolio */
    .filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 24px}
    .chip{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);cursor:pointer}
    .chip.active{border-color:var(--accent);color:var(--accent)}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .tile{position:relative;border-radius:16px;overflow:hidden;background:#111}
    .tile img{height:100%;width:100%;object-fit:cover;transition:transform .6s ease}
    .tile:hover img{transform:scale(1.05)}
    .tile .label{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.45);padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:12px}

    /* Services */
    .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
    .service{background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:12px}
    .service h4{margin:0}
    .service .cta-min{margin-top:auto}

    /* Testimonials */
    .testi-wrap{position:relative}
    .testi{background:var(--card);padding:30px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
    .testi-quote{font-size:20px;line-height:1.6;font-style:italic}
    .testi-at{margin-top:10px;color:var(--muted)}

    /* Blog */
    .blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .post{background:var(--card);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .post .meta{padding:16px}
    .meta h4{margin:0 0 8px}
    .meta p{color:#ccc;margin:0 0 12px}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
    form{background:var(--card);padding:24px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.06)}
    label{display:block;margin:10px 0 6px;color:#d8d8d8}
    input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f0f0f;color:#f3f3f3}
    textarea{min-height:120px;resize:vertical}
    .inline{display:flex;gap:10px}

    /* Footer */
    footer{padding:40px 20px;border-top:1px solid rgba(255,255,255,.08);background:#0a0a0a}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:16px;align-items:start}
    .muted{color:var(--muted)}

    /* Lightbox */
    .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:20px;z-index:10000}
    .lightbox.open{display:flex}
    .lightbox img{max-height:80vh;border-radius:12px}
    .lightbox .close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);cursor:pointer}

    /* Utilities */
    .reveal{opacity:0;transform:translateY(12px);transition:all .7s ease}
    .reveal.show{opacity:1;transform:none}

    /* Responsive */
    @media (max-width: 1000px){
      .about{grid-template-columns:1fr}
      .cards{grid-template-columns:repeat(2,1fr)}
      .grid{grid-template-columns:repeat(2,1fr)}
      .blog{grid-template-columns:repeat(2,1fr)}
      .contact-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      nav ul{display:none}
      .menu-btn{display:block;border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:10px;background:transparent;color:#fff}
      .mobile-menu{display:none;flex-direction:column;gap:8px;padding:10px 20px}
      .mobile-menu.open{display:flex}
      .mobile-menu a{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
    }
    @media (max-width: 640px){
      .grid{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .blog{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
    }