/*
 Theme Name:   Exera Office Worx
 Description:  Custom Theme Developed for Office Worx
 Author:       Exera (Bilaal Abdel Hassan)
 Author URI:   https://exera.mu
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-elementor-child
*/

/* Header container */
.officeworx-header {
    display: flex;
    width: 100%;
    /*height: 300px;*/
    padding: 0 30px;
    margin-bottom: 15px;
}

/* Logo area */
.header-logo {
    width: 18%;
    padding: 0 20px;
    margin: 15px 0px -5px 0px;
    display: flex;
    align-items: self-end;
    justify-content: center;
    background-color: #ffffff;
}

.header-logo img {
    /* max-height: 300px; */
    /*width: 145px;*/
	width: 11.33vw;
    height: auto;
}

.cia-logo {
    max-width: 80%;
    margin-top: 10px;
}

.custom-link-white{
	a&{
		color: #CCCCCC;
	}
}

.white-link {
    a& {
        color: white !important;
    }
}

.footer-social a {
  display: block; /* Ensure it behaves like a block element for sizing */
  width: 40px;
  height: 40px;
  flex-shrink: 0; /* Prevent it from shrinking below its size within flex container */
  flex-basis: 50px; /* Suggest a preferred size to the flex container */
}

.footer-social a img {
  display: block; /* Ensure image behaves like a block */
  width: 100%; /* Make image fill the width of the link container */
  height: 100%; /* Make image fill the height of the link container */
  object-fit: cover; /* Controls how the image fits if its aspect ratio differs from the container */
}

.custom-link-white:hover{
	transform: scale(1.02);
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container{
	margin-left: 130px;
}

@media (max-width: 768px) {
    #wpforms-927 .wpforms-field {
        display: block !important; /* Ensure each field container is block-level */
        width: 100% !important;    /* Make sure the container takes full width */
        margin-bottom: 20px;       /* Add some space between fields (adjust as needed) */
    }

    /* Optional: Ensure labels and inputs inside also behave like blocks for consistency */
    #wpforms-927 .wpforms-field label,
    #wpforms-927 .wpforms-field input,
    #wpforms-927 .wpforms-field textarea,
    #wpforms-927 .wpforms-field select {
         display: block; /* !important might be needed here depending on conflicts */
         /* width: 100%; */ /* This is usually handled by the .wpforms-field width and inputs' own 100% */
    }
	
	div.wpforms-container-full .wpforms-form .wpforms-submit-container{
		margin-left: 105px;
	}
}

/* Responsive Styles for the Shortcode Section */

@media (max-width: 1024px) { /* Tablet Styles */
    /* Adjust padding for the main shortcode container if needed */
    .elementor-widget-shortcode {
        padding: 0 15px; /* Example: Add horizontal padding */
    }

    /* Tablet layout for header controls */
    .elementor-widget-shortcode .shop-header {
        flex-direction: column; /* Stack title and controls */
        align-items: center; /* Center items */
    }

    /* Tablet layout for controls (search/sort) */
    .elementor-widget-shortcode .shop-controls {
        flex-direction: column; /* Stack search and sort */
        width: 100%; /* Allow controls to take full width */
        align-items: center; /* Center items */
    }

    /* Adjust width and spacing for search and sort inputs on Tablet */
    .elementor-widget-shortcode .shop-search-input,
    .elementor-widget-shortcode .custom-select-wrapper {
        width: 100% !important; /* Make them full width within controls */
        margin-bottom: 15px; /* Space between search and sort */
        box-sizing: border-box; /* Include padding/border in width */
    }

     /* Remove margin-bottom from the last item in the controls */
    .elementor-widget-shortcode .shop-controls > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Tablet grid for product cards (Example: 2 or 3 columns) */
    .elementor-widget-shortcode .shop-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Example: adjust minmax as needed */
        gap: 20px; /* Adjust gap */
    }

    .elementor-widget-shortcode .shop-product-card {
        width: auto; /* Allow grid/flex to manage width */
    }

    /* Adjust padding inside card content on Tablet if needed */
    .elementor-widget-shortcode .shop-content-padding {
        padding: 15px; /* Example */
    }
}

