:root {
    --primary-color: #17A2B8;
    --secondary-color: #E9ECEF;
    --accent-color: #FD7E14;
    --dark-text: #212529;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--dark-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Bolder for headlines */
}

/* Custom styles for the hero section */
.hero-section {
    background-color: var(--secondary-color);
}

.hero-section h1 {
    color: var(--primary-color);
}

/* Style the primary CTA button */
.btn {
    background-color: var(--accent-color);
    border: none;
    color: white;
    padding: 0.75rem 2.5rem;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e56a00; /* A slightly darker shade for hover effect */
}

/* Style for the active nav link */
.nav-item .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600; /* Make it a bit bolder */
}

/* Hide the hover underline on the active link */
.nav-item .nav-link.active::after {
    display: none;
}

/* Custom styles for the brand name in the navbar */
.navbar-brand {
    font-size: 1.75rem; /* Makes the font larger */
    font-weight: 700 !important; /* Makes it bolder */
    color: var(--primary-color) !important; /* Applies the primary brand color */
}

/* Ensure the brand name is visible when the navbar is scrolled */
.navbar.scrolled .navbar-brand {
    color: var(--primary-color) !important;
}

/* Make the brand name stand out on hover */
.navbar-brand:hover {
    color: var(--primary-color) !important;
    opacity: 0.8;
}

/* Custom success button for the pricing card */
.btn-success {
    background-color: #28A745; /* Bootstrap default green */
    border-color: #28A745;
}

/* Custom button for the best value card to match brand */
.btn-best-value {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white; /* Ensure text is white */
}

.btn-best-value:hover {
    background-color: #e56a00; /* Darker shade on hover */
    border-color: #e56a00;
}

/* Style for the "Most Popular" badge */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Style for the "Best Value" badge */
.badge.bg-success {
    background-color: var(--accent-color) !important;
}

/* Fluid Typography for Headlines */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem; /* A slightly smaller size for mobile */
  }
  h2 {
    font-size: 1.75rem;
  }
  .btn.btn-lg {
    padding: 0.75rem 2rem; /* Reduce horizontal padding on mobile */
  }
}

:target {
    scroll-margin-top: 120px; /* Adjust this value to be slightly larger than your navbar's height */
}