body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white; /* Set the overall background color to black */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f1ef; /* Less transparent black background */
    backdrop-filter: blur(3px); /* Adds a blur effect to the background */
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* Fixes the header at the top */
    top: 0;
    left: 0;
    z-index: 1000; /* Ensures the header stays on top of other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the header */
}

.logo img {
    max-height: 70px; /* Updated max-height for the logo */
    width: auto;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

nav ul li {
    margin-left: 20px;
    position: relative; /* Allows the dropdown to be positioned correctly */
}

nav ul li a {
    color: white; /* Black text to stand out against the blurred white background */
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px; /* Adds padding for a more clickable area */
    display: block;
}

nav ul li a:hover,
.main-button:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Slightly darker background on hover */
}

/* Dropdown Menu Styles */
.has-dropdown {
    position: relative;
}

.has-dropdown > a::after {
    content: '▼'; /* Down arrow for main navigation */
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.has-dropdown:hover > a::after {
    transform: rotate(-180deg); /* Arrow points up when hovered */
}

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

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #34495e; /* Darker Blue background */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    border-radius: 8px; /* Softer corners */
    overflow: hidden;
    min-width: 280px; /* Adjust based on content */
    z-index: 1000;
    padding: 10px 0; /* Adding some padding for better spacing */
}

.dropdown li {
    width: 100%;
    position: relative;
}

.dropdown li a {
    display: block;
    padding: 15px 25px; /* More padding for better spacing */
    color: #ecf0f1; /* Light text color */
    background-color: #2c3e50; /* Darker background for each item */
    text-decoration: none;
    white-space: nowrap; /* Prevents text from wrapping */
    font-weight: 500;
    border-bottom: 1px solid #3a5060; /* Divider between items */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

.dropdown li a::after {
    content: '›'; /* Right arrow for dropdown items */
    font-size: 0.8em;
    margin-left: 10px;
    float: right;
    transition: transform 0.3s ease;
}

.dropdown li a:hover {
    background-color: #1abc9c; /* Stylish teal on hover */
    color: #ffffff; /* White text on hover */
    border-bottom: none; /* Remove divider on hover */
}

.dropdown li:last-child a {
    border-bottom: none; /* Remove the bottom border for the last item */
}

.video-section {
    position: relative;
    overflow: hidden;
    margin-top: 70px; /* Space below the fixed header */
    background-color: black; /* Set the background color of the video section to black */
}

.video-section video {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the video covers the full area */
}
.overlay-text {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, 60px); /* Start position below */
    color: black; /* Change text color to white */
    text-align: center; /* Center text alignment */
    opacity: 0; /* Start with text hidden */
    animation: slideInFromBelow 0.6s forwards; /* Animation for overlay text */
    animation-delay: 0.2s; /* Delay to sync with other animations */
}

@keyframes slideInFromBelow {
    to {
        opacity: 1; /* Fade in */
        transform: translate(-50%, -50%); /* Move to original position */
    }
}

.overlay-text h2 {
    font-size: 2.7em; /* Size for the main text */
}

.overlay-text p {
    font-size: 1.1em; /* Size for the subtitle */
}

.overlay-text .button {
    background-color: black; /* Button color set to blue */
    color: black; /* Button text color set to white */
    padding: 10px 15px;
    border-radius: 12px; /* Rounded corners for button */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    text-decoration: none; /* Remove underline */
}

.overlay-text .button:hover {
    background-color: black; /* Change button color to black on hover */
}



.info-section {
    position: relative; /* Position relative for the video */
    display: flex;
    align-items: center;
    padding: 40px 20px;
    margin-top: 20px; /* Space above the info section */
    border-radius: 15px; /* Rounded corners for the info section */
    overflow: hidden; /* Prevents overflow from video */
    background-color: #222; /* Dark background color */
}

.info-video {
    position: absolute; /* Position absolute for full coverage */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the section */
    z-index: 1; /* Places video behind text */
}

.info-section .text {
    flex: 1;
    padding-right: 20px; /* Space between text and image */
    color: white; /* Change text color to white */
    position: relative; /* To bring text in front of the video */
    z-index: 2; /* Places text above the video */
    opacity: 0; /* Start with text hidden */
    transform: translateX(-50px); /* Start position off-screen */
    animation: slideInFromLeft 0.6s forwards; /* Animation for text */
    animation-delay: 0.2s; /* Delay to sync with image animation */
}

@keyframes slideInFromLeft {
    to {
        opacity: 1; /* Fade in */
        transform: translateX(0); /* Move to original position */
    }
}

.info-section h2 {
    font-size: 2.5em; /* Adjust header size */
    margin: 0 0 10px; /* Space below header */
    font-weight: bold; /* Make the header bold */
}

