/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    font-family: sans-serif; /* Choose a suitable font */
    color: #444;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Add background transition if you want */
    /* transition: background-color 0.3s ease-in-out; */
}

/* Add a background color to navbar when scrolled (optional) */
/* You'd need JavaScript to add/remove a class like 'scrolled' */
/*
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
*/

.navbar-brand {
    font-size: 1.5rem;
}

.nav-link {
    font-weight: 500;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    padding-top: 120px; /* Adjust based on navbar height */
    padding-bottom: 60px;
    /* background: linear-gradient(to bottom, #f8f9fa, #ffffff); Optional gradient */
    background-color: #f8f9fa; /* Light background */
    min-height: 80vh; /* Ensure it takes up significant viewport height */
}

#hero h1 {
    color: #333;
}

#hero .lead {
    color: #555;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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


/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
#features .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Make cards in a row equal height */
}

#features .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.feature-icon i {
    /* You can add specific colors per icon via Bootstrap text-* classes in HTML */
    /* Example: text-primary, text-success, text-info etc. */
}

/*--------------------------------------------------------------
# How It Works Section
--------------------------------------------------------------*/
#how-it-works .step-icon i {
    /* color: #0d6efd; /* Bootstrap primary color */
    /* Or keep using text-primary in HTML */
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
#pricing .card-header {
    font-weight: bold;
}

#pricing .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pricing .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/*--------------------------------------------------------------
# CTA Section
--------------------------------------------------------------*/
#cta h2 {
    /* Customize if needed */
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    /* Add specific styles if needed */
}

footer a:hover {
    color: #ffffff !important; /* Brighter white on hover */
}