/* 
===============================
 Global box-sizing rule
===============================
*/

/* Apply box-sizing rule globally so padding and border are included within an element's total width and height */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
===============================
 Body Styling
===============================
*/

/* Basic body styling: font family, margins, padding, background, color, and layout. 
   Ensures the body takes up the full viewport height and prevents shrinking below 900px. */
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes up the full viewport height */
    min-width: 900px;  /* Prevent the page from shrinking below 900px */

    /* Always show vertical scrollbar to prevent layout shift */
    overflow-y: scroll; /* New addition: Always show vertical scrollbar */

    /* Global font styles */
    font-family: Arial, sans-serif, "Noto Sans", "PingFang SC", "Noto Sans CJK JP", "Noto Sans KR", "Noto Sans CJK TC";
    font-size: 16px; /* Adjust base font-size */
    line-height: 1.6;
}

/* Adjustments for Chinese (Simplified) */
html[lang="zh"] body {
    font-size: 16px; /* Adjust this if necessary */
    line-height: 1.6;
}

/* Adjustments for Japanese */
html[lang="ja"] body {
    font-size: 16px;
    line-height: 1.6;
}

/* Adjustments for Korean */
html[lang="ko"] body {
    font-size: 16px;
    line-height: 1.6;
}

/* 
===============================
 Main Container
===============================
*/

/* Centers content within the body and ensures the main content takes available space between header and footer. */
.container {
    width: 80%; /* Takes 80% of the viewport width */
    margin: auto;  /*Centers the container horizontally */
    flex: 1; /* Ensures it grows to fill the available space */
    margin-bottom: 30px; /* Adds 30px of space at the bottom */
}

.caption {
    text-align: center;
    font-style: italic;
}
/* 
===============================
 Header Styling
===============================
*/

