/* Import the Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
    --nav-bg-color: white; /* Background color for the navigation bar */
    --nav-item-bg-color: #FFECE8; /* Background color for nav item hover */
    --nav-text-color: #333; /* Default text color for main items */
    --nav-hover-text-color: var(--primary-color); /* Text color on hover for main items */
    --submenu-bg-color: white; /* Background color for submenu */
    --submenu-hover-bg-color: var(--primary-color); /* Hover background color for submenu */
    --submenu-hover-text-color: white; /* Hover text color for submenu */
    --submenu-border-color: rgba(0, 0, 0, 0.1); /* Submenu border or shadow color */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow color for elements */
    --transition-speed: 0.5s; /* Speed for transitions and animations */
    --submenu-border-radius: 5px; /* Border radius for submenus */
    --font-family: 'Poppins', Arial; /* Default font family */
    --text-padding: 10px 13px; /* Padding for text items */
    --submenu-width: 200px; /* Minimum width for submenu */
    --submenu-width-long: 300px; /* Minimum width for submenu for long items supplies and services */
    --main-item-color: #1C3D6E; /* Color for main menu items */
    --main-item-hover-color: var(--primary-color); /* Hover color for main menu items */
    --mobile-menu-bg: #f7f7f7; /* Mobile menu background color */
    --mobile-menu-text-color: #333; /* Mobile menu text color */
}

/* General Styles */
body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Navbar Styles */
.uk-navbar {
     position: sticky;
     top: 0;
     z-index: 1000;
     display: flex;
     justify-content: space-between; /* Separates the logo and menu */
     align-items: center; /* Aligns logo and menu vertically */
     padding: 9px 30px;
     background-color: var(--nav-bg-color);
     box-shadow: 0 2px 4px var(--shadow-color);
}

.uk-logo {
    display: flex; /* Aligns items horizontally */
    align-items: center; /* Vertically aligns the logo image and name */
    gap: 10px; /* Space between logo image and name */
}

/* Logo */
.uk-logo img {
    height: 40px;
}

.uk-logo-name img {
    height: 25px;
}

/* Menu Styles */
.uk-nav-links {
    text-align: right;
    justify-content: flex-end; /* Align menu items to the right */
}

.uk-menu {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.uk-menu-item {
    position: relative;
}

/* Main Menu Items */
.uk-menu-item a {
    display: block;
    padding: var(--text-padding);
    text-align: center;
    text-decoration: none;
    color: var(--main-item-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Hover Effect for Main Menu Items */
.uk-menu-item a:hover {
    background-color: var(--nav-item-bg-color);
    color: var(--main-item-hover-color);
     font-weight: 500;
}

/* Submenu Items */
.uk-submenu-item a {
    display: block;
    padding: var(--text-padding);
    text-align: center;
    text-decoration: none;
    color: var(--nav-text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}


/* Submenu Styles */
.uk-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--submenu-bg-color);
    border-radius: var(--submenu-border-radius);
    box-shadow: 0 4px 8px var(--shadow-color);
    display: none;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: var(--submenu-width);
    z-index: 100;

}

/* Show submenu on hover */
.uk-has-submenu:hover .uk-submenu {
    display: flex;
    animation: fadeIn var(--transition-speed) ease;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .uk-navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }

    .uk-menu {
        flex-direction: column;
        gap: 10px;
        background-color: var(--mobile-menu-bg);
        width: 100%;
    }

    .uk-menu-item a {
        color: var(--mobile-menu-text-color);
        text-align: left;
    }

    .uk-submenu {
        position: relative;
        box-shadow: none;
    }
}

/* Add styles for active menu item */
/* For main active menu item */
.uk-menu-item.active a {
    color: var(--nav-hover-text-color);
    background-color: var(--nav-hover-bg-color);
    font-weight: 500;
}

/* For active submenu item */
.uk-submenu-item a.active {
    background-color: var(--submenu-hover-bg-color);
    color: var(--submenu-hover-text-color);
}


/* Ensure border-radius is applied to the last submenu item */
.uk-submenu li:last-child a {
    border-bottom-left-radius: var(--submenu-border-radius);
    border-bottom-right-radius: var(--submenu-border-radius);
}

/* Reset border-radius when not hovered */
.uk-submenu li:not(:last-child) a {
    border-radius: 0;
}


/*-------------For Long Supplies and Services--------------*/
/* Submenu Styles */
.uk-submenu-long {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--submenu-bg-color);
    border-radius: var(--submenu-border-radius);
    box-shadow: 0 4px 8px var(--shadow-color);
    display: none;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: var(--submenu-width-long);
    z-index: 100;
}

