/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    position: fixed; /* Fix the header to the top */
    top: 0; /* Align to the top of the viewport */
    left: 0; /* Align to the left of the viewport */
    width: 100%; /* Ensure the header takes the full width */
    max-width: 2300px; /* Set the maximum width for the header */
    margin: 0 auto; /* Center the header */
    background-color: #f8f8f8; /* Background color for the header */
    color: #8f8c8c; /* Text color */
    padding: 1rem 0; /* Padding for the header */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow for effect */
    z-index: 1000; /* Ensure the header stays on top of other content */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f8f8f8; /* Light gray background */
	padding-top: 60px; /* Add padding equal to the header height */
    /* This prevents content from being hidden under the fixed header */
}

/* Adjust the logo size */
.logo img {
    height: 50px; /* Adjust based on your logo size */
    width: 50px; /* Logo width */
}

nav {
    position: relative; /* For absolute positioning of menu */
	align-items: center; /* Center items vertically within nav */
}

.nav-toggle {
    background: #f8c042; /* Hamburger menu background color */
    color: white; /* Hamburger icon color */
    border: none; /* Remove default border */
    font-size: 24px; /* Size for the hamburger icon */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Hide by default on larger screens */
    margin: 0 20px; /* Adjust margin as needed */
}

.nav-menu {
    list-style-type: none;
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
    display: flex; /* Flexbox for larger screens */
    justify-content: center; /* Center the nav items */
}

.nav-menu li {
	position: relative; /* Position for absolute positioning of sub-menu */
	margin: 0 10px; /* Space between nav items (adjust as needed) */
}

.nav-menu li a {
    text-decoration: none; /* Remove underline from links */
    color: #73676e; /* Link color */
    font-weight: bold;
    transition: color 0.3s, transform 0.3s;
}

.nav-menu li a:hover {
    color: #d69f29; /* Change color on hover */
    transform: translateY(-2px);
}

.nav-menu.show {
    display: flex; /* Show menu when toggled */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
    background-color: none; /* Background color */
    position: absolute; /* Position below the button */
    top: 60px; /* Position below the button */
    width: 100%; /* Full width */
    z-index: 10; /* Ensure it's above other content */
}

.sub-menu {
    display: none; /* Hide the sub-menu by default */
    position: absolute; /* Position it below the parent */
    background-color: #none; /* Background color for the dropdown */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
    z-index: 1000; /* Ensure it appears above other content */
}

.dropdown-icon {
    margin-left: 5px; /* Space between the link and the icon */
    font-size: 12px; /* Adjust size as needed */
    transition: transform 0.3s; /* Animation for rotation */
}

.sub-menu.show {
    display: block; /* Show when toggled */
}

.nav-menu li:hover .sub-menu {
    display: block; /* Show the sub-menu on hover */
}

.sub-menu li {
    margin: 0; /* No margin for items in sub-menu */
}

.sub-menu li a {
    padding: 10px 20px; /* Padding for sub-menu links */
    display: block; /* Make the link occupy the full width */
    color: #333; /* Color for sub-menu links */
    text-decoration: none; /* Remove underline */
}

.sub-menu li a:hover {
    background-color: none; /* Change background on hover */
    color: white; /* Change text color on hover */
}

/* Footer styles */
footer {
    background-color: #333; /* Background color */
    color: #fff; /* Text color */
    padding: 20px 0; /* Padding */
	width: 100%; /* Set footer width to 100% */

}

.footer-container {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    justify-content: space-between; /* Space out columns */
    max-width: 2300px; /* Max width for the footer */
    margin: 0 auto; /* Center the footer */
    padding: 0 20px; /* Padding on sides */
	width: 100%; /* Set footer width to 100% */
}

.footer-column {
    flex: 1 1 calc(33.33% - 20px); /* Default to 3 columns with spacing */
    margin: 10px; /* Margin between columns */
    padding: 10px; /* Padding inside each column */
}

.footer-column h3 {
    margin-bottom: 10px; /* Space below the heading */
}

.footer-column a {
    color: #fff; /* Link color */
    text-decoration: none; /* Remove underline */
    display: block; /* Make links block elements */
    margin: 5px 0; /* Space between links */
}

