Showing source for: https://www.tutorialspoint.com/index.htm
Duration: 0.062505s
Server: Apache/2.4.62 (Ubuntu)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Primary Meta Tags -->
    <title>Coding Practice Problems & Tutorials | TutorialsPoint</title>
    <meta name="title" content="Coding Practice Problems  & Tutorials | TutorialsPoint">
    <meta name="description" content="Practice 3500+ coding problems and tutorials. Master programming challenges with problems sorted by difficulty. Free coding practice with solutions.">
    <meta name="keywords" content="coding problems, practice problems, programming exercises, coding challenges, DSA problems, data structures, algorithms, programming tutorials, leetcode alternative">
    <meta name="author" content="TutorialsPoint">
    <meta name="robots" content="index, follow">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.tutorialspoint.com">
    
    <!-- Pagination SEO -->
    <link rel="next" href="https://www.tutorialspoint.com">
        
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.tutorialspoint.com">
    <meta property="og:title" content="Coding Practice Problems & Tutorials | TutorialsPoint">
    <meta property="og:description" content="Practice 3600+ coding problems and tutorials. Master programming challenges with problems sorted by difficulty. Free coding practice with solutions.">
    <meta property="og:image" content="https://www.tutorialspoint.com/practice/images/problems-og-image.png">
    <meta property="og:site_name" content="TutorialsPoint">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://www.tutorialspoint.com">
    <meta name="twitter:title" content="Coding Practice Problems  & Tutorials | TutorialsPoint">
    <meta name="twitter:description" content="Practice 3600+ coding problems and tutorials. Master programming challenges with problems sorted by difficulty. Free coding practice with solutions.">
    <meta name="twitter:image" content="https://www.tutorialspoint.com/practice/images/problems-og-image.png">
    <meta name="twitter:site" content="@tutaborad">
    
    <!-- Structured Data - BreadcrumbList -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "https://www.tutorialspoint.com/"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "Practice",
                "item": "https://www.tutorialspoint.com/practice/"
            },
            {
                "@type": "ListItem",
                "position": 3,
                "name": "All Problems",
                "item": "https://www.tutorialspoint.com/problems"
            }
        ]
    }
    </script>
    <script>
  window.googletag = window.googletag || {};
  window.googletag.cmd = window.googletag.cmd || [];
  window.googletag.cmd.push(() => {
    window.googletag.pubads().enableAsyncRendering();
    window.googletag.pubads().disableInitialLoad();
  }
  );
  const injectPgScript = (src, isAsync, onLoadCallback) => {
    if (!src)
      return;
    const script = document.createElement("script");
    script.src = src;
    if (isAsync)
      script.async = isAsync;
    if (onLoadCallback)
      script.onload = onLoadCallback;
    document.head.appendChild(script);
  }
    ;
  const initiatePgAds = () => {
    !!window.__tcfapi && window.__tcfapi("addEventListener", 2, (tcData, success) => {
      if (success && (tcData.eventStatus === "useractioncomplete" || tcData.eventStatus === "tcloaded" || tcData.gdprApplies === false)) {
        if (!window._initAds) {
          window._initAds = true;
          injectPgScript("https://fms.360yield.com/ow/bundles/live/pubgalaxy/publishers/tutorialspointcom.min.js", true);
          injectPgScript("//btloader.com/tag?o=5184339635601408&upapi=true", true);
        }
      }
    }
    );
  }
    ;
  injectPgScript("https://securepubads.g.doubleclick.net/tag/js/gpt.js?network-code=8095840", true, () => {
    window.googlefc = window.googlefc || {
      callbackQueue: []
    };
    window.googlefc.callbackQueue.push({
      "CONSENT_API_READY": () => initiatePgAds()
    });
  }
  );