@media (max-width: 768px) { /* Mobile Styles */
     /* Adjust padding for the main shortcode container */
    .elementor-widget-shortcode {
        padding: 0 10px; /* Example: Smaller horizontal padding */
    }

    /* Mobile header layout */
    .elementor-widget-shortcode .shop-header {
        flex-direction: column; /* Stack title and controls */
        align-items: center; /* Center items */
        text-align: center;
    }

     .elementor-widget-shortcode .shop-title {
         margin-bottom: 15px; /* Space below title */
     }


    /* Mobile layout for controls (search/sort) */
    .elementor-widget-shortcode .shop-controls {
        flex-direction: column; /* Stack search and sort */
        width: 100%; /* Allow controls to take full width */
        align-items: center; /* Center items horizontally */
    }

    /* Adjust width and spacing for search and sort inputs on Mobile */
    .elementor-widget-shortcode .shop-search-input,
    .elementor-widget-shortcode .custom-select-wrapper {
        width: 100% !important; /* Full width for search and sort inputs */
        margin-bottom: 15px; /* Space between search and sort */
        box-sizing: border-box; /* Include padding/border in width */
    }

     /* Remove margin-bottom from the last item in the controls */
     .elementor-widget-shortcode .shop-controls > *:last-child {
        margin-bottom: 0 !important;
    }


    /* Mobile grid for product cards (Single column) */
    .elementor-widget-shortcode .shop-products-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 20px; /* Adjust gap */
    }

    /* Mobile product card width */
    .elementor-widget-shortcode .shop-product-card {
        width: 100%; /* Ensure card takes full width */
        box-sizing: border-box;
        /* Adjust padding/margins inside card if needed */
    }

    /* Adjust layout inside product card actions */
    .elementor-widget-shortcode .shop-product-actions {
        flex-direction: column; /* Stack quantity controls and Add to Cart button */
        align-items: center; /* Center actions horizontally */
        margin-top: 15px; /* Space above actions */
    }

    .elementor-widget-shortcode .shop-quantity-controls {
        margin-bottom: 10px; /* Space below quantity controls */
    }

    .elementor-widget-shortcode .shop-add-to-cart {
        width: 100%; /* Make add to cart button full width */
        text-align: center; /* Center text inside button */
        box-sizing: border-box;
    }

     /* Adjust image placeholder responsiveness */
     .elementor-widget-shortcode .shop-placeholder-image {
         width: 100%;
         height: auto; /* Allow height to adjust */
         padding-top: 100%; /* Maintain aspect ratio (e.g., 1:1 if needed) */
         position: relative;
         display: flex; /* Use flex to center content */
         justify-content: center;
         align-items: center;
         text-align: center;
         box-sizing: border-box;
     }

      .elementor-widget-shortcode .shop-placeholder-image span {
          position: absolute; /* Position text over the pseudo-image area */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%; /* Limit text width */
          box-sizing: border-box;
      }

    /* Adjust padding inside card content */
    .elementor-widget-shortcode .shop-content-padding {
        padding: 10px; /* Reduce padding inside card content */
    }
}

/* Color bars container */
.color-bars {
    display: flex;
    width: 82%;
    /*height: 300px;*/
    gap: 8px;
    /* Add spacing between color bars */
    background-color: #fff;
    /* White background shows through gaps */
}

/* Individual color bars with precisely adjusted widths to match design */
.color-bar {
    position: relative;
    overflow: hidden;
}

/* Color bar 1 - Green */
.color-bar-1 {
    flex: 1.5;
    /* Adjusted to match reference image */
    background: #4aab06;
    /* Base color */
}

.color-bar-1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background-color: #89d213;
}

.color-bar-1:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Color bar 2 - Orange */
.color-bar-2 {
    flex: 2.4;
    background: #fb450f;
    /* Base color */
}

.color-bar-2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background-color: #fd8632;
}

.color-bar-2:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Color bar 3 - Magenta */
.color-bar-3 {
    flex: 1.6;
    background: #b21356;
    /* Base color */
}

.color-bar-3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background-color: #d63e95;
}

.color-bar-3:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Color bar 4 - Brown */
.color-bar-4 {
    flex: 1.3;
    background: #74684e;
    /* Base color */
}

.color-bar-4:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background-color: #aba38c;
}

.color-bar-4:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
    height: 25%;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Color bar 5 - Gray */
.color-bar-5 {
    flex: 0.8;
    /* Adjusted to match reference image - narrower than others */
    background: #9F9F9F;
    /* Base color */
}

.color-bar-5:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background-color: #d6d6d6;
}

.color-bar-5:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: 25%;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.mg-top-40 {
    margin-top: 40px !important;
}

