:root {
  --food: #ef8200;
  --food-bg: #fdf3e5;
  --food-grad-bg: linear-gradient(to right, #fbe7cb 0%, #f9dcc8 100%);
  --agri: #00a28c;
  --agri-bg: #f7fae5;
  --agri-grad-bg: linear-gradient(to right, #ecf2c2 21%, #d1ecd7 100%);
  --other: #1d77b1;
  --other-bg: #e6eeff;
  --other-grad-bg: linear-gradient(to right, #c9e2f9 0%, #c3d1fa 100%);
}

nav.pnav {
  margin-bottom: 26px;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.2;
}

.pnavs {
  display: flex;
  flex-direction: row;
  column-gap: 16px;
}

.pnav__item {
  background-color: #ccc;
  border-radius: 10px;
  color: var(--white);
  transition: background ease-in-out .3s;
}
.pnav__item button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  color: var(--white);
}

.pnav__item.ft:hover,
.pnav__item.ft:focus-within,
.pnav__item.ft.is-active {
  background-color: var(--food);
}

.pnav__item.ag:hover,
.pnav__item.ag:focus-within,
.pnav__item.ag.is-active {
  background-color: var(--agri);
}

.pnav__item.ot:hover,
.pnav__item.ot:focus-within,
.pnav__item.ot.is-active {
  background-color: var(--other);
}

@media (max-width: 856px) {
  .pnavs {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px;
  }
}
.exhibitors__area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 7.3%;
  display: none;
}
.exhibitors__area.is-active {
  display: flex;
}

.exhibitor {
  width: 46.35%;
  margin-bottom: 40px;
  padding: 24px 32px;
  background-color: #ccc;
  border-radius: 15px;
  font-size: 1.7rem;
  line-height: 1.5;
  color: var(--fc);
}

.exhibitor__header {
  margin-bottom: 27px;
}

.exhibitor__header__info {
  display: flex;
  align-items: center;
  column-gap: 16px;
  margin-bottom: 16px;
}

.booth-num {
  display: inline-block;
  min-width: 50px;
  padding: 5px;
  background-color: #ccc;
  border-radius: 5px;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  color: var(--white);
}

.booth-notes {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
}

.exhibitor__name {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.2;
}

a.website {
  font-size: 1.4rem;
  line-height: 1.2;
  transition: opacity ease-in-out .3s;
}
a.website:hover {
  opacity: 0.5;
}
a.website:focus-within {
  opacity: 0.5;
}

.exhibitor__content > p {
  margin-bottom: 16px;
}

.exhibitor__info {
  padding: 20px;
  background-color: #eee;
  border-radius: 8px;
}

#foodtech .exhibitor {
  background-color: var(--food-bg);
}
#foodtech .booth-num {
  background-color: var(--food);
}
#foodtech a.website {
  color: var(--food);
}
#foodtech .exhibitor__info {
  background-color: none;
  background: var(--food-grad-bg);
}

#agritech .exhibitor {
  background-color: var(--agri-bg);
}
#agritech .booth-num {
  background-color: var(--agri);
}
#agritech a.website {
  color: var(--agri);
}
#agritech .exhibitor__info {
  background-color: none;
  background: var(--agri-grad-bg);
}

#others .exhibitor {
  background-color: var(--other-bg);
}
#others .booth-num {
  background-color: var(--other);
}
#others a.website {
  color: var(--other);
}
#others .exhibitor__info {
  background-color: none;
  background: var(--other-grad-bg);
}

@media (max-width: 856px) {
  .exhibitors__area {
    column-gap: 0;
  }

  .exhibitor {
    width: 100%;
    margin-bottom: 24px;
  }
}