.navbar-shrink {
	box-shadow: 0 0.5rem 1rem #151b20 !important;
}

.splash-text {

	padding-top:50px;
}
/* make the header a positioning context */
header.masthead {
  position: relative;
  overflow: hidden;

  /* your existing spacing */
  padding-top:    10rem;
  padding-bottom: calc(10rem - 4.5rem);
}

/* common rules for both image layers */
header.masthead::before,
header.masthead::after {
  content: "";
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  background-position: center;
  background-repeat:   no-repeat;
  background-attachment: scroll;
  background-size:     cover;
  z-index: -1;           /* behind your text */
}

/* bottom layer = “before” image */
header.masthead::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(92, 77, 66, 0)  0%,
      rgba(92, 77, 66, 0)100%
    ),
    url("../assets/img/bg-masthead_1.jpg");
  z-index: -2;           /* underneath the fading layer */
}

/* top layer = “after” image, initially transparent */
header.masthead::after {
  background-image:
    linear-gradient(
      to bottom,
      rgba(92, 77, 66, 0)  0%,
      rgba(92, 77, 66, 0)100%
    ),
    url("../assets/img/bg-masthead_2.jpg");
  opacity: 0;
  animation: mastheadFade 2s ease-in-out 3s forwards;
}

/* your existing typography & responsive rules */
header.masthead h1,
header.masthead .h1 {
  font-size: 2.25rem;
}
.fade-in-2 {
  opacity: 0;
  /* name duration timing-function delay fill-mode */
  animation: mastheadFade 2s ease-in-out 2s forwards;
}
.fade-in-3 {
  opacity: 0;
  /* name duration timing-function delay fill-mode */
  animation: mastheadFade 2s ease-in-out 3s forwards;
}
.fade-in-4 {
  opacity: 0;
  /* name duration timing-function delay fill-mode */
  animation: mastheadFade 2s ease-in-out 4s forwards;
}
.fade-in-5 {
  opacity: 0;
  /* name duration timing-function delay fill-mode */
  animation: mastheadFade 2s ease-in-out 5s forwards;
}

@media (min-width: 992px) {
  header.masthead {
    height:     100vh;
    min-height: 40rem;
    padding-top:    4.5rem;
    padding-bottom: 0;
  }
  header.masthead p {
    font-size: 1.15rem;
  }
  header.masthead h1,
  header.masthead .h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  header.masthead h1,
  header.masthead .h1 {
    font-size: 3.5rem;
  }
}

/* keyframe: wait 2s, then fade in over 3s */
@keyframes mastheadFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.meFace{
	display:flex;
	width:40%;
	float:left;
	margin-right: 20px;
	border: solid 2px #151b20;
	border-radius:8px;
}
p.about {
	text-align:left;
}
.service-header-wrapper i {
	color: #224b64 !important;
}
.service-wrapper i {
	color: #224b64 !important;
}
img.ls_icon {
  height:35px;
  width:35px;
  margin-right:10px;
  margin-top:10px;
  float:left;
}


#services .container-fluid, #services .container-sm, #services .container-md, #services .container-lg, #services .container-xl, #services .container-xxl {
  max-width: 1920px;
}
#services .container-fluid , #services .container-sm , #services .container-md , #services .container-lg , #services .container-xl, #services .container-xxl  {
  position: relative;
  display: block;
}
#services .container-fluid , #services .container-sm , #services .container-md , #services .container-lg , #services .container-xl ., #services .container-xxl  {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(244, 98, 58, 0.9);
  transition: opacity 0.25s ease;
  text-align: center;
}
#services .container-fluid .service-box .service-box-caption .project-category, #services .container-sm .project-category, #services .container-md .project-category,
 #services .container-lg .project-category, #services .container-xl .project-category, #services .container-xxl  .project-category {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#services .container-fluid  .project-name, #services .container-sm .project-name, #services .container-md  .project-name, #services .container-lg  .project-name, #services .container-xl .service-box .service-box-caption .project-name, #services .container-xxl s .project-name {
  font-size: 1.2rem;
}
#services .container-fluid , #services .container-sm , #services .container-md , #services .container-lg , #service .container-xl , #services .container-xxl  {
  opacity: 1;

}

