/* Imagination Guild Branding CSS */

/* Base Styles */
/* Sets the default font and color for the body of the website. The gold color is used for general text. */
body {
	/*font-family: 'YourSecondaryFont', sans-serif; /* Replace 'YourSecondaryFont' with the actual font name. */
	font-family: sans-serif; /* Replace 'YourSecondaryFont' with the actual font name. */
	color: #31322c; /* Gold color from the branding palette. */
	background-color: #ffffff; /* A neutral white background for better readability. */
}

/* Headings Styles */
/* Headings use the primary font and crimson color for distinction. */
h1, h2, h3, h4, h5, h6 {
        /* font-family: 'YourPrimaryFont', serif; /* Replace 'YourPrimaryFont' with the actual font name. */
        font-family: serif; /* Replace 'YourPrimaryFont' with the actual font name. */
        color: #36385c; /* Crimson color for headings, providing a striking contrast. */
        text-shadow: 
            -1px -1px 0 #000,  
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000; /* Creates a black outline around the text */
}

/* Link Styles */
/* Standard and hover states for links. Using gold for the standard state and crimson for hover. */
a {
	color: #0d6efd;
}

a:hover {
	color: #36385c; /* Crimson color for hover state, adding interactivity. */
}

/* Header and Footer Styles */
/* Both use the primary gold color background with white text for branding consistency. */
header, footer {
	background-color: #0d6efd; 
	color: #ffffff; /* White text for clear readability against the gold background. */
}

/* Primary Navigation Menu Styles */
/* This section styles the primary navigation menu. */
nav#primary-nav ul {
	list-style-type: none; /* Removes default list styling. */
	margin: 0; /* Resets margin for alignment. */
	padding: 0; /* Resets padding for alignment. */
}

nav#primary-nav ul li {
	display: inline; /* Aligns menu items horizontally. */
	margin-right: 20px; /* Spacing between menu items. */
}

nav#primary-nav ul li a {
	color: #ffffff; /* White color for navigation links for contrast against the gold background. */
}

/* Main Content Styles */
/* Styles for the main content area, using a light background for contrast. */
main {
	background-color: #f8f8f8; /* Light gray background for the main content area for a subtle contrast. */
	padding: 20px; /* Padding for spacing around the content. */
}

/* Contact Form Styles */
/* Styling for the contact form, ensuring it stands out with a different background. */
form.contact-form {
	background-color: #eaeaea; /* Slightly darker background for the form, making it stand out. */
	padding: 20px; /* Padding around the form elements. */
	border: 1px solid #d3d3d3; /* Border for definition. */
}

input, textarea {
	width: 100%; /* Full width for better usability. */
	padding: 10px; /* Comfortable padding inside the fields. */
	margin-bottom: 20px; /* Spacing between fields. */
	border: 1px solid #d3d3d3; /* Consistent border styling. */
}

input[type="submit"] {
	background-color: #31322c; /* Gold background for the submit button. */
	color: #ffffff; /* White text for contrast. */
	border: none; /* Removes default border. */
	padding: 10px 20px; /* Padding for a larger clickable area. */
	cursor: pointer; /* Cursor change to indicate it's clickable. */
}

input[type="submit"]:hover {
	background-color: #36385c; /* Crimson color for hover state, adding interactivity. */
}

/* Blog/Testimonials Sections Styles */
/* These sections have a white background for a clean look, with padding and border for definition. */
.blog-section, .testimonial-section {
	background-color: #ffffff; /* White background for these sections for clarity. */
	padding: 20px; /* Padding for spacing within the sections. */
	margin-bottom: 20px; /* Margin for spacing between sections. */
	border: 1px solid #d3d3d3; /* Subtle border for definition. */
}

/* Cookie Alert Styles */
/* Cookie alert styling to make it noticeable at the bottom of the page. */
#cookie-alert {
	background-color: #31322c; /* Gold background for brand consistency. */
	color: #ffffff; /* White text for readability. */
}

/* Footer Styles */
/* The footer is styled for a clean, centered look with links and copyright information. */
footer {
	text-align: center; /* Centers the content in the footer. */
	color: #ffffff; /* White color for navigation links for contrast against the gold background. */
	padding: 20px 0; /* Padding for spacing above and below the content. */
}

footer a {
    color: #ffffff; /* Change this to the desired color for your footer links */
}

footer a:hover {
    color: #dddddd; /* Change this to the desired hover color for your footer links */
}


/* Additional Styles */
/* Here you can add more styles as needed, such as for secondary navigation, special sections, or responsive design considerations. */

/* Responsive Design */
/* Ensures the site is mobile-friendly with adjustments to the navigation menu and other elements as needed. */
@media (max-width: 768px) {
	nav#primary-nav ul li {
    	display: block; /* Stacks the menu items vertically on smaller screens. */
    	margin-bottom: 10px; /* Adds space between stacked items. */
	}

	/* Additional responsive styles can be added here. */
}



