/* General Page Styling */
/* === HEADER WRAPPER === */
.header-wrapper { /* Wrapper for header section */
    display: flex; /* Flexbox for layout */
    justify-content: center;  /* Centers header block */
    width: 100%;             /* Full width for header */
}

/* === HEADER SECTION === */
.header-section {
    display: flex;
    flex-direction: row-reverse; /* Image on the right */
    align-items: center;
    gap: 20px;
    padding: 20px 30px;          /* Tighter padding so background isn't too large */
    background-color: #0fab0f;
    border-radius: 10px;
    text-align: center;          /* Center headings */
}

/* === HEADER IMAGE === */
.profile-image {
    width: 150px;
    height: 110px;
    border-radius: 0;
    border: none;
}

/* === HEADER TEXT === */
.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.header-text h1,
.header-text h5,
.header-text h6 {
    margin: 5px 0;
}

h5, h6 {
    font-style: italic;
    color: #c8c7c7; /* light gray */
}

/* Headings */
h1 {                              /* Main title styling */
    color: #ffffff;             /* white */
    text-align: center;           /* Centered main title */
    font-size: 2.0em;             /* Larger font size for main title */
}
h2 { /* Section title styling */
    color: #ffffff; /* white */
    text-align: center; /* Centered section titles */
}
h4 { /* Subsection title styling */
    color: #ffffff; /* white */
    text-align: center;
}  
h5 { /* Subtitle styling */
    color: #c8c7c7; /* light gray */
    text-align: center;
    font-style: italic; /* fixed italics */
}   
h6 { /* Additional subtitle styling */
    color: #c8c7c7; /* light gray */
    text-align: center;
    font-style: italic; /* fixed italics */
}

/* General Body Styling */
body {
    background-color: #0b0841; /* dark blue background */
    color: #ffffff; /* white text */
    font-family: 'Roboto', Arial, sans-serif; /* Use Roboto font with fallback */
    margin: 50px; /* margin around the body */
    font-size: 16px; /* base font size */
    line-height: 1.5; /* improved readability */
    padding: 10px; /* padding around the body */
}


/* Paragraphs */
p {
    color: #ffffff;
    text-align: justified; /* justified text for paragraphs */
}

.section-separator { /* Horizontal line to separate sections */
    width: 60%;            /* Adjust to match paragraph width */
    max-width: 600px;      /* Same as the centered block width */
    margin: 40px auto;     /* Center horizontally with top/bottom spacing */
    border: none;          /* Remove default styles */
    border-top: 2px solid white; /* White line */
    opacity: 0.6;          /* Optional: softer line */
}


/* Links */
a {                       /* Link styling */
    color: #50fd00;       /* bright green links */
    text-decoration: none; /* no underline */
}
a:hover {                 /* Link hover effect */
    color: #ff0000;     /* red on hover */
}

.center-block {           /* Centered block for content */
    max-width: 600px;     /* Make it narrow like a column */
    margin: 40px auto;    /* Center block horizontally */
    text-align: left;     /* Text aligns naturally inside */
}

.center-block a {          /* Centered link styling */
    display: inline;       /* Link behaves like text */
    text-align: center;    /* Optional: Center the link itself */
    margin-top: 10px;      /* Space above the link */
}

.education-link {          /* Centered link for education section */
    text-align: center;    /* Center the link */
    margin: 20px auto;     /* Center the link horizontally */
    max-width: 600px;      /* Limit width */
}

/* Contact Section */
.contact-info {             /* Contact information section */
    text-align: center;     /* Centers text */
    margin: 40px auto;      /* Centers section horizontally */
    max-width: 600px;       /* Limit width for readability */
}
p.contact-info {            /* Paragraph in contact section */
    color: #ffffff;       /* white text */
    font-size: 11px;        /* Smaller font size for contact info */
}
.contact-link button {
    text-align: center !important; /* Center text in button */
    display: inline-block; /* Button-like appearance */
    color:  #50fd00;  /* bright green text */
    margin-top: 20px; /* Space above button */
    background-color: transparent; /* No background color */
    padding: 10px 20px; /* Padding for button */
    border: none;
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Font size for button */
}

.contact-link {
    text-align: center; /* Center the button inside this container */
}

.contact-link button:hover {
    color: red;

}

/* Footer */
footer.footer {                /* Footer styling */
    display: block;            /* Block display for footer */
    width: 100%;               /* Full page width */
    background-color: #333;  /* Dark footer */
    color: white;            /* White text */
    text-align: center !important; /* Force center */
    padding: 20px 0;           /* Vertical spacing */
    margin-top: 40px;          /* Space above footer */
}
.footer p {               /* Paragraph in footer */
    text-align: center;   /* Force footer text to center */
    margin: 0;            /* No margin */
    font-size: 14px;      /* Font size for footer text */
}
footer.footer p {         /* Footer paragraph styling */
    margin: 0;            /* No margin */
    font-size: 14px;      /* Font size for footer text */
}

/* Responsive Design for Smaller Screens */
/* === MOBILE RESPONSIVE === */
@media (max-width: 600px) {
    .header-section {
        flex-direction: column;  /* Stack image above text */
        width: auto;             /* Let it wrap the content */
        text-align: center;
    }
    .profile-image {
        margin-bottom: 10px;     /* Space between image and text */
    }
}