/* Navigation */
.navbar {
    background-color: #000 !important;
}


body {
    font-family: 'Poppins', sans-serif;
}

/* If you want to apply it only to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* If you want to apply it only to paragraphs */
p {
    font-family: 'Poppins', sans-serif;
}

/* Hero Section */

/* Hero Section with Background Image */
.hero-section {
    background-image: url('Images/herobg.webp'); /* Add your image path here */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-color: rgba(255, 255, 255, 0.8); /* Light overlay to ensure text is readable */
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
    position: relative; /* For overlay positioning */
}

/* Hero Section with Background Image */
.hero-section {
    background-image: url('Images/herobg.webp'); /* Correct path */
    background-size: contain; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
    position: relative;
}

/* Semi-transparent overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6); /* Light white overlay */
    z-index: 1;
}

/* Ensure content is above the overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Optional: Add a semi-transparent overlay to make text more readable */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6); /* Light white overlay */
    z-index: 1; /* Ensure it's above the background image */
}

/* Ensure content is above the overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.hero-section img {
    max-width: 100%;
    height: auto;
}
.hero-section .achievement-text {
    font-size: 0.9rem;
    color: #555;
    margin-top: 1rem; /* Adds space above the text */
}

/* Hero Section */
.hero-section {
    padding-top: 80px; /* Add space below the navigation bar */
    padding-bottom: 40px; /* Add space at the bottom */
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
    text-align: center; /* Center text */
}

/* Headline Styling */
.hero-section h1 {
    font-size: 2.5rem; /* Default font size for desktop */
    margin-bottom: 20px; /* Space below the headline */
}

/* Subtext Styling */
.hero-section p {
    font-size: 1.2rem; /* Default font size for desktop */
    margin-bottom: 30px; /* Space below the subtext */
}

/* Button Styling */
.hero-section .btn {
    font-size: 1rem; /* Default font size for desktop */
}

/* Media Queries for Mobile */
@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 60px; /* Reduce space below the navigation bar */
        padding-bottom: 20px; /* Reduce space at the bottom */
    }

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

    .hero-section p {
        font-size: 1rem; /* Smaller font size for mobile */
    }

    .hero-section .btn {
        font-size: 0.9rem; /* Smaller font size for mobile */
    }
}
@media (max-width: 768px) {
    .hero-section .achievement-text {
        font-size: 0.8rem; /* Smaller text on mobile */
    }
}

/* Hide background image on mobile devices */
@media (max-width: 767.98px) {
    .hero-section {
        background-image: none; /* Remove background image */
        background-color: #f8f9fa; /* Use a solid color instead */
    }

    .hero-section::before {
        display: none; /* Hide overlay on mobile */
    }
}

/* Service Section */

.services-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem; /* Adjust as needed */
    font-weight: 600; /* Make it bold */
}

.category h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.5rem; /* Adjust as needed */
    font-weight: 500; /* Semi-bold */
}

/* Add more padding to each section */
.services-section, .about-section, .contact-section {
    padding: 80px 0; /* Increase padding for more space */
}

/* Add margin between service items */
.service-item {
    margin-bottom: 40px; /* Space between sections */
    padding: 20px 0; /* Inner padding for breathing space */
}

.service-item .row {
    display: flex;
    align-items: center; /* Vertically center content */
}

/* Alternating background colors */
.service-item.bg-alt {
    background-color: #F5F3F6; /* Light grey background */
    padding: 30px; /* Add padding for better spacing */
    border-radius: 8px; /* Rounded corners */
}

/* Add shadow to service items */
.service-item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease; /* Add hover effect */
}

.service-item:hover {
    transform: translateY(-5px); /* Lift on hover */
}

.service-item p {
    line-height: 1.8; /* Increase line height for readability */
    margin-bottom: 20px; /* Space below paragraphs */
}

