.elementor-12445 .elementor-element.elementor-element-58ecd86{--display:flex;}/* Start custom CSS */.parameter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0;
            position: relative;
			padding-left: 25px;
        }
      
	  .parameter-main-title {
		padding-top: 150px; /* Match navbar height */
		margin-top: -100px; /* Compensate for extra padding */
		font-size: 50px;
		text-align: center;
		font-weight: 400;
	  }

		#parameter-title h3 {
			text-align: center; /* Centered text */
			line-height: 1.4; /* Proper spacing between lines */
			letter-spacing: 0.5px; /* Slight spacing between letters (optional) */
			margin: 0; /* Remove default margins */
			padding: 10px 0; /* Add padding if needed */
			text-transform: none; /* Ensure no uppercase transform */
		}
	  
        /* Self-contained styles */
        #mega-menu-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* Initial horizontal state */
#mega-menu-container {
    position: relative;
    width: 100%;
    z-index: 999;
    background: white;
    transition: all 0.3s ease;
	transition: none !important;
}

/* Horizontal menu state */
#mega-menu-container:not(.scrolled) {
    position: relative;
    width: 100%;
    background: transparent;
    transform: none;
    height: auto;
    overflow: visible;
}

#mega-menu-container:not(.scrolled) .mega-menu-headers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

#mega-menu-container:not(.scrolled) .mega-menu-header {
    flex: 1 0 auto;
    min-width: 120px;
    margin: 2px;
}

/* Vertical state when scrolled */
#mega-menu-container.scrolled {
    position: fixed;
    top: 90px; /* Below main header */
    left: 0;
    width: 230px;
    transform: translateX(-100%);
    z-index: 1000;
    background: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    overflow-y: auto;
    border-right: 1px solid #eee;
	max-height: 100vh;
	bottom: 0;
}

#mega-menu-container.scrolled.active {
    transform: translateX(0);
}


/* Header styles */
#mega-menu-container .mega-menu-headers {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 10px 0;
    background: white;
    transition: all 0.3s ease;
	color: black;
}

#mega-menu-container.scrolled .mega-menu-headers {
    flex-direction: column;
    padding: 5px 10px;
    justify-content: flex-start;
}

#mega-menu-container .mega-menu-label {
    display: block;
    text-align: center;
    padding: 8px 0 10px; /* Added extra bottom padding */
    font-size: 18px;
    color: #2e5492;
    background: white;
    transition: all 0.3s ease;
    font-weight: bold;
    position: relative; /* Needed for pseudo-element positioning */
}

#mega-menu-container .mega-menu-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%; /* Adjust this percentage as needed */
    height: 2px;
    background: orange;
}

/* Scrolled state adjustments */
#mega-menu-container.scrolled .mega-menu-label {
    display: none !important;
}

#mega-menu-container.scrolled .mega-menu-label::after {
    left: 0; /* Align with text */
    transform: none;
    width: 100%; /* Fixed width or use percentage */
}

/* MAIN HEADER STYLE WITH GRADIENT HOVER */
#mega-menu-container .mega-menu-header {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    color: black;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
    border: none !important;
    border-radius: 50px; /* Pill shape */
    margin: 0 4px;
}

/* Gradient hover effect */
#mega-menu-container .mega-menu-header::after {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #3865ae, #4CAF50);
    transition: width 0.3s ease;
    z-index: -1;
	border-radius: 50px;
}

#mega-menu-container.scrolled .mega-menu-header {
    border-radius: 50px;
    text-align: left;
    padding: 12px 20px;
    margin: 2px 0; /* Vertical spacing */
	color: black; 
    background: transparent !important;
}

/* Hover states */
#mega-menu-container .mega-menu-header:hover,
#mega-menu-container .mega-menu-header.active {
    color: white !important;
}

#mega-menu-container .mega-menu-header:hover::after,
#mega-menu-container .mega-menu-header.active::after {
    width: 100%;
}


/* Dropdown arrows */
#mega-menu-container .mega-menu-header::before {
    content: "";
    font-size: 10px;
    margin-left: 4px;
    color: inherit;
    transition: all 0.3s ease;
}

#mega-menu-container.scrolled .mega-menu-header::before {
    content: "";
}

#mega-menu-container.scrolled .mega-menu-header.active::before {
    content: "";
    transform: rotate(90deg);
}

/* Dropdown menu */
#mega-menu-container .mega-menu-content {
    position: absolute;
    left: 0;
    width: 100%;
    background: #f9f9f9;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 999;
    display: none;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

#mega-menu-container.scrolled .mega-menu-content {
    position: relative;
    width: 100%;
    box-shadow: none;
    border-top: none;
    padding: 5px 0 5px 15px;
    overflow-y: auto;
    max-height: calc(100vh - 180px); /* Adjusted for better fit */
    height: auto;
    display: none;
    /* Improved scrolling behavior */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#mega-menu-container .mega-menu-content.active {
    display: block;
}

