/* Elegant & Romantic theme: soft blush, ivory, gold accents */
:root{
  --ivory:#fffaf6;
  --blush:#f6e6e9;
  --rose:#dba6ab;
  --gold:#b08a52;
  --text:#333;
  --accent:#8b5e5b;
}
*{box-sizing:border-box}
body{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; margin:0; color:var(--text); background:var(--ivory);}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.header-inner{display:flex;align-items:center;justify-content:space-between}
/* Fix vertical alignment of logo + text */
.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 50%;
    display: block;   /* ensures no inline-block offset */
}
.brand{font-family:'Playfair Display', serif;font-size:1.6rem;color:var(--accent);text-decoration:none}
/* Logo next to website title */
.brand-logo {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 6px rgba(176, 138, 82, 0.35);
}
.nav a{margin-left:1rem;text-decoration:none;color:var(--text)}
.btn-primary{background:var(--gold);color:white;padding:0.5rem 0.9rem;border-radius:8px;text-decoration:none}
.site-header {
  background: linear-gradient(
    180deg,
    rgba(255, 245, 240, 0.95),
    rgba(255, 240, 235, 0.7)
  );
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(176, 138, 82, 0.15); /* soft gold line */
}
.hero{background-image:linear-gradient(180deg, rgba(255,250,248,0.6), rgba(255,250,248,0.8));padding:4rem 0;text-align:center}
.hero h1{font-family:'Playfair Display',serif;font-size:2.6rem;margin:0 0 1rem;color:var(--accent)}
.lead{max-width:700px;margin:0 auto 1.5rem;color:#6b5b5b}
/* Premium section titles */
h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.8rem;
  text-align: center;
  letter-spacing: 0.5px;
}
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: 8px auto 0;
  border-radius: 2px;
  opacity: 0.85;
}
.btn-cta {
  display: inline-block;
  background: var(--gold);
  color: white;
  padding: 0.9rem 1.3rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(176, 138, 82, 0.28); /* soft gold glow */
  transition: 0.25s ease;
}
.btn-cta:hover {
  background: linear-gradient(90deg, #b08a52, #d7b079);
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(176, 138, 82, 0.35);
}
/* Gold line under section titles */
.section-title-line {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 8px auto 20px;
  opacity: 0.85;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.card img{width:100%;height:320px;object-fit:cover;border-radius:12px}
img {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  border-radius: 10px;
}
.features{list-style:disc;margin-left:1.2rem}
.mini-gallery .gallery-row{display:flex;gap:10px;margin-top:1rem}
.mini-gallery img{width:32%;height:160px;object-fit:cover;border-radius:8px}
.page{padding:2rem 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.service{background:linear-gradient(180deg,white, var(--blush));padding:1.1rem;border-radius:10px;border:1px solid rgba(0,0,0,0.03)}
.masonry{column-count:3;column-gap:1rem}
.masonry img{width:100%;break-inside:avoid;margin-bottom:1rem;border-radius:8px}
.testimonials blockquote{background:white;padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid var(--gold)}
.contact-form{max-width:700px}
.contact-form label{display:block;margin-bottom:0.8rem}
.contact-form input,.contact-form textarea{width:100%;padding:0.6rem;border-radius:6px;border:1px solid #e6dede}
.site-footer{border-top:1px solid rgba(0,0,0,0.03);padding:1.5rem 0;background:transparent}
.center{text-align:center}
.small{font-size:0.9rem;color:#6b5b5b}
@media (max-width:800px){.grid-2{grid-template-columns:1fr}.masonry{column-count:2}.mini-gallery img{width:100%}}
@media (max-width:520px){.masonry{column-count:1}.nav{display:none}.nav-toggle{display:block}}
/* ============= GOLD DIVIDER UNDER EVERY H2 ============= */
h2::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    margin: 1rem auto 2rem auto;
    border-radius: 5px;
    background: linear-gradient(to right, #b08a52, #e8d3a9, #b08a52);
}
/* Premium fade-up animation */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: 0.9s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}
/* Premium Parallax Effect (NO HTML changes needed) */
.hero {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12); /* subtle dark overlay */
    z-index: -1;
}
/* ===== Premium Section Background ===== */
section {
    padding: 4rem 0;
    background: linear-gradient(180deg, #f7f0e9, #e8ddd3);
}
/* ===== Premium Gold Underline for Headings ===== */
h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 1.5rem;
}

/* The thin gold line */
h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, #b08a52, #e2c58b);
    border-radius: 3px;
}
/* ===== Elegant Image Shadow ===== */
img {
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    border-radius: 10px;
}
/* Premium Navigation Styling */
.nav a {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--text);
    padding: 0.3rem 0.6rem;
    transition: 0.3s ease;
    letter-spacing: 0.3px;
}

.nav a:hover {
    color: var(--gold);
    transform: translateY(-1px);
}
.nav a.contact-btn {
    background: var(--gold);
    color: white !important;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.nav a.contact-btn:hover {
    background: #a97a3a;
}
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
@scroll-timeline scroll-reveal {
    source: auto;
    orientation: block;
}

.reveal {
    animation: fadeUp 1s ease both;
    animation-timeline: scroll-reveal;
    animation-range: entry 0% cover 40%;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
h1, h2, h3 {
    transition: color 0.3s ease, text-shadow 0.4s ease;
}

h1:hover, h2:hover, h3:hover {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(176, 138, 82, 0.4);
}
.hero h1 {
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.site-header {
    animation: slideDown 0.9s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.masonry img, .mini-gallery img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.masonry img:hover, .mini-gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
/* ================= PREMIUM LUXURY UPGRADE PACK ================= */

/* SECTION BACKGROUND (soft luxury gradient) */
.page {
    background: linear-gradient(180deg, #fdf7f3, #f7ece5);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* SERVICE CARDS – glass effect, gold border on hover */
.service {
    background: linear-gradient(180deg, #ffffffaa, #f6e6e9bb);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(176, 138, 82, 0.25);
    border-radius: 14px;
    padding: 1.4rem;
    transition: all 0.35s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    opacity: 0;
    transform: translateY(25px);
    animation: fadeUp 0.7s ease forwards;
}

/* DELAYED ANIMATION FOR EACH CARD */
.service:nth-child(1) { animation-delay: 0.1s }
.service:nth-child(2) { animation-delay: 0.2s }
.service:nth-child(3) { animation-delay: 0.3s }
.service:nth-child(4) { animation-delay: 0.4s }
.service:nth-child(5) { animation-delay: 0.5s }
.service:nth-child(6) { animation-delay: 0.6s }
.service:nth-child(7) { animation-delay: 0.7s }
.service:nth-child(8) { animation-delay: 0.8s }

/* HOVER – Lift & Glow */
.service:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.15);
    border-color: var(--gold);
}

/* Title inside card turns gold on hover */
.service h3,
.service h2 {
    transition: color 0.3s ease;
}

.service:hover h3,
.service:hover h2 {
    color: var(--gold);
}

/* GRID spacing */
.services-grid {
    gap: 1.6rem;
    margin-top: 2rem;
}

/* SECTION TITLE LUXURY STYLE */
.page h1, .page h2, .page h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

/* GOLD LINE UNDER MAIN HEADING */
.page h1::after {
    content: "";
    width: 70px;
    height: 3px;
    background: var(--gold);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
}

/* BUTTON UPGRADE */
.btn-primary, .get-quote-btn {
    background: linear-gradient(180deg, #b08a52, #a07742);
    color: white;
    padding: 0.8rem 1.6rem;
    border-radius: 12px;
    font-weight: bold;
    transition: 0.3s ease;
    border: none;
}

.btn-primary:hover, .get-quote-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(176, 138, 82, 0.35);
}

/* Card fade-up keyframes */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===================== PREMIUM GALLERY UPGRADE ===================== */

/* Gallery container spacing */
.page .container {
    padding-top: 1rem;
}

/* Gallery heading improvement */
.page h1, .page h2, .page h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--accent);
    text-align: left;
    margin-bottom: 0.8rem;
}

/* Gallery image cards */
.gallery-grid img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover effect */
.gallery-grid img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* Add spacing between images */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* Subtle gradient behind gallery section */
.page {
    background: linear-gradient(180deg, #fdf7f3, #f9f1ec);
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* Caption / text under gallery */
.page p {
    font-size: 1rem;
    color: #6b5b5b;
    margin-bottom: 1rem;
}
/* ================= END PREMIUM PACK ================= */


/* ========================= assets/script.js ========================= */
(function(){
  document.getElementById('year')?.innerText = new Date().getFullYear();
  document.getElementById('year2')?.innerText = new Date().getFullYear();
  document.getElementById('year3')?.innerText = new Date().getFullYear();
  document.getElementById('year4')?.innerText = new Date().getFullYear();
  document.getElementById('year5')?.innerText = new Date().getFullYear();
  document.getElementById('year6')?.innerText = new Date().getFullYear();

  const toggle = document.querySelector('.nav-toggle');
  const nav = document.querySelector('.nav');
  if(toggle && nav){
    toggle.addEventListener('click', ()=>{
      nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
      nav.style.flexDirection = 'column';
      nav.style.gap = '12px';
    });
  }
})();
/* ===================== PREMIUM TESTIMONIALS ===================== */

/* Section background */
.testimonials-section {
    background: linear-gradient(180deg, #fdf7f3, #f8ece6);
    padding: 3rem 0;
}

/* Title styling */
.testimonials-section h1,
.testimonials-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    text-align: center;
    color: var(--accent);
    margin-bottom: 0.5rem;
    position: relative;
}

/* Gold underline */
.testimonials-section h1::after,
.testimonials-section h2::after {
    content: "";
    width: 70px;
    height: 3px;
    background: var(--gold);
    display: block;
    margin: 0.6rem auto 0;
    border-radius: 3px;
}

/* Testimonial card */
.testimonials blockquote {
    background: white;
    padding: 1.8rem 2rem;
    border-radius: 14px;
    margin: 1.4rem 0;
    border-left: 5px solid var(--gold);
    box-shadow: 0 8px 18px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.testimonials blockquote:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

/* Testimonial text */
.testimonials blockquote p {
    font-size: 1.05rem;
    line-height: 1.55rem;
    color: #4e4444;
}

/* Author name */
.testimonials blockquote footer {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
    margin-top: 0.8rem;
}

/* Mobile corrections */
@media (max-width: 600px) {
    .testimonials blockquote {
        padding: 1.4rem;
    }
    .testimonials-section h1 {
        font-size: 1.9rem;
    }
}
/* ========================= ABOUT PAGE PREMIUM STYLING ========================= */

/* Soft luxurious background for About page section */
.about-section {
  background: linear-gradient(180deg, #fff9f6, #f3e8e3);
  padding: 3rem 2rem;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  animation: fadeIn 1.5s ease;
}

/* Premium Title Styling (About Kiri Decoration, Our Approach, etc.) */
.about-section h1,
.about-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
}

.about-section h1::after,
.about-section h2::after {
  content: "";
  width: 70px;
  height: 3px;
  background: var(--gold);
  display: block;
  margin: 0.8rem auto 0 auto;
  border-radius: 3px;
}

/* Improving the text readability */
.about-section p {
  line-height: 1.7;
  margin-bottom: 1.2rem;
  color: #4f4f4f;
  font-size: 1rem;
}

/* Tamil quote styling block */
.quote {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
  font-family: 'Playfair Display', serif;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--gold);
  margin: 1.5rem 0;
  background: #fff7f2;
  border-radius: 8px;
}

/* Founder photo premium styling */
.founder-photo img {
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  max-width: 78%;
  display: block;
  margin: 2rem auto;
}

/* Box around long text section */
.about-content-box {
  background: white;
  padding: 2rem;
  border-radius: 14px;
  border: 1px solid rgba(176,138,82,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  margin-top: 1.5rem;
}

/* Smooth fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===================== CONTACT FORM PREMIUM STYLING ====================== */

.contact-section {
  background: linear-gradient(180deg, #fff9f6, #faefea);
  padding: 3rem 2rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Contact Us title */
.contact-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: 0.5rem;
}

.contact-section h2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: var(--gold);
  display: block;
  margin: 0.8rem auto 1.5rem auto;
  border-radius: 3px;
}

/* Description text */
.contact-section p {
  text-align: center;
  color: #6a6a6a;
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* Labels */
.contact-section label {
  font-weight: 600;
  color: #5a4637;
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: block;
}

/* Input fields */
.contact-section input,
.contact-section textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(176, 138, 82, 0.4);
  background: #fff;
  font-size: 1rem;
  transition: 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Hover + Focus effect */
.contact-section input:focus,
.contact-section textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(176, 138, 82, 0.5);
  outline: none;
}

/* Textarea height */
.contact-section textarea {
  height: 140px;
  resize: vertical;
}

/* Send Button */
.contact-section button,
.send-btn {
  background: var(--gold);
  color: white;
  border: none;
  padding: 14px 24px;
  font-size: 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
  box-shadow: 0 4px 15px rgba(176, 138, 82, 0.4);
}

/* Button hover */
.contact-section button:hover,
.send-btn:hover {
  background: #b18443;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(176, 138, 82, 0.5);
}

/* Email text below button */
.contact-section .direct-email {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #6a6a6a;
  text-align: left;
}

.contact-section .direct-email a {
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}

.contact-section .direct-email a:hover {
  text-decoration: underline;
}

/* Smooth fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ========== INDEX PAGE ENHANCEMENTS ========== */

/* Fix logo alignment in navbar */
.header-inner {
    align-items: center !important;
}

.brand-logo {
    margin-top: 0 !important;
}

/* Hero fade-in animation */
.hero {
    animation: fadeIn 1.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Center major content sections for wide screens */
.section, 
.services-section, 
.gallery-section, 
.recent-setups-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Service card hover effect */
.service-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Gallery hover zoom */
.gallery img {
    transition: transform .3s ease, box-shadow .3s ease;
    border-radius: 10px;
}

.gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Recent setups styling */
.recent-setups img {
    border-radius: 10px;
    transition: transform .3s ease;
}

.recent-setups img:hover {
    transform: scale(1.03);
}

/* Clean up “View full gallery →” alignment */
.view-gallery-link {
    text-align: center;
    display: block;
    font-weight: 600;
    margin-top: 0.7rem;
}
/* ------ SERVICES PAGE PREMIUM UPGRADE ------ */

/* Center the entire services area */
.services-section,
.services-container {
    max-width: 1200px !important;
    margin: auto !important;
    padding: 2rem 1rem;
}

/* Improve section heading styling */
.services-section h2,
.services-title {
    font-size: 2.2rem;
    text-align: center;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1rem;
    position: relative;
}

.services-section h2::after,
.services-title::after {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--gold);
    display: block;
    margin: 0.5rem auto 0;
    border-radius: 4px;
}

/* Services grid improvements */
.services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    justify-content: center;
    align-items: stretch;
}

/* Card style */
.service-card {
    padding: 1.8rem;
    border-radius: 15px;
    background: linear-gradient(180deg, #fff, #f9ece7);
    border: 1px solid rgba(176,138,82,0.25);
    transition: 0.3s ease;
    height: 100%;
}

/* Title inside card */
.service-card h3 {
    font-size: 1.45rem;
    line-height: 1.35;
    margin-bottom: 0.7rem;
    font-weight: 700;
    color: var(--accent);
}

/* Description text */
.service-card p {
    color: #6b5b5b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Hover effect */
.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    border-color: rgba(176,138,82,0.45);
}

/* Add smooth fade animation */
.services-grid {
    animation: fadeUp 0.7s ease;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ----------- PREMIUM GALLERY UPGRADE ----------- */

/* Center gallery area */
.gallery-section,
.gallery-container {
    max-width: 1200px !important;
    margin: auto !important;
    padding: 2rem 1rem;
}

/* Gallery heading style */
.gallery-title,
.gallery-section h2 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1rem;
}

.gallery-title::after,
.gallery-section h2::after {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--gold);
    display: block;
    margin: 0.5rem auto 0;
    border-radius: 4px;
}

/* Create clean grid layout */
.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem;
    margin-top: 1.5rem;
}

/* Style images */
.gallery-grid img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Smooth fade animation on load */
.gallery-grid {
    animation: fadeUp 0.7s ease;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Fix white space below hero caused by pseudo-element */
.hero {
    position: relative !important;
    overflow: hidden !important;
}
/* HERO SLIDESHOW BACKGROUND */
.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1.5s ease-in-out;
    min-height: 420px; /* adjust if needed */
}
/* =========================================================
   LUXURY LAYER 2 — DEPTH, MOTION & DETAIL
   (Paste at END of style.css)
   ========================================================= */

/* ✨ Subtle luxury background texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(176,138,82,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(139,94,91,0.05), transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* ✨ Luxury section glass edge */
section {
  border-radius: 22px;
  margin: 2.5rem auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 10px 35px rgba(0,0,0,0.06);
}

/* ✨ Elegant floating animation */
@keyframes floatSoft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.hero .btn-primary {
  animation: floatSoft 4s ease-in-out infinite;
}

/* ✨ Luxury text highlight sweep */
.lux-text {
  position: relative;
  display: inline-block;
}

.lux-text::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: 0;
  width: 0%;
  height: 40%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(176,138,82,0.35),
    transparent
  );
  transition: width 0.6s ease;
  z-index: -1;
}

.lux-text:hover::after {
  width: 140%;
}

/* ✨ Premium image frame */
.gallery-grid img,
.mini-gallery img {
  outline: 1px solid rgba(176,138,82,0.25);
  outline-offset: -6px;
}

/* ✨ Ultra-soft hover zoom (luxury feel) */
.gallery-grid img:hover {
  transform: scale(1.045);
}

/* ✨ Footer gold glow edge */
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
  margin-bottom: 1.2rem;
  opacity: 0.7;
}
/* =========================================================
   LUXURY LAYER 3 — CINEMATIC SPOTLIGHT & HERO DEPTH
   ========================================================= */

/* 🎬 Cinematic hero spotlight */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.12),
    rgba(0,0,0,0.65)
  );
  pointer-events: none;
}

