/* Define Variables for easier color management */
/* These colors are based on your Circuit Solutions logo */
:root {
    --circuit-dark-blue: #0D2341; /* A dark blue from the logo background */
    --circuit-pink: #FF4081;    /* A vibrant pink accent from the logo */
    --circuit-cyan: #00E5FF;    /* A bright cyan accent from the logo */
    --circuit-white: #FFFFFF;   /* White text/elements */
    --circuit-light-grey: #f8f9fa; /* Keeping a light background for some sections for contrast */
    --circuit-text-dark: #333; /* Default dark text color for light backgrounds */
    --circuit-text-light: var(--circuit-white); /* Default light text color for dark backgrounds */
}


/* Basic Body and Text Styling */
/* Sets the overall background and default text color */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6; /* Improves readability of paragraphs */
    background-color: var(--circuit-dark-blue); /* Set the body background to the dark blue */
    color: var(--circuit-text-light); /* Set the default text color to white for readability on dark background */
}

/* Heading Font Styling */
/* Applies the Orbitron font and pink color to all headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    color: var(--circuit-pink); /* Headings use the vibrant pink */
}

/* --- Navbar Styling --- */
/* Making the navbar smaller and darker with logo colors */
.navbar {
    padding-top: 0.5rem; /* Reduced padding top */
    padding-bottom: 0.5rem; /* Reduced padding bottom */
    font-size: 0.9rem; /* Slightly smaller font size */
    background-color: var(--circuit-dark-blue) !important; /* Set navbar background to dark blue */
    /* Removed border-bottom for a cleaner look unless you explicitly want it */

}

.navbar-brand {
     font-size: 1.5rem; /* Slightly larger brand font size */
     color: var(--circuit-white) !important; /* Ensure brand text is white */
     font-family: 'Orbitron', sans-serif; /* Use Orbitron for the brand */
}

/* Centering navbar links using flexbox utilities in HTML (mx-auto) */
/* No specific text-align or display rules needed here for centering */


.navbar-nav .nav-link {
    padding: 0.5rem 1rem; /* Adjust link padding */
    color: var(--circuit-white) !important; /* Ensure nav links are white */
    transition: color 0.3s ease, border-color 0.3s ease; /* Smooth color transition on hover */
}

.navbar-nav .nav-link:hover {
    color: var(--circuit-cyan) !important; /* Change link color to cyan on hover */
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2); /* Adjust toggler border color for dark background */
}

.navbar-toggler-icon {
    /* Adjust toggler icon color for dark background (white icon) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3csvg%3e");
}


/* Basic Hero Section Styling */
/* Styles the top section of the page (the header) */
.hero-section {
    background: var(--circuit-light-grey); /* Use light grey background for contrast */
    padding: 80px 0; /* Add vertical padding */
    text-align: center; /* Center align content */
    color: var(--circuit-text-dark); /* Ensure text is dark on this light section */
}

.hero-section h1 {
    font-size: 3rem; /* Larger font size for the main title */
    margin-bottom: 20px; /* Space below the title */
    color: var(--circuit-dark-blue); /* Use dark blue for the main heading in the hero */
}

.hero-section p {
    font-size: 1.25rem; /* Slightly larger text for the lead paragraph */
    margin-bottom: 30px; /* Space below the paragraph */
    color: var(--circuit-text-dark); /* Ensure paragraph text is dark */
}

/* Services Section Styling */
/* Styles the section listing the services */
#services {
    background-color: var(--circuit-light-grey); /* Use light grey background for contrast */
    color: var(--circuit-text-dark); /* Ensure text is dark on this light section */
    padding: 5rem 0; /* Add vertical padding (using Bootstrap's py-5, but good to be explicit here too) */
}

