/*
  Original Template: Tooplate 2119 Gymso Fitness
  https://www.tooplate.com/view/2119-gymso-fitness
  */

  /* MAIN SITE-WIDE STYLESHEET */

  :root {
    --white-color:                  #ffffff;
    --primary-color:                #2C6E91;
    --secondary-color:              #5C946E;
    --third-color:                  #A3B18A;
    --fourth-color:                 #A0522D;
    --fifth-color:                  #7F5539;
    --p-color:                      #030303;

    /* old wqpredict, can be updated once redone */
    --dark-color: #16324f;   
    --ink-color:  #111827;

    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-title: "agenda", sans-serif;

    --font-weight-bold:     bold;
    --font-weight-normal:   normal;
    --font-weight-boldish:  500;
    --font-weight-light:    300;
    --font-weight-thin:     100;

    --h1-font-size:         51px;
    --h2-font-size:         43px;
    --h3-font-size:         31px;
    --h4-font-size:         25px;
    --h5-font-size:         25px;
    --h6-font-size:         23px;
    --p-font-size:          21px;
    --small-txt:            17px;
    --smallest-txt:         14px;

    --less-line-height:     1.2em;

    --border-radius-img:    10px;
    --border-radius-btn:    90px;

    --shadow-reg:           0 6px 18px rgba(0,0,0,0.18);
    --shadow-bottom:        0 6px 10px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.14);
    --shadow-bottom-small:  0 5px 9px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);
  }


  /*---------------------------------------
     TYPOGRAPHY              
  -----------------------------------------*/

  body {
    background: var(--white-color);
    font-family: var(--font-body)
  }

  .blue-txt {
    color: var(--primary-color);
  }

  .white-txt {
    color: var(--white-color);
  }

  .brown-txt {
    color: var(--fifth-color);
    text-transform: uppercase;
    font-weight: bold;
  }

  h1,h2,h3,h4,h5,h6 {
    font-weight: var(--font-weight-thin);
    font-family: var(--font-heading);
    line-height: var(--less-line-height);
  }

  h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin: 20px 0;
  }

  h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
  }

  h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-boldish);
    margin: 0;
  }

  h4 {
    font-size: var(--h4-font-size);
  }

  h5 {
    font-size: var(--h5-font-size);
    font-weight: bold;
    margin-bottom: 0.75rem;
  }

  h6 {
    color: var(--p-color);
    font-size: var(--h6-font-size);
    line-height: inherit;
    margin: 0;
  }

  p {
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-normal);
    line-height: 1.5em;
  }

  b, 
  strong {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
  }

  .section {
    padding: 3.5rem 0;
  }

  ul li {
    font-size: var(--p-font-size);
  }


  /*---------------------------------------
     BUTTONS               
  -----------------------------------------*/

  /* default button style */
  .custom-btn {
    background: var(--primary-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--white-color);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
  }
  /* hover state */
  .custom-btn:hover {
    color: var(--white-color);
    opacity: 0.85;
  }
  .custom-btn:focus {
    box-shadow: none;
  }

  /* brown button white text */
  .custom-btn-brown {
    background: var(--fourth-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--white-color);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 3px solid var(--fourth-color);
  }
  /* hover state */
  .custom-btn-brown:hover {
    color: var(--fourth-color);
    background: var(--white-color);
  }

  /* green button white text */
  .custom-btn-green {
    background: var(--secondary-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--white-color);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 3px solid var(--secondary-color);
  }
  /* hover state */
  .custom-btn-green:hover {
    color: var(--secondary-color);
    background: var(--white-color);
  }

  /* disabled button grey colour */
  .custom-btn-disabled {
    background: gray;
    color: lightgray;
    border: 2px solid gray;
    pointer-events: none; /* disables clicks */
    cursor: not-allowed;
    opacity: 0.9;
  }

  /* two buttons beside eachother */
  .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 1rem;
    flex-wrap: wrap; 
  }
  /* stretch and stack on mobile */
  @media (max-width: 575.98px) {
    .btn-row {
      flex-direction: column;
      align-items: stretch;
    }
  }


  /*---------------------------------------
     GENERAL SPACING               
  -----------------------------------------*/

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }


  /*---------------------------------------
     CONSISTENT SITE-WIDE ELEMENTS   
  -----------------------------------------*/

  /* link style */
  a {
    color: var(--primary-color);
    font-weight: normal;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  /* link hover state */
  a:hover, 
  a:active, 
  a:focus {
    color: var(--primary-color);
    outline: none;
    text-decoration: underline;
  }

  /* consistent images, corners rounded slightly */
  .rounded-img {
    border-radius: var(--border-radius-img)
  } 

  /* slight dropshadow on image */
  .shadow-img {
    box-shadow: var(--shadow-reg);
  } 

  /* small icon spacing (used with brown titles) */
  .icon-title {
    display: flex;
    align-items: center;
    gap: 0.3rem; 
    margin-bottom: 0.75rem;
  }
  /* small bootstrap icon style */
  .small-icon {
    font-size: 1.6rem;
    color: var(--fifth-color); 
    opacity: 0.9;
  }

  /* horizontal line style */
  hr {
    border: none;
    border-top: 2px solid var(--primary-color);
    opacity: 0.35;
  }

  /* section divider line with icon in center */
  .section-divider-wide {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
  }
  .section-divider-wide span {
    flex: 1;
    border-top: 2px solid var(--primary-color);
    opacity: 0.35;
  }
  /* icon style */
  .divider-icon {
    font-size: 2.8rem;   
    color: var(--primary-color);
    opacity: 0.9;
  }

  /* larger space between columns */
  .column-space {
    --bs-gutter-x: 8rem;
  }

  /* light green background section */
  .bg-section {
    background:#a3b18a4e;
    position: relative;
    box-shadow: var(--shadow-bottom-small);
  }

 
  /*---------------------------------------
    INDEX PAGE         
  -----------------------------------------*/

  /* image matches left column height on desktop */
  .home-img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-img);
    background-image: url("/img/index-pg/home-algae.jpeg");
    background-size: cover;
    background-position: center;
    
  }
  /* when stacked (mobile/tablet) make reasonable image height */
  @media (max-width: 767.98px) {
    .home-img{
      height: 240px; 
    }
  }

  /* reverse text/image sections (put image on right, text on left) */
  @media (min-width: 768px) {
    .section-reverse .split-row {
      flex-direction: row-reverse;
    }
  }
  /* desktop ratio */
  @media (min-width: 992px) {
    .split-row .split-media{
      flex: 0 0 38%;
      max-width: 38%;
    }
    .split-row .split-text{
      flex: 0 0 52%;
      max-width: 52%;
    }
  }


  /*---------------------------------------
     NAV BAR             
  -----------------------------------------*/

  /* navbar logo size */
  .navbar-logo {
    height: 42px;    
    width: auto;
    max-width: 100%;
  }
  /* slightly smaller on mobile */
  @media (max-width: 991.98px) {
    .navbar-logo {
      height: 36px;
    }
  }

  /* navbar style */
  .navbar {
    background: var(--primary-color);
    padding: 0.75rem 1rem;
    position: fixed;           
    left: 0;
    right: 0;
    top: 0;
    z-index: 1030;             
    overflow: visible;      
    box-shadow: var(--shadow-bottom); 
  }

  /* spacing of nav links */
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  /* navbar logo container */
  .navbar-brand {
    color: var(--white-color);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    padding: 0;
    display: flex;
    align-items: center;
  }

  /* clickable area for each nav link */
  .nav-item .nav-link {
    display: block;
    color: var(--white-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-normal);
    padding: 2px 6px;
  }

  /* nav link hover state */
  .nav-item .nav-link.active,
  .nav-item .nav-link:hover {
    text-decoration: underline;
  }

  /* three line toggle button (on smaller screens) */
  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0 10px 0 0;
    width: 30px;
    height: 35px;
    outline: none;
  }
  /* prevent outline */
  .navbar-toggler:focus {
    outline: none;
  }
  /* hide middle bar when open */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }
  /* animate top and bottom bars inward */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }
  /* rotate into 'x' */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
  }
  /* rotate into 'x' */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
  }
  /* middle line */
  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }
  /* top and bottom lines */
  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 30px;
    height: 2px;
    content: '';
  }
  /* vertical spacing of bars */
  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }
  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
  }
  /* remove mobile tap outline/focus ring on three lines */
  .navbar-toggler,
  .navbar-toggler:focus,
  .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
  }
  /* remove iOS/mobile tap highlight */
  .navbar-toggler {
    -webkit-tap-highlight-color: transparent;
  }

  /* nav text */
  .navbar .nav-link {
    font-size: 1.15rem;  
    padding: 0.85rem 1rem;
  }

  /* dropdown menu */
  .navbar .dropdown-menu {
    background: var(--primary-color);
    border: none; 
    border-radius: 0;   
    margin-top: 0;
    padding: 0.15rem 0;
    box-shadow: none;   
    text-align: left;
  }

  /* dropdown items */
  .navbar .dropdown-item {
    color: var(--white-color);
    background: transparent;
    text-decoration: none;
  }
  /* dropdown item hover state */
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    color: var(--white-color);
    background: transparent;  
    text-decoration: underline;
  }

  /* remove blue focus ring */
  .navbar .dropdown-item:focus,
  .navbar .dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
  }

  /* desktop dropdown opens only on hover (not click) */
  @media (min-width: 992px) {
    .navbar .dropdown-menu {
      display: none; /* closed by default */
    }
    .navbar .dropdown.is-hover > .dropdown-menu {
      display: block;
    }
  }

  /* center items on mobile */
  @media (max-width: 991.98px) {
    .navbar .dropdown-menu {
      position: static;
      float: none;
      width: 100%;
      text-align: center; 
    }
    .navbar .dropdown-item {
      text-align: center; 
    }
  }

  /* hide/show navbar on scroll */
  .navbar {
    transition: transform 0.35s ease;
  }
  /* hidden state */
  .navbar.nav-hidden {
    transform: translateY(-100%);
  }


  /*---------------------------------------
     HOME HEADER            
  -----------------------------------------*/

  /* background video */
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* gradient overlay */
  .bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(11, 53, 77, 0.02) 0%,
      rgba(11, 53, 77, 0.45) 45%,
      rgba(11, 53, 77, 0.85) 100%
    );
  }

  /* content layer */
  .hero .container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
  }

  /* text wrapper */
  .hero-text {
    position: relative;
    width: 100%;
    min-height: 100vh;
  }

  /* top right subtitle */
  .hero-top-right {
    position: absolute;
    top: 6.5rem; /* extra top space (navbar clearance) */
    right: 2rem; 
    text-align: right;
  }

  /* bottom left title/subtitle */
  .hero-bottom-left {
    position: absolute;
    left: 0;
    bottom: 3.5rem; /* extra bottom space */
    text-align: left;
  }

  /* main title */
  .hero-text h1 {
    font-family: var(--font-title);
    font-size: clamp(3.6rem, 10vw, 9.5rem);
    font-weight: 600;
    font-style: normal;
    line-height: 0.95;
    letter-spacing: -0.035em;
    white-space: normal;
    margin: 0 0 0.6rem 0;
    text-shadow:
      0 4px 20px rgba(0, 0, 0, 0.45),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* subtitle */
  .hero-text h4 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    font-weight: 500;
    margin: 0.8rem 0 0 0;
    text-shadow:
      0 3px 12px rgba(0, 0, 0, 0.4);
  }

  /* keep "AI For Water Quality" on one line */
  .hero-subtitle {
    white-space: nowrap;
  }

  /* mobile responsiveness */
  @media (max-width: 768px) {
    .hero-top-right {
      top: 6rem; /* space so not hidden under navbar */
    }
    .hero-bottom-left {
      bottom: 2.75rem;
      left: 1rem;
    }
    .hero-subtitle {
      font-size: clamp(1.2rem, 4.2vw, 1.8rem);
      white-space: nowrap;
    }
  }

  /* slight drop shadow on bottom */
  .hero {
    position: relative;
    overflow: visible;
  }
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    box-shadow: var(--shadow-bottom);
    pointer-events: none;
  }

  /* title/subtitle block */
  .hero-title-block{
    display: flex;
    align-items: center; /* vertical centering w/ title + subtitle */
    gap: 1.4rem;
  }

  /* logo size */
  .hero-block-logo{
    height: clamp(80px, 10vw, 175px); 
    width: auto;
    flex-shrink: 0;
    display: block;
  }

  /* small text line spacing */
  .hero-block-text h1{ margin: 0 0 0.6rem 0; }
  .hero-block-text .hero-subtitle{ margin: 0; }

  /* smaller screen logo/title/subtitle stacking */
  @media (max-width: 768px) {
    .hero-title-block{
      flex-direction: column; /* stack logo above text */
      align-items: flex-start; /* keep left-aligned */
      gap: 0.75rem;
    }
    .hero-block-logo{
      height: 64px; /* slightly smaller for mobile */
    }
  }


  /*---------------------------------------
     LANDING HEADERS            
  -----------------------------------------*/

  /* header style */
  .landing-header {
    position: relative;
    overflow: hidden;
    min-height: clamp(600px, 78vh, 880px); /* height */
    padding-top: clamp(96px, 11vh, 140px); /* room for navbar */
    padding-bottom: 46px;
    display: flex;
    align-items: center;
  }

  /* trend background image */
  .landing-header-trend-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/img/trend/trend-header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* wqpredict background image */
  .landing-header-wqpredict-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/img/wqpredict/wqpredict-header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* land2water background image */
  .landing-header-land2water-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/img/land2water/land2water-header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* header overlay gradient */
  .landing-header-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(34, 132, 142, 0.32) 0%,  
      rgba(28, 112, 120, 0.58) 45%,  
      rgba(12, 42, 46, 0.90) 100%   
    );
  }

  .landing-header-container{
    position: relative;
    z-index: 2;
  }

  .landing-header-row{
    width: 100%;
  }

  /* center the title/subtitle block */
  .landing-header-text-col{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* title */
  .landing-header-title{
    font-family: var(--font-title);
    font-size: clamp(2.65rem, 6.4vw, 6.1rem); 
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0 0 0.85rem 0;
    text-shadow:
      0 6px 20px rgba(0, 0, 0, 0.50),
      0 2px 4px rgba(0, 0, 0, 0.38);
  }

  /* subtitle */
  .landing-header-subtitle{
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.25vw, 1.8rem); 
    font-weight: 500;
    line-height: 1.35;
    text-shadow:
      0 4px 14px rgba(0, 0, 0, 0.42),
      0 1px 2px rgba(0, 0, 0, 0.30);
  }

  /* buttons column */
  .landing-header-actions-col{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* remove side padding from spacer so centering stays clean */
  .landing-header-spacer{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* keep buttons compact */
  .landing-header-actions{
    width: 100%;
    max-width: 210px;
  }

  /* button style */
  .landing-header-btn{
    font-size: 1.12rem;    
    padding: 20px 16px;
    line-height: 1.1;
    justify-content: center;
    gap: 0.65rem;
    text-shadow: /* text depth */
      0 2px 6px rgba(0, 0, 0, 0.35); 
    box-shadow: var(--shadow-reg);
  }

  /* text inside stays left-aligned while group is centered */
  .landing-header-btn-text{
    text-align: left;
    line-height: 1.15;
  }

  /* icon style */
  .landing-header-btn i{
    font-size: 1.45em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  /* desktop layout */
  @media (min-width: 992px){
    .landing-header-actions{
      max-width: 230px;
    }
    .landing-header-btn{
      font-size: 1.22rem;
      padding: 24px 16px;
    }
    .landing-header-btn i{
      font-size: 1.55em;
    }
  }

  /* small screen layout */
  @media (max-width: 991.98px){
    .landing-header{
      min-height: clamp(640px, 82vh, 920px);
    }
    .landing-header-actions-col{
      margin-top: 0.75rem;
    }
    .landing-header-actions{
      max-width: 320px;
    }
    .landing-header-btn{
      font-size: 1.12rem;
      padding: 20px 16px;
    }
  }

  /* slight drop shadow on bottom */
  .landing-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:18px;
    box-shadow: var(--shadow-bottom);
    pointer-events:none;
    z-index: 3;
  }


  /*---------------------------------------
     DEFAULT THUMBNAIL (IMAGE ON TOP OF TEXT)              
  -----------------------------------------*/

  /* white card box */
  .thumbnail-card {
    background: #fff;
    border-radius: var(--border-radius-img);
    box-shadow: var(--shadow-reg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

    /* image frame */
    .thumbnail-img-wrap {
      height: 160px;        
      padding: 1.25rem 1rem 0.25rem; 
      display: flex;
      align-items: flex-start;      
      justify-content: center;
      background: #fff;
      border-top-left-radius: var(--border-radius-img);
      border-top-right-radius: var(--border-radius-img);
      overflow: hidden;
    }

  /* image sizing */
  .thumbnail-img-wrap img {
    max-width: 90%;   
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* text / button area */
  .thumbnail-body {
    padding: 0.9rem 1.25rem 1.5rem;
    flex: 1;
  }


  /*---------------------------------------
     BOTTOM THUMBNAIL (IMAGE BELOW TEXT)              
  -----------------------------------------*/
    
  /* thumbnail image under text */
  .thumbnail-body-bottom {
    height: 100%;
  }

  /* bottom image wrapper */
  .thumbnail-img-wrap-bottom {
    width: 100%;
    height: auto; /* image defines height on all screens */
    padding: 0;
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    border-bottom-left-radius: var(--border-radius-img);
    border-bottom-right-radius: var(--border-radius-img);
  }

  /* image fills frame */
  .thumbnail-img-wrap-bottom img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain; /* no cropping on desktop or mobile */
    display: block;
  }

  /* smaller screens thumbnail image under text */
  @media (max-width: 991.98px){
    .thumbnail-img-wrap-bottom img{
      max-height: 220px; /* safety cap */
      border-radius: var(--border-radius-img); /* slightly rounded corners */
    }
  }


  /*---------------------------------------
     SIDE THUMBNAIL (IMAGE TO LEFT OF TEXT)              
  -----------------------------------------*/

  /* side by side thumbnails */
  .thumbnail-card-side{
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1; /* fills remaining height inside the white card */
  }

  /* image on the left, text on the right */
  .thumbnail-side-inner{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    width: 100%;
    height: 100%; /* allow vertical centering */
  }

  /* fixed-width image column */
  .thumbnail-img-wrap-side{
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* image frame */
  .thumbnail-img-frame-side{
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  /* image styling */
  .thumbnail-img-frame-side img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-img);
  }

  /* text container */
  .thumbnail-body-side{
    padding: 0;
  }

  /* fix default margins so content looks centered */
  .thumbnail-body-side h3{
    margin-top: 0;
    margin-bottom: 0.4rem;
  }
  .thumbnail-body-side hr{
    margin: 0.4rem 0 0.6rem;
  }
  .thumbnail-body-side p{
    margin-bottom: 0;
  }

  /* tablet + mobile: stack image above text */
  @media (max-width: 991.98px){
    .thumbnail-side-inner{
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .thumbnail-img-wrap-side{
      flex: none;
      width: 190px;
    }
    .thumbnail-img-frame-side{
      width: 190px;
    }
  }


  /*---------------------------------------
     SIDE THUMBNAIL WITH LARGER IMAGES (IMAGE TO LEFT OF TEXT)              
  -----------------------------------------*/

  /* image column wider on desktop */
  .thumbnail-img-wrap-side-full-width{
    flex: 0 0 320px;  
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ensure text fills remaining space neatly */
  .thumbnail-body-side-full-width{
    flex: 1 1 auto;
    padding: 0;
  }

  /* tablet + mobile keep stacking behavior */
  @media (max-width: 991.98px){
    .thumbnail-img-wrap-side-full-width{
      flex: none;
      width: 210px; 
    }
  }


  /*---------------------------------------
     NEWS           
  -----------------------------------------*/

  /* slightly smaller p font size */
  .small-txt {
    font-size: var(--small-txt);
  }

  /* grey coloured font */
  .grey-txt {
    color: grey;
  }

  /* white card */
  .news-thumbnail-card {
    height: 100%;
    background: #fff;
    border-radius: var(--border-radius-img);
    box-shadow: var(--shadow-reg);
  }

  /* image wrapper */
  .news-thumbnail-img-wrap {
    display: block;
    height: 190px;
    overflow: hidden;
    border-top-left-radius: var(--border-radius-img);
    border-top-right-radius: var(--border-radius-img);
  }

  /* image fill */
  .news-thumbnail-img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.35s ease;
  }

  /* zoom image when hovering */
  .news-thumbnail-img-wrap:hover img {
    transform: scale(1.07);
  }

  /* news body */
  .news-thumbnail-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
  }

  /* title links */
  .news-thumbnail-body h5 a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
  }
  /* hover state */
  .news-thumbnail-body h5 a:hover {
    text-decoration: underline;
  }

  
  /*---------------------------------------
     WEBINAR PAGE              
  -----------------------------------------*/

  /* split row with small image column and larger text */
  @media (min-width: 768px) {
    .split-row-small.section-reverse .split-row {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-start;
    }
  }

  /* lg+: same column sizes, MORE space between */
  @media (min-width: 992px) {
    .split-row-small .split-row .split-media {
      flex: 0 0 26%;
      max-width: 26%;
      padding-left: 4rem;     /* space on image side */
    }

    .split-row-small .split-row .split-text {
      flex: 0 0 74%;
      max-width: 74%;
      padding-right: 2.5rem; /* space on text side */
    }

    .split-row-small .split-row .split-media img {
      width: 100%;
      height: auto;
      max-width: 350px;
      display: block;
      margin-left: auto;
    }
  }

  /* recording layout video */
  .recording-layout .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-reg);
  }
  .recording-layout .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--border-radius-img);
  }

  /* link style */
  .split-text li a {
    color: inherit;
    text-decoration: underline;
  }
  /* hover state */
  .split-text li a:hover {
    color: var(--primary-color);
  }


  /*---------------------------------------
     CONTACT              
  -----------------------------------------*/

  /* email link style */
  .contact-link {
    display: inline-flex;
    align-items: center;
    color: inherit;            
    text-decoration: none;
    transition: color 0.2s ease;
    gap: 0.5rem;
  }
  .contact-link i {
    transition: color 0.2s ease;
  }
  /* hover state */
  .contact-link:hover {
    color: var(--primary-color);
  }

  /* contact form */
  .webform input,
  button#submit-button {
    height: calc(2.25rem + 20px);
  }
  .form-control {
    border-radius: var(--border-radius-img);
    margin: 1.3rem 0;
  }
  .form-control:focus {
    box-shadow: none;
    border-color: var(--primary-color);
  }

  /* contact form "send message" button */
  button#submit-button {
    background: var(--secondary-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--white-color);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 3px solid var(--secondary-color);
  }
  /* hover state */
  button#submit-button:hover {
    color: var(--secondary-color);
    background: var(--white-color);
  }

  /* embedded map style */
  .google-map {
    border-top: 1px solid #efebeb;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  /* map frame (slightly rounded corners) */
  .google-map iframe {
    width: 100%;
    border-radius: var(--border-radius-img);
  }


  /*---------------------------------------
     FOOTER              
  -----------------------------------------*/

  /* footer style */
  .site-footer {
    border-top: 1px solid #efebeb;
    padding: 3rem 0;
    margin-top: 8rem;
  }

  /* email link style */
  .site-footer a {
    color: var(--p-color);
    font-weight: var(--font-weight-light);
  }

  /* text size */
  .site-footer p {
    font-size: var(--smallest-txt)
  }

  /* space between text on each side */
  .site-footer .row {
    justify-content: space-between;
  }

  /* nserc image style */
  .nserc-wrap{
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  /* nserc image size */
  .nserc-logo{
    height: 44px;
    width: auto;
  }

  /* space under email when stacked (smaller screens) */
  @media (max-width: 991.98px){
    .copyright-text{
      margin-bottom: 1.25rem !important;
    }
  }

  /* stack text + logo, center only the logo (smaller screens) */
  @media (max-width: 575.98px){
    .nserc-wrap{
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .nserc-logo{
      align-self: center;
    }
  }


  /*---------------------------------------
     RESPONSIVE MOBILE STYLES              
  -----------------------------------------*/

  @media screen and (max-width: 992px) {
    .section {
      padding: 5rem 0;
    }

    .section-tight-top {
      padding-top: 2.5rem; 
    }

    .nav-item .nav-link {
      padding: 6px;
    }

    .navbar-collapse,
    .site-footer {
      text-align: center;
    }
  }

  @media screen and (max-width: 767px) {
    h1 {
      font-size: 38px;
    }
  }


  /*---------------------------------------
     WORKFLOW (ARROWS BETWEEN STEPS)      
  -----------------------------------------*/

  /* step card */
  .method-step {
    background: #fff;
    border-radius: var(--border-radius-img);
    box-shadow: var(--shadow-reg);
    padding: 1.5rem 1.25rem 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* image */
  .method-step img {
    display: block;
    margin: 0 auto 1rem; /* center horizontally */
    width: 100%;
    max-width: 170px;
    height: auto;
    border-radius: var(--border-radius-img); /* rounded corners */
  }

  /* title */
  .method-step h4 {
    margin: 0 0 0.35rem 0;
    width: 100%;
  }

  /* blurb */
  .method-step p {
    margin: 0;
    width: 100%;
    text-align: left;
  }

  /* large screen */
  @media (min-width: 992px) {
    /* step | arrow | step | arrow | step */
    .method-flow{
      display: grid;
      grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);
      column-gap: 2.25rem; /* space around arrows */
      row-gap: 3rem; /* space between rows */
      align-items: start;
      justify-items: center;
    }

    /* keep cards from stretching too wide */
    .method-step {
      width: 100%;
      max-width: 360px;
    }

    /* arrows sit between grid columns */
    .flow-arrow {
      display: flex;
      align-items: center; /* vertical centering */
      justify-content: center; /* horizontal centering */
      height: 100%;
      align-self: stretch; /* match card height */
      font-size: 4.2rem; /* arrow size */
      font-weight: 1000; /* arrow stroke weight */
      line-height: 1;
      color: var(--primary-color);
      margin: 0;
    }

    /* hide the arrow at the end of each 3-step row */
    .method-flow > .flow-arrow:nth-child(6n) {
      display: none;
    }

    /* also hidefinal trailing arrow */
    .method-flow > .flow-arrow:last-child{
      display: none;
    }
  }

  /* smaller screens */
  @media (max-width: 991.98px) {
    .method-flow{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }

    .method-step {
      width: 100%;
      max-width: 520px;
    }

    /* image inside workflow card */
    .method-step img {
      display: block;
      margin: 0 auto 1rem; /* center horizontally */
      width: 100%;
      max-width: 170px;
      height: auto;
      border-radius: var(--border-radius-img); /* rounded corners */
    }

    /* down arrows between cards */
    .flow-arrow {
      margin: 0.25rem 0;
      font-size: 0; /* hide original arrows */
      line-height: 0;
    }

    .flow-arrow::after {
      content: "↓";
      font-size: 2rem;
      line-height: 1;
      color: var(--primary-color);
    }
  }


















  
  /*---------------------------------------
      TREND data page (for more, see new-leaflet-design.css)     
    -----------------------------------------*/

  /* style dataset and methods buttons on top of map */
  .top-buttons {
    display:flex;
    gap:.5rem;
    margin:.75rem 0 1rem 0;
    flex-wrap:wrap;
    align-items:center;
  }

  /* "methods" button right aligned */
  #btn-methods {
    margin-left: auto;
  }

  /* TREND page buttons general style */
  .mdp-btn {              
    --mdp-pad-y: 12px;
    --mdp-pad-x: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--body-font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--copyright-text-font-size);
    line-height: 1;

    padding: var(--mdp-pad-y) var(--mdp-pad-x);
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  /* TREND datasets button default (green, white text) */
  .mdp-btn--primary {
    background: var(--white-color);
    color: var(--secondary-color);
    border-color: var(--secondary-color);
  }
  /* TREND datasets methods button hover (white, green text) */
  .mdp-btn--primary:hover {
    background: var(--secondary-color);
    border-color: var(--white-color);
    color: var(--white-color);
  }

  /* methods button default (green, white text) */
  .mdp-btn--ghost {
    background: var(--white-color);
    color: var(--secondary-color);
    border-color: var(--secondary-color);
  }
  /* methods button hover (white, green text) */
  .mdp-btn--ghost:hover {
    background: var(--secondary-color);
    border-color: var(--white-color);
    color: var(--white-color);
  }

  /* selected button is green */
  .mdp-btn[aria-pressed="true"],
  .mdp-btn.is-pressed {
    background: var(--secondary-color);
    border-color: var(--white-color);
    color: var(--white-color);
  }

  /* buttons stack with full width on mobile */
  @media (max-width: 680px) {
    .mdp-btn--mobile-block { width: 100%; }
  }

  /* slightly rounded button corners */
  .mdp-btn.mdp-btn--cornered {
    border-radius: 10px;
  }

  /* map frame */
  .frame-shell{
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 640px;
    background: #f7f7f7;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
  }
  .dataset-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
  }
  .hidden{ display: none !important; }

  /* responsive map size phone */
  @media (max-width: 576px){
    .frame-shell{ height: 82vh; min-height: 520px; }
  }

  /* map section side padding */
  .container-map {
    padding: 0.5% 2% 2%;
  }














  /*---------------------------------------
    wqpredict styles (for more, see new-leaflet-design.css)              
  -----------------------------------------*/
  /* dropdown style WQPredict page */
  .dropdown-select {
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
  }

  /* dropdown panel header */
  #nutrient-panel .panel-header {
    background: var(--dark-color);
    color: var(--white-color);
    min-height: 20px;
    padding: 4px 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;              
    border-bottom: 0 !important;     
    box-shadow: none !important;
    cursor: move;
    user-select: none;
  }


  /* close buttons */
  #nutrient-panel .panel-header .panel-close {
    color: var(--white-color) !important;
    opacity: 1 !important;
    filter: none !important;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
  }

  #nutrient-panel .panel-header .btn-close {
    opacity: 1 !important;
    filter: invert(1) brightness(200%) !important; /* make X white */
    box-shadow: none !important;
  }

  /* tabs row */
  .nutrient-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 10px 10px 18px;
    margin-top: -1px !important;      
    border-top: 0 !important;
    box-shadow: none !important;
    background: var(--dark-color);
  }

  /* individual tab buttons */
  .nutrient-tabs .nutrient-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--white-color);
    padding: .45rem .95rem;         
    border-radius: 8px;
    font: 600 13px/1 'DM Sans', sans-serif; 
    cursor: pointer;
    text-decoration: none;
    outline: none;
    transition:
      background-color .15s ease,
      color .15s ease,
      border-color .15s ease;
  }

  .nutrient-tabs .nutrient-tab:hover:not(:disabled) {
    background: var(--primary-color);
    color: var(--white-color);
  }

  /* panel body + tab content */
  #nutrient-panel .panel-body {
    height: calc(100% - 40px); /* header height */
    padding: 8px 14px 16px;
    overflow: auto;
  }

  #nutrient-panel .tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    width: 365px;
    color: var(--p-color);
  }

  #nutrient-panel .tabcontent.active {
    display: block;
  }

  /* scroll container */
  #scroll-container {
    overflow-y: scroll !important;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    max-height: 600px;
    padding: 15px;
    border: 1px solid var(--white-color);
    background: var(--white-color);
    color: var(--p-color);
  }

  /* accordion (green band) */
  #nutrient-panel .accordion .accordion-button.orange {
    background-color: var(--third-color) !important;
    color: var(--ink-color) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .6rem .9rem;
    min-height: 35px;
    display: flex;
    align-items: center;
    border-radius: 10px !important;
    transition: background-color .15s ease, color .15s ease;
  }

  #nutrient-panel .accordion .accordion-button.orange:not(.collapsed) {
    background-color: var(--third-color) !important;
    color: var(--ink-color) !important;
    border-radius: 10px !important;
  }

  /* chevron style (arrow on accordion) */
  #nutrient-panel .accordion .accordion-button.orange::after {
    --bs-accordion-btn-icon: none;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    align-self: center;
    background-size: 1rem 1rem;
    transform-origin: 50% 50%;
    transition: transform .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  #nutrient-panel .accordion .accordion-button.orange:not(.collapsed)::after {
    transform: rotate(180deg);
  }
    








  
  /*---------------------------------------
    Land2Water      
  -----------------------------------------*/

