/* Header/navbar custom styles */
.site-header .navbar {
	min-height: 64px;
}

.site-header .navbar-brand img {
	height: 60px;
	width: auto;
}

.site-header .navbar .nav-link {
	padding: .5rem .875rem;
	font-weight: 500;
	color: #1f2937;
}

.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus {
	color: #8B5E3C;
}

.site-header .navbar .nav-link.active {
	color: #8B5E3C;
}

.offcanvas .navbar-nav .nav-link {
	padding: .625rem 0;
	font-size: 1.05rem;
}

.offcanvas .dropdown-menu {
	position: static;
	float: none;
	border: 0;
	box-shadow: none;
}

/* Optional subtle shadow */
.site-header .navbar.shadow-sm {
	box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
.text-justify {
  text-align: justify;
}

.no-active .nav-link.active {
  color: inherit !important;
}

.no-active .nav-link:hover {
  color: #D8A98A !important;
}


.service-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* keeps image square */
  object-fit: cover;
  transition: all 0.4s ease;
  border-radius: 0;
}

.dome{
	 border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
	overflow: hidden;
/* 	box-shadow: 0 -4px 0px rgba(255, 0, 0,0.85); */
/* 	margin-bottom: 1rem; */
}
.dome-outer{
	border-top-left-radius: 50% 15%;
  border-top-right-radius: 50% 15%;
	overflow: hidden;
	background-color:#8B5E3C;
	padding-top:20px;
	transition: all 0.4s ease;
}
.dome-outer:hover{
	background-color:#F5E0D3;
	
}

.service-card ul li {
  margin-bottom: 8px;
	font-size: 0.9rem;
}
.service-img:hover {
	transform: scale(1.1);
/*   border-top-left-radius: 50%; */
/*   border-top-right-radius: 50%; */
}

.service-card h5 {
  min-height: 60px;
	align-content: center;
}


.btn-primary {
  background-color: #8B5E3C;
  border-color: #8B5E3C;
}

.btn-primary:hover {
  background-color: #D8A98A;
  border-color: #D8A98A;
}
.btn-primary:active,.btn-primary:focus-visible  {
  background-color: #D8A98A !important;
  border-color: #D8A98A !important;
}

.hero {
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	
}


.hero .hero-image.placeholder {
	height: 320px;
	background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #eef2f7 10px, #eef2f7 20px);
	border: 1px dashed #cbd5e1;
	box-shadow: inset 0 0 0 9999px rgba(255,255,255,.25);
}

@media (min-width: 992px) {
	.hero .hero-image.placeholder {
		height: 440px;
	}
}


@media (min-width: 992px) {
  .site-header .custom-logo {
    height: 70px;
  }
}