/* Global Styles */
body {
    background-color: var(--color-grey);
    max-width: 1200px;
    margin: 0 auto;
}
:root {
    --color-grey: #6c6c6c;
    --color-light: #f5f5f5;
    --color-dark-grey: #555555;
    --color-red: #a40000;
    --color-mid-red: #860000;
    --color-black: #000000;
    --color-mid-black: #290000;
    --color-black-var: #1b1b1b;
}
h1 {
    color: var(--color-black);
}


/* Sections */

/* Navbar Section */
.navbar > .container-fluid {
    padding-inline: 1rem;
    background: hsla(0, 0%, 0%, 1);
    background: linear-gradient(180deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 100%, 38%, 1) 120%);
    background: -moz-linear-gradient(180deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 100%, 38%, 1) 120%);
    background: -webkit-linear-gradient(180deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 100%, 38%, 1) 120%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#C00000", GradientType=1 );
}
.navbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 56px;
}
/* Brand */
.navbar-brand .brand {
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--color-black);
}
/* Links */
.navbar-nav .nav-link {
    color: var(--color-light);
    margin-right: 1rem;
}
.navbar-nav a:hover {
    color: var(--color-red);
}
/* --- Navbar Toggler: Hamburger → X --- */
.navbar-toggler {
    background: transparent;
    color: var(--color-light);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.navbar-toggler-icon {
    width: 24px;
    height: 24px;
    filter: invert(1);
    color: var(--color-light);
}
.navbar-toggler[aria-expanded="true"] {
    display: none;
}

/* Hero Section */
#hero {
    position: relative;
    min-height: 70vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("/assets/images/hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
#hero .container {
    z-index: 1;
}
#hero h1,
#hero p {
    color: var(--color-light);
    margin-left: 2rem;
    
}
#hero p {
    max-width: 520px;
    margin-top: 2rem;
}

/* Packages Section */
#packages .row h2 {
    margin-bottom: 0;
    line-height: 0.5;
}
.card-body .card-title h2 {
    color: var(--color-black-var) !important;
}
.card-body {
    background-color: var(--color-light);
    display: flex;
    flex-direction: column;
}

/* How It Works Section */
#how-it-works {
    background: hsla(0, 0%, 0%, 1);
    background: linear-gradient(180deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 100%, 38%, 1) 120%);
    background: -moz-linear-gradient(180deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 100%, 38%, 1) 120%);
    color: var(--color-light);
    padding-left: 1rem;
}
#how-it-works >.p-text {
    padding-right: 2rem;
    padding-left: 0;
}

/* Choose Your Package Section */
#final-cta > .container {
    background-color: var(--color-dark-grey);
}
#final-cta > .container h2 {
    color: var(--color-black-var);
}

/* Button Styles */
.btn-outline-primary {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-light);
    border: 3px solid;
}
.btn-outline-primary:hover {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-black);
}
#hero .cta-btn-outline-primary {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-light);
    border: 3px solid;
    margin-top: 5rem;
    margin-left: 3rem;
}
#hero .cta-btn-outline-primary:hover {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-light);
}

/* Contact and Orders */
/* Order Form & Contact Modal inputs & selects – focus styles */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: var(--color-red);
    box-shadow: 0 0 0 0.3rem rgba(220, 53, 69, 0.2);
}
.modal-header {
    border-bottom: 0;
}
.modal-content {
    background: var(--color-grey);
}
/* Oder Confirmation */
.email > a {
    color: var(--color-black-var);
}
.email > a:hover {
    color: var(--color-mid-red);
    text-decoration: none;
}
/* Footer Section */
#footer > .container {
    background-color: var(--color-dark-grey);
    margin-top: 0;
    margin-bottom: 1rem;
}
#footer a {
    color: var(--color-black-var);
}
#footer a:hover {
    color: var(--color-red);
}
#footer p {
    color: var(--color-black-var);
    padding-top: 1rem;
    margin-top: 0;
    margin-bottom: 0;
}

/* Media Queries */