/* Home Page Styling */
/* Welcome Content Section */
.welcome-content {
    margin: 40px auto 0px auto !important; /* Force reduced bottom margin */
    padding: 20px;
    background-color: #f9f9f9;
    border: 2px solid #004d4d; 
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    font-family: Arial, sans-serif;
    text-align: center;
}

.welcome-header h2 {
    color: #008080; /* Teal for consistency */
    font-size: 30px;
    margin: 10px 0; /* Reduced vertical spacing above and below the header */
    font-weight: bold;
}

.welcome-body p {
    color: #555; /* Neutral gray for readability */
    font-size: 18px;
    line-height: 1.8; /* Keeps readability intact */
    text-align: justify; /* Justified text for a professional look */
    margin-bottom: 10px; /* Reduced spacing after paragraphs */
}

.welcome-body p strong {
    color: #004d4d; /* Dark teal for emphasis */
}

/* Primary Services Section */
.primary-services {
    margin-top: 0px !important; /* Force reduced top margin */
}


		/* Primary Services styling */
        .primary-services {
            background-color: #f9f9f9; /* Off-white for a clean and modern look */
            padding: 20px 20px;
            margin: 30px auto;
            border-radius: 10px;
            max-width: 1200px;
            text-align: center;
        }
        .primary-services h3 {
            color: #008080; /* Teal for a professional and consistent tone */
            font-family: 'Arial', sans-serif;
            font-size: 32px;
            margin-bottom: 30px;
        }
        .service-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px; /* Spacing between service boxes */
        }
        .service-box {
            background-color: white;
            border: 1px solid #ddd; /* Subtle border for definition */
            border-radius: 8px;
            padding: 20px;
            flex: 1 1 calc(25% - 20px); /* Responsive design to fit 4 boxes in one row */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for elevation */
            text-align: center;
        }
        .service-box img.service-icon {
            max-width: 60px;
            margin-bottom: 15px;
        }
        .service-box h4 {
            color: #004d4d; /* Dark teal */
            font-family: 'Arial', sans-serif;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .service-box p {
            font-size: 16px;
            color: #555; /* Neutral gray for descriptions */
        }
        @media (max-width: 768px) {
            .service-box {
                flex: 1 1 calc(50% - 20px); /* Stack 2 boxes per row on smaller screens */
            }
        }
        @media (max-width: 480px) {
            .service-box {
                flex: 1 1 100%; /* Stack 1 box per row on mobile screens */
            }
        }
        /* Button styling */
        .helpdesk-button {
            display: inline-block;
            background-color: #008080; /* Teal */
            color: white;
            padding: 15px 30px;
            font-size: 18px;
            font-family: Arial, sans-serif;
            border: none;
            text-decoration: none;
            text-align: center;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .helpdesk-button:hover {
            background-color: #004d4d; /* Darker teal */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
        }

        /* Subheadline styling */
        .subheadline {
            text-align: center;
            color: #004d4d; /* Dark teal */
            font-size: 24px;
            font-family: Arial, sans-serif;
            margin: 20px 0;
        }
/* Refined About Us Section Styling */
.about-content {
    text-align: center;
    margin: 40px auto; /* Increased margin for better spacing */
    max-width: 900px; /* Slightly wider for improved readability */
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Clean white background */
    padding: 40px;
    border: 2px solid #008080; /* Teal border for a polished look */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Stronger shadow for elevation */
}

.about-header h2 {
    color: #008080; /* Teal for headline consistency */
    font-size: 32px; /* Larger font for emphasis */
    margin-bottom: 20px;
    font-weight: bold;
}

.about-body p {
    color: #555; /* Neutral gray for readability */
    font-size: 18px; /* Slightly larger text for readability */
    line-height: 1.8; /* Better line spacing for a clean layout */
    margin: 20px 0;
    text-align: justify; /* Justified alignment for a cleaner paragraph look */
}

/* Navigation Bar Styling */
nav {
    background-color: #004d4d; /* Dark teal */
    padding: 10px 0;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

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

/* Services Grid Styling */
.services-grid {
    display: grid; /* Use a grid layout */
    grid-template-columns: repeat(2, 1fr); /* Two columns, equal width */
    gap: 20px; /* Spacing between quadrants */
    margin: 40px auto; /* Center the grid */
    max-width: 1200px; /* Set a maximum width */
    padding: 20px;
}

.service-quadrant {
    background-color: #ffffff; /* White background for contrast */
    border: 1px solid #ddd; /* Light border for structure */
    border-radius: 10px;
    padding: 20px;
    text-align: center; /* Center-align content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.service-quadrant img.service-icon {
    max-width: 60px; /* Size of icons */
    margin-bottom: 15px;
}

.service-quadrant h4 {
    color: #004d4d; /* Dark teal for headings */
    font-size: 20px;
    margin-bottom: 10px;
}

.service-quadrant p {
    color: #555; /* Neutral gray for readability */
    font-size: 16px;
    line-height: 1.5;
}
.services-grid ul {
    list-style-type: disc; /* Disc bullets for consistency */
    padding-left: 20px; /* Indentation for bullet points */
    margin-top: 10px;
    text-align: left; /* Align text to the left */
}

.services-grid li {
    font-size: 16px;
    color: #555; /* Neutral gray for readability */
    margin-bottom: 10px; /* Spacing between bullet points */
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Stack one column on smaller screens */
    }
}
/* Why Choose Us Section Styling */
.why-choose-us {
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f9f9; /* Light gray for a clean look */
    border: 2px solid #004d4d; /* Dark teal border */
    border-radius: 10px;
    max-width: 900px;
    font-family: Arial, sans-serif;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.why-choose-us h2 {
    color: #008080; /* Teal for branding consistency */
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}

.why-choose-us p {
    font-size: 18px;
    color: #555; /* Neutral gray for readability */
    margin-bottom: 20px;
    line-height: 1.6;
	text-align: left; /* Align text to the left */
}

.why-choose-us ul {
    list-style-type: disc;
    text-align: left;
    padding-left: 40px;
    margin: 0 auto;
    max-width: 800px;
}

.why-choose-us li {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333; /* Dark gray for better contrast */
}

.land-acknowledgement {
    text-align: center;
    font-size: 18px;
    color: #555; /* Neutral gray for readability */
    margin: 10px 0;
    font-style: italic;
    font-weight: 500; /* Slightly bolder */
}