.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);           /* semi-transparent background */
  backdrop-filter: blur(20px) saturate(150%);       /* blur and color saturation */
  -webkit-backdrop-filter: blur(20px) saturate(150%); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.4);       /* faint white border */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);        /* soft drop shadow */
}

/* Optional highlight/glare effect */
.liquid-glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at top left,
                rgba(255,255,255,0.4) 0%,
                rgba(255,255,255,0.0) 60%);
  /* This creates a subtle white glow in the top-left corner */
}



/* Fullscreen background video */
#bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  min-width: 100%;
  min-height: 100%;
  background: #000;
}
/* 3D Fish overlay styling - removed, handled inline for <model-viewer> */
/* Custom styles for PGL project. Move any non-Bootstrap styles here. */

/* Tile/card styles for index.html */
.tile.card {

  transition: box-shadow 0.2s ease-in-out;
}
.tile.card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.tile .card-title {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
.tile .card-text {
  font-size: 0.9rem;
  color: #555;
}

/* Search page customizations */
.intro {
  color: #333;
}
.desc {
  font-size: 0.9rem;
  color: #444;
  margin-top: 0.25rem;
}

.fs-12 {
  font-size: 6rem; /* Adjusted for better readability */
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Navigation Menu Styles */
#main-nav {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#main-nav .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#main-nav .navbar-nav .nav-link:hover,
#main-nav .navbar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

#main-nav .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.5rem;
}

#main-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  #main-nav .navbar-nav {
    text-align: center;
    margin-top: 1rem;
  }
  
  #main-nav .navbar-nav .nav-link {
    margin: 0.25rem 0;
  }
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #1e42c2;    /* your site-blue */
}
::-webkit-scrollbar-thumb {
  background-color: #1641a0;  /* a darker contrast */
  border-radius: 6px;
  border: 3px solid #1e42c2;
}

body {
  color: white;
  min-height: 110vh;
    scrollbar-width: thin;
  scrollbar-color: #1641a0 #1e42c2;
}
a {
  text-decoration: none;
  color: #f24130;
}