/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
}

.hero-section {
    background-image: url('images/IT_Consultant.png'); /* Background image from user */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Ensure text is readable over the background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Darker text shadow for readability */
    position: relative;
    z-index: 0;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for better text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Specific styles for the Our Mission page content area */
.mission-section {
    background-image: url('images/people_working.png'); /* New background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Ensure text is readable over the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Darker shadow for readability */
    position: relative;
    z-index: 0;
    min-height: 600px; /* Ensure enough height to see the background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem; /* Add padding for content */
}

.mission-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Specific styles for the Our Focus page content area */
.focus-section {
    background-image: url('images/our_focus.jpg'); /* New background image for Our Focus */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Ensure text is readable over the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Darker shadow for readability */
    position: relative;
    z-index: 0;
    min-height: 600px; /* Ensure enough height to see the background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem; /* Add padding for content */
}

.focus-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Specific styles for the Testimonials page content area */
.testimonials-section {
    background-image: url('images/testimonials.jpg'); /* New background image for Testimonials */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Ensure text is readable over the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Darker shadow for readability */
    position: relative;
    z-index: 0;
    min-height: 600px; /* Ensure enough height to see the background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem; /* Add padding for content */
}

.testimonials-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Specific styles for the Solutions page content area */
.solutions-section {
    /* Using a repeating pattern image as a placeholder. Replace with your desired image. */
    background-image: url('images/carbon-fibre-big.png'); /* New repeating background image */
    background-size: auto; /* Changed to auto for repeating pattern */
    background-position: center;
    background-repeat: repeat; /* Changed to repeat for wallpaper effect */
    color: white; /* Ensure text is readable over the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Darker shadow for readability */
    position: relative;
    z-index: 0;
    min-height: 800px; /* Ensure enough height to see the background and content */
    padding: 4rem 1rem; /* Add padding for content */
    display: flex; /* Use flexbox to center content vertically if needed */
    align-items: flex-start; /* Align items to the start (top) */
    justify-content: center; /* Center content horizontally */
}

.solutions-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Specific styles for the Contact Us page content area */
.contact-section {
    background-image: url('images/contact.jpg'); /* Background image for Contact Us */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Ensure text is readable over the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Darker shadow for readability */
    position: relative;
    z-index: 0;
    min-height: 600px; /* Ensure enough height to see the background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem; /* Add padding for content */
}

.contact-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}


.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}