body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f4f4;
}
.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-size: 68px
  font-style: bold-italic;
}
header {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    position: flex;
    overflow: hidden;
    padding: 20px; /* Adjust as needed */
}

header::before {
    content: '';
    position: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(200, 200, 200, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(200, 200, 200, 0.05) 0%, transparent 50%);
    opacity: 0.7;
    z-index: -1;
}

/* Optional: Add subtle tech-related elements */
header::after {
    content: '';
    position: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 98%, #d0d0d0 98%, #d0d0d0 100%, transparent 100%),
        linear-gradient(-45deg, transparent 98%, #d0d0d0 98%, #d0d0d0 100%, transparent 100%);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: -1;
}

/* Ensure text in the header is visible against the new background */
header h1, header nav a {
    color: #333; /* Dark gray color for text */
    position: flex; /* Ensures text is above the background layers */
    z-index: 1;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

.logo-image {
    width: 300px; /* Adjust this value as needed */
    height: auto;
    margin-right: 1rem;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: url('./images/background.jpg') no-repeat center center/cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* Other styles... */
.services-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('./images/services-background.jpg') no-repeat center center/cover;
    opacity: 0.5; /* Adjust this to your liking */
    z-index: 1;
}

#services {
    position: relative;
}

.text-white {
    color: white;
}

.text-black {
    color: black;
}
.bg-gray-900 {
    background-color: #1a202c;
}

.text-white {
    color: white;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mt-8 {
    margin-top: 2rem;
}

.hover\:underline:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
}

.md\:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
}

.gap-8 {
    gap: 2rem;
}

.mb-4 {
    margin-bottom: 1rem;
}
/* Styles for the main content area */
.container {
    background-color:#9999ff;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Styles for headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
}

/* Styles for paragraphs */
p {
    margin-bottom: 1em;
}

/* Styles for lists */
ul, ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

/* Styles for links */
a {
    color: #2563eb; /* Tailwind's blue-600 */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Styles for buttons */
.cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #2563eb; /* Tailwind's blue-600 */
    color: white;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #1d4ed8; /* Tailwind's blue-700 */
}

/* Styles for the back link */
.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: #4b5563; /* Tailwind's gray-600 */
}

.back-link:hover {
    color: #111827; /* Tailwind's gray-900 */
}