:root {
  --primary-color: #B07E50;
  --primary-color-rgb: 176, 126, 80;
  --secondary-color: #B07E50;
  --secondary-color-rgb: 176, 126, 80;
}
    h1 {
position: relative;
display: inline-block;
padding-bottom: 20px;
font-size: 2.5rem;
color: #fff;
}

/* Left and right lines */
h1::before,
h1::after {
content: "";
position: absolute;
bottom: 0;
height: 2px;
width: 0;
background-color: white;
animation: growLine 1s ease forwards;
}

h1::before {
left: 50%;
transform: translateX(-100%);
}

h1::after {
right: 50%;
transform: translateX(100%);
animation-delay: 0s;
}

/* Diamond in the middle */
h1 span {
position: relative;
}

h1 span::after {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
opacity: 0;
animation: fadeInDiamond 0.5s ease forwards;
animation-delay: 1s; /* Show diamond after line grows */
}

/* Keyframes */
@keyframes growLine {
to {
width: 50%;
}
}

@keyframes fadeInDiamond {
to {
opacity: 1;
}
}