.navheader {
            background-color: transparent;
            font-size: small;
            margin-top: 20px;
        }

        .breadcrumb {
            padding: 40px 20px 20px 20px;
            color: #666;
            margin-top: 25px;


        }

        .breadcrumb a {
            color: #666;
            text-decoration: none;
            font-size: small;
        }

        .breadcrumb .separator {
            margin: 0 5px;
            color: #999;
            font-size: small;
        }

        .breadcrumb .current {
            color: #cc2c2c;
            font-size: small;
        }

        /* Default Header Styling (Web View) */
        .header img {
            width: 100%;
            height: auto;
            margin-bottom: 0.75rem;
            margin-top: 2%;
        }

        .header23 {
            text-align: center;
        }
       
      


        /* Responsive Adjustments */
        @media (max-width: 768px) {
            /* Phone View Header Adjustments */

            /* pdh program */

            .header23 {

                bottom: -25px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #cc2c2c;
                color: white;
                padding: 15px 30px;
                border-radius: 40px;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                width: 300px;
                z-index: 10;


            }


            .header {

                width: 100%;


            }

            .navheader {
                background-color: transparent;
                font-size: small;
                margin-top: 20px;
            }

            .custom-breadcrumb {
                background-color: #8b8b8b;
                padding: 0;
                margin-top: 15px;
            }

            .custom-breadcrumb .breadcrumb-item a {
                color: white;
                /* Adjusted for contrast */
                text-decoration: none;
                font-weight: 500;
            }

            .custom-breadcrumb .breadcrumb-item a:hover {
                color: #b02a37;
                text-decoration: underline;
            }

            .custom-breadcrumb .breadcrumb-item.active {
                color: #b02a37;
                font-weight: bold;
            }

            /* Default Header Styling (Web View) */
            .header img {
                width: 100%;
                height: auto;
                margin-bottom: 4.75rem;
                margin-top: 25%;
                /* mb-3 equivalent */
            }

            .breadcrumb {
                padding: 40px 20px 20px 20px;
                color: #666;
                margin-top: 25px;
                margin-left: 36px;


            }

            .breadcrumb a {
                color: #666;
                text-decoration: none;
                font-size: small;
                left: 10px;
            }

            .breadcrumb .separator {
                margin: 0 5px;
                color: #999;
                font-size: small;
            }

            .breadcrumb .current {
                color: #cc2c2c;
                font-size: small;
            }


        }

        /* Responsive Adjustments */
        /* @media (max-width: 768px) { */
        /* Phone View Header Adjustments */

        /* pdh program */

        /* }
        @media (max-width: 576px) { */
        /* Further Adjustments for Very Small Phones */
        /* .content h3 {
                font-size: 1rem;
            }
            .content h5 {
                font-size: 0.9rem;
            }
            .content p, .content ul li {
                font-size: 0.85rem;
            }
            .sidebar a {
                font-size: 0.85rem;
            } */

        .pdf-content {
            margin-bottom: 20px;
        }

        .pdf-content embed {
            width: 100%;
            height: 200px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .download-btn {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 12px 24px;
            background-color: #9f281fff;
            color: white;
            text-decoration: none;
            text-align: center;
            border-radius: 4px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .download-btn:hover {
            background-color: #ff0808ff;
        }








  /* --- Hero Section --- */
        /* This is the main container for the background image. */
        .hero-section {
            /* This is the KEY. It allows us to position child elements relative to this container. */
            position: relative; 
            width: 100%;
            height: 400px; /* Adjust height as needed */
            
            /* * --- IMPORTANT --- 
             * Replace the URL below with the actual path to YOUR image.
             * I'm using a placeholder so you can see the layout working immediately.
            */
            background-image: url('../img/Eligibilty_img.png');
            background-size: cover;
            background-position: center;
             margin-top: 95px;
        }

        /* This container holds the title and breadcrumbs. It's centered and overlaps the image. */
        .hero-content {
            /* Center the container horizontally */
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 20px; /* Padding for smaller screens */

            /* This is the KEY for the overlap effect. */
            position: absolute;
            width: calc(100% - 40px); /* Full width minus padding */
            bottom: -110px; /* Pulls the content DOWN, outside the parent's bottom edge. */
            
   
            left: 0;
            right: 0;
        }
         
      

        /* The red box for the main title. */
        .title-box {
            background-color: #ba2a21;
            color: white;
            padding: 20px 30px;
            border-radius: 8px;
            display: inline-block; /* Makes the box fit the content width */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
        }

        .title-box h1 {
            margin: 0;
            font-size: 2.25rem; /* 36px */
            font-weight: 600;
        }

        /* The "Home > About University" navigation links. */
        .breadcrumbs {
            margin-top: 1rem; /* 16px */
            font-size: 1rem; /* 16px */
            color: #555;
            padding-left: 5px;
        }

        .breadcrumbs a {
            color: #555;
            text-decoration: none;
            transition: text-decoration 0.2s ease-in-out;
        }

        .breadcrumbs a:hover {
            text-decoration: underline;
        }

        .breadcrumbs i {
            margin: 0 0.5rem; /* 8px */
            font-size: 0.8rem; /* 12.8px */
            color: #888;
        }

        /* Styling for the new horizontal rule */
        .breadcrumb-divider {
            border: 0;
            height: 1px;
            width: 30%;
            background-color: #3838388b;
            margin-top: 1rem;
        }
        
        /* This extra div ensures content below the hero section is pushed down correctly. */
        .content-pusher {
            height: 100px;
        }
        
        /* --- RESPONSIVE STYLES for Mobile Phones --- */
        @media (max-width: 768px) {
            .hero-section {
                height: 250px; /* Use a shorter image on mobile */
            }

            .hero-content {
                bottom: -155px; /* Reduce the overlap amount */
            }

            .title-box {
                padding: 15px 20px;
                width: 100%; /* Make the title box full-width */
                box-sizing: border-box; /* Ensures padding is inside the width */
                text-align: center;
            }

            .title-box h1 {
                font-size: 1.75rem; /* 28px - smaller font for mobile */
            }

            .breadcrumbs {
                text-align: center; /* Center breadcrumbs below the title */
                padding-left: 0;
            }
            
            .content-pusher {
                height: 80px;
            }
        }