/* Columns and links */
#mega-menu-container .mega-menu-columns {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5px;
}

#mega-menu-container.scrolled .mega-menu-columns {
    flex-direction: column;
    padding: 0;
}

#mega-menu-container .mega-menu-column {
    flex: 1;
    padding: 0 10px;
}

#mega-menu-container.scrolled .mega-menu-column {
    padding: 0;
}

#mega-menu-container .mega-menu-links {
    list-style: none;
    column-count: 4;
    column-gap: 20px;
    margin: 0;
}

#mega-menu-container.scrolled .mega-menu-links {
    column-count: 1;
	display: flex;
    flex-direction: column;
    min-height: 0; /* Allows proper shrinking */
}

#mega-menu-container .mega-menu-links li {
    margin-bottom: 8px;
    break-inside: avoid;
}

#mega-menu-container.scrolled .mega-menu-links li {
    flex-shrink: 0; /* Prevents items from shrinking */
}

#mega-menu-container .mega-menu-links a {
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
    display: block;
    text-align: left;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
}

#mega-menu-container .mega-menu-links a:hover {
    color: #3865ae;
}

#mega-menu-container .mega-menu-links a:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 2px;
    background: #3865ae;
}

/* Quick Navigation Toggle Button */
.quick-nav-toggle {
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    background: #3865ae;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 12px 8px !important;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    margin: 0;
    transition: all 0.3s ease;
    height: auto; /* Let content determine height */
    min-height: 100px; /* Minimum height */
    font-size: 16px; /* Smaller font */
}

.quick-nav-toggle:hover {
    background: #2a4f8a;
    padding-left: 8px;
}

/* Make arrow smaller and better positioned */
.quick-nav-toggle .arrow {
    margin-left: 5px !important;
    font-size: 16px !important;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* When menu is active (open) */
#mega-menu-container.scrolled.active + .quick-nav-toggle {
    left: 225px;
    border-radius: 0 4px 4px 0;
    background: #2a4f8a;
    padding: 8px 5px 8px 8px; /* Consistent padding */
}

#mega-menu-container.scrolled.active + .quick-nav-toggle .arrow {
    transform: rotate(180deg);
}


/* Show toggle button only when menu is in vertical mode */
@media (max-width: 1200px) {
    .quick-nav-toggle {
        display: block;
    }
    
    #mega-menu-container.scrolled {
        left: 0;
        width: 230px;
    }
}

		/* Add this to your existing CSS */
.parameter-section h2 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #000 !important; /* Force black color */
    text-align: left !important; /* Force left alignment */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.parameter-section h2 span {
    color: inherit !important; /* Ensures the span inherits the black color */
    text-align: left !important;
    flex-grow: 1; /* Takes remaining space */
}

/* Keep the underline effect */
.parameter-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #3865ae, #4CAF50);
    border-radius: 2px;
}
		
		        /* Read More Button */
.read-more-btn {
    margin-left: 0;
    background: none;
    border: none;
    color: orange;
    cursor: pointer;
    font-size: 1rem;
    padding: 5px 10px;
    transition: all 0.3s ease;
    white-space: nowrap; /* Prevents button text from wrapping */
}

        .read-more-btn:hover {
            color: darkorange;
            text-decoration: underline;
        }

        .read-more-btn::after {
            content: "\2193";
            margin-left: 5px;
        }

        .read-more-btn.active::after {
            content: "\2191";
        }

        /* Description Text */
        .parameter-description {
            display: none;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #3865ae;
        }

        /* Filter Controls */
        .filter-container {
			padding-top: 40px;
			align-items: center;
		}
		
		
		.filter-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 8px 15px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .filter-btn.active {
            background: #2e5492;
            color: white;
            border-color: #2e5492;
        }

        .filter-btn:hover {
            border-color: #2e5492;
        }

        /* Product Grid */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1rem;
			margin: 2rem 0;
        }
        
.product-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem;
    transition: transform 0.3s;
    background: white;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures consistent height */
}
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .product-card img {
            width: 100%;
            height: 150px;
            object-fit: contain;
            margin-bottom: 0.75rem;
            border-radius: 4px;
        }
        
.product-card h3 {
    color: #2e5492;
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    text-align: center; /* Centered title */
}

.product-card .ref {
    color: #666;
    font-size: 1rem;
    margin: 0 0 5px 0;
    text-align: center;
    font-style: italic;
}
        
.product-card .range {
    font-size: 1rem; /* Larger font */
    margin: 0 0 8px 0;
    font-weight: 500;
	text-align: center;
}
        
