/* 1. Theme Configuration & Variables */
:root {
    /* Brand Colors */
    --brand-blue: #0A4D68;
    --brand-cyan: #088395;
    --brand-teal: #05BFDB;
    --brand-dark: #001C30;
    --brand-light: #EBF4F6;
    --color-brand-blue: #0A4D68;
    --color-brand-cyan: #088395;
    --color-brand-teal: #05BFDB;
    --color-brand-lightBg: #EBF4F6;
    --color-brand-dark: #001C30;
    --color-brand-gray: #64748B;
    --color-brand-bblue:#1d4ed8;
    --color-brand-ggreen:#0f766e;
/* 
    1.Laboratory glassware #0065b0
    2.Qaurtz ware #e3161a
    3.Microgen hygiene #d56c04
    4.Micro Slides & Cover Glasses #7c4391
    5.Dairy Instruments #009441
    6.PlasticWare Products #5b6eac
    7.Filter Papers #e73873
    8.MISCELLANEOUS LABWARE #3d3f02
    9.Pathology Items #0a6a73 
    10.Nexus Metalware #87fc08 */


    /* Default Dark Mode Variables */
    /* --bg-color: #001C30;
    --text-color: #F8FAFC;
    --brand-gray: #94a3b8;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1); */
}

/* Base Styles */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}
   .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }
        .glass-nav {
            background: rgba(0, 28, 48, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        @keyframes infiniteScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-220px * 9)); }
        }
        .brand-track {
            display: flex;
            width: calc(220px * 18);
            animation: infiniteScroll 25s linear infinite;
        }
        .brand-track:hover {
            animation-play-state: paused;
        }
        html {
            scroll-behavior: smooth;
        }
         .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
/* Reusable Components */
.glass-nav {
    background: rgba(0, 28, 48, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}
  [x-cloak] {
    display: none !important;
}
    .product-image {
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .product-image:hover {
            transform: scale(1.05);
        }
/* 
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
} */
.feature-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all 0.3s var(--ease-smooth);
}

.hero-image-frame {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}
.border-yellow-400{
    --tw-border-opacity: 1;
    border-color: rgb(249 197 21 / var(--tw-border-opacity, 1));
}
.text-yellow-400{
    --tw-text-opacity: 1;
    color: rgb(249 197 21 / var(--tw-text-opacity, 1));
}
/* 4. Utilities */
.nav-link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-teal);
    transition: width 0.3s var(--ease-smooth);
}
.nav-link-underline:hover::after { width: 100%; }



/* Enhanced Hero Background */
/* Add these to your style.css */
.hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Use your brand variables for the gradient */
    background: radial-gradient(circle at top right, rgba(8, 131, 149, 0.15), transparent 50%),
                radial-gradient(circle at bottom left, rgba(10, 77, 104, 0.2), transparent 50%);
}

/* Temporary Debugging */
header {
    display: block !important;
    background: #001C30 !important; /* Force a dark background */
}
header h1, header p {
    color: #ffffff !important;      /* Force white text */
}
/* Debug: Force visibility */
header, section {
    display: block !important;
    opacity: 1 !important;
}
.feature-box:hover {
    background: rgba(var(--brand-teal-rgb), 0.05);
    transform: translateY(-5px);
}

/* 1. Laboratory Glassware */
.cat-glassware {
    color: #0065b0;
    background-color: #0065b020;
}
.cat-glassware:hover {
    background-color: #0065b0;
    color: #fff;
}

/* 2. Quartz Ware */
.cat-quartz {
    color: #e3161a;
    background-color: #e3161a20;
}
.cat-quartz:hover {
    background-color: #e3161a;
    color: #fff;
}

/* 3. Microgen Hygiene */
.cat-hygiene {
    color: #d56c04;
    background-color: #d56c0420;
}
.cat-hygiene:hover {
    background-color: #d56c04;
    color: #fff;
}

/* 4. Micro Slides & Cover Glasses */
.cat-microslides {
    color: #7c4391;
    background-color: #7c439120;
}
.cat-microslides:hover {
    background-color: #7c4391;
    color: #fff;
}

/* 5. Dairy Instruments */
.cat-dairy {
    color: #009441;
    background-color: #00944120;
}
.cat-dairy:hover {
    background-color: #009441;
    color: #fff;
}

/* 6. PlasticWare Products */
.cat-plasticware {
    color: #5b6eac;
    background-color: #5b6eac20;
}
.cat-plasticware:hover {
    background-color: #5b6eac;
    color: #fff;
}

/* 7. Filter Papers */
.cat-filter {
    color: #e73873;
    background-color: #e7387320;
}
.cat-filter:hover {
    background-color: #e73873;
    color: #fff;
}

/* 8. Miscellaneous Labware */
.cat-misc-labware {
    color: #3d3f02;
    background-color: #3d3f0220;
}
.cat-misc-labware:hover {
    background-color: #3d3f02;
    color: #fff;
}

