body {
    font-family: 'Roboto', sans-serif;
    margin: 0 auto; /* Center the body content */
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
    max-width: 960px; /* Limit content width on larger screens */
}

header {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    font-size: 2.5em;
    margin: 0;
}

h2 {
    font-size: 1.5em;
    margin: 10px 0;
}

h3 {
    font-size: 1.2em;
    margin: 5px 0;
}

section {
    background: white;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Improved list readability */
ul {
    list-style-type: disc; /* standard bullet points */
    padding-left: 20px; /* indentation for clarity */
    margin-top: 5px;
    margin-bottom: 10px;
}

li {
    margin: 6px 0;
    line-height: 1.5;
}

/* Contact info */
.contact-info {
    margin-bottom: 20px;
}

/* These sections already have default block behavior, so they stack well */
.skills,
.professional-skills,
.experience,
.education,
.certifications {
    margin-bottom: 20px;
}

.footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
    color: #777;
}

.icon {
    margin-right: 8px;
    color: #007bff;
    vertical-align: middle; /* Ensures icons align vertically with text */
}

a {
    text-decoration: none;
    color: #007bff;
    vertical-align: middle; /* Ensures links align vertically with icons/text */
}

a:hover {
    text-decoration: underline;
}

/* New rule for the contact groups */
.contact-group {
    white-space: nowrap; /* PREVENTS line breaks within this span */
    display: inline-block; /* Allows margins and vertical alignment to work correctly */
    /* Add some margin to separate groups and the | visually */
    margin: 0 5px; /* Adjust as needed for spacing between contact items and separators */
}

/* -------------------- Responsive Design -------------------- */

/* Media Query for screens up to 768px wide (e.g., tablets) */
@media (max-width: 768px) {
    body {
        padding: 15px; /* Reduce overall padding */
    }

    h1 {
        font-size: 2em; /* Slightly smaller heading on tablets */
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    section {
        padding: 12px; /* Reduce section padding */
        margin: 8px 0; /* Adjust section margin */
    }

    .contact-info p {
        /* Allow paragraph to wrap, but items inside .contact-group won't break */
        line-height: 1.6; /* Slightly increase line height for better readability on smaller screens */
    }
}

/* Media Query for screens up to 480px wide (e.g., mobile phones) */
@media (max-width: 480px) {
    body {
        padding: 10px; /* Further reduce overall padding for small screens */
    }

    h1 {
        font-size: 1.8em; /* Smaller heading on mobile */
    }

    h2 {
        font-size: 1.2em;
    }

    h3 {
        font-size: 1em;
    }

    section {
        padding: 10px; /* Further reduce section padding */
        margin: 7px 0;
    }

    ul {
        padding-left: 15px; /* Reduce list indentation */
    }

    li {
        margin: 5px 0; /* Reduce space between list items */
    }

    .contact-info {
        font-size: 0.95em; /* Slightly smaller contact info text */
    }

    .footer {
        font-size: 0.8em; /* Smaller footer text */
    }

    /* Adjust spacing for contact items on very small screens */
    .contact-group {
        margin: 0 2px; /* Tighter spacing on small screens */
    }
}

/* -------------------- Print Specific Styles (for PDF export) -------------------- */
@media print {
    body {
        background-color: #fff; /* Ensure white background for printing */
        /* These properties are crucial to ensure colors and shadows are printed */
        -webkit-print-color-adjust: exact; /* For WebKit browsers (Chrome, Safari) */
        print-color-adjust: exact;         /* Standard property */
        
        margin: 0; /* Remove default browser print margins */
        padding: 1cm; /* Set custom print margins (adjust as needed) */
        max-width: none; /* Allow content to use full page width available within print margins */
    }

    /* Prevent sections from breaking across pages */
    section {
        page-break-inside: avoid; /* This is the key property */
    }

    /* Ensure a heading isn't left alone at the very bottom of a page */
    h2 {
        page-break-after: avoid;
    }

    /* Also prevent lists and list items from breaking where possible */
    ul, li {
        page-break-inside: avoid;
    }

    /* Ensure backgrounds and box-shadows are printed (default for @media print is usually to remove them) */
    header, section, .footer {
        background: white; /* Explicitly set background if it's part of design */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Retain box shadow */
        /* If you have other specific colors or gradients, ensure they are here */
    }

    /* Links and icons should retain their original colors as per design */
    a, .icon {
        color: inherit; /* Inherit color from parent, or set specific color if desired */
        text-decoration: none; /* Keep links without underline in print, if that's preferred. Change to 'underline' if you want them to be obvious. */
    }

    /* The contact groups should still behave as non-breaking units */
    .contact-group {
        white-space: nowrap;
        display: inline-block;
        margin: 0 5px; /* Keep consistent spacing */
    }
}