/* General Styles */
@font-face {
    font-family: 'OCRBLetterpressMW01-Regular';
    src: url('assets/fonts/OCR-B-Letterpress.ttf') format('truetype'); /* Adjust the path as needed */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Container to align page content */
.container {
    max-width: 900px; /* Consistent width for all content blocks */
    margin: 0 auto;
    padding: 0; /* Remove padding from container */
}



header {
    background-color: white;
    color: white;
    padding: 15px 0;
    font-family: 'OCRBLetterpressMW01-Regular', sans-serif;
    position: fixed; /* Fixed position to keep it in view */
    top: 0; /* Align it at the top of the viewport */
    width: 100%; /* Full width of the viewport */
    z-index: 1000; /* Ensure it stays on top of other content */
    transition: transform 0.3s ease; /* Smooth transition for movement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow under the header */
}

/* Optional: Add a bit of margin-top to ensure content does not get hidden behind the fixed header */
body {
    margin-top: 40px; /* Adjust this value based on header height */
}

.header-content {
    display: flex;
    align-items: center; /* Vertically center items within this container */
    justify-content: space-between; /* Space out the logo and nav text */
    max-width: 900px; /* Consistent width for the content */
    margin: 0 auto; /* Center the content within the header */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

.logo img {
    max-height: 80px; /* Adjust the max-height to fit your design */
    height: auto;
    display: block; /* Remove extra space below image */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .logo img {
        max-height: 60px; /* Scale down logo on smaller devices */
    }
}

.nav-text nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /* Vertically center nav items */
	    padding: 0 20px; /* Add padding for spacing */
}

.nav-text nav ul li {
    margin-left: 20px;
}

/* Default styles for the navigation links */
/* Default styles for the navigation links */
.nav-text nav ul li a {
    color: black; /* Default color for non-selected links */
    text-decoration: none; /* Remove underline */
}

/* Style for the active link */
.nav-text nav ul li a.active-link {
    color: #4987de; /* Blue color for the active link */
    font-weight: bold; /* Make the active link bold */
}

/* Optional: Hover effect */
.nav-text nav ul li a:hover {
    color: #4987de; /* Blue color on hover */
    font-weight: bold; /* Optional: Make the link bold on hover */
}

#about {
    padding: 80px 0 20px; /* Add top padding to push content down and ensure it's not hidden behind the fixed header */
    background-color: #f4f4f4;
}

#about h2 {
    text-align: center; /* Center-align the "About Me" heading */
    font-family: 'OCRBLetterpressMW01-Regular', sans-serif;
    margin-bottom: 20px;
	color: #4987de;
}

.about-content {
    margin: 0 auto;
    overflow: hidden; /* Ensure the container handles floated elements properly */
    position: relative;
}

.about-content img {
    width: 35%; /* Image takes up 35% of the container width */
    height: auto;
    margin-right: 25px;
    margin-bottom: 25px;
    border-radius: 5px;
    float: left; /* Float the image to the left to allow text wrapping */
}

.about-content .text {
    text-align: left;
    width: 100%; /* Ensure text fills the entire width minus the image */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

#contact {
    padding: 20px 0;
    background-color: #fff;
}

#contact h2 {
    text-align: center; /* Center-align the "Contact Me" heading */
    font-family: 'OCRBLetterpressMW01-Regular', sans-serif;
    margin-bottom: 10px;
    color: #4987de;
}

.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
}

form {
    flex: 1;
    text-align: left;
    margin-right: 40px; /* Margin between form and contact info */
}

.contact-info {
    flex: 1;
    text-align: left;
}

.contact-info a {
    color: black; /* Set the default link color to black */
    text-decoration: none; /* Remove the underline from the links */
}

.contact-info a:hover, .contact-info a:focus, .contact-info a:active {
    color: #4987de; /* Change the color to blue on hover, focus, or click */
    text-decoration: underline; /* Optional: add underline on hover */
}

#contact-text p{
    margin-bottom: 40px; /* Adds some space below the header */
}

.contact-info h3 {
    margin-top: 0; /* Removes the top margin for better alignment */
    margin-bottom: 15px; /* Adds some space below the header */
    color: #4987de;
	font-family: 'OCRBLetterpressMW01-Regular', sans-serif;
}


form input,
form textarea {
    width: 100%; /* Full width */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: block; /* Ensure they are block-level elements */
}

form input::placeholder, form textarea::placeholder {
    color: #888; /* Light grey color for placeholder text */
    font-style: italic; /* Italic style for placeholder text */
}

form button {
    padding: 10px 15px;
    background-color: #4987de;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #215194;
}

.contact-info p {
    margin-bottom: 25px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .about-content, .contact-container {
        flex-direction: column;
    }

    .about-content img {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    form {
        margin-right: 0;
    }
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 768px) {
	
	.container {
    max-width: 90%; /* Consistent width for all content blocks */
    margin: 0 auto;
    padding: 10; /* Remove padding from container */
}
    .about-content, .contact-container {
        flex-direction: column;
    }

    .about-content img {
        max-width: 100%; /* Image takes up 100% width on small screens */
        margin-right: 20px;
        margin-bottom: 20px;
    }
	
	.contact-info {
    flex: 1;
    text-align: left;
	margin-top: 20px;
	
	
}



form input,
form textarea {
    width: 100%; /* Full width */
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
	
}

.contact-container {
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
    align-items: stretch; /* Make children stretch to full width */
}

.form-group {
    width: 90%; /* Ensure full width for each form group */
	
}



    form {
        margin-right: 0;
    }
	
	.logo img {
padding: 10px;


}
}