/* General Styles */
body {
    font-family: 'Roboto', sans-serif; /* Use the new font */
    margin: 0;
    padding: 0;
    color: #ffffff; /* White text for better readability against black background */
    background-color: #000000; /* Set the entire background to black */
}

h1, h2, h3 {
    margin: 0;
    padding: 10px 0;
}

ul {
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove padding */
}

a {
    color: #1dbbb4; /* Teal links for better visibility against black */
    text-decoration: none; /* Remove underline */
}

a:hover {
    color: #ffffff; /* Change to white on hover for better visibility */
}

/* Navigation Styles */
.navbar {
    background: #000000; /* Black background for the navbar */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure navbar is on top */
}

.navbar ul {
    display: flex; /* Flexbox for horizontal layout */
    justify-content: center; /* Center items */
    padding: 10px 0; /* Padding around navbar */
}

.navbar li {
    margin: 0 15px; /* Space between links */
}

.navbar a:hover {
    color: #1dbbb4; /* Change color on hover */
}

/* Header Styles */
header {
    text-align: center;
    padding: 20px;
    background: #000000; /* Black background for header */
    color: white; /* White text */
}

.logo {
    max-width: 150px; /* Responsive logo size */
}

/* Button Styles */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1dbbb4; /* Teal background */
    color: #ffffff;
    border: none;
    border-radius: 25px; /* Rounded edges */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
    margin-top: 10px; /* Space above the button */
    transition: background 0.3s;
}

.cta-button:hover {
    background-color: #366963; /* Darker teal on hover */
}

/* Section Styles */
main {
    padding: 20px;
    max-width: 1200px; /* Max width for larger screens */
    margin: auto; /* Center the main content */
    background-color: #000000; /* Black background for main content */
}

h2 {
    color: #1dbbb4; /* Teal color for section headings */
    border-bottom: 2px solid #1dbbb4; /* Underline effect */
    padding-bottom: 5px;
}

/* Experience and Certifications Styles */
#experience ul, #certifications ul {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 15px; /* Space between items */
}

#experience li, #certifications li {
    padding: 10px; /* Padding for individual items */
    transition: transform 0.2s; /* Animation on hover */
}

#experience li:hover, #certifications li:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}

/* Icon Styles */
.icon {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Space between icon and text */
}

/* Contact Form Styles */
#contact {
    margin-top: 20px;
}

#contact form {
    display: flex;
    flex-direction: column; /* Stack form fields vertically */
    gap: 10px; /* Space between fields */
}

#contact label {
    margin-bottom: 5px; /* Space below labels */
    color: #ffffff; /* White text for labels */
}

#contact input, #contact textarea {
    padding: 10px; /* Padding inside form fields */
    border: 1px solid #444; /* Dark border */
    border-radius: 5px; /* Rounded corners */
    background-color: #222; /* Dark background for input fields */
    color: #ffffff; /* White text inside input fields */
}

#contact button {
    background-color: #1dbbb4; /* Teal background for submit button */
    color: white; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding */
    cursor: pointer; /* Pointer cursor on hover */
}

#contact button:hover {
    background-color: #366963; /* Darker teal on hover */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 20px 0;
    background: #000000; /* Black background for footer */
    color: white; /* White text */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column; /* Stack navbar items vertically */
    }

    .navbar li {
        margin: 10px 0; /* Space between links */
    }

    header {
        padding: 15px; /* Less padding on mobile */
    }

    .cta-button {
        margin-top: 10px; /* Space above button */
        font-size: 1rem; /* Slightly larger text */
    }

    #contact form {
        gap: 5px; /* Less space in form on mobile */
    }
}