:root {
  --boldnet-primary: #44589c;
  --boldnet-primary-rgb: 68, 88, 156;
  --boldnet-secondary-green: #749C44;
  --boldnet-secondary-brown: #9C5744;
  --boldnet-dark-gray: #2b3035;
  --boldnet-dark: #30332C;

  /* Override Bootstrap light theme colors */
  --bs-primary: var(--boldnet-primary);
  --bs-primary-rgb: var(--boldnet-primary-rgb);
  --bs-primary-text-emphasis: #1a223c;
  --bs-primary-bg-subtle: #d9dded;
  --bs-primary-border-subtle: #b3bce2;
  --bs-link-color: var(--boldnet-primary);
  --bs-link-color-rgb: var(--boldnet-primary-rgb);
  --bs-link-hover-color: #36467d;
  --bs-link-hover-color-rgb: 54, 70, 125;
}

[data-bs-theme=dark] {
  --bs-primary: #8799d1; /* Lighter shade for dark mode */
  --bs-primary-rgb: 135, 153, 209;
  --bs-primary-text-emphasis: #b8c3e4;
  --bs-primary-bg-subtle: #0d111f;
  --bs-primary-border-subtle: #222c4e;
  --bs-link-color: #8799d1;
  --bs-link-color-rgb: 135, 153, 209;
  --bs-link-hover-color: #a0b0e2;
  --bs-link-hover-color-rgb: 160, 176, 226;
  --bs-body-bg: var(--boldnet-dark-gray);
  --bs-body-color: #e9ecef;
  --bs-tertiary-bg: #2b3035;
}

/* Navbar styling */
.navbar.sticky-top {
  /* Gradient from primary to dark gray */
  background: linear-gradient(180deg, var(--boldnet-primary) 0%, var(--boldnet-dark-gray) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.2);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .nav-link.active {
    font-weight: 600;
}

/*
.navbar-brand img {
    filter: invert(1) brightness(1.5);
}
*/

/* Make popular tariff card stand out with secondary green */
.card-popular {
    border-color: var(--boldnet-secondary-green);
    border-width: 2px;
    transform: scale(1.02);
    z-index: 1;
}
.card-popular .card-header {
    background-color: var(--boldnet-secondary-green);
    color: var(--bs-white);
}

/* Hero section button on home page */
.hero-section-bg .btn-primary {
    background-color: var(--boldnet-secondary-brown);
    border-color: var(--boldnet-secondary-brown);
}

.hero-section-bg .btn-primary:hover {
    background-color: #8a4e3c; /* Darker brown */
    border-color: #8a4e3c;
}

/* Add hover effect to cards */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:not(.card-popular):hover {
    transform: translateY(-5px);
    box-shadow: var(--bs-box-shadow) !important;
}

/* Timeline styles */
.timeline {
    position: relative;
    padding: 2rem 0;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: var(--bs-primary-bg-subtle);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    width: 50%;
}

/* Alternate items left and right */
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 3rem;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 3rem;
}

/* The dot on the timeline */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 1rem;
    width: 20px;
    height: 20px;
    background-color: var(--bs-primary);
    border: 4px solid var(--bs-primary-bg-subtle);
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(odd)::after {
    right: -10px;
}

.timeline-item:nth-child(even)::after {
    left: -10px;
}

.timeline-content {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    background-color: var(--bs-card-bg);
    text-align: left;
}

/* Arrow pointing to the timeline */
.timeline-content::before {
    content: ' ';
    position: absolute;
    top: 1.2rem;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--bs-border-color);
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--bs-border-color) transparent transparent;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .timeline::before { left: 10px; }
    .timeline-item { width: 100%; padding-left: 3rem; padding-right: 0; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-item::after { left: 1px; }
    .timeline-content::before { left: -10px; border-width: 10px 10px 10px 0; border-color: transparent var(--bs-border-color) transparent transparent; }
    .timeline-item:nth-child(odd) .timeline-content::before { right: auto; }
}

/* Light theme background using a pseudo-element for opacity control */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(../img/lighthouse.svg) left center / contain no-repeat;
  opacity: 0.1; /* <-- Настройте это значение для бледности (например, от 0.05 до 0.2) */
  pointer-events: none;
}