/*
Simple Responsive Template v 1.2


BASE (MOBILE) SIZE
    These are the mobile styles. It's what people see on their phones.
    Remember, keep it light: Speed is Important.
*/

/* typography */
body{
    background:#fff;
    color:#666;
    font-family: "Open Sans", sans-serif;
    font-size:1em;
    line-height:1.4em;
    font-weight:300;
}

h1, h2, h3, h4, h5, h6{
    font-weight:300;
    font-family: "Roboto", sans-serif;
    line-height:1.5em;
    margin:.45em 0;
    padding:0;
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
}

/* links */
a,
a:visited,
a:active,
a:hover{color:#79D3F6;}
a:hover{ text-decoration:none;}

a.footer{color:#ffffff; text-decoration:none;}
a.footer:visited{color:#ffffff; text-decoration:none;}
a.footer:active{color:#ffffff; text-decoration:none;}
a.footer:hover{color:#79D3F6; text-decoration:none;}

.non-clickable-number {
  pointer-events: none;
  color: #ffffff; /* Set the desired color here */
  background-color: transparent; /* Ensure no background color is applied */
}
/* Corrected Sass/Less syntax to standard CSS */
.non-clickable-number:hover {
    color: #ffffff;
    background-color: transparent;
    cursor: default; /* Set the cursor to a default style */
}
.non-clickable-number:active {
    color: #ffffff;
    background-color: transparent;
}

/* Ensure the sticky logo is hidden by default */
.sticky-logo {
    display: none;
}

/* Styling for the active (current) page item (Current Page Title) */
.breadcrumb-item.active {
    color: #333; /* Dark grey, matching your general text, not bold */
    font-weight: normal; /* Ensure not bold */
}

/* Styling for the active (current) page item */
.breadcrumb-item.active {
  color: #6c757d; /* Darker grey for the current page */
  font-weight: bold; /* Make it bold */
}

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{  box-sizing:border-box;
    -moz-box-sizing:border-box;}

/* structure */
.wrapper{
    width: 92%;
    margin: 0 auto;
}
header{
    padding: 15px 0;
}
#banner{
    text-align:left;
}

#hero,
#page-header{
    background:#f7f7f7;
    color:#000000;
    padding:20px 0;
    font-size:1.1em;
}

/* Breadcrumb container */
.breadcrumb {
    padding: 0 15px 0 0; /* Top 0, Right 15px, Bottom 0, Left 0 - as per your request */
    margin-bottom: 10px; /* Space below the breadcrumb */
    list-style: none;    /* Remove default list bullets */
    background-color: transparent; /* No background for the breadcrumb list */
    border-radius: 0;    /* No rounded corners */
    display: flex;       /* Use flexbox for horizontal alignment */
    flex-wrap: wrap;     /* Allow items to wrap on smaller screens */
    align-items: center; /* Vertically align items */
}

/* Styling for individual breadcrumb items */
.breadcrumb-item {
    display: inline-block; /* Keep items in a line */
    font-size: 0.7em;   /* Smaller font size */
    font-weight: normal; /* Ensure not bold */
    color: #666; /* All text should be black by default */
}

/* Add a separator between items using the ::before pseudo-element */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">"; /* Your preferred separator */
    padding: 0 5px; /* Adjust space around separator */
    color: #666; /* Lighter grey for separator, visible against #f7f7f7 */
}

/* Styling for breadcrumb links (Home, Category Name) */
.breadcrumb-item a {
    color: #666; /* Links are black by default */
    text-decoration: none; /* No underline by default */
    transition: color 0.2s ease-in-out; /* Smooth colour transition on hover */
}

/* No visited emphasis needed */
.breadcrumb-item a:visited {
    color: #666; /* Ensure visited links are also black */
    text-decoration: none;
}

/* On mouse over for a clickable link just have the blue mouse over effect (79D3F6) no underlines */
.breadcrumb-item a:hover {
    color: #79D3F6; /* Your site's blue on hover */
    text-decoration: none; /* Explicitly remove underline on hover */
}

/* Styling for the active (current) page item (Current Page Title) */
.breadcrumb-item.active {
    color: #666; /* Black, matching your general text, not bold */
    font-weight: normal; /* Ensure not bold */
}
/* breadcrumb container end */


.flexslider{
    display:none;
}

#img1 {display: block;}

#content,
aside,
.vertical-padding{
    padding:40px 0;
}
asidel, /* Typo: Consider if this should be 'aside,' */
.vertical-padding{
    padding:40px 0;
}
p{ margin:0 0 1.5em;}


/* --- Fade on Scroll Effect --- */
.fade-in-on-scroll {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition over 0.8 seconds */
    will-change: opacity, transform; /* Optimisation hint for browsers */
}

.fade-in-on-scroll.is-visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to its final position */
}

/* RESPONSIVE IMAGES  */
img{ max-width:100%; height:auto;}

/* --- Featured Products Carousel Styles --- */

/* Styles for hiding the entire carousel section via JavaScript */
.featured-products-section.carousel-hidden {
    display: none !important; /* Ensure it's completely hidden */
    visibility: hidden !important; /* For good measure, though display:none handles it */
}

/* Hide THIS specific carousel section by default (for small screens) */
.featured-products-section {
    display: none;
}

/* Show the mobile-only alternative by default (for small screens) */
.mobile-featured-alternative {
    display: block; /* Or flex/grid if you want to use that for its internal layout */
}

/* Optional: Basic styling for your mobile alternative content */
.mobile-alt-title {
    text-align: center;
    color: #333;
    font-size: 1.8em; /* Slightly smaller than carousel-title, but still prominent */
    margin-bottom: 10px;
}

.mobile-alt-text {
    text-align: center;
    color: #666;
    font-size: 1em;
    padding: 0 15px; /* Add some padding to keep text off edges */
}

/* If you add an image: */
.mobile-alt-image {
    display: block;
    max-width: 80%; /* Don't want it too wide */
    height: auto;
    margin: 20px auto; /* Centre the image and give it vertical space */
}

/* Carousel Title */
.carousel-title {
    text-align: center;
    color: #333; /* Darker colour for the heading */
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 2.2em; /* Adjust as needed for heading size */
    font-weight: 300; /* Matching your h1-h6 font-weight */
}

.carousel-intro-text {
    color: #333; /* Same dark grey as the H2 title */
    text-align: center; /* Centre the text */
    margin-top: -20px; /* Adjust as needed to bring it closer to the title, or remove for default spacing */
    margin-bottom: 30px; /* Space below the paragraph */
    font-size: 1.1em; /* Slightly smaller than title, but readable */
    line-height: 1.5em; /* Ensure good readability */
}

/* Overall Carousel Container */
.carousel-container {
    position: relative;
    overflow: hidden; /* Crucial: Hides parts of the track outside the visible area */
    padding: 0 40px; /* Space for the arrows */
    margin-bottom: 40px; /* Space below the carousel */
}

/* Track Container (the visible window for the carousel items) */
.carousel-track-container {
    overflow: hidden; /* Ensures only visible cards show */
}

/* Carousel Track (contains all product cards, will slide horizontally) */
.carousel-track {
    display: flex; /* Use flexbox to lay out product cards horizontally */
    transition: transform 0.5s ease-in-out; /* Smooth sliding animation for the track */
    /* Adjust this in JS for number of items to show at once */
    /* Will be manipulated by JavaScript */
}

/* Individual Product Card */
.product-card {
    flex: 0 0 100%; /* Default: One card per view on mobile */
    max-width: 100%;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 15px; /* Spacing around each card */
    text-decoration: none; /* Remove underline from link */
    color: #333; /* Default text color for card content */
    display: flex; /* Flex container for content within the card */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally within the card */
    text-align: center; /* Center text within the card */
    background-color: #fff; /* White background for the card */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Slightly rounded corners */
    margin: 0 10px 20px 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* More pronounced shadow on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

/* --- AMENDMENT START --- */
/* Consolidated Styles for Images within Product Cards and their Hover Effects */

/* Image Wrapper for Overlay Effect / Main Image Wrapper Styles */
.product-image-wrapper {
    position: relative;
    width: 100%; /* Takes full width of its container */
    padding-bottom: 100%; /* CRITICAL: This is 100% for your 400x400px square images */
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px; /* Slight roundness for image */
}

/* Generic styling for all images inside the product image wrapper */
/* This rule also applies the transition for the zoom effect */
.product-image-wrapper img {
    position: absolute; /* Allows stacking of main and hover images */
    top: 0;
    left: 0;
    width: 100%;    /* Images fill the wrapper */
    height: 100%;   /* Images fill the wrapper */
    object-fit: contain; /* Ensures the image fits within the wrapper without cropping, maintaining aspect ratio */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease; /* Smooth transitions for fade and zoom */
}

/* Initially hide the hover image */
.product-image-wrapper .product-hover-image {
    opacity: 0;
}

/* Product Image Overlay */
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(121, 211, 246, 0.3); /* Your theme blue with transparency */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth fade in/out */
}

/* Hover Effects on the Product Card */
.product-card:hover .product-main-image {
    opacity: 0; /* Fade out the main image on hover */
    transform: scale(1.05); /* Apply zoom effect to main image as it fades out */
}

.product-card:hover .product-hover-image {
    opacity: 1; /* Fade in the hover image on hover */
    transform: scale(1.05); /* Apply zoom effect to hover image as it fades in */
}

.product-card:hover .product-overlay {
    opacity: 1; /* Show overlay on hover */
}
/* --- AMENDMENT END --- */


/* Product Title */
.product-title {
    font-size: 1.3em;
    color: #000; /* Black for titles */
    margin: 0 0 5px 0; /* Remove default margins, add small bottom margin */
    line-height: 1.2em;
}

/* Product Description */
.product-description {
    font-size: 0.9em;
    color: #666; /* Lighter grey for description */
    margin-bottom: 15px;
    min-height: 3.2em; /* Ensure consistent height for descriptions */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

/* Learn More Button/Link */
.learn-more-button {
    display: inline-flex; /* Use inline-flex for text and icon alignment */
    align-items: center;
    color: #79D3F6; /* Your theme blue */
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.learn-more-button .fa {
    margin-left: 5px; /* Space between text and arrow icon */
    transition: transform 0.3s ease;
}

.product-card:hover .learn-more-button {
    color: #000; /* Darker color on hover */
}

.product-card:hover .learn-more-button .fa {
    transform: translateX(3px); /* Slight movement for arrow on hover */
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #fff;
    border: none;
    padding: 15px 10px; /* Adjust padding for button size */
    cursor: pointer;
    z-index: 10;
    font-size: 2em; /* Larger arrow icon */
    line-height: 1; /* Keep icon vertically centered */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8); /* Darker on hover */
}

.carousel-arrow-prev {
    left: 0;
}

.carousel-arrow-next {
    right: 0;
}

/* Hide arrows by default on very small screens if desired */
@media (max-width: 480px) {
    .carousel-arrow {
        display: none;
    }
    .carousel-container {
        padding: 0; /* Remove padding if arrows are hidden */
    }
}

.footerelement{
    background:#808080;
    color:#ffffff;
    padding:20px 0;
    background-image: none;
    background-attachment: scroll;
}

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin-bottom:40px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.grid_6x {
    margin-bottom:0px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.grid_4x {
    margin-bottom:40px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
}

.grid_133x {
    margin-bottom:5px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}

.grid_55 {
    margin-bottom:0px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.grid_3xx {
    margin-bottom:0px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.grid_9xx {
    margin-bottom:0px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}


/*FOOTER*/
footer{
    background:#000000;
    color:#ffffff;
    font-size:80%;
    padding:20px 0;
}
footer ul{
    margin:0 0 0 8%;
    padding:0;
}

/* --- Footer Company Websites List Styling --- */

/* Make the title interactive */
#company-websites-title {
    cursor: pointer; /* Indicates it's clickable/interactive */
}

/* Container for the list - initial hidden state and transition */
#company-websites-list {
    opacity: 0; /* Start completely transparent */
    visibility: hidden; /* Ensure it doesn't take up space and is not interactive when hidden */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Match menu transition speed (0.5s) */
    padding-top: 5px; /* Add a little space below the title */
    box-sizing: border-box; /* Include padding in calculations */
    position: relative; /* Good practice for consistent stacking context. */
}

/* Class added by JavaScript to show the list */
#company-websites-list.is-visible {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make it interactive */
}

/* Styling for individual links within the hidden list */
#company-websites-list .footer { /* Targeting links with class 'footer' inside our new div */
    display: block; /* Make each link a block to get its own line */
    padding: 1px 0; /* <<< ADJUSTED: Reduced vertical padding to make lines closer */
    text-decoration: none; /* Ensure no default underline */
    color: #ffffff; /* Keep text white */
    transition: color 0.2s ease; /* Smooth transition for text colour on hover */
}

#company-websites-list .footer:hover {
    color: #79D3F6; /* Change to blue on hover */
    text-decoration: none; /* <<< ADJUSTED: Removed underline on hover */
}


