:root {
            /* Light Theme Colors */
            --color-light-blue: #90BDD1;
            --color-dark-blue: #3A728A;
            --color-white: hsl(60, 50%, 99%);
            --color-bright-orange: #FF6308;
            --color-dark-gray: #333333;
            --color-light-orange: #FF7D31;
            --color-light-orange-20: rgba(255, 125, 49, 0.2);

            --color-dark-blue-20: rgba(58, 114, 138,0,2);
            --color-medium-gray: #898989;
            --color-pure-white: #FFFFFF;
            --color-black: #000000;
            --color-light-gray: #E3EFF3;
            --color-dark-gray-alt: #616878;
            --color-silver: #ABABAB;
            --color-light-cream: #FFE5D6;
            --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.1);
            --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
            /* Linear Gradients */
            --gradient-blue-0: linear-gradient(0deg, #3A728A 0%, #3A728A 100%);
            --gradient-blue-15: linear-gradient(15deg, #3A728A 0%, #3A728A 100%);
            --gradient-gray-0: linear-gradient(0deg, #333333 0%, #333333 100%);
            --gradient-blue-74: linear-gradient(0deg, #3A728A 0%, #3A728A 74%);
            --gradient-blue-84: linear-gradient(0deg, #3A728A 0%, #3A728A 84%);

    --border-wem: 4px;
    --trans-wem: all 0.33s ease-in-out;
    --Spacing-sm: 10px;
    --Spacing-m: 20px;
  }
  .dark-theme:root  {

    /* Dark Theme Colors */
    --color-light-blue: #4B94B4;
    --color-dark-blue: #1A5C74;
    --color-white: #E0E0E0;
    --color-bright-orange: #FF7E33;
    --color-dark-gray: #666666;
    --color-light-orange: #FF9E5C;
    --color-medium-gray: #A0A0A0;
    --color-pure-white: #FFFFFF;
    --color-black: #000000;
    --color-light-gray: #4C99B2;
    --color-dark-gray-alt: #808080;
    --color-silver: #BFBFBF;
    --color-light-cream: #FFB380;

    /* Linear Gradients */
    --gradient-blue-0: linear-gradient(0deg, #1A5C74 0%, #1A5C74 100%);
    --gradient-blue-15: linear-gradient(15deg, #1A5C74 0%, #1A5C74 100%);
    --gradient-gray-0: linear-gradient(0deg, #666666 0%, #666666 100%);
    --gradient-blue-74: linear-gradient(0deg, #1A5C74 0%, #1A5C74 74%);
    --gradient-blue-84: linear-gradient(0deg, #1A5C74 0%, #1A5C74 84%);

      }

  /* document.documentElement.classList.toggle('dark-theme'); */

  /* =========================
   Text Color Classes
   ========================= */

.background-light-gray-50{
    background-color: rgba(227, 239, 243, 0.5);
}

.text-light-blue {
    color: var(--color-light-blue);
}

.text-dark-blue {
    color: var(--color-dark-blue);
}

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

.text-bright-orange {
    color: var(--color-bright-orange);
}

.text-dark-gray {
    color: var(--dark-gray);
}

.text-light-orange {
    color: var(--color-light-orange);
}

.text-medium-gray {
    color: var(--color-medium-gray);
}

.text-pure-white {
    color: var(--color-pure-white);
}

.text-black {
    color: var(--color-black);
}

.text-light-gray {
    color: var(--color-light-gray);
}

.text-dark-gray-alt {
    color: var(--color-dark-gray-alt);
}

.text-silver {
    color: var(--color-silver);
}

.text-light-cream {
    color: var(--color-light-cream);
}

/* =========================
   Background Color Classes
   ========================= */

.background-light-blue {
    background-color: var(--color-light-blue);
}

.background-dark-blue {
    background-color: var(--color-dark-blue);
}

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

.background-bright-orange {
    background-color: var(--color-bright-orange);
}

.background-dark-gray {
    background-color: var(--color-dark-gray);
}

.background-light-orange {
    background-color: var(--color-light-orange);
}

.background-medium-gray {
    background-color: var(--color-medium-gray);
}

.background-pure-white {
    background-color: var(--color-pure-white);
}

.background-black {
    background-color: var(--color-black);
}

.background-light-gray {
    background-color: var(--color-light-gray);
}

.background-dark-gray-alt {
    background-color: var(--color-dark-gray-alt);
}

.background-silver {
    background-color: var(--color-silver);
}

.background-light-cream {
    background-color: var(--color-light-cream);
}

/* =========================
   Button Color Classes
   ========================= */

.btn-light-blue {
    background-color: var(--color-light-blue);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-light-blue:hover {
    background-color: darken(var(--color-light-blue), 10%);
}

.btn-dark-blue {
    background-color: var(--color-dark-blue);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-dark-blue:hover {
    background-color: darken(var(--color-dark-blue), 10%);
}

.btn-white {
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-white:hover {
    background-color: var(--color-light-gray);
    color: var(--color-black);
}

.btn-bright-orange {
    background-color: var(--color-bright-orange);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-bright-orange:hover {
    background-color: darken(var(--color-bright-orange), 10%);
}
.cursor-grab{
  cursor: pointer !important;
}

.btn-dark-gray {
    background-color: var(--color-dark-gray);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-dark-gray:hover {
    background-color: darken(var(--color-dark-gray), 10%);
}

.btn-light-orange {
    background-color: var(--color-light-orange);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-light-orange:hover {
    background-color: darken(var(--color-light-orange), 10%);
}

.btn-medium-gray {
    background-color: var(--color-medium-gray);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-medium-gray:hover {
    background-color: darken(var(--color-medium-gray), 10%);
}

.btn-pure-white {
    background-color: var(--color-pure-white);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-pure-white:hover {
    background-color: var(--color-light-gray);
    color: var(--color-black);
}

.btn-black {
    background-color: var(--color-black);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-black:hover {
    background-color: darken(var(--color-black), 10%);
}

.btn-light-gray {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray-alt);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-light-gray:hover {
    background-color: darken(var(--color-light-gray), 10%);
    color: var(--color-black);
}

.btn-dark-gray-alt {
    background-color: var(--color-dark-gray-alt);
    color: var(--color-pure-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-dark-gray-alt:hover {
    background-color: darken(var(--color-dark-gray-alt), 10%);
}

.btn-silver {
    background-color: var(--color-silver);
    color: var(--color-dark-gray);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-silver:hover {
    background-color: darken(var(--color-silver), 10%);
}

.btn-light-cream {
    background-color: var(--color-light-cream);
    color: var(--color-dark-gray);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-light-cream:hover {
    background-color: darken(var(--color-light-cream), 10%);
}
.word-break-auto{
    word-break: auto-phrase;
}
/* =========================
   Utility Classes (Optional)
   ========================= */

/* You can add utility classes for padding, margin, etc., as needed */

  .navbar .navbar-nav .nav-item .nav-link, .navbar .navbar-nav .nav-item .nav-link {
    text-transform: uppercase;
    transition: var(--trans-wem);
    font-family: 'Josefin Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    color: var(--color-medium-gray);
    padding: 0 20px;
  }


  .navbar .navbar-nav .nav-item:hover .nav-link{
    color: var(--color-dark-blue);
  }
   .navbar .navbar-nav .nav-item.active .nav-link {
    color: var(--color-dark-blue);
    border-bottom: solid 2px var(--color-bright-orange);
  }

  .btn.btn-primary, .btn-primary{
    background-color: var(--color-bright-orange);
    border-radius: var(--border-wem); 
    transition: var(--trans-wem);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 18px;
    text-transform: uppercase;
    align-self: baseline;
    border: solid 2px transparent;
  }

  .btn-primary:hover{
    background-color: var(--color-light-orange);
}

.btn-nav-mission{
    width: 50px;
    height: 50px;
    background:  var(--color-light-orange);
    text-align: center;
    padding: 16px;
}
.btn.btn-secondary{
    background-color: transparent;
    border-radius: var(--border-wem); 
    transition: var(--trans-wem);
    font-weight: 700;
    border: solid 2px var(--color-bright-orange);
    color: var(--color-bright-orange);
    font-size: 16px;
    padding: 15px 18px;
    align-self: baseline;

  }

  .btn-secondary:hover{
    background-color: var(--color-light-orange-20);}

    
img.partners{
    height: 100px;
    object-fit: contain;
}

.wem-stats .feature-box{
min-height: 180px;
}
.contact-form-style-03 .form-control, .contact-form-style-03 .form-control.is-invalid, .contact-form-style-03 .was-validated .form-control:invalid option {
    color: var(--color-medium-gray);
}

.hover-scale img {
    transition: all 0.33s  ease-in-out;
  }

.hover-scale:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

.background-hover-scale {
    background-size: 100%;
    transition: all 0.33s  ease-in-out;
  }

ul .background-hover-scale:hover {
    background-size: 110%;
  }
.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.object-fit-cover{
    object-fit: cover;
}
/* 1) Let the gradient start at lower opacity, then intensify on hover */
.services-grid .bg-gradient-services-01 {
    opacity: 1; /* start partially transparent */
    transition: opacity 0.4s ease;
  }
  .services-grid .interactive-banner-style-09:hover .bg-gradient-services {
    /* intensify on hover */
  }
  
  /* 2) Hide title and CTA by default; show on hover */
  .services-grid .title-and-cta {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none; /* prevents focus/click events while hidden */
    transition: all 0.4s ease;
  }
  .services-grid .interactive-banner-style-09:hover .title-and-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* becomes clickable on hover */
  }
  .services-grid .bg-gradient-services{
    background: linear-gradient(0deg, rgb(0 0 0 / 14%) 0%, #00000033 104.31%), linear-gradient(180deg, rgb(0 0 0 / 21%) 69.86%, #0000004a 104.38%);
  }
  .drop-svg-shadow{
    -webkit-filter: drop-shadow( 0px 3px 15px #3a728a);
    filter: drop-shadow( 0px 3px 15px #3a728a);
  }
  .careers-why-icons{
    height: 50px;
  }
  img.header-logo{
    height: 50px;
  }
  .wem_systems_content img.fullscreen-image{
    max-height: 400px;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;
  }
  .wem_systems_content svg{
    min-width: 7px;
  }
  .blog-standard .blog-image img{
    height: 350px;
    width: 100%;
    object-fit: cover;
  }
  .image-column{
    width: 100%;
    object-fit: contain;
  }
  .border-orange{
    border-color: var(--color-bright-orange);
  }
  .wem_systems_content img.rounded-lg.screenshot{
    /* max-height: 400px;
    width: 100%;
    object-fit: contain;
    border-radius: 10px; */
    max-height: 400px;
    width: min-content;
    object-fit: contain;
    border-radius: 10px;
    object-position: left;
    height: fit-content;
  }
  .wem_systems_content img.rounded-lg{
    max-height: 400px;
    width: -webkit-fill-available;
    object-fit: cover;
    border-radius: 10px;
    object-position: left;
    height: auto;
  }

  .btn.btn-table{
    background-color: transparent;
    border-radius: var(--border-wem); 
    transition: var(--trans-wem);
    font-weight: 700;
    border: solid 2px var(--color-dark-blue);
    color: var(--color-dark-blue);
    font-size: 16px;
    padding: 10px 10px;
    align-self: baseline;

  }

  .btn-table:hover{
    background-color: var(--color-dark-blue-20) !important;}

    .tag-item {
      display: inline-flex;
      align-items: center;
      background: #e3f2fd;
      border-radius: 15px;
      padding: 5px 12px;
      margin: 3px;
      font-size: 0.9em;
  }
  
  .tag-remove {
      cursor: pointer;
      margin-left: 8px;
      color: #666;
      font-weight: bold;
  }
  
  .tag-remove:hover {
      color: #333;
  }
  
  .tag-suggestions {
      margin-top: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
      max-height: 150px;
      overflow-y: auto;
      display: none;
  }
  
  .suggestion-item {
      padding: 8px 12px;
      cursor: pointer;
      transition: background-color 0.2s;
  }
  
  .suggestion-item:hover {
      background-color: #f8f9fa;
  }
  .blog-image-preview{
    width: 100%;
    object-fit: cover;
    height: auto;
    max-height: 300px;
  }
  .blog-simple img.blog-showcase{
  max-width: 100%;
  height: 500px;
  object-fit: cover;
  }
  li.page-item.disabled {
    opacity: 0.3;
}
  @media (max-width: 768px) {
    /* .navbar .navbar-nav .nav-item .nav-link, .navbar .navbar-nav .nav-item .nav-link {
      padding: 0 10px;
    }
    .btn.btn-primary, .btn-primary{
      padding: 10px 12px;
    }
    .btn.btn-secondary{
      padding: 10px 12px;
    }
    .btn-nav-mission{
      padding: 10px;
    }
    .wem-stats .feature-box{
      min-height: 150px;
    }
    img.partners{
      height: 80px;
    } */

  .blog-standard .blog-image img{
    height: 250px;
    width: 100%;
    object-fit: cover;
  }
  
    .service-slide img.service-img {
        height: 260px;
    }

    .services-grid .interactive-banner-style-09 .title-and-cta {
        opacity: 1;
    }
    .interactive-banner-style-09 .image-content .box-overlay {
        opacity: 1;
        visibility: visible;
    }
.wem-stats .feature-box{
    min-height: 150px;
    }
    .blog-simple figure{
        height: 300px;
    }
    .blog-simple img.blog-showcase{
      max-width: 100%;
      height: 300px;
      object-fit: cover;
      }
  }