body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header */
.header-container {
    display: flex;
    align-items: center; /* Vertically align logo and language switch */
    padding: 0 80px;
    background-color: white;
}

.logo {
    max-height: 60px;
    margin-right: 80px; /* Space between logo and language switch */
}

/* Language switcher styling */
.language-switch {
    margin-right: auto; /* Align with logo */
    font-weight: bold;
    font-size: 1em; /* Slightly larger text */
}

    .language-switch a {
        text-decoration: none;
        color: #bbb; /* Default lighter color */
        cursor: pointer;
        transition: color 0.3s;
    }

        .language-switch a.active {
            color: #000; /* Darker for active language */
        }

        .language-switch a:hover {
            color: #333; /* Darker on hover for better interaction */
        }

/* Navigation container and links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 60px; /* Spacing between links */
    margin: 0;
}

nav a {
    color: #201e1e;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s, text-shadow 0.3s;
}

    nav a:hover {
        transform: scale(1.2);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

/* Hide the menu icon by default (on desktop) */
.menu-icon {
    display: none;
    cursor: pointer;
    max-height: 25px;
}



#backToTop {
    position: fixed; /* Stays in place when scrolling */
    bottom: 75px;
    right: 12px; /* Distance from the right side of the screen */
    width: 65px; /* Button width */
    height: 65px; /* Button height */
    padding: 0; /* Remove padding */
    background-color: transparent; /* Transparent background to show the image */
    border: none; /* No border */
    cursor: pointer; /* Cursor changes to pointer when hovering */
    z-index: 1000; /* Ensures the button is above other content */
    display: none; /* Hidden by default */
}

    #backToTop img {
        width: 100%; /* Image takes the full width of the button */
        height: 100%; /* Image takes the full height of the button */
        border-radius: 50%; /* If you want the image to also have a circular shape */
    }

    #backToTop:hover img {
        filter: brightness(0.8); /* Darken the image on hover */
    }




.hero-video {
    width: 100%;
}

.hero-image {
    display: none;
}

.company-intro, .services, .business-intro, .company-news {
    padding: 50px 100px;
    text-align: center;
}


    .company-intro h3 {
        color: #333;
    }

    .company-intro p {
        display: inline-flex;
        width: 800px;
    }


.services {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Adds space between each service */
    padding: 0 20px; /* Adds padding on the left and right sides */
    max-width: 900px; /* Limits the container width */
    margin: 0 auto; /* Centers the container horizontally */
}

.service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}

    .service.left img {
        order: 0;
        margin-right: 200px; /* Space between the image and the paragraph */
    }

    .service.right img {
        order: 1;
        margin-left: 200px; /* Space between the paragraph and the image */
    }

    .service.left div,
    .service.right div {
        flex: 1; /* Make the text container flexible */
    }

    .service img {
        max-width: 400px; /* Adjust the image size as needed */
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Floating effect with shadow */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
    }

        .service img:hover {
            transform: translateY(-10px); /* Slight upward movement on hover */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Deeper shadow on hover */
        }


    .service.left p, .service.right p{
        max-width: 400px;
        text-align: left;
    }

    
    .service.left h3 , .service.right h3{
        text-align: left;
    }


.business-intro p {
    display: inline-flex;
    width: 800px;
}




.learn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    margin-bottom: 80px;
}

.learn-more2 {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 20px; 
}

.learn-moreb {
    display: inline-block;
    width: 100px;
    height: 50px;
    padding: 3px 5px;
    font-size: 16px;
    color: black;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none; /* Ensures the text has no underline */
    border: none;
    cursor: pointer;
}

    .learn-moreb:hover {
        transform: scale(1.1) translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        background-color: #f0f0f0; /* Optional: change background color on hover */
    }






.business-scope {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 20px auto; /* Reduced margin on top and bottom */
    padding: 0 20px; /* Add padding on the sides if needed */
}

.item {
    text-align: center;
}

    .item img {
        width: 80%;
        height: auto;
        border-radius: 15px; /* Increased border radius for more rounded corners */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow for a floating effect */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
        margin-bottom: 5px;
    }

        .item img:hover {
            transform: translateY(-10px); /* Slight upward movement on hover */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Deeper shadow on hover for a more pronounced floating effect */
        }

    .item p {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
    }




/* Full-screen background image with blur and white overlay */
.news-section {
    background-image: url('images/down.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    height: 80vh; /* Full screen height */
    overflow: hidden;
    margin-top: 100px;
}

    /* Blurred background */
    .news-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5); /* Lighten the background with white overlay */
        backdrop-filter: blur(10px); /* Blur the background */
        z-index: 1; /* Below the content box */
    }

/* Content box styling */
.news-content {
    position: absolute;
    z-index: 2; /* Above the blurred background */
    display: flex;
    flex-direction: row; /* Align image and text horizontally */
    justify-content: space-between; /* Spread content evenly */
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Darker overlay for the content box */
    padding: 20px;
    border-radius: 20px;
    max-width: 800px;
    width: 70%; /* Responsive width */
    height: 40vh; /* Increase the height of the content box */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center the content box horizontally and vertically */
    color: #fff;
}

/* Title styling */
.news-title {
    position: absolute;
    top: 20px;
    left: 40px;
    margin-bottom: 20px; /* Adds space below the title */
}

/* Text content styling */
.news-text {
    margin-left: 20px;
    max-width: 50%; /* Adjust to give more space to the image */
    flex-grow: 1; /* Ensure it takes up available space */
    text-align: left; /* Align text to the left */
}

