/* --- MAIN CONTENT (CLUSTERS) --- */

        .hero { padding: 60px 20px; margin-top: 50px;text-align: center; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        .section-title { margin: 40px 0 20px; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }

        .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }



        /* Full Content Stylish Glassmorphism */

        .glass-section {background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.4);

            padding: 40px;margin-top: 50px; box-shadow: 0 15px 40px rgba(0,0,0,0.04); }

        .section-header-main {

            font-size: 1.5rem;

            font-weight: 800;

            color: #111;

            margin-bottom: 30px;

            display: flex;

            align-items: center;

            gap: 15px;

        }



        /* Unit Info Cards Grid */

        .unit-cards-container {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

            gap: 25px;

            margin-bottom: 40px;

        }



        .card-detailed {

            background: #fff;

            border-radius: 20px;

            border: 1px solid #f0f0f0;

            overflow: hidden;

            display: flex;

            flex-direction: column;

            transition: 0.3s;

        }

        .card-detailed:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }



        .card-header-main {

            padding: 20px;

            background: #f8fafc;

            border-bottom: 1px solid #eee;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .card-header-main h3 { font-size: 1.3rem; margin: 0; color: #1e293b; }

        .badge-group { display: flex; gap: 5px; }

        .badge-custom { padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; background: #e2e8f0; }

        .badge-custom-weight{background: #fdf2f8; color: #be185d;}

        .badge-custom-length{background: #eff6ff; color: #1e40af;}

        .badge-custom-volume{background: #f0f9ff; color: #0369a1;}

        .badge-custom-temperature{background: #fff7ed; color: #c2410c;}

        .content-block { padding: 20px; border-bottom: 1px solid #f9f9f9; }

        .content-block h4 { font-size: 1rem; color: #334155; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

        .content-block p { font-size: 0.95rem; color: #64748b; line-height: 1.6;color:black; }

        .content-block b { color:#334155 }

        .mp-15{margin-top:15px;}

    .quick-ref-panel{margin-top: 20px;}



        .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

        .tag-item { background: #f1f5f9; padding: 5px 12px; border-radius: 15px; font-size: 0.85rem; }



        .example-list b { color: #0f172a; min-width: 50px; display: inline-block; }



        .base-footer { background: #fff1f2; padding: 15px; text-align: center; font-weight: 700; color: #be185d; border-top: 1px solid #fecdd3; }



        /* Feature & FAQ Styling */

        .feature-grid-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }

        .f-item { background: rgba(255,255,255,0.5); padding: 20px; border-radius: 15px; border: 1px solid #eee; }

        

        .faq-item-alt { background: #fff; padding: 20px; border-radius: 15px; margin-bottom: 15px; border: 1px solid #f1f5f9; }

        .faq-item-alt h4 { color: #1e293b; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }



        .whyus-heading p{color: #64748b;margin: 0 auto; margin-bottom: 50px;}

        .whyus-body{display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;}

        .f-item-white{background: #fff; padding: 40px 25px; border-radius: 24px; border: 1px solid #f1f5f9;}

        .f-item1{background: linear-gradient(145deg, #ffffff, #f0f9ff); padding: 40px 25px; border-radius: 24px; border: 1px solid #e0f2fe; border-bottom: 5px solid #3b82f6;}

        .f-item2{background: linear-gradient(145deg, #ffffff, #f0fdf4); padding: 40px 25px; border-radius: 24px; border: 1px solid #dcfce7; border-bottom: 5px solid #10b981;}

        .f-item3{background: linear-gradient(145deg, #ffffff, #fff7ed); padding: 40px 25px; border-radius: 24px; border: 1px solid #ffedd5; border-bottom: 5px solid #f59e0b;}

        .f-div-top{font-size: 3.5rem; margin-bottom: 20px; display: block;}

        .f-item-white h4,.f-item1 h4,.f-item2 h4,.f-item3 h4{font-size: 1.3rem; margin-bottom: 10px; color: #1e293b;}

        .f-item-white p{color: #64748b; font-size: 0.95rem; margin-bottom: 15px;}

        .f-item1 p,.f-item2 p,.f-item3 p{color: #64748b; font-size: 0.9rem;}

        .f-item-bot1{color: #10b981; font-weight: 700; font-size: 1.1rem;}

        .f-item-bot2{color: #3b82f6; font-weight: 700; font-size: 1.1rem;}

        .f-item-bot3{color: #6366f1; font-weight: 700; font-size: 1.1rem;}

        .f-item1 h3{font-size: 3rem; color: #1d4ed8; margin: 10px 0;}

        .f-item2 h3{font-size: 3rem; color: #059669; margin: 10px 0;}

        .f-item3 h3{font-size: 3rem; color: #d97706; margin: 10px 0;}



                        .quick-panel{margin-top: 30px; background: rgba(255,255,255,0.4); padding: 25px; border-radius: 20px;}

                        .quick-ref-panel{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; text-align: center;}

                        .quick-panel h4{margin-bottom: 20px; color: #1e293b; font-weight: 700; display: flex; align-items: center; gap: 8px;}



            .view-all-wrapper {

          text-align: center;

          margin: 20px 0 40px;

        }



        .view-all-btn {

          display: inline-block;

          padding: 10px 18px;

          background: #007bff;

          color: #fff;

          text-decoration: none;

          border-radius: 6px;

          font-size: 14px;

          transition: 0.3s;

        }



        .view-all-btn:hover {

          background: #0056b3;

        }

        

        .card { 

            background: white; padding: 25px; border-radius: 15px; border: 1px solid var(--border); 

            text-decoration: none; color: inherit; transition: 0.3s; 

        }

        .card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

        .card-icon { font-size: 2rem; margin-bottom: 15px; display: block; }

        .card h3 { font-size: 1.1rem; margin-bottom: 8px; }

        .card p { font-size: 0.85rem; color: var(--text-muted); }



        /* --- FOOTER --- */

        footer { background: #0f172a; color: #94a3b8; padding: 80px 20px; margin-top: 60px; }

        .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }

        .footer-col h4 { color: white; margin-bottom: 20px; }

        .footer-col ul { list-style: none; }

        .footer-col li { margin-bottom: 10px; font-size: 14px; }

        .footer-col a { color: inherit; text-decoration: none; }

        .footer-col a:hover { color: white; }



        @media (max-width: 800px) {

            .desktop-nav { display: none; }

            .mobile-btn { display: block; }

            .search-container { max-width: 180px; }

            .glass-section{padding: 40px 10px}

            .container{padding:0 10px;}

        }