:root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --accent-color: #06d6a0;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-light: #ffffff;
            --bg-primary: #ffffff;
            --bg-secondary: #f9fafb;
            --bg-dark: #111827;
            --gold:#d2b795;
            --bgc:#192d3f;
            --lightBgc:#1f3951;
        }


#second{
    padding-left: 3vw;
    padding-right: 10vw;
    padding-bottom: 100px;
    background-color: var(--bgc);
    width: 80vw;
    color:var(--text-light);
    margin-left: 60px;
}
.elem{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 150px;
    padding: 3.5vw 3vw;
    padding-right: 0;
    border-top: 1px solid var(--gold);
    padding-left: 0;
}
.elem h1{
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 2.5vw;
    opacity: .6;
}
.elem h5{
    color: var(--text-secondary);
    font-size: 2vw;
    font-weight: 500;
    opacity: .6;
}
.elemlast{
    border-bottom: 1px solid var(--gold);
}
.elem img {
    opacity: 0;
    pointer-events: none;
    height: 320px;
    width: 500px;
    z-index: 999;
    position: absolute;
    transform: translate(-50%, -50%);
}
.elem img {
  pointer-events: none;
  position: absolute;
  will-change: transform;
}


.cert-title{
    color: var(--gold);
    text-transform: uppercase;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
#cert-section{
    display: flex;
    align-items: center;
    justify-self:center;
    flex-direction: column;
}

@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  /* hide the cert visuals completely */
  .elem img,
  .cert-overlay,
  .hover-cert {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* stack elements for mobile and tighten spacing */
  .elem {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0;
    margin-left: -40px;
    height: 120px;
  }

  #second {
    padding: 18px 4vw 60px;
  }
  
  .cert-title h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
  }

}

/* small tweaks for very narrow phones */
@media (max-width: 420px) {
  .cert-title { font-size: clamp(16px, 4.5vw, 20px); }
  .elem h1 { font-size: clamp(13px, 4vw, 16px); }
  .elem h5 { font-size: clamp(12px, 3.2vw, 14px); }
}