/* wwwroot/css/site.css */
body {
   font-family: 'Roboto', sans-serif;
}

/* Header */
nav.navbar.navbar-expand-lg.fixed-top {
   background-color: #5489d0 !important;
   border-bottom: 1px solid #e0e0e0;
   padding: 10px 0;
   z-index: 1000;
}

.navbar-brand {
   padding: 0;
}

   .navbar-brand img.logo {
      height: 50px;
      width: auto;
      display: block;
   }

.navbar-nav {
   display: flex;
   flex-direction: row; /* Ensure links are horizontal */
}

.nav-link {
   color: #f5d76e !important; /* Soft gold */
   font-weight: 700;
   font-size: 16px;
   margin-right: 15px; /* Consistent spacing between links */
}

   .nav-link:hover {
      color: #C80F2E !important;
   }

/* User greeting and dropdown */
.user-greeting {
   color: #f5d76e !important;
   font-weight: 600;
   font-size: 16px;
   padding: 5px 10px;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}

   .user-greeting:hover {
      background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
      color: #C80F2E !important;
   }

.dropdown-menu {
   background-color: #5489d0;
   border: 1px solid #e0e0e0;
}

.dropdown-item {
   color: #f5d76e;
   font-weight: 500;
}

   .dropdown-item:hover {
      background-color: #C80F2E;
      color: #fff;
   }

.dropdown-divider {
   border-top: 1px solid #e0e0e0;
}

.lang-toggle {
   border: 1px solid #f5d76e; /* Match text color */
   border-radius: 5px;
   padding: 5px 10px;
   font-size: 14px;
   color: #f5d76e;
   font-weight: 600;
   background-color: transparent;
   cursor: pointer;
}

   .lang-toggle:hover {
      background-color: #C80F2E;
      color: #fff;
      border-color: #C80F2E;
   }

/* Hero Section */
.hero {
   background: #e6f0fa;
   padding: 80px 0;
   text-align: center;
   border-radius: 20px;
   margin-top: 30px;
   margin-bottom: 30px;
   box-shadow: 0 4px 30px rgba(0, 61, 128, 0.15);
}

@media (max-width: 768px) {
   .navbar-brand img.logo {
      height: 40px;
   }
}

.hero h1 {
   color: #003d80;
   font-size: 48px;
   font-weight: 700;
}

.hero p {
   color: #666;
   font-size: 20px;
   margin-bottom: 30px;
}

.btn-primary {
   background-color: #C80F2E;
   color: #fff;
   border: none;
   padding: 10px 20px;
   font-weight: 500;
}

   .btn-primary:hover {
      background-color: #a00d25;
      color: #fff;
   }

.btn-outline-primary {
   border: 2px solid #C80F2E;
   color: #C80F2E;
   padding: 10px 20px;
   font-weight: 500;
}

   .btn-outline-primary:hover {
      background-color: #C80F2E;
      color: #fff;
   }

/* Ensure the login button in the popup form matches */
#loginForm .btn-primary,
#registerForm .btn-primary {
   background-color: #C80F2E;
   color: #fff;
}

   #loginForm .btn-primary:hover,
   #registerForm .btn-primary:hover {
      background-color: #a00d25;
      color: #fff;
   }

.hero-img {
   max-width: 100%;
   height: auto;
}

/* Features Section */
.features {
   padding: 80px 0;
   background-color: #f0f7ff;
   border-radius: 20px;
   margin-bottom: 30px;
   box-shadow: 0 4px 30px rgba(0, 61, 128, 0.15);
}

   .features h2 {
      color: #003d80;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
   }

   /* Ensure spacing in the grid */
   .features .row {
      margin-bottom: -20px;
   }

   .features .col-md-4 {
      margin-bottom: 20px;
   }

.feature-card {
   padding: 20px;
   background-color: #e6f0fa;
   border-radius: 20px !important;
   box-shadow: 0 4px 30px rgba(0, 61, 128, 0.15) !important;
   text-align: center;
   transition: box-shadow 0.3s ease;
   border: none;
}

   .feature-card:hover {
      box-shadow: 0 6px 35px rgba(0, 61, 128, 0.2) !important;
   }

   .feature-card i {
      color: #C80F2E;
      font-size: 40px;
      margin-bottom: 15px;
   }

   .feature-card h3 {
      font-size: 20px;
      font-weight: 600;
      color: #333;
   }

   .feature-card p {
      color: #666;
      font-size: 16px;
   }

/* About Section */
.about {
   padding: 80px 0;
   background-color: #e6f0fa;
   border-radius: 20px;
   margin-bottom: 30px;
   box-shadow: 0 4px 30px rgba(0, 61, 128, 0.15);
}

   .about h2 {
      color: #003d80;
      font-size: 36px;
      font-weight: 700;
   }

   .about p {
      color: #666;
      font-size: 18px;
   }

/* Clients Section */
.clients {
   padding: 80px 0;
   background-color: #f0f7ff;
   border-radius: 20px;
   margin-bottom: 30px;
   box-shadow: 0 4px 30px rgba(0, 61, 128, 0.15);
}

   .clients h2 {
      color: #003d80;
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 40px;
   }

.client-logo {
   filter: grayscale(100%);
   transition: all 0.3s ease;
   max-height: 50px;
   margin: 0 20px;
}

   .client-logo:hover {
      filter: none;
   }

/* Footer */
footer {
   background-color: #5489d0 !important;
   color: #f5d76e; /* Soft gold */
   padding: 40px 0;
}

   footer a {
      color: #f5d76e; /* Soft gold */
      text-decoration: none;
   }

      footer a:hover {
         color: #C80F2E;
      }

   footer img {
      height: 30px;
   }