.info-section p {
    font-size: 1.1em; /* Adjust paragraph size */
    line-height: 1.5; /* Increase line height for readability */
}

.info-section img {
    max-width: 30%; /* Make the image smaller */
    height: auto;
    border-radius: 20px; /* More rounded corners for the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    position: relative; /* Position image normally */
    z-index: 2; /* Places image above the video */
    opacity: 0; /* Start with image hidden */
    transform: translateX(50px); /* Start position off-screen */
    animation: slideInFromRight 0.6s forwards; /* Animation for image */
    animation-delay: 0.2s; /* Delay to sync with text animation */
}

@keyframes slideInFromRight {
    to {
        opacity: 1; /* Fade in */
        transform: translateX(0); /* Move to original position */
    }
}

 
.stats-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #9ca3b1; /* Light background color */
    padding: 40px 20px; /* Spacing around the section */
    border-radius: 15px; /* Rounded corners */
    margin-top: 20px; /* Space above the section */
    text-align: center;
}

.stat {
    flex: 1; /* Each stat gets an equal width */
    margin: 0 10px; /* Margin for spacing between stats */
}

.stat h2 {
    font-size: 3em; /* Larger font size for numbers */
    margin: 0; /* No margin around numbers */
    color: #FFFFFF; /* White color for the numbers */
    transition: transform 0.3s ease-in-out; /* Add a subtle zoom effect on hover */
}

.stat h2:hover {
    transform: scale(1.1); /* Slightly enlarge the number on hover */
}

.stat p {
    font-size: 1.2em; /* Font size for descriptions */
    color: #FFFFFF; /* White color for text */
    margin-top: 10px; /* Add some space between number and description */
}
/** Services Section */
.services {
    position: relative;
    padding: 50px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Ensures content stays within bounds */
}

}

.service-container {
    position: relative;
    z-index: 1; /* Places content above the video */
    color: #fff; /* Ensures readability against the video background */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Optional: adds a subtle overlay for text clarity */
}

/* Shake animation */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Add shaking and movement when hovering over the entire container */
.service-container:hover {
    animation: shake 0.5s; /* Duration of the shake effect */
}

/* Service item styles */
.service {
    flex: 0 0 30%;
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(249, 249, 249, 0.9); /* Slight transparency for readability */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.5s ease-in-out;
}

.service:nth-child(odd) {
    transform: translateX(-100px); /* Slide in from the left */
}

.service:nth-child(even) {
    transform: translateX(100px); /* Slide in from the right */
}