.desc-container {
    position: relative;
    margin-bottom: 12px;
    flex-grow: 1; /* Takes remaining space */
    overflow: hidden;
}

.desc-container .desc {
    color: #333;
    font-size: 0.95rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desc-container .desc.expanded {
    -webkit-line-clamp: unset;
}

.desc-container .see-more {
    color: #2e5492;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    cursor: pointer;
    display: block;
    margin-top: 5px;
}

.desc-container .see-more:hover {
    text-decoration: underline;
}
        
        .details-link {
            color: #2e5492;
            text-decoration: none;
            font-size: 0.9rem;
            display: block;
            text-align: center;
        }

/* LEARN MORE BUTTON */
/* Header Links Container */
.header-links {
    display: flex;
    align-items: center;
    gap: 15px;
	margin-left: auto;
}

/* Learn More Link */
.learn-more-link {
    display: inline-block;
	color: orange !important;
    text-decoration: none;
    font-size: 1rem;
    padding: 5px 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
	background: none;
    border: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: normal !important;
	line-height: normal;
	position: relative;
}

.learn-more-link:hover {
    color: darkorange !important;
    text-decoration: underline !important;
}

.learn-more-link::after {
    content: "\2192";
    margin-left: 5px;
	display: inline-block;
	font-weight: normal;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    #mega-menu-container .mega-menu-links {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    #mega-menu-toggle {
        display: block;
    }
    
    #mega-menu-container.scrolled {
        transform: translateX(-100%);
    }
    
    #mega-menu-container.scrolled.active {
        transform: translateX(0);
    }
    
    #mega-menu-container .mega-menu-headers {
        flex-wrap: wrap;
    }
    
    #mega-menu-container .mega-menu-header {
        flex: 0 0 50%;
        padding: 12px 10px;
    }
    
    #mega-menu-container .mega-menu-links {
        column-count: 2;
    }
    
    #mega-menu-container .mega-menu-links a {
        font-size: 12px;
    }
}

        /* Responsive adjustments */
        
        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }
        
        /* Section Anchors */
        .section-anchor {
            display: block;
            position: relative;
            top: -100px;
            visibility: hidden;
        }
		
		/* When zoomed to 125% or more */
		@media screen and (max-width: 1400px) {
			#mega-menu-container.scrolled {
			width: 120px; /* Narrower width when zoomed */
		}
    }
		@media screen and (max-width: 1200px) {
    #mega-menu-container.scrolled {
        width: 150px;
        padding: 8px;
    }
}
	/* Push content when menu is active */
body.menu-scrolled {
    padding-left: 200px; /* Should match menu width + margin */
    transition: padding 0.3s ease;
}

@media screen and (max-width: 1400px) {
    body.menu-scrolled {
        padding-left: 190px;
    }
}

@media screen and (max-width: 1200px) {
    body.menu-scrolled {
        padding-left: 170px;
    }
}

@media (max-width: 768px) {
    /* Fix menu position to always appear at top */
    #mega-menu-container.scrolled {
        top: 0;
        left: 0;
        width: 50%;
        height: 100vh;
        transform: translateX(-100%);
    }
    
    /* Adjust toggle button position */
    #mega-menu-toggle {
        top: 20px;
        left: 20px;
        z-index: 1001;
    }
    
    /* Push content when menu is active */
    body.menu-active {
        overflow-x: hidden;
        position: relative;
    }
    
    /* Make sure menu appears above other content */
    #mega-menu-container.scrolled.active {
        z-index: 1000;
    }
    
    /* Adjust header position in mobile menu */
    #mega-menu-container.scrolled .mega-menu-headers {
        padding-top: 60px; /* Give space for the toggle button */
    }
    
    /* Make menu items more mobile-friendly */
    #mega-menu-container.scrolled .mega-menu-header {
        padding: 12px 15px;
        font-size: 16px;
    }
}

/* Mobile Layout Fix */
@media (max-width: 768px) {
    .header-links {
        flex-direction: column;
        align-items: flex-end; /* Right-align the container */
        gap: 20px; /* Reduced gap */
        width: auto; /* Don't force full width */
        margin-left: auto; /* Push to right */
    }

    .learn-more-link {
        position: relative;
        text-align: right; /* Right-align text */
        width: 100%; /* Full width of container */
        padding-right: 20px; /* Space for arrow */
		color: transparent !important;
        font-size: 0;
    }

    .learn-more-link::before {
        content: "Learn More";
        position: absolute;
        right: 20px; /* Align with padding */
        color: orange;
        font-size: 1rem; /* Restore font size */
        pointer-events: none;
    }

    .learn-more-link::after {
        position: absolute;
        right: 0;
        color: orange; /* Ensure arrow matches */
		content: "\2192";
    }

    .read-more-btn {
        text-align: right;
        width: 100%;
    }
}/* End custom CSS */