/* Styling for the header: dark background and white text, original blue, background-color: #00264d; */
header {
    background: linear-gradient(to right, #003366, #004080, #00509e);
    padding: 30px 0 0 0;
    color: white;

    position: fixed; /* Makes the header stay in place */
    width: 100%; /* Increase the full width of the header when using position:fixed */
    z-index: 10; /* Increase the z-index value to have the header always on the top of other images */
}

/* 
Ensures header elements (navigation and dropdown) are spaced apart and aligned vertically.
Makes the header a flexbox container to manage positioning. 
*/
header .container {
    position: relative; /* Ensures proper positioning of dropdowns */
    display: flex;
    justify-content: space-between; /* Spreads navigation and language dropdown apart */
    align-items: center; /* Vertically aligns items inside header */

    margin-bottom: 30px; /* Decrease the default .container value from 30px to ? */
}

main .container {
     text-align: justify; /* Justifies the text */

     margin-top: 150px; /* Adjust this to match the height of the header */
}
/* 
===============================
 Logo Styling
===============================
*/

.div-logo{
    margin: 0 30px 0 0; /* Top 0, Right 30px, Bottom 0, Left 0 */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */

    background-color: white; /* White background */
    padding: 5px 10px; /* Adjust padding to fit the logo */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Target the logo specifically */
header .logo {
    width: 186px; /* Set the desired width, with blue logo width: 200px; red logo width 216.45px, 186px*/
    height: auto; /* Maintain the aspect ratio */
}

/* 
===============================
 Navigation Styles
===============================
*/

header .nav-wrapper {
    display: flex;
    gap: 0px; /* Space between items */
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    justify-content: space-between;

    position: relative;
    left: -80px; 
    /* -60px Move the logo and nav elements left */
}

header nav {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

header nav ul {
    display: flex; /* Horizontal layout */
    gap: 30px;  /*Space between navigation items */
    list-style: none; /* No bullet points */

    margin: 0;  /*Remove default margin */
    padding: 0;  /*Remove default padding */

    /*white-space: nowrap;  Prevents wrapping */
    /*justify-content: space-between;  Adjusts spacing between items */
}

header nav ul li {
    margin: 0;
    padding: 0;
}

/* Basic styling for navigation links: white text, bold, no underline */
header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;   
}

/* Hover effect for navigation links: changes link color to original orange, color: #ff6600; */
header nav ul li a:hover {
    color: #f96302;
}

/* Styling for active parent (such as a dropdown parent), Original darker orange for active parent section, color: #e65c00; */
nav ul li a.active-parent {
    color: #e65c00;
}

/* Styling for the active link (currently viewed page), original orange, color: #ff6600; */
nav ul li a.active {
    color: #f96302;
}

/* Allows for screen resizing dependent on the screen type and resolution; the value should be between 1000px - 1400px */
/* @media (max-width: 1000px) { */
@media (max-width: 1040px) {

    nav ul {
        flex-wrap: wrap; /* Allow items to wrap to the next row */
        justify-content: center; /* Center the menu items */
    }

    main .container{
        margin-top: 160px; /* Adjust this to match the height of the header */
    }

    /*header {padding: 20px 0 5px 0;  Reduce the bottom padding value from 20px to 5px
    }*/

    .market-sectors {   
        /* Needed to avoid miscalculations when setting the scroll-margin-top parameter for #*/
        min-height: 382.5px !important;  /*Adjust this value based on the applications.jpg image height */
    }

    /* Adjust this value for the desired offset (needed for section link offset adjustment!), !important; is needed in this case*/
    .scroll-target {
        scroll-margin-top: 159px !important; 
    }

    /* For the Competitors Advantage section, somehow scroll-margin-top has not been inherited properly from the .scroll-target class */
    #competitors_advantage {
        scroll-margin-top: 159px !important;   
    }
}

/* 
===============================
 Dropdown Menu (General)
===============================
*/

/* Hidden dropdown menu by default, styled with dark background and a subtle shadow, original blue, background-color #00264d*/
.dropdown-content {
    display: none; /* Hidden until hovered */
    position: absolute; /* Positioned relative to parent */
    background: linear-gradient(to right, #003366, #004080, #00509e);
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Styling for nested dropdown, original blue, background-color: #00264d*/
.nested-dropdown-content {
    display: none; /* Hide nested dropdown by default */
    position: absolute;
    top: 0;
    left: 100%; /* Position to the right of the parent dropdown */
    background: linear-gradient(to right, #003366, #004080, #00509e);
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 2; /* Ensure it appears above the parent menu */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* When the parent list item is hovered, the dropdown is shown */
.dropdown:hover .dropdown-content {
    display: block; /* Show the dropdown menu */
}

/* Show nested dropdown on hover */
.dropdown-content li.dropdown:hover .nested-dropdown-content {
    display: block; /* Show nested dropdown */
}

/* Vertically stack dropdown items, no margin or padding */
.dropdown-content li, .nested-dropdown-content li {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Styling for dropdown links: white text, block-level element for full-width clickable area */
/*.dropdown-content li a, .nested-dropdown-content li a {
    color: white;
    padding: 10px 15px;
    display: block;
    text-align: left;
    box-sizing: border-box;
} */

/* Dropdown link hover effect: changes background to original orange, background-color: #ff6600; */
/* .dropdown-content li a:hover, .nested-dropdown-content li a:hover {
    background-color: #f96302;
    color: white;
} */

.dropdown-content li a, .nested-dropdown-content li a {
    padding: 10px 15px;
    display: block;
    text-align: left;
    box-sizing: border-box;
    transition: background 0.3s, transform 0.2s ease-in-out;
}

.dropdown-content li a:hover, .nested-dropdown-content li a:hover {
    background: linear-gradient(to right, #f96302, #e65c00);
    transform: translateX(5px);
    color: white
}

/* 
===============================
 Footer Styling
===============================
*/

/* Dark blue footer with white centered text, original blue, background-color: #00264d; */
footer {
    background: linear-gradient(to right, #003366, #004080, #00509e);
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: auto; /* Pushes the footer to the bottom of the page if content is short */
}

/* Small margin for paragraphs inside the footer */
footer p {
    margin: 5px 0;
}

/* Style for the email link in the footer */
footer a {
    color: white;           /* Set the text color to white */
    text-decoration: underline; /* Ensure the link is underlined */
    font-weight: normal;    /* Adjust font weight if needed */
}

/* Optional: Hover effect to make it visually distinct when hovering, Change color to orange on hover, original orange, color: #ff6600; */
footer a:hover {
    color: #f96302;
    text-decoration: underline; /* Keep the underline on hover */
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    padding: 10px 0;
}

.footer-logos img {
    max-height: 60px;              
    max-width: 160px;              
    width: auto;                  
    height: auto;
    object-fit: contain;
    background-color: white;
    border-radius: 4px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-block;
}


/* 
===============================
 Main Content Styling (Headings and Buttons)
===============================
*/

/* Dark blue color for the main headings (h1), original blue, color: #00264d; */
h1 {
    /* color: #00264d; */

    background: linear-gradient(to right, #003366, #00509e);
    background-clip: text; /* Standard property */
    -webkit-background-clip: text; /* WebKit-specific for Safari & Chrome */
    -webkit-text-fill-color: transparent; /* Makes text transparent so gradient shows */
    font-weight: bold;
}

/* 
===============================
 Call-to-action Button Styling
===============================
*/

/* Button with orange background, white text, and bold styling, original orange, background-color: #ff6600; */
.cta-button {
    background-color: #f96302;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px; /* Space above the button */
    display: inline-flex; /* Flexbox for both vertical and horizontal centering */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    height: 40px; /* Fixed height */
    box-sizing: border-box; /* Ensures padding is included within the height */
    text-align: center; /* Ensure text is centered */
    line-height: normal; /* Let flexbox handle vertical centering */
}

/* Darker orange on hover for the call-to-action button, original darker orange, background-color: #e65c00; */
.cta-button:hover {
    background-color: #e65c00;
}

/* 
===============================
 Language Dropdown Styling
===============================
*/

/* Dropdown container is inline-block to fit within the header's layout */
.language-dropdown {
    position: relative; /* Ensures positioning relative to container */
    display: inline-block;
    top: 0;
    right: 0;
    /* font-size: 18px; */
}

/* Styling for the dropdown button: dark background, white text, with flex alignment for flag and text. Original blue, background-color: #00264d; */
.language-dropdown .dropdown-btn {
    background: linear-gradient(to right, #003366, #004080, #00509e);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Vertically align flag and text */
}

/* Sets flag icon size and spacing between flag and text */
.flag-icon {
    width: 20px;
    height: auto;
    margin-right: 8px;
}

/* Sets the language button aligned in the center with the other nav items */
.language-wrapper {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    margin-left: auto;  /*Pushes this child to the right */
    margin: 0;
    gap: 0px;
}

/* Hidden dropdown menu by default, styled to match header, with shadow for depth. Original blue, background-color: #00264d; */
.language-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background: linear-gradient(to right, #003366, #004080, #00509e);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    min-width: 150px;
    padding: 0;
    margin: 0;
    right: 0; /* Align the dropdown items to the right */
}

/* Styles for dropdown list items: no bullets, no margin/padding */
.language-dropdown .dropdown-content li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Styling for dropdown links: white text, flexbox for flag alignment, full-width clickable area */
.language-dropdown .dropdown-content li a {
    color: white;
    padding: 10px;
    display: flex;
    align-items: center; /* Align flag and text vertically */
    text-decoration: none;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
}

/* Hover effect for language dropdown links: original orange, background-color: #ff6600; */
.language-dropdown .dropdown-content li a:hover {
    background-color: #f96302;
    color: white;
}

/* Shows the language dropdown on hover */
.language-dropdown:hover .dropdown-content {
    display: block;
}

/* 
===============================
 Form Styling
===============================
*/

/* Container for the contact form to align with the global container styling */
form {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Space between the form and other elements */
}

/* Form fields styling: input and textarea */
form input[type="text"], 
form input[type="email"], 
form textarea {
    width: 100%; /* Full-width form fields */
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Ensures padding is included in width */
    font-family: inherit; /* Inherits the global font family */
    font-size: 16px; /* Inherits global font size */
}

/* Styling for the form labels */
form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #333; /* Match the global body text color */
}

/* Button styles align with the existing .cta-button styles, original orange, background-color: #ff6600; */
form button {
    background-color: #f96302;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Hover effect for form submit button, original darker orange, background-color: #e65c00; */
form button:hover {
    background-color: #e65c00;
}

/* 
===============================
 Flash Messages Styling
===============================
*/

/* Flash messages styled to stand out */
.flash-message {
    padding: 15px; /* Padding for the message */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 20px; /* Space below the message */
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Style for success messages */
.alert-success {
    background-color: #d4edda; /* Light green background */
    color: #0ea331; /* Dark green text */
    border: 1px solid #c3e6cb; /* Darker green border */
}

/* Style for danger messages (errors) */
.alert-danger {
    background-color: #fdc4ca; /* Light red background */
    color: #f4253a; /* Dark red text */
    border: 1px solid #fecfd4; /* Darker red border */
}

/* 
===============================
 Contact Information Styling
===============================
*/

#honeypot {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

/* Contact info section styling */
.contact-info {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

 /* Dark blue heading color, original blue, color: #00264d; */
.contact-info h2 {
    /* color: #00264d; */

    background: linear-gradient(to right, #003366, #00509e);
    background-clip: text; /* Standard property */
    -webkit-background-clip: text; /* WebKit-specific for Safari & Chrome */
    -webkit-text-fill-color: transparent; /* Makes text transparent so gradient shows */
    font-weight: bold;
}

.contact-info p, .contact-info a {
    color: #333;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Styling for the social media links, original orange, color: #ff6600; */
.contact-info a {
    display: inline-block;
    color: #f96302;
    text-decoration: underline;
}

/* original darker orange, color: #e65c00; */
.contact-info a:hover {
    color: #e65c00;
}

.map-container {
    position: relative; 
    width: 100%; /* Full width of the container */
    padding-bottom: 56.25%; /* This creates a 16:9 aspect ratio (100% / 16 * 9 = 56.25%) */
    height: 0; /* Set height to 0 so it’s defined by padding */
    overflow: hidden; /* Ensure no overflow */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove iframe border */
}

/* Style for LinkedIn icon in the Follow Us section */
.follow-icon {
    color: #0077b5; /* LinkedIn blue color */
    font-size: 30px; /* Adjust size as needed (increase for a larger icon) */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.follow-icon:hover {
    transform: scale(1.2); /* Slight zoom effect on hover */
    
}

/* 
===============================
 HTML General Settings
===============================
*/

html {
    scroll-behavior: smooth; /* for smooth scrolling */

    /* Prevent mobile browsers from auto-scaling text */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 
===============================
 Section Container Styling
===============================
*/

.section-container {
    background-color: #fff; /* White background for contrast */
    padding: 5px 20px 40px 20px; /* Padding for spacing, top, right, bottom, left */
    border-radius: 5px; /* Consistent rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Depth effect */
    margin-top: 20px; /* Space above */
}

/* Dark blue heading color, original blue, color: #00264d; */
.section-container h2{
    /* color: #00264d; */

    background: linear-gradient(to right, #003366, #00509e);
    background-clip: text; /* Standard property */
    -webkit-background-clip: text; /* WebKit-specific for Safari & Chrome */
    -webkit-text-fill-color: transparent; /* Makes text transparent so gradient shows */
    font-weight: bold;
}

/* Dark blue heading color, original color: #00264d; */
.section-container h3{
    /* color: #00264d; */

    background: linear-gradient(to right, #003366, #00509e);
    background-clip: text; /* Standard property */
    -webkit-background-clip: text; /* WebKit-specific for Safari & Chrome */
    -webkit-text-fill-color: transparent; /* Makes text transparent so gradient shows */
    font-weight: bold;
}

/* 
===============================
 Team Part Styling
===============================
*/

.team-picture {
    display: flex; /* Enables Flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    
    /* Needed to avoid miscalculations when setting the scroll-margin-top parameter for #*/
    /*min-height: 315.25px; Adjust this value based on the applications.jpg image height */
    height: 100%; /* Ensure it stretches to the full height of its container */
}

.team-picture img {
    width: 100%; /* Relative to the parent container */
    /*max-width: 400px;  Restrict maximum width for consistency */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;  /*Optional rounding for edges */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    margin: 0;  /* Removes default image margins */

    max-width: 100%;
    /* object-fit: cover; */
    object-fit: contain;
}

.team-picture img:hover {
    transform: scale(1.1); /* Subtle zoom effect */
}

#founders_picture.team-picture {
    /*min-height: 315.25px;  Adjust this value based on the applications.jpg image height,  max-width: 50%; */
    min-height: 283.7px;                                                                 /* max-width: 45%; */
}

#founders_picture.team-picture img{
    max-width: 45%;
}

#vigier.team-picture {
    min-height: 306px;
}

#vigier.team-picture img{
    max-width: 45%;
}

#vigier_ajay.team-picture {
    min-height: 459px;
}

#vigier_ajay.team-picture img{
    max-width: 45%;
}

#rohdiamant.team-picture {
    min-height: 296px;
}

#rohdiamant.team-picture img{
    max-width: 45%;
}

#our_team_picture_1.team-picture {
    min-height: 220px; /* Adjust this value based on the applications.jpg image height */
}

#our_team_picture_2.team-picture {
    min-height: 220px; /* Adjust this value based on the applications.jpg image height */
}

.team-section{
    display: flex;
    justify-content: space-between;
    gap: 60px; /* Adjust spacing between team members */
    margin-top: 10px;
}

.team-member{
    flex: 1;
    text-align: center;
}

.img-member {
    width: 125px;
    height: 125px;
    border-radius: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/*
.team-member img {
    width: 100%;  Relative to the parent container
    height: auto; Automatically adjusts height to maintain aspect ratio
    max-width: 250px; Limits the maximum width for consistency
    object-fit: cover; Ensures the image fills the specified space while cropping excess
    border-radius: 10px; Slight rounding for rectangle edges (optional)
    transition: transform 0.3s ease; Smooth hover effect 
}
*/

.team-member img:hover {
    transform: scale(1.1); /* Subtle zoom effect on hover */
}

.team-member-description {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
}


/* 
===============================
Endorsement Part Styling
===============================
*/

/* Endorsement Highlight Section */
.endorsement-highlight {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 20px; /* Padding for spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Depth effect */
    margin-top: 40px; /* Space above the section */
}

/* Link inside the endorsement highlight */
.endorsement-highlight a {
    color: #0066cc; /* Standard blue color */
    text-decoration: none; /* Removes underline */
    font-weight: bold; /* Bold text */
}

/* Link hover effect */
.endorsement-highlight a:hover {
    color: #004c8c; /* Darker blue on hover */
    text-decoration: underline; /* Adds underline on hover */
}

/* Modal (popup) styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black with transparency */
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 60%; /* Limit the modal width to 60% of the screen */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center the content */
    overflow: hidden; /* Prevent content from overflowing */
}

/* Close Button */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal visibility triggered by the target link */
.modal:target {
    display: block; /* Show the modal when the link with the corresponding ID is clicked */
}

/* Adjust the image inside the modal */
.modal-img {
    width: 100%; /* Set the image width to 50% of its original size */
    height: auto; /* Maintain the aspect ratio of the image */
    margin: 20px 0; /* Add some margin to avoid the image touching other elements */
}

/* 
===============================
  Certifications & Awards Styling
===============================
*/
.startfeld-prize {
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically (if needed) */
    margin-top: 30px; /* Adjust spacing above the image */
}

.startfeld-prize img {
    width: 100%; /* Relative to the parent container */
    max-width: 400px; /* Restrict maximum width for consistency */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounding for edges */
    object-fit: cover; /* Ensures proper cropping */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
}

.startfeld-prize img:hover {
    transform: scale(1.1); /* Subtle zoom effect */
}

#certifications_and_awards.section-container h3 {
    text-align: center; /* Center the text horizontally */
}

/* 
===============================
   FAQ Section Styling
===============================
*/

/* Summary inherits text styles but uses blue text, original blue, color #00264d; */
#faq.section-container summary {
    cursor: pointer; /* Indicate it's clickable */
    padding: 10px 15px; /* Add padding */
    background-color: #f5f5f5; /* Light gray background for distinction */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 10px; /* Space between questions */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
    
    color: #00264d;
    font-weight: bold;
}

/* Hover effect for summary, original orange, background-color: #ff6600; */
#faq.section-container summary:hover {
    background-color: #f96302;
    color: white; /* Contrast text */
}

/* Expanded summary styling, original darker orange, background-color: #e65c00; */
#faq.section-container details[open] summary {
    background-color: #e65c00;
    color: white;   /*White text for contrast */
    border-bottom-left-radius: 0; /* Connected appearance */
    border-bottom-right-radius: 0;
}

/* Answer paragraph inherits text styles */
#faq.section-container details div {
    padding: 10px 15px; /* Match padding with summary */
    border: 1px solid #ccc; /* Consistent border */
    border-top: none; /* Seamless connection */
    border-bottom-left-radius: 5px; /* Rounded corners */
    border-bottom-right-radius: 5px;
    background-color: #fff; /* White background */
    margin: 0; /* Reset default margin */
    color: #333; /* Default body text color */
}

/* Smooth transitions for answer visibility */
#faq.section-container details div {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
    max-height: 0; /* Initially collapsed */
    opacity: 0; /* Initially hidden */
}

/* Show answer when expanded */
#faq.section-container details[open] div {
    max-height: none;
    opacity: 1;
}

.rainbow {
    display: flex; /* Enables Flexbox layout */
    justify-content: center; /* Centers the image horizontally */
}

.rainbow img {
    width: 100%; /* Relative to the parent container */
    max-width: 800px; /* Restrict maximum width for consistency */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounding for edges */
    object-fit: cover; /* Ensures proper cropping */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    margin: 0; /* Removes default image margins */
}

.rainbow img:hover {
    transform: scale(1.1); /* Subtle zoom effect */
}

/* Needed to remove inherited #faq.section-container details div settings */
.technical-form-container div{
    padding: 0 !important;
    border: none !important;
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;  /* Space between the fields */
}

.form-group {
    flex: 1;  /* Allow each field to take equal space */
    min-width: 200px;  /* Ensure the fields don't get too small */
}

/* 
===============================
   Applications Section Styling
===============================
*/

.market-sectors {
    display: flex; /* Enables Flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    
    /* Needed to avoid miscalculations when setting the scroll-margin-top parameter for #*/
    min-height: 450px;  /*Adjust this value based on the applications.jpg image height */
    height: 100%; /* Ensure it stretches to the full height of its container */
}

.market-sectors img {
    width: 100%; /* Relative to the parent container */
    max-width: 800px; /* Restrict maximum width for consistency */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounding for edges */
    object-fit: cover; /* Ensures proper cropping */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    margin: 5px auto; /* Removes default image margins */
}

.market-sectors img:hover {
    transform: scale(1.1); /* Subtle zoom effect */
}

#applications.section-container h3 {
    margin-top: 30px;
}