/*Some more colored elements*/

.buttonlink h3 {
    margin: 0; /* Removes default top/bottom margins from the heading */
    padding: 0; /* Removes any default padding from the heading */
    font-size: 18px; /* <<< ADJUST THIS: Set the font size to control button height */
    line-height: 1.2; /* <<< ADJUST THIS: Tighter line-height to minimise extra space */
    color: inherit; /* Ensures it inherits text color (white) from the parent <a>.buttonlink */
    font-weight: normal; /* Use 'normal' if you want regular weight, 'bold' or a number (e.g., 700) if you want it bold */
    text-align: center; /* Ensures the text is horizontally centred within the block button */
}

a.buttonlink{
    background:#79D3F6;
    border-radius:7px;
    color:#ffffff;
    display:block;
    margin:10px 15px 10px 0;
    padding:10px;
    text-decoration:none;
    transition: all 0.3s ease;
}
a.buttonlink:visited{
    background:#79D3F6;
    color:#ffffff;
}
a.buttonlink:active{
    background:#79D3F6;
    color:#ffffff;
}
a.buttonlink:hover{
    background:#000000;
    color: #ffffff;
}

a.buttonlink1{
    background:#79D3F6;
    border-radius:7px;
    color:#ffffff;
    display:block;
    margin:10px 15px 10px 0;
    padding:10px;
    text-decoration:none;
    transition: all 0.3s ease;
}
a.buttonlink1:visited{
    background:#79D3F6;
    color:#ffffff;
}
a.buttonlink1:active{
    background:#79D3F6;
    color:#ffffff;
}
a.buttonlink1:hover{
    background:#000000;
    color:#ffffff;
}

