body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

section {
    width: 100%;
    display: block;
}

#section1 {
    background-color: #d7e5e5;
    height: calc(20vh - 94px);
    position: relative;
    background-image: url('../../../img/header.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100px;
}

.issue-text {
    font-family: sans-serif; /* Clean, professional sans-serif font */
    font-size: 13px; /* Adjust size as needed */
    font-weight: normal; /* Normal weight text */
    position: relative; /* Relative positioning for fine-tuning */
    margin-left: 415px; /* Replaces left with margin for better control */
    top: -69px; /* Keeps vertical position intact */
    color: #333; /* Dark grey color for text */
}

.issue-text1 {
    font-family: sans-serif; /* Clean, professional sans-serif font */
    font-size: 16px; /* Slightly larger text */
    font-weight: normal; /* Normal weight text */
    position: relative; /* Relative positioning for fine-tuning */
    margin-left: 415px; /* Replaces left with margin for better control */
    top: -59px; /* Keeps vertical position intact */
    color: #333; /* Dark grey color for text */
}
#section2 {
    background-color: #f1efed;
    height: calc(20vh + 270px);
    margin-top: -35px; /* Pulls the entire section up by an additional 15px, totaling -25px */
    padding-top: 50px; /* Increases padding-top to compensate for the total upward shift, ensuring content stability */
    position: relative;
}



.badge {
    display: block; /* Ensures the image is a block-level element */
    max-width: 100%; /* Limits the image width to 100% of its container */
    height: auto; /* Keeps the image height proportional to its width */
    margin: 10px auto; /* Centers the image horizontally and adds margin for spacing */
    position: relative; /* Allows for precise positioning adjustments */
    top: 40px; /* Moves the image down by 40px */
    left: -350px; /* Moves the image to the left by 300px */
}


#section3 {
    background-color: #f5f4f2;
    height: calc(20vh + 50px + 280px);
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-text {
    font-family: 'Times New Roman';
    font-size: 32px;
    font-weight: normal;
    position: relative;
    margin-left: 780px; /* Replaces left with margin for better control */
    top: -195px;
    color: #333;
}

.badge-text1 {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    margin-left: 780px; /* Replaces left with margin for better control */
    top: -180px;
    color: #333;
}

.badge-text2 {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    margin-left: 780px; /* Replaces left with margin for better control */
    top: -160px;
    line-height: 16.5px;
    color: #333;
}

.badge-text3 {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    margin-left: 546px; /* Replaces left with margin for better control */
    top: -95px;
    color: #333;
}


.skills-label-container {
    position: relative;
    top: -175px; /* Move the label up by 50px */
    right: -738px; /* Move the label to the right by 20px */
}

.CriteriaText {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Assuming you want a clean, professional sans-serif font */
    font-size: 18px; /* Adjust size as needed */
    font-weight: bold; /* If the text should not be bold, or use 'bold' if it should be */
    position: relative; /* Relative positioning to fine-tune its place */
    left: -900px; /* Adjust as needed to place next to the badge */
    top: 180px; /* Adjust vertically as needed */
    color: #333; /* Dark grey color for text, adjust as needed */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.CriteriaLink {
    font-family: sans-serif; /* Assuming you want a clean, professional sans-serif font */
    font-size: 13px; /* Adjust size as needed */
    font-weight: normal; /* If the text should not be bold, or use 'bold' if it should be */
    position: relative; /* Relative positioning to fine-tune its place */
    left: -860px; /* Adjust as needed to place next to the badge */
    top: 181px; /* Adjust vertically as needed */
    color: #333; /* Dark grey color for text, adjust as needed */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.skills-label {
    font-family: sans-serif;
    font-weight: bold; /* Make text bold */
    font-size: 18px; /* Increase font size */
    position: relative;
    top: -38px;
}

.buttons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 buttons per row */
    gap: 35px 20px; /* Increased vertical spacing to 35px, horizontal remains 20px */
    padding: 20px;
    position: relative;
    top: -90px; /* Move the container up by 20px */
    right: -750px; /* Move the container to the right by 50px */
}
.hover-button {
    /* Adjusted left padding from 24px to 21px to move the text closer to the left edge of the button */
    padding: 12px 24px 12px 14px; /* top, right, bottom, left */
    background-color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: sans-serif;
    text-align: left;
    width: 220px;
    height: 42px;
    font-size: 13px;
}

    .hover-button:hover {
        transform: scale(1.05); /* Scale up for pop-out effect */
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }


.cosmetic-line {
    width: 100%; /* Full width of the container, or specify in px if needed */
    max-width: 1600px; /* Maximum width of the line */
    height: 2px; /* Height of the line, making it look like a thin line */
    background-color: #ccc; /* Grey color */
    position: relative;
    margin-top: 220px; /* Adjusts the vertical positioning */
    left: -100px; /* Adjust the left positioning if needed */
    top: 20px; /* Adjust the top positioning if needed */
}
    

