body {
            margin: 0;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 300;
            /* Makes the letters tall and thin */
            overflow-x: hidden;
            padding-bottom: 0;
            /* Ensure no bottom padding for the body */
        }

        .top-header {
            background: #a37200;
            color: white;
            padding: 5px 20px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        .top-header a {
            color: white;
            text-decoration: none;
            margin-right: 15px;
        }

        .main-header {
            background: #004080;
            color: white;
            padding: 0px 20px;
            position: fixed;
            top: 30px;
            /* Adjusted to appear below the top header */
            width: 100%;
            z-index: 999;
        }

        .logo img {
            height: 50px;
        }

        .uni-name {
            display: none;
            font-weight: 300;
            /* Keeps the university name thin */
        }

        @media (min-width: 992px) {
            .uni-name {
                display: block;
            }
        }

        .navbar-nav .nav-link {
            font-size: 18px;
            /* Increased font size */
            font-weight: 300;
            /* Keeps it thin */
        }

        .navbar-nav .nav-item {
            position: relative;
            height: 100%;
            /* Ensure full height */
        }

        .navbar-nav .nav-link {
            font-size: 18px;
            font-weight: 400;
            padding: 20px;
            /* Adjust padding to ensure full coverage */
            transition: background 0.3s ease-in-out;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .navbar-nav .nav-item:hover {
            background: #a37200;
            /* Semi-transparent white hover effect */
        }

        /* TOP HEADER */
        .top-header a {
            position: relative;
            color: white;
            text-decoration: none;
            margin-right: 15px;
            padding: 5px 0;
            transition: color 0.3s ease-in-out;
        }

        .top-header a::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 3px;
            /* Thickness of the top line */
            background: white;
            transform: scaleX(0);
            /* Initially hidden */
            transition: transform 0.3s ease-in-out;
        }

        .top-header a:hover::after {
            transform: scaleX(1);
            /* Expand on hover */
        }

        /* STICKY */
        .top-header {
            background: #a37200;
            color: white;
            padding: 5px 20px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .main-header {
            background: #004080;
            color: white;
            padding: 0px 20px;
            position: sticky;
            top: 30px;
            /* Adjusted to stick below .top-header */
            z-index: 999;
        }

        /* Remove space below footer iframe */
        iframe {
            margin-bottom: 0;
            /* Remove any space below the iframe */
            display: block;
            /* Ensure no extra space below the iframe */
        }

        /* Ensure no space after the footer iframe */
        body,
        html {
            height: 100%;
        }

        iframe:last-of-type {
            margin-bottom: 0 !important;
            /* Force no space after the last iframe */
        }

        .navbar-nav .dropdown:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu .dropdown-item:hover {
            background-color: #a37200;
            /* Example hover background color */
            color: #ffffff;
            /* Example hover text color */
        }

        .dropdown-menu {
            border-radius: 0;
            /* Removes rounded corners */
            min-width: 200px;
            /* Makes the dropdown box a bit bigger */
            left: auto;
            right: 0;
            /* Align to the right */
        }

        /* ADVERT SLIDER CSS */

        .apply-btn:hover {
            text-decoration: underline;
        }

        /* Breadcrumb container adjustment */
        .breadcrumb-container {
            display: flex;
            padding: 0;
            height: 200px;
            width: 100%;
            margin: 0;
            position: relative;
            top: 0px;
            /* Adjusted to attach to the bottom of the nav */
        }

        .breadcrumb-container>div {
            height: 100%;
        }

        .breadcrumb-container .left-column {
            flex: 70%;
            background: url('images/tech.PNG') no-repeat center center;
            background-size: cover;
        }

        .breadcrumb-container .right-column {
            flex: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #333;
            font-size: 2rem;
            font-weight: bold;
            background: #f8f9fa;
        }

        @media (max-width: 768px) {
            .breadcrumb-container {
                flex-direction: column;
                height: auto;
                top: 90px;
            }

            .breadcrumb-container .left-column,
            .breadcrumb-container .right-column {
                flex: 100%;
            }

            .breadcrumb-container .right-column {
                padding: 20px;
                font-size: 1.5rem;
                
            }
        }
        
        @media screen and (max-width: 768px) {
    .breadcrumb-container {
        display: flex;
        flex-direction: column; /* Stack items vertically */
    }
    
    .breadcrumb-container .left-column {
        flex: none; /* Remove flex sizing */
        height: 150px; /* Set a height to make the image visible */
        width: 100%; /* Ensure it spans the full width */
        margin-top: -90px;
    }

    .breadcrumb-container .right-column {
        text-align: left; /* Center the text */
        padding: 10px;
        color:#a37200;
        margin-left: 0px;
        font-size: 30px;
    }
}






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

        .small-font {
            font-size: 14px;
        }

        .middle-column img {
            float: right;
            margin-left: 15px;
            border-radius: 5px;
        }

        p {
            text-align: justify;
        }

        @media (max-width: 768px) {
            .middle-column img {
                float: none;
                display: block;
                margin: 10px auto;
            }
        }
        
    
        @media screen and (max-width: 768px) {
            .middle-column p{
                    margin-top: 60px;
            }
    .row {
        display: flex;
        flex-direction: column;
        
    }

   /* Ensure the parent container has display flex */
.d-flex {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center the children (optional) */
}

/* Customize the order of each column */
#about-content {
    order: 1; /* Moves the main content to the top */
}

.d-flex .col-md-8 {
    order: 2; /* Move the content (iframe) second */
}

.col-md-2 {
    order: 3; /* Move the left column (menu) below */
}

.col-md-3 {
    order: 4; /* Move the right column to the bottom */
}


    /* Ensure vertical spacing between all columns */
    
    

    .col-md-2 ul {
        padding: 0;
        text-align: left; /* Centering menu items */
    }

    .col-md-2 li {
        font-size: 16px; /* Adjust font size for smaller screens */
    }

    .middle-column img {
        max-width: 100%; /* Make images responsive */
        height: auto;
        float: none; /* Remove float on smaller screens */
        display: block;
        margin: 10px auto; /* Center images */
    }
}



    .col-md-2 ul {
        padding: 0;
    }
    .col-md-2 li {
        list-style: none;
        font-size: 18px; /* Increase font size */
        color: #a37200; /* Apply color to the li */
    }
    .col-md-2 li a {
        text-decoration: none; /* Remove underline */
        display: block;
        padding: 5px 0;
        color: #a37200; /* Apply color to the links */
    }
    /* Line on top and bottom of the first li */
    .col-md-2 li:first-child {
        border-top: 1px solid #ccc; /* Line on top */
        border-bottom: 1px solid #ccc; /* Line on bottom */
    }
    /* Lines between all li except the first and last */
    .col-md-2 li:not(:first-child):not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    /* Line on bottom of the last li */
    .col-md-2 li:last-child {
        border-bottom: 1px solid #ccc; /* Line on bottom */
    }




        /* Footer container */
        .footer {
            background-color: #a37200;
            padding: 40px 0;
        }

        /* Footer columns */
        .footer .row {
            display: flex;
            flex-wrap: wrap;
        }

        /* Ensure columns are positioned correctly */
        .footer .col {
            padding: 20px;
            color: white;
            text-align: left;
            position: relative;
            /* Important for absolute positioning of ::before */
        }

        /* Footer column title with vertical bar */
        .footer h4 {
            display: flex;
            align-items: center;
            color: black;
            position: relative;
            /* Ensures correct positioning */
        }

        /* Vertical bar */
        .footer h4::before {
            content: '';
            width: 5px;
            height: 30px;
            background-color: white;
            /* Change this if needed */
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 10px;
            /* Space between bar and text */
            margin-left: -10px;
        }

        /* Quick Links styling */
        .footer .col ul {
            list-style: none;
            padding: 0;
        }

        .footer .col ul li {
            margin: 5px 0;
        }

        .footer .col ul li a {
            color: white;
            text-decoration: none;
        }

        /* Social Media icons */
        .footer .social-icons a {
            font-size: 20px;
            color: white;
            margin-right: 15px;
            text-decoration: none;
        }

           /* Make footer content responsive on smaller screens */
        @media (max-width: 768px) {
            .footer .col {
                width: 100%;
                margin-bottom: 20px;
                text-align: center;
            }

            .footer .social-icons {
                text-align: left;
                padding-top: 20px;
            }
        }