/* 🎥 Cinematic slow zoom */
.hero-bg,
.hero img {
  animation: cinematicZoom 18s ease-in-out infinite alternate;
}

@keyframes cinematicZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ✨ Luxury spotlight card */
.spotlight-card {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.96),
    rgba(240,225,210,0.9)
  );
  border-radius: 22px;
  border: 1px solid rgba(176,138,82,0.35);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.spotlight-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 35px 80px rgba(0,0,0,0.28);
}
/* =========================================================
   LEVEL INFINITE + ULTRA MOTION PACK
   Pure CSS cinematic scroll, fade, & motion effects
   ========================================================= */

/* 1️⃣ Fade-up reveal on scroll (pure CSS) */
@keyframes fadeUpMotion {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-motion {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpMotion 1.2s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* Example usage: 
   <div class="service-card reveal-motion" style="--delay:0.2s">...</div>
*/

/* 2️⃣ Staggered card animations */
.service-card:nth-child(1) { --delay: 0.1s; }
.service-card:nth-child(2) { --delay: 0.2s; }
.service-card:nth-child(3) { --delay: 0.3s; }
.service-card:nth-child(4) { --delay: 0.4s; }
.service-card:nth-child(5) { --delay: 0.5s; }
.service-card:nth-child(6) { --delay: 0.6s; }
.service-card:nth-child(7) { --delay: 0.7s; }
.service-card:nth-child(8) { --delay: 0.8s; }

/* 3️⃣ Smooth parallax layers (hero + bg) */
.hero,
.hero-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}

/* Floating subtle parallax animation */
@keyframes parallaxFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.hero-bg {
  animation: parallaxFloat 12s ease-in-out infinite alternate;
}

/* 4️⃣ Floating premium cards */
.service-card,
.spotlight-card,
.about-content-box {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}

.service-card:hover,
.spotlight-card:hover,
.about-content-box:hover {
  transform: translateY(-12px) scale(1.035) rotateZ(0.1deg);
  box-shadow: 0 45px 95px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.55);
}

