/* ADDED FOR SMOOTH SCROLLING */
    html {
        scroll-behavior: smooth;
        
         scroll-padding-top: 100px; 
    }

    /* General Body Styles */
     body {
         padding-top: 80px;
         background-color: #f7f9fc; 
         font-family: 'Segoe UI', sans-serif; 
         color: #333;
     }

     /* Navbar Styles */
     .navbar {
         backdrop-filter: blur(12px);
         background-color: rgba(255, 255, 255, 0.85);
         transition: all 0.3s ease-in-out;
         padding: 20px 0;
         border-bottom: none; 
     }

     .navbar.scrolled {
         background-color: rgba(255, 255, 255, 0.95);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         padding: 10px 0;
     }

     .navbar-brand {
         font-weight: 750; 
         font-size: 1.40rem; 
         color: #274D76 !important; 
         text-decoration: none; 
     }

     .navbar-brand img {
         height: 40px; 
         object-fit: contain;
     }

     /* Nav Links & Buttons Common Styles */
     .nav-link,
     .btn-rounded {
         font-weight: 500;
         transition: all 0.25s;
     }

     .nav-link {
         color: #333; 
         margin: 0 10px; 
         text-decoration: none; 
     }

     .nav-link:hover,
     .nav-link:active,
     .nav-link:focus {
         color: #4661E6; 
         transform: translateY(-2px);
         text-decoration: none; 
     }

     .btn-rounded {
         border-radius: 50px; 
         padding: 8px 22px; 
         font-size: 1rem; 
     }
     .btn-primary.btn-rounded {
         background-color: #0d6efd; 
         border-color: #0d6efd; 
     }
     .btn-primary.btn-rounded:hover {
         background-color: #0b5ed7; 
         border-color: #0a58ca;
         box-shadow: 0 0 10px rgba(70, 97, 230, 0.4); 
     }
     .btn-outline-primary.btn-rounded {
         color: #0d6efd; 
         border-color: #0d6efd; 
     }
     .btn-outline-primary.btn-rounded:hover {
         background-color: #0d6efd;
         color: #fff;
         box-shadow: 0 0 10px rgba(70, 97, 230, 0.4);
     }

     /* Navbar Toggler (Hamburger) Styles */
     .navbar-toggler {
         border: none !important;
         box-shadow: none !important;
         padding: 0.25rem 0.5rem;
     }

     .navbar-toggler-icon-custom {
         display: inline-block;
         width: 24px;
         height: 18px;
         position: relative;
         cursor: pointer;
         transition: transform 0.3s ease-in-out;
     }

     .navbar-toggler-icon-custom span {
         position: absolute;
         height: 3px;
         width: 100%;
         background: #333; 
         left: 0;
         transition: 0.3s ease;
         border-radius: 2px;
     }

     .navbar-toggler-icon-custom span:nth-child(1) { top: 0; }
     .navbar-toggler-icon-custom span:nth-child(2) { top: 7px; }
     .navbar-toggler-icon-custom span:nth-child(3) { top: 14px; }

     .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(1) {
         top: 7px;
         transform: rotate(45deg);
     }

     .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(2) {
         opacity: 0;
     }

     .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(3) {
         top: 7px;
         transform: rotate(-45deg);
     }

     /* Offcanvas Menu Styles */
     .offcanvas-end {
         width: 260px; 
         background-color: #fff;
         box-shadow: none; 
     }

     .offcanvas a {
         font-weight: 500;
         padding: 10px 0; 
         color: #333; 
         text-decoration: none; 
         display: block; 
     }

     .offcanvas a:hover,
     .offcanvas a:active,
     .offcanvas a:focus {
         color: #4661E6; 
         background-color: transparent; 
         text-decoration: none;
     }

     /* Skip Link Styles */
     .visually-hidden-focusable:active,
     .visually-hidden-focusable:focus {
         position: static;
         width: auto;
         height: auto;
         margin: 0;
         overflow: visible;
         clip: auto;
         white-space: normal;
     }

    /* Page Header & Breadcrumb Styles */
    .breadcrumb {
      background-color: transparent;
      margin-bottom: 0;
      padding: 1rem 0;
    }
    .breadcrumb-item a { color: #0d6efd; text-decoration: none; }
    .breadcrumb-item a:hover { color: #0a58ca; }
    .breadcrumb-item.active { color: #6c757d; }

    .page-header {
      background-color: #f7f9fc;
      padding: 2rem 0;
      border-bottom: none;
    }
    .page-header h1 {
      font-weight: 700;
      color: #1e293b;
      font-size: 2.5rem;
    }

    /* Table of Contents */
    .table-of-contents {
        background-color: #fff;
        border-radius: 8px; 
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
        position: sticky; /* Makes it stick on scroll */
        top: 100px; /* Adjust based on navbar height */
    }
    .table-of-contents h3 {
        font-weight: 600;
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0; 
    }
    .table-of-contents ul { list-style-type: none; padding-left: 0; }
    .table-of-contents ul li { margin-bottom: 0.75rem; }
    .table-of-contents a {
        text-decoration: none;
        color: #334155;
        font-weight: 500;
        transition: color 0.2s ease;
    }
    .table-of-contents a:hover { color: #4661E6; }
    .table-of-contents .list-unstyled.ps-3 {
        border-left: 2px solid #e9eff6; 
        margin-top: 0.75rem !important;
        padding-left: 1rem !important;
    }
    .table-of-contents .list-unstyled.ps-3 li { margin-bottom: 0.5rem; }
    .table-of-contents .list-unstyled.ps-3 li a {
        font-size: 0.9rem;
        color: #475569;
        font-weight: 400;
    }

    /* Resume Example Box */
    .resume-example-box {
        border: 1px solid #dee2e6; 
        border-radius: 8px; 
        padding: 2rem;
        background-color: #fff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }
    .resume-example-box .header-bar {
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .resume-example-box .fa-check-circle { color: #16a34a; }

    .resume-example-box .btn-copy {
        border-color: #cbd5e1;
        color: #475569;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        padding: 6px 12px;
        background-color: #fff;
    }
    .resume-example-box .btn-copy:hover { background-color: #f8fafc; border-color: #94a3b8; }
    
    .resume-example-box h2 { font-weight: 700; font-size: 2.2rem; color: #1e293b; margin-bottom: 0.2rem; }
    .resume-example-box .resume-title { font-size: 1.3rem; font-weight: 500; color: #475569; margin-bottom: 1.5rem; }
    .resume-example-box .contact-info { font-size: 0.95rem; color: #475569; margin-bottom: 2rem; }
    .resume-example-box h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; }
    .resume-example-box p, .resume-example-box ul li { font-size: 0.95rem; color: #334155; line-height: 1.6; }
    .resume-example-box ul { list-style-type: disc; padding-left: 20px; margin-bottom: 1rem; }
    .resume-example-box ul li { margin-bottom: 0.5rem; }
    .resume-example-box strong { font-weight: 600; }


    /* Build Your Resume Sidebar */
    .build-resume-sidebar {
        background-color: #f1f5f9;
        border-radius: 8px; 
        padding: 2rem; 
        text-align: center;
        border: 1px solid #e2e8f0;
    }
    .build-resume-sidebar img { max-width: 180px; margin: 0 auto 1.5rem; }
    .build-resume-sidebar h3 { font-weight: 700; font-size: 1.5rem; margin-bottom: 0.75rem; color: #1e293b; }
    .build-resume-sidebar p { font-size: 0.95rem; color: #475569; margin-bottom: 1.5rem; line-height: 1.5; }
    .build-resume-sidebar .btn-dark { background-color: #0f172a; border-color: #0f172a; font-size: 1rem; font-weight: 500; padding: 12px 24px; border-radius: 8px; }
    .build-resume-sidebar .btn-dark:hover { background-color: #1e293b; border-color: #1e293b; }

    /* Detailed Content Section styles */
    .content-section {
        background-color: #fff;
        padding: 2.5rem;
        border-radius: 8px;
        margin-bottom: 2.5rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }
    .content-section h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 1.5rem;
    }
    .content-section h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #334155;
        margin-top: 2rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 0.5rem;
    }
    .content-section p, .content-section li {
        font-size: 1rem;
        line-height: 1.7;
        color: #334155;
    }
    .content-section ul {
        list-style-position: outside;
        padding-left: 1.5rem;
        list-style-type: disc;
    }
    .content-section ul li {
      margin-bottom: 0.5rem;
    }
    .content-section strong {
        color: #1e293b;
    }
    
    /* Scroll to Top Button Styles */
    #scrollToTopBtn {
        display: none; position: fixed; bottom: 30px; right: 30px; z-index: 99;
        border: none; outline: none; background-color: rgba(0, 0, 0, 0.7);
        color: white; cursor: pointer; width: 50px; height: 50px;
        border-radius: 50%; font-size: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s, opacity 0.3s; opacity: 0;
        display: flex; justify-content: center; align-items: center;
    }
    #scrollToTopBtn:hover { background-color: rgba(0, 0, 0, 0.9); }
    
    /* ADDED: Styles for Floating TOC Button and Offcanvas */
    #tocBtn {
        position: fixed; bottom: 30px; left: 30px; z-index: 1040;
        width: 50px; height: 50px; background-color: #1e293b;
        color: #fff; border-radius: 50%; border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 1.2rem;
        display: none; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.3s ease-in-out;
    }

    #tocOffcanvas .offcanvas-body { padding: 0; }
    #tocOffcanvas .toc-list-mobile { list-style: none; padding: 0; margin: 0; }
    #tocOffcanvas .toc-list-mobile > li > a {
        display: block; padding: 1rem 1.5rem; font-weight: 500;
        color: #343a40; text-decoration: none; border-bottom: 1px solid #e9ecef;
    }
    #tocOffcanvas .toc-list-mobile a:hover { background-color: #f8f9fa; color: #0d6efd; }
    #tocOffcanvas .toc-submenu-mobile { list-style: none; padding: 0; margin: 0; background-color: #f8f9fa;}
    #tocOffcanvas .toc-submenu-mobile li a {
        display: block; padding: 0.75rem 1.5rem 0.75rem 2.5rem; font-weight: 400;
        color: #495057; text-decoration: none; border-bottom: 1px solid #e9ecef;
    }

    /* Footer Styles */
    .rs-footer {
        padding: 60px 0 30px 0; font-family: system-ui, sans-serif;
        background-color: #1A222F; color: #ffffff;
    }
    .rs-footer a { text-decoration: none; color: #adb5bd; }
    .rs-footer a:hover { color: #ffffff; }
    .rs-footer-bottom {
        border-top: 1px solid #495057; margin-top: 40px;
        padding-top: 20px; font-size: 14px; color: #ffffff;
    }
    .rs-footer-bottom a { color: #ffffff; }

    /* Accordion items for mobile footer */
    .accordion-item {
        background-color: #1A222F; border: none; margin-bottom: 5px;
        border-radius: 0.25rem; box-shadow: none !important;
    }
    .accordion-item:last-of-type { margin-bottom: 0; }
    .accordion-header { background-color: #1A222F; }
    .rs-accordion-button {
        position: relative; background-color: transparent !important;
        color: #ffffff !important; font-weight: 600; padding-left: 1.5rem;
        border: none !important; box-shadow: none !important;
        outline: none !important; transition: none !important;
    }
    .rs-accordion-button:hover, .rs-accordion-button:active, .rs-accordion-button:not(.collapsed) {
        background-color: transparent !important; color: #ffffff !important;
        border: none !important; box-shadow: none !important; outline: none !important;
    }
    .rs-accordion-button::after {
        content: ""; position: absolute; right: 1rem; top: 50%;
        transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px;
        border-style: solid; border-width: 2px 2px 0 0; border-color: #ffffff;
        transition: transform 0.3s ease; transform-origin: center; pointer-events: none;
    }
    .rs-accordion-button.collapsed::after { transform: translateY(-50%) rotate(45deg); }
    .rs-accordion-button:not(.collapsed)::after { transform: translateY(-50%) rotate(135deg); }
    .accordion-body { background-color: #1A222F; color: #adb5bd; padding-bottom: 0.5rem; }

    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .table-of-contents {
            display: none; /* MODIFIED: Hide desktop TOC on mobile */
        }
    }
    @media (min-width: 768px) { .rs-mobile-footer { display: none; } }
    @media (max-width: 767.98px) { .rs-desktop-footer { display: none; } }