/* Show submenu on hover */
.uk-has-submenu:hover .uk-submenu-long {
    display: flex;
    animation: fadeIn var(--transition-speed) ease;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .uk-navbar {
        flex-direction: column;
        align-items: stretch; /* Align items to stretch fully */
        padding: 15px;
    }

    .uk-menu {
        display: none; /* Initially hide the menu */
        flex-direction: column;
        gap: 10px;
        background-color: var(--mobile-menu-bg);
        width: 100%;
        margin-top: 10px; /* Space between navbar and menu */
        padding: 10px 0; /* Add padding for mobile */
    }

    .uk-menu.show {
        display: flex; /* Show menu when toggle is active */
    }

    .uk-menu-item a {
        color: var(--mobile-menu-text-color);
        text-align: left;
        padding: var(--text-padding);
        width: 100%; /* Full-width clickable area */
    }

    .menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background-color: var(--nav-bg-color);
        border: none;
        width: 100%;
        padding: 10px;
        font-size: 1.2em;
        color: var(--nav-text-color);
    }

    .menu-toggle:focus {
        outline: none;
    }

    .menu-toggle span {
        font-size: 1.5em;
    }
}


/* Add styles for active menu item */
.uk-menu-item.active a {
    color: var(--nav-hover-text-color);
    background-color: var(--nav-hover-bg-color);
}


/* Ensure border-radius is applied to the last submenu item */
.uk-submenu-long li:last-child a {
    border-bottom-left-radius: var(--submenu-border-radius);
    border-bottom-right-radius: var(--submenu-border-radius);
}

/* Reset border-radius when not hovered */
.uk-submenu-long li:not(:last-child) a {
    border-radius: 0;
}

.menu-toggle {
    display: none; /* Hidden by default for larger screens */
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background-color: var(--nav-bg-color);
        border: none;
        width: 100%;
        padding: 10px;
        font-size: 1.2em;
        color: var(--nav-text-color);
    }
}

@media (max-width: 768px) {
    .uk-submenu {
        position: relative;
        display: none; /* Hide submenu by default */
        flex-direction: column;
        box-shadow: none;
        width: 100%; /* Make it full-width for mobile */
    }

    .uk-menu-item:hover > .uk-submenu {
        display: flex; /* Show submenu on hover */
    }
}

/*------------Company Name------------*/

.uk-company-name {
    color: #FF5733; /* Matches the vibrant orange-red of your theme */
    font-family: 'Balbek', sans-serif; /* Matches the website font for consistency */
    font-size: 1.3rem; /* Base font size */
    letter-spacing: 0.5px; /* Adds subtle spacing for a polished look */
}

/* Medium screens (tablets and smaller devices) */
@media (max-width: 768px) {
    .uk-company-name {
        font-size: 1.1rem; /* Slightly smaller font size for tablets */
        letter-spacing: 0.4px; /* Adjust spacing for smaller screens */
    }
}

/* Small screens (mobile devices) */
@media (max-width: 480px) {
    .uk-company-name {
        font-size: 1rem; /* Further reduce font size for mobile devices */
        letter-spacing: 0.3px; /* Adjust spacing further */
    }
}

/* Highlight active main menu item */
/* General styles for submenu */
.uk-submenu,
.uk-submenu-long {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--submenu-bg-color);
    border-radius: var(--submenu-border-radius);
    box-shadow: 0 4px 8px var(--shadow-color);
    display: none;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 100;
}

/* Submenu specific widths */
.uk-submenu {
    min-width: var(--submenu-width);
}

.uk-submenu-long {
    min-width: var(--submenu-width-long);
}

/* Show submenu on hover */
.uk-has-submenu:hover .uk-submenu,
.uk-has-submenu:hover .uk-submenu-long {
    display: flex;
    animation: fadeIn var(--transition-speed) ease;
}

/* Active styles for main menu items */
.uk-menu-item.active > a {
    color: var(--nav-hover-text-color); /* Active text color */
    background-color: var(--nav-hover-bg-color); /* Active background color */
    /* Optional: Make it bold */
}

/* Prevent submenu items from inheriting active styles */
.uk-menu-item.active .uk-submenu-item a,
.uk-menu-item.active .uk-submenu-long .uk-submenu-item a {
    background-color: white !important;
    color: var(--nav-text-color) !important;
    font-weight: normal !important;
}

/* Hover effect for submenu items */
.uk-menu-item.active .uk-submenu-item a:hover,
.uk-menu-item.active .uk-submenu-long .uk-submenu-item a:hover {
    background-color: var(--submenu-hover-bg-color) !important;
    color: var(--submenu-hover-text-color) !important;
    font-weight: normal !important;
}

/* Ensure submenu items remain styled only on hover */
.uk-menu-item:hover > .uk-submenu .uk-submenu-item a,
.uk-menu-item:hover > .uk-submenu-long .uk-submenu-item a {
    background-color: white !important;
    color: var(--nav-text-color) !important;
}

.uk-menu-item:hover > .uk-submenu .uk-submenu-item a:hover,
.uk-menu-item:hover > .uk-submenu-long .uk-submenu-item a:hover {
    background-color: var(--submenu-hover-bg-color) !important;
    color: var(--submenu-hover-text-color) !important;
    font-weight: normal !important;
}