/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../vendor/Roboto/Roboto-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/Roboto/Roboto-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/Roboto/Roboto-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/Roboto/Roboto-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Elasis';
    src: url('/vendor/Elasis/elasis-rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --bs-primary: #0a2e5c;
    --st-cyan: #00BCD4; /* cyan-42 */
    --st-cyan-32: #0090A3;
    --st-cyan-30: #008799;
    --dark-blue: #16203F;
    --light-grey: #F7F7F7;
    --grey-90: #e6e6e6;
    --grey-80: #cccccc;
    --grey-50: #808080;
    --grey-20: #333333;

    --small: 0.875rem;
    --regular: 1rem;
    --large: 1.25rem; /* 20px, text-primary*/
    --heading-h5: 1.25rem; /* 20px */
    --heading-h4: 1.5rem;  /* 24px */
    --heading-h3: 1.75rem;  /* 28px */
    --heading-h2: 2rem;  /* 32px */
    --heading-h1: 2.75rem; /* 44px */
  }
  body {
    font-family: "Roboto", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--large);
    /* font-weight: 300; */
    line-height: 1.6; 
  }
  strong {
    font-weight: 600;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
  a {
    color: var(--st-cyan);
    text-decoration: none;  
    transition: 0.3s;
  }
  a:hover:not(.btn) {
    color: var(--st-cyan-30);
    font-weight: 400;
    text-decoration: none;
  }    
  .sigtrona-btn {
    background-color: var(--st-cyan);
    color: white;
    transition: 0.3s;
  }
  .sigtrona-btn:hover {
    background-color: var(--st-cyan-30);
    color: white;
  }
  .hero-btn {
    background-color: white;
  }
  .hero-btn:hover {
    border-color: white;
  }
  .container {
    max-width: 1500px;
  }
  @media (max-width: 1500px) {
    .container {
      padding-left: 50px;
      padding-right: 50px;
    }
  }
  ul {
    list-style-type: square;
  }
  .bg-light-grey {
    background-color: var(--light-grey);
  }

  .navbar .logo {
    height: 75px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    color: var(--grey-50);
    font-weight: 400;
    position: relative;
    transition: 0.3s;
    padding: 0.75rem 1rem 0.75rem 1rem;
  }
  /* .navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
  } */
  .navbar-expand-lg .navbar-nav .nav-link:hover,
  .navbar-expand-lg .navbar-nav .nav-link.active { 
    color: var(--st-cyan);
  }
  /* Underline effect on hover */
  .navbar-expand-lg .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--st-cyan);
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }
  
  .navbar-expand-lg .navbar-nav .nav-link:hover::after,
  .navbar-expand-lg .navbar-nav .nav-link.active::after {
    width: 80%;
  }
  
  /* Mobile navbar styling */
  @media (max-width: 991.98px) {
    .navbar-collapse {
      background-color: white;
      padding: 1rem 0;
      border-top: 1px solid var(--grey-90);
    }
    
    .navbar-nav {
      text-align: center;
    }
    
    .navbar .nav-link {
      padding: 0.5rem 1rem !important;
    }
    
    .navbar .nav-link::after {
      display: none;
    }
  }
  .hero {
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)),
      url("/images/st-header.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 600px; /* Ensures it has a strong visual presence */
    color: white;
    display: flex;
    align-items: center;
    text-align: left;
    position: relative;
    overflow: hidden;
  }

  .main-hero h1 {
    font-family: 'Elasis', sans-serif; 
    font-size: 60px;
    margin-bottom: 25px;
  }
  .mainhero h2 {
    font-size: var(--heading-h2);
    margin-bottom: 25px;
  }
  .main-hero h3.subheadline {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 25px;
    font-weight: 400;
    line-height: 1.6; 
  }
  .hero a, .hero button {
    font-size: 1rem; /* 16px */
  }
  .btn-outline-light:hover {
    color: var(--bs-primary);
    background-color: #fff;
  }
  .section-navbar {
    background-color: var(--grey-90);
    border-bottom: 1px solid var(--grey-80);
  }
  .section-navbar .nav-link {
    border-left: 1px solid var(--grey-80);
    color: var(--grey-20);
    font-size: var(--regular)
  }
  .section-navbar .nav-link:last-child {
    border-right: 1px solid var(--grey-80);
  }
  .section-navbar .nav .nav-link.active,
  .section-navbar .nav .nav-link:hover {
    color: var(--st-cyan);
    font-weight: 400;
  }
  .section-anchor {
    scroll-margin-top: 58px;
  }
  .features .bi {
    font-size: 60px;
    color: var(--st-cyan);
  }
  .features .card {
    border: none;
    text-align: center;
  }
  .features .card-body {
    padding: 2rem 1rem;
  }
  .features .card-title {
    font-size: var(--heading-h4);
  }
  .features .card-text {
    font-size: var(--heading-h4);
    line-height: 1.2;
  }

  section.about {
    text-align: center;
  }
  section.product-details h3 {
    font-size: var(--heading-h2);
    color: var(--st-cyan);
  }
  section.product-details i.bi {
    color: var(--st-cyan);
  }

  section.product-highlight {
    background-color: var(--dark-blue);
    color: white;
  }
  section.product-highlight .module-img {
    height: 350px;
  }
  section.components .card-img-top { 
    padding: 10px;
  }
  @media (max-width: 991px) {
    section.components .card-img-top {
      padding: 25px;
    }
  }
 .card-body {
    border-top: 1px solid var(--grey-90);
  }
  .features .card-body {
    border-top: none;
  }
  .product-variants .card-title {
    color: var(--st-cyan);
  }
  .product-variants .card-img-top {
    width: 65%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 1024px) {
    .product-variants .card-img-top {
      width: 100%;
    }
  }
  .product-variants .card-body {
    padding: 2rem;
  }
  .product-variants .card-text {
    text-align: justify;
  }
  section.components ul {
    padding-left: 20px;
  }
  section.components ul li:not(:last-child) {
    padding-bottom: 5px;
  }
  section.components .card .card-title,
  section.components .card p.card-subtitle {
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  .product-hero h1 {
    font-size: 60px;
    margin-bottom: 25px;
  }
  .product-hero .pulsegen {
    max-height: 500px;
  }
  .product-lead .lead {
    line-height: 1.6; 
    font-size: var(--large);
    text-align: justify;
    font-weight: 400; 
  }
  .product-features table td:first-child {
    font-weight: 600;
    width: 40%;
  }

  footer {
    background-color: var(--grey-90);
  }
  footer .logo img {
    height: 75px;
  }
  footer address p {
    font-size: var(--regular);
  }
  footer address i {
    color: var(--st-cyan);
  }
  footer .bottom-footer {
    font-size: var(--regular);
  }
  
  .imprint h1, .privacy h1 {
    font-size: var(--heading-h2);
  }
  #imprint hr, #privacy hr {
    max-width: 1500px;
  }
  .imprint .provider-details, .privacy .provider-details {
    line-height: 1.2;
  }

  /* Image hover effect styles */
  .image-container {
    position: relative;
    cursor: pointer;
  }
  .image-container:hover .image-overlay {
    opacity: 1;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .overlay i {
    color: white;
    font-size: 3rem;
  }
  .image-overlay {
    background: rgba(22, 32, 63, 0.6);
  }
  .screenshot-overlay {
    background: rgba(0, 0, 0, 0.25);
  }

  .screenshot-overlay:hover,
  .position-relative:hover .screenshot-overlay {
    opacity: 1;
  }
  /* Modal styles */
  .modal-body img {
    max-height: 80vh;
    object-fit: contain;
  }
  .position-relative {
    position: relative;
  }

  #contactFormResponse.alert {
    margin-top: 1.5rem;
  }
.contact .contact-email a {
  color: var(--bs-body-color);
}
.contact .contact-email a:hover {
  color: var(--st-cyan);
  font-weight: 400;
  text-decoration: none;
}