*{
        font-family: 'LindeDaxGlobal';
    }
     .main-container{
        box-sizing: border-box;
        margin: 0 auto;
    }
/* Full-Width Video Banner */
.video-banner-widget {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    overflow: hidden;
}

/* Video Background */
.video-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full-width video */
    height: 100%; /* Full-height video */
    object-fit: cover; /* Ensures the video covers the container fully */
    z-index: -1; /* Places the video beneath any text/content */
}

/* Align text and transparent rectangle to the left */
.banner-content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    top: 0px;
}

/* Text Background Alignment */
#text-background {
    background: linear-gradient(
        to right, 
        rgba(0, 50, 86, 0.6) 0%, 
        rgba(0, 48, 92, 0.4) 40%,  /* Darker opacity on hover */
        rgba(0, 48, 92, 0.3) 70%, 
        rgba(0, 48, 92, 0.1) 100%  /* Slightly more visible gradient */
    );
    padding: 20px;
    border-radius: 10px; /* Rounded edges for the rectangle */
    width: 50%;
    color: white;
    margin-top: 110px; /* Fixed top margin */
}


/* Headline Styling */
.main-headline {
    font-size: 3.2rem; /* Main headline font size */
    margin: 0;
    font-weight: bold;
}

/* Subheadline Styling */
.sub-headline {
    font-size: 1.6rem; /* Subheadline font size */
    margin-top: 20px;
    line-height: 1.5;
    color: #FFFFFF;
}


/* Full Width Navigation Bar */
.navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}

/* Individual Navigation Items */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icons and labels within each container */
    gap: 10px; /* Space between image and label */
    cursor: pointer;
}

/* Icon Images */
.nav-item img {
    width: 50px; /* Fixed width for the icons */
    height: 50px; /* Fixed height for the icons */
    border-radius: 8px; /* Optional: Round the edges of the icon */
}
.nav-item img {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Keeps the image within bounds without stretching */
    border-radius: 8px;
}

/* Icon Label Text */
.icon-label {
    font-size: 1.6rem; /* Adjust font size for label text */
    font-weight: 700;
    color: #003256; /* Darker blue text color for labels */
    font-family: 'LindeDaxGlobal'; /* Simple, readable font */
}
.nav-item-decoration{
    width: 90px;
    background-color: #eee; /* Default gray color */
    transition: background-color 0.3s ease;
    height: 3px;
    border-radius: 5px;


}
.nav-item:hover .nav-item-decoration{
    background-color: #0077CC;
}
.nav-item-decoration {
       transform: scaleX(1); /* Default size */
       transition: background-color 0.3s ease, transform 0.3s ease;
       margin-bottom: 0px;
   }

   .nav-item:hover .nav-item-decoration {
       transform: scaleX(1.2); /* Slightly extend the line when hovered */
       background-color: #0077CC;
   }

/* Three Element Widget */
.three-element-widget {
    display: flex;
    width: 98%;
    margin: 30px auto;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
}

/* First Element (Image Background with Text and Button Overlay) */
.first-element {
    position: relative;
    width: 50%; /* First element takes half the widget space */
    border-radius: 8px; /* Add rounded corners */
    overflow: hidden; /* Crop extra content */
}

.first-element img {
    width: 100%;
    height: -webkit-fill-available; /* Maintain aspect ratio */
}

/* Darken the Image with Transparent Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* Align inner text to the left */
    align-items: end; /* Center text vertically */
    padding: 20px; /* Add padding */
    box-sizing: border-box; /* Include padding in width calculations */
    background: rgba(0, 0, 0, 0.1);
}

.overlay-content {
    width: 100%; /* Text takes up to 90% of image area */
    color: #FFFFFF; /* White text */
    font-family: 'LindeDaxGlobal';
}

.overlay-content h2 {
    font-size: 2.8rem; /* Heading size */
    margin: 0 0 10px; /* Space below heading */
    font-weight: bold;
}

.overlay-content p {
    font-size: 1.6rem; /* Adjust paragraph size */
    margin-bottom: 20px; /* Add space below paragraph */
    line-height: 1.5; /* Improve readability */
    color: #FFFFFF;

}

