/* Global Styles */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #fff; /* Pure White background */
    color: #000; /* Pure Black text */
    padding-top: 56px; /* Adjust for fixed navbar */
}

h1, h2, h3, h4, h5, h6 {
    color: #000; /* Pure Black headings */
}

a {
    color: #000; /* Pure Black links */
    text-decoration: none;
}

a:hover {
    color: #39FF14; /* Neon green hover for links */
}

/* Bootstrap Class Overrides for Strict Monochrome Theme */
.bg-dark {
    background-color: #000 !important; /* Pure black background */
}

.bg-light {
    background-color: #fff !important; /* Pure white background */
}

/* Override primary color to black for backgrounds/elements */
.bg-primary {
     background-color: #000 !important;
}
.text-primary {
    color: #000 !important;
}
.btn-primary {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important; /* White text on black button */
}
.btn-primary:hover {
    background-color: #333 !important; /* Darker grey on hover */
    border-color: #333 !important;
}

/* Ensure text colors are strictly black or white */
.text-white {
    color: #fff !important; /* Pure white text */
}

.text-dark {
     color: #000 !important; /* Pure black text */
}

/* Muted text should be a shade of grey */
.text-muted {
    color: #ccc !important; /* Light grey muted text for better visibility on black */
}
.text-white-50 { /* Ensure this is white on dark backgrounds */
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly less opaque white */
}
.text-black-50 { /* Ensure this is black on light backgrounds - not really used in monochrome theme but keeping for consistency */
     color: rgba(0, 0, 0, 0.5) !important;
}

/* Outline Buttons */
.btn-outline-light {
    color: #fff;
    border-color: #fff;
}
.btn-outline-light:hover {
    color: #000;
    background-color: #39FF14; /* Neon green hover for light buttons */
    border-color: #39FF14;
}

.btn-outline-dark {
    color: #000;
    border-color: #000;
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: #39FF14; /* Neon green hover for dark buttons */
    border-color: #39FF14;
}

/* Navbar Styling */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}
.navbar-dark .navbar-brand {
     color: #fff;
}

/* Divider Styles (Simplified - No Icon) */
.divider-custom {
    margin: 1.25rem 0 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.divider-custom .divider-custom-line {
    width: 100%;
    max-width: 7rem;
    height: 0.15rem; /* Thinner divider line */
    background-color: #999; /* Grey divider line */
    border-radius: 1rem;
}
.divider-custom .divider-custom-line:first-child {
    margin-right: 1rem;
}
.divider-custom .divider-custom-line:last-child {
    margin-left: 1rem;
}
/* Remove icon style */
.divider-custom .divider-custom-icon {
   display: none; /* Hide the icon */
}

.divider-custom.divider-light .divider-custom-line {
    background-color: #fff; /* White line for dark backgrounds */
}

/* Section Padding */
.page-section {
    padding: 5rem 0; /* Slightly reduced section padding */
}

/* Footer */
.footer { /* Target the footer element directly if needed */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #000; /* Black footer */
    color: #fff; /* White text */
}
.footer h4 {
    color: #fff; /* Ensure footer headings are white */
}
.footer .lead {
    color: rgba(255, 255, 255, 0.7); /* Slightly muted white for lead text */
}
.footer .btn-social {
    border: 1px solid #fff;
    color: #fff;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.25rem;
    line-height: 2rem; /* Adjust for vertical centering */
}
.footer .btn-social:hover {
     background-color: #fff;
     color: #000;
}

.copyright {
    background-color: #000; /* Black copyright section */
    color: rgba(255, 255, 255, 0.5); /* Muted white */
    padding: 1rem 0; /* Add padding to copyright */
}

/* Card Adjustments */
.card {
    border: none; /* No border for cards */
    background-color: #f8f9fa; /* Very light grey card background */
    box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.1); /* Subtle shadow for cards */
}
.card-title {
    color: #000; /* Ensure card titles are black */
    margin-bottom: 0.75rem;
}
.card-text {
     color: #555; /* Darker grey for card text */
}
.card-footer {
    background-color: transparent; /* No background for card footer */
    border-top: none; /* No border for card footer */
    padding-top: 0;
    padding-bottom: 1.25rem;
    text-align: center; /* Center align footer content */
}