/* Responsive breakpoints */
@media (max-width: 768px) {

    /* Original header structure modifications */
    .officeworx-header {
        flex-direction: column;
        height: auto;
        position: relative;
        padding: 0 0 20px;
    }

    .header-logo {
        width: 100%;
        margin: 10px auto;
        padding: 10px;
        justify-content: center;
    }

    .header-logo img {
        max-width: 80px;
    }

    /* Hide desktop color bars on mobile */
    .color-bars {
        display: none;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile menu open animation */
    body.menu-open {
        overflow: hidden;
    }

    body.menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(13px) rotate(45deg);
    }

    body.menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-13px) rotate(-45deg);
    }

    body.menu-open .mobile-navigation {
        display: block;
    }

    /* Animation for section expansion */
    .mobile-section-header {
        position: relative;
    }

    .mobile-section-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
    }
}

/* Added touch animation for mobile */
@media (max-width: 768px) {
    .mobile-section-header {
        position: relative;
        overflow: hidden;
    }

    .mobile-section-header::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 50%;
        width: 0;
        height: 0;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(50%, -50%);
        transition: width 0.5s, height 0.5s;
        z-index: 0;
    }

    .mobile-section-header:active::before {
        width: 150px;
        height: 150px;
    }

    .mobile-section-header span,
    .mobile-section-header i {
        position: relative;
        z-index: 1;
    }
}

/* Mobile Menu Styles */

/* Hide mobile elements by default for desktop */
.mobile-menu-toggle,
.mobile-navigation {
    display: none;
}

/* Mobile hamburger menu toggle */
.mobile-menu-toggle {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1000;
}

.mobile-menu-toggle span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Navigation */
.mobile-navigation {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 999;
    overflow-y: auto;
    padding: 70px 15px 30px;
}

.mobile-sections {
    max-width: 500px;
    margin: 0 auto;
}

.mobile-section {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    cursor: pointer;
}

.mobile-section-header i {
    transition: transform 0.3s ease;
}

.mobile-section.active .mobile-section-header i {
    transform: rotate(180deg);
}

.mobile-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background-color: #fff;
}

.mobile-section.active .mobile-section-content {
    max-height: 300px;
}

.custom-brown-menu {
    font-size: 200px !important;
}

.mobile-menu-items {
    list-style: none;
    margin: 0;
    padding: 15px 20px;
}

.mobile-menu-items li {
    margin-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 12px;
}

