:root {
    --color1: #FFFFFF;
    --color2: #1F4E79;
    --color3: #5B6B7A;
    --color4: #F3F5F7;
    --color5: #2F7E8D;
    --color6: #1E1E1E;

}

button, .w3-button, a {
    cursor: pointer;
}

body {
    background-color: var(--color4);
}

.w3-sidebar {
    width: 100%;
}

.nav-theme {color: var(--color1); background-color: var(--color2); text-decoration: none;}
.nav-theme-action {color: var(--color1); background-color: var(--color2); font-weight:bold; text-decoration: none;}
.nav-theme-action:hover {color: var(--color1); background-color: var(--color5); font-weight:bold; text-decoration: none;}

.mobile-nav-theme {color: var(--color2); background-color: var(--color4); text-decoration: none;}
.mobile-nav-theme-action {color: var(--color2); background-color: var(--color4); font-weight:bold; text-decoration: none;}
.mobile-nav-theme-action:hover {color: var(--color1); background-color: var(--color5); font-weight:bold; text-decoration: none;}

.content-card-theme {color: var(--color6); background-color: var(--color1);}
.content-card-theme-action {color: var(--color1); background-color: var(--color5); font-weight:bold; text-decoration: none;}
.content-card-theme-action:hover {color:var(--color1); background-color: var(--color2); font-weight:bold; text-decoration: none;}

.content-card-text-theme-action {color: var(--color2); font-weight:bold; text-decoration: none;}
.content-card-text-theme-action:hover {color:var(--color3); font-weight:bold; text-decoration: none;}

.footer-theme {color: var(--color1); background-color: var(--color2);}
.footer-theme-action {color: var(--color1); background-color: var(--color5); font-weight:bold; text-decoration: none;}
.footer-theme-action:hover {color: var(--color1); background-color: var(--color3); font-weight:bold; text-decoration: none;}

.logo-theme {color: var(--color1);}
.logo-theme-action {color: var(--color1); background-color: var(--color5); font-weight:bold; text-decoration: none;}
.logo-theme-action:hover {color: var(--color1); background-color: var(--color2); font-weight:bold; text-decoration: none;}

.logo-link-theme-action {color: var(--color1); font-weight:bold; text-decoration: none;}
.logo-link-theme-action:hover {color: var(--color3); font-weight:bold; text-decoration: none;}

.nav-background {
background-color: var(--color2);
}

.logo-theme h2{
  letter-spacing: 0.06em;
  line-height: 1.35;
  font-weight: 600;
  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 4px 14px rgba(0,0,0,0.65);
}

.divider {
    color: var(--color2) !important;
    height: 5px;
    border-top: 2px solid var(--color2) !important;
    border: none;  /* Remove the default border */
    width: 94%;
    margin: 10px auto;
}

.warning {
    color: crimson;
    font-weight: bold;
}

.custom_colour {
    color: var(--color5) !important;   
    }

.custom-border-left {border-left:2px solid var(--color3) }
.custom-border {border:2px solid var(--color3)}

.full-screen{
  overflow:hidden;
  position:relative;

  /* Desktop height */
  height:100vh;

  /* Desktop image */
  background-image: var(--desktop_background);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.full-screen .overlay{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.slides{
  display:none;
}

.slides h3{
  margin:0;
  line-height:1.3;
}

.hero-slogan{
  font-size:3rem;
}

button.content-card-theme-action{
  border: none;
}

/* fixed carousel height */
.slide-container{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-icon {
    width: 1.35em;
    min-width: 1.35em;
    text-align: center;
    flex-shrink: 0;
}

.nav-theme-dropdown .nav-theme-dropdown-action {
    display: flex !important;
    align-items: center;
    gap: 0.25em;
}

.nav-theme-dropdown .nav-label {
    display: block;
    line-height: 1.15;
}

/* Mobile settings */
@media (max-width:768px){

  .full-screen{
    height:100vh;  /* adjust 60–80vh if needed */

    /* Mobile image */
    background-image: var(--mobile_background);
    background-size:cover;
    background-position:center;
  }
 
.hero-slogan{ font-size:2rem; }

}