/*Variables*/
:root {
  --panel-columns: 4;

  --panel-width: 350px;
  --panel-height: 200px;
  --panel-padding: 2rem;
}



body {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500;
}

.site-title {
  font-weight: 300;
  font-size: 5rem;
}

.service-category-title {
  font-weight: 300;
  font-size: 3rem;
}

.btn-manual {
  font-weight: 700;
}



.service-container {
  display: grid;
  grid: auto-flow var(--panel-height) / repeat(auto-fit, var(--panel-width));
  gap: var(--panel-padding);
  place-content: start start;
  place-items: stretch;

  max-width: calc(var(--panel-width) * var(--panel-columns) + var(--panel-padding) * (var(--panel-columns) + 1));
  margin: auto;
  padding: var(--panel-padding);
}

@media (max-width: 1576px) {
  .service-container {
    max-width: calc(var(--panel-width) * 3 + var(--panel-padding) * 4) !important;
  }
}

@media (max-width: 1195px) {
  .service-container {
    max-width: calc(var(--panel-width) * 2 + var(--panel-padding) * 3) !important;
  }
}

@media (max-width: 812px) {
  .service-container {
    place-content: start center !important;
  }
}

.service {
  background-color: #f1f5ff;
}

.hidden{
  display: none !important;
}



/*Image zoom animation*/
a.zoom img {
  transition: transform 0.3s;
}

a.zoom:hover img {
  transform: scale(1.05);
}



/*Increase Bootstrap Tooltip size*/
.tooltip-inner {
  max-width: calc(var(--panel-width) - 1rem);
}

/*Fix size of the popover*/
.popover {
  min-width: calc(var(--panel-width) - 1rem) !important;
  width: calc(var(--panel-width) - 1rem) !important;
  max-width: calc(var(--panel-width) - 1rem) !important;

  min-height: calc(var(--panel-height) - 1rem) !important;
  height: calc(var(--panel-height) - 1rem) !important;
  max-height: calc(var(--panel-height) - 1rem) !important;

  border-radius: 12px;
}

.popover-body {
  padding: 0.5rem 1rem;
  font-size: 12px;
}

.popover-body hr {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}