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

  /* MAIN SITE-WIDE STYLESHEET */

  @font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
        url('../fonts/glacialindifference-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
        url('../fonts/glacialindifference-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
        url('../fonts/glacialindifference-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/glacialindifference-bolditalic-webfont.woff2') format('woff2'),
        url('../fonts/glacialindifference-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }


  :root {
    --light-color:          #e2f1f5;
    --white-color:          #ffffff;
    --primary-color:        #1f86ab;
    --bright-color:         #f5b700;

    --gray-color:           #909090;
    --link-color:           #404040;
    --p-color:              #000000;

    --font-heading: 'Glacial Indifference', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --font-title: 'League Spartan', sans-serif;

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

    --h1-font-size:         48px;
    --h2-font-size:         36px;
    --h3-font-size:         28px;
    --h4-font-size:         24px;
    --h5-font-size:         22px;
    --h6-font-size:         22px;
    --p-font-size:          18px;
    --base-font-size:       16px;
    --menu-font-size:       14px;

    --border-radius-img:  20px;
    --border-radius-btn:  90px;
  }

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



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

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

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

  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-bold);
    margin: 0;
  }

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

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

  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: 6rem 0;
  }



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

  .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;
  }

  .custom-btn-border {
    background: var(--white-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--primary-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);
  }

  .custom-btn-border:hover {
    color: var(--white-color);
    background: var(--primary-color);
  }

  /* yellow button black text */
  .custom-btn-yellow {
    background: var(--bright-color);
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: var(--p-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(--bright-color);
  }
  .custom-btn-yellow:hover {
    opacity: 0.75;
    color: var(--p-color);
  }

  /* disabled button (grey) */
  .custom-btn-disabled {
    background: gray;
    border-radius: var(--border-radius-btn);
    padding: 14px 24px;
    color: lightgray;
    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 gray;
    pointer-events: none; /* disables clicks */
    cursor: not-allowed;
    opacity: 0.6;
  }

 

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

  * {
    -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;
  }

  a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  a:hover, 
  a:active, 
  a:focus {
    color: var(--primary-color);
    outline: none;
    text-decoration: none;
  }



  /*---------------------------------------
    LIGHT BLUE BACKGROUND SECTIONS          
  -----------------------------------------*/

  .blue-section {
    background: var(--light-color);
    padding: 5rem 0;
  }



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

  /* navbar logo */
  .navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
  }

  .navbar-logo {
    height: 42px;    
    width: auto;
    max-width: 100%;
  }

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

  .navbar {
    background: var(--primary-color);
    padding: 1rem;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .navbar-brand {
    color: var(--white-color);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    padding-top: 0;
  }

  .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-item .nav-link.active,
  .nav-item .nav-link:hover {
    text-decoration: underline;
  }

  .navbar .social-icon li a {
    color: var(--white-color);
  }

  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0 10px 0 0;
    width: 30px;
    height: 35px;
    outline: none;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }

  .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;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
  }

  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }

  .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: '';
  }

  .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.25rem 0;
    box-shadow: none;   
    text-align: right;
  }

  .navbar .dropdown-item {
    color: var(--white-color);
    background: transparent;
    text-decoration: none;
  }

  .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; 
    }
  }



  /*---------------------------------------
    HERO (HOME PG HEADER)
  -----------------------------------------*/

  .hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
  }

  /* 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(32, 86, 118, 0.20) 0%,
      rgba(32, 86, 118, 0.55) 45%,
      rgba(32, 86, 118, 0.85) 100%
    );
  }

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

  /* text wrapper(full container width) */
  .hero-text {
    width: 100%;
    text-align: left;
  }

  /* Main title */
  .hero-text h1 {
    font-family: var(--font-title);
    font-size: clamp(3.6rem, 10vw, 9.5rem); /* fills container */
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.035em;

    white-space: normal; /* allow wrap instead of overflow */
    margin-bottom: 0.6rem;

    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: 400;
    margin-top: 0.8rem;

    text-shadow:
      0 3px 12px rgba(0, 0, 0, 0.4);
  }


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

  .header {
    background-color: var(--primary-color);
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow-x: hidden;
  }

  /* image column */
  .header-img-col {
    padding-left: 15px;  
    padding-right: 0;
    display: flex;
    align-items: center;
  }

  /* image */
  .header-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
  }

  /* text column */
  .header-text-col {
    padding-left: 15rem; /* gap between image & text */
    padding-right: 15px;  
  }

  .header-text {
    margin-top: 2rem;
    text-align: left;
  }

  .header-text h1 {
    font-family: var(--font-title);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 800;
    line-height: 0.95;
    margin: 0;
  }

  /* mobile */
  @media (max-width: 991.98px) {
    .header {
      min-height: auto;
      padding: 5rem 0 4rem;
    }

    .header-img-col {
      justify-content: center;
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: 2rem;
    }

    .header-image {
      max-width: 220px;
    }

    .header-text-col {
      padding-left: 15px;
      padding-right: 15px;
    }

    .header-text {
      text-align: center;
      margin-top: 0;
    }
  }



  /*---------------------------------------
     THUMBNAIL IMAGES              
  -----------------------------------------*/

  .thumbnail {
    background: var(--white-color);
    box-shadow: 6px 0 38px rgba(20,20,20,0.10);
    border-radius: 0 0 2px 2px;
    padding: 1rem 2rem;
    position: relative;
  }

  .thumbnail img {
    border-radius: 2px 2px 0 0;
  }

  /* white card box */
  .thumbnail-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* image area */
  .thumbnail-img-wrap {
    height: 120px;
    padding: 0.75rem 1rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
  }

  .thumbnail-img-wrap img {
    max-width: 70%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 10px;
  }

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



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

  .google-map {
    border-top: none !important;
    margin-top: 0;
    padding-top: 0;
  }

  .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 affects both icon + text */
  .contact-link:hover {
    color: var(--primary-color);
  }



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

  .site-footer {
    border-top: 1px solid #efebeb;
    padding: 3rem 0;
  }

  .site-footer a {
    color: var(--p-color);
    font-weight: var(--font-weight-light);
  }

  .site-footer p {
    font-size: var(--base-font-size);
  }

  .contact .fa,
  .site-footer .fa {
    color: var(--primary-color);
  }


  .site-footer .row {
    justify-content: space-between;
  }


  /*---------------------------------------
     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)      
  -----------------------------------------*/

  /* flow wrapper */
  .method-flow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
  }

  /* each step */
  .method-step {
    flex: 1;
    text-align: left;
    max-width: 180px;
  }

  /* image */
  .method-step img {
    width: 100%;
    max-width: 140px;
    height: auto;
    margin-bottom: 1rem;
  }

  /* title */
  .method-step h4 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
  }

  /* blurb */
  .method-step p {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
  }

  /* arrows */
  .flow-arrow {
    font-size: 2rem;
    line-height: 1;
    margin-top: 3.5rem; /* vertically aligns arrow with image centers */
    color: var(--primary-color);
    flex: 0 0 auto;
  }

  /* mobile/tablet: vertical flow with down arrows */
  @media (max-width: 991.98px) {
    .method-flow {
      flex-direction: column;
      align-items: center;
    }

    .method-step {
      max-width: 100%;
      text-align: center; /* center text */
      display: flex;
      flex-direction: column;
      align-items: center; /* center image + text block */
    }

    .method-step img {
      margin-left: auto; /* center image */
      margin-right: auto;
    }

    .flow-arrow {
      margin: 1rem 0;
      font-size: 0; /* hide original arrow */
    }

    .flow-arrow::after {
      content: "↓"; /* down arrow */
      font-size: 2rem;
      color: var(--primary-color);
    }
  }



  /*---------------------------------------
     ICON + TEXT SECTIONS (Ex. food waste pg.) 
  -----------------------------------------*/

  .icon-row {
    gap: 1.25rem;
  }

  .icon {
    width: 64px; /* icon-size */
    height: 64px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .icon-text h4 {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .icon-text p {
    font-size: 1rem;
    font-weight: normal;
  }

  /* responsivness */
  @media (max-width: 991.98px) {
    .icon-row {
      align-items: flex-start;
    }

    .icon {
      width: 56px;
      height: 56px;
    }
  }



  /*---------------------------------------
     SEWAGE METHODOLOGY PG 
  -----------------------------------------*/

  /* light blue container */
  .blue-box {
    background-color: var(--light-color);
    padding: 3rem 2rem;
    border-radius: 12px;
  }

  /* image sizing */
  .blue-box-image {
    width: 100%;
    max-width: 33vw; /* 1/3 of screen on desktop */
    height: auto;
  }

  /* text width control */
  .blue-box-text {
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* tablet & mobile */
  @media (max-width: 991.98px) {
    .blue-box {
      padding: 3rem 1.75rem;
    }
    .blue-box-image {
      max-width: 70%;
    }
  }

  @media (max-width: 575px) {
    .blue-box-image {
      max-width: 85%;
    }
  }

  /* inline paragraph image */
  .side-img-inline {
    width: 100%;
    max-width: 160px;  
    height: auto;
    object-fit: contain;
  }



  /*---------------------------------------
     DATA/MAP PAGE
  -----------------------------------------*/

  .data-section {
    padding: 8rem 0 6rem; /* top | bottom */
  }

  /* intro blurb */
  .data-blurb {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 4rem;
  }

  /* responsivness */
  @media (max-width: 991.98px) {
    .data-section {
      padding: 5rem 0 4rem;
    }

    .data-blurb {
      font-size: 1rem;
      padding: 0 1rem;
    }
  }