/* ------------------------------
   Base & Typography
------------------------------ */
body {
  background-color: #132033; /* Dark navy background */
  color: #e0e0e0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* Apply dark background to all sections/containers */
section,
.container,
.main-section,
.page-content,
.wrapper,
.custom-content,
.content-area {
  background-color: #132033;
}

/* ------------------------------
   Headings with Attractive Colors
------------------------------ */
h1 {
    font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

h2 {
  font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

h3 {
   font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

h4 {
   font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

h5 {
    font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

h6 {
    font-size: 2.5rem;
  background: linear-gradient(90deg, #42e695, #3bb2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

/* ------------------------------
   Utility Classes
------------------------------ */
.maincolor {
  color: #d93947;
}

.logo {
  width: 180px;
}

.mainbg {
  background-color: #132033 !important; /* Overriding with dark background */
}

.icon-hover:hover {
  opacity: 0.8;
  transform: scale(1.1);
  transition: 0.3s ease;
}

.object-fit-cover {
  object-fit: cover;
}

.h-280 {
  height: 280px !important;
}

.img-fixed {
  width: 100%;
  overflow: hidden;
}

.text-justify {
  text-align: justify;
}

.icons {
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
}

/* ------------------------------
   Service List Styles
------------------------------ */
.service-list li a {
  display: block;
  background-color: #132033;
  color: white;
  padding: 10px 15px;
  margin-bottom: 8px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.service-list li a:hover {
  background-color: #1b1d1f !important;
  text-decoration: none;
}

/* ------------------------------
   Custom Table Styles (dark themed)
------------------------------ */
.custom-table thead {
  background-color: #1b1d1f !important;
  color: #ffffff;
}

.custom-table tbody tr:nth-of-type(odd),
.custom-table tbody tr:nth-of-type(even) {
  background-color: #132033 !important;
  color: #ffffff !important;
}

.custom-table tbody tr:hover {
  background-color: #1b1d1f !important;
  color: #ffffff !important;
}

/* ------------------------------
   Star Rating
------------------------------ */
.star-rating {
  color: #ffc107 !important;
  font-size: 1.2rem;
}

/* ------------------------------
   Image Hover Info
------------------------------ */
.image-wrapper {
  position: relative;
  overflow: hidden;
}

.hover-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  text-align: center;
}

.image-wrapper:hover .hover-info {
  opacity: 1;
}

.hover-info a {
  color: #fff;
  text-decoration: none;
}

.hover-info a:hover {
  text-decoration: underline;
}

/* ------------------------------
   Accordion Styles
------------------------------ */
.accordion-button {
  background-color: #d93947;
  color: #ffffff;
}

.accordion-button:not(.collapsed) {
  background-color: #d93947;
  color: #ffffff;
  box-shadow: none;
}

.accordion-button:hover {
  background-color: #d93947;
  color: #ffffff;
}

.accordion-button:focus {
  box-shadow: none;
}

/* ------------------------------
   Dark Background Search Box
------------------------------ */
.search-box {
  background-color: #132033; /* dark navy */
  border-radius: 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 600px;
  margin: auto;
  padding: 0;
  border: 1px solid #3a4a66; /* subtle border */
}

.search-input {
  background-color: transparent;
  border: none;
  padding: 12px 16px;
  flex: 1;
  outline: none;
  font-size: 16px;
  color: #e0e0e0; /* light text */
}

.search-input::placeholder {
  color: #8a9bb8; /* lighter placeholder text */
}

/* ------------------------------
   Links (Dark Theme Friendly)
------------------------------ */
a {
  color: #82b1ff;
  text-decoration: none;
}

a:hover {
  color: #bb86fc;
  text-decoration: underline;
}

/* ------------------------------
   Optional: Dark Box for content contrast
------------------------------ */
.dark-box {
  background-color: #1a2b3d; /* Slightly lighter than page background */
  color: #e0e0e0;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ------------------------------
   White Table with Black Text
------------------------------ */
.white-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #000000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.white-table thead {
  background-color: #f0f0f0;
  color: #000000;
  text-align: left;
}

.white-table th,
.white-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

.white-table tbody tr:hover {
  background-color: #f9f9f9;
}

/* ------------------------------
   Responsive Design
------------------------------ */
@media only screen and (max-width: 600px) {
  .logo {
    width: 120px;
  }

  .h-280 {
    height: 370px !important;
  }
}