a.active {
font-weight: bold;
color: #007bff;
}

a {text-decoration: none;}

p1 {
display: block;
font-size: 48px;
line-height: 45px;
text-align: right;
padding-right: 40px;
padding-top: 30px;
font-weight: 800;
color: white;
font-family: 'Roboto Slab', serif;
letter-spacing: 1px;
}

p2 {
display: block;
font-size: 38px;
line-height: 45px;
text-align: right;
padding-right: 37px;
padding-top: 23px;
padding-bottom: 0px;
font-weight: 800;
color: white;
font-family: 'Source Serif Pro', serif;
}

p4 {
display: block;
font-size: 20px;
line-height: 23px;
text-align: left;
padding-top: 20px;
padding-bottom: 35px;
font-weight: 800;
color: white;
font-family: 'Source Serif Pro', serif;
}

#test {
display: block;
}

#main {
width: fit-content;
z-index: 5000;
display: none;
height: fit-content;
overflow-y: auto;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
}

#close {
background-color: white;
color: black;
display: none;
}

about {
width: 100%;
height: auto;
position: relative;
float: right;
margin-right: 60px;
z-index: 5000;
}

#about-content {
width: 45%;
height: auto;
position: relative;
float: right;
}

services {
width: 100%;
height: auto;
position: relative;
float: right;
margin-right: 60px;
z-index: 5000;
}

#services-content {
width: 45%;
height: auto;
position: relative;
float: right;
}

flagship {
width: 100%;
height: auto;
position: relative;
float: right;
margin-right: 60px;
z-index: 5000;
}

#flagship-content {
width: 45%;
height: auto;
position: relative;
float: right;
}

values {
width: 100%;
height: auto;
position: relative;
float: right;
margin-right: 60px;
z-index: 5000;
}

#values-content {
width: 45%;
height: auto;
position: relative;
float: right;
}

contact {
width: 100%;
float: right;
margin-right: 60px;
z-index: 5000;
margin-top: 25px;
display: block;
padding: 0;
}

#contact-content {
width: 45%;
height: auto;
float: right;
min-height: 900px;
}

holder {
width: 50%;
position: relative;
float: right;
margin-right: 60px;
z-index: 5000;
height: 300px;
}

#services-content {
opacity: 0;
pointer-events: none; 
transition: opacity 1.1s ease;
display: block;
}

#services-content.visible {
opacity: 1;
pointer-events: auto;
}

#flagship-content {
opacity: 0;
pointer-events: none;
transition: opacity 1.1s ease;
display: block;
}

#flagship-content.visible {
opacity: 1;
pointer-events: auto;
}

#values-content {
opacity: 0;
pointer-events: none;
transition: opacity 1.1s ease;
display: block;
}

#values-content.visible {
opacity: 1;
pointer-events: auto;
}

#contact-content {
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease;
display: block;
}

#contact-content.visible {
opacity: 1;
pointer-events: auto;
}