* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
}
:root {
  --primary-color: #0b1f3a;
  --accent-color: #3fd0b0;
  --light-color: #f8f9fc;
  --dark-color: #1b1b1b;
  --transition-speed: 0.3s;
  --border-radius: 0.75rem;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.08);
}

body {
  font-family: "Inter", sans-serif;
  color: #333;
  background-color: var(--light-color);
  line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  /* color: var(--primary-color); */
}

.navbar {
  background-color: var(--primary-color);
  padding: 0.8rem 1rem;
  box-shadow: var(--shadow);
}
.navbar-brand {
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}
.navbar-nav .nav-link {
  color: #ffffffcc;
  transition: color var(--transition-speed);
}
.navbar-nav .nav-link:hover {
  color: var(--accent-color);
}
.navbar-toggler {
  border: none;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transition: background-color var(--transition-speed);
}
.btn-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--dark-color);
}
.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: white;
}

section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.bg-light {
  background-color: var(--light-color) !important;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-accent {
  background-color: var(--accent-color) !important;
}

.card {
  border-radius: var(--border-radius);
  border: none;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-speed);
}
.card:hover {
  box-shadow: var(--shadow-hover);
}

.card-header {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.card-body ul li {
  padding: 0.4rem 0;
  color: #444;
}

footer {
  background-color: var(--primary-color);
  color: #ddd;
  padding: 40px 0;
}
footer a {
  color: var(--accent-color);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(63, 208, 176, 0.25);
}

[data-aos] {
  transition-duration: 1s !important;
}

.rounded-xl {
  border-radius: 1.5rem !important;
}
.shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}