/* General Styles */
html * {
    font-family: "Arial", sans-serif;
    line-height: 1.5rem;
    color: #2c3e50;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f9fc;
    padding: 20px;
}

/* Parent Container */
.parent_container {
    max-width: 1024px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

/* Header Section */
.upper_container {
    display: flex;
    align-items: center; /* Align items vertically by default */
    justify-content: space-between; /* Spread items horizontally on larger screens */
    background: #d9e9f5; /* Light blue background */
    padding: 20px;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* Header Content */
.header_content {
    display: flex;
    align-items: center;
    width: 100%; /* Ensures content spans full header width */
}

/* Photo Container */
.photo_container {
    margin-right: 20px; /* Adds space between the photo and text */
}

.profile_photo {
    width: 120px; /* Adjust size as needed */
    height: 120px;
    border-radius: 50%; /* Makes the image circular */
    border: 5px solid #3498db; /* Blue border */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for aesthetics */
    object-fit: cover; /* Ensures the image fits nicely within the circle */
}

/* Name and Counter */
.name_and_counter {
    display: flex;
    justify-content: space-between; /* Spread name and counter apart horizontally */
    align-items: center; /* Align vertically */
    flex: 1; /* Allow content to stretch */
}

/* Name Info */
.name_info {
    flex: 2; /* Occupies most of the available space */
}

.name_info h1 {
    font-size: 36px;
    color: #3498db;
    padding: 5px;
    margin: 0;
}

.name_info h2 {
    font-size: 20px;
    color: #2c3e50;
    padding: 5px;
    margin: 5px 0;
}

.name_info h3 {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 5px;
    line-height: 1.8;
}

/* Visitor Counter */
.visitor_counter {
    text-align: right; /* Align everything to the right */
    font-family: Arial, sans-serif;
    color: #3498db; /* Matches theme */
    margin-left: 20px; /* Space between the counter and name info */
    flex: 1; /* Ensures it takes only the required width */
}

.visitor_counter p {
    margin: 0; /* Remove default margin */
    font-size: 14px; /* Smaller font for the label */
    font-weight: bold;
    color: #2c3e50; /* Darker color for contrast */
}

#counter {
    font-family: monospace;
    font-size: 16px;
    color: #3498db;
    border: 1px solid #3498db;
    border-radius: 5px;
    padding: 10px;
    background: #f4f9fc;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 5px; /* Space between label and counter */
}

#counter:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    background: #ecf3f9;
}

/* Middle Container */
.middle_container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
}

.middle_left_container {
    flex: 3; /* Left container takes up more space on desktop */
    padding: 20px;
    background: #ffffff;
}

.middle_right_container {
    flex: 1; /* Right container takes up less space on desktop */
    padding: 20px;
    background: #ecf3f9;
}

/* Responsive Design: Stack Middle Container on Mobile */
@media (max-width: 768px) {
    .middle_container {
        flex-direction: column; /* Stack left and right containers vertically */
    }

    .middle_left_container,
    .middle_right_container {
        flex: 1; /* Each container now takes full width */
        padding: 15px; /* Adjust padding for smaller screens */
    }
    .name_info h1 {
        font-size: 28px; /* Reduce font size for smaller screens */
        line-height: 1.2; /* Add more spacing between lines */
        margin: 5px 0; /* Add some space around the text */
    }

    .name_info h2 {
        font-size: 18px; /* Slightly smaller font for the title */
        margin: 5px 0; /* Adjust spacing */
    }

    .name_info h3 {
        font-size: 12px; /* Reduce font size for contact info */
        line-height: 1.4; /* Add more spacing between lines for better readability */
        margin: 5px 0; /* Adjust spacing */
    }

    .upper_container {
        flex-direction: column; /* Stack all items vertically */
        align-items: center; /* Center-align all items */
        text-align: center; /* Center-align text */
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .photo_container {
        margin-bottom: 10px; /* Add spacing below the photo */
    }

    .name_and_counter {
        flex-direction: column; /* Stack name info and visitor counter vertically */
        align-items: center; /* Center-align the content */
        margin-top: 10px; /* Add spacing above the stacked section */
    }

    .visitor_counter {
        margin-left: 0; /* Remove unnecessary margin */
        margin-top: 10px; /* Add spacing above the counter */
        text-align: center; /* Center-align the counter text */
    }
}

/* Section Headers (e.g., Work Experience, Education) */
section h1 {
    font-size: 26px; /* Larger font size for main section headers */
    font-weight: bold; /* Bold text */
    color: #3498db; /* Blue color to match theme */
    margin-top: 30px; /* Increased spacing above section headers */
    margin-bottom: 15px; /* Increased spacing below section headers */
    border-bottom: 2px solid #3498db; /* Optional underline for emphasis */
    padding-bottom: 5px; /* Space between text and underline */
}

/* Subsection Headers (e.g., Company Names, School Names) */
.work_experience_role h2,
.education_title h2,
.certifications_list li p {
    font-size: 18px; /* Slightly smaller font size */
    font-weight: bold; /* Bold text for better visibility */
    color: #2c3e50; /* Darker text color for contrast */
    margin-top: 20px; /* Spacing above each subsection */
    margin-bottom: 5px; /* Spacing below each subsection */
}

/* Job Titles or Roles */
.work_experience_role h2 span.company {
    font-style: italic; /* Italics for company names */
    font-weight: normal; /* Normal weight to distinguish from titles */
    color: #7f8c8d; /* Muted gray for contrast */
}

/* Spacing for Subsection Details (e.g., bullet points) */
.work_experience_role ul,
.certifications_list ul,
.education_title p {
    margin-top: 5px; /* Space above bullet points */
    margin-bottom: 20px; /* Space below the last bullet point */
}

.cert-logo {
    height: 30px; /* Or any size that fits well */
    width: auto;  /* This ensures the aspect ratio is maintained */
    vertical-align: middle; /* Aligns the image with the text */
    margin-right: 10px; /* Adds some space between the image and the text */
}

/* Bullet List Indentation */
ul {
    list-style: disc outside; /* Ensures bullets are outside and align correctly */
    padding-left: 30px; /* Indents the bullets further */
    margin-top: 10px; /* Adds spacing above the list */
    margin-bottom: 10px; /* Adds spacing below the list */
}

ul li {
    font-size: 14px; /* Font size for details */
    color: #2c3e50; /* Standard dark blue for consistency */
    line-height: 1.6; /* Increased line height for better readability */
    margin-bottom: 5px; /* Space between individual bullet points */
    text-indent: 0; /* Ensures no extra indenting of text */
}

/* Skills Section */
.skills_section {
    margin-top: 30px; /* Add space above the skills section */
}

.skills_header h1 {
    font-size: 26px; /* Matches section headers */
    font-weight: bold;
    color: #3498db;
    margin-bottom: 15px; /* Space below the header */
    border-bottom: 2px solid #3498db; /* Optional underline */
    padding-bottom: 5px;
}

.skills_category {
    display: block; /* Ensure skills categories stack vertically */
    margin-bottom: 15px; /* Add spacing between categories */
}

.skills_category p {
    font-size: 14px; /* Font size for skills */
    color: #2c3e50; /* Standard dark blue */
    line-height: 1.5; /* Moderate line spacing for readability */
    margin-bottom: 5px; /* Space between text lines */
}

.skills_category p strong {
    color: #3498db; /* Blue color for category titles */
    font-weight: bold; /* Emphasize category names */
}