@media (prefers-color-scheme: dark) {
	.portfolio-caption .card-bottom,
	.portfolio-item .card-bottom {
		background: #292a2d !important;
	}
}
/* Shadow for navbar only when scrolled */
.navbar.scrolled {
	box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
}

@media (prefers-color-scheme: dark) {
	.portfolio-item,
	.card,
	.portfolio-caption {
		background: #303334 !important;
		box-shadow: 0 2px 12px rgba(0,0,0,0.32) !important;
	}
}
@media (prefers-color-scheme: dark) {
	.card,
	.portfolio-item,
	.portfolio-caption,
	.modal-content,
	.bg-light-gray,
	.portfolio-modal {
		background: #232526 !important;
		color: #e0e0e0 !important;
		box-shadow: 0 2px 12px rgba(0,0,0,0.5);
	}
}
@media (prefers-color-scheme: dark) {
	.close-modal .lr,
	.close-modal .rl,
	.close-modal span,
	.close-modal i,
	.close-modal {
		color: #fff !important;
		border-color: #fff !important;
		fill: #fff !important;
}

/* Ensure close modal icon lines are white in dark mode */
.portfolio-modal .close-modal .lr,
.portfolio-modal .close-modal .lr .rl {
    background-color: #fff !important;
	}
}
/* Auto dark mode based on user system preference */
@media (prefers-color-scheme: dark) {
	body,
	.navbar,
	.modal-content,
	.bg-light-gray,
	.portfolio-modal,
	.card,
	.portfolio-item,
	.portfolio-caption,
	.modal-body,
	.cropped-img-container,
	.img-shadow,
	.gif-shadow {
		background: #202124 !important;
		color: #e0e0e0 !important;
		box-shadow: none !important;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #fff !important;
	}

	a {
		color: #90caf9;
	}

	.btn,
	.btn-primary {
		background: #333;
		color: #fff;
		border-color: #444;
	}

	.section-heading,
	.section-subheading {
		color: #e0e0e0 !important;
	}

	.copyright {
		color: #aaa;
	}
}
/* Small gap for light spacing between inline elements or paragraphs */
.small-gap {
	display: block;
	height: 1em;
}

/* Medium gap for moderate spacing between inline elements or paragraphs */
.medium-gap {
	display: block;
	height: 1.25em;
}

.img-crop-max-height {
	/* Make GIFs and large images scale responsively to their column/container */
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain; /* preserve full image without cropping */
	display: block;
	margin: 0 auto;
	border-radius: 12px; /* Optional: rounded corners */
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* Cropping container for msgr-Rail_Nav_States.gif */
.cropped-img-container {
	/* Container for cropped images; keep flexible and responsive */
	width: 100%;
	max-width: 800px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 12px; /* Optional: rounded corners */
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.cropped-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* New class to align image to the left inside the cropping container */
.align-left {
	display: block;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
	object-position: left;
}
/* Utility classes for horizontal crop position */
.align-crop-20 { object-position: 20% !important; }
.align-crop-30 { object-position: 30% !important; }
.align-crop-40 { object-position: 40% !important; }
.align-crop-50 { object-position: 50% !important; } /* Center */
h1 {
	line-height: 1.3em;
}
h1 {
    text-transform: none;
	font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: xx-large;
}

h4 {
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: larger;
}

.service-heading {
	text-transform: uppercase;
}

.team-member h4 {
	text-transform: uppercase;
	padding-bottom: 20px;
}

.portfolio-modal .modal-content h2 {
	text-transform: uppercase;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

#portfolio .portfolio-item .portfolio-caption h4 {
	text-transform: uppercase;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

#portfolio .portfolio-item .portfolio-caption p {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.0425em;
}

.text-muted {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.0425em;
	margin: 0px 20px 40px 20px;
}

.portfolio-modal .modal-content p.item-intro {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 16px;
	font-weight: 300;
}

.portfolio-modal .modal-content p {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.0425em;
	margin: 0 0 40px;
}

a {
	color: #00B8B8;
}

a:hover,
a:focus,
a:active,
a.active {
	color: #00B8B8;
}

.list-inline li {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.0425em;
}

section h3.section-subheading {
	font-family: "Open Sans", "san-serif";
	font-style: normal;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.0625em;
	line-height: 1.5;
}

.navbar-brand {
	background-image: url(../img/logos/ruth_logo_sm.png);
	background-repeat: no-repeat;
	background-position: 30px;
    background-size: 75%;
}

.navbar-linktop {
	position: relative;
	top: 0px;
	left: 15px;
	width: 160px;
    background-color: transparent;
}

header .intro-text .intro-heading {
    margin-bottom: 40px;
    text-transform: uppercase;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 200;
    line-height: 28px;
}

header .intro-text .intro-lead-in {
	margin-bottom: 0px;
}


.modal-content {
  overflow-y: auto; 
  height: 100%;
}


.btn,
.btn-primary {
	font-family: "Raleway", "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
	letter-spacing: 0.0425em;
	background: #00B8B8;
	border-color: #00B8B8;
	color: #fff;
	transition: background 0.2s, border-color 0.2s;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background: #009090;
	border-color: #009090;
	color: #fff;
}

.bg-dark-gray {
	background-color: #C3C3C3;
	padding: 30px 20px 5px 20px;
	margin-bottom: 20px;
}


p .center {
	text-align: center;
}

p .large {
	font-size: 24px;
}


img .img-centered {
	display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}

.img-shadow {
  border: 1px solid #E2E2E2;
  box-shadow: 4px 4px 10px #EEEEEE;
}

.gif-shadow {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    border: 1px solid #e0e0e0;
}

/* Match paragraph typography for lists inside column content */
.col-lg-8 ul {
	text-align: left;
	list-style-position: outside;
	margin-top: 0.5em;
	padding-left: 1.25em;
}

.col-lg-8 ul li {
	text-align: left;
	font-family: "Raleway", "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.60em;
	margin-bottom: 0.6em;
	color: inherit; /* use same color as surrounding text */
}