a.buttonlink3 {
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    padding: 10px 20px;
    margin: 10px 0;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 7px;
}

a.buttonlink3:visited,
a.buttonlink3:active {
    color: #ffffff;
    background: transparent;
    border-color: #ffffff;
}

a.buttonlink3:hover {
    background: #8fd4fb;
    color: #ffffff;
    border-color: #8fd4fb;
}

a.buttonlink3 h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.2;
    color: inherit;
    font-weight: normal;
    text-align: center;
}

.blackelement{
    background:#000000;
    color:#ffffff;
}

.greyelement{
    background:#f0f0f0;
    color:#ffffff;
}

.blueelement{
    background:#8fd4fb;
    color:#ffffff;
}

/* --- Blue Panel Section Styling (New Additions) --- */

/* Base Styles (for all screen sizes) */

/* The .blueelement and .vertical-padding classes are already defined in your main.css:
.blueelement { background: #8fd4fb; color: #ffffff; }
.vertical-padding { padding: 40px 0; }
So, we don't need to redefine them here. */

/* Icon Styling for the Blue Panel */
.blueelement .grid_2 {
    text-align: center; /* Centres the icon within its grid_2 column */
    margin-bottom: 15px; /* Adjust for spacing when columns stack on mobile */
}
.blueelement .grid_2 i.fa-envelope-o { /* Targeting the specific envelope icon within this panel */
    font-size: 80px; /* Large size for the icon */
    color: #ffffff; /* White colour for the icon */
    line-height: 1; /* Helps remove extra space above/below icon */
    padding-top: 5px; /* Fine-tune this for initial vertical alignment on mobile */
    padding-bottom: 5px;
}

/* Text Content Styling for the Blue Panel */
.blueelement .grid_7 {
    margin-bottom: 15px; /* Adjust for spacing when columns stack on mobile */
}
.blueelement .grid_7 h3 {
    color: #ffffff; /* White text for the heading */
    font-size: 24px; /* Matches screenshot look */
    margin-top: 0; /* Remove default top margin from h3 */
    margin-bottom: 10px; /* Add some space below the heading */
    line-height: 1.2; /* Adjust line height for better readability */
}
.blueelement .grid_7 p {
    color: #ffffff; /* White text for the paragraph */
    font-size: 16px; /* Standard font size */
    margin-top: 0; /* Remove default top margin from p */
    margin-bottom: 0; /* Remove default bottom margin from p (important for spacing before button) */
    line-height: 1.4; /* Adjust line height for better readability */
}

/* Button Container Styling for the Blue Panel */
.blueelement .grid_3 {
    margin-bottom: 0; /* Remove default grid margin for button column on mobile */
}
.blueelement .grid_3 p {
    text-align: center; /* Centres the button within its paragraph/grid_3 column */
    margin-bottom: 0; /* Ensure no default paragraph bottom margin pushes things */
    padding-top: 25px; /* <<< ADJUST THIS FOR MOBILE: Fine-tune this value for vertical alignment on smaller screens */
}

/* Specific Styling for the 'ENQUIRE NOW' Button in the Blue Panel */
a.buttonlink-blue-panel {
    /* These properties apply ONLY to the button with this new class */
    border: 2px solid #ffffff; /* White border as per screenshot */
    background: transparent; /* Transparent background */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Adjust padding for the button's size */
    margin: 0; /* Ensure no default margins from interfere with centering */
    text-decoration: none; /* Ensure no underline on the button */
    display: inline-block; /* Essential for text-align: center to work on parent */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    border-radius: 7px; /* Matches your general button border-radius */
}

