:root {
  --ciact-white: #f7f7f7;
  --ciact-yellow: #eddfc2;
  --ciact-orange: #c1a381;
  --ciact-green: #7a7a5e;
  --ciact-red: #84441e;
  --ciact-black: #291605;
}

.ciact-white {
  background-color: var(--ciact-white);
}

.ciact-yellow {
  background-color: var(--ciact-yellow);
}

.ciact-orange {
  background-color: var(--ciact-orange);
}

.ciact-green {
  background-color: var(--ciact-green);
}

.ciact-black {
  background-color: var(--ciact-red)
}

.ciact-red {
  background-color: var(--ciact-red);
}

.ciact-btn-navber {
  color: var(--ciact-red);
  border: 2px solid var(--ciact-red);
  padding: 7px 20px;
  transition: var(--transition);
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.ciact-btn-navber:hover {
  background: var(--ciact-red);
}

.is-sticky .ciact-btn-navber {
  border: 1px solid var(--ciact-green);
}

.ciact-btn-theme {
  color: var(--ciact-white);
  background-color: var(--ciact-red);
  transition: var(--transition);
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 0;
  border: none;
}

.ciact-btn-theme:hover {
  background-color: var(--ciact-orange);
}

.nav-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Show 2 items */
  grid-gap: 1rem;
  text-align: center;
}



.nav-pills .nav-item a {
  color: #84441e;
  border: 1px solid #84441e;
  padding: 20px;
}

.nav-pills .nav-item .active{
  background-color: #84441e;
}

.nav-pills .nav-item a:hover{
  background-color: #84441e;
  color: white;
}

.team_area_three_content .btn{
  color: #84441e;
  border: 1px solid #84441e;
}

.team_area_three_content .btn:hover,
.team_area_three_content .btn.active {
    color: #fff;
    background-color: #84441e;
    border: 1px solid #84441e;
}

@media (min-width: 768px) {
  .nav-pills {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Original for larger screens */
  }
}