:root {

            /* --- BRAND COLORS EXTRACTED FROM LOGO --- */

            --primary: #5e1b2d;    /* Deep Maroon (Shield Base) */

            --primary-light: #7a263e; /* Lighter Maroon for gradients */

            --accent: #ff8c00;     /* Electric Orange (Lightning Bolt) */

            --accent-glow: #ffb700; /* Yellowish tint for gradients */

            

            --secondary: #2d2d2d;  /* Dark Charcoal (Text Contrast) */

            --danger: #ef4444;

            --text-main: #1e1e1e;

            --text-muted: #666666;

            --white: #ffffff;

            --glass: rgba(255, 255, 255, 0.95);

            --shadow: 0 10px 20px -5px rgba(94, 27, 45, 0.15); /* Red-tinted shadow */

        }



        body {

            font-family: 'Inter', sans-serif;

            color: var(--text-main);

            background-color: #fdfbfb; /* Slightly warmer white */

            overflow-x: hidden;

        }



        h1, h2, h3, .nav-link, .btn-primary { font-family: 'Poppins', sans-serif; }



        /* --- Global Ad Styling --- */

        .ad-tag {

            font-size: 10px;

            font-weight: 700;

            color: var(--text-muted);

            text-transform: uppercase;

            letter-spacing: 1px;

            display: block;

            margin-bottom: 5px;

        }



        /* --- Header & Nav --- */

        header {

            position: sticky;

            top: 0;

            z-index: 1000;

            background: var(--glass);

            backdrop-filter: blur(12px);

            border-bottom: 2px solid rgba(94, 27, 45, 0.1);

            transition: 0.3s;

        }

        .slick-prev:before, .slick-next:before {

            color: #5e1b2d !important; /* Maroon Brand Color */

            font-size: 30px;

            opacity: 1;

        }

        .testimonial-slider .slick-slide {

        margin: 0 15px; /* लेफ्ट और राइट में 15px गैप */

    }

        

        /* तीरों की पोजीशन सेट करना */

        .slick-prev { left: 25px; z-index: 1; }

        .slick-next { right: 25px; z-index: 1; }



        /* डॉट्स (Dots) का रंग */

        .slick-dots li.slick-active button:before {

            color: #ff8c00 !important; /* Orange Brand Color */

            opacity: 1;

        }

        .slick-dots li button:before {

            color: #5e1b2d;

            font-size: 10px;

        }



        /* Vertical Slider Styling */

.ad-skyscraper {

    position: sticky;

    top: 100px; /* Sticks to top when scrolling */

    height: 600px; /* Fixed height for the banner */

}



/* Hide Slick Arrows in sidebar because space is tight */

.vertical-slider .slick-prev, 

