/* Colourstyles. #709612 */

@font-face {
  font-family: 'San Francisco';
  src: url('../fonts/SF-Pro-Rounded-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eina_01';
  src: url('../fonts/Eina01-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* olddarkgreen = #709612
oldlightgreen = #a0b000
darkgreen = #86AA01
lightgreen = #AEDD01 */

body {
  background-color: #FFF9EB; /* dark gray */
}

/* python -m http.server 5000 */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Eina_01', sans-serif;
}

p {
  font-family:'Eina_01',sans-serif;
}


/* Active pill */
.nav-pills .nav-link.active {
  background-color: #709612;
  color: #fff;
}

/* Inactive pills */
.nav-pills .nav-link:not(.active) {
  color: #333; /* text color */
}

/* Hover for inactive pills only */
.nav-pills .nav-link:not(.active):hover {
  background-color: #a0b000;
  color: #fff;
}

.btn-outline-custom {
  color: #709612;            /* text color */
  border: 2px solid #709612; /* outline color */
  background-color: transparent; /* keep it “outline” */
}

.btn-outline-custom:hover {
  color: #fff;               /* text on hover */
  background-color: #709612; /* fill on hover */
  border-color: #709612;
}

.btn-custom {
  background-color: #709612; /* your color */
  border-color: #709612;
  color: #fff;
}

.btn-custom:hover {
  background-color: #5a7810; /* slightly darker for hover */
  border-color: #5a7810;
}

/* Card border */
.border-custom {
  border-color: #709612 !important; /* your custom color */
}

/* Card header background + text color */
.text-bg-custom {
  background-color: #709612 !important; /* same as border */
  color: #fff; /* text color */
  border-color: #709612 !important; /* border matches background */
}

 /* Images scale with screen size, keep aspect ratio */
  .product-img {
    width: 8vw;        /* 8% of viewport width */
    max-width: 50px;   /* cap on large screens */
    height: auto;      /* maintain ratio */
  }

  /* Responsive spacing on list items */
  ul.nav li {
    margin-bottom: 2vw;
  }

  @media (min-width: 768px) {
    .product-img {
      width: 50px;   /* fixed size on medium+ screens */
    }
    .phone-panel {
      font-size: 1rem;
      width: 200px;
    }
  }

  .phone-panel {
  position: absolute;
  right: 60px;              /* sits behind the icon */
  white-space: nowrap;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateX(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}

.phone-panel.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}