body {
  background: #0e403a;
}
.custom-select-wrapper {
  position: relative; /* Position relative for absolute positioning of the icon */
  display: inline-block; /* Aligns the icon and select in a line */
}
.custom-select {
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
  border-radius: 5px; /* Rounded corners */
  backdrop-filter: blur(5px); /* Blurry background */
  color: black; /* Text color */
  padding: 5px 40px 10px 30px; /* Adjust padding for better appearance, space for icon */
  appearance: none; /* Remove default styling */
  -webkit-appearance: none; /* Remove default styling for Safari */
  -moz-appearance: none; /* Remove default styling for Firefox */
  min-width: 150px; /* Set a minimum width */
  width: auto; /* Allow width to adjust based on content */
  white-space: nowrap; /* Prevent text from wrapping */
}
.custom-select:focus {
  outline: none; /* Remove outline on focus */
}
.custom-select-wrapper i {
  position: absolute; /* Position the icon absolutely */
  left: 10px; /* Space from the left */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for vertical centering */
  color: black; /* Icon color */
  pointer-events: none;
  z-index: 999;
}
.project-background {
  background: url("images/about_bg.png") no-repeat center center / cover;
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.overlay-content {
  /* background: #0e403a; */
  padding: 0 30px 30px;
  width: 100%;
  display: flex;
  gap: 20px;
}

.tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 30%;
  padding: 20px 0;
}

.tab-link {
  border: none;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  background: #0e403a;
  color: #fff;
  border: 1px solid #fff;
  font-size: 20px;
}

.tab-link.active {
  background: #f0f0f0;
  color: #0e403a;
}

.tab-content-overlay {
  color: #fff;
  width: 70%;
  height: 500px;
  padding: 20px;
}

.tab-content-overlay p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}

strong {
  text-transform: uppercase;
}
.tabs-horizontal {
  display: flex;
  flex-wrap: nowrap; /* prevent wrapping to next line */
  overflow-x: auto; /* enable horizontal scroll on mobile */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  gap: 10px; /* optional spacing between tabs */
}

.tabs-horizontal::-webkit-scrollbar {
  display: none; /* hide scrollbar for cleaner look */
}
/* Default: show vertical, hide horizontal */
.tabs-horizontal {
  display: none;
}

.tabs-vertical {
  display: flex;
}

/* For mobile screens (adjust breakpoint as needed) */
@media (max-width: 991px) {
  .whom .col-4 {
    max-width: 100%;
    padding-left: 30px;
  }
  .project-style-2 {
    padding-top: 0px!important;
  }

  .overlay-content {
    flex-direction: column;
    padding-top: 10px;
  }

  .tab-content-overlay {
    width: 100%;
    overflow-y: scroll;
    height: 90vh;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .tab-content-overlay::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .tabs-horizontal {
    display: flex; /* show horizontal tabs */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .tabs-vertical {
    display: none; /* hide vertical tabs */
  }

  .tabs-horizontal .tab-link {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid white;
  }
}

@media (max-width: 768px) {
  .whom {
    flex-direction: column;
  }
}