:root {
   --primary: #1a1a1a;
   --secondary: #e8c07d;
   --accent: #7d4f2e;
   --light: #f5f3ef;
   --gray: #8a8a8a;
   --dark: #121212;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Inter', sans-serif;
   color: #111;
   background: #fff;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
   font-family: 'Cormorant Garamond', serif;
   font-weight: 400;
   line-height: 1.3;
 }

 .container {
   width: 100%;
   /* max-width: 1200px; */
   margin: 0 auto;
   padding: 0 20px;
 }

 section {
   padding: 100px 8%;
 }

 /* Navigation */
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   /* padding: 0 0; */
   background-color: rgba(255, 255, 255, 0.95);
   z-index: 1000;
   transition: all 0.3s ease;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

 }

 .navbar .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .logo img {
   font-size: 1.8rem;
   font-weight: 600;
   color: #2a2a2a;
   text-decoration: none;
   letter-spacing: 1px;
   margin-left: 100px;
 }

 .nav-links {
   display: flex;
   list-style: none;
   justify-content: center;

 }

 .nav-links li {
   margin-left: 2.5rem;

 }

 .nav-links a {
   text-decoration: none;
   color: #555;
   font-weight: 400;
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: color 0.3s ease;
   position: relative;
   font-family: 'Inter', sans-serif;
 }

 .nav-links a:hover,
 .nav-links a.active {
   color: #2a2a2a;
 }

 .nav-links a.active::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #2a2a2a;
 }

 .mobile-menu-btn {
   display: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: #2a2a2a;
 }

 /* HERO */
 .parallax-hero {
   position: relative;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   padding: 0 8%;
 }

 /* Background Image */
 .parallax-bg {
   position: absolute;
   inset: 0;
   background-image: url("33.jpg");
   background-size: cover;
   background-position: center;
   transform: scale(1.1);
   z-index: -1;
 }

 .parallax-bgW1 {
   position: absolute;
   inset: 0;
   background-image: url("w13.jpg");
   background-size: cover;
   background-position: center;
   transform: scale(1.1);
   z-index: -1;
 }

 .parallax-bgP2 {
   position: absolute;
   inset: 0;
   background-image: url("12.png");
   background-size: cover;
   background-position: center;
   transform: scale(1.1);
   z-index: -1;
 }

 /* Dark Overlay */
 .parallax-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   /* background: rgba(0, 0, 0, 0.35); */
 }

 /* Content */
 .parallax-content {
   /* max-width: 720px; */
 display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   color: #000000d3;
   position: relative;
   /* background: linear-gradient(to top, #000000 1%, rgba(0, 0, 0, 0) 25%); */
   background-color: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(2px);
   padding: 10px 20px;
   border-radius: 10px;
 }

 .parallax-content h1 {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   font-family: 'Playfair Display', serif;
   font-size: clamp(42px, 6vw, 72px);
   margin-bottom: 20px;
   width: 100%;
   color:#FFFFFF;

   /* -webkit-text-stroke: 2px rgb(255, 255, 255); */
   /* font-size: 80px; */
 }

 .parallax-content p {
   font-size: 20px;
   max-width: 520px;
   color: rgb(0, 0, 0);
 }

 .breadscrub {
   padding: 10px 80px;
   text-decoration: none;

 }

 .breadscrub a {
   color: #000;
 }


 /* GRID */
 .grid-header {
   text-align: center;
   margin-bottom: 60px;
 }

 .grid-header h2 {
   font-size: 46px;
 }

 .kitchen-grid-section {
   padding: 50px 30px;
 }

 .kitchen-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 40px;
 }

 .kitchen-card {
   position: relative;
   overflow: hidden;
   width: 100%;
   cursor: pointer;
 }

 .kitchen-card img {
   width: 100%;
   height: 450px;
   object-fit: cover;
   transition: transform .6s ease;
 }

 .kitchen-card:hover img {
   transform: scale(1.08);
 }

 .card-caption {
   margin-top: 15px;
 }

 .card-caption h3 {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
 }

 .card-caption span {
   font-size: 14px;
   color: #777;
 }


 /* ================= POPUP ================= */
 .gallery-popup {
   position: fixed;
   inset: 0;
   visibility: hidden;
   z-index: 999;
 }

 .popup-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
 }

 .popup-box {
   position: relative;
   max-width: 900px;
   margin: auto;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   border-radius: 22px;
   padding: 20px;
 }

 .close-popup {
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 30px;
   cursor: pointer;
   z-index: 10;
 }

 /* ================= GALLERY ================= */
 .gallery-main {
   position: relative;
 }

 .gallery-image {
   width: 100%;
   height: 480px;
   object-fit: cover;
   border-radius: 16px;
 }

 .nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   border: none;
   font-size: 22px;
   padding: 12px 16px;
   cursor: pointer;
 }

 .prev {
   left: 10px;
 }

 .next {
   right: 10px;
 }

 /* ================= THUMBNAILS ================= */
 .gallery-thumbs {
   display: flex;
   gap: 12px;
   margin-top: 18px;
 }

 .gallery-thumbs img {
   width: 90px;
   height: 70px;
   object-fit: cover;
   border-radius: 8px;
   cursor: pointer;
   opacity: 0.5;
 }

 .gallery-thumbs img.active {
   opacity: 1;
   outline: 2px solid #000;
 }


 /* horizontal-slider */

 .title-text {
   display: flex;
   text-align: center;
   justify-content: center;
   margin-bottom: 40px;
 }

 .image-slider {
   width: 100%;
   padding: 40px 20px;
   overflow: hidden;
 }

 .slider-track {
   display: flex;
   gap: 29px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   margin-left: 90px;
 }

 .slide-item p {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
 }

 /* Scrollbar */
 .slider-track::-webkit-scrollbar {
   height: 10px;
 }

 .slider-track::-webkit-scrollbar-thumb {
   background: #c5c5c5;
   border-radius: 10px;

 }

 .slide-item {
   flex: 0 0 auto;
   scroll-snap-align: start;
   text-align: left;
 }

 .slide-item img {
   width: 30vw;
   height: 50vh;
   object-fit: cover;
   transition: transform 0.35s ease;
 }

 .slide-item img:hover {
   transform: scale(1.05);
 }

 .img-title {
   margin: 12px;
   font-size: 14px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: #333;

   font-weight: 500;
 }

 /* Mobile */
 @media (max-width: 768px) {
   .slide-item img {
     width: 60vw;
     height: 50vh;
   }

   .slider-track {
     margin-left: 0%;
   }
 }

 /* Kitchen Furniture Section */
 .kitchen-furniture-section {
   padding: 0px 0;
   background-color: var(--section-bg, #ffffff);

   color: var(--text-color, #2b2b2b);
 }

 .kitchen-furniture-section .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .section-header {
   max-width: 820px;
   margin-bottom: 50px;
 }

 .section-header h2 {
   font-size: clamp(32px, 4vw, 46px);
   font-weight: 500;
   letter-spacing: 0.5px;
   margin-bottom: 18px;
   color: var(--heading-color, #1c1c1c);
 }

 .section-header p {
   font-size: 17px;
   line-height: 1.8;
   color: var(--muted-text, #555);
 }

 .brand-name {
   font-weight: 600;
   color: var(--accent-color, #000);
 }

 .content-block p {
   font-size: 16.5px;
   line-height: 1.9;
   margin-bottom: 26px;
   color: var(--text-color, #333);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .kitchen-furniture-section {
     padding: 0px 0;
   }

   .section-header {
     margin-bottom: 35px;
   }

   .content-block p {
     font-size: 16px;
   }
 }

 /* Wardrobe Furniture Section */
 .wardrobe-furniture-section {
   padding: 0px 0;
   background-color: var(--section-bg, #ffffff);
   color: var(--text-color, #2b2b2b);
 }

 .wardrobe-furniture-section .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 24px;
 }

 .wardrobe-furniture-section .section-header {
   max-width: 820px;
   margin-bottom: 50px;
 }

 .wardrobe-furniture-section h2 {
   font-size: clamp(32px, 4vw, 46px);
   font-weight: 500;
   letter-spacing: 0.5px;
   margin-bottom: 18px;
   color: var(--heading-color, #1c1c1c);
 }

 .wardrobe-furniture-section .section-header p {
   font-size: 17px;
   line-height: 1.8;
   color: var(--muted-text, #555);
 }

 .wardrobe-furniture-section .content-block p {
   font-size: 16.5px;
   line-height: 1.9;
   margin-bottom: 26px;
   color: var(--text-color, #333);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .wardrobe-furniture-section {
     padding: 0px 0;
   }

   .wardrobe-furniture-section .content-block p {
     font-size: 16px;
   }
 }

 /* Turnkey Project Furniture Section */
 .turnkey-furniture-section {
   padding: 100px 0;
   background-color: var(--section-bg, #ffffff);
   color: var(--text-color, #2b2b2b);
 }

 .turnkey-furniture-section .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .turnkey-furniture-section .section-header {
   max-width: 820px;
   margin-bottom: 50px;
 }

 .turnkey-furniture-section h2 {
   font-size: clamp(32px, 4vw, 46px);
   font-weight: 500;
   letter-spacing: 0.5px;
   margin-bottom: 18px;
   color: var(--heading-color, #1c1c1c);
 }

 .turnkey-furniture-section .section-header p {
   font-size: 17px;
   line-height: 1.8;
   color: var(--muted-text, #555);
 }

 .turnkey-furniture-section .content-block p {
   font-size: 16.5px;
   line-height: 1.9;
   margin-bottom: 26px;
   color: var(--text-color, #333);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .turnkey-furniture-section {
     padding: 0px 0;
   }

   .turnkey-furniture-section .content-block p {
     font-size: 16px;
   }
 }


 .kitchen-gallery {
   padding: 40px 150px;
 }


 /* MEASUREMENTS */
 .kitchen-measure-creative {
   background: #f7f7f7;
 }

 /* Header */
 .measure-header {
   max-width: 700px;
   margin-bottom: 70px;
 }

 .measure-tag {
   font-size: 12px;
   letter-spacing: 0.25em;
   color: #999;
   display: inline-block;
   margin-bottom: 15px;
 }

 .measure-header h2 {
   font-family: 'Playfair Display', serif;
   font-size: 46px;
   margin-bottom: 20px;
 }

 .measure-header p {
   font-size: 18px;
   color: #555;
 }

 /* Layout */
 .measure-layout {
   display: flex;
   flex-direction: column;
   gap: 35px;
 }

 /* Lines */
 .measure-line {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   padding-bottom: 25px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 /* Text */
 .measure-info h3 {
   font-family: 'Playfair Display', serif;
   font-size: 24px;
   margin-bottom: 6px;
 }

 .measure-info p {
   font-size: 15px;
   color: #666;
 }

 /* Value */
 .measure-value {
   font-size: 20px;
   letter-spacing: 0.1em;
   color: #111;
   white-space: nowrap;
 }

 /* BLUEPRINT OVERLAY */
 .blueprint-overlay {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
 }

 /* Section layering fix */
 .kitchen-measure-creative {
   position: relative;
   overflow: hidden;
 }

 /* Keep content above blueprint */
 .measure-header,
 .measure-layout {
   position: relative;
   z-index: 2;
 }

 /* Blueprint look */
 .blueprint-overlay path,
 .blueprint-overlay line {
   stroke: rgba(0, 0, 0, 0.08);
   stroke-width: 1;
 }

 .blueprint-overlay .thin {
   stroke-dasharray: 6 6;
   stroke-width: 0.8;
 }

 /* Grid lines */
 .blueprint-overlay rect {
   fill: none;
   stroke: rgba(0, 0, 0, 0.04);
 }


 /* GALLERY */
 /* Quick example style */

 .kitchen-gallery h2 {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 50px;
   font-size: 50px;

 }

 .gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 70px;
   padding: 20px;
 }


 .gallery img {
   width: 520px;
   height: 300px;
 }

 .gallery a {
   width: 320px;
   height: 260px;
 }

 .gallery-item {
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;

 }

 .gallery-item:hover {
   transform: translateY(-5px);
 }

 .gallery-item img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   cursor: zoom-in;
 }

 /* LIGHTBOX */
 .lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .9);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 999;
 }

 .lightbox img {
   max-width: 90%;
   max-height: 90%;
 }



 /* MATERIALS SECTION */
 .kitchen-materials {
   background: #fff;
 }

 /* Header */
 .materials-header {
   max-width: 720px;
   margin-bottom: 70px;
 }

 .materials-tag {
   font-size: 12px;
   letter-spacing: 0.25em;
   color: #999;
   display: inline-block;
   margin-bottom: 15px;
 }

 .materials-header h2 {
   font-family: 'Playfair Display', serif;
   font-size: 46px;
   margin-bottom: 20px;
 }

 .materials-header p {
   font-size: 18px;
   color: #555;
 }

 /* Grid */
 .materials-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 40px;
 }

 /* Cards */
 .material-card {
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }

 .material-card img {
   width: 100%;
   height: 380px;
   object-fit: cover;
   transition: transform 0.6s ease;
 }

 .material-card:hover img {
   transform: scale(1.08);
 }

 /* Caption */
 .material-info {
   margin-top: 18px;
 }

 .material-info h3 {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   margin-bottom: 6px;
 }

 .material-info span {
   font-size: 14px;
   color: #777;
 }

 /* CATALOG */
 .catalog {


   text-align: center;
   background: #dfddd1;
   color: #000000;
   font-family: 'Cormorant Garamond' serif;
 }

 .catalog h2 {
   font-weight: 400;
   font-size: 52px;
   /* margin-bottom: 20px; */
 }

 .catalog p {
   font-weight: 400;
   font-size: 18px;
 }

 .catalog a {
   display: inline-block;
   margin-top: 30px;
   padding: 14px 40px;
   border: 1px solid #000000;
   color: #000000;
   text-decoration: none;
   letter-spacing: 2px;
 }


 /* ===== SECTION 3 : CONTACT ===== */
 .contact {
   padding: 110px 0px;
   display: flex;
   background: #ddebecc2;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-image: url('design2.avif')cover;
   /* background-color: #7565522d; */

 }

 .contact h2 {
   justify-content: center;
   font-size: 52px;
   margin-bottom: 20px;
   font-family: Cormorant Garamond;
   font-weight: 400;
 }

 .contact p {
   font-size: 18px;
   color: #555;
   max-width: 520px;
   line-height: 1.8;
 }

 .contact a {
   display: inline-block;
   margin-top: 30px;
   padding: 14px 36px;
   border: 1px solid #1a1a1a;
   text-decoration: none;
   color: #1a1a1a;
   text-transform: uppercase;
   letter-spacing: 2px;
   transition: 0.3s ease;
 }


 .contact a:hover {
   background: #1a1a1a;
   color: #fff;
 }



 /* Footer */
 .footer {
   background-color: #2a2a2a;
   color: #fff;
   padding: 80px 150px 30px;
 }

 .footer-content {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 60px;
   margin-bottom: 60px;
 }

 /* Brand */
 .footer-logo {
   font-size: 28px;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .footer-tagline {
   font-size: 0.95rem;
   color: #aaa;
   line-height: 1.7;
   max-width: 320px;
 }

 /* Social Icons */
 .footer-social {
   display: flex;
   gap: 16px;
   margin-top: 22px;
 }

 .footer-social a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #c5c5c5;
   transition: all 0.3s ease;
 }

 .footer-social a:hover {
   color: #fff;
   border-color: #fff;
   transform: translateY(-4px);
 }

 /* Links */
 .footer-links {
   display: flex;
   grid-template-columns: repeat(2, 1fr);
   gap: 100px;
 }

 .footer-column h4 {
   font-size: 0.95rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 18px;
 }

 .footer-column ul {
   list-style: none;
 }

 .footer-column li {
   margin-bottom: 10px;
 }

 .footer-column a {
   color: #aaa;
   text-decoration: none;
   font-size: 0.9rem;
 }

 .footer-column a:hover {
   color: #fff;
 }

 /* Bottom */
 .footer-bottom {
   border-top: 1px solid #444;
   padding-top: 30px;
   display: flex;
   justify-content: space-between;
   font-size: 0.85rem;
   color: #aaa;
 }

 .footer-bottom a {
   color: #aaa;
   text-decoration: none;
 }

 .footer-bottom a:hover {
   color: #fff;
 }

 /* Mobile */
 @media (max-width: 768px) {
   .footer-content {
     grid-template-columns: 1fr;
   }

   .footer-bottom {
     flex-direction: column;
     gap: 10px;
     text-align: center;
   }
 }


 /* Responsive */
 @media (max-width: 1200px) {
   .container {
     padding: 0 30px;
   }

   .gallery {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 70px;
     /* padding: 20px; */
   }

   .gallery img {
     width: 400px;
     /* height: 350px; */
   }

   .footer-content {
     grid-template-columns: 1fr;
     gap: 40px;
   }
 }

 @media (max-width: 992px) {
   .logo img {
     margin-left: 0px;
   }

   .footer-content {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .footer {
     padding: 15px 0px;
   }
 }

 /* ---------- MOBILE NAV ---------- */
 @media (max-width: 768px) {
   .logo img {
     margin-left: 0px;
   }

   .mobile-menu-btn {
     width: 30px;
     height: 22px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     cursor: pointer;
     z-index: 1001;


   }

   .mobile-menu-btn span {
     height: 2px;
     width: 100%;
     color: #030303;
     background-color: #1a1a1a !important;
     transition: 0.4s ease;
   }

   .navbar .mobile-menu-btn span {
     background-color: #1a1a1a;
   }

   /* If you later add dark hero / transparent navbar */
   .navbar.transparent .mobile-menu-btn span {
     background-color: #030303;
   }

   /* Hamburger → X */
   .mobile-menu-btn.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 6px);
   }

   .mobile-menu-btn.active span:nth-child(2) {
     opacity: 0;
   }

   .mobile-menu-btn.active span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -6px);
   }

   /* Mobile menu panel */
   .nav-links {
     position: fixed;
     inset: 0;
     background: rgb(255, 255, 255);
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 30px;
     transform: translateY(-100%);
     z-index: 1000;
   }

   .nav-links li {
     margin: 0;
   }

   .nav-links a {
     font-size: 20px;
     font-weight: 500;
     color: #1a1a1a;
   }

   .nav-links li {
     margin: 15px 0;
     text-align: center;
   }

   .mobile-menu-btn {
     display: block;
     cursor: pointer;
   }

   .parallax-content h1 {
     color: rgb(255, 255, 255);
     padding: 0px;
   }

   .parallax-content p {
     color: white;
   }

   .gallery {
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
   }

   .gallery img {
     width: 300px;
     height: 260px;
   }

   .gallery a {
     width: 260px;
     height: 260px;
   }

   .kitchen-gallery h2 {
     font-size: 40px;
   }

   .kitchen-gallery {
     padding: 15px;
   }

   .catalog {

     height: 300px;
     font-size: 8px;
   }

   .catalog h2 {

     font-size: 30px;
   }

   .catalog p {
     font-size: 13px;
   }

   .catalog a {
     font-size: 10px;
     letter-spacing: 1px;
   }

   .contact {
     height: 300px;
     font-size: 8px;
   }

   .contact-container h2 {
     font-size: 30px;
   }

   .contact-container p {
     font-size: 13px;
   }

   .contact-container a {
     font-size: 10px;
   }

   .footer {
     padding: 15px 0px;
   }

   .footer-links {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(2, 1fr);
   }

   .footer-bottom {
     flex-direction: column;
     text-align: center;
   }

   .legal-links {
     margin-top: 15px;
   }
 }

 @media (max-width: 480px) {
   .container {
     padding: 0 20px;
   }

   .gallery {
     grid-template-columns: repeat(1, 1fr);
     gap: 15px;
   }

   .footer-links {
     grid-template-columns: 1fr;
   }
 }