#features .grid-titles {
  border-bottom: 1px solid #EDEEF1;
  padding: 0px 80px;
}
.pro-manager-icon{
  padding-right: 6rem;
}
@media screen and (max-width: 1400px) {
  #features .grid-titles {
    padding: 0px 35px;
  }
  #features .pro-manager-icon{
    padding-right: 4rem;
  }
}
@media screen and (max-width: 1200px) {
  #features .grid-titles {
    padding: 0px;
  }
  #features .pro-manager-icon{
    padding-right: 2rem;
  }
}
@media screen and (max-width: 992px) {
  #features .pro-manager-icon{
    padding-right: 3rem;
  }
}
@media screen and (max-width: 576px) {
  #features .pro-manager-icon{
    padding-right: 1rem;
  }
}
#features .title-bar{
  position: sticky;
  top: 68px;
  width: 100%;
  z-index: 9;
  background: #F7F9FE;
}
/* Set up the pill container to align the buttons side by side */
.nav-pills {
  display: flex; /* Align the pills horizontally */
  position: relative;
  border-radius: 50px; /* Keep the rounded pill shape */
  width: fit-content; /* Make the width auto to fit the tabs */
  background-color: transparent; /* Background for the switch container */
  padding: 0;
  border: 1px solid #DEE2E6;
}

/* Sliding background indicator */
.nav-pills::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  /* height: calc(100% - 8px); */
  background-color: #0D0D0D;
  border-radius: 50px;
  transition: all 0.3s ease;
  z-index: 0;
  /* width: calc(50% - 4px); */
}

/* When rental tab is active, slide to left */
.nav-pills:has(.nav-link.active#pills-rental-tab)::before {
  transform: translateX(0);
}

/* When cruise tab is active, slide to right */
.nav-pills:has(.nav-link.active#pills-cruise-tab)::before {
  transform: translateX(100%);
}
  
/* Custom styles for the nav pills */
.nav-pills .nav-link {
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: bold;
  background-color: transparent; /* Make background transparent */
  color: #0D0D0D;
  transition: all 0.3s ease;
  z-index: 1; /* Make sure the links are above the slider */
  position: relative;
  border: none; /* Remove border since container has it */
  flex: 1; /* Make tabs equal width */
  text-align: center;
}

/* Active state styles */
.nav-pills .nav-link.active {
  background-color: #0D0D0D;
  color: #DEE2E6;
  z-index: 2; /* Bring active tab in front */
  border: none;
}

/* Hover effect */
/* .nav-pills .nav-link:hover:not(.active) {
  background-color: rgba(13, 13, 13, 0.1);
  color: #0D0D0D;
} */

/* Remove redundant styles */
.nav-pills .nav-link.active#pills-rental-tab {
  color: #DEE2E6;
}

.nav-pills .nav-link.active#pills-cruise-tab {
  color: #DEE2E6;
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
  .nav-pills .nav-link.active {
      background-color: #0D0D0D;
      color: #DEE2E6;
  }
  
  .nav-pills .nav-link:not(.active) {
      background-color: transparent;
      color: #0D0D0D;
  }
}

.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: none;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M1 20.1769H0V19.1769V5.1769V4.1769H2V5.1769V16.7644L17.7938 0.970654L18.5 0.264404L19.9125 1.6769L19.2062 2.38315L3.4125 18.1769H15H16V20.1769H15H1Z" fill="%230075FF"/></svg>');
  --bs-accordion-btn-active-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M1 20.1769H0V19.1769V5.1769V4.1769H2V5.1769V16.7644L17.7938 0.970654L18.5 0.264404L19.9125 1.6769L19.2062 2.38315L3.4125 18.1769H15H16V20.1769H15H1Z" fill="%230075FF"/></svg>');
  --bs-accordion-btn-focus-box-shadow: 0;
  --bs-accordion-active-color: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-icon-transform: rotate(-45deg);
}

.features-row{
  border-bottom: 1px solid #EDEEF1;
}