.half-nav {
  position: absolute;
  top: 45%;
  bottom: 0;

  cursor: pointer;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(177, 167, 166, .28);;
  background: rgba(0, 0, 0, .4);
}
.half-nav:hover {
  background: rgba(205, 12, 12, 0.4);
  transition: 0.2s;
}

/* Left and right halves */
.left-nav { left: -70px; }
.right-nav { right: -70px; }

/* Arrow styling */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: white;
  
  transition: opacity 0.2s ease;
  pointer-events: none; /* lets clicks pass through */
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Pin arrows to the outer sides */
.arrow-left {
  left: 15px;
}

.arrow-right {
  right: 15px;
}

@media only screen and (max-width:60em) {
  .half-nav {
 opacity: 0;
}
}



.underline-whole{
  border-bottom: 2px var(--color-primary7) solid; 
  padding-bottom: 0.1em;
  margin-bottom: 12px;
}
.underline {
  text-decoration: underline solid  var(--color-primary7) 0.15em;text-underline-offset: 0.5rem;
}


.shadow {
  border: 3px solid rgba(229, 9, 20, 0.3);
  box-shadow: 0 0 50px rgba(229, 9, 20, 0.2);
  
}

.round{
border-radius: 20px;

}

.cert-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid rgb(255, 0, 0);
    background: rgba(0, 0, 0, .4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

::selection {
    background: var(--color-primary7);
    color: var(--color-primary1);
}
.certificates * a:hover:before{
 width: 0;
}