:root{
  --ink:#161616;--muted:#666;--accent:#b51d24;--gold:#d5a84f;--light:#f7f7f5;
  --max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}.container{width:min(var(--max),92%);margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-size:29px;font-weight:800;letter-spacing:2px;color:#222}.logo span{color:var(--accent)}
.menu{display:flex;gap:26px;align-items:center;flex-wrap:wrap}.menu a{font-size:14px;font-weight:700;text-transform:uppercase}.menu a:hover{color:var(--accent)}
.menu-toggle{display:none;border:0;background:none;font-size:28px}
.hero{min-height:650px;display:grid;place-items:center;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.18)),url('home/yhjt.jpg') center/cover}
.hero-content{color:#fff;max-width:760px;padding:90px 0}.eyebrow{font-size:14px;letter-spacing:4px;text-transform:uppercase;color:#aa4c4c}.hero h1{font-size:clamp(42px,7vw,76px);line-height:1.05;margin:12px 0 20px}.hero p{font-size:19px;max-width:650px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 24px;border-radius:2px;font-weight:700;margin:8px 8px 0 0}.btn.alt{background:#fff;color:#222}.btn:hover{transform:translateY(-1px)}
.section{padding:85px 0}.section.light{background:var(--light)}.section.dark{background:#202020;color:#fff}
.section-head{text-align:center;max-width:760px;margin:0 auto 42px}.section-head .eyebrow{color:var(--accent)}.section-head h2{font-size:42px;line-height:1.15;margin:8px 0 12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.two img{width:100%;display:block;max-height:600px;object-fit:cover}
.kicker{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fff;border:1px solid #eee;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.06)}.card img{width:100%;height:270px;object-fit:contain;background:#fafafa}.card-body{padding:20px}.card h3{margin:0;font-size:21px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.product-grid .card img{height:310px}
.breadcrumb{background:#f2f2f2;padding:35px 0}.breadcrumb h1{margin:0;font-size:40px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.contact-box{padding:30px;background:#f7f7f7}.contact-box h3{margin-top:0}.contact-form input,.contact-form textarea{width:100%;padding:14px;border:1px solid #ddd;margin:0 0 14px;font:inherit}.contact-form textarea{min-height:150px}
.shades{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.shade img{width:100%;height:330px;object-fit:cover;border:1px solid #ddd}.shade h3{margin:12px 0}
.quote{max-width:820px;margin:auto;text-align:center}.quote blockquote{font-size:30px;line-height:1.4;margin:0 0 20px}.quote small{letter-spacing:2px;text-transform:uppercase}
.site-footer{background:#171717;color:#ddd;padding:45px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.site-footer h3{color:#fff}.copyright{border-top:1px solid #333;margin-top:30px;padding-top:20px;font-size:13px;color:#999}
.notice{padding:14px 18px;background:#fff5d9;border-left:4px solid var(--gold);margin:20px 0}
@media(max-width:800px){
 .menu-toggle{display:block}.menu{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid #ddd}.menu.open{display:flex}
 .two,.contact-grid,.footer-grid{grid-template-columns:1fr}.cards,.product-grid,.shades{grid-template-columns:1fr 1fr}.hero{min-height:560px}
}
@media(max-width:520px){.cards,.product-grid,.shades{grid-template-columns:1fr}.section{padding:60px 0}.hero h1{font-size:44px}}
.logoimg{
    width: 150px;
    height: auto;
}


/* Video Section */
    .video-section {
      text-align: center;
      padding: 20px;
      
    }

    .video-section h2 {
      font-size: 37px;
      font-weight: bold;
    
      color: #000000;
     
    }

    .video-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: auto;
      min-height: 50vh;
      padding: 20px;
      box-sizing: border-box;
    }

    .video-container video {
      width: 100%;
      max-width: 800px;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    /* Responsive Tweaks */
    @media (max-width: 1024px) {
      .video-container video {
        max-width: 600px;
      }
    }

    @media (max-width: 768px) {
      .video-container video {
        max-width: 90%;
      }
      .video-section h2 {
        font-size: 24px;
      }
    }

    @media (max-width: 480px) {
      .video-container {
        padding: 10px;
      }
      .video-container video {
        max-width: 100%;
      }
      .video-section h2 {
        font-size: 20px;
      }
    }




    /* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:80px;
  z-index:9999;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}
.whatsapp-float svg{width:29px;height:29px}
@media(max-width:700px){
  .whatsapp-float{right:14px;bottom:55px;width:42px;height:42px}
  .whatsapp-float svg{width:24px;height:24px}
}



/* ================= COVER BANNER ================= */

.cover-banner {
  width: 100%;
  height: 320px;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}

.cover-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s ease;
}

/* Smooth image zoom */
.cover-banner:hover img {
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 800px) {
  .cover-banner {
    height: 240px;
  }
}

@media (max-width: 520px) {
  .cover-banner {
    height: 180px;
  }
}

/* =========================================================
   Q-LEX MODERN MOTION + RESPONSIVE ENHANCEMENTS
   ========================================================= */

/* Smooth page feel */
body{overflow-x:hidden}
img,video{max-width:100%}
button,a{ -webkit-tap-highlight-color:transparent }

/* Header */
.site-header{
  transition:box-shadow .35s ease, background .35s ease;
}
.site-header.scrolled{
  box-shadow:0 8px 28px rgba(0,0,0,.09);
}

/* Cover slider */
.cover-banner{
  height:clamp(230px,36vw,470px);
  margin-bottom:18px;
  background:#111;
}
.cover-slider{position:relative;width:100%;height:100%;overflow:hidden}
.cover-slide{
  position:absolute;inset:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.035);
  transition:opacity .9s ease,transform 5.5s ease,visibility .9s;
}
.cover-slide.active{
  opacity:1;visibility:visible;transform:scale(1);
}
.cover-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.08) 65%,rgba(0,0,0,.18));
}
.cover-slide img{width:100%;height:100%;object-fit:cover;display:block}
.cover-caption{
  position:absolute;z-index:2;left:clamp(22px,7vw,90px);bottom:clamp(38px,7vw,78px);
  color:#fff;max-width:680px;
  text-shadow:0 3px 16px rgba(0,0,0,.4);
  transform:translateY(18px);opacity:0;
  transition:transform .7s .2s ease,opacity .7s .2s ease;
}
.cover-slide.active .cover-caption{transform:translateY(0);opacity:1}
.cover-caption span{display:block;text-transform:uppercase;letter-spacing:4px;font-size:12px;font-weight:800;margin-bottom:8px}
.cover-caption strong{display:block;font-size:clamp(27px,4vw,52px);line-height:1.05}
.slider-arrow{
  position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.55);
  border-radius:50%;background:rgba(0,0,0,.25);color:#fff;
  font-size:34px;line-height:1;cursor:pointer;
  backdrop-filter:blur(5px);
  transition:background .25s ease,transform .25s ease;
}
.slider-arrow:hover{background:rgba(181,29,36,.85);transform:translateY(-50%) scale(1.08)}
.slider-prev{left:20px}.slider-next{right:20px}
.slider-dots{
  position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:8px;
}
.slider-dot{
  width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:50%;
  background:transparent;cursor:pointer;transition:all .25s ease;
}
.slider-dot.active{width:26px;border-radius:10px;background:#fff}

/* Scroll reveal */
.reveal,.scroll-reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible,.scroll-reveal.visible{
  opacity:1;transform:none;
}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}

/* Gentle section entrance */
.section-head h2,.hero h1{letter-spacing:-.02em}
.btn{
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  box-shadow:0 7px 18px rgba(181,29,36,.12);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.14)}

/* Cards */
.card{
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 42px rgba(0,0,0,.13)}
.card-image,.card img{overflow:hidden}
.card img{transition:transform .6s ease}
.card:hover img{transform:scale(1.045)}

/* Added home feature section */
.feature-section{background:linear-gradient(135deg,#fff 0%,#f7f7f5 100%)}
.feature-image{overflow:hidden;border-radius:4px;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.feature-image img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block;transition:transform .8s ease}
.feature-image:hover img{transform:scale(1.04)}
.feature-content h2{font-size:clamp(32px,4vw,50px);line-height:1.1;margin:10px 0 18px}
.feature-points{display:grid;gap:13px;margin:25px 0}
.feature-points div{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #e4e4e4}
.feature-points strong{font-size:13px;color:var(--accent);letter-spacing:1px}
.feature-points span{font-weight:700}

/* Comments */
.comments-section{background:#f7f7f5}
.comments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.comment-card{
  background:#fff;padding:30px;border:1px solid #eee;border-radius:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.05);
  transition:transform .35s ease,box-shadow .35s ease;
}
.comment-card:hover{transform:translateY(-7px);box-shadow:0 18px 38px rgba(0,0,0,.1)}
.stars{color:var(--gold);letter-spacing:3px;font-size:18px;margin-bottom:15px}
.comment-card p{font-size:17px;line-height:1.7;margin:0 0 22px}
.comment-card strong,.comment-card span{display:block}
.comment-card strong{font-size:14px}.comment-card span{font-size:12px;color:#777;margin-top:3px}

/* Other page content motion */
.breadcrumb{position:relative;overflow:hidden}
.breadcrumb::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  right:-60px;top:-90px;background:rgba(181,29,36,.08);
  animation:floatBlob 7s ease-in-out infinite;
}
@keyframes floatBlob{50%{transform:translateY(25px) scale(1.08)}}
.video-container video{transition:transform .45s ease,box-shadow .45s ease}
.video-container video:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.shade,.contact-box{transition:transform .35s ease,box-shadow .35s ease}
.shade:hover{transform:translateY(-6px);box-shadow:0 15px 35px rgba(0,0,0,.09)}
.contact-box:hover{box-shadow:0 12px 28px rgba(0,0,0,.08)}

/* Floating WhatsApp */
.whatsapp-float{animation:waPulse 2.8s infinite}
@keyframes waPulse{
  0%,70%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.28)}
  85%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 12px rgba(37,211,102,0)}
}

/* Better mobile navigation */
@media(max-width:800px){
  .nav{min-height:70px}
  .logoimg{width:125px}
  .menu{top:70px;box-shadow:0 15px 25px rgba(0,0,0,.08);gap:0}
  .menu a{width:100%;padding:11px 4px;border-bottom:1px solid #f0f0f0}
  .hero{min-height:540px}
  .hero-content{padding:70px 0}
  .two{gap:35px}
  .cover-banner{height:clamp(220px,48vw,360px)}
  .slider-arrow{width:40px;height:40px;font-size:29px}
  .slider-prev{left:12px}.slider-next{right:12px}
  .comments-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .container{width:min(92%,1180px)}
  .section{padding:62px 0}
  .section-head h2{font-size:32px}
  .hero h1{font-size:clamp(38px,12vw,52px)}
  .hero p{font-size:16px}
  .cover-caption{left:24px;right:24px;bottom:42px}
  .cover-caption strong{font-size:clamp(24px,7vw,36px)}
  .cover-caption span{font-size:10px;letter-spacing:2.5px}
  .comments-grid{grid-template-columns:1fr}
  .comment-card{padding:24px}
  .feature-image img{min-height:260px}
}
@media(max-width:420px){
  .cover-banner{height:200px}
  .cover-caption{bottom:34px}
  .slider-arrow{width:34px;height:34px;font-size:25px}
  .slider-dots{bottom:10px}
  .slider-dot{width:7px;height:7px}
  .slider-dot.active{width:21px}
  .hero-buttons .btn{width:100%;text-align:center}
  .video-section{padding:12px}
  .whatsapp-float{bottom:60px}
}

/* Respect reduced-motion accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
}


/* ===== Added Interior / Exterior showcase ===== */
.space-showcase{background:#fff}
.space-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:35px}
.space-card{position:relative;overflow:hidden;border-radius:6px;background:#fff;border:1px solid #eee;box-shadow:0 10px 32px rgba(0,0,0,.07)}
.space-card img{width:100%;height:330px;object-fit:cover;display:block;transition:transform .7s ease}
.space-card:hover img{transform:scale(1.045)}
.space-card-body{padding:24px}
.space-card-body .kicker{margin-bottom:7px}
.space-card-body h3{margin:0 0 10px;font-size:25px}
.space-card-body p{margin:0;color:#666}
.info-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd;margin-top:35px;border:1px solid #ddd}
.info-item{background:#fff;padding:24px}
.info-item strong{display:block;font-size:28px;color:var(--accent);margin-bottom:5px}
.info-item span{font-size:14px;color:#666}
.page-intro{max-width:760px;margin:0 auto 35px;text-align:center}
.page-intro p{color:#666}
.product-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.product-meta span{font-size:11px;padding:5px 9px;background:#f5f5f2;border-radius:20px;color:#555}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.process-card{padding:26px;background:#f7f7f5;border-top:3px solid var(--accent);transition:transform .3s ease,box-shadow .3s ease}
.process-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.process-card strong{font-size:13px;color:var(--accent);letter-spacing:1px}
.process-card h3{margin:8px 0}
@media(max-width:800px){
  .space-grid{grid-template-columns:1fr}
  .info-strip{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .space-card img{height:250px}
  .info-strip{grid-template-columns:1fr}
}






  /* ==============================
       MAIN IMAGE BOX
       ============================== */

    .image-slider {
      width: 100%;
      max-width: 1080px;

      aspect-ratio: 1 / 1;

      margin: 30px auto;

      position: relative;

      overflow: hidden;

      background: #ffffff;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

      touch-action: pan-y;

      cursor: grab;
    }


    /* Cursor while dragging */

    .image-slider.dragging {
      cursor: grabbing;
    }


    /* ==============================
       SLIDER TRACK
       ============================== */

    .slider-track {
      display: flex;

      width: 1100%;
      height: 100%;

      transform: translateX(0);

      transition: transform 0.6s ease-in-out;

      will-change: transform;
    }


    /* ==============================
       EACH SLIDE
       ============================== */

    .slide {
      width: 9.090909%;

      height: 100%;

      flex-shrink: 0;

      overflow: hidden;
    }


    /* ==============================
       IMAGE
       ============================== */

    .slide img {
      width: 100%;
      height: 100%;

      display: block;

      object-fit: cover;
      object-position: center;

      user-select: none;
      -webkit-user-drag: none;
    }


    /* ==============================
       RESPONSIVE
       ============================== */

    @media (max-width: 768px) {

      .image-slider {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
      }

    }


    @media (max-width: 480px) {

      .image-slider {
        width: 100%;
        margin: 10px auto;
      }

    }
    
    
    
    
    
    
    
    /* ==============================
       Shade Card Image Slider
   ============================== */


   /* Q-LEX 26-image project slider — isolated styles */
    .qlex-gallery-section {
      padding: 70px 20px;
      background: #f5f6f8;
      text-align: center;
      overflow: hidden;
    }
    .qlex-gallery-heading { margin: 0 auto 32px; animation: qlexGalleryFade 0.8s ease both; }
    .qlex-gallery-heading span {
      color: #888; font-size: 12px; letter-spacing: 4px;
      text-transform: uppercase;
    }
    .qlex-gallery-heading h2 {
      margin: 12px 0 10px; font-size: clamp(30px, 5vw, 52px);
      line-height: 1.1; font-weight: 800; letter-spacing: -1.5px;
    }
    .qlex-gallery-heading p { margin: 0; color: #777; font-size: 14px; }
    .qlex-gallery-wrap { width: min(100%, 650px); margin: 0 auto; position: relative; animation: qlexGalleryRise 1s ease both; }
    .qlex-gallery-viewport {
      width: 100%; overflow: hidden; border-radius: 18px;
      box-shadow: 0 20px 55px rgba(0,0,0,.13);
      touch-action: pan-y; cursor: grab; background: #e9e9e9;
    }
    .qlex-gallery-viewport {
    width: 100%;
    max-width: 1080px;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
    .qlex-gallery-viewport:active { cursor: grabbing; }
    .qlex-gallery-track { display: flex; transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; }
    .qlex-gallery-slide { flex: 0 0 100%; min-width: 100%; }
    .qlex-gallery-slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
    .qlex-gallery-arrow {
      position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
      width: 46px; height: 46px; border: 0; border-radius: 50%;
      background: rgba(255,255,255,.96); color: #171717; font-size: 24px;
      cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.16);
      transition: background .25s, color .25s, transform .25s;
    }
    .qlex-gallery-arrow:hover { background: #171717; color: #fff; transform: translateY(-50%) scale(1.08); }
    .qlex-gallery-prev { left: -23px; }
    .qlex-gallery-next { right: -23px; }
    .qlex-gallery-visit { margin-top: 22px; }
    .qlex-gallery-visit a {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 13px 42px; border-radius: 50px; background:rgba(181,29,36,.85); color: #fff;
      text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .5px;
      transition: transform .25s, background .25s, box-shadow .25s;
    }
    .qlex-gallery-visit a:hover { color: #fff; background: #444; transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,0,0,.18); }
    .qlex-gallery-dots { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 23px auto 0; max-width: 580px; }
    .qlex-gallery-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 20px; background: #c8c8c8; cursor: pointer; transition: .25s; }
    .qlex-gallery-dot.is-active { width: 23px; background: #171717; }
    .qlex-gallery-count { margin-top: 15px; color: #888; font-size: 12px; letter-spacing: 2px; }
    @keyframes qlexGalleryFade { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes qlexGalleryRise { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 600px) {
      .qlex-gallery-section { padding: 48px 27px; }
      .qlex-gallery-heading { margin-bottom: 24px; }
      .qlex-gallery-viewport { border-radius: 12px; }
      .qlex-gallery-arrow { width: 38px; height: 38px; font-size: 20px; }
      .qlex-gallery-prev { left: -19px; }
      .qlex-gallery-next { right: -19px; }
      .qlex-gallery-visit a { padding: 12px 36px; }
      .qlex-gallery-dots { gap: 5px; }
      .qlex-gallery-dot { width: 5px; height: 5px; }
      .qlex-gallery-dot.is-active { width: 17px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .qlex-gallery-track, .qlex-gallery-arrow, .qlex-gallery-visit a { transition: none; }
      .qlex-gallery-heading, .qlex-gallery-wrap { animation: none; }
    }