/* -------------------------------------------------About Me Section---------------------------------------------------- */
.maincontent {
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 20px;
    box-sizing: border-box;
}

.intro-box {
    height: 20vh; /* 20% of the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Add some spacing below the intro-box */
}

.intro-box p {
    margin: 5px 0; /* Add some spacing between lines */
    font-size: 1.5em; /* Adjust font size as needed */
}

.intro-box .name {
    font-size: 2.5em; /* Adjust font size as needed */
}

.intro-box .university {
    font-size: 1.3em; /* Adjust font size as needed */
}

.intro-box .position {
    font-size: 1.3em; /* Adjust font size as needed */
}

.intro-box .degree {
    font-size: 1em; /* Adjust font size as needed */
}
.content {
    width: 100%;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.mill19-img {
    max-width: 100%; /* Ensures the image doesn't overflow the container */
    height: auto; /* Maintains the aspect ratio of the image */
    margin-top: 20px; /* Adds space between the intro-box and the image */
    width: 50%; /* Adjust the width as needed */
}

.aboutme-description {
    width: 100%; /* Adjust as needed */
    text-align: left; /* Align text to the left */
    padding: 20px; /* Add padding for better readability */
}

.intro-container {
    position: relative; /* Required for absolute positioning of children */
}

.cmu-logo {
    position: absolute;
    left: -260px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */

}

.ar-logo {
    position: absolute;
    right: -260px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

.inline-icon-meche {
    vertical-align: middle; /* Align the icon vertically with the middle of the text */
    height: 2em; /* Match the height of the text */
    margin-right: 5px; /* Add some space between the icon and the text */
}

.inline-icon-software {
    vertical-align: middle; /* Align the icon vertically with the middle of the text */
    height: 2em; /* Match the height of the text */
    margin-right: 5px; /* Add some space between the icon and the text */
}

.inline-icon-electrical {
    vertical-align: middle; /* Align the icon vertically with the middle of the text */
    height: 2em; /* Match the height of the text */
    margin-right: 5px; /* Add some space between the icon and the text */
}