.mobile-menu-items li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.mobile-menu-items a {
    display: block;
    color: #444;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile specific color schemes */
.mobile-section[data-section="fitout"] .mobile-menu-items a:hover {
    color: #8cc63f;
}

.mobile-section[data-section="it"] .mobile-menu-items a:hover {
    color: #f15a29;
}

.mobile-section[data-section="property"] .mobile-menu-items a:hover {
    color: #be1e67;
}

.mobile-section[data-section="eshop"] .mobile-menu-items a:hover {
    color: #7b6a58;
}

.mobile-section[data-section="other"] .mobile-menu-items a:hover {
    color: #a7a9ac;
}

/* Two-Column Footer Layout Styles */
.custom-site-footer {
    background-color: #383838;
    color: #CCCCCC;
    padding: 50px 0 30px 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.custom-footer-container {
    margin: 0 30px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Two-column main structure */
.footer-two-columns {
    display: flex;
    justify-content: space-between;
}

/* Left column (info + copyright) */
.footer-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Right column (logo + social) */
.footer-right-column {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Info row with two columns */
.footer-info-row {
    display: flex;
    margin-bottom: 30px;
}

.footer-info-col {
    flex: 0 0 40%;
    padding-right: 20px;
}

.footer-services-col {
    flex: 0 0 60%;
}

/* Typography */
.footer-left-column h4 {
    color: #ffffff;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-left-column h4:not(:first-child) {
    margin-top: 25px;
}

.footer-left-column p {
    margin-top: 0;
    margin-bottom: 18px;
    color: #CCCCCC;
    line-height: 1.65;
    font-weight: 400;
}

.footer-left-column p:last-child {
    margin-bottom: 0;
}

/* Copyright row */
.footer-copyright-row {
    margin-top: auto;
}

.footer-copyright-text {
    font-size: 0.8em;
    color: #747474 !important;
    letter-spacing: 0.3px;
    margin-bottom: 15px;
}

.footer-separator {
    height: 1px;
    background-color: #555555;
    border: none;
    margin: 0;
}

/* Logo styles */
.footer-logo {
    margin-top: 30px;
}

.footer-logo img {
    max-width: 165px;
    height: auto;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: auto;
    width: 85%;
}

.footer-social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #1a1a1a;
    color: #FFFFFF;
    border-radius: 50%;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.footer-social a:hover {
    background-color: #444444;
}

.footer-social i {
    line-height: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .footer-two-columns {
        flex-direction: column;
    }

    .footer-info-row {
        flex-direction: column;
    }

    .footer-info-col,
    .footer-services-col {
        flex: none;
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .footer-right-column {
        width: 100%;
        align-items: center;
        margin-top: 30px;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
        margin-top: 20px;
    }
}

/* Color bar menu styling */
.color-bar {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Menu positioning */
.color-bar-menu {
    padding: 0 10px 0 15px;
    margin-top: 40px;
    z-index: 10;
    /* Ensure menu is above the pseudo-elements */
}

/* Menu items styling */
.bar-menu-items {
    list-style: none;
    line-height: 1.18;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Bebas Neue';
}

.menu-border-bottom {
    width: 100% !important;
    border-bottom: 1px solid rgb(171 163 140 / 80%);
}

.green-menu .bar-menu-items li {
    border-bottom: 1px solid rgb(137 210 19 / 80%);
}

.orange-menu .bar-menu-items li {
    border-bottom: 1px solid rgb(253 134 50 / 80%);
}

.magenta-menu .bar-menu-items li {
    border-bottom: 1px solid rgb(214 62 149 / 80%);
}

.brown-menu .bar-menu-items li {
    border-bottom: 1px solid rgb(171 163 140 / 80%);
}

.bar-menu-items li:last-child:not(.with-border) {
    border-bottom: none;
}

/* To set the border on the last child, add the class 'with-border' to the last menu item in the array, like so:
wp_nav_menu(array(
    'theme_location' => 'gray-menu',
    'container'      => false,
    'depth'          => 1,
    'menu_class'     => 'bar-menu-items',
    'items_wrap'     => '%3$s'.( $args->has_children ? '' : ' with-border' ),
));
*/

.bar-menu-items a {
    color: #f1f0f0e0;
    text-decoration: none;
    font-weight: 100;
    /*font-size: 27px;*/
    text-transform: uppercase;
    transition: all 0.2s ease;
    display: block;
    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
}

.officeworx-header, .color-bars {
    height: 23.4375vw;
}

.bar-menu-items a {
    font-size: calc(2.1094vw);
}

.bar-menu-items a:hover {
    text-shadow: 0 0 2px rgb(249 255 162 / 90%);
    transform: scale(1.02);
}

.fitout-color {
    color: #dafda1;
}

.green-menu .bar-menu-items a {
    color: #d8fda0;
}

/* Color-specific menu styling */
.green-menu .bar-menu-items a:hover {
    color: #383838;
}

.orange-menu .bar-menu-items a {
    color: #fccca8;
}

.orange-menu .bar-menu-items a:hover {
    color: #383838;
}

.magenta-menu .bar-menu-items a {
    color: #fcb0de;
}

.magenta-menu .bar-menu-items a:hover {
    color: #383838;
}

.brown-menu .bar-menu-items a {
    color: #ffffff;
  /*font-size: 34px;*/
	font-size: calc(10px + 1.875vw);
}

.brown-menu .bar-menu-items a:hover {
    color: #383838;
}

.gray-menu .bar-menu-items a:hover {
    color: #383838;
}

.gray-menu {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    height: 100%;
/*width: 60px;*/
	width: 4.6875vw;
    margin-top: 40px;
}

img.social-header {
    transition: transform 0.3s ease-in-out;
}

img.social-header:hover {
    transform: scale(1.1);
    /* Adjust the scale value as needed */
}

.social-header {
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-header img:hover {
    transform: scale(1.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .color-bars {
        height: auto;
        flex-wrap: wrap;
    }

    .color-bar {
        min-height: 60px;
        width: 100%;
        margin-bottom: 5px;
    }

    .bar-menu-items {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .bar-menu-items li {
        margin: 3px 10px;
    }
}

.menu-title {
    margin-bottom: 5px;
    font-family: 'Bebas Neue';
    color: #ffffff;
    /*font-size: 34px;*/
	font-size: calc(10px + 1.875vw);
    display: block;
}

.browse-tag {
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

/* Add this CSS to your child theme's style.css file */

/* Mobile menu styles */
.officeworx-header {
    position: relative;
    z-index: 1000;
    /* Ensure header stays above other content */
}

/* Mobile toggle button */
.mobile-menu-toggle {
    display: none;
    /* Hide by default on desktop */
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: 0.3s;
}

/* Mobile navigation container */
.mobile-navigation {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    right: -300px;
    /* Start off-screen */
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 999;
}

/* When menu is open */
body.menu-open .mobile-navigation {
    right: 0;
    /* Slide in from right */
    display: block;
}

/* Transform hamburger to X when open */
body.menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

body.menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
}

body.menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile sections styling */
.mobile-section {
    border-bottom: 1px solid #eaeaea;
}

.mobile-section-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-section-header span {
    font-weight: bold;
    color: white;
}

.mobile-section-content {
    display: none;
    padding: 10px 15px;
    background-color: #f9f9f9;
}

.mobile-section.active .mobile-section-content {
    display: block;
}

/* Rotate chevron when section is open */
.mobile-section.active .fa-chevron-down {
    transform: rotate(180deg);
}

.fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Menu items styling */
.mobile-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-items li {
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
}

.mobile-menu-items li:last-child {
    border-bottom: none;
}

.mobile-menu-items a {
    color: #333;
    text-decoration: none;
    display: block;
}

.chevron {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z' fill='white'/%3E%3C/svg%3E");
    height: 25px;
    width: 25px;
}

/* Media queries */
@media (max-width: 768px) {
    .color-bars {
        display: none;
        /* Hide desktop menu on mobile */
    }

    .mobile-menu-toggle {
        display: block;
        /* Show mobile toggle */
    }

    .header-logo {
        max-width: 70%;
        /* Make logo smaller on mobile */
    }

    .officeworx-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		height: 200px;
    }
}

/* Additional style to fix potential z-index conflicts */
#content,
.site-content {
    position: relative;
    z-index: 1;
    /* Lower than the header */
}

/* Fix for potential overlay issues */
body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    /* Just below the mobile menu */
}

#exera-slider .swiper-pagination {
    position: absolute;
    bottom: 50px; /* Adjust this value to control the distance from the bottom */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10; /* Ensure the dots are above the images */
}

/* Optional: Adjust the padding of the carousel container if the dots overlap content */
#exera-slider .elementor-widget-container {
    padding-bottom: 30px; /* Add space at the bottom for the dots */
}

``css
/* Ensure the field container stacks fields vertically */
.wpforms-field-container {
    display: block !important; /* Revert to block if flex was applied */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important; /* Ensure no grid/flex gap */
}

/* Make each field a flex container to put label and input on the same line */
.wpforms-field {
    display: flex !important;
    align-items: flex-start !important; /* Align items to the top */
    margin-top: 0 !important; /* Remove vertical margin */
    margin-bottom: 0 !important; /* Remove vertical margin */
    padding-top: 0 !important; /* Remove vertical padding */
    padding-bottom: 0 !important; /* Remove vertical padding */
    /* Add some space between field rows if needed, e.g., margin-bottom: 15px; */
}

/* Style the labels for alignment, spacing, and appearance */
.wpforms-field label.wpforms-field-label {
    min-width: 110px !important; /* Adjust as needed for your longest label */
    margin-right: 20px !important; /* Space between label and field */
    display: block !important; /* Ensures min-width behaves as expected in flex */
    flex-shrink: 0 !important; /* Prevent label from shrinking */
    text-transform: uppercase !important; /* Make label text uppercase */
    font-family: "Montserrat", sans-serif !important; /* Apply Montserrat font */
    font-weight: 500 !important; /* Apply light font weight (300) */
    /* Potentially add text-align: right; if you want labels right-aligned */
}

/* Remove default margin and padding from inputs and textareas and remove border-radius */
.wpforms-field input,
.wpforms-field textarea {
    margin: 0 !important;
    padding: 0 !important; /* Be cautious with padding: 0; might affect input usability */
    border-radius: 0 !important; /* Remove border radius */
    /* You might want to restore some padding here if needed, e.g., padding: 8px !important; */
    /* Consider adding flex-grow: 1; to make inputs fill available space, e.g., flex-grow: 1 !important; */
}

/* Optional: Style for specific field types like textareas */
.wpforms-field-textarea textarea {
    /* Add specific styles for the textarea if needed */
}

/*shop.css - Add to your theme */

/* shop.css - Add to your theme */

.shop-wrapper {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 20px; */
    font-family: Montserrat, sans-serif;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.shop-title {
    font-size: 40px;
    font-weight: bold;
    color: #e91e63;
    letter-spacing: 2px;
    margin: 0;
    font-family: 'Bebas Neue';
}

.shop-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

#shop-search {
    width: 300px;
}

#shop-sort {
    width: 200px;
}

#shop-search::placeholder {
    color: #a6a6a6;
}

#shop-search::-webkit-input-placeholder {
    color: #a6a6a6;
}

#shop-search::-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}

#shop-search:-ms-input-placeholder {
    color: #a6a6a6;
}

#shop-search::--ms-input-placeholder {
    color: #a6a6a6;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
}

