/* Page 3 Styling */
#page-3 {
    background-color: #ddddd8; /* Light gray background */
    color: #111; /* Dark text color */
    padding: 5% 10%;
    text-align: left;
}

/* About Me Section Styling */
.about-me-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Aligns content to the top */
    justify-content: flex-end; /* Aligns the content to the right */
    gap: 2em; /* Adds space between image and text */
    padding-top: 2em; /* Adds space at the top */
    position: relative; /* Allows positioning of child elements */
}

/* About Me Logo Styling */
.about-me-logo {
    width: 5%; /* Adjust size to match the reference */
    margin-right: 2em; /* Adds space to the right of the logo */
    margin-top: 1em; /* Aligns logo with the rest of the content */
    margin-left: -9%;
}


/* About Me Content Styling */
.about-me-content {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 60%;
    margin-left: auto; /* Moves the content to the right */
    text-align: right; /* Aligns text inside the content to the right */
}

/* Title Styling */
.about-me-title {
    font-size: 8.4vw;
    font-weight:700;
    text-transform: uppercase;
    margin: 0;
    text-align: left; /* Aligns title text to the right */
    margin-bottom: 5%;
    margin-left: -5%;
}

/* Description Styling */
.about-me-description {
    font-size: 1.3vw;
    line-height: 1.2;
    color: #111;
    margin: 0 0 1em 0; /* Adds margin below the description */
    text-align: left; /* Aligns description text to the right */
    font-weight:500;
    font-family: 'Roboto';
    letter-spacing: 0.01em; /* Adds slight letter spacing */
    margin-left: -4%;
}

/* Details Section Styling */
.about-me-details {
    display: flex;
    align-items: flex-start; /* Aligns items vertically at the start */
    gap: 0.5em; /* Reduces gap between subtitle and text */
    font-size: 1vw;
    color: #444;
    margin-top: 1em; /* Adds space above details section */
    text-align: left; /* Aligns text inside the details to the left */
    margin-left: -4%;
}

/* Subtitle Styling */
.about-me-subtitle {
    font-family: 'Roboto Condensed'; /* Ensures the correct font family */
    font-size: 1rem; /* Sets the font size */
    color: #444444; /* Dark gray color */
    letter-spacing: 0.02em; /* Adds slight letter spacing */
    margin-bottom: 0; /* Removes any bottom margin */
    text-align: left; /* Aligns subtitle to the left */
    white-space: nowrap; /* Prevents text from wrapping */
}

/* About Me Image Styling */


/* was giving massive gaps with small screens and moving off target with big screens
.about-me-image {
    width: 35%; 
    height: auto;
    background-color: #666; 
    object-fit: cover;
    border-radius: 5px;
    margin-right: 2em; 
    margin-top: -38%;
    margin-left: -11%;
}
*/

/* About Me Image Styling */

.about-me-image {
    width: 35%; 
    margin-top: -40%;
    margin-left: -9%;
    
}



.about-me-text {
    font-family: 'Roboto'; 
    color: #444444; 
    font-size: 1.2em; 
    width: 80%;
    font-weight: 400;
    line-height: 1.2;
    margin-left: 3%;
}

/* rem gives massive problems with smaller screens, try em as well 
.about-me-text {
    font-family: 'Roboto', 'Arial', sans-serif; 
    color: #444444; 
    font-size: 1rem; 
    font-weight: 550;
    line-height: 1.5; 
    margin: 0;
    width: 65%;
    margin-left: 10%;
}
*/