/* General Styling */
body {
    
    background-color: #D2B48C; /* Tan color */
    background-image: none; /* Optional: Remove any background image */
    margin: 0;
    padding: 0;
}

header {
    position: fixed; /* Keeps the header fixed at the top */
    top: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 20px; /* Set fixed height */
    background: rgba(0, 0, 0, 0.8); /* Solid or semi-transparent black background */
    color: white;
    z-index: 1000; /* Ensures the header stays above other elements */
    padding: 10px 0px; /* vertical x horizontal, leave H at zero for proper centering*/
}

.logo {
    max-width: 200px; /* OR Adjust the size of the logo */
    height: auto; /* Maintain aspect ratio */
}

.logo-container {
    display: flex; /* Enables Flexbox layout */
    flex-direction: column; /* Stack logo and text vertically */
    align-items: center; /* Aligns items vertically */
    justify-content: center; /* Centers items horizontally */
    gap: 0px; /* Adds space between the logo and text */
    margin: 50px auto 0px; /* Top, Sides, Bottom margin */
    /*border: 1px solid rgb(19, 151, 63); /* Debug border */
    max-width: 820px; /* Restrict the maximum width */
    width: 100%; /* Ensures responsiveness */
    box-sizing: border-box; /* Includes padding and border in the width */
    
}

.logo-text {
    font-size: 2rem; /* Adjust font size for the text */
    font-weight: bold;
}

.line-top, .line-bottom {
    display: block; /* inline means inline block means above each other */
    margin: 0px; /* Removes any extra margin */
    padding: 0px; /* Removes any extra padding */
}

/* Navbar Styling */

.navbar ul {
    list-style: none; /* Remove bullet points */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    justify-content: center; /* Center links horizontally */
    gap: 20px; /* Space between links */
    display: flex; /* Show menu when active */

}

.navbar a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease;
    white-space: nowrap; /* Prevent wrapping within each link */

}

.navbar a:hover {
    color: #ffcc00; /* Highlight color on hover */
    text-decoration: underline; /* Add underline on hover */
}



/* Hamburger Menu Button */
.menu-toggle {
    display: none; /* Hidden by default */
    background: rgba(0, 0, 0, 0); /*sets the color of the Hmaburger*/
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    position: absolute;
    width: 30px; /* Default width */
    /*height: 10px; /* Set the height of the button */
    top: 0px; /*position of hamburger menu*/
    right: 10%; /*position of hamburger menu*/
    padding: 1px; 
    z-index: 1001;
}

.menu-toggle:hover {
    color: #ffcc00; /* Change icon color on hover */
    
}

/* vertical navbar related to hamburger menu*/
.navbar ul.active {
    display: flex; /* Show menu when active */
    flex-direction: column; /* Stack items vertically */
    position: absolute;
    top: 40px; /* Adjust to place the menu below the hamburger */
    right: 5%; /* Align to the right */
    width: 25%; /* Set specific width for the menu */
    background: rgba(0, 0, 0, 0.80); /*sets the color of the vertica navbar*/
    text-align: center; /*sets position of text in vertical menu*/
    padding-bottom: 10px; /* Add space at the bottom of the dropdown */
}



/* Index Page (Landing Page) */
.index-page {
    /* Add styles specific to the index page */
    background-color: #D2B48C; /* Tan background (if different from the global body) */
    color: black; /* Default text color for the index page */
}

/* Mech Design Page */

.mechdesign-page {
    
    color: black; /* Text color */
    background-color: #D2B48C; /* Tan background (if different from the global body) */
}

.mechdesign-page h1 {
    font-size: 2.5rem;
}
.mechdesign-page h2 {
    font-size: 1.5rem;
}
.mechdesign-page p,
.mechdesign-page ul {
    font-size: 1.0rem;
}