a.buttonlink-blue-panel:visited,
a.buttonlink-blue-panel:active {
    color: #ffffff;
    background: transparent;
    border-color: #ffffff;
}

a.buttonlink-blue-panel:hover {
    background: #ffffff; /* White background fill on hover */
    color: #8fd4fb; /* Text color changes to the panel's blue on hover (from your main.css) */
    border-color: #ffffff; /* Keep border white on hover */
}


/* --- Default Logo Display --- */
/* Ensure the main logo is visible by default */
.main-logo {
    display: block;
}

/* Basic styling for the logo container */
.logo-container {
    line-height: 0; /* Helps with vertical spacing around images */
}

/* Ensures mega menu content is positioned relative to its parent li */
.menu-item-has-children {
    position: relative;
}

/* Placeholder for content jump */
#sticky-header-placeholder {
    /* Initially hidden by JS, shown when sticky */
    background-color: transparent; /* No background */
    width: 100%;
}

/* --- Language Selector Styling for Large Screens (These were within the removed duplicate 1000px media query) --- */
/* Ensure the language selector in the sticky header is well-aligned */
#site-header-wrap.sticky-header .language-selector {
    padding: 0; /* Remove any padding that might push it down */
    margin: 0;  /* Remove any margin */
    align-self: center; /* Vertically align within its flex container if applicable */
}

/* Ensure the language selector container itself is compact */
.language-selector {
    /* If you want it to align left inside its grid column and reduce any inherited padding */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure the language selector container itself is compact and aligns correctly */
.language-selector {
    position: relative; /* Crucial for absolute positioning of dropdown */
    display: inline-block; /* Helps with width containment */
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle; /* Align with other content in the header */
}

/* --- Language Dropdown List Styling for Large Screens (Reiterating for clarity within media query) --- */
.lang-dropdown-list {
    position: absolute !important; /* Must be absolute for dropdown behavior */
    top: 100% !important; /* Position right below the button */
    left: 0 !important;   /* Align to the left edge of the button */
    right: auto !important; /* Prevent it from stretching indefinitely */

    background-color: #fff !important; /* Explicitly set white background to ensure visibility */
    border: 1px solid #ddd !important; /* Add a clear border */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
    list-style: none !important;
    padding: 0 !important; /* Remove any internal padding from the list container */
    margin: 0 !important; /* Remove any external margin from the list container */
    z-index: 1000 !important; /* Ensure it's above other content */

    width: max-content !important; /* Shrink to fit widest content without wrapping */
    min-width: 180px !important;   /* Keep your desired minimum width */
    box-sizing: border-box !important; /* Standard box model */

    max-height: 300px !important; /* Limit height to prevent excessive length */
    overflow-y: auto !important;    /* Enable vertical scrolling if content exceeds max-height */
    -webkit-overflow-scrolling: touch !important; /* For smoother scrolling on touch devices */

    /* Reiterate fade properties for desktop media query, if you have specific overrides */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Ensure consistency */
}

/* State when the dropdown is OPEN (for desktop) */
.lang-selector-button[aria-expanded="true"] + #lang-dropdown-menu {
    opacity: 1; /* Desktop open state */
    visibility: visible;
}

/* Ensure individual list items are compact and take full width of their parent */
.lang-dropdown-list li {
    width: 100% !important; /* Ensure list items fill the dropdown's constrained width */
    margin: 0 !important; /* Remove any default list item margins */
    padding: 0 !important; /* Remove any default list item padding */
}

/* Style the actual links inside the dropdown for proper layout and appearance */
.lang-dropdown-list a {
    display: flex !important; /* Use flexbox for flag and text alignment */
    align-items: center !important; /* Vertically center flag and text */
    gap: 8px !important; /* Space between flag and text */
    padding: 10px 15px !important; /* Consistent padding for individual items */
    text-decoration: none !important;
    color: #333 !important; /* Ensure text color is visible against white background */
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important; /* Hide overflow if text is too long */
    text-overflow: ellipsis !important; /* Add ellipsis for truncated text */
    box-sizing: border-box !important; /* Ensure padding is included in item width */

}
.lang-dropdown-list a:hover, /* Corrected for standard CSS */
.lang-dropdown-list a:focus { /* Corrected for standard CSS */
    background-color: #f5f5f5 !important;
    color: #007bff !important;
}


/* Ensure flag icons within the dropdown links are correctly sized */
.lang-dropdown-list a .flag-icon {
    flex-shrink: 0 !important; /* Prevent flag from shrinking */
    width: 24px !important; /* Explicit flag width */
    height: 18px !important; /* Explicit flag height */
}

/* Remove any default paragraph margin if P tags are used inside list items (unlikely but safe) */
.lang-dropdown-list p {
    margin: 0 !important;
    padding: 0 !important;
}


/*telephone*/
.telephone {
    background:#000000;
    color:#ffffff;
    font-size:80%;
    padding: 5px 0;
}

/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}

/* Language Selector Container */
.language-selector {
    position: relative; /* Important for dropdown positioning */
    display: inline-block;
    font-size: 0.9em; /* Adjust as needed */
}

/* Button that triggers the dropdown */
.lang-selector-button {
    background: none;
    border: 1px solid #ccc; /* Or match your theme */
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between flag, text, and arrow */
    border-radius: 4px;
    font-size: inherit; /* Inherit font size from parent */
    color: inherit; /* Inherit color from parent */
    text-decoration: none; /* Remove underline if it's an <a> */
}

.lang-selector-button:hover {
    background-color: #79D3F6; /* Light hover effect */
}

/* Flag Icon Styling */
.flag-icon {
    width: 24px; /* Adjust flag size as needed */
    height: 18px; /* Adjust flag size proportionally */
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    flex-shrink: 0; /* Prevent flag from shrinking */
}

/* Text for current language */
.current-lang-text {
    white-space: nowrap; /* Keep text on one line */
}

/* Simple down arrow using CSS */
.arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333; /* Color of the arrow */
    margin-left: 5px;
    transition: transform 0.2s ease-in-out;
}

/* Rotate arrow when dropdown is open */
.lang-selector-button[aria-expanded="true"] .arrow-down {
    transform: rotate(180deg);
}

