/* Color System */
:root {
    --primary-color: #002244;
    --secondary-color: #8BB0D6;
    --text-color: #002244;
    --background-color: #E9F1F5;
    --light-background: #ffffff;
    --button-text-color: #FFFFFF;
  }
  
  /* Body */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  
  /* Header */
  header h1 {
    font-size: 36px;
  }
  
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.06rem;
}


p {
    letter-spacing: 0.07rem;
    line-height: 1.4; /* optional for better readability */
}

section li {
    letter-spacing: 0.07rem; /* same spacing or different if you want */
}

  /* Primary Button */
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--button-text-color);
  }
  
  .btn-primary:hover{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
  }
  
  .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-width: 2px;
  }

  .btn-outline-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--button-text-color);
  }
  
/* Apply fully rounded corners to all Bootstrap buttons */
.btn {
    border-radius: 100px !important;
}

  /* Links */
  a {
    color: var(--primary-color);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--secondary-color);
  }
  
  /* Footer */
  footer {
    background-color: var(--background-color);
    text-align: center;
    padding: 1rem 0;
  }
  
/* Top-nav */
.top-nav .link,
.top-nav .btn {
  white-space: nowrap; /* Prevent text from breaking into multiple lines */
}

@media (max-width: 991px) {
  .top-nav .btn {
    font-size: 0.9rem; /* slightly smaller text on tablets/mobiles */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

  /* Language selector in top-nav*/
 select,
.form-select {
  background-color: var(--secondary-background) !important;
  color: var(--text-color) !important;
  border: 0 !important;
  padding: 4px !important;
  font-size: 1rem;
}

.language-select {
  appearance: none;              /* Standard */
  -webkit-appearance: none;      /* Safari/Chrome */
  -moz-appearance: none;         /* Firefox */
  background-image: none !important; /* Remove Bootstrap arrow */
  padding-right: 4px;            /* Adjust padding since arrow is gone */
}

  /* Navbar */
  #navbar {
    transition: transform 0.3s ease-in-out;
  }
  
  .custom-navbar {
    background-color: var(--background-color);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--text-color);
  }
  
  .custom-navbar a {
    color: var(--text-color);
  }
  
  .custom-navbar a:hover {
    color: var(--secondary-color);
  }
  
  .custom-navbar .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--button-text-color);
  }
  
  .custom-navbar .btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--button-text-color);
  }

  .custom-navbar .btn-outline-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--button-text-color);
  }
  
  /* Navbar Scroll Hide */
  #navbar.scroll-hide {
    transform: translateY(-100%);
  }
  
  /* Hero Section */
  .hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  
  .hero-section .hero-content {
    flex: 1;
    padding: 2rem;
  }
  
  .hero-section .hero-image {
    flex: 1;
    background-image: url('hero-image.png');
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hero-section h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .hero-section p {
    margin-bottom: 2rem;
  }
  
  .hero-section .btn {
    font-size: 1.2rem;
    padding: 1rem 2rem;
  }
  
  .btn-nav-top {
    padding: 0rem;
  }
  
  .logo {
    height: 32px;
  }
  
  .hero-section .link {
    font-size: 1.2rem;
    color: var(--text-color);
    text-decoration: none;
  }
  
  .hero-section .link:hover {
    color: var(--secondary-color);
    text-decoration: none;
  }
  
  /* Benefits Section */
  .benefits-section {
    background-color: var(--light-background);
    width: 100%;
    padding: 2rem 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .benefits-section .card {
    /* background-color: var(--background-color); */
    color: var(--text-color);
    text-align: center;
  }
  
  .benefits-section .benefits-img {
    height: 9rem;
    padding: 1rem 0;
  }

   /* Request Section */
  .request-section {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /* About Section */
  .about-section {
    background-color: var(--light-background);
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /* About Section Image */
  .about-img {
    max-width: 100%;   
    width: 360px;          /* Default desktop width */
    height: auto;
  }

  @media (max-width: 991.98px) { /* Mobile / tablet */
    .about-img {
      width: 70%; 
      max-width: 300px;          /* Smaller image on mobile */
      margin-top: 0rem;
    }
  }

.about-section .row.align-items-center {
  align-items: center;
}

  /* Demo section */
  .demo-section {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  video {
    border: 2px solid  var(--primary-color);
    border-radius: 8px;
  }


  /* Sign Up Section  */
  .signup-section {
    background-color: var(--light-background);
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /* Features Section */
  .features-section {
    background-color: var(--light-background);
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .feature-icon {
    font-size: 2rem;
  }
  
  .features-section p {
    margin-top: 0.5rem;
  }

  .features-section p :not(.lead) {
    font-size: 1.2rem;
  }
  
 /* Contacts section */
  .contacts-section {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /* Mobile Adjustments */
  @media (max-width: 992px) {
    .hero-top-mobile {
      display: none;
    }
  }
  
  @media (min-width: 992px) {
    .hero-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  @media (max-width: 992px) {
    .hero-section {
      height: auto;
    }
  }
  
  @media (max-width: 992px) and (min-width: 576px) {
    .hero-section .col-sm-8 {
      width: 83.333333%;
    }
  }
  
  @media (max-width: 576px) {
    .hero-section .col-10 {
      width: 100%;
    }
  }