/* Hero Wrapper Styling */
.hero-wrapper {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    flex-direction: column;
    justify-content: center;
    color: inherit; /* Inherits the text color from body */
    position: relative; /* Allow offset adjustments */
    /*padding: 10px; */
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    padding: 0px;
    max-width: 800px; /* OR Restricts the section width */
    margin: 0 auto; /* Centers the section horizontally */
    /*border: 1px solid red; /* Debug border for Hero */
    margin-bottom: 0; /* Remove bottom margin */
}

/* Hero Section Heading Styles */
.hero h1 {
    font-size: 5rem; /* overrides in Media*/
    margin: 0px 0 0px;
    
}

.hero h2 {
    font-size: 2.5rem;
    margin: 0px 0 10px;
    
}

.hero p {
    font-size: 1rem;
    margin: 0px 10px 0px; /* Top, Sides, Bottom*/
    line-height: 1.5; /* Adjust line height for readability */
}

.mds-services {
    max-width: 800px;
    margin: 0px auto;
    padding: 0px;
    /*border: 1px solid blue; /* Debug border */
    
}

.mds-services h2 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    grid-column: 1 / -1; /* Headings span across both columns */
    text-align: center; /* Center-align all text */
    text-decoration: none;
}

.mds-services ul {
    list-style: none; /* Removes bullets */
    padding: 0; /* Removes default padding */
    margin: 0 auto; /* Centers the list horizontally on the page */
    text-align: center; /* Centers the text in each list item */
    
}


.mds-services ul li {
    margin-bottom: 1px; /* Space between items */
    line-height: 1.2;
    color: black;
    font-size: 1.2rem; /* Adjust the font size */
}



.mds-skills {
    max-width: 400px;
    margin-left: 150px; /* Slightly push .mds-skills to the right */
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 30px;
    transform: translateX(20px); /* Move the section 20px to the right */
    }
    
    /*border: 1px solid blue; /* Debug border for Hero */
    


.mds-skills h2 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    grid-column: 1 / -1; /* Headings span across both columns */
    text-align: left; /* Center-align all text */
    text-decoration: none;
}

.mds-skills ul {
    list-style: disc; /* Removes bullets */
    padding: 0; /* Removes default padding */
    margin: 0 auto; /* Centers the list horizontally on the page */
    text-align: left; /* Centers the text in each list item */
    padding-left: 40px;
    
}

.mds-skills ul li {
    margin-bottom: 1px; /* Space between items */
    line-height: 1.2;
    color: black;
    font-size: 1.0rem;
}





/*Bottom of index page*/
.contact-info {
    text-align: center; /* Centers the text inside the container */
    margin: 0px auto; /* Optional: Adds spacing above and below the container */
    padding: 0px; /* Optional: Adds padding inside the container */
}


/* Phone Link Styling */
.phone-link {
    color: black; /* Sets the link text color */
    text-decoration: none; /* Removes underline */
    font-weight: bold; /* Makes the link stand out */
    font-size: 1.6rem; /* OR 420 550 Adjust font size to match your design */
    transition: color 0.3s ease; /* Adds smooth transition for hover effects */
}

.phone-link:hover {
    color: #ffcc00; /* Highlight color when hovered */
    text-decoration: underline; /* Optional: underline on hover for better UX */
}

