/*header.css*/
/* Global styles */
* {
    box-sizing: border-box; /* Ensure consistent box sizing */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default paddings */
}

body {
    font-family: Arial, sans-serif; /* Set default font */
}

/* Header styles */
.site-header {
    background-color: #3d52a0; /* Header background */
    color: white;
    
    top: 0;
    z-index: 1000;
    position: sticky;
}

/* Flex container */
.header-container {
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Space out items */
    align-items: center; /* Center items vertically */
    max-width: 1200px; /* Limit max width */
    margin: auto; /* Center container */
    padding: 10px 20px; /* Padding around header */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Logo and tagline styles */
.logo-tagline-container {
    display: flex; /* Flex display */
    align-items: center; /* Align vertically */
}

.logo img {
    max-height: 50px; /* Limit logo height */
    margin-right: 10px; /* Space between logo and tagline */
}

.site-tagline {
    font-size: 14px; /* Smaller text size for tagline */
    color: white; /* Text color */
    font-weight: 300; /* Light font weight */
}

/* Navigation styling */
.site-navigation ul {
    list-style: none; /* Remove bullet points */
    display: flex; /* Horizontal layout for navigation */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.site-navigation li {
    margin: 0 15px; /* Space between menu items */
}

.site-navigation a {
    color: white; /* Link color */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Font size for links */
}

/* Header icons styling */
.header-right-icons {
    display: flex; /* Flex display for icon alignment */
    align-items: center; /* Center icons vertically */
}

.header-right-icons ul {
    list-style: none; /* Remove bullet points */
    display: flex; /* Horizontal layout */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.header-right-icons li {
    margin: 0 10px; /* Space between icons */
}

.header-right-icons a {
    color: white; /* Icon color */
    text-decoration: none; /* Remove underline */
    font-size: 24px; /* Icon size */
}

/* Hover effect */
.header-right-icons i:hover {
    transform: scale(1.2); /* Slightly enlarge the icon on hover */
    color: #ffffff; /* Change color on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Optional active state */
.header-right-icons i:active {
    transform: scale(1.1); /* Slightly shrink when clicked */
    color: #567ac8; /* Change color when active */
}

/* Hamburger menu styles */
.hamburger {
    display: none; /* Hidden by default */
    flex-direction: column; /* Stack lines vertically */
    cursor: pointer; /* Pointer cursor on hover */
}

.hamburger span {
    height: 3px; /* Height of each line */
    width: 25px; /* Width of each line */
    background-color: white; /* Color of the lines */
    margin: 3px 0; /* Space between lines */
    transition: 0.4s; /* Smooth transition */
}

/* Mobile menu styles */
#mobile-menu {
    display: none; /* Hide menu by default */
    flex-direction: column; /* Stack items vertically */
    width: 100%; /* Full width */
    background-color: #3d52a0; /* Match header background */
    position: absolute; /* Position below the header */
    top: 60px; /* Adjust based on header height */
    left: 0; /* Align to the left */
    z-index: 10; /* On top of other content */
}

/* Mobile menu links */
#mobile-menu ul {
    padding: 10px 0; /* Add some vertical padding */
}

#mobile-menu li {
    margin: 10px 0; /* Space between items */
}

#mobile-menu a {
    color: white; /* Set link color to white for visibility */
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Adjust font size if needed */
}

/* Close button styles */
.mobile-menu-close {
    font-size: 30px; /* Adjust size as needed */
    color: white; /* Match with your theme */
    cursor: pointer; /* Show pointer on hover */
    padding: 10px; /* Padding around the button */
    text-align: center; /* Center the close icon */
}

/* Responsive styles */
@media (max-width: 768px) {
    .hamburger {
        display: flex; /* Show hamburger on mobile */
    }

    .site-navigation {
        display: none; /* Hide navigation by default on mobile */
    }

    /* Show mobile menu when toggled */
    #mobile-menu.active {
        display: flex; /* Show menu */
    }

    /* Hide the header icons in mobile view */
    .header-right-icons {
        display: none; /* Hide icons on mobile */
    }
   
}

/* Optional: Animation for hamburger icon when active */
.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px); /* Top line rotates */
}

.hamburger.active span:nth-child(2) {
    opacity: 0; /* Middle line disappears */
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px); /* Bottom line rotates */
}
.site-navigation a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color 0.3s ease-in-out;
}

/* Active link styling for WordPress current menu item */
.site-navigation .current-menu-item a,
.site-navigation a:hover {
    color: #ffffff;
}

.site-navigation .current-menu-item a::after,
.site-navigation a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, #42a5f5, #00c6ff);
    border-radius: 3px;
    transition: width 0.4s ease-in-out;
    width: 100%;
}

.site-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, #42a5f5, #00c6ff);
    border-radius: 3px;
    width: 0;
    transition: width 0.4s ease-in-out;
}
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px; /* Add space between the icon and dropdown */
}

.language-switcher i {
    font-size: 20px; /* Adjust the icon size */
    color: #fff; /* Change this to match your theme (e.g., white if needed) */
}
/* Language switcher styling */
.language-switcher-large {
    display: inline-block; /* Default visible on large screens */
}

.language-switcher-mobile {
    display: none; /* Hidden by default */
    text-align: center;
    margin: 15px 0;
}

/* Responsive styles */
@media (max-width: 768px) {
    .language-switcher-large {
        display: none; /* Hide on small screens */
    }

    .language-switcher-mobile {
        display: block; /* Show inside mobile menu */
    }
}