/*
 * Custom CSS for a LabVIEW-themed website.
 * This file is designed to be used in conjunction with Bootstrap.
 *
 * It establishes a clean, professional look with a green color palette
 * and a modern sans-serif font.
 */

/* ================== */
/* 1. Font Import   */
/* ================== */
/* Import the Inter font from Google Fonts for a clean, modern look. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ========================== */
/* 2. Color Variables (Custom Properties)  */
/* ========================== */
/*
 * Define a palette of green shades inspired by the logo.
 * Using CSS variables makes the colors easy to manage and update.
 */
:root {
  --green-primary: #3d8c40; /* A vibrant, main green */
  --green-dark: #2c6c2e;   /* A darker green for buttons and headings */
  --green-light: #6eb767;  /* A lighter green for accents and highlights */
  --green-very-light: #e6f2e6; /* A very light green for backgrounds */

  --gray-text: #4a4a4a;    /* Dark gray for body text */
  --gray-light: #f8f9fa;   /* Light gray for backgrounds */
  --white: #ffffff;
  --dblue: #1B1B48;
}

/* ================================= */
/* 3. Global Styles and Bootstrap Overrides */
/* ================================= */
body {
  font-family: 'Inter', sans-serif;
  color: var(--gray-text);
  background-color: var(--dblue);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--green-dark);
  font-weight: 600;
}

/* Override Bootstrap's primary color with our custom green */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  box-shadow: none;
}

.btn-outline-primary {
  color: var(--green-dark);
  border-color: var(--green-dark);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
  background-color: var(--green-dark);
  color: var(--white);
}

/* Link color */
a {
  color: var(--green-very-light);
  text-decoration: none;
}

a:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

/* ================== */
/* 4. Component Styling */
/* ================== */
/*
 * Apply custom styles to common Bootstrap components
 * to match the professional theme.
 */

.description {
  color: var(--green-very-light);
}


/* Cards */
.card {
  background-color: var(--green-dark);
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero-section {
  background-color: var(--dblue);
  padding: 6rem 0;
}

.hero-section2 {
  background-color: var(--green-light);
  padding: 6rem 0;
}



/* Navbar */
.navbar {
  background-color: var(--dblue);
  border-bottom: 1px solid #e0e0e0;
  color: var(--white);
}

.navbar-brand {
  font-weight: 700;
  color: var(--green-dark) !important;
}

.nav-link {
  font-weight: 500;
  color: var(--white) !important;
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: var(--green-primary) !important;
}