/* Email Link Styles */
.email-link {
    color: black; /* Text color */
    text-decoration: none; /* Removes underline */
    font-size: 1.6rem; /* OR 420 550 Adjust the size to fit your design */
    font-weight: bold; /* Makes the link stand out */
    padding: 0px 0px; /* Adds spacing around the link */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.email-link:hover {
    color: #ffcc00; /* Highlight color when hovered */
    text-decoration: underline; /* Optional: underline on hover for better UX */
}

.icon {
    font-size: 1.5rem; /* Adjust size as needed */
    vertical-align: middle; /* Aligns the icon with the text */
}

.contact-row {
    display: flex; /* Aligns icon and text side by side */
    align-items: flex-start; /* Ensures proper vertical alignment */
    justify-content: center; /* Centers the icon and text horizontally */
    gap: 10px; /* Adds space between icon and text */
    text-align: center; /* Ensures multiline text stays centered */
}

/* Truck animation*/
.truck {
    position: fixed;
    left: -100px; /* Starts off-screen */
    font-size: 2rem; /* Adjust truck size */
    z-index: 1000; /* Ensure the truck is above other elements */
    visibility: hidden; /* Hidden until animation starts */
}

.truck.animate {
    visibility: visible; /* Make it visible when animation starts */
    animation: driveTruck 4s ease-in-out forwards; /* Start the animation */
}

@keyframes driveTruck {
    0% {
        transform: translateX(-10); /* Start off-screen */
    }
    50% {
        transform: translateX(60vw); /* Move to the middle of the screen */
    }
    60% {
        transform: translateX(60vw); /* Pause in the middle */
    }
    100% {
        transform: translateX(-10vw); /* Drive off-screen */
    }
}

.content-overlay {
    max-width: 800px; /* Limit the content width for readability */
    color: black; /* Text color */
    padding: 20px; /* Internal spacing */
    text-align: center; /* Center-align the text */
}


/* mayne Services Page */
.mayneservices-page {
    max-width: 800px; /* Constrain width */
    margin: 0 auto; /* Center content horizontally */
    padding: 0px; /* Add spacing */
    color: black;/* Text color */
    text-align: left; /* Center-align text */
    box-sizing: border-box; /* Include padding in width calculations */
    
}


div.mayneservices-page h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    text-align: left;
}

.mayneservices-page ul {
    list-style: disc;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.mayneservices-page li {
    margin-bottom: 5px;
    font-size: 1.2rem;
}



/* Portfolio Page */
.portfolio-page {
    max-width: 800px; /* Constrain width */
    margin: 0 auto; /* Center content horizontally */
    padding: 20px; /* Add spacing */
    color: black; /* Text color */
    text-align: left; /* Center-align text */
    box-sizing: border-box; /* Include padding in width calculations */
    background: none; /* Remove any black background */
}


.portfolio-page blockquote {
    font-style: italic; /* Italicize blockquote text */
    margin: 20px 0; /* Add vertical spacing */
    color: black;
}

.portfolio-page h1 {
    font-size: 1.5rem;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
}

.portfolio-page h3 + p {
    margin-top: -15px; /* Adjust the value as needed */
}


/* About Page */
.about-page {
    height: 100vh;
    display: flex; /* Use Flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 20px; /* Adjust padding for spacing */
    box-sizing: border-box; /* Include padding in height/width calculations */
}

.about {
    max-width: 800px; /* Limit the content width for readability */
    color: black; /* Text color */
    padding: 20px; /* Internal spacing */
    text-align: left; /* Center-align the text */
    
}

.about h1 {
    font-size: 1.0rem;
    margin-bottom: 20px;
    color: black;
    align-items: center; /* Center vertically */
}

.about h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: black;
    text-align: left; /* Center-align the text */
}

.about p {
    font-size:  1.0rem !important;
    line-height: 1.2rem;
    margin-bottom: 15px;
}


.about ul {
    line-height: 1.2;
}

.career-highlights li {
    margin-bottom: 10px; /* Adjust this value for more or less spacing */
}



/* Contact Page */
.contact-page {
    max-width: 800px; /* Constrain width */
    margin: 0 auto; /* Center content horizontally */
    padding: 0px; /* Add spacing */
    color: black; /* Text color */
    text-align: center; /* Center-align text */
    background-color: #D2B48C; /* Tan background (if different from the global body) */
}



.contact-page h1 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    text-align: center; /* Center-align all text */
}

.contact-us {
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Horizontally center children */
    justify-content: center; /* Vertically center children */
    text-align: center; /* Center-align text */
    width: 100%; /* Ensure it spans the full width of the container */
    margin: 0 auto; /* Center horizontally */
    padding: 20px; /* Optional: Adjust for inner spacing */
    box-sizing: border-box; /* Ensure padding is included in height/width */
}

