.body { padding-top: 90px; }

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

*:hover{
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
section{
    float:left;
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:30px 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
  z-index: 1;
}

.card-header,
.card-body {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

.card-text {
  font-size: min(10vw, 40px); /* Max size is 18px */
}

.card-text-big {
  font-size: min(20vw, 80px); /* Max size is 18px */
}

.card-title {
  font-size: min(8vw, 24px); /* Max size is 24px */
}

.card-text-small {
  font-size: min(5vw, 18px); /* Max size is 18px */
}