/* Ensure unordered list items align left */
ul {
    list-style-position: inside; /* Keep list item markers inside the content flow */
    padding-left: 0; /* Remove default padding */
    text-align: left; /* Ensure text aligns to the left */
    margin: 0; /* Remove default margin */
}

/* Ensure list items within unordered lists align left */
ul li {
    text-align: left; /* Ensure list items align to the left */
}


/* Testimonial class for consistent styling */
.testimonial {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.testimonial blockquote {
    font-style: italic;
    color: #555;
}

.testimonial .author {
    margin-top: 20px;
    text-align: right;
    color: #333;
}

.testimonial .author strong {
    font-weight: bold;
}

.testimonial .author span {
    display: block;
    color: #666;
    font-style: italic;
}



/* styles for contact page */
/* Custom spacing adjustments */
.card {
    margin-bottom: 30px; /* Adjust the bottom margin for spacing between cards */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow for a tighter look */
    border-radius: 8px; /* Slightly rounded corners */
}

.card-body {
    padding: 20px; /* Control padding inside cards */
}

h2.card-title {
    font-size: 1.5em; /* Consistent title size */
    margin-bottom: 15px; /* Adjust spacing under titles */
}

h4.card-title {
    font-size: 1.25em; /* Consistent sub-title size */
    margin-bottom: 10px; /* Adjust spacing under sub-titles */
}

.container {
    max-width: 900px; /* Control the maximum width of the container */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add padding to the sides */
}

.text-center {
    text-align: center;
}

.mb-5 {
    margin-bottom: 30px !important; /* More space under the sections */
}

.mb-4 {
    margin-bottom: 20px !important; /* More space under the paragraphs */
}

/* header font uptdate */
/* Custom font settings for headers */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif; /* Use a standard font */
    font-weight: bold; /* Ensure boldness */
    color: #333; /* Adjust color */
    text-shadow: none; /* Remove any text-shadow */
}


/* sitemap */
.sitemap ul {
    list-style-type: none;
    padding-left: 20px;
}

.sitemap li {
    margin-bottom: 5px;
}

.sitemap a {
    text-decoration: none;
    color: #007bff;
}

.sitemap a:hover {
    text-decoration: underline;
}

/* Pain class for consistent styling */
.pain {
    margin: 10px auto; /* Center the element and reduce the margin */
    padding: 10px; /* Maintain reduced padding */
    border: 1px solid #ddd; /* Keep the border consistent */
    border-radius: 8px;
    background-color: #FAF3E0; /* Yellowish off-white background color */
    font-size: 0.9em; /* Slightly smaller text size */
    max-width: 80%; /* Limit the width to 80% of the container */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
}

.pain blockquote {
    font-style: italic;
    color: #555;
    margin: 0; /* Remove extra margin around blockquote */
    padding: 0; /* Remove extra padding around blockquote */
}

.pain .author {
    margin-top: 10px; /* Reduce space above the author text */
    text-align: right;
    color: #333;
}

.pain .author em {
    display: block;
    color: #666;
    font-style: italic;
    font-size: 0.9em; /* Ensure the author text is also slightly smaller */
}
.btn-branding {
    --bs-btn-color: #ffffff; /* Ensure the text stays white */
    --bs-btn-border-color: #0a58ca; /* Matching border color */
    --bs-btn-hover-color: #ffffff; /* Keep the text white on hover */
    --bs-btn-hover-bg: linear-gradient(145deg, #0a58ca, #0947a1); /* Slightly darker gradient on hover */
    --bs-btn-hover-border-color: #0947a1; /* Darker border on hover */
    --bs-btn-focus-shadow-rgb: 49, 132, 253; /* Adjust the focus shadow color */
    --bs-btn-active-color: #ffffff; /* Keep the text white when active */
    --bs-btn-active-bg: #0947a1; /* Darker blue for the active state */
    --bs-btn-active-border-color: #083785; /* Matching border color for the active state */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3); /* Deeper inset shadow for active state */
    --bs-btn-font-size: 1.35rem; /* Increase the font size slightly */
    --bs-btn-padding-y: 0.6rem; /* Increase vertical padding for a larger button */
    --bs-btn-padding-x: 1.2rem; /* Increase horizontal padding for a wider button */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.2); /* Outer shadow for 3D effect */
    border-radius: 0.5rem; /* Slightly rounded corners for a softer look */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for a pop effect */
}

.btn-branding:hover {
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.2); /* Stronger shadow on hover for more depth */
    color: #ffffff !important; /* Ensure text remains white on hover */
    background-color: #0a58ca !important; /* Ensure background color does not turn white on hover */
    border-color: #0947a1 !important; /* Ensure border color does not turn white on hover */
}