</script>
    
    <!-- Structured Data - ItemList for Problems -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Coding Practice Problems",
        "description": "Practice 3500+ coding problems and tutorials. Master programming challenges with problems sorted by difficulty. Free coding practice with solutions.",
        "numberOfItems": 3600,
        "itemListElement": [
                        {
                "@type": "ListItem",
                "position": 1,
                "url": "https://www.tutorialspoint.com/practice/01-matrix.htm",
                "name": "01 Matrix"
            },                        {
                "@type": "ListItem",
                "position": 2,
                "url": "https://www.tutorialspoint.com/practice/1-bit-and-2-bit-characters.htm",
                "name": "1-bit and 2-bit Characters"
            },                        {
                "@type": "ListItem",
                "position": 3,
                "url": "https://www.tutorialspoint.com/practice/132-pattern.htm",
                "name": "132 Pattern"
            },                        {
                "@type": "ListItem",
                "position": 4,
                "url": "https://www.tutorialspoint.com/practice/2-keys-keyboard.htm",
                "name": "2 Keys Keyboard"
            },                        {
                "@type": "ListItem",
                "position": 5,
                "url": "https://www.tutorialspoint.com/practice/24-game.htm",
                "name": "24 Game"
            },                        {
                "@type": "ListItem",
                "position": 6,
                "url": "https://www.tutorialspoint.com/practice/3sum.htm",
                "name": "3Sum"
            },                        {
                "@type": "ListItem",
                "position": 7,
                "url": "https://www.tutorialspoint.com/practice/3sum-closest.htm",
                "name": "3Sum Closest"
            },                        {
                "@type": "ListItem",
                "position": 8,
                "url": "https://www.tutorialspoint.com/practice/3sum-smaller.htm",
                "name": "3Sum Smaller"
            },                        {
                "@type": "ListItem",
                "position": 9,
                "url": "https://www.tutorialspoint.com/practice/3sum-with-multiplicity.htm",
                "name": "3Sum With Multiplicity"
            },                        {
                "@type": "ListItem",
                "position": 10,
                "url": "https://www.tutorialspoint.com/practice/4-keys-keyboard.htm",
                "name": "4 Keys Keyboard"
            },                        {
                "@type": "ListItem",
                "position": 11,
                "url": "https://www.tutorialspoint.com/practice/4sum.htm",
                "name": "4Sum"
            },                        {
                "@type": "ListItem",
                "position": 12,
                "url": "https://www.tutorialspoint.com/practice/4sum-ii.htm",
                "name": "4Sum II"
            },                        {
                "@type": "ListItem",
                "position": 13,
                "url": "https://www.tutorialspoint.com/practice/a-number-after-a-double-reversal.htm",
                "name": "A Number After a Double Reversal"
            },                        {
                "@type": "ListItem",
                "position": 14,
                "url": "https://www.tutorialspoint.com/practice/abbreviating-the-product-of-a-range.htm",
                "name": "Abbreviating the Product of a Range"
            },                        {
                "@type": "ListItem",
                "position": 15,
                "url": "https://www.tutorialspoint.com/practice/accepted-candidates-from-the-interviews.htm",
                "name": "Accepted Candidates From the Interviews"
            }                    
        ]
    }
    </script>
    
    <!-- Structured Data - Organization -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "TutorialsPoint",
        "url": "https://www.tutorialspoint.com",
        "logo": "https://www.tutorialspoint.com/images/logo.png",
        "sameAs": [
            "https://www.facebook.com/tutorialspointindia",
            "https://x.com/tutorialspoint",
            "https://www.linkedin.com/company/tutorialspoint/",
            "https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg"
        ]
    }
    </script>
    
    <!-- Structured Data - WebPage -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "Coding Practice Problems and tutorials| TutorialsPoint",
        "description": "Practice 3500+ coding problems and tutorials. Master programming challenges with problems sorted by difficulty. Free coding practice with solutions.",
        "url": "https://www.tutorialspoint.com/problems",
        "inLanguage": "en-US",
        "isPartOf": {
            "@type": "WebSite",
            "name": "TutorialsPoint",
            "url": "https://www.tutorialspoint.com"
        },
        "about": {
            "@type": "Thing",
            "name": "Coding Practice Problems"
        },
        "mainEntity": {
            "@type": "ItemList",
            "numberOfItems": 3800        }
    }
    </script>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <script src="https://kit.fontawesome.com/d10db5a94a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/practice/css/practice-common.css?v7">
    <style>
        /* Page-specific overrides if needed */
        #companyProblemsSection {
            scroll-margin-top: 80px;
        }
        .adv-section {
            padding: 40px 0px 40px 0px;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            background: #1b1a3e;
            border-top: 1px solid var(--border-color);
        }
        .adv-section .ads-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1400px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        @media (max-width: 599px) {
            .adv-section .ad-column:nth-child(n+2) {
                display: none;
            }
        }
        @media (max-width: 599px) {
            .adv-section .ad-column {
                width: 100%;
            }
        }
        .adv-section .ad-column {
            box-sizing: border-box;
            margin-bottom: 20px;
            text-align: center;
       }
      .tpx-courses .tpx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
      .tpx-courses .tpx-slider{overflow:hidden;margin-top:18px}
      .tpx-courses .tpx-slider .swiper-slide{width:280px;height:auto;display:flex}
      .tpx-courses .tpx-card{width:100%;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
        box-shadow:0 6px 22px rgba(20,30,50,.08);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
      .tpx-courses .tpx-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(20,30,50,.14)}
      .tpx-courses .tpx-head{height:150px;display:flex;align-items:center;justify-content:center}
      .tpx-courses .tpx-head svg{width:78%;height:78%}
      .tpx-courses .tpx-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
      .tpx-courses .tpx-body h4{margin:0 0 8px;font-size:19px;font-weight:800;color:#0f1b2d;line-height:1.25}
      .tpx-courses .tpx-desc{margin:0 0 16px;font-size:14px;line-height:1.5;color:#5a6675}
      .tpx-courses .tpx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
      .tpx-courses .tpx-tag{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;color:var(--acc);background:var(--acc-bg)}
      .tpx-courses .tpx-btn{margin-top:auto;display:block;text-align:center;padding:13px 14px;border:1px solid #dbe1ea;border-radius:10px;
        font-size:15px;font-weight:700;color:#10355f;background:#fff;transition:background .15s ease,border-color .15s ease}
      .tpx-courses .tpx-card:hover .tpx-btn {background:#f4f7fc;border-color:#c7d0dd}
      .tpx-courses .tpx-nav{display:flex;gap:10px}
      .tpx-courses .tpx-navbtn{width:42px;height:42px;border-radius:50%;border:1px solid #dbe1ea;background:#fff;color:#10355f;
        display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,border-color .15s ease}
      .tpx-courses .tpx-navbtn:hover{background:#f4f7fc;border-color:#c7d0dd}
      .tpx-courses .tpx-navbtn svg{width:20px;height:20px}
      .tpx-courses .tpx-navbtn.swiper-button-disabled{opacity:.4;cursor:default}
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="tp-topbar">
        <div class="tp-topbar-inner">
            <div class="tp-topbar-left">
                <a href="/" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-house"></i>
                    <span>Home</span>
                </a>
                <a href="/whiteboard.htm" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-chalkboard"></i>
                    <span>Whiteboard</span>
                </a>
                <a href="/practice/index.htm" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-rectangle-terminal"></i>
                    <span>Practice Code</span>
                </a>
                <a href="/online_graphing_calculator.htm" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-calculator"></i>
                    <span>Graphing Calculator</span>
                </a>
                <a href="/codingground.htm" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-code"></i>
                    <span>Online Compilers</span>
                </a>
                <a href="/articles/index.php" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-pen-to-square"></i>
                    <span>Articles</span>
                </a>
                <a href="/online_dev_tools.htm" class="tp-topbar-link">
                    <i class="fa-sharp fa-light fa-gear"></i>
                    <span>Tools</span>
                </a>
            </div>
            <div class="tp-topbar-right">
                <button class="tp-theme-toggle" onclick="toggleTheme()" title="Toggle Dark/Light Theme">
                    <i class="fa-sharp fa-light fa-moon"></i>
                </button>
                <a href="https://www.facebook.com/tutorialspointindia" class="tp-social-link tp-social-fb" title="Facebook" rel="nofollow" target="_blank">
                    <i class="fa-brands fa-facebook-f"></i>
                </a>
                <a href="https://x.com/tutorialspoint" class="tp-social-link tp-social-x" title="X" rel="nofollow" target="_blank">
                    <i class="fa-brands fa-x-twitter"></i>
                </a>
                <a href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" class="tp-social-link tp-social-yt" title="YouTube" rel="nofollow" target="_blank">
                    <i class="fa-brands fa-youtube"></i>
                </a>
                <a href="https://www.linkedin.com/company/tutorialspoint/" class="tp-social-link tp-social-li" title="LinkedIn" rel="nofollow" target="_blank">
                    <i class="fa-brands fa-linkedin-in"></i>
                </a>
                <a href="https://www.instagram.com/tutorialspoint_/" class="tp-social-link tp-social-ig" title="Instagram" rel="nofollow" target="_blank">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- TutorialsPoint Header -->
    <header class="tp-header">
        <div class="tp-header-inner">
            <div class="tp-header-left">
                <a href="https://www.tutorialspoint.com" title="Tutorials point">
                    <svg class="tp-logo-desktop" xmlns="http://www.w3.org/2000/svg" width="226" height="42" viewBox="0 0 226 42" fill="none">
                        <path d="M76.2136 13.8408V27.7576H72.3845V26.1045C71.3229 27.3193 69.7701 27.9689 68.0642 27.9689C64.5731 27.9689 62.1172 26.0042 62.1172 21.7103V13.8461H66.1523V21.1135C66.1523 23.4426 67.1874 24.4778 68.9726 24.4778C70.7577 24.4778 72.1785 23.2895 72.1785 20.7279V13.8461H76.2136V13.8408Z" fill="#40A944"></path>
                        <path d="M89.1484 20.7959C89.1484 16.6077 92.3807 13.6289 96.8066 13.6289C101.233 13.6289 104.438 16.6024 104.438 20.7959C104.438 24.9894 101.233 27.9629 96.8066 27.9629C92.3807 27.9629 89.1484 24.9894 89.1484 20.7959ZM100.351 20.7959C100.351 18.3928 98.8242 16.9404 96.8066 16.9404C94.7891 16.9404 93.2363 18.3876 93.2363 20.7959C93.2363 23.2043 94.7891 24.6514 96.8066 24.6514C98.8242 24.6514 100.351 23.2043 100.351 20.7959Z" fill="#40A944"></path>
                        <path d="M115.28 13.6348V17.3582C114.942 17.3318 114.683 17.3054 114.377 17.3054C112.153 17.3054 110.68 18.5202 110.68 21.1873V27.7575H106.645V13.8407H110.5V15.6787C111.482 14.3319 113.141 13.6348 115.285 13.6348H115.28Z" fill="#40A944"></path>
                        <path d="M117.695 13.8408H121.73V27.7576H117.695V13.8408Z" fill="#40A944"></path>
                        <path d="M139.119 13.8402V27.757H135.263V26.1514C134.255 27.3661 132.781 27.9629 130.917 27.9629C126.987 27.9629 123.961 25.169 123.961 20.7959C123.961 16.4228 126.987 13.6289 130.917 13.6289C132.623 13.6289 134.07 14.1729 135.079 15.3084V13.8349H139.114L139.119 13.8402ZM135.163 20.7959C135.163 18.3928 133.61 16.9404 131.619 16.9404C129.628 16.9404 128.049 18.3876 128.049 20.7959C128.049 23.2043 129.602 24.6514 131.619 24.6514C133.637 24.6514 135.163 23.2043 135.163 20.7959Z" fill="#40A944"></path>
                        <path d="M146.402 8.5625H142.367V27.7555H146.402V8.5625Z" fill="#40A944"></path>
                        <path d="M149.141 26.4622L150.487 23.5679C151.729 24.3707 153.619 24.9147 155.325 24.9147C157.19 24.9147 157.887 24.4235 157.887 23.6471C157.887 21.3708 149.479 23.7 149.479 18.1385C149.479 15.4978 151.861 13.6387 155.917 13.6387C157.829 13.6387 159.952 14.077 161.272 14.8534L159.925 17.7266C158.552 16.9502 157.184 16.6914 155.917 16.6914C154.105 16.6914 153.329 17.2618 153.329 17.9854C153.329 20.3673 161.737 18.0646 161.737 23.5468C161.737 26.1347 159.334 27.9674 155.167 27.9674C152.811 27.9674 150.435 27.3231 149.141 26.4675V26.4622Z" fill="#40A944"></path>
                        <path d="M178.226 20.9541C178.226 25.0948 175.332 27.8835 171.45 27.8835C169.279 27.8835 167.415 26.9539 166.279 25.1952V32.7742H164.441V14.1515H166.2V16.8398C167.315 15.0283 169.2 14.0459 171.45 14.0459C175.332 14.0459 178.226 16.8398 178.226 20.9541ZM176.388 20.9541C176.388 17.8011 174.191 15.6515 171.318 15.6515C168.445 15.6515 166.248 17.7958 166.248 20.9541C166.248 24.1125 168.418 26.2568 171.318 26.2568C174.218 26.2568 176.388 24.1336 176.388 20.9541Z" fill="var(--clr-text)"></path>
                        <path d="M180.129 20.9541C180.129 16.919 183.076 14.0459 187.058 14.0459C191.041 14.0459 193.966 16.919 193.966 20.9541C193.966 24.9892 191.046 27.8835 187.058 27.8835C183.071 27.8835 180.129 24.9892 180.129 20.9541ZM192.102 20.9541C192.102 17.7747 189.953 15.6515 187.058 15.6515C184.164 15.6515 181.988 17.7747 181.988 20.9541C181.988 24.1336 184.159 26.2568 187.058 26.2568C189.958 26.2568 192.102 24.1336 192.102 20.9541Z" fill="var(--clr-text)"></path>
                        <path d="M196.754 14.1523H198.592V27.7575H196.754V14.1523Z" fill="var(--clr-text)"></path>
                        <path d="M215.288 19.8661V27.7567H213.45V20.051C213.45 17.1778 211.95 15.7043 209.362 15.7043C206.442 15.7043 204.604 17.5159 204.604 20.6161V27.7567H202.766V14.1515H204.524V16.6602C205.507 15.0071 207.345 14.0459 209.695 14.0459C213.006 14.0459 215.283 15.9578 215.283 19.8661H215.288Z" fill="var(--clr-text)"></path>
                        <path d="M59.3346 24.2389C58.8699 24.5769 58.2731 24.7565 57.6815 24.7565C56.5935 24.7565 55.9756 24.1122 55.9756 22.9185V17.2568H59.4139V14.1512H55.9756V10.2852L51.9405 11.2411V14.1512H50.2188V17.2568H51.9405V22.9714C51.9405 26.2829 53.8313 27.9624 57.1375 27.9624C58.3523 27.9624 59.567 27.6772 60.3962 27.0804L59.3346 24.2336V24.2389Z" fill="#40A944"></path>
                        <path d="M87.2878 24.2389C86.823 24.5769 86.2262 24.7565 85.6347 24.7565C84.5467 24.7565 83.9287 24.1122 83.9287 22.9185V17.2568H87.367V14.1512H83.9287V10.2852L79.8936 11.2411V14.1512H78.1719V17.2568H79.8936V22.9714C79.8936 26.2829 81.7844 27.9624 85.0907 27.9624C86.3054 27.9624 87.5202 27.6772 88.3494 27.0804L87.2878 24.2336V24.2389Z" fill="#40A944"></path>
                        <path d="M119.713 11.8222C120.827 11.8222 121.73 10.9189 121.73 9.80465C121.73 8.69039 120.827 7.78711 119.713 7.78711C118.599 7.78711 117.695 8.69039 117.695 9.80465C117.695 10.9189 118.599 11.8222 119.713 11.8222Z" fill="#40A944"></path>
                        <path d="M197.674 11.8222C198.788 11.8222 199.691 10.9189 199.691 9.80465C199.691 8.69039 198.788 7.78711 197.674 7.78711C196.56 7.78711 195.656 8.69039 195.656 9.80465C195.656 10.9189 196.56 11.8222 197.674 11.8222Z" fill="#40A944"></path>
                        <path d="M225.15 25.6071C224.633 26.0719 223.909 26.3043 223.133 26.3043C221.606 26.3043 220.803 25.4223 220.803 23.822V15.699H224.918V14.1462H220.803V10.2168L218.965 11.1728V14.1462H217.043V15.699H218.965V23.9223C218.965 26.4311 220.386 27.8782 222.948 27.8782C224.009 27.8782 225.097 27.5666 225.794 26.9222L225.15 25.6019V25.6071Z" fill="var(--clr-text)"></path>
                        <path d="M27.3002 39.5829C33.1626 39.4561 38.4072 35.87 40.8842 30.5568C42.3208 27.4829 43.0444 24.013 42.8542 20.3582C42.2785 9.30395 33.1521 0.394029 22.082 0.0718569C9.95038 -0.282005 0 9.44655 0 21.5043C0 30.7099 5.80439 38.5583 13.9485 41.6004C13.1721 40.7871 12.6017 39.7941 12.2531 38.6217C11.7091 36.8101 11.725 34.6711 12.2954 32.2046L15.2319 19.8881H9.16343L10.1564 15.5837L10.4257 14.4429H16.5259L16.6368 13.9411L18.0628 7.76175L26.9727 6.05582L25.1506 13.9411L23.8408 19.8881L20.8197 33.2609C20.3602 35.2626 20.5398 36.8101 21.3743 37.8928C21.3743 37.8928 22.6207 39.6832 27.3002 39.5829ZM29.4128 13.4605C31.8951 12.9904 34.0288 15.1242 33.5588 17.6065C33.2947 18.9902 32.1803 20.1099 30.7912 20.374C28.3089 20.8441 26.1752 18.7103 26.6453 16.228C26.9093 14.8443 28.0237 13.7246 29.4128 13.4605Z" fill="#40A944"></path>
                    </svg>
                    <svg class="tp-logo-mobile" xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42" fill="none">
                        <path d="M27.3002 39.5829C33.1626 39.4561 38.4072 35.87 40.8842 30.5568C42.3208 27.4829 43.0444 24.013 42.8542 20.3582C42.2785 9.30395 33.1521 0.394029 22.082 0.0718569C9.95038 -0.282005 0 9.44655 0 21.5043C0 30.7099 5.80439 38.5583 13.9485 41.6004C13.1721 40.7871 12.6017 39.7941 12.2531 38.6217C11.7091 36.8101 11.725 34.6711 12.2954 32.2046L15.2319 19.8881H9.16343L10.1564 15.5837L10.4257 14.4429H16.5259L16.6368 13.9411L18.0628 7.76175L26.9727 6.05582L25.1506 13.9411L23.8408 19.8881L20.8197 33.2609C20.3602 35.2626 20.5398 36.8101 21.3743 37.8928C21.3743 37.8928 22.6207 39.6832 27.3002 39.5829ZM29.4128 13.4605C31.8951 12.9904 34.0288 15.1242 33.5588 17.6065C33.2947 18.9902 32.1803 20.1099 30.7912 20.374C28.3089 20.8441 26.1752 18.7103 26.6453 16.228C26.9093 14.8443 28.0237 13.7246 29.4128 13.4605Z" fill="#40A944"></path>
                    </svg>
                </a>
                <div class="tp-categories-wrapper">
                    <button class="tp-categories-btn" onclick="toggleCategoriesDropdown()">
                        <i class="fa-sharp fa-light fa-grid-2"></i>
                        <span>Categories</span>
                        <i class="fa-sharp fa-light fa-chevron-down"></i>
                    </button>
                    <div class="tp-categories-dropdown" id="categoriesDropdown">
                        <button class="tp-categories-close" onclick="closeCategoriesDropdown()">
                            <i class="fa-sharp fa-light fa-xmark"></i>
                        </button>
                        <div class="tp-categories-header-title">
                            <h2>Explore <span>Categories</span></h2>
                            <p>Find the perfect tutorial for your learning journey</p>
                        </div>
                        <div class="tp-categories-grid">
                            <a href="/python_technologies_tutorials.htm" class="tp-cat-link">Python Technologies</a>
                            <a href="/database_tutorials.htm" class="tp-cat-link">Databases</a>
                            <a href="/computer_programming_tutorials.htm" class="tp-cat-link">Computer Programming</a>
                            <a href="/web_development_tutorials.htm" class="tp-cat-link">Web Development</a>
                            <a href="/java_technology_tutorials.htm" class="tp-cat-link">Java Technologies</a>
                            <a href="/computer_science_tutorials.htm" class="tp-cat-link">Computer Science</a>
                            <a href="/mobile_development_tutorials.htm" class="tp-cat-link">Mobile Development</a>
                            <a href="/big_data_tutorials.htm" class="tp-cat-link">Big Data & Analytics</a>
                            <a href="/microsoft_technologies_tutorials.htm" class="tp-cat-link">Microsoft Technologies</a>
                            <a href="/devops_tutorials.htm" class="tp-cat-link">DevOps</a>
                            <a href="/latest_technologies.htm" class="tp-cat-link">Latest Technologies</a>
                            <a href="/machine_learning_tutorials.htm" class="tp-cat-link">Machine Learning</a>
                            <a href="/digital_marketing_tutorials.htm" class="tp-cat-link">Digital Marketing</a>
                            <a href="/software_quality_tutorials.htm" class="tp-cat-link">Software Quality</a>
                            <a href="/management_tutorials.htm" class="tp-cat-link">Management Tutorials</a>
                            <a href="/top-categories.htm" class="tp-cat-link-all">
                                <i class="fa-sharp fa-light fa-grid-2"></i>
                                View All Categories
                            </a>
                        </div>
                    </div>
                </div>
                
                <script>
                function toggleCategoriesDropdown() {
                    const dropdown = document.getElementById('categoriesDropdown');
                    dropdown.classList.toggle('active');
                }
                
                function closeCategoriesDropdown() {
                    const dropdown = document.getElementById('categoriesDropdown');
                    dropdown.classList.remove('active');
                }
                </script>
            </div>
            <div class="tp-header-right">
                <a class="tp-nav-link" href="/tutorialslibrary.htm">
                    <i class="fa-sharp fa-light fa-books" style="margin-right: 6px;"></i>
                    Tutorials
                </a>
                <a class="tp-nav-link" href="https://market.tutorialspoint.com/index.asp">
                    <i class="fa-sharp fa-light fa-circle-play" style="margin-right: 6px; color: #ff0000;"></i>
                    Courses
                </a>
		<a class="tp-nav-link" href="/jobs/index.htm"><i class="fa-sharp fa-light fa-briefcase" style="margin-right:6px;"></i> Jobs</a>
                <a class="tp-login-btn" href="https://market.tutorialspoint.com/login.jsp">Login</a>
            </div>
        </div>
    </header>

    <div class="tp-main-content" style="padding-top: 0;">
        <div class="container">
          <img src="/images/tp_hero_image.svg" class="hero-image hero-light" style="width: 100%; height: auto;"/>
          <img src="/images/tp_hero_image_dark.svg" class="hero-image hero-dark" style="width: 100%; height: auto;"/>
        </div>
    </div>

    <!-- ===== Tutorix Courses (carousel) — paste this whole block immediately BEFORE the
       <div class="tp-main-content"> that holds "Master DSA Topics - June, 2026").
       Uses the Swiper library already loaded on this page. ===== -->
       <div class="tp-main-content tpx-courses">
  <div class="container">
    <div class="tpx-top">
      <div>
        <h2 class="section-title">Learn from <span>Tutorix AI Tutor</span></h2>
        <p class="section-subtitle">Guided, hands-on courses with a live AI tutor</p>
      </div>
      <div class="tpx-nav">
        <button class="tpx-navbtn tpx-course-prev" aria-label="Previous"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg></button>
        <button class="tpx-navbtn tpx-course-next" aria-label="Next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 18l6-6-6-6"/></svg></button>
      </div>
    </div>

    <div class="swiper tpx-slider">
      <div class="swiper-wrapper">

        <!-- 1. Python -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/python" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#2563eb;--acc-bg:#e7eefe">
          <div class="tpx-head" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="20" font-weight="800" fill="#fff">Python</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>Python</h4>
            <p class="tpx-desc">Python from basics to real projects &mdash; syntax, data structures, scripting, data and AI. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Beginner</span><span class="tpx-tag">Data</span><span class="tpx-tag">AI</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 2. VLSI Design -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/vlsi" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#059669;--acc-bg:#d1fae5">
          <div class="tpx-head" style="background:linear-gradient(135deg,#059669,#064e3b)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="70" y="25" width="60" height="50" rx="6" fill="none" stroke="#ffffff" stroke-width="2.4"/>
              <rect x="85" y="40" width="30" height="20" rx="3" fill="#ffffff" opacity="0.85"/>
              <line x1="80" y1="25" x2="80" y2="12" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="100" y1="25" x2="100" y2="12" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="120" y1="25" x2="120" y2="12" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="80" y1="75" x2="80" y2="88" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="100" y1="75" x2="100" y2="88" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="120" y1="75" x2="120" y2="88" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="70" y1="40" x2="57" y2="40" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="70" y1="60" x2="57" y2="60" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="130" y1="40" x2="143" y2="40" stroke="#ffffff" stroke-width="2.4"/>
              <line x1="130" y1="60" x2="143" y2="60" stroke="#ffffff" stroke-width="2.4"/>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>VLSI Design</h4>
            <p class="tpx-desc">From silicon physics to a tape-out-ready chip &mdash; MOS devices, RTL design, UVM verification, DFT and the full RTL-to-GDSII physical design flow, beginner to industry-ready.</p>
            <div class="tpx-tags"><span class="tpx-tag">VLSI</span><span class="tpx-tag">Verilog</span><span class="tpx-tag">UVM</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 3. Blockchain & Web3 -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/blockchain" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#b45309;--acc-bg:#fdf0d9">
          <div class="tpx-head" style="background:linear-gradient(135deg,#f59e0b,#b45309)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g fill="none" stroke="#ffffff" stroke-width="3">
                <rect x="66" y="18" width="26" height="26" rx="5"/><rect x="108" y="18" width="26" height="26" rx="5"/>
                <rect x="66" y="52" width="26" height="26" rx="5"/><rect x="108" y="52" width="26" height="26" rx="5"/>
                <line x1="92" y1="31" x2="108" y2="31"/><line x1="79" y1="44" x2="79" y2="52"/>
                <line x1="121" y1="44" x2="121" y2="52"/><line x1="92" y1="65" x2="108" y2="65"/>
              </g>
              <text x="100" y="99" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="15" font-weight="800" fill="#fff" letter-spacing="1">BLOCKCHAIN</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>Blockchain &amp; Web3</h4>
            <p class="tpx-desc">Blockchain &amp; Web3 from how a block is hashed and chained to writing and deploying real smart contracts and dApps. Beginner to advanced, taught step by step by your AI tutor, with hands-on labs.</p>
            <div class="tpx-tags"><span class="tpx-tag">Blockchain</span><span class="tpx-tag">Web3</span><span class="tpx-tag">Solidity</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 4. Quantum Computing -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/quantum-computing" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#047857;--acc-bg:#d6f5e8">
          <div class="tpx-head" style="background:linear-gradient(135deg,#10b981,#047857)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g fill="none" stroke="#ffffff" stroke-width="2.4" opacity="0.85">
                <ellipse cx="100" cy="55" rx="52" ry="19"/>
                <ellipse cx="100" cy="55" rx="52" ry="19" transform="rotate(60 100 55)"/>
                <ellipse cx="100" cy="55" rx="52" ry="19" transform="rotate(120 100 55)"/>
              </g>
              <g fill="#ffffff"><circle cx="152" cy="55" r="3.5"/><circle cx="74" cy="20" r="3.5"/><circle cx="74" cy="90" r="3.5"/></g>
              <text x="100" y="66" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="30" font-weight="800" fill="#fff">QC</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>Quantum Computing</h4>
            <p class="tpx-desc">Quantum Computing from qubits to real quantum algorithms, hardware and applications. Beginner to advanced, taught step by step by your AI tutor, with hands-on labs.</p>
            <div class="tpx-tags"><span class="tpx-tag">Quantum</span><span class="tpx-tag">Computing</span><span class="tpx-tag">Qiskit</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 5. AI & GenAI -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/ai" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#6d28d9;--acc-bg:#ede9fe">
          <div class="tpx-head" style="background:linear-gradient(135deg,#7c3aed,#5b21b6)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g stroke="#ffffff" stroke-width="2" opacity="0.5">
                <line x1="42" y1="30" x2="92" y2="55"/><line x1="42" y1="80" x2="92" y2="55"/>
                <line x1="108" y1="55" x2="158" y2="30"/><line x1="108" y1="55" x2="158" y2="80"/>
              </g>
              <g fill="#ffffff"><circle cx="42" cy="30" r="6"/><circle cx="42" cy="80" r="6"/><circle cx="158" cy="30" r="6"/><circle cx="158" cy="80" r="6"/></g>
              <text x="100" y="68" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="44" font-weight="800" fill="#fff">AI</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>AI &amp; GenAI</h4>
            <p class="tpx-desc">AI &amp; Generative AI from foundations to shipping real products &mdash; deep learning, MLOps and a launch capstone. Beginner to advanced, taught step by step by your AI tutor, with hands-on labs.</p>
            <div class="tpx-tags"><span class="tpx-tag">AI</span><span class="tpx-tag">GenAI</span><span class="tpx-tag">Machine Learning</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 6. Performance Marketing -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/performance-marketing" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#be123c;--acc-bg:#ffe4e9">
          <div class="tpx-head" style="background:linear-gradient(135deg,#e11d48,#9f1239)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="22" width="90" height="64" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="38" x2="145" y2="38" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="30" r="2.4" fill="#fff"/><circle cx="72" cy="30" r="2.4" fill="#fff"/><circle cx="80" cy="30" r="2.4" fill="#fff"/>
              <text x="100" y="62" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="22" font-weight="800" fill="#fff">PM</text>
              <path d="M64 80 L82 72 L96 76 L114 64 L130 68" stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M122 64 L130 68 L128 60" stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>Performance Marketing</h4>
            <p class="tpx-desc">Performance Marketing &mdash; running profitable paid ad campaigns end to end, from strategy and funnels to the money math. Taught step by step by your AI tutor, with hands-on practice at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Marketing</span><span class="tpx-tag">Ads</span><span class="tpx-tag">Growth</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 7. Java -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/java" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#d97706;--acc-bg:#fdf1e1">
          <div class="tpx-head" style="background:linear-gradient(135deg,#f59e0b,#d97706)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="26" font-weight="800" fill="#fff">Java</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>Java</h4>
            <p class="tpx-desc">Java object-oriented programming from the ground up, for backend and enterprise work. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">OOP</span><span class="tpx-tag">Backend</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 8. C++ -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/cpp" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#0284c7;--acc-bg:#e0f2fe">
          <div class="tpx-head" style="background:linear-gradient(135deg,#0ea5e9,#0284c7)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="26" font-weight="800" fill="#fff">C++</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>C++</h4>
            <p class="tpx-desc">C++ for systems programming &mdash; object-oriented design and the STL. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Systems</span><span class="tpx-tag">OOP</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 9. C -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/c" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#0e7490;--acc-bg:#d8f3f9">
          <div class="tpx-head" style="background:linear-gradient(135deg,#06b6d4,#0e7490)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="73" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="28" font-weight="800" fill="#fff">C</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>C</h4>
            <p class="tpx-desc">C programming from syntax to pointers and memory &mdash; the foundation systems language. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Procedural</span><span class="tpx-tag">Memory</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 10. DSA -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/dsa" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#4f46e5;--acc-bg:#eaeafe">
          <div class="tpx-head" style="background:linear-gradient(135deg,#6366f1,#4338ca)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="26" font-weight="800" fill="#fff">DSA</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>DSA</h4>
            <p class="tpx-desc">Data Structures &amp; Algorithms &mdash; arrays, trees, graphs and the algorithms that move them, for interviews and core CS. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Algorithms</span><span class="tpx-tag">Interview</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 11. HTML -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/html" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#ea580c;--acc-bg:#ffedd5">
          <div class="tpx-head" style="background:linear-gradient(135deg,#f97316,#ea580c)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="24" font-weight="800" fill="#fff">HTML</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>HTML</h4>
            <p class="tpx-desc">HTML for structuring the web &mdash; tags, forms and semantic markup. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Web</span><span class="tpx-tag">Markup</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

        <!-- 12. CSS -->
        <div class="swiper-slide">
        <a href="https://ai.tutorix.com/css" target="_blank" rel="nofollow noopener" class="tpx-card" style="--acc:#db2777;--acc-bg:#fce7f3">
          <div class="tpx-head" style="background:linear-gradient(135deg,#ec4899,#db2777)">
            <svg viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="55" y="24" width="90" height="62" rx="9" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-width="3"/>
              <line x1="55" y1="40" x2="145" y2="40" stroke="#ffffff" stroke-width="3"/>
              <circle cx="64" cy="32" r="2.4" fill="#fff"/><circle cx="72" cy="32" r="2.4" fill="#fff"/><circle cx="80" cy="32" r="2.4" fill="#fff"/>
              <text x="100" y="72" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="26" font-weight="800" fill="#fff">CSS</text>
            </svg>
          </div>
          <div class="tpx-body">
            <h4>CSS</h4>
            <p class="tpx-desc">CSS for styling the web &mdash; layout, flexbox, grid and responsive design. Taught step by step by your AI tutor, with hands-on labs at every stage.</p>
            <div class="tpx-tags"><span class="tpx-tag">Web</span><span class="tpx-tag">Styling</span></div>
            <span class="tpx-btn">Start Learning</span>
          </div>
        </a>
        </div>

      </div>
    </div>
  </div>
</div>

  <script>
  (function(){
    function init(){
      if (typeof Swiper === 'undefined'){ return setTimeout(init, 60); }
      new Swiper('.tpx-slider', {
        slidesPerView: 'auto',
        spaceBetween: 18,
        freeMode: true,
        navigation: { nextEl: '.tpx-course-next', prevEl: '.tpx-course-prev' }
      });
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
    else init();
  })();
  </script>
</div>
<!-- ===== end Tutorix Courses ===== -->
    <div class="tp-main-content">
    <div class="container">
        <h2 class="section-title">Master <span>DSA Topics</span></h2>
        <p class="section-subtitle">Practice problems across 75+ categories</p>

        <!-- Banner Slider -->
        <div class="banner-slider-wrap">
            <div class="swiper banner-slider">
                <div class="swiper-wrapper">
                    <!-- Banner 1: DSA Learning -->
                    <div class="swiper-slide">
                        <a href="/data_structures_algorithms/index.htm" class="banner banner-green">
                            <span class="badge badge-top">🔥 HOT</span>
                            <h3>DSA Learning</h3>
                            <p>Master Data Structures & Algorithms from scratch</p>
                            <span class="btn">Start Learning →</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="30" y="10" width="90" height="70" rx="8" fill="#fff" opacity="0.9"/>
                                <rect x="38" y="20" width="35" height="6" rx="2" fill="#4caf50"/>
                                <rect x="38" y="32" width="50" height="4" rx="2" fill="#81c784"/>
                                <rect x="38" y="42" width="42" height="4" rx="2" fill="#a5d6a7"/>
                                <rect x="38" y="52" width="55" height="4" rx="2" fill="#81c784"/>
                                <rect x="38" y="62" width="38" height="4" rx="2" fill="#a5d6a7"/>
                                <circle cx="105" cy="45" r="18" fill="#66bb6a" opacity="0.3"/>
                                <path d="M98 45 L103 50 L112 40" stroke="#2e7d32" stroke-width="3" stroke-linecap="round" fill="none"/>
                                <rect x="20" y="85" width="100" height="18" rx="4" fill="#43a047"/>
                                <rect x="35" y="90" width="70" height="8" rx="3" fill="#81c784"/>
                                <rect x="35" y="90" width="45" height="8" rx="3" fill="#fff"/>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 2: AI Based Resume Builder -->
                    <div class="swiper-slide">
                        <a href="/online-resume-builder.htm" class="banner" style="background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 60%, #6d28d9 100%);">
                            <span class="badge badge-top" style="background:#f59e0b;color:#fff;">✨ AI</span>
                            <h3 style="color:#fff;">AI Resume<br>Builder</h3>
                            <p style="color:rgba(255,255,255,0.9);">Create job-winning resumes with AI in minutes</p>
                            <span class="btn" style="background:#fff;color:#4338ca;">Build Now →</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="28" y="5" width="62" height="82" rx="5" fill="#fff" opacity="0.92"/>
                                <rect x="28" y="5" width="62" height="18" rx="5" fill="#c4b5fd" opacity="0.7"/>
                                <rect x="28" y="18" width="62" height="5" fill="#c4b5fd" opacity="0.7"/>
                                <circle cx="43" cy="13" r="7" fill="#7c3aed" opacity="0.8"/>
                                <rect x="54" y="9" width="28" height="4" rx="2" fill="#ede9fe"/>
                                <rect x="54" y="16" width="18" height="3" rx="1.5" fill="#ddd6fe" opacity="0.8"/>
                                <rect x="34" y="30" width="50" height="1.5" rx="1" fill="#e5e7eb"/>
                                <rect x="34" y="36" width="30" height="3.5" rx="1.5" fill="#a78bfa" opacity="0.8"/>
                                <rect x="34" y="43" width="50" height="2.5" rx="1" fill="#ddd6fe" opacity="0.6"/>
                                <rect x="34" y="49" width="42" height="2.5" rx="1" fill="#ddd6fe" opacity="0.5"/>
                                <rect x="34" y="55" width="46" height="2.5" rx="1" fill="#ddd6fe" opacity="0.5"/>
                                <rect x="34" y="64" width="28" height="3.5" rx="1.5" fill="#a78bfa" opacity="0.8"/>
                                <rect x="34" y="71" width="50" height="2.5" rx="1" fill="#ddd6fe" opacity="0.6"/>
                                <rect x="34" y="77" width="36" height="2.5" rx="1" fill="#ddd6fe" opacity="0.5"/>
                                <circle cx="82" cy="38" r="9" fill="#6d28d9" opacity="0.9"/>
                                <text x="77" y="42" font-size="9" fill="#fff" font-weight="bold">AI</text>
                                <circle cx="108" cy="20" r="14" fill="#7c3aed" opacity="0.2"/>
                                <circle cx="108" cy="20" r="9" fill="#7c3aed" opacity="0.3"/>
                                <path d="M108 13 L109.5 17.5 L114 19 L109.5 20.5 L108 25 L106.5 20.5 L102 19 L106.5 17.5 Z" fill="#fff" opacity="0.9"/>
                                <rect x="18" y="92" width="100" height="16" rx="4" fill="#4338ca" opacity="0.85"/>
                                <rect x="30" y="97" width="42" height="6" rx="3" fill="#fff" opacity="0.9"/>
                                <rect x="80" y="97" width="28" height="6" rx="3" fill="#a78bfa" opacity="0.5"/>
                            </svg>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="/online_sql_editor.htm" class="banner banner-red">
                            <span class="badge badge-top">🐘 NEW</span>
                            <h3>Online SQL<br>Editor</h3>
                            <p>Write & run PostgreSQL queries in your browser</p>
                            <span class="btn">Try Now →</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="8" y="8" width="60" height="45" rx="5" fill="#fff" opacity="0.92"/>
                                <rect x="8" y="8" width="60" height="13" rx="5" fill="#d32f2f" opacity="0.85"/>
                                <rect x="13" y="12" width="14" height="4" rx="1.5" fill="#fff" opacity="0.9"/>
                                <rect x="31" y="12" width="12" height="4" rx="1.5" fill="#fff" opacity="0.7"/>
                                <rect x="47" y="12" width="14" height="4" rx="1.5" fill="#fff" opacity="0.8"/>
                                <rect x="13" y="26" width="12" height="3" rx="1" fill="#c62828" opacity="0.35"/>
                                <rect x="31" y="26" width="10" height="3" rx="1" fill="#c62828" opacity="0.25"/>
                                <rect x="47" y="26" width="14" height="3" rx="1" fill="#c62828" opacity="0.3"/>
                                <rect x="13" y="33" width="14" height="3" rx="1" fill="#c62828" opacity="0.25"/>
                                <rect x="31" y="33" width="8" height="3" rx="1" fill="#c62828" opacity="0.2"/>
                                <rect x="47" y="33" width="11" height="3" rx="1" fill="#c62828" opacity="0.25"/>
                                <rect x="13" y="40" width="10" height="3" rx="1" fill="#c62828" opacity="0.2"/>
                                <rect x="31" y="40" width="12" height="3" rx="1" fill="#c62828" opacity="0.15"/>
                                <rect x="47" y="40" width="13" height="3" rx="1" fill="#c62828" opacity="0.2"/>
                                <ellipse cx="100" cy="20" rx="20" ry="7" fill="#ef5350" opacity="0.5"/>
                                <rect x="80" y="20" width="40" height="30" fill="#c62828" opacity="0.2"/>
                                <ellipse cx="100" cy="50" rx="20" ry="7" fill="#c62828" opacity="0.25"/>
                                <ellipse cx="100" cy="30" rx="16" ry="4.5" fill="#ef5350" opacity="0.3" stroke="#ef9a9a" stroke-width="0.5"/>
                                <ellipse cx="100" cy="40" rx="16" ry="4.5" fill="#ef5350" opacity="0.3" stroke="#ef9a9a" stroke-width="0.5"/>
                                <rect x="5" y="60" width="82" height="28" rx="5" fill="#3e1010" opacity="0.85"/>
                                <text x="10" y="73" fill="#ef9a9a" font-size="6" font-family="monospace" font-weight="bold">SELECT</text>
                                <text x="42" y="73" fill="#ffcdd2" font-size="6" font-family="monospace">*</text>
                                <text x="48" y="73" fill="#ef9a9a" font-size="6" font-family="monospace" font-weight="bold">FROM</text>
                                <text x="10" y="82" fill="#e57373" font-size="5.5" font-family="monospace">employees</text>
                                <circle cx="105" cy="75" r="13" fill="#d32f2f"/>
                                <polygon points="101,69 101,81 112,75" fill="#fff"/>
                            </svg>
                        </a>
                    </div>

                    <div class="swiper-slide">
                        <a href="/compilers/index.htm" class="banner" style="background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 30%, #ffd54f 100%);">
                            <span class="badge badge-top">⚡ PRO</span>
                            <h3 style="color:#e65100;">CodingGround</h3>
                            <p style="color:#bf360c;">Compile & run 70+ languages online</p>
                            <span class="btn" style="background:#f57f17;color:#fff;">Start Coding →</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="10" y="0" width="115" height="70" rx="8" fill="#1e1e2e" opacity="0.92"/>
                                <rect x="10" y="0" width="115" height="14" rx="8" fill="#2d2d3f"/>
                                <circle cx="20" cy="7" r="3" fill="#ff5f56"/>
                                <circle cx="29" cy="7" r="3" fill="#ffbd2e"/>
                                <circle cx="38" cy="7" r="3" fill="#27c93f"/>
                                <rect x="75" y="5" width="40" height="5" rx="2" fill="#555" opacity="0.4"/>
                                <text x="18" y="25" fill="#c792ea" font-size="5.5" font-family="monospace" font-weight="bold">public</text>
                                <text x="44" y="25" fill="#82aaff" font-size="5.5" font-family="monospace">class</text>
                                <text x="62" y="25" fill="#ffcb6b" font-size="5.5" font-family="monospace">Hello</text>
                                <text x="82" y="25" fill="#89ddff" font-size="5.5" font-family="monospace">{</text>
                                <text x="24" y="35" fill="#c792ea" font-size="5" font-family="monospace">public static void</text>
                                <text x="24" y="44" fill="#82aaff" font-size="5" font-family="monospace">main</text>
                                <text x="42" y="44" fill="#89ddff" font-size="5" font-family="monospace">(String[] args)</text>
                                <text x="30" y="53" fill="#f07178" font-size="5" font-family="monospace">System</text>
                                <text x="52" y="53" fill="#89ddff" font-size="5" font-family="monospace">.out.</text>
                                <text x="66" y="53" fill="#82aaff" font-size="5" font-family="monospace">println</text>
                                <text x="30" y="62" fill="#c3e88d" font-size="5" font-family="monospace">"Hello, World!"</text>
                                <rect x="10" y="74" width="115" height="20" rx="5" fill="#0d0d14" opacity="0.85"/>
                                <text x="16" y="87" fill="#27c93f" font-size="5.5" font-family="monospace">▶ Hello, World!</text>
                                <rect x="85" y="80" width="35" height="9" rx="3" fill="#27c93f" opacity="0.15"/>
                                <text x="89" y="87" fill="#27c93f" font-size="4.5" font-family="monospace">✓ Success</text>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 6: Interview -->
                    <div class="swiper-slide">
                        <a href="/data_structures_algorithms/data_structures_algorithms_interview_questions.htm" class="banner banner-blue">
                            <h3>Top Interview<br>Questions</h3>
                            <p>Crack your dream job</p>
                            <span class="btn">Get Started</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="70" y="5" width="50" height="100" rx="4" fill="#1565c0" opacity="0.3"/>
                                <rect x="75" y="12" width="3" height="85" fill="#90caf9" opacity="0.4"/>
                                <rect x="82" y="12" width="3" height="85" fill="#90caf9" opacity="0.3"/>
                                <rect x="89" y="12" width="3" height="85" fill="#90caf9" opacity="0.4"/>
                                <rect x="96" y="12" width="3" height="85" fill="#90caf9" opacity="0.3"/>
                                <rect x="103" y="12" width="3" height="85" fill="#90caf9" opacity="0.4"/>
                                <rect x="15" y="15" width="50" height="26" rx="6" fill="#e3f2fd" opacity="0.9"/>
                                <rect x="20" y="22" width="28" height="4" rx="2" fill="#1976d2"/>
                                <rect x="20" y="30" width="38" height="3" rx="1" fill="#1976d2" opacity="0.5"/>
                                <rect x="28" y="48" width="45" height="24" rx="6" fill="#bbdefb"/>
                                <rect x="33" y="54" width="22" height="4" rx="2" fill="#1565c0"/>
                                <rect x="33" y="62" width="32" height="3" rx="1" fill="#1565c0" opacity="0.5"/>
                                <rect x="10" y="78" width="55" height="22" rx="6" fill="#e3f2fd" opacity="0.8"/>
                                <rect x="15" y="84" width="30" height="4" rx="2" fill="#1976d2"/>
                                <rect x="15" y="92" width="42" height="3" rx="1" fill="#1976d2" opacity="0.5"/>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 2: Quest -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/cheatsheets.htm" class="banner banner-violet">
                            <h3>Cheetsheet <span class="badge">NEW</span></h3>
                            <p>Coding knowledge in the form of pills</p>
                            <span class="btn">⚔️ Begin Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <path d="M10 85 Q30 70 45 75 Q65 60 80 65 Q100 50 115 40" stroke="#e1bee7" stroke-width="2" stroke-dasharray="6 4" fill="none"/>
                                <circle cx="10" cy="85" r="4" fill="#e1bee7"/>
                                <circle cx="45" cy="75" r="4" fill="#e1bee7"/>
                                <circle cx="80" cy="65" r="4" fill="#e1bee7"/>
                                <rect x="25" y="40" width="18" height="18" rx="3" fill="#f48fb1" transform="rotate(15 34 49)"/>
                                <circle cx="70" cy="35" r="12" fill="#7c4dff"/>
                                <rect x="95" y="60" width="14" height="14" rx="2" fill="#ffb74d" transform="rotate(-10 102 67)"/>
                                <rect x="100" y="15" width="28" height="20" rx="4" fill="#8d6e63"/>
                                <rect x="100" y="15" width="28" height="9" rx="4" fill="#a1887f"/>
                                <rect x="110" y="20" width="8" height="10" rx="2" fill="#ffc107"/>
                            </svg>
                        </a>
                    </div>



                    <!-- Banner 3: Python -->
                    <div class="swiper-slide">
                        <a href="/python/index.htm" class="banner banner-python">
                            <h3>Python</h3>
                            <p>30 Days Challenge<br>Beginner Friendly</p>
                            <span class="btn">Start Learning</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="40" y="5" width="80" height="95" rx="8" fill="#fff" opacity="0.95"/>
                                <rect x="40" y="5" width="80" height="26" rx="8" fill="#306998"/>
                                <rect x="40" y="26" width="80" height="5" fill="#306998"/>
                                <text x="58" y="22" font-size="10" fill="#FFD43B" font-weight="600">Python</text>
                                <text x="55" y="58" font-size="18" fill="#306998" font-weight="700">DAY</text>
                                <text x="60" y="88" font-size="26" fill="#306998" font-weight="800">30</text>
                                <circle cx="108" cy="82" r="12" fill="#FFD43B" stroke="#306998" stroke-width="2"/>
                                <path d="M102 82 L106 86 L114 77" stroke="#306998" stroke-width="2.5" stroke-linecap="round" fill="none"/>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 4: Linked List -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/topic/linked-list" class="banner banner-cyan">
                            <h3>Linked List</h3>
                            <p>Master pointers & node operations</p>
                            <span class="btn">Start Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <!-- Node 1 -->
                                <rect x="10" y="40" width="28" height="28" rx="6" fill="#fff" opacity="0.9"/>
                                <text x="18" y="58" font-size="12" fill="#00838f" font-weight="700">5</text>
                                <!-- Arrow 1 -->
                                <line x1="38" y1="54" x2="48" y2="54" stroke="#fff" stroke-width="2"/>
                                <path d="M46 50 L52 54 L46 58" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
                                <!-- Node 2 -->
                                <rect x="52" y="40" width="28" height="28" rx="6" fill="#fff" opacity="0.9"/>
                                <text x="60" y="58" font-size="12" fill="#00838f" font-weight="700">12</text>
                                <!-- Arrow 2 -->
                                <line x1="80" y1="54" x2="90" y2="54" stroke="#fff" stroke-width="2"/>
                                <path d="M88 50 L94 54 L88 58" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
                                <!-- Node 3 -->
                                <rect x="94" y="40" width="28" height="28" rx="6" fill="#fff" opacity="0.9"/>
                                <text x="102" y="58" font-size="12" fill="#00838f" font-weight="700">8</text>
                                <!-- NULL -->
                                <text x="70" y="85" font-size="10" fill="#fff" font-weight="600" opacity="0.8">NULL →</text>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 5: Tree -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/topic/tree" class="banner banner-amber">
                            <h3>Tree</h3>
                            <p>Binary Tree, BST, AVL & more</p>
                            <span class="btn">Explore Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <!-- Root node -->
                                <circle cx="75" cy="20" r="14" fill="#fff" opacity="0.9"/>
                                <text x="70" y="25" font-size="12" fill="#e65100" font-weight="700">10</text>
                                <!-- Left child -->
                                <line x1="65" y1="32" x2="45" y2="48" stroke="#fff" stroke-width="2" opacity="0.7"/>
                                <circle cx="40" cy="55" r="12" fill="#fff" opacity="0.85"/>
                                <text x="35" y="60" font-size="11" fill="#e65100" font-weight="700">5</text>
                                <!-- Right child -->
                                <line x1="85" y1="32" x2="105" y2="48" stroke="#fff" stroke-width="2" opacity="0.7"/>
                                <circle cx="110" cy="55" r="12" fill="#fff" opacity="0.85"/>
                                <text x="103" y="60" font-size="11" fill="#e65100" font-weight="700">15</text>
                                <!-- Left-left -->
                                <line x1="32" y1="65" x2="22" y2="78" stroke="#fff" stroke-width="2" opacity="0.6"/>
                                <circle cx="18" cy="85" r="10" fill="#fff" opacity="0.8"/>
                                <text x="14" y="89" font-size="9" fill="#e65100" font-weight="700">2</text>
                                <!-- Left-right -->
                                <line x1="48" y1="65" x2="58" y2="78" stroke="#fff" stroke-width="2" opacity="0.6"/>
                                <circle cx="62" cy="85" r="10" fill="#fff" opacity="0.8"/>
                                <text x="58" y="89" font-size="9" fill="#e65100" font-weight="700">7</text>
                                <!-- Right-right -->
                                <line x1="118" y1="65" x2="118" y2="78" stroke="#fff" stroke-width="2" opacity="0.6"/>
                                <circle cx="118" cy="88" r="10" fill="#fff" opacity="0.8"/>
                                <text x="112" y="92" font-size="9" fill="#e65100" font-weight="700">20</text>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 7: Graph -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/topic/graph" class="banner banner-purple">
                            <h3>Graph Algorithms</h3>
                            <p>Master BFS, DFS, Dijkstra & more</p>
                            <span class="btn">Explore Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <circle cx="45" cy="22" r="12" fill="#fff" opacity="0.9"/>
                                <circle cx="95" cy="15" r="12" fill="#fff" opacity="0.85"/>
                                <circle cx="85" cy="55" r="12" fill="#fff" opacity="0.9"/>
                                <circle cx="45" cy="78" r="12" fill="#fff" opacity="0.85"/>
                                <circle cx="100" cy="85" r="12" fill="#fff" opacity="0.9"/>
                                <line x1="45" y1="22" x2="95" y2="15" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <line x1="95" y1="15" x2="85" y2="55" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <line x1="45" y1="22" x2="85" y2="55" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <line x1="85" y1="55" x2="45" y2="78" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <line x1="85" y1="55" x2="100" y2="85" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <line x1="45" y1="78" x2="100" y2="85" stroke="#fff" stroke-width="2" opacity="0.5"/>
                                <text x="41" y="27" font-size="10" fill="#7b1fa2" font-weight="700">A</text>
                                <text x="91" y="20" font-size="10" fill="#7b1fa2" font-weight="700">B</text>
                                <text x="81" y="60" font-size="10" fill="#7b1fa2" font-weight="700">C</text>
                                <text x="41" y="83" font-size="10" fill="#7b1fa2" font-weight="700">D</text>
                                <text x="96" y="90" font-size="10" fill="#7b1fa2" font-weight="700">E</text>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 8: Sorting -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/topic/sorting" class="banner banner-teal">
                            <h3>Sorting Algorithms</h3>
                            <p>Quick, Merge, Heap & more</p>
                            <span class="btn">Start Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <rect x="30" y="75" width="14" height="28" rx="3" fill="#fff" opacity="0.7"/>
                                <rect x="48" y="55" width="14" height="48" rx="3" fill="#fff" opacity="0.75"/>
                                <rect x="66" y="38" width="14" height="65" rx="3" fill="#fff" opacity="0.8"/>
                                <rect x="84" y="22" width="14" height="81" rx="3" fill="#fff" opacity="0.85"/>
                                <rect x="102" y="8" width="14" height="95" rx="3" fill="#fff" opacity="0.9"/>
                                <path d="M22 18 L37 18 L30 28 Z" fill="#fff" opacity="0.6"/>
                                <line x1="30" y1="18" x2="30" y2="38" stroke="#fff" stroke-width="2" opacity="0.6"/>
                            </svg>
                        </a>
                    </div>

                    <!-- Banner 9: Recursion -->
                    <div class="swiper-slide">
                        <a href="https://www.tutorialspoint.com/topic/recursion" class="banner banner-red">
                            <h3>Recursion</h3>
                            <p>Master recursive patterns</p>
                            <span class="btn">Learn Now</span>
                            <svg class="illus" viewBox="0 0 130 110" fill="none">
                                <circle cx="80" cy="55" r="38" stroke="#fff" stroke-width="2" fill="none" opacity="0.3"/>
                                <circle cx="80" cy="55" r="28" stroke="#fff" stroke-width="2" fill="none" opacity="0.4"/>
                                <circle cx="80" cy="55" r="18" stroke="#fff" stroke-width="2" fill="none" opacity="0.6"/>
                                <circle cx="80" cy="55" r="10" fill="#fff" opacity="0.8"/>
                                <text x="72" y="59" font-size="9" fill="#c62828" font-weight="700">f(n)</text>
                                <path d="M38 25 Q25 55 38 85" stroke="#fff" stroke-width="2" fill="none" opacity="0.5"/>
                                <path d="M38 25 L43 30 L33 30 Z" fill="#fff" opacity="0.5"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Round Navigation Buttons -->
            <button class="nav-btn nav-prev">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button class="nav-btn nav-next">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 18l6-6-6-6"/></svg>
            </button>
        </div>

        <!-- Topic Cards -->
<div class="cards-container">
    <div class="cards-grid" id="cardsGrid">

        <a href="/topic/array" class="card">
            <div class="card-icon ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect></svg></div>
            <div><h4>Array</h4><div class="count">1,947 Problems</div></div>
        </a>
        <a href="/topic/string" class="card">
            <div class="card-icon ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 7V4h16v3"></path><path d="M9 20h6"></path><path d="M12 4v16"></path></svg></div>
            <div><h4>String</h4><div class="count">803 Problems</div></div>
        </a>
        <a href="/topic/hash-table" class="card">
            <div class="card-icon ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg></div>
            <div><h4>Hash Table</h4><div class="count">719 Problems</div></div>
        </a>
        <a href="/topic/dynamic-programming" class="card">
            <div class="card-icon ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg></div>
            <div><h4>Dynamic Programming</h4><div class="count">602 Problems</div></div>
        </a>
        <a href="/topic/sorting" class="card">
            <div class="card-icon ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18"></path><path d="M6 12h12"></path><path d="M9 18h6"></path></svg></div>
            <div><h4>Sorting</h4><div class="count">464 Problems</div></div>
        </a>
        <a href="/topic/greedy" class="card">
            <div class="card-icon ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg></div>
            <div><h4>Greedy</h4><div class="count">420 Problems</div></div>
        </a>
        <a href="/topic/depth-first-search" class="card">
            <div class="card-icon ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="8" x2="12" y2="12"></line><circle cx="6" cy="17" r="3"></circle><circle cx="18" cy="17" r="3"></circle><line x1="12" y1="12" x2="6" y2="14"></line><line x1="12" y1="12" x2="18" y2="14"></line></svg></div>
            <div><h4>Depth-First Search</h4><div class="count">325 Problems</div></div>
        </a>
        <div class="card see-all-btn" id="seeAllBtn">
            <div class="card-icon ic8"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v8"></path><path d="M8 12h8"></path></svg></div>
            <div><h4>See All Topics</h4><div class="count">73 Categories</div></div>
        </div>
    </div>

    <!-- Expanded View -->
    <div class="cards-expanded hidden" id="cardsExpanded">
        <div class="cards-scroll">
            <a href="/topic/array" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect></svg></div><div><h4>Array</h4><span>1,947 Problems</span></div></a>
            <a href="/topic/string" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 7V4h16v3"></path><path d="M9 20h6"></path><path d="M12 4v16"></path></svg></div><div><h4>String</h4><span>803 Problems</span></div></a>
            <a href="/topic/hash-table" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg></div><div><h4>Hash Table</h4><span>719 Problems</span></div></a>
            <a href="/topic/math" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5z"></path><path d="M12 12l10-5"></path><path d="M12 12L2 7"></path><path d="M12 12v10"></path></svg></div><div><h4>Math</h4><span>596 Problems</span></div></a>
            <a href="/topic/dynamic-programming" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg></div><div><h4>Dynamic Programming</h4><span>602 Problems</span></div></a>
            <a href="/topic/sorting" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18"></path><path d="M6 12h12"></path><path d="M9 18h6"></path></svg></div><div><h4>Sorting</h4><span>464 Problems</span></div></a>
            <a href="/topic/greedy" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg></div><div><h4>Greedy</h4><span>420 Problems</span></div></a>
            <a href="/topic/depth-first-search" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="8" x2="12" y2="12"></line><circle cx="6" cy="17" r="3"></circle><circle cx="18" cy="17" r="3"></circle><line x1="12" y1="12" x2="6" y2="14"></line><line x1="12" y1="12" x2="18" y2="14"></line></svg></div><div><h4>Depth-First Search</h4><span>325 Problems</span></div></a>
            <a href="/topic/database" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg></div><div><h4>Database</h4><span>324 Problems</span></div></a>
            <a href="/topic/binary-search" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><path d="M21 21l-4.35-4.35"></path></svg></div><div><h4>Binary Search</h4><span>309 Problems</span></div></a>
            <a href="/topic/matrix" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="6" height="6"></rect><rect x="15" y="3" width="6" height="6"></rect><rect x="9" y="9" width="6" height="6"></rect><rect x="3" y="15" width="6" height="6"></rect><rect x="15" y="15" width="6" height="6"></rect></svg></div><div><h4>Matrix</h4><span>260 Problems</span></div></a>
            <a href="/topic/tree" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="8" x2="12" y2="12"></line><circle cx="6" cy="19" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="12" y1="12" x2="6" y2="16"></line><line x1="12" y1="12" x2="18" y2="16"></line></svg></div><div><h4>Tree</h4><span>252 Problems</span></div></a>
            <a href="/topic/bit-manipulation" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div><div><h4>Bit Manipulation</h4><span>249 Problems</span></div></a>
            <a href="/topic/breadth-first-search" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><circle cx="4" cy="12" r="2"></circle><circle cx="20" cy="12" r="2"></circle><circle cx="12" cy="4" r="2"></circle><circle cx="12" cy="20" r="2"></circle><line x1="12" y1="9" x2="12" y2="6"></line><line x1="12" y1="15" x2="12" y2="18"></line><line x1="9" y1="12" x2="6" y2="12"></line><line x1="15" y1="12" x2="18" y2="12"></line></svg></div><div><h4>Breadth-First Search</h4><span>243 Problems</span></div></a>
            <a href="/topic/two-pointers" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M5 9l4 4-4 4"></path><path d="M19 9l-4 4 4 4"></path></svg></div><div><h4>Two Pointers</h4><span>223 Problems</span></div></a>
            <a href="/topic/prefix-sum" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 12h16"></path><path d="M4 6h8"></path><path d="M4 18h12"></path></svg></div><div><h4>Prefix Sum</h4><span>208 Problems</span></div></a>
            <a href="/topic/heap-(priority-queue).htm" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 12l10 5 10-5"></path></svg></div><div><h4>Heap (Priority Queue)</h4><span>196 Problems</span></div></a>
            <a href="/topic/simulation" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"></rect><path d="M12 6v12"></path><path d="M6 12h12"></path></svg></div><div><h4>Simulation</h4><span>185 Problems</span></div></a>
            <a href="/topic/binary-tree" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><circle cx="6" cy="19" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="12" y1="8" x2="6" y2="16"></line><line x1="12" y1="8" x2="18" y2="16"></line></svg></div><div><h4>Binary Tree</h4><span>177 Problems</span></div></a>
            <a href="/topic/stack" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M4 10h16"></path><path d="M10 4v16"></path></svg></div><div><h4>Stack</h4><span>172 Problems</span></div></a>
            <a href="/topic/graph" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="6" cy="6" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="18" r="3"></circle><line x1="9" y1="6" x2="15" y2="6"></line><line x1="6" y1="9" x2="6" y2="15"></line><line x1="18" y1="9" x2="18" y2="15"></line><line x1="9" y1="18" x2="15" y2="18"></line></svg></div><div><h4>Graph</h4><span>169 Problems</span></div></a>
            <a href="/topic/counting" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 20V10"></path><path d="M18 20V4"></path><path d="M6 20v-4"></path></svg></div><div><h4>Counting</h4><span>166 Problems</span></div></a>
            <a href="/topic/sliding-window" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="1" y="5" width="22" height="14" rx="2"></rect><rect x="5" y="8" width="6" height="8" rx="1" fill="currentColor" opacity="0.3"></rect></svg></div><div><h4>Sliding Window</h4><span>154 Problems</span></div></a>
            <a href="/topic/design" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg></div><div><h4>Design</h4><span>128 Problems</span></div></a>
            <a href="/topic/enumeration" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18"></path><path d="M3 12h18"></path><path d="M3 18h18"></path></svg></div><div><h4>Enumeration</h4><span>123 Problems</span></div></a>
            <a href="/topic/backtracking" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M9 14l-4 4 4 4"></path><path d="M5 18h7a4 4 0 0 0 0-8h-1"></path></svg></div><div><h4>Backtracking</h4><span>109 Problems</span></div></a>
            <a href="/topic/union-find" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="9" cy="9" r="5"></circle><circle cx="15" cy="15" r="5"></circle></svg></div><div><h4>Union Find</h4><span>89 Problems</span></div></a>
            <a href="/topic/linked-list" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="12" r="3"></circle><line x1="9" y1="12" x2="15" y2="12"></line></svg></div><div><h4>Linked List</h4><span>82 Problems</span></div></a>
            <a href="/topic/number-theory" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 19l8-14 8 14"></path><circle cx="12" cy="9" r="2"></circle></svg></div><div><h4>Number Theory</h4><span>76 Problems</span></div></a>
            <a href="/topic/ordered-set" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M8 12h8"></path></svg></div><div><h4>Ordered Set</h4><span>72 Problems</span></div></a>
            <a href="/topic/monotonic-stack" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="4" y="4" width="16" height="4"></rect><rect x="4" y="10" width="16" height="4"></rect><rect x="4" y="16" width="16" height="4"></rect></svg></div><div><h4>Monotonic Stack</h4><span>68 Problems</span></div></a>
            <a href="/topic/segment-tree" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3v18h18"></path><path d="M7 16l4-8 4 5 5-10"></path></svg></div><div><h4>Segment Tree</h4><span>65 Problems</span></div></a>
            <a href="/topic/javascript" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M12 8v8"></path><path d="M8 12h8"></path></svg></div><div><h4>JavaScript</h4><span>64 Problems</span></div></a>
            <a href="/topic/trie" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><path d="M12 8v4"></path><path d="M8 14h8"></path><path d="M6 18h4"></path><path d="M14 18h4"></path></svg></div><div><h4>Trie</h4><span>59 Problems</span></div></a>
            <a href="/topic/combinatorics" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 3l9 4.5v9L12 21l-9-4.5v-9L12 3z"></path></svg></div><div><h4>Combinatorics</h4><span>55 Problems</span></div></a>
            <a href="/topic/bitmask" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="8" height="8"></rect><rect x="13" y="3" width="8" height="8"></rect><rect x="3" y="13" width="8" height="8"></rect><rect x="13" y="13" width="8" height="8"></rect></svg></div><div><h4>Bitmask</h4><span>54 Problems</span></div></a>
            <a href="/topic/recursion" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 12a8 8 0 0 1 16 0"></path><path d="M12 12v8"></path><circle cx="12" cy="12" r="2"></circle></svg></div><div><h4>Recursion</h4><span>50 Problems</span></div></a>
            <a href="/topic/divide-and-conquer" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="6" rx="1"></rect><rect x="3" y="15" width="8" height="6" rx="1"></rect><rect x="13" y="15" width="8" height="6" rx="1"></rect></svg></div><div><h4>Divide and Conquer</h4><span>50 Problems</span></div></a>
            <a href="/topic/queue" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M3 10h18"></path></svg></div><div><h4>Queue</h4><span>50 Problems</span></div></a>
            <a href="/topic/memoization" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M4 12h16"></path><path d="M12 4v16"></path></svg></div><div><h4>Memoization</h4><span>43 Problems</span></div></a>
            <a href="/topic/binary-indexed-tree" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3v18h18"></path><rect x="7" y="10" width="3" height="8"></rect><rect x="12" y="6" width="3" height="12"></rect><rect x="17" y="13" width="3" height="5"></rect></svg></div><div><h4>Binary Indexed Tree</h4><span>42 Problems</span></div></a>
            <a href="/topic/geometry" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polygon points="12,6 14,10 18,10 15,13 16,17 12,15 8,17 9,13 6,10 10,10"></polygon></svg></div><div><h4>Geometry</h4><span>42 Problems</span></div></a>
            <a href="/topic/binary-search-tree" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="5" r="3"></circle><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="12" r="2"></circle><circle cx="4" cy="19" r="2"></circle><circle cx="12" cy="19" r="2"></circle><circle cx="20" cy="19" r="2"></circle></svg></div><div><h4>Binary Search Tree</h4><span>40 Problems</span></div></a>
            <a href="/topic/hash-function" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6"></path><circle cx="12" cy="16" r="1"></circle></svg></div><div><h4>Hash Function</h4><span>39 Problems</span></div></a>
            <a href="/topic/string-matching" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 7h16"></path><path d="M4 12h10"></path><path d="M4 17h14"></path></svg></div><div><h4>String Matching</h4><span>37 Problems</span></div></a>
            <a href="/topic/topological-sort" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3l7 9-7 9"></path><path d="M21 3l-7 9 7 9"></path></svg></div><div><h4>Topological Sort</h4><span>36 Problems</span></div></a>
            <a href="/topic/shortest-path" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="5" cy="12" r="3"></circle><circle cx="19" cy="12" r="3"></circle><path d="M8 12h8" stroke-dasharray="2 2"></path></svg></div><div><h4>Shortest Path</h4><span>35 Problems</span></div></a>
            <a href="/topic/rolling-hash" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l3 3"></path></svg></div><div><h4>Rolling Hash</h4><span>30 Problems</span></div></a>
            <a href="/topic/game-theory" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"></rect><circle cx="8" cy="12" r="2"></circle><circle cx="16" cy="12" r="2"></circle></svg></div><div><h4>Game Theory</h4><span>28 Problems</span></div></a>
            <a href="/topic/interactive" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 3v18"></path><path d="M3 12h18"></path><circle cx="12" cy="12" r="3"></circle></svg></div><div><h4>Interactive</h4><span>23 Problems</span></div></a>
            <a href="/topic/data-stream" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M2 12h2"></path><path d="M6 12h2"></path><path d="M10 12h2"></path><path d="M14 12h2"></path><path d="M18 12h2"></path><path d="M20 12h2"></path></svg></div><div><h4>Data Stream</h4><span>22 Problems</span></div></a>
            <a href="/topic/monotonic-queue" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 14h4v6H4z"></path><path d="M10 10h4v10h-4z"></path><path d="M16 4h4v16h-4z"></path></svg></div><div><h4>Monotonic Queue</h4><span>20 Problems</span></div></a>
            <a href="/topic/brainteaser" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9 9h.01"></path><path d="M15 9h.01"></path><path d="M9 15c.5.5 1.5 1 3 1s2.5-.5 3-1"></path></svg></div><div><h4>Brainteaser</h4><span>19 Problems</span></div></a>
            <a href="/topic/doubly-linked-list" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="6" cy="12" r="3"></circle><circle cx="12" cy="12" r="3"></circle><circle cx="18" cy="12" r="3"></circle><path d="M3 12h0"></path><path d="M21 12h0"></path></svg></div><div><h4>Doubly-Linked List</h4><span>14 Problems</span></div></a>
            <a href="/topic/randomized" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 4l16 16"></path><circle cx="8" cy="8" r="3"></circle><circle cx="16" cy="16" r="3"></circle></svg></div><div><h4>Randomized</h4><span>12 Problems</span></div></a>
            <a href="/topic/merge-sort" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 6h16"></path><path d="M4 10h8"></path><path d="M14 10h6"></path><path d="M4 14h4"></path><path d="M10 14h4"></path><path d="M16 14h4"></path><path d="M4 18h2"></path><path d="M8 18h2"></path><path d="M12 18h2"></path><path d="M16 18h2"></path><path d="M20 18h2"></path></svg></div><div><h4>Merge Sort</h4><span>12 Problems</span></div></a>
            <a href="/topic/counting-sort" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3l18 18"></path><rect x="3" y="8" width="8" height="8"></rect><rect x="13" y="8" width="8" height="8"></rect></svg></div><div><h4>Counting Sort</h4><span>11 Problems</span></div></a>
            <a href="/topic/iterator" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M5 9l4-4 4 4"></path><path d="M9 5v14"></path><path d="M15 15l4 4 4-4"></path><path d="M19 19V5"></path></svg></div><div><h4>Iterator</h4><span>9 Problems</span></div></a>
            <a href="/topic/concurrency" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 4v16"></path><path d="M20 4v16"></path><path d="M4 12h16"></path></svg></div><div><h4>Concurrency</h4><span>9 Problems</span></div></a>
            <a href="/topic/line-sweep" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 6l16 12"></path><path d="M4 18L20 6"></path></svg></div><div><h4>Line Sweep</h4><span>8 Problems</span></div></a>
            <a href="/topic/probability-and-statistics" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3v18h18"></path><circle cx="9" cy="9" r="2"></circle><circle cx="15" cy="15" r="2"></circle><circle cx="18" cy="6" r="2"></circle></svg></div><div><h4>Probability &amp; Statistics</h4><span>7 Problems</span></div></a>
            <a href="/topic/suffix-array" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 6h16"></path><path d="M4 18h16"></path><path d="M12 6v12"></path></svg></div><div><h4>Suffix Array</h4><span>7 Problems</span></div></a>
            <a href="/topic/quickselect" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div><div><h4>Quickselect</h4><span>7 Problems</span></div></a>
            <a href="/topic/minimum-spanning-tree" class="card-small"><div class="card-icon-sm ic6"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="6" cy="6" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="12" cy="18" r="3"></circle><line x1="6" y1="9" x2="12" y2="15"></line><line x1="18" y1="9" x2="12" y2="15"></line></svg></div><div><h4>Minimum Spanning Tree</h4><span>6 Problems</span></div></a>
            <a href="/topic/bucket-sort" class="card-small"><div class="card-icon-sm ic7"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M4 16V8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"></path></svg></div><div><h4>Bucket Sort</h4><span>6 Problems</span></div></a>
            <a href="/topic/pandas" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M9 3v18"></path></svg></div><div><h4>Pandas</h4><span>4 Problems</span></div></a>
            <a href="/topic/reservoir-sampling" class="card-small"><div class="card-icon-sm ic2"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="12" cy="12" r="4"></circle></svg></div><div><h4>Reservoir Sampling</h4><span>4 Problems</span></div></a>
            <a href="/topic/shell" class="card-small"><div class="card-icon-sm ic1"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path></svg></div><div><h4>Shell</h4><span>4 Problems</span></div></a>
            <a href="/topic/eulerian-circuit" class="card-small"><div class="card-icon-sm ic4"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="8"></circle><path d="M12 4a8 8 0 0 1 0 16"></path></svg></div><div><h4>Eulerian Circuit</h4><span>3 Problems</span></div></a>
            <a href="/topic/strongly-connected-component" class="card-small"><div class="card-icon-sm ic3"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v8"></path></svg></div><div><h4>Strongly Connected Component</h4><span>3 Problems</span></div></a>
            <a href="/topic/radix-sort" class="card-small"><div class="card-icon-sm ic5"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 12h4l2-8 4 16 2-8h6"></path></svg></div><div><h4>Radix Sort</h4><span>3 Problems</span></div></a>
            <!-- Collapse Button -->
            <div class="card-small collapse-btn" id="collapseBtn">
                <div class="card-icon-sm ic8"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M18 15l-6-6-6 6"></path></svg></div>
                <div><h4>Collapse</h4><span>Show Less</span></div>
            </div>
        </div>
    </div>
</div>
    </div>
    </div>

    <!-- Code Practice Section -->
    <section class="container practice-section" id="problems">
        <div class="practice-header" id="companyProblemsSection">
            <div class="practice-title-wrapper">
                <div>
                    <h2 class="section-title">
                        All <span>Coding Problems</span>
                        <!-- Cute Animated Robot -->
                        <div class="ai-robot">
                            <div class="robot-antenna"></div>
                            <div class="robot-ear left"></div>
                            <div class="robot-ear right"></div>
                            <div class="robot-head">
                                <div class="robot-eye left"></div>
                                <div class="robot-eye right"></div>
                                <div class="robot-mouth"></div>
                            </div>
                        </div>
                    </h2>
                    <p class="section-subtitle ai-subtitle"><span class="ai-sparkle"><i class="fa-solid fa-sparkles"></i></span> Practice coding problems across all topics <span class="ai-divider">•</span> <strong>3800+</strong> problems</p>
                </div>
                <!-- Navigation Buttons on right side -->
                <div class="practice-header-nav">
                    <button class="nav-btn practice-nav-prev">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
                    </button>
                    <button class="nav-btn practice-nav-next">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 18l6-6-6-6"/></svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Company Stats Slider -->
<div class="practice-stats-slider-wrap">
    <div class="swiper practice-stats-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="/company/google" class="practice-stat-card">
                    <div class="practice-stat-icon company-google"><i class="fa-brands fa-google"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">3407</span><span class="practice-stat-label">Google</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/amazon" class="practice-stat-card">
                    <div class="practice-stat-icon company-amazon"><i class="fa-brands fa-amazon"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">3399</span><span class="practice-stat-label">Amazon</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/microsoft" class="practice-stat-card">
                    <div class="practice-stat-icon company-microsoft"><i class="fa-brands fa-microsoft"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">3344</span><span class="practice-stat-label">Microsoft</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/meta" class="practice-stat-card">
                    <div class="practice-stat-icon company-meta"><i class="fa-brands fa-meta"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">2900</span><span class="practice-stat-label">Meta</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/apple" class="practice-stat-card">
                    <div class="practice-stat-icon company-apple"><i class="fa-brands fa-apple"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">571</span><span class="practice-stat-label">Apple</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/facebook" class="practice-stat-card">
                    <div class="practice-stat-icon company-meta"><i class="fa-brands fa-facebook-f"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">275</span><span class="practice-stat-label">Facebook</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/netflix" class="practice-stat-card">
                    <div class="practice-stat-icon company-netflix"><i class="fa-solid fa-n"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">51</span><span class="practice-stat-label">Netflix</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/uber" class="practice-stat-card">
                    <div class="practice-stat-icon company-uber"><i class="fa-brands fa-uber"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">31</span><span class="practice-stat-label">Uber</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/linkedin" class="practice-stat-card">
                    <div class="practice-stat-icon company-linkedin"><i class="fa-brands fa-linkedin-in"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">27</span><span class="practice-stat-label">LinkedIn</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/twitter" class="practice-stat-card">
                    <div class="practice-stat-icon company-twitter"><i class="fa-brands fa-x-twitter"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">17</span><span class="practice-stat-label">Twitter</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/spotify" class="practice-stat-card">
                    <div class="practice-stat-icon company-spotify"><i class="fa-brands fa-spotify"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">15</span><span class="practice-stat-label">Spotify</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/bloomberg" class="practice-stat-card">
                    <div class="practice-stat-icon company-bloomberg"><i class="fa-solid fa-chart-line"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">14</span><span class="practice-stat-label">Bloomberg</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/adobe" class="practice-stat-card">
                    <div class="practice-stat-icon company-adobe"><i class="fa-solid fa-a"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">12</span><span class="practice-stat-label">Adobe</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/airbnb" class="practice-stat-card">
                    <div class="practice-stat-icon company-airbnb"><i class="fa-brands fa-airbnb"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">12</span><span class="practice-stat-label">Airbnb</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/instagram" class="practice-stat-card">
                    <div class="practice-stat-icon company-meta"><i class="fa-brands fa-instagram"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">11</span><span class="practice-stat-label">Instagram</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/doordash" class="practice-stat-card">
                    <div class="practice-stat-icon company-uber"><i class="fa-solid fa-burger"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">9</span><span class="practice-stat-label">DoorDash</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/lyft" class="practice-stat-card">
                    <div class="practice-stat-icon company-airbnb"><i class="fa-brands fa-lyft"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">9</span><span class="practice-stat-label">Lyft</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/goldman-sachs" class="practice-stat-card">
                    <div class="practice-stat-icon company-bloomberg"><i class="fa-solid fa-building-columns"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">8</span><span class="practice-stat-label">Goldman Sachs</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/oracle" class="practice-stat-card">
                    <div class="practice-stat-icon company-oracle"><i class="fa-solid fa-database"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">8</span><span class="practice-stat-label">Oracle</span></div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/company/bytedance" class="practice-stat-card">
                    <div class="practice-stat-icon company-twitter"><i class="fa-brands fa-tiktok"></i></div>
                    <div class="practice-stat-info"><span class="practice-stat-value">8</span><span class="practice-stat-label">ByteDance</span></div>
                </a>
            </div>
        </div>
    </div>
</div>
        <!-- Search & Filters -->
        <div class="practice-filters" id="filterForm">
            <div class="practice-search">
                <i class="fa-sharp fa-light fa-magnifying-glass practice-search-icon"></i>
                <input type="text" id="problemSearch" placeholder="Search problems..." value="">
            </div>
            <div class="practice-filter-btns">
                <button type="button" class="practice-filter-btn active" data-difficulty="">All</button>
                <button type="button" class="practice-filter-btn " data-difficulty="Easy">Easy</button>
                <button type="button" class="practice-filter-btn " data-difficulty="Medium">Medium</button>
                <button type="button" class="practice-filter-btn " data-difficulty="Hard">Hard</button>
            </div>
            <select id="topicFilter" class="practice-topic-select">
                <option value="">All Topics</option>
                                <option value="Array" >Array</option>
                                <option value="Array manipulation" >Array manipulation</option>
                                <option value="Backtracking" >Backtracking</option>
                                <option value="Biconnected Component" >Biconnected Component</option>
                                <option value="Binary Indexed Tree" >Binary Indexed Tree</option>
                                <option value="Binary Search" >Binary Search</option>
                                <option value="Binary Search Tree" >Binary Search Tree</option>
                                <option value="Binary Tree" >Binary Tree</option>
                                <option value="Bit Manipulation" >Bit Manipulation</option>
                                <option value="Bitmask" >Bitmask</option>
                                <option value="Brainteaser" >Brainteaser</option>
                                <option value="Breadth-First Search" >Breadth-First Search</option>
                                <option value="Bucket Sort" >Bucket Sort</option>
                                <option value="Combinatorics" >Combinatorics</option>
                                <option value="Concurrency" >Concurrency</option>
                                <option value="Conditional Logic" >Conditional Logic</option>
                                <option value="Counting" >Counting</option>
                                <option value="Counting Sort" >Counting Sort</option>
                                <option value="Data Stream" >Data Stream</option>
                                <option value="Database" >Database</option>
                                <option value="Depth-First Search" >Depth-First Search</option>
                                <option value="Design" >Design</option>
                                <option value="Divide and Conquer" >Divide and Conquer</option>
                                <option value="Doubly-Linked List" >Doubly-Linked List</option>
                                <option value="Dynamic Programming" >Dynamic Programming</option>
                                <option value="Enumeration" >Enumeration</option>
                                <option value="Eulerian Circuit" >Eulerian Circuit</option>
                                <option value="Game Theory" >Game Theory</option>
                                <option value="Geometry" >Geometry</option>
                                <option value="Graph" >Graph</option>
                                <option value="Greedy" >Greedy</option>
                                <option value="Grouping &amp; Aggregation" >Grouping &amp; Aggregation</option>
                                <option value="Hash Function" >Hash Function</option>
                                <option value="Hash Table" >Hash Table</option>
                                <option value="Heap (Priority Queue)" >Heap (Priority Queue)</option>
                                <option value="Interactive" >Interactive</option>
                                <option value="Iterator" >Iterator</option>
                                <option value="JavaScript" >JavaScript</option>
                                <option value="Javascript" >Javascript</option>
                                <option value="Line Sweep" >Line Sweep</option>
                                <option value="Linked List" >Linked List</option>
                                <option value="Math" >Math</option>
                                <option value="Matrix" >Matrix</option>
                                <option value="Memoization" >Memoization</option>
                                <option value="Merge Sort" >Merge Sort</option>
                                <option value="Minimum Spanning Tree" >Minimum Spanning Tree</option>
                                <option value="Monotonic Queue" >Monotonic Queue</option>
                                <option value="Monotonic Stack" >Monotonic Stack</option>
                                <option value="Number Theory" >Number Theory</option>
                                <option value="Ordered Set" >Ordered Set</option>
                                <option value="Pandas" >Pandas</option>
                                <option value="Pandas/Dataframe" >Pandas/Dataframe</option>
                                <option value="Prefix Sum" >Prefix Sum</option>
                                <option value="Probability and Statistics" >Probability and Statistics</option>
                                <option value="Queue" >Queue</option>
                                <option value="Quickselect" >Quickselect</option>
                                <option value="Radix Sort" >Radix Sort</option>
                                <option value="Randomized" >Randomized</option>
                                <option value="Recursion" >Recursion</option>
                                <option value="Rejection Sampling" >Rejection Sampling</option>
                                <option value="Reservoir Sampling" >Reservoir Sampling</option>
                                <option value="Rolling Hash" >Rolling Hash</option>
                                <option value="Segment Tree" >Segment Tree</option>
                                <option value="Shell" >Shell</option>
                                <option value="Shortest Path" >Shortest Path</option>
                                <option value="Simulation" >Simulation</option>
                                <option value="Sliding Window" >Sliding Window</option>
                                <option value="Sort" >Sort</option>
                                <option value="Sorting" >Sorting</option>
                                <option value="Stack" >Stack</option>
                                <option value="String" >String</option>
                                <option value="String Matching" >String Matching</option>
                                <option value="Strongly Connected Component" >Strongly Connected Component</option>
                                <option value="Suffix Array" >Suffix Array</option>
                                <option value="Topological Sort" >Topological Sort</option>
                                <option value="Tree" >Tree</option>
                                <option value="Trie" >Trie</option>
                                <option value="Two Pointer" >Two Pointer</option>
                                <option value="Two Pointers" >Two Pointers</option>
                                <option value="Union Find" >Union Find</option>
                                <option value="Window Functions" >Window Functions</option>
                                <option value="\" >\</option>
                            </select>
        </div>

        <!-- Problem Table -->
        <div class="practice-table-container">
            <table class="practice-table">
                <thead>
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Problem</th>
                        <th style="width:120px;">Difficulty</th>
                        <th style="width:280px;">Topics</th>
                    </tr>
                </thead>
                <tbody id="problemsTableBody">
                                                            <tr>
                        <td>1</td>
                        <td><a href="/practice/01-matrix.htm" class="practice-problem-link">01 Matrix</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Dynamic Programming</span><span class="practice-topic-tag">Breadth-First Search</span></div></td>
                    </tr>
                                        <tr>
                        <td>2</td>
                        <td><a href="/practice/1-bit-and-2-bit-characters.htm" class="practice-problem-link">1-bit and 2-bit Characters</a></td>
                        <td><span class="practice-difficulty easy">Easy</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span></div></td>
                    </tr>
                                        <tr>
                        <td>3</td>
                        <td><a href="/practice/132-pattern.htm" class="practice-problem-link">132 Pattern</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Binary Search</span><span class="practice-topic-tag">Stack</span></div></td>
                    </tr>
                                        <tr>
                        <td>4</td>
                        <td><a href="/practice/2-keys-keyboard.htm" class="practice-problem-link">2 Keys Keyboard</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Math</span><span class="practice-topic-tag">Dynamic Programming</span></div></td>
                    </tr>
                                        <tr>
                        <td>5</td>
                        <td><a href="/practice/24-game.htm" class="practice-problem-link">24 Game</a></td>
                        <td><span class="practice-difficulty hard">Hard</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Math</span><span class="practice-topic-tag">Backtracking</span></div></td>
                    </tr>
                                        <tr>
                        <td>6</td>
                        <td><a href="/practice/3sum.htm" class="practice-problem-link">3Sum</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Two Pointers</span><span class="practice-topic-tag">Sorting</span></div></td>
                    </tr>
                                        <tr>
                        <td>7</td>
                        <td><a href="/practice/3sum-closest.htm" class="practice-problem-link">3Sum Closest</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Two Pointers</span><span class="practice-topic-tag">Sorting</span></div></td>
                    </tr>
                                        <tr>
                        <td>8</td>
                        <td><a href="/practice/3sum-smaller.htm" class="practice-problem-link">3Sum Smaller</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Two Pointers</span><span class="practice-topic-tag">Binary Search</span></div></td>
                    </tr>
                                        <tr>
                        <td>9</td>
                        <td><a href="/practice/3sum-with-multiplicity.htm" class="practice-problem-link">3Sum With Multiplicity</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Hash Table</span><span class="practice-topic-tag">Two Pointers</span></div></td>
                    </tr>
                                        <tr>
                        <td>10</td>
                        <td><a href="/practice/4-keys-keyboard.htm" class="practice-problem-link">4 Keys Keyboard</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Math</span><span class="practice-topic-tag">Dynamic Programming</span></div></td>
                    </tr>
                                        <tr>
                        <td>11</td>
                        <td><a href="/practice/4sum.htm" class="practice-problem-link">4Sum</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Two Pointers</span><span class="practice-topic-tag">Sorting</span></div></td>
                    </tr>
                                        <tr>
                        <td>12</td>
                        <td><a href="/practice/4sum-ii.htm" class="practice-problem-link">4Sum II</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Array</span><span class="practice-topic-tag">Hash Table</span></div></td>
                    </tr>
                                        <tr>
                        <td>13</td>
                        <td><a href="/practice/a-number-after-a-double-reversal.htm" class="practice-problem-link">A Number After a Double Reversal</a></td>
                        <td><span class="practice-difficulty easy">Easy</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Math</span></div></td>
                    </tr>
                                        <tr>
                        <td>14</td>
                        <td><a href="/practice/abbreviating-the-product-of-a-range.htm" class="practice-problem-link">Abbreviating the Product of a Range</a></td>
                        <td><span class="practice-difficulty hard">Hard</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Math</span></div></td>
                    </tr>
                                        <tr>
                        <td>15</td>
                        <td><a href="/practice/accepted-candidates-from-the-interviews.htm" class="practice-problem-link">Accepted Candidates From the Interviews</a></td>
                        <td><span class="practice-difficulty medium">Medium</span></td>
                        <td><div class="practice-topics"><span class="practice-topic-tag">Database</span></div></td>
                    </tr>
                                                        </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="practice-pagination" id="problemsPagination">
             <div class="practice-pagination-info">Showing <span>1</span>-<span>15</span> of <span>3600</span></div>
            <div class="practice-pagination-btns">
                                <span class="practice-page-btn disabled"><i class="fa-sharp fa-light fa-chevron-left"></i></span>
                                                                                <span class="practice-page-btn active">1</span>
                                                                <a href="/company/all/2" class="practice-page-btn" data-page="2">2</a>
                                                                <a href="/company/all/3" class="practice-page-btn" data-page="3">3</a>
                                                                <span style="padding:0 8px;">...</span>                <a href="/company/all/240" class="practice-page-btn" data-page="240">240</a>
                                                <a href="/company/all/2" class="practice-page-btn" data-page="2"><i class="fa-sharp fa-light fa-chevron-right"></i></a>
                            </div>
                </div>
    </section>

    <!-- Tutorials Library Section - Prototype 6 -->
    <div class="container proto6-layout">
        <div class="proto6-sidebar">
            <h2>Tutorials <span style="color: #fff20d;">Library</span></h2>
            <p>Master any technology with our largest free online Library. Browse through 500+ tutorials across 10+ categories.</p>
            
            <div class="proto6-cat-list">
                <a href="/computer_programming_tutorials.htm" class="proto6-cat-item active">
                    Programming Languages <span class="count">20</span>
                </a>
                <a href="/latest_technologies.htm" class="proto6-cat-item">
                    Latest Technologies <span class="count">12</span>
                </a>
                <a href="/machine_learning_tutorials.htm" class="proto6-cat-item">
                    Machine Learning <span class="count">18</span>
                </a>
                <a href="/computer_science_tutorials.htm" class="proto6-cat-item">
                    Computer Science <span class="count">15</span>
                </a>
                <a href="/web_development_tutorials.htm" class="proto6-cat-item">
                    Web Development <span class="count">25</span>
                </a>
                <a href="/mobile_development_tutorials.htm" class="proto6-cat-item">
                    Mobile Development <span class="count">10</span>
                </a>
                <a href="/database_tutorials.htm" class="proto6-cat-item">
                    Databases <span class="count">14</span>
                </a>
            </div>
        </div>

        <div class="proto6-main">
            <a href="/python/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python">
                <h4>Python Tutorial</h4>
            </a>
            <a href="/java/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
                <h4>Java Tutorial</h4>
            </a>
            <a href="/javascript/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript">
                <h4>JavaScript</h4>
            </a>
            <a href="/cplusplus/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg" alt="C++">
                <h4>C++ Tutorial</h4>
            </a>
            <a href="/csharp/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" alt="C#">
                <h4>C# Tutorial</h4>
            </a>
            <a href="/go/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" alt="Go">
                <h4>Go Tutorial</h4>
            </a>
            <a href="/rust/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust">
                <h4>Rust Tutorial</h4>
            </a>
            <a href="/typescript/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript">
                <h4>TypeScript</h4>
            </a>
            <a href="/swift/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg" alt="Swift">
                <h4>Swift Tutorial</h4>
            </a>
            <a href="/kotlin/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg" alt="Kotlin">
                <h4>Kotlin Tutorial</h4>
            </a>
            <a href="/ruby/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg" alt="Ruby">
                <h4>Ruby Tutorial</h4>
            </a>
            <a href="/php/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP">
                <h4>PHP Tutorial</h4>
            </a>
            <a href="/cprogramming/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C">
                <h4>C Tutorial</h4>
            </a>
            <a href="/scala/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/scala/scala-original.svg" alt="Scala">
                <h4>Scala Tutorial</h4>
            </a>
            <a href="/perl/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/perl/perl-original.svg" alt="Perl">
                <h4>Perl Tutorial</h4>
            </a>
            <a href="/r/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/r/r-original.svg" alt="R">
                <h4>R Tutorial</h4>
            </a>
            <a href="/dart_programming/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" alt="Dart">
                <h4>Dart Tutorial</h4>
            </a>
            <a href="/lua/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg" alt="Lua">
                <h4>Lua Tutorial</h4>
            </a>
            <a href="/matlab/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/matlab/matlab-original.svg" alt="MATLAB">
                <h4>MATLAB</h4>
            </a>
            <a href="/haskell/index.htm" class="proto6-card">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/haskell/haskell-original.svg" alt="Haskell">
                <h4>Haskell</h4>
            </a>
        </div>
    </div>

    <!-- Developer Toolbox Section -->
    <section class="dev-tools-section container">
        <div class="dev-tools-card">
            <div class="dev-tools-header">
                <div>
                    <h2 class="dev-tools-title">Developer <span>Toolbox</span></h2>
                    <p class="dev-tools-subtitle">Powerful online tools to boost your productivity</p>
                </div>
                <div class="dev-tools-nav">
                    <button class="nav-btn dev-tools-prev">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
                    </button>
                    <button class="nav-btn dev-tools-next">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2.5" stroke-linecap="round"><path d="M9 18l6-6-6-6"/></svg>
                    </button>
                </div>
            </div>

            <div class="dev-tools-slider-wrap">
                <div class="swiper dev-tools-slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online-resume-builder.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="8" y1="13" x2="16" y2="13"></line>
                                    <line x1="8" y1="17" x2="16" y2="17"></line>
                                    <circle cx="10" cy="7" r="1"></circle>
                                </svg>
                                <h4>AI Resume Builder</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online_javascript_minifier.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="9" y1="15" x2="15" y2="15"></line>
                                </svg>
                                <h4>JS Minifier</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/whiteboard.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="3" y1="9" x2="21" y2="9"></line>
                                    <line x1="9" y1="21" x2="9" y2="9"></line>
                                </svg>
                                <h4>Whiteboard</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online_image_editor.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                    <polyline points="21 15 16 10 5 21"></polyline>
                                </svg>
                                <h4>Image Editor</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online_document_viewer.php" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#db2777" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                </svg>
                                <h4>Doc Viewer</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/latex_equation_editor.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="4" y1="9" x2="20" y2="9"></line>
                                    <line x1="4" y1="15" x2="20" y2="15"></line>
                                    <line x1="10" y1="3" x2="8" y2="21"></line>
                                    <line x1="16" y1="3" x2="14" y2="21"></line>
                                </svg>
                                <h4>LaTeX Editor</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online_json_editor.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="16 18 22 12 16 6"></polyline>
                                    <polyline points="8 6 2 12 8 18"></polyline>
                                </svg>
                                <h4>JSON Editor</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/qr_code_generator.htm" class="dev-tool-card">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#0891b2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="7" height="7"></rect>
                                    <rect x="14" y="3" width="7" height="7"></rect>
                                    <rect x="14" y="14" width="7" height="7"></rect>
                                    <rect x="3" y="14" width="7" height="7"></rect>
                                </svg>
                                <h4>QR Generator</h4>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://www.tutorialspoint.com/online_dev_tools.htm" class="dev-tool-card dev-tool-view-all">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                                <h4>View All</h4>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Coding Ground Section -->
    <section class="coding-ground container">
        <div class="coding-ground-card">
            <div class="coding-ground__grid">
                <div class="coding-ground__image-wrapper">
                    <div class="coding-ground__code-block">
                        <div class="code-line">
                            <span class="code-keyword">public</span>&nbsp;<span class="code-keyword">class</span>&nbsp;<span class="code-class">MyFirstJavaProgram</span>&nbsp;{
                            <a href="/online_java_compiler.php" target="_blank" class="edit-btn">Edit & Run <i class="fa-solid fa-gear"></i></a>
                        </div>
                        <br>
                        <div class="code-line"><span class="code-comment">&nbsp;&nbsp;&nbsp;/* This is my first java program.</span></div>
                        <div class="code-line"><span class="code-comment">&nbsp;&nbsp;&nbsp;&nbsp;* This will print 'Hello, World!' as the output</span></div>
                        <div class="code-line"><span class="code-comment">&nbsp;&nbsp;&nbsp;&nbsp;*/</span></div>
                        <br>
                        <div class="code-line">&nbsp;&nbsp;&nbsp;<span class="code-keyword">public</span>&nbsp;<span class="code-keyword">static</span>&nbsp;<span class="code-keyword">void</span>&nbsp;<span class="code-method">main</span>&nbsp;(String []args) {</div>
                        <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.<span class="code-method">println</span>(<span class="code-string">"Hello, World!"</span>); <span class="code-comment"> // prints</span></div>
                        <div class="code-line">&nbsp;&nbsp;&nbsp;}</div>
                        <div class="code-line">}</div>
                    </div>
                </div>
                <div class="coding-ground__content">
                    <h2><span class="coding-ground__start">Start Coding</span> <span>in Seconds</span></h2>
                    <p class="coding-ground__subtitle">Coding Ground For Developers</p>
                    <span class="coding-ground__badge">Code, Edit, Run and Share</span>
                    <p class="coding-ground__description">Ignite your coding potential on Coding Ground - an immersive online platform for hands-on learning, collaboration, and skill development.</p>
                    <div class="coding-ground__buttons">
                        <a href="/online_java_compiler.php" class="coding-ground__btn coding-ground__btn--java" target="_blank"><strong>Java</strong> Compiler</a>
                        <a href="/online_python_compiler.php" class="coding-ground__btn coding-ground__btn--python" target="_blank"><strong>Python</strong> Compiler</a>
                        <a href="/compile_cpp_online.php" class="coding-ground__btn coding-ground__btn--cpp" target="_blank"><strong>C++</strong> Compiler</a>
                        <a href="/online_html_editor.php" class="coding-ground__btn coding-ground__btn--html" target="_blank"><strong>HTML</strong> Editor</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="adv-section">
        <div class="ads-container">
             <!-- TAGNAME: 300x250_Homepage_Reusable -->
             <pgs-ad data-pg-ad-spot='tutorialspointcom47463'></pgs-ad>
            <div class="ad-column">
             <!-- TAGNAME: 300x250_Homepage_Reusable -->
             <pgs-ad data-pg-ad-spot='tutorialspointcom47463'></pgs-ad>
            </div>
            <div class="ad-column">
             <!-- TAGNAME: 300x250_Homepage_Reusable -->
             <pgs-ad data-pg-ad-spot='tutorialspointcom47463'></pgs-ad>
            </div>
            <div class="ad-column">
             <!-- TAGNAME: 300x250_Homepage_Reusable -->
             <pgs-ad data-pg-ad-spot='tutorialspointcom47463'></pgs-ad>
            </div>
        </div>
    </section>

    <div id="fluid-privacy-opt-out-link" onmouseover="this.style.color='rgb(25, 103, 210)'; this.style.cursor='pointer'"
  onmouseout="this.style.color='#CCCCCC'; this.style.cursor='auto'"></div>
<script>
   const privacyOptOutLink = document.getElementById("fluid-privacy-opt-out-link");
window.googlefc = window.googlefc || { callbackQueue: [] };
window.googlefc.ccpa = window.googlefc.ccpa || {};
window.googlefc.ccpa.overrideDnsLink = true;
window.googlefc.callbackQueue.push(
  {
    "CONSENT_API_READY": () => {
      if (!privacyOptOutLink) {
        return;
      }
      !!window.__tcfapi && window.__tcfapi("addEventListener", 2, (tcData, success) => {
        if (success && tcData.gdprApplies) {
          privacyOptOutLink.innerText = "Change GDPR Consent";
          privacyOptOutLink.addEventListener("click", () => googlefc.showRevocationMessage());
          return;
        }
      });
    }
  });
window.googlefc.callbackQueue.push(
  {
    "INITIAL_CCPA_DATA_READY": () => {
      if (!privacyOptOutLink) {
        return;
      }

      if (googlefc.ccpa.getInitialCcpaStatus() && googlefc.ccpa.getInitialCcpaStatus() === googlefc.ccpa.InitialCcpaStatusEnum.NOT_OPTED_OUT) {
        privacyOptOutLink.innerText = "Don't sell or share my personal info";
        privacyOptOutLink.addEventListener("click", () => googlefc.ccpa.openConfirmationDialog((optedOut) => {
          if (optedOut) {
            privacyOptOutLink.style.display = "none";
          }
        }));
        return
      }
    }
  });

</script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        new Swiper('.banner-slider', {
            slidesPerView: 'auto',
            spaceBetween: 16,
            freeMode: true,
            navigation: {
                nextEl: '.nav-next',
                prevEl: '.nav-prev',
            },
        });

        // See All / Collapse Toggle
        const seeAllBtn = document.getElementById('seeAllBtn');
        const collapseBtn = document.getElementById('collapseBtn');
        const cardsGrid = document.getElementById('cardsGrid');
        const cardsExpanded = document.getElementById('cardsExpanded');

        seeAllBtn.addEventListener('click', function() {
            cardsGrid.classList.add('hidden');
            cardsExpanded.classList.add('active');
        });

        collapseBtn.addEventListener('click', function() {
            cardsExpanded.classList.remove('active');
            cardsGrid.classList.remove('hidden');
        });

        // Initialize Practice Stats Slider
        new Swiper('.practice-stats-slider', {
            slidesPerView: 'auto',
            spaceBetween: 16,
            freeMode: true,
            navigation: {
                nextEl: '.practice-nav-next',
                prevEl: '.practice-nav-prev',
            },
        });

        // Initialize Developer Tools Slider
        new Swiper('.dev-tools-slider', {
            slidesPerView: 'auto',
            spaceBetween: 16,
            freeMode: true,
            navigation: {
                nextEl: '.dev-tools-next',
                prevEl: '.dev-tools-prev',
            },
        });
    </script>

    <!-- Footer -->
    <footer class="footer">
        <ul class="footer__list container">
            <li><a href="/about/index.htm" title="ABOUT US">ABOUT US</a></li>
            <li><a href="/about/about_team.htm" title="OUR TEAM">OUR TEAM</a></li>
            <li><a href="/about/about_careers.htm" title="CAREERS">CAREERS</a></li>
            <li><a href="/job_search.php" title="JOBS">JOBS</a></li>
            <li><a href="/about/contact_us.htm" title="CONTACT US">CONTACT US</a></li>
            <li><a href="/about/about_terms_of_use.htm" title="TERMS OF USE">TERMS OF USE</a></li>
            <li><a href="/about/about_privacy.htm" title="PRIVACY POLICY">PRIVACY POLICY</a></li>
            <li><a href="/about/return_refund_policy.htm" title="REFUND POLICY">REFUND POLICY</a></li>
            <li><a href="/about/about_cookies.htm" title="COOKIES POLICY">COOKIES POLICY</a></li>
            <li><a href="/about/faq.htm" title="FAQ'S">FAQ'S</a></li>
        </ul>
        <div class="footer__socials container">
            <img class="footer__logo" src="https://www.tutorialspoint.com/static/images/logo-footer.svg" alt="tutorials point logo">
            <div class="footer__social-icons">
                <a rel="nofollow" target="_blank" href="https://www.facebook.com/tutorialspointindia" title="Follow us on Facebook">
                    <i class="fa-brands fa-facebook-f"></i>
                </a>
                <a target="_blank" href="https://x.com/tutorialspoint" rel="nofollow" title="Follow us on X">
                    <i class="fa-brands fa-x-twitter"></i>
                </a>
                <a target="_blank" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" rel="nofollow" title="Follow us on Youtube">
                    <i class="fa-brands fa-youtube"></i>
                </a>
                <a target="_blank" href="https://www.linkedin.com/company/tutorialspoint/" rel="nofollow" title="Follow us on LinkedIn">
                    <i class="fa-brands fa-linkedin-in"></i>
                </a>
                <a target="_blank" href="https://www.instagram.com/tutorialspoint_/" rel="nofollow" title="Follow us on Instagram">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>
            <div class="footer__apps">
                <a href="https://play.google.com/store/apps/details?id=com.tutorialspoint.onlineviewer" target="_blank" title="Download Android App" rel="nofollow">
                    <img src="https://www.tutorialspoint.com/static/images/googleplay.svg" alt="Download Android App">
                </a>
                <a href="https://itunes.apple.com/us/app/tutorials-point/id914891263?ls=1&mt=8" target="_blank" title="Download IOS App" rel="nofollow">
                    <img src="https://www.tutorialspoint.com/static/images/appstore.svg" alt="Download IOS App">
                </a>
            </div>
        </div>
        <div class="footer__legal-wrapper">
            <div class="footer__legal container">
                <p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
                <p class="footer__copyright">Copyright 2026. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
<script src="/practice/js/practice-common.js?v6"></script>

<!-- AJAX Filter & Pagination Script -->
<script>
(function() {
    const companyId = 'all';
    let currentPage = 1;
    let currentDifficulty = '';
    let currentTopic = '';
    let currentSearch = '';
    let searchTimeout = null;
    let isLoading = false;

    // Start Practicing button with spinner
    const startPracticingBtn = document.getElementById('startPracticingBtn');
    if (startPracticingBtn) {
        startPracticingBtn.addEventListener('click', function(e) {
            e.preventDefault();
            this.classList.add('loading');
            
            // Scroll to problems section
            const target = document.getElementById('companyProblemsSection');
            if (target) {
                const headerOffset = 80;
                const elementPosition = target.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                
                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
                
                // Remove loading state after scroll completes
                setTimeout(() => {
                    this.classList.remove('loading');
                }, 800);
            } else {
                this.classList.remove('loading');
            }
        });
    }

    // Elements
    const tableBody = document.getElementById('problemsTableBody');
    const pagination = document.getElementById('problemsPagination');
    const searchInput = document.getElementById('problemSearch');
    const topicSelect = document.getElementById('topicFilter');
    const difficultyBtns = document.querySelectorAll('.practice-filter-btn[data-difficulty]');

    // Loading indicator
    function showLoading() {
        isLoading = true;
        tableBody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:40px;"><i class="fa-solid fa-spinner fa-spin" style="font-size:24px;color:#40A944;"></i></td></tr>';
    }

    // Fetch problems via AJAX
    function fetchProblems(page, callback) {
        if (isLoading) return;
        showLoading();
        
        const params = new URLSearchParams({
            company_id: companyId,
            page: page,
            ajax: '1'
        });
        
        if (currentDifficulty) params.append('difficulty', currentDifficulty);
        if (currentTopic) params.append('topic', currentTopic);
        if (currentSearch) params.append('search', currentSearch);

        fetch('/practice/company-ajax.php?' + params.toString())
            .then(response => response.json())
            .then(data => {
                isLoading = false;
                if (callback) callback();
                
                if (data.success) {
                    tableBody.innerHTML = data.tableHtml;
                    pagination.innerHTML = data.paginationHtml;
                    currentPage = data.page;
                    
                    // Update URL for pagination (SEO-friendly, allows bookmarking)
                    // Only update URL for pagination, not for filters (filters are AJAX-only)
                    if (!currentDifficulty && !currentTopic && !currentSearch) {
                        const newUrl = buildPageUrl(data.page);
                        history.pushState({ page: data.page }, '', newUrl);
                    }
                    
                    // Re-attach pagination click handlers
                    attachPaginationHandlers();
                    
                    // Scroll to company problems section with offset for sticky header
                    const target = document.getElementById('companyProblemsSection');
                    const headerOffset = 80; // Account for sticky header height
                    const elementPosition = target.getBoundingClientRect().top;
                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                    
                    window.scrollTo({
                        top: offsetPosition,
                        behavior: 'smooth'
                    });
                }
            })
            .catch(error => {
                isLoading = false;
                if (callback) callback();
                console.error('Error fetching problems:', error);
                tableBody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:40px;color:#dc3545;">Error loading problems. Please try again.</td></tr>';
            });
    }

    // Build SEO-friendly URL for pagination
    function buildPageUrl(page) {
        if (companyId === 'all') {
            if (page <= 1) {
                return '/problems';
            }
            return '/problems/' + page;
        }
        if (page <= 1) {
            return '/company/' + companyId;
        }
        return '/company/' + companyId + '/' + page;
    }

    // Check if any filters are active
    function hasActiveFilters() {
        return currentDifficulty || currentTopic || currentSearch;
    }

    // Attach click handlers to pagination links
    function attachPaginationHandlers() {
        document.querySelectorAll('.practice-pagination-btns a[data-page]').forEach(link => {
            link.addEventListener('click', function(e) {
                // If no filters active, let browser navigate normally (use cached page)
                if (!hasActiveFilters()) {
                    // Show spinner on the clicked button for normal navigation
                    this.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
                    this.style.pointerEvents = 'none';
                    // Set flag to scroll after page load
                    sessionStorage.setItem('scrollToProblems', 'true');
                    return; // Don't prevent default - browser will navigate to href
                }
                
                // Filters are active - use AJAX
                e.preventDefault();
                const page = parseInt(this.getAttribute('data-page'));
                if (page && page !== currentPage) {
                    // Show spinner on clicked button
                    const clickedBtn = this;
                    clickedBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
                    clickedBtn.style.pointerEvents = 'none';
                    
                    fetchProblems(page, function() {
                        // Restore button after load (though it will be replaced by new pagination HTML)
                        clickedBtn.style.pointerEvents = '';
                    });
                }
            });
        });
    }
    
    // Check if we need to scroll after page load (from pagination click)
    if (sessionStorage.getItem('scrollToProblems') === 'true') {
        sessionStorage.removeItem('scrollToProblems');
        // Scroll to problems section with offset for sticky header
        setTimeout(function() {
            const target = document.getElementById('companyProblemsSection');
            if (target) {
                const headerOffset = 80;
                const elementPosition = target.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                window.scrollTo({ top: offsetPosition, behavior: 'auto' });
            }
        }, 100);
    }

    // Difficulty filter click
    difficultyBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const diff = this.getAttribute('data-difficulty');
            
            // Update active state
            difficultyBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            currentDifficulty = diff;
            currentPage = 1; // Reset to page 1
            fetchProblems(1);
        });
    });

    // Topic filter change
    topicSelect.addEventListener('change', function() {
        currentTopic = this.value;
        currentPage = 1; // Reset to page 1
        fetchProblems(1);
    });

    // Search input with debounce
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const value = this.value.trim();
        
        searchTimeout = setTimeout(function() {
            currentSearch = value;
            currentPage = 1; // Reset to page 1
            fetchProblems(1);
        }, 400); // 400ms debounce
    });

    // Handle Enter key on search
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            clearTimeout(searchTimeout);
            currentSearch = this.value.trim();
            currentPage = 1;
            fetchProblems(1);
        }
    });

    // Handle browser back/forward buttons
    window.addEventListener('popstate', function(e) {
        if (e.state && e.state.page) {
            fetchProblems(e.state.page);
        }
    });

    // Initial setup - attach pagination handlers
    attachPaginationHandlers();
    
    // Store initial state
    history.replaceState({ page: currentPage }, '', window.location.href);
})();
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EX9ZP4VY84"></script>
<script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'G-EX9ZP4VY84');
</script>
</body>
</html>

Latest requests

# Url Url Source Date
1 https://www.tutorialspoint.com/ind… 2026-10-21 14:00:26
2 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:26
3 https://www.texarkanatwins.com/%25… 2026-10-21 14:00:26
4 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:26
5 https://tendoncare24.b-cdn.net/res… 2026-10-21 14:00:26
6 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:25
7 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:25
8 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:24
9 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:24
10 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:24
11 https://auth.mediacorp.sg/u/login?… 2026-10-21 14:00:24
12 https://www.texarkanatwins.com/%25… 2026-10-21 14:00:24
13 https://www.linkedin.com/login 2026-10-21 14:00:23
14 https://www.texarkanatwins.com/%25… 2026-10-21 14:00:23
15 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:23
16 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:22
17 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:22
18 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:22
19 https://auth.acog.org/OAuth/SignIn… 2026-10-21 14:00:22
20 https://digi8.b-cdn.net/research/d… 2026-10-21 14:00:21