body {
        background:url(/images/image.jpg) top repeat-x #fff;
        margin:0;
        
      }

      .green_hdr {
        background-color:#009933;
        font-family:Arial, Helvetica, sans-serif;
        font-size:18px;
        color:#FFF;
        font-variant:small-caps;
        text-align:center;
        border-bottom:solid 1px #000;
      }
      
      

      h1 {
        font-family:Arial, Helvetica, sans-serif;
        font-size:24px;
        font-weight:lighter;
        text-decoration:none;
      }

      .tdhover {
        background-color: #FFF;
      }

      .tdhover:hover {
        background-color: #666;
      }

      .flexslider {
  width: 100%;
  margin: auto;
  position: relative;
  box-sizing: border-box;
  z-index: 1;

  aspect-ratio: 5 / 2; /* Adjust to your actual slide proportions (e.g., 1500x600 → 5:2) */
  overflow: hidden;
}
.flexslider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
      .flexslider .slides li { position: relative; }
      
      .caption {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 7px 15px;
        max-width: 60%;
        border-radius: 5px;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.4s ease;
      }
      
      .flex-active-slide .caption {
        opacity: 1 !important;
      }
      
      .caption h2 { margin: 0 0 2px; font-size: 18px; color: #fff;}
      .caption p { margin: 0; font-size: 12px; color: #fff; }
      
      #slide-progress { width: 100%; height: 5px; background: #e0e0e0; margin: 0px auto; border-radius: 3px; overflow: hidden; }
      #slide-progress-bar { height: 100%; width: 0%; background: #006699; transition: width linear; }

      #slide-counter { text-align: center; font-weight: bold; margin: 10px; display:none; }

      .thumbnails {display: flex; justify-content: center; gap: 10px 8px; flex-wrap: wrap; text-align: center; margin: 15px 0; }
      .thumbnails img { width: 80px; height:30px;   cursor: pointer; border: 3px solid transparent; background: #D3D3D3; }
      .thumbnails img.active { border-color: #009933;  transform: scaleY(1.2);
        transition: transform 0.3s ease;
        z-index: 1;  border-radius: 5px;}
      
      /* Extra transition effects */
      @keyframes fx-verticalIn { from { transform: translateY(100%) } to { transform: translateY(0) } }
      @keyframes fx-zoomIn    { from { transform: scale(1.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }
      @keyframes fx-ken       { from { transform: scale(1.15) translate(-3%,-3%) } to { transform: scale(1) translate(0,0) } }
      @keyframes fx-flip      { from { transform: rotateY(90deg); opacity: 0 } to { transform: rotateY(0); opacity: 1 } }
      @keyframes fx-cube      { from { transform: rotateY(-90deg) translateZ(200px) } to { transform: rotateY(0) translateZ(0) } }
      @keyframes fx-blur      { from { filter: blur(12px); opacity: 0 } to { filter: blur(0); opacity: 1 } }
      
      /* --- slide‑overlay (panel still fades underneath) --- */
      @keyframes fx-slideOverlay {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
      }

      .fx-vertical .flex-active-slide { animation: fx-verticalIn 0.7s ease forwards }
      .fx-zoom .flex-active-slide { animation: fx-zoomIn 0.8s ease forwards }
      .fx-ken .flex-active-slide img { animation: fx-ken 7s ease forwards }
      .fx-flip .flex-active-slide { perspective: 800px }
      .fx-flip .flex-active-slide img { animation: fx-flip 0.8s ease forwards; transform-origin: center }
      .fx-cube .flex-active-slide { perspective: 800px }
      .fx-cube .flex-active-slide img { animation: fx-cube 0.8s ease forwards; transform-origin: left }
      .fx-blur .flex-active-slide img { animation: fx-blur 0.7s ease forwards }
    
      /* Elegant circular navigation arrows */
      .flex-direction-nav a {
        width: 30px;
        height: 30px;
        background:rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        color: #fff !important;
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        transition: all 0.3s ease;
        opacity: 1;
        padding: 0px 1px 3px 1px;
      }

      .flex-direction-nav a.flex-prev {
        left: -4px;
        text-align: center;
        color: #fff;
      }

      .flex-direction-nav a.flex-next {
        right: -4px;
        text-align: center;
        color: #fff;
      }

      .flex-direction-nav a:hover {
        background: #009933;
        color: #fff !important;
        transform: translateY(-50%) scale(1.1);
      }

      /* Custom arrow characters */
      .flex-direction-nav a:before {
        font-family: Arial, sans-serif;
      }

      .flex-direction-nav a.flex-prev:before {
        content: "‹";
      }

      .flex-direction-nav a.flex-next:before {
        content: "›";
      }

      /* apply animation only to the active <li> when wrapper has fx-slide */
      .fx-slide .flex-active-slide {
        animation: fx-slideOverlay 0.8s ease forwards;
      }

      /* Hover effect for SHOP button */
      .shop-button:hover {
        color: blue;  
        background:linear-gradient(to bottom, #24cb6f 50%,  #48d587 50% ) !important;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25),
                    0 2px 0 #1e7e3a,
                    0 0 15px rgba(71, 199, 95, 0.5) !important;
        transform: translateY(-1px);
      }
      
      .wrapper {
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
           
        }
      
      /* ========== FIXED HEADER LAYOUT ========== */
      .header-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        background: url(/images/bg_top_chain.png) top center no-repeat;
        padding: 0px 15px;
        position: relative;
        min-height: 120px;
        flex-wrap: nowrap;
      }

      .logo-section, .webreps-section {
        flex: 0 0 auto;
        z-index: 2;
        align-items: flex-end;
        margin: 18px 0;
      }

      .logo-section img, .webreps-section img {
        max-width: 190px;
        height: auto;
        display: block;
        align-items: flex-end;
      }

      /* FIXED NAVIGATION POSITIONING */
      .nav-section {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: baseline; 
        z-index: 2;
      }

      .MenuBarHorizontal {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
      }

      .MenuBarHorizontal li {
        display: inline-block;
      }

      .MenuBarHorizontal li a {
        text-decoration: none;
        color: #333;
        padding: 5px 10px;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      /* SHOP button responsive fixes */
      .shop-button {
        display: inline-block;
        background: linear-gradient(to bottom, #48d587 50%, #24cb6f 50%) !important;
        color: white !important;
        font-weight: 570 !important;
        font-size: 17px !important;
        border: 2px solid #1d9b52 !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35),
                    0 2px 0 #1d9b52,
                    0 0 12px rgba(71, 199, 95, 0.45) !important;
        transition: all 0.3s ease;
        letter-spacing: 1px;
        border-radius: 12px;
        padding: 3px 16px 1px 16px !important;
        text-decoration: none !important;
        text-align: center;
        white-space: nowrap;
      }

      /* Mobile menu toggle button */
      .mobile-menu-toggle {
        display: none;
        background: #009933;
        color: white;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 0px;
        width: 100%;
      }

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

      /* Make tables responsive */
      .responsive-table {
        width: 100%;
        overflow-x: auto;
      }

      /* Main container adjustments */
      .main-wrapper {
        margin: 0 auto;
        width: 100%;
        
        
      }

      /* Content layout */
      .content-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
      }

      .left-sidebar {
        flex: 0 0 122px;
        
      }

      .main-content {
        flex: 1;   /* allow it to shrink but not wider than 1060px */
        max-width: 100%;  /* limit width */
        margin: 0 auto;     /* centers the div horizontally */
        order: 2;
      }

      .right-sidebar {
        flex: 0 0 122px;
        order: 3;
      }

      /* Product grid */
      .product-grid {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
      }

      .product-column {
        flex: 1 1 46%;
        min-width: 280px;
        max-width: 100%;
      }

      .product-table {
        width: 100%;
        border-collapse: collapse;
        background-color: #FFF;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-bottom: 10px;
      }

      .product-table td {
        text-align: center;
        padding: 5px;
        width: 33.33%;
      }

      /* Footer */
      .footer-note {
        position: relative;
       /* width: calc(100% - 4px);
        margin: 0 2px;*/
        width: 100%;
        background-color: #FFF;
        box-shadow: 
          0 5px 10px -3px rgba(0,0,0,0.8),
          0 -5px 10px -3px rgba(0,0,0,0.8),
          5px 0 10px -3px rgba(0,0,0,0.8),
          -5px 0 10px -3px rgba(0,0,0,0.8);
        margin-top: 40px;
        padding: 20px 0;
        text-align: center;
        order: 4;
      }
      
      .main-layout {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 10px;
        margin: -45px auto;
        justify-content: center;
        box-sizing: border-box;
        padding: 15px 15px;
      }
    
     #main-container{
         
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
         padding: 0 15px;
         margin: 0 auto;
     }

    

       /* Responsive adjustments */
      @media (max-width: 1200px) {
        body {
          /*margin: 5px;*/
        }
        
      }
        
        
      /*}*/

      /* Tablet (751px–992px) */
      @media (max-width: 992px) and (min-width: 751px) {
        .header-container {
          justify-content: space-between;
          gap: 0px;
        }
        
        .click-here-content {
            display:none;
        }

        .logo-section, .webreps-section {
          flex: 0 0 auto;
        }

        .logo-section img,
        .webreps-section img {
          width: 170px;
          height: auto;
        }

        .nav-section {
          order: 0;
          flex: 1;
        }

        .nav-section ul {
          gap: 1px;
        }

        .content-container {
          flex-direction: column;
        }

        .left-sidebar,
        .right-sidebar {
          flex: 0 0 122px;
          max-width: 122px;
        }

        .main-content {
          order: 2;
        }

        .product-column {
          flex: 1 1 100%;
        }
      }

      /* Mobile (≤768px) */
      @media (max-width: 850px) {
        /* Show toggle button */
        .mobile-menu-toggle {
          display: block;
          width: 100%;
          background: #009933;
          color: white;
          text-align: center;
          padding: 12px 0;
          cursor: pointer;
          font-weight: bold;
          border: none;
          margin: 0;
          font-size: 16px;
          border-radius: 0;
          position: relative;
          z-index: 1001;
        }

        /* Hide menu by default */
        #MenuBar1 {
          display: none !important;
          width: 100%;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 1000;
          
        }

        /* Show menu only when toggled - PROPER DROPDOWN BOX */
        #MenuBar1.show {
          display: flex !important;
          flex-direction: column;
          width: 100%;
          margin: 0;
          padding: 50px 30px;
          gap: 10px;
          text-align: center;
          background: #444;
          border: 2px solid #009933;
          border-top: none;
          box-shadow: 0 4px 15px rgba(0,0,0,0.15);
          box-sizing: border-box;
          position: absolute;
          top: 0;
          left: 0;
        }

        #MenuBar1.show li {
          display: block;
          margin: 0;
          width: 100%;
          
        }

        #MenuBar1.show li:last-child {
          border-bottom: none;
        }

        #MenuBar1.show li a {
          display: block;
          background: #eee;
          padding: 15px 20px;
          text-decoration: none;
          color: #333;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 15px;
          width: 100%;
          box-sizing: border-box;
          transition: all 0.3s ease;
          
        }

        #MenuBar1.show li a:hover {
          background-color: #009933;
          color: #fff;
        }

        /* Special styling for SHOP button in mobile */
        #MenuBar1.show li a.shop-button {
          background: linear-gradient(to bottom, #48d587 50%, #24cb6f 50%) !important;
          color: white !important;
          font-weight: 600 !important;
          border: none !important;
          margin: 0 !important;
          border-radius: 10px !important;
          box-shadow: none !important;
          padding: 15px 20px !important;
          font-size: 15px !important;
        }

        #MenuBar1.show li a.shop-button:hover {
          background: linear-gradient(to bottom, #3bc177 50%, #1fb85f 50%) !important;
          color: white !important;
        }

        .header-container {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          position: relative;
        }

        .logo-section, .webreps-section {
          flex: 0 0 auto;
          text-align: center;
        }

        .logo-section img, .webreps-section img {
          width: 180px;
          height: auto;
        }

        .nav-section {
          order: 3;
          flex: 0 0 100%;
          padding-top: 0;
          margin-bottom: 5px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          position: relative;
        }
        
        .caption {
          position: relative;
          bottom: auto;
          left: auto;
          max-width: 100%;
          margin: 10px;
        }

        .thumbnails img {
          width: 60px;
          height: 25px;
        }

        .product-grid {
          width: 100%;
        }

        .product-table td {
          padding: 3px;
        }

        .product-table img {
          max-width: 120px;
          height: auto;
        }

        .left-sidebar,
        .right-sidebar {
          flex: 0 0 100%;
        }
      }

     /* Small mobile (≤630px) */
      @media (max-width: 630px) {
        .header-container {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        
        .logo-section, .webreps-section {
          flex: 0 0 auto;
          text-align: center;
        }

        .logo-section img,
        .webreps-section img {
          width: 160px;
          margin-top:5px;
          height: auto;
        }
        
        .nav-section {
          order: 3;
          flex: 0 0 100%;
          padding-top: 10px;
          margin-top:0px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
        }

        #MenuBar1.show li a {
          padding: 12px 15px;
          font-size: 14px;
        }

        .thumbnails img {
          width: 40px;
          height: 20px;
          margin: 1px 2px;
        }

        .flex-direction-nav a {
          width: 25px;
          height: 25px;
          line-height: 25px;
          font-size: 16px;
        }

        .shop-button {
          font-size: 14px !important;
          padding: 4px 10px !important;
        }
      }

     /* Extra small mobile (≤400px) */
      @media (max-width: 400px) {
        .logo-section, .webreps-section {
          flex: 0 0 auto;
        }
        
        .logo-section img, .webreps-section img {
          width: 130px;
          height: auto;
          margin-top: 12px;
        }
        
        .shop-button {
          font-size: 12px !important;
          padding: 3px 8px !important;
        }
        
        .product-column img{
            
            width: 80px;
        }
      }

      /* Sidebar toggle buttons */
      .menu-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: -20px 0px 20px 0px;
        padding: 15px;
        gap: 20px;
      }

      .sidebar-toggle {
        background: #069;
        color: #fff;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 15px;
        border-radius: 4px;
        text-align: center;
      }

      /* Base: hide on mobile */
      .sidebar-collapsible {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 250px;
        background: #fff;
        box-shadow: 0 0 15px rgba(0,0,0,0.3);
        overflow-y: auto;
        z-index: 1500;
        transition: transform 0.3s ease;
      }

      .left-sidebar,
      .right-sidebar {
        flex: 0 0 122px;
        background: transparent;
        position: static;
        transform: none;
        box-shadow: none;
        transition: none;
      }

      .sidebar-toggle {
        display: none;
      }
      
      

       /* Mobile/Tablet (≤992px) */
      @media (max-width: 992px) {
        .sidebar-toggle {
          display: block;
          background: #069;
          color: #fff;
          margin: 8px 0;
          cursor: pointer;
          font-size: 15px;
          border-radius: 4px;
          text-align: center;
        }

        .left-sidebar,
        .right-sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          width: 250px;
          background: #fff;
          box-shadow: 0 0 15px rgba(0,0,0,0.3);
          overflow-y: auto;
          z-index: 1500;
          transition: transform 0.3s ease;
        }

        .left-sidebar {
          left: 0;
          transform: translateX(-100%);
        }

        .right-sidebar {
          right: 5px;
          transform: translateX(100%);
        }

        .left-sidebar.show {
          transform: translateX(0);
        }

        .right-sidebar.show {
          transform: translateX(0);
        }

        .sidebar-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 3px;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.5);
          z-index: 1400;
        }

        .sidebar-overlay.active {
          display: block;
        }

        .sidebar-collapsible {
          display: none;
        }

        .sidebar-collapsible.show {
          display: flex;
           background: rgba(255, 255, 255, 0.7);
          padding: 150px 15px 15px 15px;
          width: 150px;
         
           min-height: 200px;         /* let it expand naturally */
           max-height: 100%; 
          border-radius: 15px;   /* round top-right corner */
          border-radius: 15px;
          align-items: center;
          justify-content: center;
          overflow-y: auto;
        }
      }