#shop-sort {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 25px;
    background-image: none;
}

.custom-select-wrapper::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 8px;
    transform: rotate(180deg);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid grey;
    margin-right: 5px;
    pointer-events: none;
}

#shop-sort::-ms-expand {
    display: none;
}

.shop-search-input,
.shop-sort-select {
    padding: 8px 12px;
    border: 1px solid #d5d5d5 !important;
    border-radius: 0px !important;
    background: #fff !important;
    color: #a6a6a6 !important;
    font-weight: bold;
    font-size: 16px;
    outline: none;
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.shop-product-card {
    border: 3px solid #d5cfc1;
    background: white;
    text-align: center;
}

.shop-content-padding {
    padding: 5px 10px 10px 10px;
}

.shop-product-image {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d8d5ce;
}

.shop-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-placeholder-image {
    color: #71716f;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.shop-product-title {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #333;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-product-ref {
    font-size: 14px;
    color: #000;
}

.shop-product-price {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.shop-product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-quantity-controls {
    display: flex;
    align-items: center;
    flex: 1;
}

.shop-qty-btn {
    background: none;
    border: none;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 25px;
    font-weight: 500;
    color: #71664b;
}

.shop-qty-input {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    width: 65px !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    height: 33px !important;
}

.shop-add-to-cart {
    background: #6a5f47;
    color: white;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 0.9;
    min-width: 50px;
    border-radius: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .shop-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .shop-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        text-align: center;
    }

    .shop-controls {
        justify-content: center;
    }

    .shop-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-wrapper {
        padding: 15px;
    }

    .shop-title {
        font-size: 22px;
    }
}

span.menu-title.menu-border-bottom:hover {
  color: #383838;
  cursor: pointer;
  text-shadow: 0 0 2px rgb(249 255 162 / 90%);
  transform: scale(1.02);
}

/*REMOVE UP DOWN ARROW ON WOOCOMMERCE INPUT FIELD*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Styles for all pagination dots (sets background to white and ensures full opacity by default) */
.swiper-pagination-bullet {
  background-color: white !important; /* Use !important if needed to override existing styles */
  opacity: 1 !important; /* Ensure full opacity */
}

/* Styles for non-active pagination dots (reduces opacity) */
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: 0.5 !important; /* Adjust opacity for non-active state */
}