#section4 {
    height: 5vh;
    background-image: url('../../../img/footer.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    margin-top: -34px;
    position: relative;
    z-index: 1;
}
.footer-link1 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to section5 */
    left: 640px; /* Horizontal positioning from the left side of section5 */
    bottom: -255px; /* Positions the link 10px from the bottom of section5 */
    color: #f1efed;
    z-index: 2; /* Ensures the link is above the background color */
}

.footer-link2 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 710px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}

.footer-link3 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 764px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}

.footer-link4 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 785px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}

.footer-link5 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 878px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}
.footer-link6 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 978px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}

.footer-link7 {
    font-family: sans-serif;
    font-size: 9px;
    font-weight: normal;
    position: absolute; /* Ensures the link is positioned relative to its positioned ancestor */
    left: 1115px; /* Start with a more reasonable left position */
    bottom: -255px; /* Adjusts bottom to place it within the visible area */
    color: #f1efed; /* Keeps the color black for visibility */
    z-index: 10; /* Increase z-index to ensure it's on top */
}

.facebook {
    display: block; /* Ensures the image is a block-level element */
    max-width: 100%; /* Limits the image width to 100% of its container */
    height: auto; /* Keeps the image height proportional to its width */
    margin: 10px auto; /* Centers the image horizontally and adds margin for spacing */
    position: relative; /* Allows for precise positioning adjustments */
    top: -85px; /* Moves the image up by 80px (corrected from down since negative moves it up) */
    left: 300px; /* Moves the image to the right by 300px */
    z-index: 10; /* Ensures the image is above other elements */
    transform: scale(0.55); /* Scales the image down to 80% of its original size */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the image */
}

.linkedin {
    display: block; /* Ensures the image is a block-level element */
    max-width: 100%; /* Limits the image width to 100% of its container */
    height: auto; /* Keeps the image height proportional to its width */
    margin: 10px auto; /* Centers the image horizontally and adds margin for spacing */
    position: relative; /* Allows for precise positioning adjustments */
    top: -140px; /* Moves the image up by 80px (corrected from down since negative moves it up) */
    left: 270px; /* Moves the image to the right by 300px */
    z-index: 10; /* Ensures the image is above other elements */
    transform: scale(0.55); /* Scales the image down to 80% of its original size */
}

.twitter {
    display: block; /* Ensures the image is a block-level element */
    max-width: 100%; /* Limits the image width to 100% of its container */
    height: auto; /* Keeps the image height proportional to its width */
    margin: 10px auto; /* Centers the image horizontally and adds margin for spacing */
    position: relative; /* Allows for precise positioning adjustments */
    top: -190px; /* Moves the image up by 80px (corrected from down since negative moves it up) */
    left: 330px; /* Moves the image to the right by 300px */
    z-index: 10; /* Ensures the image is above other elements */
    transform: scale(0.55); /* Scales the image down to 80% of its original size */
}

.youtube {
    display: block; /* Ensures the image is a block-level element */
    max-width: 100%; /* Limits the image width to 100% of its container */
    height: auto; /* Keeps the image height proportional to its width */
    margin: 10px auto; /* Centers the image horizontally and adds margin for spacing */
    position: relative; /* Allows for precise positioning adjustments */
    top: -243px; /* Moves the image up by 80px (corrected from down since negative moves it up) */
    left: 240px; /* Moves the image to the right by 300px */
    z-index: 10; /* Ensures the image is above other elements */
    transform: scale(0.55); /* Scales the image down to 80% of its original size */
}

#section5 {
    background-color: #312d2a;
    flex-grow: 0; /* Ensures section5 takes up any remaining space in the viewport */
    padding-bottom: 107px; /* Provides padding at the bottom to contain the footer link */
    position: relative; /* Sets a relative positioning context for absolutely positioned children */
    z-index: 1; /* Ensures section5 has a defined stacking context */
    overflow: hidden; /* Ensures nothing is clipped */
}

.custom-link-g {
    color: #23678b; /* Set the custom color */
    text-decoration: none; /* Removes underline by default */
    font-weight: bold;
}

.custom-link {
    color: #23678b; /* Set the custom color */
    text-decoration: none; /* Removes underline by default */
    
    
}

    .custom-link:hover {
        text-decoration: underline; /* Adds underline on hover */
    }

    .custom-link:visited {
        color: #23678b; /* Keeps the color consistent even after the link is visited */
    }

.footer-link {
    color: inherit; /* Inherit the text color from the parent element */
    text-decoration: none; /* Removes the underline by default */

}

    .footer-link:hover, .footer-link:focus {
        text-decoration: underline; /* Adds an underline on hover */
        text-decoration-color: white; /* Sets the underline color to white */
        color: white; /* Optional: Changes text color to white on hover if desired */
    }