/* 5️⃣ Gallery cinematic hover */
.gallery-grid img,
.mini-gallery img {
  transition: transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease;
}

.gallery-grid img:hover,
.mini-gallery img:hover {
  transform: scale(1.08) rotateZ(0.15deg);
  box-shadow: 0 22px 58px rgba(0,0,0,0.28);
  filter: brightness(1.09);
}

/* 6️⃣ Heading float shimmer */
h1, h2, h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

h1::before,
h2::before,
h3::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,235,180,0.45), transparent);
  transform: skewX(-25deg);
  animation: shimmerMove 2.2s linear infinite;
}

@keyframes shimmerMove {
  0% { left: -150%; }
  100% { left: 150%; }
}

/* 7️⃣ Hero CTA float & glow */
.btn-primary,
.btn-cta {
  animation: floatInfinite 6s ease-in-out infinite;
  box-shadow: 0 10px 28px rgba(176,138,82,0.32);
}

@keyframes floatInfinite {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 8️⃣ Section subtle pulse */
section {
  animation: sectionPulse 12s ease-in-out infinite alternate;
}

@keyframes sectionPulse {
  0% { box-shadow: 0 18px 65px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 22px 72px rgba(0,0,0,0.1); }
  100% { box-shadow: 0 18px 65px rgba(0,0,0,0.08); }
}

/* 9️⃣ Footer soft shimmer */
.site-footer::after {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(176,138,82,0.6), transparent);
  margin-top: 1.2rem;
  opacity: 0.85;
  animation: footerShimmer 6s ease-in-out infinite alternate;
}

