/* Container holds both image items side-by-side */
.image-container {
  display: flex;
  flex-direction: row; 
  gap: 16px;           /* Adjust space between the images */
  width: 100%;
  box-sizing: border-box;
}

/* Wrappers ensure both columns scale completely equally */
.image-wrapper {
  flex: 1;             /* Forces both sides to take up exact 50/50 width */
}

/* Forces the images to be responsive and match heights if they differ */
.image-wrapper img {
  width: 100%;
  height: auto;        /* Maintains aspect ratio */
  display: block;
  object-fit: cover;   /* Prevents distortion if image aspect ratios differ slightly */
}

/* Mobile Breakpoint: Stacks the images on screens 768px wide or smaller */
@media (max-width: 768px) {
  .image-container {
    flex-direction: column; /* Switches alignment from horizontal to vertical */
  }
}
/* Custom Responsive Header Layout Overrides */
.header {
	height: auto !important; 
	min-height: 80px !important; /* Shorter minimum height to collapse excess white space */
	background-image: none !important; 
	background-color: #ffffff !important;
	padding: 5px 0 0 0 !important; /* Strips bottom padding completely so images sit flush */
	margin-bottom: 30px;
	border-bottom: 5px solid;
	border-image-source: linear-gradient(45deg, rgb(211,229,244), rgb(1,0,102));
	border-image-slice: 1;
}

/* Switches layout mechanics to snap every item to the exact bottom floor boundary */
.header-inner {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-end !important; /* Pulls logo, text, and phone strings down to line up at the bottom */
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 15px; 
}

/* Bottom align parameters for the left logo brand link column */
.header .brand {
	display: flex !important;
	align-items: flex-end !important; /* Baseline aligns logo file */
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	min-width: 180px !important; 
}

.header-logo {
	height: 85px !important; /* Scaled down slightly to match a shorter banner look */
	width: auto;
	display: block !important;
}

/* Middle title text bottom alignment overrides */
.header-title-middle {
	flex: 2 !important; 
	padding: 0 20px 8px 20px !important; /* 8px bottom padding stops text resting completely on the blue border */
	float: none !important;
	display: flex !important;
	align-items: flex-end !important; 
}

.header-main-title {
	font-family: Arial, sans-serif;
	font-size: 28px !important; 
	color: #3f2377 !important;
	font-weight: bold !important;
	margin: 0 !important;
	line-height: 1.1 !important;
	white-space: normal !important; 
	text-align: center;
}

/* Right layout column grouping your graphic flush alongside your phone digits container */
.header-contact-right {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important; /* Forces phone digits and treatment lady layout down flat */
	gap: 15px !important; 
	float: none !important;
	min-width: 280px !important; 
}

/* Controls the scale of the shoulder treatment graphic */
.header-shoulder-lady {
	height: 85px !important;  /* Matches left logo height exactly so both hit the top/bottom baselines cleanly */
	width: auto !important;
	display: block !important;
	vertical-align: bottom !important; /* Eliminates browser rendering whitespace gaps below image box tags */
	padding-bottom: 10px;
}

/* Phone link container bottom buffer layout spacing */
.phone-container {
	padding-bottom: 8px; /* Keeps the clickable link text visually balanced on line with the middle heading */
}

.header-phone-link {
	font-family: Arial, sans-serif;
	font-size: 22px !important; 
	font-weight: bold !important;
	color: #010066 !important;
	text-decoration: none !important;
	white-space: nowrap !important; 
}

/* Responsive Tablet & Mobile Viewports */
@media (max-width: 979px) {
	.header-inner {
		flex-direction: column !important; 
		align-items: center !important; /* Re-centers layout into a clean stack structure on narrow mobile screens */
		gap: 15px !important;
		text-align: center !important;
		padding: 10px !important;
	}
	
	.header-shoulder-lady {
		display: none !important; 
	}
	
	.header-title-middle, .phone-container {
		padding: 0 !important;
		width: 100%;
	}
	
	.header-main-title {
		font-size: 22px !important;
	}
}
@media (max-width: 767px) {
    /* 1. Force the row wrapper into a Flexbox column */
    div.row-fluid:has(> #content) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Break open the sidebar wrapper constraints so its contents can move freely */
    #sidebar.span3, 
    #sidebar .sidebar-nav {
        display: contents !important; 
    }

    /* 3. Assign sequential order numbers to each layout block */
    
    /* Position 1: The navigation menu goes to the top */
    #sidebar .moduletable._menu {
        order: 1 !important;
        width: 100% !important;
        position: static !important; /* Clears any absolute overlap */
    }

    /* Position 2: The main content block sits directly in the middle */
    main#content.span9 {
        order: 2 !important;
        width: 100% !important;
        margin-top: 0 !important; /* Clears the artificial white space gap */
    }

    /* Position 3: All custom modules (maps/images) flow seamlessly to the bottom */
    #sidebar .mod-custom {
        order: 3 !important;
        width: 100% !important;
    }
}
.mod-tel-link:hover{color:#1d85fc !important;text-decoration:none !important}
.header-phone-link:hover{color:#1d85fc !important}