:root {
            --primary-blue: #0f2b46;
            --accent-gold: #c5a059;
            --light-bg: #f4f7f6;
            --text-dark: #333333;
        }
        body, h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; color: var(--text-dark); }
        h1, h2, h3 { font-family: 'Libre Baskerville', serif; }
        .w3-theme-dark { background-color: var(--primary-blue) !important; color: white !important; }
        .w3-theme-gold { background-color: var(--accent-gold) !important; color: white !important; }
        .w3-text-theme { color: var(--primary-blue) !important; }
        .w3-text-gold { color: var(--accent-gold) !important; }
        .w3-bar .w3-button { padding: 16px; font-weight: 600; }
        .nav-active { border-bottom: 4px solid var(--accent-gold); }
        footer { background-color: var(--primary-blue); color: white; padding: 32px 0; }

        
.hero-bg { 
    background-color: var(--primary-blue)!important;
    
}


       footer {
            border-top:6px ridge var(--accent-gold);
        }
        
        .footer-header {color:var(--accent-gold);}
        
        .w3-icon {
            margin-left:4px;
            margin-right:4px;
            padding-left:10px;
            padding-right:10px;
             transition-duration:.7s;
            color:var(--accent-gold);
            text-shadow: -3px 3px 3px rgba(0,0,0,0.4);
            
        }
        
        .w3-icon:hover {
            color:#fff;
            transform:translateY(4px);
            filter: hue-rotate(50deg)brightness(.8);
            transition-duration:.7s;
            text-shadow: -1px 1px 0 rgba(20,20,20,0.1);

        }
        
        
        .tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.tooltiptext {
  visibility: hidden;
  width: 150px;
    border:2px outset #111;
  background-color: rgba(0,0,0,0.5);
  color: #9ce212;
  text-align: center;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: -175%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
    transition-duration: 1s;
}