/* Styles for the previous and next arrow buttons */
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
  color: white !important; /* Sets the icon color to white */
  opacity: 1 !important; /* Ensures full opacity */
}

/* Styles for all pagination dots */
.swiper-pagination-bullet {
  background-color: white !important; /* Ensure all dots have a white background */
  opacity: 1 !important; /* Start with full opacity */
}

/* Styles for non-active pagination dots (reduces opacity) */
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: 0.5 !important; /* Make non-active dots semi-transparent */
}

/* Styles for the previous and next arrow buttons with circular dark background */
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
  color: white !important; /* Sets the arrow icon color to white */
  background-color: rgba(0, 0, 0, 0.8) !important; /* Adds a semi-transparent dark background */
  border-radius: 50% !important; /* Makes the background circular */
  width: 40px !important; /* Sets the width of the background */
  height: 40px !important; /* Sets the height of the background */
  display: flex !important; /* Use flexbox for centering */
  justify-content: center !important; /* Center horizontally */
  align-items: center !important; /* Center vertically */
  opacity: 1 !important; /* Ensure arrows are fully opaque */
}

/* You might need to adjust positioning of the arrows depending on your layout */
/* For example, to position them vertically centered and slightly outside the carousel */
/* .elementor-swiper-button-prev { left: -20px !important; } */
/* .elementor-swiper-button-next { right: -20px !important; } */
/* .elementor-swiper-button-prev, .elementor-swiper-button-next { top: 50% !important; transform: translateY(-50%) !important; } */