/* 9. Pathology Items */
.cat-pathology {
    color: #0a6a73;
    background-color: #0a6a7320;
}
.cat-pathology:hover {
    background-color: #0a6a73;
    color: #fff;
}

/* 10. Nexus Metalware */
.cat-metalware {
    color: #131bb1;
    background-color: #131bb16c;
}
.cat-metalware:hover {
    background-color: #131bb1;
    color: #fff;
}
.cat-card.glassware:hover .cat-title { color: #0065b0; }
.cat-card.quartz:hover .cat-title { color: #e3161a; }
.cat-card.hygiene:hover .cat-title { color: #d56c04; }
.cat-card.microslides:hover .cat-title { color: #7c4391; }
.cat-card.dairy:hover .cat-title { color: #009441; }
.cat-card.plasticware:hover .cat-title { color: #5b6eac; }
.cat-card.filter:hover .cat-title { color: #e73873; }
.cat-card.misc-labware:hover .cat-title { color: #3d3f02; }
.cat-card.pathology:hover .cat-title { color: #0a6a73; }
.cat-card.metalware:hover .cat-title { color: #131bb1; }
.group-hover\:bg-cat-glassware {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #0065b0;
    }
  }
}

/* 2. Quartz Ware — #e3161a */
.group-hover\:bg-cat-quartz {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #e3161a;
    }
  }
}

/* 3. Microgen Hygiene — #d56c04 */
.group-hover\:bg-cat-hygiene {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #d56c04;
    }
  }
}

/* 4. Micro Slides & Cover Glasses — #7c4391 */
.group-hover\:bg-cat-microslides {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #7c4391;
    }
  }
}

/* 5. Dairy Instruments — #009441 */
.group-hover\:bg-cat-dairy {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #009441;
    }
  }
}

/* 6. PlasticWare Products — #5b6eac */
.group-hover\:bg-cat-plasticware {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #5b6eac;
    }
  }
}

/* 7. Filter Papers — #e73873 */
.group-hover\:bg-cat-filter {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #e73873;
    }
  }
}

/* 8. Miscellaneous Labware — #3d3f02 */
.group-hover\:bg-cat-misc-labware {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #3d3f02;
    }
  }
}

/* 9. Pathology Items — #0a6a73 */
.group-hover\:bg-cat-pathology {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #0a6a73;
    }
  }
}

/* 10. Nexus Metalware — #87fc08 */
.group-hover\:bg-cat-metalware {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      background-color: #131bb1;
    }
  }
}
/* 1. Laboratory Glassware - #0065b0 */
.bg-cat-glassware { background-color: #0065b01a; }
.text-cat-glassware { color: #0065b0; }
.border-cat-glassware { border-color: #0065b04d; }

/* 2. Quartz Ware - #e3161a */
.bg-cat-quartz { background-color: #e3161a1a; }
.text-cat-quartz { color: #e3161a; }
.border-cat-quartz { border-color: #e3161a4d; }

/* 3. Microgen Hygiene - #d56c04 */
.bg-cat-hygiene { background-color: #d56c041a; }
.text-cat-hygiene { color: #d56c04; }
.border-cat-hygiene { border-color: #d56c044d; }

/* 4. Micro Slides & Cover Glasses - #7c4391 */
.bg-cat-microslides { background-color: #7c43911a; }
.text-cat-microslides { color: #7c4391; }
.border-cat-microslides { border-color: #7c43914d; }

/* 5. Dairy Instruments - #009441 */
.bg-cat-dairy { background-color: #0094411a; }
.text-cat-dairy { color: #009441; }
.border-cat-dairy { border-color: #0094414d; }

/* 6. PlasticWare Products - #5b6eac */
.bg-cat-plasticware { background-color: #5b6eac1a; }
.text-cat-plasticware { color: #5b6eac; }
.border-cat-plasticware { border-color: #5b6eac4d; }

/* 7. Filter Papers - #e73873 */
.bg-cat-filter { background-color: #e738731a; }
.text-cat-filter { color: #e73873; }
.border-cat-filter { border-color: #e738734d; }

/* 8. Miscellaneous Labware - #3d3f02 */
.bg-cat-misc-labware { background-color: #3d3f021a; }
.text-cat-misc-labware { color: #3d3f02; }
.border-cat-misc-labware { border-color: #3d3f024d; }

/* 9. Pathology Items - #0a6a73 */
.bg-cat-pathology { background-color: #0a6a731a; }
.text-cat-pathology { color: #0a6a73; }
.border-cat-pathology { border-color: #0a6a734d; }

/* 10. Nexus Metalware - #87fc08 */
.bg-cat-metalware { background-color: #131bb128; }
.text-cat-metalware { color: #131bb1; }
.border-cat-metalware { border-color: #131bb14e; }

.max-w-7xl {
  max-width: 90rem !important;
}