.footer-column a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Media Query for Mobile */
@media (max-width: 600px) {
    .footer-column {
        flex: 1 1 calc(50% - 20px); /* Two columns with spacing */
    }
}



social-links {
    margin-top: 10px; /* Space above social links */
}

social-links a {
    margin: 0 10px; /* Space between social links */
    color: #f8c042; /* Color for social links */
    text-decoration: none; /* Remove underline */
}

.social-links a:hover {
text-decoration: underline; /* Underline on hover for visibility */
}

.sub-footer {
    text-align: center;
    padding: 10px 0;
    background-color: #444; /* Sub footer background color */
    color: #fff; /* Sub footer text color */
}

.sub-footer p {
    margin: 0;
}

.sub-footer a {
    color: inherit; /* Make the link color inherit from the parent (footer) */
    text-decoration: none; /* Remove the underline */
}

.sub-footer a:hover {
    text-decoration: underline; /* Optional: Underline on hover for visibility */
    color: #d69f29; /* Optional: Change color on hover */
}

/* Main content styles */
.main-content {
    max-width: 2300px; /* Set a maximum width for main content */
    width: 100%; /* Set main content width to 100% */
    text-align: center;
    padding: 50px 20px;
    background-color: white; /* White background for main content */
    border-radius: 0px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin: 0 auto; /* Center the main content */
}