.service-item h4 {
    margin-bottom: 15px; /* Space below headings */
    font-size: 1.4rem; /* Slightly larger headings */
    font-weight: 600; /* Bold headings */
}
/* About Us Section */
.about-section {
    padding: 100px 0; /* Increase padding for more space */
    background-color: #F5F3F6; /* Light grey background */
    min-height: 100vh; /* Full-height section */
    display: flex;
    align-items: center; /* Vertically center content */
}

.about-section h2 {
    font-size: 2.5rem; /* Larger heading */
    font-weight: 600; /* Bold heading */
    margin-bottom: 30px; /* Space below heading */
}

.about-section p {
    font-size: 1.1rem; /* Slightly larger text */
    line-height: 1.8; /* Increase line height for readability */
    margin-bottom: 20px; /* Space below paragraphs */
}

.about-section .lead {
    font-size: 1.2rem; /* Larger lead text */
    font-weight: 500; /* Semi-bold lead text */
}

.about-section .btn {
    margin-top: 20px; /* Space above the button */
}

.divider {
    width: 50px;
    height: 2px;
    background-color: #000000; /* black color */
    margin: 0 auto 20px; /* Center the divider */
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 0; /* Reduce padding for smaller screens */
    }

    .about-section h2 {
        font-size: 2rem; /* Smaller heading for mobile */
    }

    .about-section p {
        font-size: 1rem; /* Smaller text for mobile */
    }
}

/* Contact Section */
.contact-box {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 8px;
}

.contact-box h2 {
    margin-bottom: 30px;
    text-align: center;
}

/* Gray Box Styling */
.contact-box {
    background-color: #f8f9fa; /* Light gray background */
    padding: 30px; /* Add padding inside the box */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Image Styling */
.contact-box img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    margin-top: 20px; /* Add space between form and image on mobile */
}

/* Adjustments for Mobile */
@media (max-width: 767.98px) {
    .contact-box img {
        margin-top: 0; /* Remove extra space on mobile */
    }
}

/* Validation Styles */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545; /* Red color for error messages */
}

.is-invalid {
    border-color: #dc3545 !important; /* Red border for invalid fields */
}

.is-invalid + .invalid-feedback {
    display: block; /* Show error message */
}
/* Footer */
.footer {
    background-color: #343a40;
    color: white;
    padding: 40px 0;
}

.footer h5 {
    margin-bottom: 20px;
}

/* WhatsApp Link Styling */
.whatsapp-link {
    color: #ffffff; /* White text */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition */
}

.whatsapp-link:hover {
    color: #cccccc; /* Light gray on hover */
}

/* WhatsApp Icon Styling */
.whatsapp-link .fab {
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.2rem; /* Adjust icon size */
}

.social-links img {
    width: 24px;
    margin-right: 10px;
}

/* Social Media Icons */
.social-links {
    display: flex;
    gap: 15px; /* Space between icons */
}

.social-icon {
    color: #ffffff; /* White icons */
    font-size: 1.5rem; /* Icon size */
    transition: color 0.3s ease; /* Smooth transition */
}

.social-icon:hover {
    color: #cccccc; /* Light gray on hover */
}
/* Adjust reCAPTCHA and button alignment */
.g-recaptcha {
    transform: scale(0.9); /* Slightly reduce reCAPTCHA size if needed */
    transform-origin: 0 0; /* Ensure scaling starts from the left */
}

/* Adjust button size and spacing */
.btn-primary {
    padding: 10px 20px; /* Increase button padding */
    font-size: 1rem; /* Adjust button font size */
	color: #fff;
}

/* Black Button with Gray Hover */
.btn-primary {
    background-color: #000000; /* Black background */
    border-color: #000000; /* Black border */
    color: #ffffff; /* White text */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.btn-primary:hover {
    background-color: #808080; /* Gray background on hover */
    border-color: #808080; /* Gray border on hover */
    color: #ffffff; /* White text */
}
@media (max-width: 576px) {
    .form-group.row .d-flex {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .form-group.row .ml-3 {
        margin-left: 0 !important; /* Remove left margin on small screens */
        margin-top: 10px; /* Add top margin for spacing */
    }
}