@keyframes footerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 🔟 Smooth transition globally */
* {
  transition: all 0.35s ease !important;
}
/* =========================================================
   LEVEL INFINITE + ULTRA LUXURY 2.0 — FINAL ULTIMATE CSS
   ========================================================= */

/* ================= 1. Ultra-soft radial background texture ================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,240,235,0.06), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(255,235,200,0.04), transparent 30%);
  pointer-events: none;
  z-index: -1;
}

/* ================= 2. Hero cinematic glow & spotlight ================= */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), rgba(0,0,0,0.5));
  z-index: -1;
  pointer-events: none;
  border-radius: 14px;
}

/* ================= 3. Hero shimmer headline effect ================= */
.hero h1, .hero h2 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hero h1::after, .hero h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,235,180,0.45), transparent);
  transform: skewX(-25deg);
  animation: heroShimmer 2.2s linear infinite;
}

@keyframes heroShimmer {
  0% { left: -150%; }
  100% { left: 150%; }
}

/* ================= 4. Card glass + floating effect ================= */
.service-card,
.spotlight-card,
.about-content-box,
.testimonials blockquote {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(176,138,82,0.28);
  border-radius: 24px;
  box-shadow:
    0 28px 68px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.55s ease, border-color 0.35s ease;
}

.service-card:hover,
.spotlight-card:hover,
.about-content-box:hover,
.testimonials blockquote:hover {
  transform: translateY(-14px) scale(1.04) rotateZ(0.12deg);
  box-shadow:
    0 42px 92px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color: var(--gold);
}

