html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #f4f4f4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full viewport height */
    margin: 0;
    padding: 0;
}

.background {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    background-image: url('office-background.jpg'); /* Ensure this path is correct */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden; /* Prevents any content from spilling over */
}

.nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.profile-header {
    text-align: center;
    padding: 20px;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #fff;
}

h1 {
    margin: 0;
}

h2 {
    font-size: 1em; /* Increases the paragraph text size */
    font-family: 'Ariel', sans-serif; /* Example font, change as you like */
}

.main-content {
    flex: 1 0 auto; /* Allows this element to grow and shrink as needed */
    overflow-y: auto; /* Adds a scrollbar to the main content if content overflows */
    padding: 20px; /* Ensures padding around the content */
    padding-bottom: 50px; /* Adds extra space at the bottom above the footer */
    margin-bottom: 120px; /* Adds a bottom margin to ensure it does not touch the footer */
    max-width: 1500px; /* Maximum width to ensure content does not stretch too far on larger screens */
    margin: auto; /* Centers the content horizontally */
    box-sizing: border-box; /* Includes padding in width calculations */
    overflow-x: auto;
}


.tabcontent {
    background: rgba(3, 3, 3, 0.8); /* Semi-transparent background for content sections */
    margin: 2em 0;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Ensures content can scroll within each tab */
    max-height: 55vh; /* Limits the height of content sections */
    overflow-x: auto;
}


footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000; /* Ensures footer stays above other elements */
}

.tablink {
    font-size: 20px; /* Increase the font size */
    padding: 15px 30px; /* Increase the padding for bigger buttons */
    margin: 0 10px; /* Space out the buttons a bit more */
    background-color: rgba(0, 0, 0, 0.5); /* Transparency for button backgrounds */
    color: #fff; /* Adjust text color for readability */
    border: none; /* Remove borders */
    border-radius: 5px; /* Optional: for rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
}
/* Responsive button sizing */
@media (max-width: 768px) {
    .main-content {
        padding: 10px; /* Adjust padding for smaller screens */
        padding-bottom: 20px; /* Greater padding at the bottom for small screens */
        margin-bottom: 150px; /* Larger bottom margin for small screens */
    }

    .footer-fixed {
        position: relative; /* Changes footer positioning on small screens */
    }

    .profile-header, .main-content, footer {
        padding: 10px; /* Adjusts padding for small screens */
    }

    .tablink, .text-size-controls button {
        font-size: 14px; /* Adjusts font size for small screens */
        padding: 8px 16px; /* Adjusts padding for small screens */
    }
    .tabcontent {
        padding: 10px;  
    }
    .tabcontent p, .tabcontent li {
        font-size: 14px;
    }
}
.text-size-controls {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 10; /* Ensures text size controls are visible and accessible */
}

.text-size-controls button {
    background-color: #444;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 5px; /* Spaces buttons out */
}

.text-size-controls span {
    color: white; /* Label color for better visibility */
    margin-right: 10px; /* Space between label and buttons */
    vertical-align: middle; /* Aligns label with buttons */
    font-size: 1em; /* Matching font size to buttons for consistency */
}
.footer-fixed {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Adjust color/transparency as needed */
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    z-index: 10; /* Ensures footer is above other content */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* Adds shadow for better visibility */
    flex-shrink: 0; /* ensures the footer does not shrink */
    clear: both; /* Ensures no floating elements interfere with the footer */
}

/* Button styles to use the background image */
.button-background {
    background-image: url('office-background.jpg'); /* Replace with your actual image path */
    background-size: cover;
    border: none;
    color: white; /* Adjust text color for readability */
    padding: 15px 30px; /* Adjust padding for bigger buttons */
    font-size: 18px; /* Adjust font size as needed */
    margin: 10px; /* Add some space around the buttons */
    cursor: pointer;
    transition: transform 0.3s; /* Smooth transform transition */
}

.button-background:hover {
    transform: scale(1.05); /* Slight scale up effect on hover */
}
.tablink:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Darken button background on hover */
    transform: scale(1.1); /* Slightly increase size on hover */
}
#Summary h2 {
    font-size: 3em; /* Makes the header larger */
    font-family: 'Rockwell Extra Bold', sans-serif;
    font-weight: bold; /* Makes the header text bold */
}

#Summary p {
    font-size: 1.5em; /* Increases the paragraph text size */
    font-family: 'Ariel', sans-serif; /* Example font, change as you like */
    line-height: 1.6; /* Increases the space between lines for better readability */
    color: #eaeaea; /* Light grey color, but choose any color that fits the design */
}
#Certifications button {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white for a sleek look */
    color: #fff; /* White text color */
    border: 1px solid #fff; /* White border */
    padding: 10px 20px; /* Padding for larger button */
    font-size: 1em; /* Larger font size */
    margin: 5px; /* Margin around buttons */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease-in-out; /* Smooth transition for interactions */
}

#Certifications button:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Increase opacity on hover */
    color: #000; /* Change text color on hover */
    transform: translateY(-3px); /* Slight raise effect on hover */
}
#Skills h2 {
    font-size: 3em; /* Makes the header larger */
    font-family: 'Rockwell Extra Bold', sans-serif;
    font-weight: bold; /* Makes the header text bold */
}

#Skills p {
    font-size: 1.8em; /* Increases the paragraph text size */
    font-family: 'Ariel', sans-serif; /* Example font, change as you like */
    line-height: 1.6; /* Increases the space between lines for better readability */
    color: #eaeaea; /* Light grey color, but choose any color that fits the design */
}

#Certifications h2 {
    font-size: 3em; /* Makes the header larger */
    font-family: 'Rockwell Extra Bold', sans-serif;
    font-weight: bold; /* Makes the header text bold */
}

#Certifications p {
    font-size: 2em; /* Increases the paragraph text size */
    font-family: 'Ariel', sans-serif; /* Example font, change as you like */
    line-height: 1.6; /* Increases the space between lines for better readability */
    color: #eaeaea; /* Light grey color, but choose any color that fits the design */
}
*, *:before, *:after {
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}
.job-section {
    display: flex;
    justify-content: space-between;
    overflow: hidden; /* Hide overflow */
    line-height: 1.6; /* Increase line spacing */
}
.tabcontent p {
    line-height: 1.6;
}
#WorkExperience h2, #WorkExperience h3, #WorkExperience h4, #WorkExperience p, #WorkExperience li {
    font-size: 0.6em; /* Adjust the font size accordingly */
}
.job-section ul li {
    /* existing styles */
    word-wrap: break-word; /* Ensure long words do not cause overflow */
}
.small-text {
    font-size: 8px; /* Example smaller font size */
}