.news-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 16px;
    color: orange; /* Orange text color */
    text-decoration: none; /* Remove underline from the link */
    font-weight: bold;
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

    .news-more:hover {
        color: darkorange; /* Darker orange on hover */
        text-decoration: underline; /* Underline on hover */
    }

/* Image styling */
.news-image img {
    max-width: 300px; /* Ensure the image size is larger */
    border-radius: 10px;
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px;
}


/* Navigation arrows inside the content box */

.news-navigation {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
}

.nav-arrow {
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 10px;
    border-radius: 50%; /* Make the buttons circular */
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 40px; /* Ensure the buttons are square */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-arrow:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }




.footer {
    background-color: #333;
    color: white;
    padding: 50px;
    display: flex;
    justify-content: left;
    align-items: start;
    position: relative;
}

    .footer .column {
        padding: 0 30px;
        margin-right: 40px; /* Add spacing between the column and image */
    }

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

        .footer .column p {
            font-size: 14px;
            color: white;
            margin-bottom: 10px;
        }

.qr-container {
    width: 126px;
    height: 160px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 8px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    position: absolute;
    bottom: 30px;
    right: 80px;
}

    .qr-container h1 {
        color: white;
        margin: 0;
        font-size: 18px;
    }

    .qr-container img {
        width: 120px;
        height: auto;
        display: block;
    }

/* New styles for the copyright line */
.footer-copyright {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px; /* Small font size */
    color: #d3d3d3; /* Light gray color */
    text-align: center;
}




@media (max-width: 980px) {
    .header-container {
        padding: 0 20px;
        flex-direction: row; /* Ensure elements are aligned horizontally */
        height: 60px;
    }

    .nav-links {
        max-width: 100%;
        text-align:center;
        left: 0;
        right: 0;
        top: 60px;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        position: absolute;
        display: none; /* Add this line to hide by default */
    }

    .nav-item {
        padding: 8px 20px; /* Adjust padding as needed */
        display: inline-block; /* Makes the item a block for easier clicking */
    }

        .nav-item a {
            display: block; /* Ensures the entire area is clickable */
            text-decoration: none; /* Optional: remove underline */
            color: inherit; /* Ensures the text color matches its parent */
        }

    .nav-active .nav-links {
        display: flex; /* Show when nav-active is added */
    }

    .menu-icon {
        display: block;
    }

    .nav-active .nav-links {
        display: flex;
    }

    

    .hero-video {
        display: none; /* Hide the video by default */
    }

    .hero-image {
        display: block; /* Show the image by default */
        width: 100%;
        height: auto;
    }



    .services {
        padding: 0 10px; /* Mobile padding */
    }

    /* Service layout for mobile */
    .service.left {
        flex-direction: column; /* Stack images on top of text */
        align-items: center; /* Center both image and text */
        margin-bottom: 0px; /* Reduce gap between services */
    }

    .service.right {
        flex-direction: column-reverse; /* Stack images on top of text */
        align-items: center; /* Center both image and text */
        margin-bottom: 0px; /* Reduce gap between services */
    }
        /* Center images and make them responsive */
        .service img {
            max-width: 60%; /* Make image full width */
            margin: 0 auto 10px auto; /* Center the image and add a small margin below it */
        }

        /* Remove left/right-specific styling on mobile */
        .service.left img, .service.right img {
            margin: 0; /* Remove the left/right margins */
        }

        /* Ensure the text and headings are centered */
        .service.left p, .service.right p {
            max-width: 100%;
            text-align: center; /* Center the text */
            margin-top: 0px; /* Reduce extra spacing on top of text */
        }

        .service.left h3, .service.right h3 {
            text-align: center; /* Center the titles */
            margin-top: 20px; /* Remove extra spacing on top */
        }


    /* Business scope section: switch to 1 column */
    .container {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .item img {
        width: 60%; /* Make the image take full width */
    }

    /* Adjust padding and margins for mobile devices */
    .company-intro, .services, .business-intro, .company-news {
        padding: 30px 20px;
    }

        .company-intro p, .business-intro p {
            width: 100%;
        }

    .learn-more, .learn-more2 {
        margin-bottom: 40px; /* Reduce space below */
    }

    .news-content {       
        justify-content: space-between;
        max-width: 800px; /* Adjust max width for desktop */
        height: auto;
        padding: 20px;
    }

    /* Text content styling */
    .news-text {
        margin-top: 70px;
        max-width: 100%; /* Keep text and image side by side */
    }

    /* Image styling */
    .news-image {
        display: none;
    }



    .footer {
        display: flex;
        flex-wrap: wrap; /* Add this to allow wrapping */
        justify-content: left; /* Align items to the left instead of space-between */
        align-items: start; /* Align items at the top */
        padding: 10px;
        position: relative;
    }

        /* Column text (company info) */
        .footer .column {
            flex: 1; /* Allow text to take up more space */
            padding: 0;
            margin-right: 20px; /* Space between text and image */
            text-align: left;
            font-size: 14px; /* Smaller font size for the text */
            line-height: 1.5; /* Better readability */
        }

        .footer .info p {
            font-size: 14px; /* Adjust size as needed */
        }

    .qr-container {
        display: none; /* Hide image on screens smaller than 768px */
    }

    /* Copyright text */
    .footer-copyright {
        margin-top: 20px;
        font-size: 12px;
        color: #d3d3d3;
        text-align: center;
        width: 100%; /* Ensure it spans the full width */
        position: relative;
    }
}