/* Simple Service Card Styling (using Bootstrap cards) */
/* Styles the individual cards within the services section */
.service-card {
    margin-bottom: 30px; /* Space below each card */
    text-align: center; /* Center align content within the card */
    background-color: var(--circuit-white); /* Ensure card background is white */
    border: 1px solid #ddd; /* Add a subtle border */
    border-radius: 0.5rem; /* Rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for Service Cards */
.service-card:hover {
    transform: translateY(-5px); /* Lift the card slightly */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a more pronounced shadow on hover */
}

.service-card .card-body {
    padding: 30px; /* Padding inside the card body */
}

.service-card h3 {
    color: var(--circuit-dark-blue); /* Use dark blue for card titles */
    font-family: 'Orbitron', sans-serif; /* Use Orbitron for card titles */
}

.service-card p {
     color: var(--circuit-text-dark); /* Ensure card text is dark */
}

/* Service Icon Styling */
.service-icon {
    color: var(--circuit-pink); /* Set icon color to pink */
    margin-bottom: 1rem; /* Space below the icon */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for Service Icons (optional, but nice) */
.service-card:hover .service-icon {
    color: var(--circuit-cyan); /* Change icon color on card hover */
}


/* Testimonials Section Styling */
/* Note: This section was removed from the HTML, but the styles are kept here in case you add it back */
#testimonials {
    /* Background is bg-light (light grey) by default from Bootstrap class */
    padding: 5rem 0; /* Add vertical padding */
    color: var(--circuit-text-dark); /* Ensure text is dark on this light section */
}

#testimonials h2 {
     color: var(--circuit-dark-blue); /* Use dark blue for the heading */
}

.blockquote {
    font-style: italic; /* Italicize testimonial text */
    margin-bottom: 1rem;
}

.blockquote-footer {
    display: block; /* Ensure footer is on a new line */
    margin-top: 0.5rem;
    font-size: 0.875em; /* Smaller font size for footer */
    color: #6c757d; /* Bootstrap's muted text color */
}

/* Free Device Assessment Section Styling */
#assessment {
    /* Background is the dark body background by default */
    padding: 5rem 0; /* Add vertical padding */
    color: var(--circuit-text-light); /* Ensure text is light on the dark background */
    border-top: 1px solid var(--circuit-pink); /* Optional: Add a pink border at the top */
    border-bottom: 1px solid var(--circuit-pink); /* Optional: Add a pink border at the bottom */
}

#assessment h2 {
    color: var(--circuit-pink); /* Use pink for the heading */
}

#assessment p {
    color: var(--circuit-text-light); /* Ensure paragraph text is light */
}


/* --- Bootstrap Button Overrides --- */
/* Customizes the appearance of Bootstrap buttons to match your brand colors */

/* Primary Button - Used for main calls to action */
.btn-primary {
    background-color: var(--circuit-cyan); /* Cyan background */
    border-color: var(--circuit-cyan); /* Cyan border */
    color: var(--circuit-dark-blue); /* Dark blue text on bright background */
    font-weight: bold; /* Make button text stand out */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover */
}

.btn-primary:hover {
    background-color: #00C0E6; /* Slightly darker cyan on hover */
    border-color: #00C0E6;
    color: var(--circuit-dark-blue);
}

/* Outline Primary Button - Used for secondary calls to action */
.btn-outline-primary {
    color: var(--circuit-pink); /* Pink text */
    border-color: var(--circuit-pink); /* Pink border */
    font-weight: bold; /* Make button text stand out */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover */
}

.btn-outline-primary:hover {
    background-color: var(--circuit-pink); /* Pink background on hover */
    border-color: var(--circuit-pink);
    color: var(--circuit-white); /* White text on pink hover */
}

/* Call to Action Section Styling */
/* Styles the section encouraging users to contact you */
.bg-light { /* This is a Bootstrap class, we are adding specific text color for contrast */
     color: var(--circuit-text-dark) !important; /* Ensure text is dark on this light section. !important might be needed to override Bootstrap's default light text on bg-light. */
}

/* --- Modal Styling --- */
/* Ensure labels within the modal body are clearly visible */
.modal-body .form-label {
    color: var(--circuit-dark-blue); /* Set label color to dark blue for contrast */
}

/* Styling for the Thank You message */
#thankYouMessage {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}


/* Basic Footer Styling */
/* Styles the bottom section of the page */
footer {
    background-color: var(--circuit-dark-blue); /* Use dark blue background */
    color: var(--circuit-white); /* White text */
    text-align: center; /* Center align content */
    padding: 40px 0; /* Add vertical padding */
}


/* Add more custom styles below as you build out your page */