.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* full viewport height; or change as needed */
  background-image: url('assets/interiorst2.jpg');
  background-size: cover;         /* makes sure the image covers the entire div */  
  background-position: center;    /* centers the image */  
  background-repeat: no-repeat;   /* no repeat */  
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* semi-transparent overlay for contrast */
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2; /* put text and content above overlay */
}

.hero-section .hero-title {
  font-size: 3rem; /* adjust size as needed */
  line-height: 1.2;
}

/* Button styling (you already have btn-dark, but you can tweak) */
.hero-section .our-works-btn {
  margin-top: 1rem;
}

.service-image-wrapper {
  width: 100%;
  height: 150px; /* Set this to whatever fixed height you want */
  overflow: hidden;
}

.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

          .card-img-top {
  width: 100%;
  height: 200px;          /* Adjust this as needed */
  object-fit: cover;
}


body {
  /* Set a dark wood texture as background */
  background-image: url('path/to/dark-wood-texture.jpg');
  
  /* Repeat the texture to cover the whole area */
  background-repeat: repeat;
  
  /* Make sure it covers / looks good: you can adjust to cover or auto */
  background-size: auto; /* or: background-size: cover; / background-size: 200px 200px; */
  
  /* Positioning the image */
  background-position: center center;

  /* Optionally: fix the background so it doesn’t scroll */
  background-attachment: fixed;

  /* Fallback background colour (in case image doesn't load) */
  background-color: #2c1a0b;  /* a dark brownish colour */
  
  /* Text colour should contrast well */
  color: #f0e6da; /* light-ish text on dark background */
}


.hero-section .overlay {
  /* Keep your overlay, maybe darken more or add transparency */
  background: rgba(0, 0, 0, 0.5);
}


    /* ========== Dark Navbar Custom CSS ========== */

/* Make the navbar background dark */
.navbar {
  background-color: #1a1a1a; /* very dark grey / near black */
  border-bottom: 1px solid #333; /* subtle border */
}

/* Navbar brand (your logo text) */
.navbar .navbar-brand .logo-text {
  color: #ffffff; /* white text */
  font-weight: bold;
  font-size: 1.5rem;
}

/* Navbar links */
.navbar .nav-link {
  color: #cccccc; /* light grey for links */
  transition: color 0.3s;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff; /* white on hover */
}

/* Active nav-link (the current page) */
.navbar .nav-link.active {
  color: #ffffff;
  font-weight: 500;
}

/* Dropdown links */
.navbar .dropdown-menu {
  background-color: #2a2a2a; /* darker dropdown background */
}

.navbar .dropdown-item {
  color: #cccccc;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: #3a3a3a;
  color: #ffffff;
}

/* Toggler (hamburger) for mobile */
.navbar .navbar-toggler {
  border-color: #444;
}

.navbar .navbar-toggler-icon {
  /* override default icon background to make it visible on dark */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Collapsed (mobile) menu background */
.navbar-collapse {
  background-color: #1a1a1a;
  padding: 1rem;
}

/* Optional: increase contrast of container padding */
.container-fluid.mx-5 {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* If you want links to have a border or underline on hover */
.navbar .nav-link:hover {
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .navbar .nav-link {
    padding: 0.5rem 1rem;
  }
}


/* Target the h5 with class card-title */
.card-title {
  font-family: 'Arial', sans-serif;   /* change font */
  font-size: 1.5rem;                   /* size of the title */
  color: #2c1a0b;                       /* dark brown color (or anything) */
  font-weight: 600;                     /* semi-bold */
  text-transform: uppercase;            /* uppercase text */
  letter-spacing: 1px;                  /* space between letters */
  margin-bottom: 0.75rem;               /* spacing below the title */
  line-height: 1.2;                      /* line height control */
}

/* On hover (if you want hover effect) */
.card-title:hover {
  color: #007bff;                     /* change color when hovered */
  text-decoration: underline;         /* underline on hover */
}

.btn.btn-dark {
  background-color: white !important;
  color: black !important;        /* Choose a readable text color */
  border-color: white !important;
}

.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:active {
  background-color: #f8f9fa !important;  /* slightly off-white for hover */
  border-color: white !important;
  color: black !important;
}