:root {
            --primary-blue: #2c75c0; 
            --dark-blue: #1e5494;
            --light-gray: #f8f9fa;
        }

        body { font-family: 'Poppins', sans-serif; color: #000; }

        /* --- 1. TOP BAR --- */
        .top-bar { background-color: var(--primary-blue); color: white; font-size: 13px; padding: 6px 0; }
        .top-bar a { color: white; margin-right: 12px; }

        /* --- 2. HEADER --- */
        .header-main { padding: 15px 0; background: white; }
        .institution-name { font-family: 'Public Sans', sans-serif;
        font-weight: 700;
        color: #2c75c0; /* Matching the blue in your image */
        letter-spacing: -1px; /* Creates the tight look of the logo */
        text-transform: none;}
        .partner-logos img { height: 50px; margin-left: 15px; }

        /* --- 3. NAVIGATION --- */
        .navbar-custom { background-color: #034694; padding: 0; }
        .navbar-custom .nav-link { color: white !important; padding: 12px 20px !important; font-weight: 400; }
        
        .dropdown-submenu { position: relative; }
        .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; display: none; }
        @media (min-width: 992px) {
            .dropdown:hover > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu { display: block; }
        }


        /* --- 4. SLIDER SECTION --- */
        .carousel-item {
            height: 500px; /* Adjust height for desktop */
            background-color: #333;
        }
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image covers area without stretching */
            opacity: 0.7; /* Darkens image to make caption readable */
        }
        .carousel-caption {
            bottom: 30%;
            text-align: left;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        .carousel-caption h2 {
            font-size: 3rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        /* --- 5. ABOUT SECTION --- */
        .about-section { padding: 60px 0; }
        .section-title { font-weight: 800; font-size: 2.5rem; position: relative; margin-bottom: 40px; }
        .section-title::after {
            content: "◆"; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);
            color: var(--dark-blue); font-size: 1.5rem;
        }
        .about-img { width: 100%; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .text-highlight { color: #d93d3d; font-weight: 600; text-decoration: underline; }

        /* --- 6. FOOTER --- */
        footer { color: #000; padding-top: 60px; font-size: 14px; }
        footer h5 { 
            color: #000; font-weight: 700; margin-bottom: 25px; 
            position: relative; 
            display: inline-block;
        }

         /*---------8. logo-----------*/

        .footer-links { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: rgba(255,255,255,0.85); text-decoration: none; transition: 0.3s; }
        .footer-links a:hover { color: #ffffff; padding-left: 8px; }
        .contact-info li { margin-bottom: 15px; display: flex; align-items: flex-start; }
        .contact-info i { color: #ffffff; margin-right: 12px; margin-top: 4px; font-size: 16px; }
        .copyright-bar { background:#0C4D9E; padding: 10px 0; margin-top: 4px; font-size: 22px; color: #fff; }
        .footer-social a { 
            display: inline-block; width: 35px; height: 35px; background: rgba(255,255,255,0.1); 
            color: white; text-align: center; line-height: 35px; border-radius: 4px; margin-right: 8px; transition: 0.3s;
        }
        .footer-social a:hover { background: #ffffff; color: var(--primary-blue); }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .institution-name { font-size: 1.4rem; text-align: center; }
            .carousel-item { height: 300px; }
            .carousel-caption h2 { font-size: 1.8rem; }
            .dropdown-submenu > .dropdown-menu { left: 0; margin-left: 20px; }
        }

        .btn-primary{
            color: #fff;
    background-color: #034694;
    border-color: #034694;
        }