.ct-footer .ct-widget {
	--theme-content-spacing: 1em;
}

/* services and contact page icon boxes */
.ct-iconbox .elementor-icon,
.ct-iconbox .elementor-icon-box-title,
.ct-iconbox .elementor-icon-box-description {
	transition: all 0.3s ease;
}

.ct-iconbox:hover .elementor-icon, 
.ct-iconbox:hover .elementor-icon-box-title,
.ct-iconbox:hover .elementor-icon-box-description { 
	fill: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-8) !important 
}


/* main image boxes */
[class*="ct-imagebox"]:hover .elementor-heading-title {
	color: inherit !important;
}

.ct-imagebox-small:hover .elementor-widget-container {
	color: var(--theme-palette-color-8) !important;
}

.ct-imagebox-large:hover .elementor-widget-container {
	color: var(--theme-palette-color-3) !important;
}
/* Styling for Produits menu items */
#menu-produits .menu-item {
    display: inline-flex; /* Flexbox to center content */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    padding: 6px 12px; /* Padding for a good fit */
    border: 1px solid #000; /* Thin border for rectangles */
    border-radius: 3px; /* Slightly rounded corners */
    background-color: transparent; /* No background */
    margin: 0 2px; /* Small gap between items */
    text-align: center; /* Center-align text */
    position: relative; /* For dropdown positioning */
    width: auto; /* Let width adjust to content */
    height: auto; /* Let height adjust to content */
}

/* Link styles inside the menu */
#menu-produits .menu-item a {
    text-decoration: none; /* Remove underline */
    color: #000; /* Black text */
    font-weight: normal; /* Regular font weight */
    display: inline-block; /* Ensure proper alignment */
    padding: 0; /* Remove extra padding inside links */
    line-height: 1; /* Set tight line-height */
}

/* Dropdown Arrow Alignment */
#menu-produits .menu-item .sub-menu-indicator {
    display: inline-block; /* Keep arrow inline with text */
    vertical-align: middle; /* Align arrow with text */
    margin-left: 5px; /* Space between text and arrow */
    font-size: 12px; /* Adjust arrow size */
}

/* Submenu Styling */
#menu-produits .menu-item .sub-menu {
    display: none; /* Hide submenu by default */
    position: absolute; /* Position below the parent item */
    top: 100%; /* Place it directly below the parent */
    left: 0; /* Align it to the left of the parent item */
    background-color: transparent; /* No background color for the submenu */
    border: none; /* Remove the border from the submenu */
    padding: 0; /* No padding around submenu */
    z-index: 9999; /* Ensure submenu stays above other content */
    width: 100%; /* Match the width of the parent menu item */
}

/* Submenu Items - Rectangle Shape with Background Color */
#menu-produits .menu-item .sub-menu .menu-item {
    padding: 10px 12px; /* Padding for submenu items */
    border: 1px solid #000; /* Thin border to create the rectangle */
    margin: 0; /* Remove margin between submenu items */
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensure the submenu items fill the available width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    background-color: #DB9D8A; /* Background color for submenu items */
    border-radius: 3px; /* Optional: Slightly rounded corners */
}

/* Ensure the last submenu item has a complete rectangle */
#menu-produits .menu-item .sub-menu .menu-item:last-child {
    border-bottom: 1px solid #000; /* Add border at the bottom for the last item */
}

/* Show Submenu on Hover */
#menu-produits .menu-item:hover .sub-menu {
    display: block; /* Display the submenu when hovering */
}

/* Adjust Submenu Arrow Position */
#menu-produits .menu-item a .sub-menu-indicator {
    position: relative;
    top: 1px; /* Adjust arrow to align vertically with the text */
    margin-left: 5px; /* Space between text and arrow */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    #menu-produits .menu-item {
        display: block; /* Stack menu items vertically on small screens */
        margin: 5px 0; /* Add vertical space between items */
        width: 100%; /* Take full width on mobile */
    }

    #menu-produits .menu-item .sub-menu {
        position: static; /* Inline submenu for mobile */
        display: block; /* Always show submenu on mobile */
    }
}