.contact-us h1 {
    font-size: 1.3rem;
}

.contact-us p {
    font-size: 1.3rem;
}

.contact-us a {
    font-size: 1.0rem;
}


/* adaptive display****************************************************************** */
@media (max-width: 850px) {
    .menu-toggle {
        display: block; /* Show hamburger menu */
    }
    .navbar ul {
        display: none; /* Hide original navbar */
    }
    .navbar ul.active {
        display: flex; /* Show vertical navbar when active */
    }
    .navbar ul.active a {
        white-space: normal; /* Allow text wrapping for links */
        word-wrap: break-word; /* Break words if necessary (optional) */
    }
    .hero h1 {
        font-size: 3rem !important;
    }
    .hero h2 {
        font-size: 1.5rem !important;
    }
    .logo {
        max-width: 200px; /* Adjust the size of the logo */
        height: auto; /* Maintain aspect ratio */
    }
    .line-top, .line-bottom {
        display: inline; /* Keep both lines in the same row initially */
    }

    /*.logo-container {flex-direction: column;} /* Stack logo and text vertically */
    
 
   .mechdesign-page {
        padding: 15px;
    }
    .mechdesign-page h1 {
        font-size: 2.5rem;
    }
    .mechdesign-page h2 {
        font-size: 1.5rem;
    }
    .mechdesign-page p {
        font-size: 1rem;
    }
    .mechdesign-page ul {
        font-size: 0.9rem;
        padding-left: 20px;
    }
        
    .mayneservices-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .mayneservices-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .mayneservices-page h2 {
        font-size: 1.5rem; /* Adjust subheading size for smaller screens */
    }
    .mayneservices-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
    .mayneservices-page ul {
        font-size: 0.9rem; /* Adjust list font size */
        padding-left: 20px; /* Add spacing for list alignment */
    }

    .portfolio-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .portfolio-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .portfolio-page h2 {
        font-size: 1.5rem; /* Adjust subheading size for smaller screens */
    }
    .portfolio-page h3 {
        font-size: 1.2rem; /* Adjust sub-subheading size */
    }
    .portfolio-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
    .portfolio-page ul {
        font-size: 0.9rem; /* Adjust list font size */
        padding-left: 20px; /* Add spacing for list alignment */
    }
    .contact-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .contact-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .contact-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
}


