#page-home .menu-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Prevent overflow */
    background: rgba(0, 0, 0, 0); /* Semi-transparent */
    backdrop-filter: blur(5px); /* Glass effect */
    color: white;
    padding: 10px 20px; /* Add padding for inner spacing */
    box-sizing: border-box; /* Keep everything within the defined width */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensure content alignment */
    z-index: 9999 !important; /* Increase z-index to ensure it appears on top */
}

/* Target only main links (direct children) */
#page-home .menu-nav .navigation > li > a {
    color: gold !important;
    text-decoration: none;
    padding: 10px 15px; /* Uniform padding for clickable area */
    display: inline-block;
}

/* Hover effect for main links */
#page-home .menu-nav .navigation > li > a:hover {
    color: white !important;
}

/* Change color for the active main link */
#page-home .menu-nav .navigation > li.active > a {
    color: white !important;
    font-weight: bold;
}

/* Keep sub-menu links unchanged */
#page-home .menu-nav .navigation .sub-menu a {
    color: black;
}

/* Header contact styling */
#page-home .header-contact-two .content span,
#page-home .header-contact-two .content a {
    color: gold !important;
    text-decoration: none;
}

/* Optional: Add hover effect for the link */
#page-home .header-contact-two .content a:hover {
    color: #ddd !important;
}

/* Fix dropdown positioning and visibility */
#page-home .language-switcher {
    position: relative;
    z-index: 999; /* Ensure it's above other elements */
}

#page-home .menu-nav.scrolled {
    background: white !important;
    transition: background 0.3s ease;
}

#page-home .menu-nav.scrolled .navigation > li > a {
    color: black !important; /* Dark links on white */
}

#page-home .menu-nav.scrolled .navigation > li.active > a {
    color: #b8860b !important;
}

html[lang="en"] #page-home .menu-nav{
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent */
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
    #page-home .menu-nav {
        display: none; /* Hide navbar on mobile */
    }
}

/*******************************sidebar override***************************************/
.extra-info {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 320px;
  background: #fff;
  overflow-y: auto;
  z-index: 10001; /* Always above navbar */
  transform: translateX(100%); /* Start off-screen */
  transition: transform 0.3s ease-in-out;
}

/* When active, slide into view */
.extra-info.active {
  transform: translateX(0); /* Slide in */
}

/* RTL (Arabic) slides from the left */
html[dir="rtl"] .extra-info {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}
html[dir="rtl"] .extra-info.active {
  transform: translateX(0);
}

/* LTR (English) slides from the right */
html[dir="ltr"] .extra-info {
  right: 0;
  left: auto;
}

/*-----------------------------------hovered box--------------------------------------------------*/
.slider-content {
    position: relative;
    display: inline-block;
    padding: 20px;
    z-index: 999; /* Ensure it’s above other floating elements */
    pointer-events: auto; /* Ensure it can capture hover events */
}

.slider-content::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    opacity: 1;
    transition: background 0.3s ease-in-out;
    pointer-events: none;
    z-index: -1;
}

.slider-content:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

.slider-content h2.title,
.slider-content span.sub-title {
    color: gold;
    transition: color 0.3s ease-in-out;
    z-index: 2;
    position: relative;
}

.slider-content:hover h2.title,
.slider-content:hover span.sub-title {
    color: #ffd700;
}

.slider-content p {
    color: white;
}

/* Fix floating element interference */
.slider-shape {
    pointer-events: none; /* Prevent it from capturing hover events */
    z-index: 0; /* Keep it behind the content */
}

/*-------------------------------services--------------------------------------*/
#page-home > section.section > main > div > section.services-area.services-bg > div > div.row.justify-content-center > div > div > h2 {
    color: #b8860b !important; /* Change 'gold' to any color you prefer */
}
/*-------------------------------logo banner--------------------------------------*/
/* Slider Shape Styling */
.slider-shape {
    position: absolute !important;
    left: 0 !important;
    top: 40% !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

.slider-shape img {
    position: absolute !important;
    left:10% !important;
    top: 0 !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
    
    /* Add float animation */
    animation: floatUpDown 2s ease-in-out infinite;
}

/* Keyframe animation */
@keyframes floatUpDown {
    0%, 100% {
        top: 50%; /* Starting and ending position */
    }
    50% {
        top: 45%; /* Moves up */
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .slider-shape {
        display: none !important; /* Hide on mobile */
    }
}
/*******************************why choose us***************************************/
.choose-content-two,
.choose-content-two h2,
.choose-content-two span,
.choose-content-two p,
.choose-content-two .circle-content,
.choose-content-two .circle-content p,
.choose-content-two .circle-content .percentage {
    color: #b8860b !important;
}


/*******************************slider image 100%***************************************/
.single-slider {
    height: 100vh !important;
    min-height: 100vh;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    display: flex; 
    align-items: center; /* Optional — vertically center content */
}