.about-me-section {
    display: flex; justify-content: center; align-items: center; width: 100vw; background-color: #FFFFFF; padding: 20px; box-sizing: border-box;
}
.about-me-container {
    max-width: 1200px; width: 100%; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
}
.about-me-subtitle {
    font-family: 'Source Sans Pro', sans-serif; font-size: clamp(2.5rem, 2.5vw, 3rem); line-height: 69px; color: #000; margin: 70px 0 50px 70px; font-weight: 600; text-align: left;
}
.empathic-text {
    color: #D96B68; font-weight: bold; font-size: clamp(2.5rem, 2.5vw, 3rem); display: inline-block; text-align: center; transition: opacity 0.5s ease-in-out;
}
.about-me-title-image-container {
    width: 100%; max-width: 50%;
}
.about-me-content {
    display: flex; justify-content: center; margin-left: 70px;
}
.about-me-column-image {
    padding-top: 17px;
}
.about-me-title-image, .about-me-image {
    width: 100%; height: auto; object-fit: cover; display: block; box-sizing: border-box; max-height: 60vh;
}
.about-me-image {
    width: clamp(100px, 50vw, 253px); max-width: 50vh; border-radius: 20px; border: 7px solid #000;
}
.about-me-column-text {
    display: flex;
}
.about-me-details {
    font-family: 'Source Sans Pro', sans-serif; font-size: clamp(0.9rem, 0.9vw, 1.3rem); line-height: 1.6;
}
.about-me-details-container {
    width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box; padding-left: 60px;
}
@media (max-width: 1024px) {
    .about-me-details-container { max-width: 90%; padding: 10px 20px; }
    .about-me-subtitle { font-size: clamp(2rem, 3vw, 2.5rem); line-height: 50px; margin: 40px 20px; text-align: center; }
    .empathic-text { font-size: clamp(2rem, 3vw, 2.5rem); text-align: center; }
}
@media (max-width: 768px) {
    .about-me-details-container { max-width: 100%; padding: 10px 15px; }
    .about-me-content { gap: 20px; padding: 20px 0; flex-wrap: wrap; margin: 0; }
    .about-me-title-image, .about-me-image { width: 100%; max-width: 100%; }
    .about-me-image { border-radius: 10px; border: 5px solid #000; }
    .about-me-column-text { padding: 0 15px; }
    .about-me-subtitle { font-size: 1.8rem; line-height: 1.4; margin: 20px 10px; text-align: center; }
    .empathic-text { font-size: 1.8rem; text-align: center; }
}
@media (max-width: 480px) {
    .about-me-subtitle { font-size: 1.5rem; line-height: 1.3; margin: 15px 5px; }
    .empathic-text { font-size: 1.5rem; }
}
.contact {
    background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; text-align: left; padding: 60px 20px; width: 100vw; box-sizing: border-box;
}
.contact-content {
    display: flex; width: 100%; height: 100%;
}
.left-column {
    width: 90%; padding: 0 130px 0 180px; flex-direction: column; justify-content: space-between;
}
.right-column {
    border-left: 2px solid #fff; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%;
}
.contact-title {
    font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 4.5rem); margin-bottom: 5px;
}
.social-icons {
    display: flex; gap: 20px; margin-bottom: 5px; padding-top: 5px;
}
.social-icons a {
    color: #fff; font-size: clamp(1rem, 2.4vw, 3rem); transition: transform 0.3s ease;
}
.social-icons a:hover {
    transform: scale(1.1);
}
.contact-text-box {
    background-color: #fff; color: #000; padding: 20px; margin: 50px 0 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); font-family: 'Source Sans Pro', sans-serif; position: relative; border-radius: 15px; font-size: clamp(1rem, 1.2vw, 1.5rem); font-weight: 200; box-sizing: border-box;
}
.free-time-content {
    display: flex; align-items: center; margin-top: 30px;
}
.free-time-title {
    font-family: 'Source Sans Pro', sans-serif; font-size: 1.4rem; color: #fff; text-align: left; margin-right: 20px; white-space: nowrap;
}
.divider {
    width: 1.5px; background-color: #fff; height: 54px; margin: 0 20px;
}
.free-time-description {
    font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; color: #fff; text-align: left; line-height: 1.5;
}
@media (max-width: 768px) {
    .free-time-content { flex-direction: column; align-items: center; margin-right: 50px; }
    .free-time-title br { display: none; }
    .free-time-title { text-align: center; margin: 0 0 10px; white-space: normal; }
    .divider { width: 80%; height: 1px; margin: 10px 0; }
    .free-time-description { text-align: center; margin-top: 10px; width: 90%; }
}
@media (max-height: 600px) {
    .contact-text-box { padding: 10px; margin: 30px 0 10px; font-size: clamp(0.9rem, 1.1vw, 1.2rem); }
}
.view-resume-button {
    display: inline-block; padding: 10px 20px; border: 2px solid #fff; color: #fff; background-color: transparent; border-radius: 25px; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; position: absolute; top: -100px; right: 0; font-size: clamp(0.8rem, 1.2vw, 1.5rem);
}
.view-resume-button:hover {
    background-color: #fff; color: #000;
}
.footer-text {
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(1.5rem, 3vw, 4rem); font-family: 'Alegreya Sans', sans-serif; font-weight: 700; color: #fff;
}
@media (max-width: 768px) {
    .contact { padding: 50px 10px; }
    .contact-content { flex-direction: column; align-items: center; text-align: center; width: 100%; }
    .left-column { width: 100%; text-align: center; margin-bottom: 20px; }
    .contact-title { font-size: clamp(1.5rem, 2.5vw, 3.5rem); margin-bottom: 10px; text-align: left; }
    .social-icons { justify-content: left; gap: 15px; }
    .contact-text-box { text-align: left; font-size: 4vw; padding: 15px; margin-top: 30px; max-width: 90%; max-height: 80vh; }
    .view-resume-button { max-width: 300px; margin: 10px; }
    .right-column { display: none; }
    .footer-text { font-size: clamp(1.5rem, 2.5vw, 3.5rem); transform: rotate(0); text-align: center; writing-mode: horizontal-tb; margin-top: 20px; }
}
