/* Global Styles */

html, body {
    height: 100%;
    margin: 0;           
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
}


body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    background-color: #fdf5f5;
    color: #222;
}

.site-header {
    background:  #320000;
    color: #fff;
    text-decoration: none;
}

.brand-logo {
    max-height: 5rem;
    border-radius: 4px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-subtitle {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 1rem;
}

.site-nav .nav-link {
    color: #ffe6ea;
    font-weight: 500;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    color: #ffffff;
    text-decoration: underline;
}

/* Main sections */

.site-main {
    min-height: 70vh;
}

/* Hero */

.hero-section {
    background: radial-gradient(circle at top left, #ffe6ea 0, #fdf5f5 50%, #ffffff 100%);
    color: #320000;
    min-height: 70vh;   
}

.hero-image-wrapper {
    height: 100%;
}

.hero-title {
    font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-text {
    font-size: 1.05rem;
    max-width: 34rem;
}

.hero-actions .btn-primary {
    background-color: #b3001b;
    border-color: #b3001b;
}

.hero-actions .btn-primary:hover {
    background-color: #7b0011;
    border-color: #7b0011;
}

.hero-actions .btn-outline-light {
    color: #320000;
    border-color: #320000;
}

.hero-actions .btn-outline-light:hover {
    background-color: #320000;
    color: #ffffff;
}

.hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;         
    object-position: center;
    border-radius: 8px;       
}

/* Content sections */

.info-section,
.page-section {
    background-color: #ffffff;
}

.page-section-alt {
    background-color: #fce8eb;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.table {
    background-color: #fff;
}

.about-image {
    max-width: 90%;
}

/* Contact page */

.contact-card {
    background-color: #fff5f7;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
}

.contact-form .form-control {
    border-radius: 0.5rem;
}

/* Footer */

.site-footer {
    background-color: #320000;
    color: #ffe6ea;
    text-align: center;
    padding: 1rem 0;
}

.site-footer a {
    color: white;
}

.site-footer a:hover {
    text-decoration: underline;
}


/* Customizing Bootsrap's styles */

/* Alt hero section in Project Red colors */
.bg-projectred-hero-alt {
    background: radial-gradient(circle at top left, #FDEFEF 0, #FFF7F5 55%, #FFFFFF 100%);
}

.text-primary {
    color: #A50021 !important; 
}

.btn-primary {
    background-color: #C8102E;
    border-color: #C8102E;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #7D0018;
    border-color: #7D0018;
}

.btn-outline-primary {
    color: #A50021;
    border-color: #A50021;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #A50021;
    color: #FFFFFF;
}

/* Metrics row styling */
.text-projectred-metrics h2 {
    color: #A50021;
}

.text-projectred-metrics p {
    color: #555555;
    max-width: 18rem;
}


.greeting-text {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
}