:root {
    --primary-color: #003366;
    --secondary-color: #5e050e;
    --light-bg: #f9f9f9;
    --text-color: #333;
}


/* General Styles */
body {
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    margin: 0;
    background-color: #ffffff; /* White background for the whole page */
    color: #333; /* Dark text color for readability */
}


/* Apply Orbitron specifically to the header or other elements */
.header h1, .section h1, .section h2, .section h3 {
    font-family: 'Orbitron', 'Exo 2', sans-serif; /* Apply to main headings */
}

.nav-links a {
    font-family: 'Orbitron', 'Exo 2', sans-serif; /* Optional: Apply to navigation links */
}

/* General Link Styles */
a {
    text-decoration: none; /* Remove underlines */
    color: #003366; /* Neutral color for a modern look */
    font-weight: 500; /* Medium weight for professional appearance */
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Smooth hover transitions */
}

/* Hover Effect */
a:hover {
    color: #003366; /* Change color on hover */
    border-bottom: 2px solid #003366; /* Add a colored underline on hover */
}

/* Navigation Link Styling */
.nav-links {
    display: flex;
    justify-content: center; /* Center-align links horizontally */
    flex-grow: 1; /* Ensures the nav takes up all available space */
    flex-wrap: wrap; /* Allow links to wrap on smaller screens */
}

.nav-links a {
    margin: 0 15px; /* Spacing between links */
    font-size: 16px; /* Slightly larger font for readability */
    padding: 10px 15px; /* Add padding to make links easier to click */
    font-weight: bold; /* Make the font bold */
    color: #5e050e; /* Dark Blue text for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth hover transitions */
}

/* Active/Focused Link */
a:focus,
a:active {
    color: #003366; /* Darker blue for active/focused links */
    border-bottom: 2px solid #003366; /* Underline the active link */
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .nav-links {
        justify-content: center; /* Center align the links on small screens */
        flex-direction: column; /* Stack links vertically on smaller screens */
    }

    .nav-links a {
        margin: 10px 0; /* Adjust margin for better spacing on smaller screens */
        width: 100%; /* Make links full width */
        text-align: center; /* Center the text */
    }

    .container {
        padding: 10px; /* Reduce padding on small screens */
    }
}

/* Header Styles */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures logo stays on the left, nav on the right */
    padding: 20px 40px;
    background-color: #ffffff; /* White background for header */
    border-bottom: 1px solid #ddd; /* Light border for separation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
    flex-wrap: wrap; /* Allow wrapping of logo and nav links */
    position: relative;
    box-sizing: border-box;
}

.logo-container {
    flex: 1; /* Allow the logo to take available space */
}

.logo {
    max-width: 200px; /* Adjust size for responsiveness */
    height: auto; /* Ensure it maintains aspect ratio */
}

.nav-container {
    flex-grow: 1; /* To fill available space and push nav links to the right */
}

/* Container Styles */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Header and Button Styles */
h1,
h2 {
    font-family: 'Roboto', sans-serif;
    color: #003366; /* Dark Blue for headings */
}

h3 {
    font-family: 'Roboto', sans-serif;
    color: #5e050e; /* Changes h3 headings to a different color */
}

/* Styles for paragraphs under h2 */
.section p {
    margin: 20px 0; /* Add vertical margin for spacing */
    line-height: 1.6; /* Improved line height for readability */
    padding: 15px; /* Add padding for inner spacing */
    border: 1px solid #ddd; /* Light border around paragraphs */
    border-radius: 10px; /* Rounded corners */
    background-color: #f9f9f9; /* Light gray background for blocks */
}

/* Flexbox container for service paragraphs */
.services-container {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-between; /* Space out the items evenly */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin: 20px 0; /* Margin for spacing */
}

/* Individual service block styles */
.service {
    flex: 1; /* Allow each block to take equal space */
    margin: 0 10px; /* Margin for spacing between blocks */
    padding: 15px; /* Inner padding for better spacing */
    border: 1px solid #ddd; /* Light border around blocks */
    border-radius: 10px; /* Rounded corners */
    background-color: #f9f9f9; /* Light gray background for blocks */
    min-width: 200px; /* Minimum width for responsiveness */
    
    /* Adding 3D effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* Slight shadow below */
                0 6px 20px rgba(0, 0, 0, 0.1); /* Larger shadow for depth */
    transition: transform 0.6s; /* Smooth transition for hover effect */
}

