/* Themed colors */
:root {
  --primary-accent: #cc0000;  /* Deep red */
  --navbar-border-top: #990000;  /* Darker red */
  --button-border: #b30000;  /* Slightly darker red */
  --link-focus: #800000;  /* Even darker red */
  --form-shadow: rgba(204, 0, 0, 0.6);  /* Red with opacity */
  --pagination-bg: #ffcccc;  /* Light red */
  --link-hover-bg: #990000;  /* Darker red */
  --navbar-focus: #ff1a1a;  /* Lighter red */
}

/* Hero section styles */
.home-hero {
    position: relative;
    background-image: url('/img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 500px;
    padding: 100px 0;
    margin-top: -30px;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.home-hero .container {
    position: relative;
    z-index: 1;
}

.home-hero h1,
.home-hero .lead {
    color: #fff;
}

/* Override navbar styles */
.navbar-default {
    background-color: #000000;  /* Black background */
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;  /* White text */
}

.navbar-default .navbar-nav > li > a:hover {
    color: var(--primary-accent);  /* Red on hover */
}

/* Override button styles */
.btn-template-main {
    background: var(--primary-accent);
    color: #ffffff;
}

.btn-template-main:hover {
    background: #000000;
    border-color: #000000;
}

/* Override footer styles */
#footer {
    background: #000000;
    color: #ffffff;
}

#footer h4 {
    color: var(--primary-accent);
}

/* Override heading styles */
.heading h2 {
    border-bottom-color: var(--primary-accent);
}

/* Box shadows and borders */
.box-simple {
    border-color: var(--primary-accent);
}

.box-simple:hover {
    border-color: #000000;
}

/* Pricing box customization */
.pricing-box:hover {
    border-color: var(--primary-accent);
}

.pricing-header {
    background: #000000;
}

/* Contact form customization */
.contact-form {
    border: 1px solid var(--primary-accent);
}

.form-control:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 8px var(--form-shadow);
}