/* Hero Banner Section */
     .hero-banner {
         position: relative;
         min-height: 100%;
         display: flex;
         align-items: center;
         background-image: url(../img/banner2.png);
         background-size: 100% 100%;
         background-position: center;
         color: #ffffff;
         padding: 0px 0 80px 0;
         overflow: hidden;
         background-color: #010717;
         flex-direction: column;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
     }

     /* Tech Background Grid & DNA Elements simulated with CSS */
     .hero-banner::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(to bottom, rgba(1, 7, 23, 0.2) 0%,
                 /* #010717 light */
                 rgba(1, 7, 23, 0.4) 40%,
                 /* mid tone */
                 rgb(0 0 0 / 46%) 70%,
                 /* darker blend */
                 rgba(0, 0, 0, 0.95) 100%
                 /* full black bottom */
             );
         mask-image: radial-gradient(ellipse at 50% 50%, #010717 40%, transparent 80%);
         -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #010717 40%, #000000bf 80%);
         z-index: 1;
         animation: pulseGrid 8s ease-in-out infinite alternate;
     }

     /* Abstract glowing particles or blurred spots */
     .glow-sphere {
         position: absolute;
         border-radius: 50%;
         background: radial-gradient(circle, rgb(0 210 255 / 35%) 0%, transparent 70%);
         filter: blur(40px);
         z-index: 1;
         animation: floatGlow 12s infinite alternate ease-in-out;
     }

     .glow-1 {
         width: 700px;
         height: 700px;
         top: 6%;
         left: -300px;
     }

     .glow-2 {
         width: 500px;
         height: 500px;
         bottom: -150px;
         right: -50px;
         background: radial-gradient(circle, rgba(112, 0, 255, 0.12) 0%, transparent 70%);
     }

     .container {
         position: relative;
         z-index: 2;
     }

     /* Typography & Left Content */
     .sub-title {
         font-family: 'Orbitron', sans-serif;
         font-size: 11px;
         letter-spacing: 6px;
         color: #00AFFF;
         text-transform: uppercase;
         margin-bottom: 10px;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out forwards;
     }

     .main-title {
         font-family: 'Orbitron', sans-serif;
         font-weight: 900;
         font-size: clamp(2.5rem, 5vw, 4.5rem);
         line-height: 1.1;
         text-transform: uppercase;
         letter-spacing: 2px;
         margin-bottom: 25px;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.2s forwards;
     }

     .main-title span.white-text {
         color: #B7D2E6;
         display: block;
         text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
     }

     .main-title span.gradient-text {
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         display: block;
         text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
     }

     .hero-desc {
         font-family: 'Rajdhani', sans-serif;
         font-size: 18px;
         color: var(--text-gray);
         max-width: 540px;
         line-height: 1.6;
         margin-bottom: 30px;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.4s forwards;
     }

     /* Buttons and Interactive Elements */
     .btn-wrapper {
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.6s forwards;
     }



     /* Secondary Outline Button */
     .btn-outline-custom {
         font-family: 'Orbitron', sans-serif;
         font-size: 13px;
         font-weight: 700;
         letter-spacing: 2px;
         padding: 15px 35px;
         background: transparent;
         color: var(--primary-blue);
         border: 1px solid rgba(0, 210, 255, 0.4);
         border-radius: 4px;
         transition: all 0.4s ease;
         text-transform: uppercase;
         width: fit-content;
     }

     .btn-outline-custom:hover {
         background: rgba(0, 210, 255, 0.08);
         border-color: var(--electric-cyan);
         color: #fff;
         box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
     }

     /* Right Side Vials Visuals (Fully Animated via CSS/SVG) */
     .image-container {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         opacity: 0;
         animation: fadeInRight 1s ease-out 0.3s forwards;
     }



     /* Responsive Tweaks */
     @media (max-width: 991.98px) {
         .hero-banner {
             text-align: center;
             padding: 60px 0;
         }

         .hero-desc {
             margin: 0 auto 35px auto;
         }

         .image-container {
             margin-top: 50px;
         }

         .vial-wrapper {
             margin: 0 auto;
         }
     }

     /* second section */
     .pt-feature-strip {
         background: #050b18;
     }

     .pt-feature-wrapper {
         background: linear-gradient(145deg, #061024, #040816);
         border: 1px solid rgba(0, 170, 255, 0.35);
         box-shadow: 0 0 35px rgb(0 170 255 / 28%);
         padding: 25px;
         border-radius: 4px;
         margin-top: 20px;
     }

     .pt-feature-box {
         display: flex;
         align-items: center;
         gap: 15px;
         padding: 15px;
         border-radius: 12px;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }


     .pt-feature-box:hover {
         transform: translateY(-5px);
         box-shadow: 0 0 20px rgba(0, 170, 255, 0.25);
     }

     .pt-feature-icon {
         width: 55px;
         height: 55px;
         object-fit: contain;
         filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.6));
     }

     .pt-feature-content h5 {
         margin: 0;
         font-size: 30px;
         color: #B0F8FF;
         font-weight: 700;
         font-family: var(--heading-black);
         font-weight: 900;
     }

     .pt-feature-content p {
         margin: 0;
         font-size: 14px;
         color: #89A2B5;
         letter-spacing: 2px;
         text-transform: uppercase;
     }

     /* product section */
     /* Background & Slider Layout Wrap */
     .product-slider-wrapper {
         background-color: #030712;
         /* Deep dark background */
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .product-slider-container {
         width: 100%;
         max-width: 1200px;
         padding: 20px 0;
     }

     /* Card Styling */
     .cyber-product-card {
         background: linear-gradient(135deg, rgba(10, 25, 47, 0.5) 0%, rgba(2, 12, 27, 0.8) 100%);
         border: 1px solid rgba(0, 180, 216, 0.3);
         border-radius: 6px;
         padding: 30px 24px;
         width: 100%;
         transition: all 0.3s ease;
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
         margin: 10px;
         height: 100%;
     }

     .product-slider-wrapper .slider-item.slick-slide {
         margin: 10px 10px;
     }

     .cyber-product-card:hover {
         border-color: rgba(0, 180, 216, 0.8);
         box-shadow: 0 0 25px rgba(0, 180, 216, 0.2);
     }

     /* Image styling */
     .cyber-img-wrapper img {
         max-height: 240px;
         object-fit: scale-down;
         filter: drop-shadow(0 0 15px rgba(0, 180, 216, 0.4));
     }

     /* Typography styles */
     .cyber-title {
         font-family: 'Orbitron', sans-serif;
         font-size: 1.15rem;
         font-weight: 600;
         letter-spacing: 0.5px;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-overflow: ellipsis;
         line-height: 1.5rem;
         height: 59px;
     }

     /* Sort By label styling */
     .sort-heading {
         font-size: 14px;
         letter-spacing: 1px;
         color: #a5b4fc;
         /* Light premium purple/blue color */
     }

     /* Custom Styled Border Select Box */
     .custom-sort-select {
         width: 200px;
         background-color: #030a21;
         /* Dark background code ke color match ke liye */
         color: #ffffff;
         border: 1px solid #00f0ff;
         /* Neon Cyan border */
         border-radius: 4px;
         padding: 6px 35px 6px 15px;
         font-size: 14px;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     /* Hover aur Focus state par border change effect */
     .custom-sort-select:focus,
     .custom-sort-select:hover {
         border-color: #ff007f;
         /* Neon Pink glow hover par */
         box-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
         outline: none;
         background-color: #030a21;
         color: #ffffff;
     }

     /* Dropdown ke andar ke options ka background black/dark rakhne ke liye */
     .custom-sort-select option {
         background-color: #030a21;
         color: #ffffff;
     }

     .cyber-meta-text {
         color: #00b4d8 !important;
         font-weight: 500;
     }

     /* Spec Boxes (Purity & Grade) */
     .spec-box {
         background: rgba(4, 15, 31, 0.7);
         border: 1px solid rgba(0, 180, 216, 0.15);
         border-radius: 4px;
         padding: 6px 10px;
     }

     .spec-box .label {
         display: block;
         font-size: 11px;
         color: #7A93A6;
         letter-spacing: 1px;
         font-weight: 700;
         font-family: var(--para-font);
     }

     .spec-box .value {
         display: block;
         font-size: 13px;
         color: #90E9FF;
         font-weight: 500;
         margin-top: 2px;
         font-family: var(--heading-bold);
         font-weight: 700;
     }

     /* Price Glow */
     .price-tag {
         font-size: 29px;
         color: #00f0ff;
         font-weight: 700;
         text-shadow: 0 0 10px rgb(0 240 255 / 70%);
         font-family: var(--heading-black);
         font-weight: 900;
     }

     .cyber-marquee-bar.py-3 {
         height: 56px !important;
     }

     /* Container jo content ko center karega aur font smooth rakhega */
     .hexagon-container {
         display: inline-flex;
         flex-direction: column;
         align-items: center;
         background-color: #020215;
         padding: 20px 30px;
         font-family: 'Orbitron', sans-serif;
         color: #fff;
         clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
         background: #00103d;
         width: 100%;
         height: 100%;
     }

     /* Hexagon Shape using clip-path */
     .hexagon {
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
         transition: transform 0.3s ease;

     }

     /* Hover karne par thoda scale aur upar uthega */
     .hexagon:hover {
         transform: translateY(-5px);
     }

     /* Inner hexagon taaki border thickness dikhe aur background dark ho sake */
     .hex-inner {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .overlay-imageqq {
         background-image: url(../img/glowwrapper11.png);
         background-size: 100% 100%;
         background-position: center;
         background-repeat: no-repeat;
         position: absolute;
         z-index: 11;
         width: 100%;
         height: 100%;
         top: 10px;
     }

     /* Hexagon ke andar ki image */
     .hex-inner img {
         width: 70%;
         height: auto;
         object-fit: contain;
         filter: drop-shadow(0 0 10px #ff007f);
     }

     /* Text aur Arrow ki styling */
     .hex-content {
         text-align: center;
         margin-top: 15px;
     }

     .hex-content h3 {
         font-size: 14px;
         letter-spacing: 2px;
         margin: 0 0 8px 0;
         text-transform: uppercase;
         color: #a5b4fc;
         /* Light blue/purple mix color */
     }

     .arrow {
         font-size: 14px;
         color: #00f0ff;
         /* Neon cyan color arrow ke liye */
         cursor: pointer;
         animation: bounce 2s infinite;
     }

     /* Arrow ka halka sa upar niche moving effect */
     @keyframes bounce {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(3px);
         }
     }

     /* 1. Slick ke default unstyled buttons ko force hide karein */
     .bs-products-slider .slick-prev,
     .bs-products-slider .slick-next {
         display: none !important;
     }

     /* 2. Container setup to handle absolute child positions */
     .product-slider-wrapper {
         position: relative;
         width: 100%;
     }

     /* 3. Custom Glow Arrows Layout & Design */
     .bs-prev-arrow,
     .bs-next-arrow {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background: rgba(2, 12, 27, 0.9);
         /* Dark background matching your image */
         border: 1px solid rgba(0, 180, 216, 0.5);
         /* Blue/Cyan border outline */
         color: #00b4d8;
         width: 45px;
         height: 45px;
         border-radius: 50%;
         display: flex !important;
         /* Force displays layout */
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 100;
         transition: all 0.2s ease-in-out;
         padding: 0;
     }

     /* Position arrows floating on left and right sides */
     .bs-prev-arrow {
         left: -20px;
     }

     .bs-next-arrow {
         right: -20px;
     }

     /* Futuristic Cyberpunk glow on hover */
     .bs-prev-arrow:hover,
     .bs-next-arrow:hover {
         background: #00b4d8;
         color: #020c1b;
         border-color: #00f0ff;
         box-shadow: 0 0 15px rgba(0, 240, 255, 0.7);
     }

     .bs-prev-arrow i,
     .bs-next-arrow i {
         font-size: 16px;
     }

     /*advantage css */
     .advantage-box {
         background: linear-gradient(135deg, rgba(10, 25, 47, 0.5) 0%, rgba(2, 12, 27, 0.8) 100%);
         border: 1px solid rgba(0, 180, 216, 0.3);
         border-radius: 6px;
         padding: 20px 20px;
         width: 100%;
         transition: all 0.3s ease;
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
         margin: 10px;
         height: 100%;
     }

     .advantage-box img {
         background: linear-gradient(135deg, rgba(10, 25, 47, 0.5) 0%, rgba(2, 12, 27, 0.8) 100%);
         border: 1px solid rgba(0, 180, 216, 0.3);
         margin-bottom: 20px;
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
         filter: drop-shadow(0 0 12px rgba(0, 175, 255, 0.7)) drop-shadow(0 0 25px rgba(0, 175, 255, 0.4));
     }

     .advantage-box h5 {
         font-size: 16px;
     }

     .advantage-box p {
         font-size: 13px;
     }

     section.cyber-process-section {
         padding: 100px 0;
     }

     /* science css */
     .cyber-dna-bg {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: url('../img/insignes-img1.png');
         background-size: cover;
         background-position: center;
         opacity: 0.15;
         pointer-events: none;
         z-index: 1;
         background-repeat: no-repeat;
     }


     .text-glow-blue {
         background: linear-gradient(88deg, #00f2ff, #00f2ff, #0055BA);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
     }

     /* Left Call-To-Action Button Custom Styling */
     .cyber-action-btn {
         background: #0077b6 !important;
         color: #ffffff !important;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: 1.5px;
         border: 1px solid #00b4d8 !important;
         border-radius: 4px;
         box-shadow: 0 0 20px rgba(0, 180, 216, 0.6);
         transition: all 0.3s ease;
     }

     /* Process Rows Styling matching exact wireframe boxes */
     .cyber-process-wrapper .process-step-row {
         background: rgba(2, 12, 27, 0.5);
         border: 1px solid rgba(0, 180, 216, 0.2);
         border-radius: 4px;
         padding: 22px 30px;
         transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
         opacity: 0;
         /* Hidden initially for GSAP staggered entry */
     }

     /* Row elements configuration specs */
     .cyber-process-wrapper .step-number {
         font-size: 28px;
         font-weight: 700;
         width: 70px;
         flex-shrink: 0;
         font-family: var(--heading-black);
         font-weight: 900;
     }

     .cyber-process-wrapper .step-title {
         font-size: 16px;
         letter-spacing: 1.5px;
         font-weight: 600;
         margin-bottom: 3px !important;
     }

     .cyber-process-wrapper .small-desc {
         font-size: 13px;
         letter-spacing: 0.5px;
     }


     /* --- Marquee Text Tweak rules --- */
     .slick-marquee-wrapper .marquee-item {
         padding: 0 40px;
         outline: none !important;
     }

     .slick-marquee-wrapper .badge-text {
         color: rgba(255, 255, 255, 0.7);
         font-size: 12px;
         font-weight: 600;
         letter-spacing: 1.5px;
     }


     .text-glow-blue {
         color: #00b4d8;
         text-shadow: 0 0 8px rgba(0, 180, 216, 0.4);
     }

     .cyber-line-separator {
         width: 60px;
         height: 2px;
         background: linear-gradient(90deg, transparent, #00f0ff, transparent);
         box-shadow: 0 0 6px #00f0ff;
     }

     /* --- Cyber Blog Layout Framework --- */
     .cyber-blog-card {
         background: rgba(2, 12, 27, 0.6);
         border: 1px solid rgba(0, 180, 216, 0.25);
         border-radius: 4px;
         transition: all 0.3s ease-in-out;
         opacity: 0;
         /* Managed via GSAP stagger loads */
     }

     /* Floating Badges Style */
     .cyber-blog-card .cyber-tag-badge {
         position: absolute;
         top: 15px;
         left: 15px;
         background: #02263eed;
         color: #75EAFF;
         border: 1px solid #02395b;
         padding: 6px 15px;
         font-size: 11px;
         font-weight: 600;
         letter-spacing: 1px;
         z-index: 10;
         border-radius: 4px;
     }

     /* Title Specs */
     .cyber-blog-card .card-cyber-title {
         font-size: 18px;
         font-weight: 500;
         line-height: 1.4;
         letter-spacing: 0.5px;
         margin-bottom: 25px;
         transition: color 0.3s ease;
         color: #D1F4FF ! important;
     }

     /* Bottom CTA Actions */
     .cyber-blog-card .read-article-link {
         color: #00AFFF ! important;
         font-size: 15px;
         font-weight: 600;
         letter-spacing: 1px;
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .voice-card {
         border: 1px solid #03192f;
         padding: 30px;
         outline: 1px solid #03456d;
         border-radius: 8px;
         background: linear-gradient(176deg, #040c1f 0%, #010408 100%);
         height: 100%;
     }

     .voice-card p {
         border-bottom: 1px solid #0f172a;
         padding-bottom: 21px;
         margin-bottom: 23px;
     }

     .voice-card h4 {
         font-size: 15px;
     }

     .voice-card h5 {
         font-family: var(--para-font);
         color: var(--text-sub);
         font-size: 14px;
     }

     .position-wrapper {
         position: absolute;
         top: -12px;
         left: -1px;
     }

     /* Section Main Container */
     .research-hero-section {
         position: relative;
         min-height: 500px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 80px 20px;
         color: #ffffff;
         font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
         overflow: hidden;
         background-color: #000209;
         /* Video load hone tak fallback color */
     }

     /* Video Element Styling - Isse video perfectly center aur stretch hoti hai */
     .research-hero-video {
         position: absolute;
         top: 50%;
         left: 50%;
         min-width: 100%;
         min-height: 100%;
         width: auto;
         height: auto;
         z-index: 1;
         transform: translate(-50%, -50%);
         object-fit: cover;
         /* Aspect ratio kharab kiye bina cover karega */
         pointer-events: none;
         /* User video par click na kar paye */
     }

     /* Dark Tech Overlay - Isse video thodi dark ho jayegi aur text saaf dikhega */
     .research-hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(circle at center, rgba(0, 2, 9, 0.6) 30%, #000209 95%);
         z-index: 2;
         pointer-events: none;
     }

     /* Content Wrapper - Isko z-index 3 diya hai taaki video aur overlay ke upar aaye */
     .research-hero-content {
         position: relative;
         z-index: 4444;
         max-width: 750px;
         margin: 0 auto;
     }

     /* Main Heading Style (Glow effect ke sath) */
     .research-hero-title {
         font-size: 48px;
         font-weight: 700;
         letter-spacing: 2px;
         line-height: 1.2;
         text-transform: uppercase;
         background: linear-gradient(to bottom, #ffffff 40%, #00a2ff 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-bottom: 20px;
         text-shadow: 0 0 20px rgba(0, 162, 255, 0.3);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         display: block;
         text-shadow: 0 0 30px rgb(0 240 255 / 43%);
     }

     /* Subtitle Description */
     .research-hero-desc {
         font-size: 14px;
         color: #64748b;
         line-height: 1.6;
         margin-bottom: 35px;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
         letter-spacing: 0.5px;
     }

     .gradient-text1 {
         background: linear-gradient(180deg, #c1dfe9, #4995c5, #1f71b6);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
     }

     .research-hero-content h3 {
         font-size: 45px;
         font-family: var(--heading-black);
         font-weight: 900;
     }

     /* Video ke upar Background Image Overlay (Matching image 10885649764518063762.jpeg) */
     .research-hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         /* Yahan apni image ka path daalein (Jaise image 10885649764518063762.jpeg) */
         background-image: url('../img/gradientwrapper.png');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         /* Screen blend mode se peeche ki video aur upar ki image mix ho jayengi */
         mix-blend-mode: screen;
         opacity: 0.85;
         z-index: 2;
         pointer-events: none;
     }

     /* Additional Dark Gradient Layer to ensure text contrast */
     .research-hero-section::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(circle at center, rgba(0, 2, 9, 0.4) 20%, #000209 95%);
         z-index: 3;
         pointer-events: none;
     }

     @media (max-width: 1336px) {
         .hero-banner {
             position: relative;
             min-height: 121%;
             display: flex;
             align-items: center;
             background-image: url(../img/banner2.png);
             background-size: 100% 100%;
             background-position: center;
             color: #ffffff;
             padding: 0px 0 80px 0;
             overflow: hidden;
             background-color: #010717;
             flex-direction: column;
             background-repeat: no-repeat;
             width: 100%;
             height: 100%;
         }

         .section-shop .sidebar h4 {
             color: #fff;
             margin-bottom: 20px;
             font-weight: 400;
             padding: 28px 20px;
             border-bottom: 1px solid #bf99d9;
             font-size: 18px;
         }

         .btn-gradient {
             font-family: 'Orbitron', sans-serif;
             font-size: 13px;
             font-weight: 700;
             letter-spacing: 2px;
             padding: 15px 35px;
             background: linear-gradient(90deg, #0072ff, #007ce6, #0088F3, #00a6fb);
             color: #fff;
             border: none;
             border-radius: 4px;
             position: relative;
             transition: all 0.4s ease;
             box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
             text-transform: uppercase;
             width: fit-content;
             border: 1px solid #00a6fb;
             padding: 15px 20px ! important;
         }
     }

     /* Mobile Responsive Media Query */
     @media (max-width: 768px) {
         .research-hero-title {
             font-size: 32px;
         }

         .research-hero-section {
             min-height: 400px;
             padding: 60px 15px;
         }
     }