.top-strip {
       background-color: #0C0188;
       height: 40px;
   }

   .header-section {
       background-color: #f8f9fa;
       padding: 10px 40px;
       border-bottom: 3px solid #0C0188;
   }

   .logo-img {
       height: 150px;
       width: 150px;
       object-fit: contain;
   }

   .center-title h1 {
       color: #0C0188;
       font-size: 52px;
       margin: 0 0 5px 0;
       font-weight: bold;
   }

   .center-title p {
       color: #666;
       font-size: 36px;
       margin: 0;
   }

   .navbar {
       background-color: #0C0188;
       padding: 0;
   }

   .navbar-nav {
       width: 100%;
       justify-content: space-around;
   }

   .navbar-nav .nav-item {
       text-align: center;
       font-weight: bold;
   }

   /* Apply flex only to normal items, not dropdown */
   .navbar-nav .nav-item:not(.dropdown) {
       flex: 1;
   }

   .navbar-nav .nav-link {
       color: white !important;
       padding: 18px 24px;
       position: relative;
       transition: all 0.4s ease;
   }

   .navbar-nav .nav-link:hover {
       background-color: white;
       color: black !important;
   }

   /* Prevent dropdown from collapsing instantly */
   .dropdown-menu {
    left: 0;
    right: 0;
}

   /* DROPDOWN MENU STYLING LIKE NAVBAR */
   .dropdown-menu {
       background-color: #0C0188;
       /* same blue as navbar */
       border: none;
       /* remove border */
       padding: 0;
       /* same padding style */
       text-align: center;
       width: 100%;
       /* full width under item */
   }

   /* Dropdown items style */
   .dropdown-menu .dropdown-item {
       color: white;
       /* white text like navbar */
       padding: 15px 20px;
       font-weight: bold;
       transition: 0.3s ease;
   }

   /* Hover effect same as navbar */
   .dropdown-menu .dropdown-item:hover {
       background-color: white;
       color: black;
   }


   .principles-section {
       background-color: #ffffff;
       padding: 50px 0;
   }

   .photo-container img {
       width: 100%;
       height: 500px;
       object-fit: fill;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .photo-caption {
       margin-top: 15px;
       text-align: center;
   }

   .photo-caption h3 {
       color: #0C0188;
       font-size: 28px;
       margin: 0 0 5px 0;
   }

   .photo-caption p {
       color: #666;
       font-size: 24px;
       margin: 0;
   }

   .message-text {
       background-color: #f8f9fa;
       padding: 25px;
       border-radius: 8px;
   }

   .message-text h1 {
       color: #0C0188;
       margin: 0 0 15px 0;
       font-weight: bold;
   }

   .message-text p {
       color: #555;
       font-size: 18px;
       line-height: 1.8;
       margin-bottom: 15px;
       text-align: justify;
   }

   .message-text p:last-child {
       margin-bottom: 0;
   }

   @media (max-width: 768px) {
       .header-section {
           padding: 15px;
       }

       .center-title h1 {
           font-size: 24px;
       }

       .center-title p {
           font-size: 14px;
       }

       .photo-container img {
           height: 300px;
       }

       .navbar-nav .nav-link {
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       }
   }



   /* Footer */
   footer {
       background-color: #343a40;
       color: white;
       text-align: center;
       padding: 15px;
       margin-top: 50px;
   }