/* Root Variables */
:root {
  --themeprimaryclr: #4fc9da;
  --themesecondaryclr: #696969;
  --darkclr: #000000;
  --plainclr: #fff;
  --lightbg: #fafafa;
  --themehoverclr: #4fc9da;
  --transition-speed: 0.3s;
}

/* Card Styling */
.card {
  width: 100%;
  max-width: 1200px;
  background-color: var(--lightbg);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Vertical Tabs Container */
.nav-pills {
  display: flex;
  flex-direction: column;
  width: 200px;
  background-color: var(--darkclr);
  border-right: none;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}
.nav-pills .nav-link {
  padding: 15px;
  text-align: center;
  background-color: var(--darkclr);
  color: var(--plainclr);
  border-radius: 0px !important;
  cursor: pointer;
  transition: background-color var(--transition-speed);
  border-bottom: 1px solid var(--themesecondaryclr);
  position: relative;
}
.nav-pills .nav-link:hover {
  background-color: var(--themehoverclr);
  color: var(--plainclr);
}

/* Tab Content */
.tab-content {
  flex-grow: 1;
  padding: 20px;
  background-color: var(--lightbg);
  border-left: 2px solid var(--themeprimaryclr);
  border-radius: 0 8px 8px 0;
}
.tab-content .tab-pane {
  display: none;
}
.tab-content .tab-pane.show {
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-pills {
    flex-direction: row;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--themeprimaryclr);
  }
  .nav-pills .nav-link:last-child {
    border-right: none;
  }
  .tab-content {
    border-left: none;
    margin-top: 15px;
    border-top: 2px solid var(--themeprimaryclr);
  }
}/*# sourceMappingURL=tabsDesign4.css.map */