/* ================= 5. Gallery cinematic hover ================= */
.gallery-grid img,
.mini-gallery img {
  outline: 1px solid rgba(176,138,82,0.25);
  outline-offset: -6px;
  transition: transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease;
  border-radius: 14px;
}

.gallery-grid img:hover,
.mini-gallery img:hover {
  transform: scale(1.08) rotateZ(0.15deg);
  box-shadow: 0 24px 62px rgba(0,0,0,0.28);
  filter: brightness(1.09);
}

/* ================= 6. Section pulse effect ================= */
section {
  border-radius: 28px;
  margin: 3rem auto;
  padding: 4rem 2rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 22px 70px rgba(0,0,0,0.09);
  background: linear-gradient(180deg, #fdf7f3, #f7ece5);
  transition: all 0.5s ease;
  animation: sectionPulse 14s ease-in-out infinite alternate;
}

@keyframes sectionPulse {
  0% { box-shadow: 0 20px 65px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 26px 82px rgba(0,0,0,0.12); }
  100% { box-shadow: 0 20px 65px rgba(0,0,0,0.08); }
}

/* ================= 7. Header navbar glass luxury ================= */
.site-header,
header,
.navbar {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(176,138,82,0.25);
  box-shadow: 0 14px 48px rgba(0,0,0,0.14);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.navbar a,
.site-header a,
header a {
  font-weight: 500;
  letter-spacing: 0.6px;
  transition: color 0.3s ease;
}

.navbar a:hover,
.site-header a:hover,
header a:hover {
  color: var(--gold);
}

/* ================= 8. CTA button float ================= */
.btn-primary,
.btn-cta {
  animation: floatInfinite 6s ease-in-out infinite;
  box-shadow: 0 12px 28px rgba(176,138,82,0.32);
}

@keyframes floatInfinite {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ================= 9. Headings gold shimmer ================= */
h1, h2, h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

h1::before,
h2::before,
h3::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,235,180,0.45), transparent);
  transform: skewX(-25deg);
  animation: headingShimmer 2.5s linear infinite;
}