button.service-wrapper {
	border: solid 2px #fff !important;
	background-color: #fff !important;
	border-radius: 8px !important;
}
button.service-wrapper:hover {
	border: solid 2px #224b64 !important;
	background-color: #eee !important;
	border-radius: 8px !important;
}

.carousel-content {
	height:600px !important;	
	min-height:600px !important;
}
.service-header {
	padding:20px;
}
.service-header-wrapper {
	padding:25px;
  display: flex; /* Use flexbox to center the modal content */
  align-items: center; /* Center content vertically */
}
.service-header-text {
	font-size:28px;
	color:#151b20;
	font-family: "Merriweather Sans";
	padding-left:20px;
	margin-top:auto;
	margin-bottom:auto;
}
.service-image {
	background-color: #fff !important;	
}
.service-text {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding:25px;
  display: flex; /* Use flexbox to center the modal content */
  align-items: center; /* Center content vertically */
}

/* Styles for the modal to fill 100% screen and have semi-transparent background */
.modal-dialog {
    margin: 0;
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh; /* Constrain modal dialog to viewport height */
    height: 100vh; /* Ensure it takes full height of the viewport */
    display: flex;
    align-items: center; /* Center content vertically, or use flex-start to align top */
    justify-content: center; /* Center content horizontally */
    padding: 1rem; /* Add padding to prevent modal content from touching screen edges */
}

.modal-content {
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    width: 90%; /* Adjust content width as desired within the full screen */
    max-width: 900px; /* Keep max-width for content to prevent stretching too wide */
    height: auto; /* Allow content height to adjust based on its children */
    max-height: calc(100vh - 2rem); /* Dynamic max-height, accounting for modal-dialog padding */
    overflow-y: auto; /* Enable vertical scrolling for modal content if it overflows */
}

/* Semi-transparent modal backdrop */
.modal-backdrop.show {
    opacity: 0.7; /* Adjust as needed for desired transparency (0.5 is Bootstrap default) */
    background-color: rgba(0, 0, 0, 0.7); /* Darker black with 70% opacity */
}

.modal-header {
    border-bottom: none; /* Clean up default border */
    padding-bottom: 0;
}

.modal-title {
    font-weight: 700; /* Bold title */
    color: #343a40;
}

.modal-body {
    padding-top: 0;
    padding-bottom: 20px;
}

.carousel-item img {
    object-fit: cover; /* Ensure images cover the area */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 600px; /* Limit max height for better presentation */
    display: block; /* Remove extra space below image */
}

/* Custom carousel controls for better visibility */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Remove default Bootstrap icons */
    width: 30px;
    height: 30px;
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    display: block;
}

.carousel-control-prev-icon::before {
    content: '‹'; /* Custom arrow character */
    font-size: 3rem;
    color: #224b64; /* Blue arrows */
    line-height: 1;
    display: block;
}
.carousel-control-next-icon::before {
    content: '›'; /* Custom arrow character */
    font-size: 3rem;
    color: #224b64; /* Blue arrows */
    line-height: 1;
    display: block;
}

.carousel-control-prev:hover .carousel-control-prev-icon::before {
    color: #c48324; /* Change to red on hover */
}        

.carousel-control-next:hover .carousel-control-next-icon::before {
    color: #c48324; /* Change to red on hover */
}  
.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Smaller clickable area */
/*    background: rgba(255, 255, 255, 0.7); 
    border-radius: 8px; */
    opacity: 1; /* Always visible */
}

.carousel-control-prev:hover, .carousel-control-next:hover {
/*    background: rgba(255, 255, 255, 0.9); */
	
}

.carousel-indicators [data-bs-target] {
/*    background-color: #224b64; /* Blue indicators */*/
}


.sd-btn--action {
  background-color:#c48324 !important;
}
.sd-btn {
  color:#173243 !important;
}
.sv-string-viewer {
  color:#151b20 !important;
}

.sd-container-modern__title {
box-shadow: 0px 2px 0px #151b20 !important;
}