.service img {
    width: 50px;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.services h2 {
    color: #ffffff; /* Set the color to white */
    font-size: 48px; /* Increase the font size (adjust as needed) */
    font-weight: bold; /* Make the title bold (optional) */
}

.service h3 {
    font-size: 24px;
    margin: 0 0 10px;
}

.service p {
    font-size: 16px;
    margin: 0 0 20px;
}

.service .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.service .button:hover {
    background-color: #218838;
}

/* Hover effect for each service */
.service:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.service-container:hover .service {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* Shake animation */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Redefining Language Services Section */
.Redefining-Language-Services {
    padding: 60px 20px; /* Add padding around the section */
    background-color: #2c3e50; /* Dark background color */
    text-align: center; /* Center the content */
    box-sizing: border-box; /* Ensures padding is included in width */
}

.Redefining-Language-Services h2 {
    font-size: 48px; /* Large title size */
    font-weight: bold; /* Bold the title */
    margin-bottom: 30px; /* Add space below the title */
    color: #ffffff; /* White text color */
    text-transform: uppercase; /* Make the title uppercase */
    letter-spacing: 2px; /* Add spacing between letters */
}

.Redefining-Language-Services .content {
    max-width: 800px; /* Limit content width for readability */
    margin: 0 auto; /* Center the content */
    font-size: 18px; /* Adjust the font size */
    line-height: 1.6; /* Improve readability with line height */
    color: #ecf0f1; /* Light grayish-white text color */
}

.Redefining-Language-Services p {
    margin-bottom: 20px; /* Space between paragraphs */
}

.Redefining-Language-Services .button {
    display: inline-block; /* Inline-block for better button control */
    padding: 15px 30px; /* Add padding to the button */
    background-color: #3498db; /* Blue background color for the button */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline from links */
    border-radius: 8px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    transition: background-color 0.3s ease-in-out; /* Smooth hover transition */
}

.Redefining-Language-Services .button:hover {
    background-color: #2980b9; /* Darken the button on hover */
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .Redefining-Language-Services h2 {
        font-size: 36px; /* Smaller title size on tablets */
    }

    .Redefining-Language-Services .content {
        font-size: 16px; /* Slightly smaller font size for readability */
    }

    .Redefining-Language-Services .button {
        padding: 12px 24px; /* Adjust button padding for smaller screens */
        font-size: 16px; /* Adjust button text size */
    }
}
/* Quality and Value Section */
.quality-value-section {
    padding: 70px 20px;
    background-color: #f4f4f4;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.text-content {
    flex: 1;
    padding-right: 40px; /* Space between text and image */
}

.text-content h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.feature {
    margin-bottom: 30px;
}

.feature h3 {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 10px;
    font-weight: bold;
}

.feature p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

.image-content {
    flex: 1;
    margin-right: 40px; /* Gap between the image and text */
}

.image-content img {
    width: 100%;
    border-radius: 10px;
}

/* Responsive Design for smaller screens */
@media screen and (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .text-content {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .image-content {
        margin-top: 20px;
        margin-right: 0; /* Reset margin on small screens */
    }
}


/* Services Section */
.services-section {
    position: relative; /* Ensure background video stays within this section */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px;
    background-color: #fff;
    text-align: center;
    overflow: hidden; /* Prevents video from overflowing into other sections */
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the section without zooming */
    z-index: -1; /* Places the video behind the content */
    opacity: 0.7; /* Adjusts opacity for text readability */
    pointer-events: none; /* Prevents interaction with the video */
}

.service-card {
    flex: 0 0 30%;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    z-index: 1; /* Ensures the cards are displayed above the video */
}

.service-card img {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

.service-card h3 {
    font-size: 24px;
    margin: 20px 0 10px;
    color: #333;
}

.service-card p {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.service-card .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.service-card .button:hover {
    background-color: #0056b3;
    transition: background-color 0.3s ease;
}

/* Interpreter Network App Section */
.interpreter-network-app {
    background-color: #f4f4f4; /* Light background */
    padding: 50px 20px;
}

.interpreter-network-app .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 10px; /* Adds space between image and text */
}

.interpreter-network-app .text-content {
    flex: 1;
    text-align: left;
}

.interpreter-network-app .text-content h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
}

.interpreter-network-app .text-content p {
    font-size: 18px;
    color: #555;
    margin-bottom: 30px;
}

.interpreter-network-app .feature-list {
    list-style-type: disc;
    text-align: left;
    padding-left: 40px;
    margin-bottom: 30px;
    font-size: 18px;
    color: #555;
}

.interpreter-network-app .feature-list li {
    margin-bottom: 10px;
}

.interpreter-network-app .text-content .button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
}

.interpreter-network-app .text-content .button:hover {
    background-color: #0056b3;
    transition: background-color 0.3s ease;
}

.interpreter-network-app .image-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interpreter-network-app .image-content img {
    max-width: 100%; /* Make sure the image doesn't exceed its container */
    height: auto;
    border-radius: 10px;
}
/* Testimonials Title */
.testimonials h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #FFFFFF; /* White title color */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}

/* Shake effect on testimonials container */
.testimonial-container:hover {
    animation: shake 0.5s; /* Duration of the shake effect */
}

/* Testimonials section */
.testimonials {
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* Ensure it's above any potential background elements */
    overflow: hidden; /* Prevents any background elements from appearing */
    min-height: 100vh; /* Ensures the section covers full screen height if needed */
}

/* Testimonial items */
.testimonial {
    flex: 0 0 45%;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #ffffff;
    border-left: 6px solid #3498db;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */
}

/* Shake effect on individual testimonials */
.testimonial:hover {
    transform: scale(1.05) rotate(2deg); /* Enlarge and rotate slightly on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.testimonial blockquote {
    font-style: italic;
    font-size: 18px;
    color: #34495e;
    margin: 0 0 15px;
}

.testimonial cite {
    font-size: 16px;
    color: #3498db;
    font-weight: bold;
    display: block;
    text-align: right;
}

.testimonial::before {
    content: open-quote;
    font-size: 50px;
    color: #e74c3c;
    position: absolute;
    top: -10px;
    left: 20px;
}

.testimonial::after {
    content: close-quote;
    font-size: 50px;
    color: #e74c3c;
    position: absolute;
    bottom: -10px;
    right: 20px;
}



.clients {
    background-color: #f9f9f9;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.clients h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #2c3e50;
}

.client-slideshow {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide-track {
    display: flex;
    width: calc(250px * 12);
    animation: scroll 30s linear infinite;
}

.client-slideshow img {
    width: 150px;
    height: auto;
    margin: 0 15px;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Why Choose Section */
.why-choose-section {
    padding: 60px 20px;
    background-color: #f4f4f4;
    text-align: left;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.text-content h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.text-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center;
}

.before-after {
    display: flex;
    justify-content: space-between; /* Ensures boxes are side by side */
    align-items: flex-start;
    flex-wrap: nowrap; /* Prevents wrapping on larger screens */
}

.before, .after {
    flex: 0 0 48%; /* Ensures both boxes take up equal space */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.before h3, .after h3 {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 20px;
}

.icon-list {
    list-style: none;
    padding: 0;
}

.icon-list li {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #333;
}

.cross-list li .icon {
    color: #e74c3c; /* Red color for crossed items */
    margin-right: 10px;
    font-size: 20px;
}

.check-list li .icon {
    color: #28a745; /* Green color for checked items */
    margin-right: 10px;
    font-size: 20px;
}

/* Becoming a Partner Section */
.partner-section {
    padding: 60px 20px;
    background-color: #f4f4f4; /* Light background color */
    text-align: left; /* Align text to the left */
}

.partner-section .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
}

.partner-section .text-content {
    flex: 1;
    padding-right: 40px; /* Space between text and image */
    text-align: center; /* Center text for better alignment */
}

.partner-section .text-content h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.partner-section .text-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.partner-section .text-content .button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff; /* Blue background for the button */
    color: white; /* White text color */
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Rounded corners for the button */
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px; /* Add space above the button */
    transition: background-color 0.3s ease-in-out;
}

.partner-section .text-content .button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.partner-section .image-content {
    flex: 1;
}

.partner-section .image-content img {
    width: 100%;
    border-radius: 10px; /* Rounded corners for the image */
}

/* Responsive Design for smaller screens */
@media screen and (max-width: 768px) {
    .partner-section .content-wrapper {
        flex-direction: column; /* Stack content vertically on smaller screens */
    }

    .partner-section .text-content {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .partner-section .image-content {
        margin-top: 20px;
    }
}


/* Language Services by Industry Section */
.industry-services {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Light background color */
    text-align: center; /* Center the content */
}

.industry-services .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content vertically */
    justify-content: center; /* Center align content horizontally */
}

.industry-services h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
    text-align: center; /* Ensure title is centered */
}

.industry-services p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 50px;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Space between grid items */
}