@keyframes headingShimmer {
  0% { left: -150%; }
  100% { left: 150%; }
}

/* ================= 10. Footer shimmer ================= */
.site-footer::after {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(176,138,82,0.65), transparent);
  margin-top: 1.2rem;
  opacity: 0.85;
  animation: footerShimmer 6s ease-in-out infinite alternate;
}

@keyframes footerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ================= 11. Scroll-reveal motion ================= */
@keyframes fadeUpMotion {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.reveal-motion {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpMotion 1.3s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* ================= 12. Staggered service-card delays ================= */
.service-card:nth-child(1) { --delay: 0.1s; }
.service-card:nth-child(2) { --delay: 0.2s; }
.service-card:nth-child(3) { --delay: 0.3s; }
.service-card:nth-child(4) { --delay: 0.4s; }
.service-card:nth-child(5) { --delay: 0.5s; }
.service-card:nth-child(6) { --delay: 0.6s; }
.service-card:nth-child(7) { --delay: 0.7s; }
.service-card:nth-child(8) { --delay: 0.8s; }

/* ================= 13. Parallax hero float ================= */
.hero,
.hero-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}

@keyframes parallaxFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}

.hero-bg {
  animation: parallaxFloat 12s ease-in-out infinite alternate;
}

/* ================= 14. Global smooth transition ================= */
* {
  transition: all 0.35s ease !important;
}
/* ================= PREMIUM SOCIAL ICONS ================= */