/* adaptive display****************************************************************** */
@media (max-width: 550px) {
    .menu-toggle {
        display: block; /* Show hamburger menu */
    }
    .navbar ul {
        display: none; /* Hide original navbar */
    }
    .navbar ul.active {
        display: flex; /* Show vertical navbar when active */
    }
    .navbar ul.active a {
        white-space: normal; /* Allow text wrapping for links */
        word-wrap: break-word; /* Break words if necessary (optional) */
    }
    .hero h1 {
        font-size: 3rem !important;
    }
    .hero h2 {
        font-size: 1.5rem !important;
    }
    .logo {
        max-width: 200px; /* Adjust the size of the logo */
        height: auto; /* Maintain aspect ratio */
    }
    .line-top, .line-bottom {
        display: inline; /* Keep both lines in the same row initially */
    }

    /*.logo-container {flex-direction: column;} /* Stack logo and text vertically */
    

    .phone-link {
        font-size: 1.4rem; /* OR 420 Adjust font size to match your design */
        
    }
        
    /* Email Link Styles */
    .email-link {
        font-size: 1.4rem; /* OR 420 Adjust the size to fit your design */
    }
 
   .mechdesign-page {
        padding: 15px;
    }
    .mechdesign-page h1 {
        font-size: 2.5rem;
    }
    .mechdesign-page h2 {
        font-size: 1.5rem;
    }
    .mechdesign-page p {
        font-size: 1rem;
    }
    .mechdesign-page ul {
        font-size: 0.9rem;
        padding-left: 20px;
    }
    
    .mayneservices-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .mayneservices-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .mayneservices-page h2 {
        font-size: 1.5rem; /* Adjust subheading size for smaller screens */
    }
    .mayneservices-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
    .mayneservices-page ul {
        font-size: 0.9rem; /* Adjust list font size */
        padding-left: 20px; /* Add spacing for list alignment */
    }
    .portfolio-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .portfolio-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .portfolio-page h2 {
        font-size: 1.5rem; /* Adjust subheading size for smaller screens */
    }
    .portfolio-page h3 {
        font-size: 1.2rem; /* Adjust sub-subheading size */
    }
    .portfolio-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
    .portfolio-page ul {
        font-size: 0.9rem; /* Adjust list font size */
        padding-left: 20px; /* Add spacing for list alignment */
    }
    .contact-page {
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .contact-page h1 {
        font-size: 2.5rem; /* Adjust heading size for smaller viewports */
    }
    .contact-page p {
        font-size: 1rem; /* Make paragraph text slightly smaller */
    }
}


/* adaptive display****************************************************************** */
@media (max-width: 420px) {
    .navbar ul a {
        font-size: 0.8rem; /* Adjust text size for small screens */
    }
    .hero h1 {
        font-size: 2rem !important;
        
    }
    .hero h2 {
        font-size: 1rem !important;
    }

    .icon {
        font-size: 1.5rem; /* Adjust size as needed */
        vertical-align: middle; /* Aligns the icon with the text */
    }
    
    .logo {
        max-width: 175px; /* Adjust the size of the logo */
        height: auto; /* Maintain aspect ratio */
    }
    .logo-text {
        font-size: 1.6rem; /* Adjust font size for the text */
        font-weight: bold;
    }

    .line-top, .line-bottom {
        display: block; /* Keep both lines in the same row initially */
        text-align: center; /* Center-align the text */
    }

    /*.logo-container {
        flex-direction: column;} /* Stack logo and text vertically */
    

    .phone-link {
        font-size: 1.2rem; /* Adjust font size to match your design */
    }

    .email-link {
        font-size: 1.2rem; /* Adjust the size to fit your design */
    }

    .mds-services h2 {
        font-size: 1.3rem;
    }
    
    .mds-services ul li {
        margin-bottom: 1px; /* Space between items */
        line-height: 1.0;
        color: black;
        font-size: 1.0rem; /* Adjust the font size */
    }
    
    .mechdesign-page {
        padding: 10px;
    }
    .mechdesign-page h1 {
        font-size: 2rem;
    }
    .mechdesign-page h2 {
        font-size: 1.2rem;
    }
    .mechdesign-page p,
    .mechdesign-page ul {
        font-size: 0.8rem;
    }
    
   
    .mayneservices-page {
        padding: 10px; /* Further reduce padding for very small screens */
    }
    .mayneservices-page h1 {
            font-size: 2rem; /* Reduce heading size for very small screens */
    }
    .mayneservices-page h2 {
       font-size: 1.2rem; /* Further adjust subheading size */
    }
    .mayneservices-page p,
    .mayneservices-page ul {
        font-size: 0.8rem; /* Smaller text for very narrow screens */
    }
    .portfolio-page {
        padding: 10px; /* Further reduce padding for very small screens */
    }
    .portfolio-page h1 {
        font-size: 2rem; /* Reduce heading size for very small screens */
    }
    .portfolio-page h2 {
        font-size: 1.2rem; /* Further adjust subheading size */
    }
    .portfolio-page h3 {
        font-size: 1rem; /* Reduce sub-subheading size */
    }
    .portfolio-page p,
    .portfolio-page ul {
        font-size: 0.8rem; /* Smaller text for very narrow screens */
    }
    .contact-page {
        padding: 10px; /* Further reduce padding for very small screens */
    }
    .contact-page h1 {
        font-size: 2rem; /* Reduce heading size for very small screens */
    }
    .contact-page p {
        font-size: 0.8rem; /* Smaller text for very narrow screens */
    }
}