/* --- Dropdown List Styles (MODIFIED FOR FADE) --- */
.lang-dropdown-list {
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000; /* Ensure it appears above other content */
    min-width: 180px; /* Ensure enough width for text and flag */
    border-radius: 4px;

    /* **** KEY FADE PROPERTIES **** */
    opacity: 0; /* Start invisible */
    visibility: hidden; /* Hide from screen readers/interactions when closed */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Match main menu speed */
}

/* State when the dropdown is OPEN (using aria-expanded from JS) */
.lang-selector-button[aria-expanded="true"] + #lang-dropdown-menu {
    opacity: 1; /* Fade in to fully visible */
    visibility: visible; /* Make interactive */
}

/* NOTE: The `.lang-dropdown-list[hidden] { display: none; }` rule has been REMOVED here.
   It conflicted with the fade effect and should be managed by `opacity` and `visibility` via JS/CSS. */


.lang-dropdown-list li {
    margin: 0;
    padding: 0;
}

.lang-dropdown-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
}

.lang-dropdown-list a:hover,
.lang-dropdown-list a:focus {
    background-color: #f5f5f5;
    color: #007bff; /* Highlight color */
}

/****************************************
*****************************************
MEDIAQUERIES
*****************************************
****************************************/



/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
#banner{
    float:left;
    text-align:left;
    margin-bottom:-20px;/*this depends on the height of the logo*/
}

/* links */
a,
a:visited,
a:active,
a:hover{color:#79D3F6;}
a:hover{ text-decoration:none;}

a.footer{color:#ffffff; text-decoration:none;}
a.footer:visited{color:#ffffff; text-decoration:none;}
a.footer:active{color:#ffffff; text-decoration:none;}
a.footer:hover{color:#79D3F6; text-decoration:none;}

} /* END @media only screen and (min-width: 481px) */


/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)

*/
@media only screen and (min-width: 1000px) { /* BREAKPOINT CHANGED FROM 920PX TO 1000PX */

/* --- Header Row and Menu Alignment --- */

/* Make the header's main row a flex container */
header .row {
    display: flex;           /* Enables Flexbox */
    align-items: flex-end;   /* Aligns items vertically to the bottom of the row */
    justify-content: space-between; /* Pushes the logo (grid_3) to the left and menu (grid_9) to the right */
    width: 100%;             /* Ensure the row spans its full width */
    margin-bottom: 0 !important; /* Ensure no bottom margin pushes content down */
    padding-bottom: 0 !important;
}

/* Important: Remove floats from grid items within this flex row */
header .grid_3 {
    float: none;
    flex: 0 0 25%;   /* Don't grow, don't shrink, base is 25% */
    max-width: 25%;  /* Ensure it doesn't exceed 25% */
}
header .grid_9 {
    float: none;
    flex: 0 0 75%;   /* Don't grow, don't shrink, base is 75% */
    max-width: 75%;  /* Ensure it doesn't exceed 75% */
    display: flex;   /* Keep this as it ensures the menu aligns right within this column */
    justify-content: flex-end; /* Keep this */
    align-items: flex-end;   /* Keep this */
}

/* Adjust the top navigation (the actual menu) */
#topnav {
    margin-bottom: 0 !important; /* Remove any default bottom margin from the menu */
    float: none; /* Ensure no floats interfere */
}

/* Adjust the original grid system's floats for the header row if they affect layout */
/* You might already have clearfixes or similar, but this is a targeted fix */
header .row::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Sticky Header Styles --- */
/* Apply these styles when the 'sticky-header' class is added by JavaScript */
#site-header-wrap.sticky-header {
    position: fixed; /* Make it stick to the viewport */
    top: 0;          /* Stick to the very top */
    left: 0;         /* Span full width */
    width: 100%;     /* Span full width */
    background-color: #ffffff; /* White background as requested */
    z-index: 999;    /* Ensure it stays on top of other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: subtle shadow for depth */
    padding: 5px 0; /* Adjust vertical padding as requested (allowing space above/below content) */
    transition: all 0.3s ease-in-out; /* Smooth transition for background/padding changes */
}

#site-header-wrap.sticky-header .sticky-logo {
        display: block !important; /* This makes the sticky logo visible */
        height: 40px; /* Adjust this to your desired height for the sticky logo */
        width: auto;
        max-height: 100%;
}

/* Ensure content within the sticky header doesn't get squeezed too tightly */
#site-header-wrap.sticky-header .wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

/* Hide the main logo and show the sticky logo when the header is sticky */
#site-header-wrap.sticky-header .main-logo {
    display: none !important;
}