.industry {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content in each industry block */
}

.industry img {
    width: 64px;
    height: 64px;
    margin-bottom: 20px; /* Space between image and title */
}

.industry h3 {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 15px;
}

.industry p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.industry .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.industry .button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .industry-grid {
        grid-template-columns: 1fr; /* Stack industry blocks vertically on smaller screens */
    }
}


/* Responsive Design - Adjust to smaller screens */
@media screen and (max-width: 1200px) {
    .demo-card-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
    }
}

@media screen and (max-width: 768px) {
    .demo-card-grid {
        grid-template-columns: 1fr; /* One column on small screens */
    }
}



        /* Footer */
        footer {
            background-image: url('https://img.freepik.com/free-photo/close-up-young-colleagues-having-meeting_23-2149060259.jpg?t=st=1743273765~exp=1743277365~hmac=d603987743f7881572ef10aee230039861b49baf383403fbb7f797bb0c84fb82&w=1380');
            background-size: cover;
            background-position: center;
            color: #ecf0f1;
            padding: 40px 20px;
            width: 100%;
            height: auto;
            box-sizing: border-box;
            position: relative;
            z-index: 999;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1;
        }

        .footer-container,
        .footer-bottom {
            position: relative;
            z-index: 2;
        }

        .footer-logo {
            max-width: 220px;
            margin-bottom: 20px;
            background-color: #666666;
            padding: 10px;
            border-radius: 8px;
        }

        .footer-logo img {
            max-width: 100%;
            height: auto;
        }

        .footer-links {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 20px;
        }

        .footer-column {
            flex: 1;
            min-width: 0;
            margin-right: 20px;
        }

        .footer-column:last-child {
            margin-right: 0;
        }

        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #ffffff;
        }

        .footer-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column ul li a {
            color: #ecf0f1;
            text-decoration: none;
        }

        .footer-column ul li a:hover {
            color: #e74c3c;
        }

        .social-media a {
            margin-right: 10px;
        }

        .social-media img {
            width: 24px;
            height: 24px;
            filter: brightness(0) invert(1);
        }

        .footer-bottom {
            text-align: center;
            margin-top: 40px;
            border-top: 1px solid #34495e;
            padding-top: 20px;
        }

        .footer-bottom p {
            margin: 0;
            font-size: 14px;
        }

        .footer-bottom p a {
            color: #ecf0f1;
            text-decoration: none;
        }

        .footer-bottom p a:hover {
            color: #e74c3c;
       }