.vertical-slider .slick-next {

    display: none !important;

}



        .navbar-brand {

            font-weight: 800;

            font-size: 1.5rem;

            color: var(--primary) !important;

            display: flex;

            align-items: center;

            gap: 10px;

        }

        .navbar-brand span { color: var(--accent); }

        .navbar-brand img { height: 100px; } /* Increased slightly for the shield logo */



        .nav-link {

            font-weight: 600;

            color: var(--primary) !important;

            margin: 0 10px;

            position: relative;

            transition: 0.3s;

        }

        .nav-link:hover { color: var(--accent) !important; }

        

        /* .nav-link::after {

            content: '';

            position: absolute;

            bottom: 0; left: 0; width: 0; height: 3px;

            background: linear-gradient(90deg, var(--accent), var(--accent-glow));

            transition: 0.3s;

        } */

        /* .nav-link:hover::after { width: 100%; } */



          /* Navbar Styling */

        .navbar { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); padding: 0; }

        .nav-link { color: #333; font-weight: 600; padding: 20px 15px !important; text-transform: uppercase; font-size: 14px; transition: 0.3s; }

        .nav-link:hover { color: #880e4f; /* Maroon */ }



        /* --- MEGA MENU CSS --- */

        .nav-item.dropdown { position: static; /* Allows full width */ }

        

        .dropdown-menu.mega-menu {

            width: 100%;

            left: 0;

            right: 0;

            padding: 30px;

            margin-top: 0;

            border: none;

            border-top: 3px solid #ff9800; /* Orange Accent */

            background: #f9f9f9;

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

            display: none; /* Hidden by default */

        }



        /* Show on Hover (Desktop) */

        @media (min-width: 992px) {

            .nav-item.dropdown:hover .dropdown-menu.mega-menu {

                display: block;

                animation: slideUp 0.3s ease;

            }

        }

        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }



        /* Mega Menu Content */

        .mega-col h5 {

            color: #880e4f; /* Maroon */

            font-size: 16px;

            font-weight: 700;

            margin-bottom: 15px;

            text-transform: uppercase;

            border-bottom: 1px solid #ddd;

            padding-bottom: 10px;

        }

        .mega-list { list-style: none; padding: 0; margin: 0; }

        .mega-list li { margin-bottom: 8px; }

        .mega-list a {

            color: #555;

            text-decoration: none;

            font-size: 13px;

            transition: 0.2s;

            display: flex;

            align-items: center;

        }

        .mega-list a:hover { color: #ff9800; transform: translateX(5px); }

        .mega-list a i { font-size: 8px; margin-right: 8px; color: #ccc; }

        .mega-list a:hover i { color: #ff9800; }



        /* --- Hero Section --- */

        .hero {

            /* Changed to a Maroon Gradient Overlay */

           

            padding: 10px 0px 80px 0px;

            color: var(--white);

            text-align: center;

            min-height: 480px;

        }



        .hero h1 {

            font-size: clamp(2.5rem, 5vw, 3.5rem);

            font-weight: 800;

            line-height: 1.2;

            margin-bottom: 25px;

            text-shadow: 0 2px 10px rgba(0,0,0,0.3);

        }

        

        /* Updated Badge Color */

        .hero .badge {

            background: linear-gradient(45deg, var(--accent), var(--accent-glow)) !important;

            color: #000 !important;

            border: none;

            font-weight: 700;

            box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);

        }



        .hero p {

            font-size: 1.2rem;

            max-width: 800px;

            margin: 0 auto 40px;

            opacity: 0.95;

            font-weight: 300;

        }



        .btn-main {

            padding: 15px 35px;

            border-radius: 50px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            transition: 0.3s;

            position: relative;

            overflow: hidden;

            z-index: 1;

        }

        

        /* New Button Style to match the bolt */

        .btn-accent { 

            background: linear-gradient(45deg, var(--accent), #ff5e00); 

            color: white; 

            border: none; 

            box-shadow: 0 4px 15px rgba(255, 106, 0, 0.4);

        }

        .btn-accent:hover { 

            transform: translateY(-3px); 

            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.6);

            color: white;

        }



        /* --- Stats Bar --- */

        .trust-bar {

            background: var(--white);

            padding: 5px 0;

            margin-top: -60px;

            border-radius: 15px;

            box-shadow: var(--shadow);

            position: relative;

            z-index: 10;

            border-top: 4px solid var(--accent); /* Accent line on top */

        }



        /* --- Product Cards --- */

        .section-title {

            text-align: center;

            margin-bottom: 60px;

        }

        .section-title h2 { 

            font-weight: 800; 

            font-size: 2.5rem; 

            color: var(--primary);

            position: relative; 

            padding-bottom: 15px; 

        }

        .section-title h2::after {

            content: ''; width: 80px; height: 5px; 

            background: linear-gradient(to right, var(--primary), var(--accent));

            position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);

            border-radius: 10px;

        }



        .product-card {

            background: var(--white);

            border: 1px solid #f0e6e9; /* Slight red tint border */

            border-radius: 20px;

            padding: 30px;

            height: 100%;

            transition: 0.4s;

            position: relative;

            overflow: hidden;

        }

        .product-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 20px 30px -5px rgba(94, 27, 45, 0.15);

            border-color: var(--accent);

        }

        .product-card:hover .product-icon {

            background: var(--primary);

            color: var(--accent);

        }



        .product-icon {

            width: 70px; height: 70px;

            background: #fff0f3; /* Very pale red */

            color: var(--primary);

            display: flex; align-items: center; justify-content: center;

            font-size: 2rem; border-radius: 15px; margin-bottom: 20px;

            transition: 0.3s;

        }



        /* --- Side Banners --- */

        .ad-skyscraper {

            position: sticky;

            top: 100px;

            background: #fdf2f4;

            border: 2px dashed #e6cdd3;

            border-radius: 12px;

            height: 600px;

            display: flex; flex-direction: column; align-items: center; justify-content: center;

            padding: 15px;

            text-align: center;

        }

        .ad-skyscraper img {

            max-height: 100%;

            max-width: 100%;

            object-fit: content;

        }



        /* --- About Section --- */

        .about-section {

            padding: 10px 0;

        }

        .about-specifications{

            font-size: 13px;

        }

        .about-content {

            background: var(--white);

            border-radius: 20px;

            padding: 50px;

            box-shadow: var(--shadow);

            border-left: 5px solid var(--primary); /* Branding line */

        }

        

        .fa-check-circle.text-success {

            color: var(--primary) !important; /* Changed checkmarks to brand color */

        }



        /* --- Clients Section --- */

        .client-card {

            background: var(--white);

            border-radius: 15px;

            padding: 30px;

            margin-bottom: 20px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

            transition: 0.3s;

            border-left: 4px solid transparent;

        }

        .client-card:hover {

            transform: translateY(-5px);

            border-left-color: var(--accent);

        }

        /* Adjusted badge colors to match theme */

        .client-card .badge.bg-primary { background-color: var(--primary) !important; }

        .client-card .badge.bg-warning { background-color: var(--accent) !important; color: white !important; }



        /* --- Why Choose Section --- */

        .why-card {

            background: var(--white);

            border-radius: 15px;

            padding: 40px;

            height: 100%;

            text-align: center;

            transition: 0.3s;

            border: 1px solid transparent;

        }

        .why-card:hover {

            transform: translateY(-10px);

            box-shadow: var(--shadow);

            border-color: var(--accent);

        }

        .why-icon {

            width: 80px; height: 80px;

            background: linear-gradient(135deg, var(--primary), var(--primary-light));

            color: var(--white);

            display: flex; align-items: center; justify-content: center;

            font-size: 2rem; border-radius: 50%; margin: 0 auto 20px;

            box-shadow: 0 5px 15px rgba(94, 27, 45, 0.3);

        }

        .why-card:hover .why-icon {

            background: linear-gradient(135deg, var(--accent), #ff6b00);

        }



        /* --- Testimonials --- */

        .testimonial-card {

            background: var(--white);

            border-radius: 15px;

            padding: 30px;

            margin-bottom: 20px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

            border-top: 3px solid var(--primary);

        }

        .testimonial-rating {

            color: var(--accent);

            margin-bottom: 15px;

        }

        .testimonial-author {

            display: flex; align-items: center; gap: 15px; margin-top: 20px;

        }



        /* --- Contact Form --- */

        .contact-box {

            background: var(--white);

            border-radius: 30px;

            overflow: hidden;

            box-shadow: var(--shadow);

        }

        .contact-info-panel {

            /* Branding Gradient */

            background: linear-gradient(150deg, var(--primary), #380d1a);

            color: white;

            padding: 60px;

            position: relative;

            overflow: hidden;

        }

        /* Add a subtle graphic element */

        .contact-info-panel::after {

            content: '\f0e7'; /* FontAwesome Bolt */

            font-family: "Font Awesome 6 Free";

            font-weight: 900;

            position: absolute;

            bottom: -30px;

            right: -20px;

            font-size: 15rem;

            color: rgba(255, 255, 255, 0.05);

            transform: rotate(-15deg);

        }

        

        .contact-form-panel {

            background: white;

            padding: 60px;

        }

        

        .contact-info-panel .text-warning {

            color: var(--accent) !important;

        }



        /* --- Footer --- */

        footer {

            background: #1a080d; /* Very dark maroon/black */

            color: #b0b0b0;

            padding: 80px 0 30px;

            border-top: 5px solid var(--primary);

        }

        footer h4 { color: var(--white); margin-bottom: 25px; font-weight: 700; }

        footer span { color: var(--accent); }

        

        .footer-link { color: #b0b0b0; text-decoration: none; display: block; margin-bottom: 12px; transition: 0.3s; }

        .footer-link:hover { color: var(--accent); padding-left: 5px; }

        

        footer .text-warning { color: var(--accent) !important; }

        footer .btn-outline-light:hover { background-color: var(--primary); border-color: var(--primary); }



        /* --- Mobile Responsiveness --- */

        @media (max-width: 991px) {

            .ad-skyscraper { display: none; }

            .hero h1 { font-size: 2.2rem; }

            .contact-info-panel, .contact-form-panel { padding: 40px 25px; }

            .about-content { padding: 30px 20px; }

        }



        /* Scroll Animation */

        .reveal {

            opacity: 1;

            transform: translateY(30px);

            transition: all 0.8s ease-out;

        }

        .reveal.active {

            opacity: 1;

            transform: translateY(0);

        }

        

        /* Utility for Text Colors */

        .text-primary { color: var(--primary) !important; }

        .text-accent { color: var(--accent) !important; }

        .bg-dark { background-color: var(--primary) !important; } /* Top bar color */















        /* //// packages  */



           ul.product-plans {

  width: min(60rem, 90%);

  margin-inline: auto;

  display: flex;

  row-gap: 2rem;

  flex-wrap: wrap;

  justify-content: center;

  list-style: none;

}

ul.product-plans li.product-plan:nth-child(1) { --accent-color: #fa0038 }

ul.product-plans li.product-plan:nth-child(2) { --accent-color: #164fa9 }

ul.product-plans li.product-plan:nth-child(3) { --accent-color: #1a9b8b }

ul.product-plans li.product-plan:nth-child(4) { --accent-color: #1a9b8b }



ul.product-plans li.product-plan {

  --overlap-size: 1.5rem;

  --border-radius: 5rem;

  width: min(20rem, 100%) !important;

  margin-inline: var(--overlap-size);

  padding-block: 2rem;

  display: grid;

  grid-template-rows: max-content max-content 1fr max-content;

  gap: 0.5rem;

  border-radius: var(--border-radius) 0 var(--border-radius) 0;

  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5);

}



ul.product-plans li.product-plan .title {

  font-size: 2rem;

  color: var(--accent-color);

  text-align: center;

}



ul.product-plans li.product-plan .price {

  margin-right: calc(var(--overlap-size) * -1);

  justify-self: end;

  padding-block: 0.25rem;

  padding-inline: var(--overlap-size);

  background-color: var(--accent-color);

  color: white;

  position: relative;

}

ul.product-plans li.product-plan .price::after {

  content: "";

  position: absolute;

  height: var(--overlap-size);

  width: var(--overlap-size);

  right: 0;

  top: 100%;

  background-color: inherit;

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

  clip-path: polygon(0 0, 100% 0, 0 100%);

}



ul.product-plans li.product-plan .btn {

  justify-self: start;

  margin-left: calc(var(--overlap-size) * -1);

  padding-block: 0.5rem;

  padding-inline: 2.5rem;



  border: none;

  font-family: inherit;

  color: white;

  font-size: 1.1rem;



  background-color: var(--accent-color);

  background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);

  background-size: 100% 200%;

  transition: background-position 100ms ease;



  position: relative;

  cursor: pointer;

}

ul.product-plans li.product-plan .btn:focus-visible {

  outline-offset: 5px;

  outline: 2px solid var(--accent-color);

  background-position: 0 100%;

}



ul.product-plans li.product-plan .btn:hover {

  background-position: 0 100%;

}



ul.product-plans li.product-plan .btn::after {

  content: "";

  position: absolute;

  height: var(--overlap-size);

  width: var(--overlap-size);

  left: 0;

  bottom: 100%;

  background-color: inherit;

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

  clip-path: polygon(100% 0, 100% 100%, 0 100%);

}



ul.product-plans li.product-plan .btn:active {

  transform: scale(0.95);

}

ul.product-plans li.product-plan .btn:active::after {

  transform-origin: left bottom;

  transform: scale(0.9);

}



ul.product-plans li.product-plan .features {

  align-self: flex-start;

  list-style: none;

  padding-inline: 2rem;

  display: grid;

}



ul.product-plans li.product-plan .features li:not(:first-child) {

  border-top: 1px solid rgb(200, 200, 200);

}

ul.product-plans li.product-plan .features li {

  padding: 0.5rem;

  display: grid;

  gap: 1rem;

  grid-template-columns: 1rem 1fr;

}



ul.product-plans li.product-plan .features li::before {

  font-family: "Font Awesome 6 Pro";

  font-weight: 900;

  display: grid;

  place-items: center;

}

ul.product-plans li.product-plan .features li.check::before {

  content: "\2713";

  color: green;

}

ul.product-plans li.product-plan .features li.cross::before {

  content: "\d7";

  color: red;

}





  /* --- NEW PRICING SECTION STYLES --- */

        .pricing-section {

            position: relative;

            background-color: #ffffff47;

            background-size: 40px 40px;

            padding: 1rem 0;

            overflow: hidden;

        }



        /* Background Decorations (The Blueprint Look) */

        .pricing-section::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; bottom: 0;

            background: radial-gradient(circle at 50% 50%, rgba(94, 27, 45, 0.05) 0%, transparent 70%);

            z-index: 1;

            pointer-events: none;

        }



        .pricing-header h2 {

            font-family: var(--head-font);

            color: var(--primary);

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 0.5rem;

        }

        .pricing-header p {

            font-size: 1.1rem;

            color: var(--text-muted);

            max-width: 600px;

            margin: 0 auto;

        }



        /* CARD CONTAINER */

        .pricing-grid {

            position: relative;

            z-index: 2;

            display: flex;

            flex-wrap: wrap;

            gap: 1.5rem;

            justify-content: center;

        }



        /* CARD DESIGN */

        .pricing-card {

            background: #fff;

            border: 1px solid #e1e4e8;

            border-radius: 16px;

            padding: 0.7rem;

            position: relative;

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

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

            display: flex;

            flex-direction: column;

            height: 100%;

            min-height: 620px;        }



        .pricing-card:hover {

            transform: translateY(-10px);

            box-shadow: var(--shadow);

            border-color: var(--primary);

        }



        /* Top Bar Accent */

        .pricing-card::after {

            content: '';

            position: absolute;

            top: 0; left: 16px; right: 16px;

            height: 4px;

            background: #e1e4e8;

            border-radius: 0 0 4px 4px;

            transition: 0.3s;

            z-index: -1;

        }

        .pricing-card:hover::after {

            background: var(--primary);

        }



        /* Plan Title */

        .plan-name {

            font-family: var(--head-font);

            font-size: 2rem;

            font-weight: bolder;

            color: var(--primary);

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 1rem;

            display: flex;

            align-items: center;;

            gap: 10px;

        }



        /* Price */

        .plan-price {

            margin-bottom: 1.5rem;

            color: var(--text-main);

        }

        .plan-price .currency {

            font-size: 1.5rem;

            font-weight: 600;

            vertical-align: top;

            line-height: 1.2;

        }

        .plan-price .amount {

            font-size: 3rem;

            font-weight: 700;

            color: var(--text-main);

            line-height: 1;

            letter-spacing: -1px;

        }

        .plan-price .period {

            font-size: 1.5rem;

            color: #888;

            font-weight: 500;

        }



        /* Divider */

        .divider {

            height: 1px;

            background: linear-gradient(90deg, transparent, #e1e4e8, transparent);

            margin: 1.5rem 0;

        }



        /* Features List */

        .plan-features {

            list-style: none;

            padding: 0;

            margin: 0 0 2rem 0;

            flex-grow: 1;

        }

        .plan-features li {

            font-size:1rem;

            color:darkslategray;

            margin-bottom: 0.5rem;

            display: flex;

            align-items: flex-start;

            gap: 10px;

            line-height: 1.4;

            font-weight: 600;

        }

        .plan-features li i {

            color: green;

            margin-top: 3px;

            font-size: 0.9rem;

        }

        .plan-features li.disabled {

            color: #aaa;

            text-decoration: line-through;

        }

        .plan-features li.disabled i {

            color: #ddd;

        }



        /* Button */

        .plan-btn {

            width: 100%;

            padding: 0.8rem;

            border-radius: 50px;

            font-weight: 600;

            text-transform: uppercase;

            font-size: 0.9rem;

            letter-spacing: 0.5px;

             background: rgba(255, 255, 255, 0.886);

            color: white;

            border: 2px solid #e1e4e8;

            transition: all 0.3s ease;

            text-decoration: none;

            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

        }

        .plan-btn:hover {

            background:white;

            border-color: var(--primary);

            color: var(--primary);

        }



        /* --- POPULAR CARD (Standard/Professional) --- */

        .pricing-card.popular {

            border: 2px solid var(--primary);

            box-shadow: var(--shadow);

            transform: scale(1.02);

            z-index: 10;

        }

        .pricing-card.popular::before {

            content: 'MOST POPULAR';

            position: absolute;

            top: -12px;

            left: 50%;

            transform: translateX(-50%);

            background: linear-gradient(135deg, var(--accent), var(--accent-glow));

            color: white;

            padding: 4px 16px;

            border-radius: 20px;

            font-size: 0.75rem;

            font-weight: 700;

            letter-spacing: 1px;

            box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3);

            white-space: nowrap;

        }

        .pricing-card.popular .plan-price .amount {

            color: var(--primary);

        }

        .pricing-card.popular .plan-btn {

            background: linear-gradient(135deg, var(--primary), var(--primary-light));

            border: none;

            color: white;

        }

        .pricing-card.popular .plan-btn:hover {

            box-shadow: 0 0 20px rgba(94, 27, 45, 0.4);

            transform: translateY(-2px);

        }

        .pricing-card.popular:hover {

            transform: scale(1.02) translateY(-5px);

        }



        /* --- ENTERPRISE CARD --- */

        .pricing-card.enterprise {

            background: linear-gradient(to bottom right, #fff, #fef5f7);

            border-color: #eaccd3;

        }

        .pricing-card.enterprise .plan-name {

            color: var(--accent);

        }

        .pricing-card.enterprise .plan-btn {

            border-color: var(--accent);

            color: var(--accent);

        }

        .pricing-card.enterprise .plan-btn:hover {

            background: var(--accent);

            color: white;

        }



        /* Responsive Fixes */

        @media (max-width: 991px) {

            .pricing-card.popular {

                transform: scale(1);

            }

            .pricing-card.popular:hover {

                transform: translateY(-10px);

            }

        }

        

        /* Navbar Tweaks to match requests */







       

      :root {

        --primary-color: #0d2c56; /* Deep Industrial Blue */

        --accent-color: #f39c12; /* Industrial Orange/Yellow */

        --light-bg: #f8f9fa;

        --text-dark: #333;

      }



     



      h1, h2, h3, h4, h5, h6 {

        font-family: 'Poppins', sans-serif;

      }



      .btn-main {

        background-color: var(--primary-color);

        color: white;

        border: none;

        transition: all 0.3s;

      }

      

      .btn-accent {

        background-color: var(--accent-color);

        color: #000;

        font-weight: 700;

      }



      .btn-accent:hover {

        background-color: #d68910;

        color: white;

      }



      /* Category Sidebar */

      .category-sidebar {

        background: white;

        border-radius: 8px;

        box-shadow: 0 4px 6px rgba(0,0,0,0.05);

        overflow: hidden;

        position: sticky;

        top: 20px; /* Sticks when scrolling */

      }



      .category-header {

        background: var(--primary-color);

        color: white;

        padding: 15px;

        font-weight: 600;

      }



      .category-list a {

        display: block;

        padding: 12px 15px;

        color: #555;

        text-decoration: none;

        border-bottom: 1px solid #eee;

        transition: 0.3s;

        font-size: 0.95rem;

      }



      .category-list a:hover {

        background-color: #f0f0f0;

        color: var(--primary-color);

        padding-left: 20px;

      }



      .category-list a.active {

        background-color: var(--accent-color);

        color: #000;

        font-weight: 600;

        border-left: 5px solid var(--primary-color);

      }



      /* Product Main Content */

      .product-header {

        background: white;

        padding: 25px;

        border-radius: 8px;

        box-shadow: 0 2px 4px rgba(0,0,0,0.05);

        margin-bottom: 20px;

      }



      .product-title {

        color: var(--primary-color);

        font-weight: 700;

        border-bottom: 3px solid var(--accent-color);

        display: inline-block;

        padding-bottom: 5px;

        margin-bottom: 20px;

      }



      .feature-card {

        background: white;

        padding: 20px;

        border-radius: 8px;

        height: 100%;

        border: 1px solid #e0e0e0;

        transition: transform 0.3s, box-shadow 0.3s;

      }



      .feature-card:hover {

        transform: translateY(-5px);

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

        border-color: var(--accent-color);

      }



      .feature-icon {

        font-size: 2rem;

        color: var(--accent-color);

        margin-bottom: 15px;

      }



      .tech-spec-table th {

        background-color: var(--primary-color);

        color: white;

        width: 40%;

      }



      /* How it works steps */

      .process-step {

        position: relative;

        padding-left: 40px;

        margin-bottom: 20px;

      }

      

      .process-step::before {

        content: "\f013"; /* Gear icon default */

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        position: absolute;

        left: 0;

        top: 0;

        width: 30px;

        height: 30px;

        background: var(--accent-color);

        color: white;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 14px;

      }



      .application-badge {

        background-color: #fff;

        border: 1px solid var(--primary-color);

        color: var(--primary-color);

        padding: 8px 15px;

        border-radius: 20px;

        margin: 5px;

        display: inline-block;

        font-weight: 500;

        font-size: 0.9rem;

      }



      .ad-skyscraper {

          /* Keeping your existing styles */

          background: #ddd;

      }

      

      /* Mobile Tweaks */

      @media (max-width: 768px) {

        .category-sidebar {

          position: static;

          margin-bottom: 20px;

        }

      }



      /* Sidebar ko sticky banane ke liye CSS */

.sticky-sidebar {

    position: -webkit-sticky; /* Safari browser ke liye */

    position: sticky;

    top: 50px; /* Upar se kitni jagah chod kar rukna hai (Header ki height adjust karein) */

    z-index: 99;

   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

   border-radius: 10px;

}





/* Filter Buttons Hover Effects */

.btn-outline-primary.active, .btn-outline-primary:active {

    background-color: #0d6efd !important;

    color: white !important;

}

.btn-outline-warning {

    color: #ffc107;

    border-color: #ffc107;

}

.btn-outline-warning:hover, .btn-outline-warning.active {

    background-color: #ffc107 !important;

    color: #000 !important;

}

.btn-outline-secondary.active {

    background-color: #6c757d !important;

    color: white !important;

}

h5.text-primary.fw-bold {
    font-size: 19px;
}


/* Input Focus Glow remove clean look */

.form-control:focus {

    box-shadow: none;

    border-color: #ced4da;

}