/* Optional: Scale effect on hover for better interaction */
.service:hover {
    transform: translateY(-3px); /* Lift the block on hover */
}

.service {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* New Section Styles with 3D Effect */
.section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd; /* Light border for separation */
    border-radius: 10px; /* Slightly rounded corners */
    background-color: #ffffff; /* White background for sections */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for 3D effect */
    
}



/* New h3 Section Styles */
.h3-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd; /* Light border for separation */
    border-radius: 10px; /* Slightly rounded corners */
    background-color: #ffffff; /* White background for sections */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for 3D effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
}

/* Optional: Hover effect for enhanced 3D look */
.h3-section:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow on hover */
}

/* Left align the h3 */
h3 {
    text-align: left; /* Align text to the left */
}

/* Style for left-aligned list */
.left-aligned-list {
    list-style-position: inside; /* Ensures bullet points are inside the container */
    padding-left: 0; /* Remove padding on the left */
    text-align: left; /* Ensure the text within the list is left-aligned */
}

.left-aligned-list li {
    text-align: left; /* Ensure each list item is left-aligned */
    margin-bottom: 10px; /* Optional: add space between items */
}


/* Button Styles */
.button-link {
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #5e050e; /* Dark Maroon background */
    color: white; /* White text */
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.button-link:hover {
    background-color: #5e050e; /* Darker Maroon for hover effect */
}

/* Details Page Styles */
.section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #ffffff; /* White background for sections */
}

/* Remove 3D effect from query form */
.query-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #ffffff; /* White background for form */
    box-shadow: none; /* Remove box-shadow for a flat look */
}

/* Query Form Label Styles */
.query-form label {
    display: block;
    margin-bottom: 10px;
    color: #003366; /* Dark Blue for label text */
}

.query-form input,
.query-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9; /* Light gray background for form inputs */
}

.query-form button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    background-color: #5e050e; /* Dark Maroon background */
    color: white; /* White text */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.query-form button:hover {
    background-color: #003366; /* Darker Maroon for hover effect */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #003366; 
    color: #fff;
    position: relative; /* Change from fixed to relative for better responsiveness */
    width: 100%;
    bottom: 0; /* Adjust to work with relative positioning */
}

footer p {
    margin: 0;
}