/* Masthead - Hero Image Background */
.masthead {
    padding-top: calc(6rem + 56px); /* Adjust based on navbar height */
    padding-bottom: 6rem;
    background: url('../../assets/img/bg-masthead.jpg'); /* Hero image as background */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative; /* For overlay */
}
.masthead::before { /* Dark overlay for better text visibility */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
}
.masthead .container {
    position: relative; /* Ensure text is above overlay */
    z-index: 1;
}
.masthead .masthead-heading {
    font-size: 3rem; /* Larger heading */
    line-height: 3rem;
    color: #fff; /* White heading text */
    margin-bottom: 1rem; /* Spacing below heading */
}
.masthead .masthead-subheading {
    font-size: 1.5rem; /* Larger subheading */
    color: #eee; /* Slightly off-white subheading text */
    font-weight: lighter; /* Lighter font weight for subheading */
}


@media (min-width: 992px) {
    .masthead {
        padding-top: calc(6rem + 72px); /* Adjust for larger navbar */
        padding-bottom: 8rem; /* More bottom padding on larger screens */
    }
    .masthead .masthead-heading {
        font-size: 5rem; /* Even larger heading on desktop */
        line-height: 4.5rem;
    }
    .masthead .masthead-subheading {
        font-size: 2rem; /* Larger subheading on desktop */
    }
}

/* About Section Adjustments */
#about .lead {
    margin-bottom: 1.2rem; /* More spacing for lead text */
    font-size: 1.1rem; /* Slightly larger lead text */
    color: #eee; /* Lighter text for about section on dark bg */
}
#about img.img-fluid {
    margin-top: 1rem;
    margin-bottom: 2rem;
    border: 3px solid #fff; /* Thinner white border for certificates */
    box-shadow: 0 0 8px rgba(0,0,0,0.4); /* Slightly less intense shadow */
    transition: transform 0.3s ease-in-out; /* Smooth transform transition */
}
#about img.img-fluid:hover {
    transform: scale(1.05); /* Scale up slightly on hover */
}

/* Contact Form Adjustments */
#contact label {
    color: #fff; /* White labels for contact form */
    font-weight: normal; /* Normal font weight for labels */
}
#contact .form-control {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white input background */
    color: #000; /* Black input text */
    border: 1px solid #ddd; /* Lighter border */
}
#contact .form-control:focus {
    background-color: #fff;
    color: #000;
    border-color: #aaa; /* Darker border on focus */
    box-shadow: 0 0 0 0.25rem rgba(170, 170, 170, 0.25); /* Lighter shadow on focus */
}
#contact ::placeholder { /* Standard syntax */
  color: #999; /* Light grey placeholder text */
  opacity: 1; /* Firefox */
}
#contact :-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #999;
}
#contact ::-ms-input-placeholder { /* Microsoft Edge */
 color: #999;
}
#contact #submitButton { /* Style the submit button */
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
    padding: 0.9rem 1.6rem; /* Slightly smaller button padding */
    font-size: 1.1rem; /* Slightly smaller button font size */
    border-radius: 0.3rem; /* Slightly rounded button corners */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transition */
}
#contact #submitButton:hover {
    background-color: #eee !important; /* Even lighter grey on hover */
    border-color: #eee !important;
    color: #333 !important; /* Darker text on hover */
}
#contact #submitButton:active { /* Active state for button press */
    background-color: #ddd !important;
    border-color: #ddd !important;
}
#contact #submitButton.disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #fff !important;
    opacity: 1; /* Ensure disabled button is fully opaque */
}

/* Monochrome theme */
:root {
  --color-primary: #000;
  --color-secondary: #fff;
  --color-accent: #f8f8f8;
  --color-text: #333;
  --color-text-light: #666;
}

body {
  font-family: 'Nunito', sans-serif;
  color: var(--color-text);
  background-color: var(--color-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-accent);
}

/* Responsive layout */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}