/* Define custom styles for links with the 'app-links' class */
.app-links {
    color: #333; /* Set link color to black */
    /*text-decoration: none;  Optional: Remove underline */
}

/* Adjust this value for the desired offset (needed for section link offset adjustment!)*/
.scroll-target {
    scroll-margin-top: 144px; 
}

/* For the Competitors Advantage section, somehow scroll-margin-top has not been inherited properly from the .scroll-target class */
#competitors_advantage {
    scroll-margin-top: 144px;  
}
/* 
===============================
   Products Section Styling
===============================
*/
.products_HSC {
    display: flex; /* Enables Flexbox layout */
    justify-content: center; /* Centers the image horizontally */
}

.products_HSC img {
    width: 90%; /* Relative to the parent container */
    max-width: 900px; /* Restrict maximum width for consistency, old 800px*/
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounding for edges */
    object-fit: cover; /* Ensures proper cropping */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    margin: 10px auto; /* Removes default image margins */
}

.products_HSC img:hover {
    transform: scale(1.1); /* Subtle zoom effect */
}

.rohdiamant {
    display: flex;
    justify-content: center;
    margin: 24px auto 40px auto;
}

.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px; /* responsive max width */
    aspect-ratio: 4096 / 2731; /* sets the desired canvas ratio */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fadeCycle 24s infinite ease-in-out;
    transition: opacity 2s ease-in-out;
    border-radius: 10px;
}

/* 4 images, 8s display each, staggered */
.image-wrapper img:nth-child(1) {
    animation-delay: 0s;
}
.image-wrapper img:nth-child(2) {
    animation-delay: 6s;
}
.image-wrapper img:nth-child(3) {
    animation-delay: 12s;
}
.image-wrapper img:nth-child(4) {
    animation-delay: 18s;
}

@keyframes fadeCycle {
    0%, 20%   { opacity: 1; }
    25%, 100% { opacity: 0; }
}

.specs-cta-card {
    background-color: #F6F6F6;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    max-width: 350px;
    margin: 25px auto;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
  }
  
  .specs-cta-card:hover {
    transform: translateY(-5px);
  }
  
  .specs-link {
    text-decoration: none;
    color: #174F94;
  }
  
  .specs-link img {
    max-width: 200px;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
  }
  
  .specs-cta-card:hover img {
    transform: scale(1.05);
  }
  
  .specs-link p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #174F94;
    margin: 0;
  }