/* Additional Responsive Styles */
@media (max-width: 480px) {
    .section {
        margin: 10px 0;
        padding: 15px;
    }

    .query-form {
        padding: 15px;
    }

    .query-form button {
        width: 100%; /* Full-width button */
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    .hero-section {
        text-align: center;
    }
}


footer {
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
}

/* Header Styles */
.header {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    position: relative; /* Added to position contact info */
}

/* Contact Info - Upper right corner */
.contact-info a {
    color: #5e050e; /* Set the text color to Dark Maroon */
    font-weight: bold; /* Make the contact info bold */
    text-decoration: none; /* Remove underline */
    margin-left: 15px; /* Space between phone and email */
}

/* Remove hover effect completely */
.contact-info a:hover {
    color: #5e050e; /* Keep the color the same on hover */
    text-decoration: none; /* No underline on hover */
}


/* Additional footer styles and media queries... */

/* Footer Styles */
footer {
    display: flex;
    justify-content: space-between; /* Space out the content */
    padding: 20px 40px; /* Adjust padding for better spacing */
    background-color: #003366;
    color: #fff;
    width: 100%;
    box-sizing: border-box; /* Include padding in the element’s total width/height */
    margin-top: 20px; /* Added margin-top for spacing */
}

/* Style for the left side (Copyright) */
footer .footer-left {
    font-size: 14px; /* Adjust font size */
    text-align: left; /* Align text to the left */
}

/* Style for the right side (Contact Info) */
footer .footer-right {
    font-size: 14px; /* Adjust font size */
    text-align: right; /* Align text to the right */
}

footer a {
    color: #fff; /* White text for the links */
    text-decoration: none; /* Remove underline */
    margin-left: 15px; /* Add spacing between links */
    font-weight: bold; /* Make the contact info bold */
}

/* Remove hover effect from the contact info */
footer a:hover {
    text-decoration: none; /* Remove underline on hover */
    color: #fff; /* Keep the color the same on hover */
}

/* Header Styles */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items at the left and right of the header */
    padding: 20px 40px; /* Adjust padding for better spacing */
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    position: relative; /* Added to position contact info */
    box-sizing: border-box; /* Include padding in the element’s total width/height */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

.service {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* Responsive styles for devices with max width of 768px */
@media (max-width: 768px) {
    .navbar {
      flex-direction: column;
    }
    .hero-section {
      text-align: center;
    }
  }
  
/* Styles for the parallax effect */
body {
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', sans-serif;
}

header, footer {
    position: relative;
    z-index: 10;
    background-color: #fff; /* Ensure header/footer stands out */
}



.container {
    position: relative;
    z-index: 5;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* Slight opacity to highlight content */
}


footer {
    background-color: #003366; /* Blue background */
    color: #ffffff; /* White text */
    padding: 20px;
    text-align: center;
    position: relative; /* Ensure it stays on top of the parallax background */
    z-index: 10;
}

footer a {
    color: #ffffff; /* Ensure links in the footer are also white */
    text-decoration: none;
}
 


/* Define the fadeInSlideLeft animation */
@keyframes fadeInSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* Start from the left (off-screen) */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Parallax styling */
.parallax {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: -1; /* Ensure it's behind other content */
}

/* Animated text styling */
.animated-text {
    position: relative; /* Ensure it stays in the normal flow */
    z-index: 10; /* Higher z-index to stay on top */
    text-align: center;
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-size: 2.0rem;
    color: #5e050e; /* Default color for fallback */
    background: linear-gradient(90deg, #ff4e50, #b11226); /* Gradient effect for red tones */
    -webkit-background-clip: text; /* Apply gradient to text */
    -webkit-text-fill-color: transparent; /* Keep gradient visible */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add a subtle shadow */
    margin: 40px 0;
    animation: fadeInSlideLeft 2s ease-in-out; /* Animation */
    text-transform: uppercase; /* Make text bold and uppercase */
    letter-spacing: 2px; /* Slight spacing between letters */
    will-change: transform, opacity;
}

/* Header and footer */
header {
    position: relative;
    z-index: 10; /* Ensure they're above parallax */
    background-color: #fff; /* White background for header/footer */
}

/* Container */
.container {
    position: relative;
    z-index: 5;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* Slight opacity */
}

/* Define the fadeInSlideRight animation */
@keyframes fadeInSlideRight {
    from {
        opacity: 0;
        transform: translateX(100%); /* Start from the right (off-screen) */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Animated text styling for right-slide */
.animated-text-right {
    position: relative;
    z-index: 10;
    text-align: center;
    font-family: 'Orbitron', 'Exo 2', sans-serif; /* Futuristic font */
    font-size: 2rem; /* Larger font size for emphasis */
    color: #003366; /* Dark blue for consistency */
    background: linear-gradient(90deg, #00d4ff, #007bff); /* Gradient effect */
    -webkit-background-clip: text; /* Apply gradient to text */
    -webkit-text-fill-color: transparent; /* Keep background gradient visible */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add a shadow for depth */
    padding: 20px 0; /* Add spacing for emphasis */
    animation: fadeInSlideRight 2s ease-in-out;
    text-transform: uppercase; /* Make text bold and uppercase */
    letter-spacing: 3px; /* Add spacing between letters */
}

#web-development {
    padding: 40px;
    background-color: #f7f9fc; /* Light background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 10px;
    margin: 20px 0;
}

#web-development h2 {
    font-family: 'Orbitron', sans-serif; /* Futuristic font */
    font-size: 1.5rem;
    color: #003366; /* Primary color */
    text-align: center;
    margin-bottom: 20px;
}

#web-development p {
    font-family: 'Exo 2', 'Arial', sans-serif;
    font-size: 1.1rem;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

#web-development ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#web-development ul li {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    color: #555;
    padding: 5px 0;
}

.naics-codes {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    color: #333;
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
}