@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    background: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container
{
    position: relative;
    width: 100%;
    max-width: 1000px; /* Maintained for balance and readability */
    min-height: auto; /* Removed fixed height for flexibility */
    background: #fff;
    margin: 20px; /* Reduced margin for compactness */
    display: grid;
    grid-template-columns: 1fr 2fr; /* Right side wider than left side */
    box-shadow: 0 15px 25px rgba(0,0,0,0.1); /* Reduced shadow size */
    align-items: start; /* Aligns items at the top, helping with vertical alignment */
}
.container .left_side
{
    position: relative;
    background: #003147;
    padding: 20px; /* Reduced padding for compactness */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
}
.profileText
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0; /* Reduced padding */
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background: #003147; /* Ensure background matches left_side */
    flex-grow: 0; /* Prevents stretching */
}
.profileText .imgBx
{
    position: relative;
    width: 180px; /* Maintained size for balance */
    height: 180px; /* Maintained size for balance */
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px; /* Reduced margin */
}
.profileText .imgBx img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profileText h2
{
    color: #fff;
    font-size: 1.3em; /* Slightly reduced for compactness */
    margin-top: 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    line-height: 1.2em; /* Adjusted for compactness */
}
.profileText h4
{
    color: #fff;
    font-size: 0.9em; /* Slightly reduced for compactness */
    margin-top: 5px; /* Reduced margin */
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    line-height: 1.2em; /* Adjusted for compactness */
}
.ContactInfo
{
    padding-top: 20px; /* Reduced padding */
    flex-grow: 1; /* Allows the content to grow and align with the right side */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
}
.title
{
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px; /* Reduced margin */
}
.ContactInfo ul li
{
    position: relative;
    list-style: none;
    margin: 8px 0; /* Reduced margin */
    cursor: pointer;
}
a {
    color: #e5f6b7; /* Change the link color */
    text-decoration: none; /* Remove the underline */
}
a:hover {
    color: #f6b9b9; /* Change the link color on hover */
    text-decoration: underline; /* Add an underline on hover */
}
.ContactInfo ul li .icon
{
    display: inline-block;
    width: 25px; /* Slightly reduced for compactness */
    font-size: 16px; /* Slightly reduced for compactness */
    color: #03a9f4;
}
.ContactInfo ul li span
{
    color: #fff;
    font-weight: 300;
    font-size: 14px; /* Slightly reduced for compactness */
}
.ContactInfo.education li
{
    margin-bottom: 10px; /* Reduced margin */
}
.ContactInfo.education h5
{
    color: #03a9f4;
    font-weight: 500;
    font-size: 14px; /* Slightly reduced for compactness */
}
.ContactInfo.education h6
{
    color: aquamarine;
    font-weight: 400;
    font-size: 12px; /* Slightly reduced for compactness */
}
.ContactInfo.education h4:nth-child(3) {
    color: #ffffff; /* Adjust color for readability */
    font-weight: 400; /* Regular weight for better balance */
    font-size: 13px; /* Consistent font size */
}
.ContactInfo.education h4
{
    color: #fff;
    font-weight: 300;
    font-size: 14px; /* Slightly reduced for compactness */
}
.ContactInfo.language .percent,
.skills .box .percent
{
    position: relative;
    width: 100%;
    height: 8px; /* Slightly reduced height for compactness */
    background: #081921;
    margin-top: 5px;
    border-radius: 3px; /* Reduced radius */
}
.ContactInfo.language .percent div,
.skills .box .percent div
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #03a9f4;
    border-radius: 3px; /* Reduced radius */
}
.ContactInfo.technical-interests ul li
{
    list-style: none;
    margin: 8px 0; /* Reduced margin */
    color: #fff;
    font-weight: 300;
    font-size: 14px; /* Slightly reduced for compactness */
}
.container .right_side
{
    position: relative;
    background: #fff;
    padding: 20px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
}
.about
{
    margin: 20px; /* Reduced margin */
    flex-grow: 1; /* Allows the content to grow and align with the left side */
}
.about:last-child
{
    margin-bottom: 0;
}
.title2
{
    color: #003147;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px; /* Reduced margin */
    font-size: 1.1em; /* Slightly reduced for compactness */
}
p
{
    color: #333;
    line-height: 1.4; /* Reduced line height for compactness */
    font-size: 13px; /* Slightly reduced for compactness */
}
.about .box
{
    display: flex;
    flex-direction: column;
    margin: 10px 0; /* Reduced margin */
    padding: 10px; /* Reduced padding */
    background: #f9f9f9;
    border-radius: 3px; /* Reduced radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Reduced shadow */
}
.about .box .work
{
    margin-bottom: 5px; /* Reduced margin */
}
.about .box .work h5
{
    text-transform: uppercase;
    color: #848c90;
    font-weight: 600;
    font-size: 12px; /* Slightly reduced for compactness */
}
.about .box .work h4
{
    text-transform: uppercase;
    color: #2a72a2;
    font-size: 14px; /* Slightly reduced for compactness */
    margin-top: 3px; /* Reduced margin */
}
.about .box .text p
{
    font-size: 12px; /* Further reduced for compactness */
    color: #555;
    margin-top: 5px; /* Reduced margin */
}
.skills .box
{
    position: relative;
    width: 100%;
    display: grid;
    /* grid-template-columns: 150px 1fr; Adjusted for balance with wider right side */
    align-items: center;
    margin: 10px 0; /* Reduced margin */
}
.skills .box h4
{
    text-transform: uppercase;
    color: #848c99;
    font-weight: 500;
    font-size: 12px; /* Slightly reduced for compactness */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1000px)
{
    .container
    {
        margin: 5px;
        grid-template-columns: repeat(1, 1fr); /* Stack on small screens */
    }
    .about
    {
        margin: 10px; /* Further reduced for mobile */
    }
    .skills .box
    {
        grid-template-columns: 120px 1fr; /* Further adjust for mobile */
    }
}