:root {
      --color-background: #121212;
      --color-surface: #1E1E1E;
      --color-elevation: #2A2A2A;
      --color-white: #f0f0f0;
      --color-text-primary: #E0E0E0;
      --color-text-secondary: #A0A0A0;
      --color-border: #2C2C2C;
      --shadow-default: 0 2px 10px rgba(0, 0, 0, 0.6);
      --primary-client: #324373;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      scroll-behavior: smooth;
      font-family: "Poppins", sans-serif;
    }

    a {
      text-decoration: none !important;
      color: var(--color-surface) !important;
    }

    h1 {
      font-weight: 600;
      line-height: 1.2;
      text-transform: capitalize;
      overflow: hidden;
    }

    .hero-heading {
      font-size: clamp(2rem, 10vw, 4em);
    }

    .about-banner {
      background: var(--color-background);
    }

    .about-banner .container-xxl {
      height: 50vh;
    }

    .mission {
      background: var(--primary-client);
      color: white;
      height: 50vh;
    }

    .mission-bg {
        border: 1px solid var(--color-background);
      height: 50vh;
      background-image: url(images/mission-bg.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .vission {
      background: var(--color-background);
      color: white;
      height: 50vh;
    }

    .vission-bg {
        border: 1px solid var(--color-background);
      height: 50vh;
      background-image: url(images/vission-bg.jpg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }



    /* */

    .tz-gallery {
      padding: 40px;
    }

    .tz-gallery .row > div {
      padding: 2px;
    }
/* Gallery hover fix */
  .tz-gallery .lightbox {
    position: relative;
    display: block;
  }

  .tz-gallery .lightbox img {
    display: block;
    width: 100%;
    height: auto;
  }

  .tz-gallery .lightbox:before,
  .tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
  }

  .tz-gallery .lightbox:before {
    content: '\f002'; /* FontAwesome icon or glyph fallback */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

  .tz-gallery .lightbox:after {
    content: '';
    background-color: rgba(46, 132, 206, 0.7);
  }

  .tz-gallery .lightbox:hover:before,
  .tz-gallery .lightbox:hover:after {
    opacity: 1;
  }

    .baguetteBox-button {
      background-color: transparent !important;
    }

    @media(max-width: 768px) {
      body {
        padding: 0;
      }
    }


    /* ZFHR Banner  */



    .zhfr-banner, .pvc-banner, .contact-banner, .about-banner{ 
      height: 60vh;
      color: white;
    }

   .pvc-banner {
  background-image: url(images/PVC-page-banner.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
  will-change: transform, background-position;
  overflow: hidden !important;
}

   .zhfr-banner {
  background-image: url(images/zhfr-page-banner.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
  will-change: transform, background-position;
  overflow: hidden !important;
}

   .about-banner {
  background-image: url(images/WhatsApp\ Image\ 2025-05-29\ at\ 16.02.33_51b3fe4b.jpg);
  background-size: cover;
  background-position: center top;
  position: relative;
  will-change: transform, background-position;
  overflow: hidden !important;
}

.about-banner::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
background: #22222250;
}
    


    /* Product specs */



    /* products */  .container-specs {
      display: flex;
      justify-content: space-between;
      padding: 5rem;
      box-sizing: border-box;
      border: 1px solid #333;
    }

  

    .tag {
      border: 1px solid #444;
      padding: 1.2rem 2rem;
      width: 100%;
      color: #fff;
      font-weight: 400;
      font-size: 1.1rem;
      clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 20%, 100% 80%, calc(100% - 12px) 100%, 12px 100%, 0% 80%, 0% 20%);
      background-color: #111;
      transition: 0.3s ease-in-out;
    }

    .tag:hover{
      background: var(--color-white);
      color: var(--color-background);
      transition: 0.3s ease-in-out;
    }

    @media (max-width: 900px) {
      .container-specs {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .left, .right {
        padding: 0;
        max-width: 100%;
        align-items: center;
      }

      .right {
        margin-top: 3rem;
      }
    }