/* --- Responsive Adjustments for Blue Panel (Desktop: Min-width 1000px) --- */
    /* Make the entire row a Flexbox container for robust vertical alignment */
    .blueelement .row {
        display: flex;
        align-items: center; /* This crucial line vertically centres all direct children (.grid_2, .grid_7, .grid_3) */
        /* Your .row already has margin-left/right: -15px; which is correct for grid gutters */
    }

    /* Important: Disable floats and reset margins/paddings for grid items within this specific flex row */
    .blueelement .grid_2,
    .blueelement .grid_7,
    .blueelement .grid_3 {
        float: none; /* Crucial: Disable floats when using flexbox */
        margin-bottom: 0; /* Remove the default grid bottom margin for desktop view */
        /* The global grid_x padding-left/right: 15px; will still apply here, which is generally what you want */
    }

    /* Reset specific padding adjustments made for mobile within this desktop context */
    .blueelement .grid_2 i.fa-envelope-o {
        padding-top: 0; /* Let flexbox handle vertical alignment */
        padding-bottom: 0;
    }
    .blueelement .grid_3 p {
        padding-top: 0; /* Let flexbox handle vertical alignment */
    }

    .footerelement {
        background-image: url("https://www.postboxesukltd.co.uk/images/footer.jpg");
        background-repeat: no-repeat;
        background-position: center center; /* Centre the image for parallax */
        background-size: cover; /* Make sure it covers the whole area */
        background-attachment: fixed; /* This creates the parallax effect! */
        min-height: 400px; /* Gives the section enough height to see the parallax effect */
        color: #ffffff; /* Ensure text is white over the image */
        /* Remove width/height properties if they were carried over, as background-size handles it */
        width: auto;
        height: auto;
    }

    /* --- Language Selector Styling for Large Screens (These were within the removed duplicate 1000px media query) --- */
    /* Ensure the language selector in the sticky header is well-aligned */
    #site-header-wrap.sticky-header .language-selector {
        padding: 0; /* Remove any padding that might push it down */
        margin: 0;  /* Remove any margin */
        align-self: center; /* Vertically align within its flex container if applicable */
    }

    /* Ensure the language selector container itself is compact */
    .language-selector {
        /* If you want it to align left inside its grid column and reduce any inherited padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure the language selector container itself is compact and aligns correctly */
    .language-selector {
        position: relative; /* Crucial for absolute positioning of dropdown */
        display: inline-block; /* Helps with width containment */
        padding-left: 0 !important;
        padding-right: 0 !important;
        vertical-align: middle; /* Align with other content in the header */
    }

    /* --- Language Dropdown List Styling for Large Screens (Reiterating for clarity within media query) --- */
    .lang-dropdown-list {
        position: absolute !important; /* Must be absolute for dropdown behavior */
        top: 100% !important; /* Position right below the button */
        left: 0 !important;   /* Align to the left edge of the button */
        right: auto !important; /* Prevent it from stretching indefinitely */

        background-color: #fff !important; /* Explicitly set white background to ensure visibility */
        border: 1px solid #ddd !important; /* Add a clear border */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
        list-style: none !important;
        padding: 0 !important; /* Remove any internal padding from the list container */
        margin: 0 !important; /* Remove any external margin from the list container */
        z-index: 1000 !important; /* Ensure it's above other content */

        width: max-content !important; /* Shrink to fit widest content without wrapping */
        min-width: 180px !important;   /* Keep your desired minimum width */
        box-sizing: border-box !important; /* Standard box model */

        max-height: 300px !important; /* Limit height to prevent excessive length */
        overflow-y: auto !important;    /* Enable vertical scrolling if content exceeds max-height */
        -webkit-overflow-scrolling: touch !important; /* For smoother scrolling on touch devices */

        /* Reiterate fade properties for desktop media query, if you have specific overrides */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease; /* Ensure consistency */
    }

    /* State when the dropdown is OPEN (for desktop) */
    .lang-selector-button[aria-expanded="true"] + #lang-dropdown-menu {
        opacity: 1; /* Desktop open state */
        visibility: visible;
    }


    /* Ensure individual list items are compact and take full width of their parent */
    .lang-dropdown-list li {
        width: 100% !important; /* Ensure list items fill the dropdown's constrained width */
        margin: 0 !important; /* Remove any default list item margins */
        padding: 0 !important; /* Remove any default list item padding */
    }

    /* Style the actual links inside the dropdown for proper layout and appearance */
    .lang-dropdown-list a {
        display: flex !important; /* Use flexbox for flag and text alignment */
        align-items: center !important; /* Vertically center flag and text */
        gap: 8px !important; /* Space between flag and text */
        padding: 10px 15px !important; /* Consistent padding for individual items */
        text-decoration: none !important;
        color: #333 !important; /* Ensure text color is visible against white background */
        white-space: nowrap !important; /* Prevent text wrapping */
        overflow: hidden !important; /* Hide overflow if text is too long */
        text-overflow: ellipsis !important; /* Add ellipsis for truncated text */
        box-sizing: border-box !important; /* Ensure padding is included in item width */

    }
    .lang-dropdown-list a:hover, /* Corrected for standard CSS */
    .lang-dropdown-list a:focus { /* Corrected for standard CSS */
        background-color: #f5f5f5 !important;
        color: #007bff !important;
    }


    /* Ensure flag icons within the dropdown links are correctly sized */
    .lang-dropdown-list a .flag-icon {
        flex-shrink: 0 !important; /* Prevent flag from shrinking */
        width: 24px !important; /* Explicit flag width */
        height: 18px !important; /* Explicit flag height */
    }

    /* Remove any default paragraph margin if P tags are used inside list items (unlikely but safe) */
    .lang-dropdown-list p {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- AMENDMENT START --- */
    /* DESKTOP MEDIA QUERY ADJUSTMENTS (min-width: 1000px) */

    /* Make THIS specific carousel section visible on large screens */
    .featured-products-section {
        display: block; /* The <section> element's default display is 'block' */
    }

    /* Hide the mobile-only alternative on large screens */
    .mobile-featured-alternative {
        display: none;
    }

    .product-card {
        flex: 0 0 370px; /* CHANGED FROM calc(33.333% - 20px) */
        max-width: 370px; /* CHANGED FROM calc(33.333% - 20px) */
        margin: 0 10px 40px 10px; /* Keep this as it was */
        box-sizing: border-box; /* Reiterate for safety, although it's global */
    }

    .carousel-container,
    .carousel-track-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .carousel-track {
        display: flex;
        align-items: flex-start;
        transition: transform 0.3s ease-in-out;
    }


    /* You can uncomment and adjust these if you want to show 4 items on very large screens */
    /* @media only screen and (min-width: 1240px) {
        .product-card {
            flex: 0 0 calc(25% - 20px);
            max-width: calc(25% - 25px);
        }
    } */

    /* Ensure carousel track container doesn't have unnecessary margins */
    .carousel-track-container {
        margin: 0;
    }

    /* Re-center carousel title if needed on desktop */
    .carousel-title {
        font-size: 2.5em; /* Larger font size for desktop */
        margin-bottom: 40px; /* More space below title */
    }

    /* Arrows visible on desktop */
    .carousel-arrow {
        display: block; /* Ensure arrows are visible on desktop */
    }


.wrapper{
    max-width: 1200px;
    margin: .75em auto;
}
header{
    padding:0;
}
#banner{
    float:left;
    text-align:left;
    margin-bottom:0px;
    margin-top:5px;
}
#hero{
    padding:0;
}


.telephone #colophon p {  /* Or .telephone .wrapper p if that's your structure*/
  margin-bottom: 0; /* Or a very small value like 5px if you want a tiny gap */
}