.start-project {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Button color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.start-project:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Specific styles for the second main content */
.second-content {
    position: relative; /* Ensure relative positioning for text overlay */
    max-width: 2300px; /* Set max width for the content */
    margin: 0 auto; /* Center the section */
}

.image-text-wrapper {
    position: relative; /* Make the wrapper position relative */
    display: inline-block; /* Align the image and text together */
    width: 100%;
}

.background-image {
    width: 100%; /* Make the image cover the full width of the section */
    height: auto; /* Adjust height based on the aspect ratio */
    border-radius: 2px; /* Optional: Rounded corners */
}

/* For larger screens */
.text-overlay {
    position: absolute; /* Overlay text on top of the image */
    top: 50%; /* Position text at the middle */
    left: 50%; /* Center text horizontally */
    transform: translate(-50%, -50%); /* Center the text block */
    color: white; /* White text color for contrast */
    text-align: center; /* Center-align text */
    background-color: rgba(0, 0, 0, 0.6); /* Transparent black background for text block */
    padding: 20px;
    border-radius: 8px; /* Rounded corners for the text box */
    width: 80%; /* Control the width of the text block */
}

.text-overlay h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.text-overlay p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.start-project {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Button color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.start-project:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Even smaller screens (e.g., phones under 600px) */
@media (max-width: 600px) {
    .second-content {
        height: 350px; /* Adjust height for very small screens */
    }

    .text-overlay {
        width: 95%; /* Increase width to fit better on smaller phones */
        padding: 2px; /* Reduce padding even more */
    }

    .text-overlay h1 {
        font-size: 1.5rem; /* Make the header text smaller */
    }

    .text-overlay p {
        font-size: 0.9rem; /* Smaller paragraph size for very small screens */
    }
}

/* Specific styles for the third main content */
.third-content {
    position: relative; /* Ensure relative positioning for text overlay */
    max-width: 2300px; /* Set max width for the content */
    margin: 0 auto; /* Center the section */
}

.image-text-wrapper {
    position: relative; /* Make the wrapper position relative */
    display: inline-block; /* Align the image and text together */
    width: 100%;
}

.background-image {
    width: 100%; /* Make the image cover the full width of the section */
    height: auto; /* Adjust height based on the aspect ratio */
    border-radius: 8px; /* Optional: Rounded corners */
}

/* For larger screens */
.text-overlay {
    position: absolute; /* Overlay text on top of the image */
    top: 50%; /* Position text at the middle */
    left: 50%; /* Center text horizontally */
    transform: translate(-50%, -50%); /* Center the text block */
    color: white; /* White text color for contrast */
    text-align: center; /* Center-align text */
    background-color: rgba(0, 0, 0, 0.6); /* Transparent black background for text block */
    padding: 20px;
    border-radius: 8px; /* Rounded corners for the text box */
    width: 80%; /* Control the width of the text block */
}

.text-overlay h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.text-overlay p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.start-project {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Button color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.start-project:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .text-overlay {
        width: 90%; /* Adjust width for mobile to fit the screen */
        padding: 15px; /* Reduce padding to ensure text fits well */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Re-center on mobile */
    }

    .text-overlay h1 {
        font-size: 1.8rem; /* Smaller text size for mobile */
    }

    .text-overlay p {
        font-size: 1rem; /* Adjust paragraph size for readability */
    }
}

/* Even smaller screens (e.g., phones under 600px) */
@media (max-width: 600px) {
    .text-overlay {
        width: 95%; /* Increase width to fit better on smaller phones */
        padding: 10px; /* Reduce padding even more */
    }

    .text-overlay h1 {
        font-size: 1.5rem; /* Make the header text smaller */
    }

    .text-overlay p {
        font-size: 0.9rem; /* Smaller paragraph size for very small screens */
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        display: none; /* Hide on mobile */
    }
    .nav-menu.show {
        display: flex; /* Show when toggled */
    }
    .nav-toggle {
        display: block; /* Show hamburger icon on mobile */
        background: none;
        border: none;
        color: #8f8c8c; /* Change to match header text color */
        font-size: 24px;
    }

    .footer-container {
        flex-direction: column; /* Stack footer columns on mobile */
        text-align: center;
    }
}

/* Right-aligned on small screens */
@media (max-width: 600px) {
    .nav-menu {
        justify-content: flex-end; /* Align to the right */
		
    }

    /* Show hamburger on small screens */
    .nav-toggle {
        display: block; /* Show hamburger menu */
		position: absolute; /* Position below the button */

    }

    .nav-menu {
        display: none; /* Hide menu by default */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-end; /* Align items to the right */
        position: absolute; /* Position below the button */
        top: 60px; /* Position below the button */
        width: 100%; /* Full width */
        background-color: none; /* Background color */
        z-index: 10; /* Ensure it's above other content */
    }

    .nav-menu.show {
        display: flex; /* Show menu when toggled */
    }
}

.nav-menu li {
    margin: 0 10px; /* Space between nav items (adjust as needed) */
}

.nav-menu li a {
    text-decoration: none; /* Remove underline from links */
    color: #73676e; /* Link color */
    font-weight: bold;
    transition: color 0.3s, transform 0.3s;
}

.nav-menu li a:hover {
    color: #d69f29; /* Change color on hover */
    transform: translateY(-2px);
}

/* New style to stack columns */
@media (max-width: 768px) {
    .footer-container {
        flex-wrap: wrap; /* Allow wrapping for smaller screens */
        justify-content: center; /* Center the columns */
    }

    .footer-column {
        flex: 0 0 45%; /* Set each column to occupy 45% width */
        margin: 10px; /* Add margin for spacing */
    }
}

.sub-footer {
    text-align: center;
    background-color: #222; /* Darker footer background */
    color: #fff;
    padding: 10px 0;
}

/* Responsive Design */
@media (max-width: 600px) {
    .nav-toggle {
        display: block; /* Show the hamburger menu on small screens */
		position: right /* The position for hamburger menu on small screens */
		margin: 0 10px; /* Smaller margin on mobile */
    }

    .nav-menu {
        display: none; /* Hide menu by default on small screens */
        flex-direction: column; /* Stack items vertically */
    }

    .nav-menu li {
        margin: 10px 0; /* Space between nav items */
		margin: 0 5px; /* Smaller margin between items on mobile */
}

/* Responsive for mobile (two columns) */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Still in a column but will wrap */
    }
    .footer-column {
        flex-basis: 40%; /* Each column takes up 50% of the width */
    }
}

/* Responsive for very small screens (single column) */
@media (max-width: 480px) {
    .footer-column {
        flex-basis: 100%; /* Full width for each column */
        padding: 10px 0; /* Adjust padding for small screens */
    }
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Hide menu by default */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-end; /* Align items to the right */
        background-color: none; /* Background color */
		position: right /* The position for hamburger menu on small screens */
    }

    .nav-menu.show {
        display: flex; /* Show when toggled */
    }

    .nav-menu a,
    .sub-menu a {
        color: #007BFF; /* Blue text for main and sub-menu links on mobile */
    }

    .nav-toggle {
        display: block; /* Show hamburger icon on mobile */
        color: #e0dede; /* Blue icon for hamburger */
    }
}