/* Navigation Bar */
 .navbar {
     background-color: rgba(255, 255, 255, 0.8);
     /* Changed to 70% opacity */
     padding: 15px 0;
     font: 1em sans-serif;
 }

 .container{
     max-width: 1200px;
     margin: 15 15 15 15px;
     padding: 15 15 15 15px;
 }

 .container-fluid {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
 }

 .navbar .nav-link {
     color: #1296DB;
 }

 .navbar .nav-link:hover {
     color: #f8f9fa;
     background-color: #1296DB;
 }

 .dropdown-divider {
     margin: 0;
     padding: 0;
     border: 0;
     border-top: 1px solid rgba(0, 0, 0, .1);
 }

 /* Add spacing between navigation items */
 .navbar-nav .nav-item {
     margin-left: 8px;
     margin-right: 8px;
 }

 /* Optional: Improve divider visibility */
 .navbar-nav .dropdown-divider {
     margin: 0.5rem 0;
 }

 .dropdown-menu {
     background-color: #f8f9fa;

 }

 .dropdown-menu a {
     color: #1296DB;
 }

 .dropdown-menu a:hover {
     color: #f8f9fa;
     background-color: #1296DB;
 }

 .nav-logo img {
     max-height: 60px;
     display: block;
 }


 /* Hero Section - fill available space */
 .hero {
     position: fixed;
     /* Fixed position to cover entire viewport */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%),
         url('../images/bc02.jpg') no-repeat center center/cover;
     z-index: -1;
     /* Place behind all content */
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .hero h1 {
     font-size: 3em;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     margin-bottom: 0.5rem;
 }

 .hero p {
     font-size: 1.5em;
     margin-top: 0.5rem;
 }

 h1,
    h2 {
      color: #ffffff;
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
    }

    section.research-subarea {
      padding: 20px;
      margin: 20px;
      border-bottom: 1px solid #004080; 
    }
    
    section h2 {
      border-bottom: 2px solid #004080;
      padding-bottom: 10px;
      margin-bottom: 20px;
      color: #004080;
    }

    h2.page-title {
      border-bottom: 2px solid #004080;
      padding-bottom: 40px;
      margin-bottom: 40px;
      color: #004080;
      text-align: center;
    }

    h3.sub-title {
      color: #004080;
      margin: 30px;
    }

    h3.title-summary {
      font-size: 1.1em;
      line-height: 1.6;
      margin: 30px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 15px;
    }

    /* People section styling using Flexbox */
    .people-section {
        display: flex;
        align-items: center;
        gap: 20px;
      }
  
      .people-info {
        flex: 1;
      }
  
      .people-section img {
        max-width: 150px;
        border-radius: 8px;
        cursor: pointer;
      }




 /* Footer styling */
 footer {
     position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 15px 15px 15px 15px;
     background: linear-gradient(to top, rgba(10, 120, 180, 0.4), rgba(18, 150, 219, 0.6));
     color: #fff;
     font-size: 0.8em;
     display: flex;
     justify-content: center;
     align-items: center;
 }