/*yellow*/
.yellow {
    background:#FBE55E;
}


/* links */
a,
a:visited,
a:active,
a:hover{color:#79D3F6; text-decoration:none;}

a.footer{color:#ffffff; text-decoration:none;}
a.footer:visited{color:#ffffff; text-decoration:none;}
a.footer:active{color:#ffffff; text-decoration:none;}
a.footer:hover{color:#79D3F6; text-decoration:none;}



#content {
    float:left;
    width:65%;
}
#content.wide-content{
    float:none;
    width:100%;
}

/* Flexslider */

.flexslider{
    display:block;
    margin: 0;
    border-top: 6px solid #000000; /* Added Border */
    border-bottom: 6px solid #000000; /* Added Border */
}

.flex-control-nav {bottom: 5px;}
#img1 {display: none;}

aside {
    float:right;
    width:30%;
}

asidel {
    float:left;
    width:30%;
}

.flexslider {
    position: relative; /* This is crucial for positioning the caption */
}

.flexslider .flex-caption {
    position: absolute;
    bottom: 20px; /* Adjust vertical position from the bottom */
    left: 20px;  /* Adjust horizontal position from the left */
    right: 20px; /* Adjust horizontal position from the right to control width */
    padding: 15px 20px; /* Padding inside the text box */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #fff; /* White text color */
    text-align: left; /* Align text to the left */
    box-sizing: border-box; /* Ensures padding is included in the width */
    max-width: 90%; /* Optional: limit width on very large screens */
    margin: 0 auto; /* Optional: centers the caption if max-width is used */
    z-index: 5; /* Ensures the caption is above the image but below controls */

    /* Animation for the caption to fade in/out with the slide */
    opacity: 0; /* Start invisible */
    transition: opacity 0.6s ease; /* Match animationSpeed for smooth reveal */
    -webkit-transition: opacity 0.6s ease;
}

/* Make the caption visible only on the currently active slide */
.flexslider .slides > li.flex-active-slide .flex-caption {
    opacity: 1; /* Fade in when the slide is active */
}

/* Styling for text elements within the caption */
.flexslider .flex-caption h3 {
    color: #79D3F6; /* Using your theme's blue */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.flexslider .flex-caption p {
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Specific right alignment for captions */
.flexslider .flex-caption.text-right-caption {
    text-align: right; /* Aligns all inline content (text, inline-block buttons) to the right */
    left: auto; /* Remove left positioning */
    right: 20px; /* Keep or adjust right positioning */
    margin-left: auto; /* Pushes the box to the right if it has max-width/width */
    margin-right: 0; /* Ensures no right margin */
}

.flexslider .flex-caption.text-right-caption a.buttonlink {
    margin-left: auto; /* Pushes the block-level button to the right */
    margin-right: 0; /* Ensures no right margin */
}

/* Ensure your existing buttonlink styles apply correctly */
.flexslider .flex-caption a.buttonlink {
    display: inline-block; /* Or block, depending on desired layout */
    margin-top: 10px; /* Space above the button */
    /* Your existing .buttonlink styles will take care of the rest */
}


/*GRID*/
/*
 & Columns : 12

 */
 .row{
     margin-left: -15px;
     margin-right: -15px;
}
.grid_1 { width: 8.33333333%; }
.grid_133x { width: 11.11111111%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_3xx { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_4x { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_55 { width: 45%; }
.grid_6 { width: 50%; }
.grid_6x { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_9xx { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_133x,
.grid_2,
.grid_3,
.grid_3xx,
.grid_4,
.grid_4x,
.grid_5,
.grid_55,
.grid_6,
.grid_6x,
.grid_7,
.grid_8,
.grid_9,
.grid_9xx,
.grid_10,
.grid_11,
.grid_12 {
    float: left;
    display: block;
}

.grid_3header {
    /* Inherited from original .grid_3 global rules (reiterated for robustness) */
    width: 25%;
    float: left; /* Keep this, though 'flex' below will largely override it */
    display: block;

    /* Properties from header .grid_3 override for flexbox */
    float: none; /* Crucial to disable float when using flexbox */
    flex: 0 0 25%;   /* Essential for flexbox sizing */
    max-width: 25%;  /* Essential for flexbox sizing */

    /* Your desired margin/padding, removing the default 40px margin */
    margin-bottom: 0 !important; /* Set to 0 to remove the 40px default grid margin */
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.grid_9header {
    /* Inherited from original .grid_9 global rules (reiterated for robustness) */
    width: 75%;
    float: left; /* Keep this, though 'flex' below will largely override it */
    display: block;

    /* Properties from header .grid_9 override for flexbox and menu alignment */
    float: none; /* Crucial to disable float when using flexbox */
    flex: 0 0 75%;   /* Essential for flexbox sizing */
    max-width: 75%;  /* Essential for flexbox sizing */
    display: flex;   /* Essential for menu alignment */
    justify-content: flex-end; /* Essential for menu alignment */
    align-items: flex-end;   /* Essential for menu alignment */

    /* Your desired margin/padding, removing the default 40px margin */
    margin-bottom: 0 !important; /* Set to 0 to remove the 40px default grid margin */
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.rightfloat{float:right;}
/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
 */

#hero .grid_8 {
    margin:40px 0 -13px;
}

} /* END @media only screen and (min-width: 1000px) */ /* BREAKPOINT CHANGED */


/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {
#hero h1{ font-size:1.4em;}
} /* END @media only screen and (min-width: 1024px) */


/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
#hero h1{ font-size:2em;}
} /* END @media only screen and (min-width: 1240px) */

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} /* END @media only screen and (min-device-pixel-ratio: 1.5) */

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {


} /* END @media (device-height: 568px) */


/*
#Google Maps
*/

.google-map { min-height: 200px; }

.map {
    width: 100%;
    height: 520px;
    margin-bottom: 120px;
}

@media (max-width: 767px) {

    .map { height: 300px; }

} /* END @media (max-width: 767px) for map */

/* --- AMENDMENT START (Product Card Height Fix for Small Screens) --- */

/* Adjustments for screens up to 767px (typical max-width for phone/small tablet portrait) */
@media only screen and (max-width: 767px) {
    .product-image-wrapper {
        /* Override padding-bottom: 100% which causes excessive height on small screens. */
        /* Instead, give it a fixed height or a proportional height that is less than 100% of its width. */
        padding-bottom: 0; /* Remove the aspect ratio padding */
        height: 200px; /* Set a fixed height for images on small screens */
        /* You might need to adjust this '200px' value. Test it to see what looks best. */
        /* For example, if your images are 400px wide, but you want them to appear
           shorter on mobile, 200px (or 250px) might be a good starting point. */
    }

    /* Ensure the image still covers the new wrapper height */
    .product-image-wrapper img {
        object-fit: cover; /* Change to 'cover' to fill the new fixed height, cropping if necessary */
                           /* 'contain' would leave whitespace if image aspect ratio doesn't match new wrapper */
    }

    /* Reduce the min-height of the product description if it also contributes to excessive height */
    .product-description {
        min-height: unset; /* Remove the min-height, let content define height */
        /* Alternatively, you could set a smaller min-height like 2em if you want a minimum of 1-2 lines */
    }
}

/* --- AMENDMENT END (Product Card Height Fix for Small Screens) --- */

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
} /* END @media print */


/*
BUTTONS
*/

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #000000;
    border-radius: 3px;
    margin: 0 5px 20px 0;
    background-color: #000000;
    color: #fff;
    line-height: 18px;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}

a.btn { color: #fff; }

.btn:focus { outline: 0; }

.btn-large {
    padding: 12px 24px;
    font-size: 16px;
}

.btn i,
.btn-large i {
    position: relative;
    top: 2px;
    font-size: 16px;
    line-height: 16px;
}

.btn:hover {
    background-color: #000000;
    color: #ffffff;
}


/*
CONTACT FORM
*/

#contact-form {
    overflow: hidden;
    margin-bottom: 50px;
}

#contact-form fieldset { margin: 0; border: 0;}

label.validation-error { color: #b55454; }

input.validation-error,
textarea.validation-error,
select.validation-error { border: 1px solid #e1a1a1; }

#contact-form #submit {
    width: 100%;
    margin-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
}


label {
    display: block;
    margin-bottom: 5px;
}

label span { color: #ff0000; }

select, button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox] { cursor: pointer; }

/*
 * 1. stop safari from overwriting input styles
 */
/* This section was duplicated. Keeping only one instance. */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    max-width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px 20px;
    border: 1px solid #d6d6d6;
     -webkit-border-radius: 3px;
             border-radius: 3px;
    margin-bottom: 10px;
    background: #fff;
}

input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, textarea:focus {
    border-color: #cdcdcd;
    outline: 0;
}

select { height: 45px; }

select:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

textarea {
    min-height: 100px;
    overflow: auto;
}

.radio,
.checkbox {
    min-height: 18px;
    padding-left: 18px;
}

.radio input[type=radio], .checkbox input[type=checkbox] {
    float: left;
    margin-left: -18px;
}

input:-moz-placeholder,
textarea:-moz-placeholder { /* Corrected typo: -moz-moz-placeholder */
    color: #ccc;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ccc;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
}

.titleblue {
    font-family: Arial, Verdana, Tahoma;
    font-size: 50px;
    color: #000000;
    text-decoration: none;
    line-height: 60px;
}

.titledkblue {
    font-family: Arial, Verdana, Tahoma;
    font-size: 50px;
    color: #1D2333;
    text-decoration: none;
    line-height: 60px;
}


/*
#background images
*/

/* Removed the invalid nested @media query here */
@media (max-width: 767px) {

.wrap {
  height: 350px;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}

.darkborder {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
}

.hr {
    border-top: 1px solid #000000;
}


#bg-video {
    margin-top: 0px;
    padding: 0 0 0 0;
}

.fullwidth-section-video {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.style {
    font-size: 0px;
    line-height: 0px;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

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

/*telephone*/
.telephone {
    background:#000000;
    color:#ffffff;
    font-size:80%;
    padding:5px 0;
}

/* Responsive adjustments for FlexSlider caption for smaller screens */
.flexslider .flex-caption {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 15px;
}
.flexslider .flex-caption h3 {
    font-size: 1.2em; /* Smaller on mobile */
}
.flexslider .flex-caption p {
    font-size: 0.9em; /* Smaller on mobile */
}

/* Responsive adjustments for text-right-caption for smaller screens */
.flexslider .flex-caption.text-right-caption {
    text-align: right;
    left: auto;
    right: 10px; /* Match responsive right positioning */
    margin-left: auto;
    margin-right: 0;
}
.flexslider .flex-caption.text-right-caption a.buttonlink {
    margin-left: auto;
    margin-right: 0;
}

/* --- Minimal Fix for Top Bar Spacing (Final Polish) --- */

/* Ensure the overall bar height is controlled */
.telephone {
    padding: 5px 0 !important; /* Adjust this value (e.g., 4px, 6px, 8px) to get desired slimness */
    height: auto !important; /* Allow height to adapt to content */
    min-height: auto !important; /* Ensure no forced minimum height */
}

/* Target the paragraph inside the right grid column to remove its default bottom margin */
.telephone .grid_9xx p { /* Use grid_9xx here */
    margin: 0 !important; /* Remove all margins (especially the 1.5em bottom margin) */
    padding: 0 !important; /* Remove any padding */
    line-height: normal !important; /* Ensure compact line height for text/icons */
    white-space: nowrap !important; /* Prevent text/icons from wrapping if space is tight */

    /* For vertical alignment of content within the paragraph */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Space between icons/text */
}

/* Fine-tune the language selector button and icons */
.telephone .language-selector-button {
    padding: 4px 10px !important; /* Adjust to make the button very compact */
    line-height: normal !important;
    margin: 0 !important; /* Ensure no extra margin */
}

.telephone .grid_9xx p strong a.footer { /* Use grid_9xx here */
    vertical-align: middle !important; /* Helps align font icons */
    line-height: normal !important;
}
} /* END @media (max-width: 767px) */


/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
} /* END @media print */