/*!
 * Custom styles for the Bootstrap Agency Template
 */

:root {
    --bs-primary: #007bff; /* Primary Brand Color (Change this!) */
    --bs-secondary: #6c757d;
}

body {
    font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

    .h1, h1 {
        font-size: 3.5rem;
        font-family: AllianceNo\.2-Bold, sans-serif;
        font-weight: 700;
    }

    p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: large;
    letter-spacing: .2px;
    color: #fff;
    }
   
   .text-sm-white {
    --bs-text-opacity: 1;
    color: rgb(255 255 255 / 75%) !important;
} 

.text-smb-white {
    --bs-text-opacity: 1;
    color: rgb(255 255 255 / 75%) !important;
} 

 .bg-body {
    --bs-bg-opacity: 1;
    background-color: rgb(137 43 109) !important;
}

.bg-call-to-action {
    --bs-bg-opacity: 1;
    background-color: rgb(58 8 126) !important;
}

.text-warning {
    --bs-text-opacity: 1;
    color: rgb(223 44 191) !important;
}
/* --- Navigation Bar --- */
#mainNav {
    background-color: #470064; /* Dark background */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    border-bottom: 1px solid #ba3ce3;
}

#mainNav .navbar-brand {
    color: whitesmoke;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-weight: 700;
    font-size: xx-large;
}

#mainNav .navbar-nav .nav-item .nav-link {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.0625em;
}

/* --- Hero Section (Masthead) --- */
.masthead {
    text-align: center;
    color: #6e1d51;
    /* Example: Dark Overlay with a subtle pattern */
    background: #f3f2f4;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    padding-top: 10.5rem;
    padding-bottom: 6rem;
}

.masthead-subheading {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.5rem;
    margin-bottom: 25px;
}

.masthead-heading {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 3.25rem;
    margin-bottom: 2rem;
}

#hero-banner {
    /* 🖼️ 1. Background Image and Overlay */
    /* Adds a semi-transparent black layer (0.5 opacity) over the image 
       for better contrast with the white text. */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url('./images/hero-bg.svg'); /* <- REPLACE with your image URL */
    
    /* 📐 2. Sizing and Positioning */
    background-size: cover;          /* Scales image to cover the entire section */
    background-position: center;     /* Centers the most interesting part of the image */
    background-repeat: no-repeat;    /* Ensures the image doesn't tile */
    
    /* 📏 3. Content and Design */
    min-height: 1000px;               /* Defines the minimum height of the section */
    display: flex;                   /* Used to center the content */
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* 🎨 4. Text Appearance */
    color: white;                    /* Ensures text is visible against the dark overlay */
    padding: 20px;
    border-top: 1px solid #ae7cbf;    
}


/* --- Custom Buttons --- */
.btn-primary {
    background-color: #5a235496;
    border-color: #892584;
}

.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

/* --- Section Styling --- */
.page-section {
    padding: 8rem 0;
}

.section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
}

.section-subheading {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 4rem;
}

/* --- Footer --- */
.footer {
    background-color: #f8f9fa;
}

.btn-social {
    color: white;
    background-color: #212529;
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    display: inline-block;
    text-align: center;
}