/* Button Style for First Element */
.button-element {
    display: inline-block;
    padding: 12px 40px;
    font-size: 1.6rem;
    color: #FFFFFF; /* White button text */
    background-color: #0077CC; /* Blue button background */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Add rounded corners */
    float: right; /* Align button to the right */
}

/* Second and Third Elements (Small Images with Text Below) */
.second-element,
.third-element {
    width: 25%; /* Each takes half of the remaining 50% */
    text-align: center; /* Center text under images */
    overflow: hidden; /* Crop extra content */
}

.second-element img,
.third-element img {
    width: 100%; /* Make the image fill the container width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for the images */
    margin-bottom: 10px; /* Space under images */
}

.text-content {
    color: #003256; /* White text */
    font-family: 'LindeDaxGlobal';
    text-align: left;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-content h3 {
    font-size: 1.8rem; /* Heading Font */
    margin-bottom: 10px; /* Add spacing below heading */
    margin-top: 0px;
    font-weight: bold;
    margin-top: 20px;
}

.text-content p {
    font-size: 1.6rem; /* Paragraph Font */
    padding-bottom: 10px;
    max-height: 80px;
    margin-bottom: 40px;
}

/* Button Style for Small Images */
.button-element-small {
    display: inline-block;
    padding: 10px 40px;
    font-size: 1.6rem;
    margin-top: 5px;
    color: #FFFFFF; /* White button text */
    background-color: #0077CC; /* Blue button background */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Add rounded corners */
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .three-element-widget {
        flex-direction: column; /* Stack elements vertically */
        gap: 30px; /* Add more space between stacked elements */
    }

    /* First Element - Full Width on Smaller Screens */
    .first-element {
        width: 100%; /* Make first element take full width */
    }

    /* Second and Third Elements - Also Full Width */
    .second-element,
    .third-element {
        width: 100%; /* Make second and third elements take full width */
    }

    /* Text Content Alignment */
    .text-content {
        align-items: flex-start; /* Align text and buttons to the left (optional) */
        text-align: left; /* Keep text aligned left */
    }

    /* Images */
    .first-element img,
    .second-element img,
    .third-element img {
        width: 100%; /* Make images fill the parent container width */
        border-radius: 8px; /* Maintain rounded corners */
    }
}

/* Full-Width Blue Background */
.full-width-blue-widget {
    background-color: #002D54; /* Blue background */
    width: 100%; /* Full width of the page */
    padding: 40px 0; /* Equal top and bottom padding for the entire widget */
}

/* Content Container (Aligns with other widgets above) */
.content-container {
    width: 98%;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 1200px;
}

/* Text Section */
.widget-text {
    width: 60%; /* Text section takes more space */
    color: white; /* Text color */
    font-family: 'LindeDaxGlobal'; /* Custom font applied */
}

/* Heading with Vertical Line */
.widget-text h2 {
    display: flex;
    align-items: center;
    font-size: 2.8rem; /* Adjust heading size */
    margin-bottom: 40px; /* Larger space below heading */
    margin-top: 0px;
}

.heading-line {
    display: inline-block;
    width: 8px; /* Thickness of the vertical line */
    height: 60px; /* Length of the vertical line */
    background-color: #0077CC; /* Blue line color */
    margin-right: 15px; /* Space between line and heading text */
}

/* Paragraph */
.widget-text p {
    font-size: 1.6rem; /* Paragraph font size */
    line-height: 1.6; /* Improved readability with more line spacing */
    margin-bottom: 40px; /* Same space below paragraph as the heading */
    color: #FFFFFF;
}

/* Button */
.outline-button {
    display: inline-block;
    padding: 12px 20px;
    color: #FFFFFF !important; /* Matches the outline color */
    font-size: 1.6rem;
    font-weight: bold;
    border: 2px solid #0077CC; /* Blue button outline */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded button corners */
    background-color: transparent; /* No background */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Button Hover Effect */
.outline-button:hover {
    background-color: #0077CC; /* Add background on hover */
    color: white; /* Change text to white on hover */
}

/* Image Section */
.widget-image {
    width: 40%; /* Image takes less space than text */
    text-align: right; /* Align image to the right */
}

.widget-image img {
    width: auto; /* Image occupies full width of its container */
    height: auto; /* Maintain aspect ratio */
    max-height: 350px;
    border-radius: 8px; /* Optional: Add rounded corners to the image */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center-align all elements */
        text-align: center; /* Center the text */
    }

    .widget-text {
        width: 100%; /* Text takes full width */
        margin-bottom: 20px; /* Add spacing between text and image */
    }

    .widget-image {
        width: 100%; /* Restrict image width on smaller screens */
        text-align: center; /* Center the image */
    }
    .image-text-widget-white{
        display: block;
        margin: 0px auto;
    }
    .widget-image-AGA{
        width: 100%;
    }
    .widget-text-AGA{
        text-align: center;
        width: 100%;
    }

    .nav-item img{
        width: 30px;
        height: 30px;
    }
    .icon-label{
        font-size: 1.3rem;
    }
}

/* Container for the Widget */
.image-text-widget-white {
    background-color: #FFFFFF; /* White background */
    display: flex; /* Flexbox for horizontal layout */
    align-items: center; /* Vertically align image and text */
    max-width: 1200px;
    width: 100%; /* Align with other widgets */
    margin: 20px auto; /* Center horizontally, with 20px margin on top & bottom */
    gap: 20px; /* Space between image and text */
    padding: 20px; /* Add inner padding for spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect size calculations */
    border-radius: 8px; /* Optional: Smooth rounded corners for cleaner design */
}

/* Image Section */
.widget-image-AGA {
    width: 50%; /* Image takes up half the width */
    border-radius: 8px; /* Optional: Rounded corners for the image */
}

.widget-image-AGA img {
    width: 100%; /* Image fills its container width */
    height: auto; /* Maintain the aspect ratio */
}

/* Text Section */
.widget-text-AGA {
    width: 50%; /* Text takes up half the width */
    color: #003256; /* Deep blue text */
    font-family: 'LindeDaxGlobal'; /* Ensure font styling */
    text-align: left; /* Align text to the left */
}

.widget-text-AGA h2 {
    display: flex;
    align-items: center;
    font-size: 2.8rem; /* Larger heading */
    margin-bottom: 30px; /* Space below the heading */
}

/* Vertical Line for the Heading */
.heading-line-AGA {
    display: inline-block;
    width: 6px; /* Thin vertical line */
    height: 40px; /* Tall line */
    background-color: #0077CC; /* Blue vertical line */
    margin-right: 10px; /* Space between the line and the heading */
    /* No border-radius for a sharp edge */
}

/* Paragraph */
.widget-text-AGA p {
    font-size: 1.6rem; /* Regular paragraph font size */
    line-height: 1.6; /* Improved line spacing for readability */
    margin-bottom: 30px; /* Space below the paragraph */
}

/* Button */
.text-button {
    display: inline-block;
    padding: 12px 60px;
    font-size: 1.6rem;
    color: #FFFFFF; /* White text */
    background-color: #0077CC; /* Blue button background */
    border: none; /* No border */
    border-radius: 5px; /* Rounded button corners */
    text-decoration: none; /* Remove underline */
    font-family: 'LindeDaxGlobal'; /* Ensure text matches font style */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Button Hover Effect */
.text-button:hover, .button-element-small:hover, .button-element:hover {
    background-color: #005FA3; /* Darker blue on hover */
    color: white;
}

    /* The Main Widget (Container) */
    .image-grid-widget {
        display: flex;
        /* Use Flexbox for a row layout */
        flex-wrap: wrap;
        /* Allow items to wrap on smaller screens */
        gap: 20px;
        /* Space between image cards */
        max-width: 1200px;
        /* Restrict maximum width */
        margin: 0 auto;
        /* Center the widget */
        padding: 20px;
        /* Add padding */
        box-sizing: border-box;
        /* Include padding in measurements */
        font-family: 'lindeDaxGlobal';
    }

    /* Individual Image Cards */
    .image-card {
        flex: 1 1 calc(25% - 20px);
        /* Flex items take 25% width */
        max-width: calc(25% - 20px);
        /* Ensure proper width even with margins */
        box-sizing: border-box;
        /* Include padding in width */
        text-align: center;
        /* Center text alignment */
        padding: 10px;
        /* Add some spacing inside */
        border-radius: 8px;
        /* Optional rounded corners for a polished look */
        text-align: left;
        position: relative;
        height: 580px;
    }

    /* Images in Cards */
    .image-card img {
        width: 100%;
        /* Make image fill its container */
        height: 260px;
        /* Maintain aspect ratio */
        border-radius: 8px;
        /* Rounded corners for the image */
        object-fit: cover;
    }

    /* Headlines */
    .image-card h3 {
        font-size: 1.8rem;
        /* Headline font size */
        color: #003256;
        /* Dark blue text color */
        margin: 15px 0;
        font-weight: bold;
        /* Space above and below the headline */
    }

    /* Paragraphs */
    .image-card p {
        font-size: 1.6rem;
        /* Paragraph font size */
        line-height: 1.6;
        /* Improve readability */
        margin: 10px 0;
        /* Space above and below the paragraph */
        color: #555555;
        /* Optional: Light gray text for description */
        min-height: 130px;
        color: #003256;
    }



/* Responsive Design */
@media (max-width: 768px) {
    .main-headline {
        font-size: 2em; /* Reduce headline size for smaller screens */
    }

    .sub-headline {
        font-size: 0.9em; /* Reduce subheadline size for smaller screens */
    }
    .nav-item-decoration{
        display: none;
    }
}


/* Media query for smaller screens */
@media (max-width: 768px) {
    .banner-content {
        width: 85%; /* Expand width slightly for smaller screens */
    }

    .main-headline {
        font-size: 1.8em; /* Adjust font size for tablets */
    }

    .sub-headline {
        font-size: 0.9em;
    }
    #text-background{
        width: 100%;
        margin: 100px 5px;
    }
}

@media (max-width: 480px) {
    .main-headline {
        font-size: 1.5em; /* Further adjust font size for mobile devices */
    }

    .sub-headline {
        font-size: 0.8em;
    }

    .banner-content {
        width: 90%; /* Expand width further for very small screens */
    }

    .image-text-widget-white{
        display: block;
        margin: 0px auto;
    }
    .widget-image-AGA{
        width: 100%;
    }
    .widget-text-AGA{
        text-align: center;
        width: 100%;
    }

    .nav-item img{
        width: 30px;
        height: 30px;
    }
    .icon-label{
        font-size: 1rem;
        text-align: center;
    }
   .image-grid-widget {
        display: block;
        /* Use Flexbox for a row layout */
        margin: 0 auto;
        /* Center the widget */
        padding: 20px;
        /* Add padding */
        box-sizing: border-box;
        /* Include padding in measurements */
        font-family: 'lindeDaxGlobal';
    }
   .image-card{
       width: 100%;
       height: auto;

   }

}

    /* CTA Button */
    .cta-button {
        display: inline-block;
        /* Button fits content naturally */
        background-color: #0077CC;
        /* Blue button background */
        color: #FFFFFF;
        /* White text color */
        padding: 10px 20px;
        /* Padding inside the button */
        font-size: 1.6rem;
        /* Adjust font size */
        text-decoration: none;
        /* Remove underline from button link */
        border-radius: 5px;
        /* Rounded corners */
        cursor: pointer;
        /* Mouse pointer on hover */
        transition: background-color 0.2s ease;
        width: 100%;
        text-align: center;
        /* Smooth hover effect */
    }

    #card-buttons {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Button Hover Effect */
    .cta-button:hover {
        background-color: #005FA3;
        /* Slightly darker tint on hover */
        color: white;
    }

     
   @media (max-width: 480px) {
     
         .image-card img{
         height: 160px;
         object-fit: contain;
     }
     #card-buttons{
         width: 100%;
     }
 }



.navigation-links{
    text-decoration: none;
}
#line-separator{
    border: none;
    height: 1px;
    background: #e0e0e0;
    margin: 40px 0;
}