/* About Section */
#about {
    background: url('../assets/images/about/aboutSW.jpeg') no-repeat left center/cover;
    color: white;
    height: 100vh;
    align-items: center;
    justify-content: center;
    align-items: center;
}

/* Position the title at the top-right of the page */
.about-title {
    font-size: 20;
    font-weight: bold;
    transform: rotate(270deg);
    position: absolute;
    text-align: left;
    margin-left:  150px;
    margin-top: 50px;
}
/* About Content */
.about-content {
    font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 2.4vw;
    font-weight: 100;
    margin: 250px;
    margin-top: 0;
    margin-right: 270px;
    margin-left: 230px;
    text-align: justify;
    padding: 40px;
}

.about-content span.highlight1 {
    color: rgb(91, 214, 255); /* Change the color to your desired highlight color */
    font-weight: bold; /* Optionally make the highlighted text bold */
}

.about-content span.highlight_ {
    font-style: italic;
}

.about-content span.highlight3 {
    color: rgb(27, 255, 153); /* Change the color to your desired highlight color */
    font-weight: bold; /* Optionally make the highlighted text bold */
}

.about-content span.highlight31 {
    color: rgb(27, 255, 153); /* Change the color to your desired highlight color */
}

.about-content a {
    font-weight: bold; /* Make the font bold */
    font-size: 2vh;
    text-decoration: none;
    padding: 10px 20px; /* Add padding for better click area */
    transition: color 0.1s, font-size 0.1s, background-color 0.1s; /* Smooth transition for text color, font size, and background color */
    color: white;
    background-color: rgba(255, 255, 255, 0.133); 
    border-radius: 25px; /* Rounded corners */
    display: inline-block; /* Make it inline-block to appear as a button */
}

/* Hover effects for the first link */
.about-link1:hover {
    background: rgb(27, 255, 153); /* Light background on hover */
    font-size: 2.2vh; /* Increase font size on hover */
    color: black; /* Change text color on hover */
}

/* Hover effects for the second link */
.about-link2:hover {
    background: rgb(91, 214, 255); /* Different background on hover */
    font-size: 2.2vh; /* Increase font size on hover */
    color: black; /* Change text color on hover */
}

@media (max-width: 920px) {
    .about-content {
        margin-right: 30px;
        margin-left: 30px;
    }

    .about-title {
        margin-left: -30px;
    }

    .about-content {
        font-size: 2.6vh;
    }
}