/* Common style for all social icons */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b08a52, #e8d3a9);
    color: white;
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(176,138,82,0.35);
    transition: all 0.35s ease;
    margin: 0 6px;
}

/* Hover effect – premium glow */
.social-icon:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(176,138,82,0.45), 0 0 12px rgba(255, 235, 205, 0.5);
    background: linear-gradient(135deg, #e8d3a9, #b08a52);
}

/* Instagram specific tweaks */
.social-icon.instagram {
    background: linear-gradient(45deg, #b08a52, #d7b079);
    color: white;
}

.social-icon.instagram:hover {
    background: linear-gradient(45deg, #d7b079, #b08a52);
    color: white;
}

/* Facebook specific tweaks */
.social-icon.facebook {
    background: linear-gradient(45deg, #b08a52, #d7b079);
    color: white;
}

.social-icon.facebook:hover {
    background: linear-gradient(45deg, #d7b079, #b08a52);
    color: white;
}

/* Optional: add soft inner shadow for luxury look */
.social-icon i {
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Responsive scaling */
@media(max-width:600px) {
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin: 0 4px;
    }
}
/* ========================= README.md ========================= */

# Kiri Decoration — Static Website

## How to use
1. Create a GitHub account (if you don’t have one) and create a repo named `yourusername.github.io` for a user site OR any repo for a project site.
2. Upload all files and folders from this project to the repository root.
3. On GitHub go to Settings → Pages and enable GitHub Pages (branch `main` / `master`). Your site will be served at `https://yourusername.github.io`.

Alternatively, drag-and-drop the site folder to Netlify or Vercel for free hosting.

## Customization
- Replace image URLs in `gallery.html`, `index.html`, and `about.html` with your own images.
- Edit contact email in `contact.html`.
- Change Founder name and copy across pages.

---

<!-- End of project files -->