/* === Leaflet control wrapper === */
.l2w-map-control {
  margin: 8px; /* little gap from map edges */
}

/* Card behind Solute + Years */
.l2w-map-control .l2w-control-inner {
  background: #ffffff;
  border-radius: 12px;                 /* rounded corners */
  padding: 10px 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  width: 220px;                        /* desktop size */
  max-width: 80vw;                     /* shrinks on smaller screens */
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* Subtitle labels: “Solute”, “Years” (above the text) */
.l2w-map-control .l2w-control-label {
  display: block;
  margin: 2px 2px 4px 2px;
  font-size: 17px;
  font-weight: 600;                 
  letter-spacing: 0.03em;
  text-transform: none;               
  color: #16324f;
}

/* Solute dropdown */
.l2w-map-control .l2w-control-select {
  width: 100%;
  font-family: inherit;                /* same font as titles */
  font-size: 14px;
  font-weight: 500;
  padding: 6px 32px 6px 10px;
  border-radius: 8px;
  border: 1px solid #dfe7f2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  outline: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Year text (“1980–2021”) */
.l2w-map-control .l2w-year-static {
  margin: 0 2px 2px 2px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

/* Ensure dropdown/options use DM Sans too */
.l2w-map-control select,
.l2w-map-control option {
  font-family: inherit !important;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
  .l2w-map-control .l2w-control-inner {
    padding: 8px 10px;
    width: auto;
    max-width: 70vw;
  }

  .l2w-map-control .l2w-control-label {
    font-size: 11px;
  }

  .l2w-map-control .l2w-control-select,
  .l2w-map-control .l2w-year-static {
    font-size: 16px;                   /* keeps iOS from zooming */
  }
}

/* Force Solute + Year text to use the same font as titles */
.l2w-map-control,
.l2w-map-control select,
.l2w-map-control option,
.l2w-map-control .l2w-year-static {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif !important;
}

@media (min-width: 769px) {
  .l2w-map-control .l2w-control-select.dropdown-select {
    width: 100%;      /* whatever you like */
    min-width: 100%;  /* override the 240px min-width */
    max-width: 100%;  /* optional, keeps it fixed */
  }
}

/* Some browsers will honor this, some won’t */
#l2w-solute-select option:disabled {
  color: #b8b8b8;
  background: #818181;
}




#map { position: relative; z-index: 0; }
.leaflet-container { width: 100%; height: 100%; }
.leaflet-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-shadow-pane,
.leaflet-tile-pane { z-index: auto; }