html { scroll-behavior: smooth; }

#navbar { transition: background 0.3s, box-shadow 0.3s; }
#navbar.scrolled { background: #0d1f3c !important; box-shadow: 0 2px 24px rgba(0,0,0,0.25); }

#mobile-menu { transition: max-height 0.35s ease, opacity 0.3s; max-height: 0; overflow: hidden; opacity: 0; }
#mobile-menu.open { max-height: 600px; opacity: 1; }

.sector-card { transition: transform 0.3s, box-shadow 0.3s; }
.sector-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.13); }
.sector-card:hover .sector-icon { background: #c9a227 !important; }
.sector-card:hover .learn-link { color: #c9a227; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.nav-link::after {
    content: ''; 
    display: block; 
    height: 2px; 
    background: #c9a227;
    transform: scaleX(0); 
    transition: transform 0.25s;
    margin-top: 2px; 
    border-radius: 2px;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.menuber ul li{
    display: flex;
}

/* ==========================================================================
   Highlights / Client Experiences Slider & Modern Arrow Styles
   ========================================================================== */
.highlights-section {
    background: #0d1f3c;
    background: linear-gradient(180deg, #0d1f3c 0%, #071326 100%);
}

/* Slick Carousel Structure */
.highlights-slider {
    position: relative;
    padding: 10px 0;
}

.highlights-slider .slick-slide {
    padding: 0 10px;
    height: auto;
    outline: none !important;
}

.highlights-slider .slick-list {
    margin: 0 -10px;
    padding: 10px 0 !important;
    overflow: hidden;
}

.highlights-slider .slick-track {
    display: flex !important;
    align-items: center !important;
}

/* Pristine White Logo Card */
.highlight-card {
    background: #ffffff;
    height: 190px;
    border-radius: 6px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-sizing: border-box;
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    border-color: #c9a227;
}

/* Logo image inside card */
.highlight-card img {
    max-height: 150px;
    max-width: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.highlight-card:hover img {
    transform: scale(1.05);
}

/* Suppress all default slick arrow pseudo-elements */
.slick-prev:before,
.slick-next:before,
.highlights-slider .slick-prev:before,
.highlights-slider .slick-next:before {
    display: none !important;
    content: '' !important;
}

/* Modern Circular Arrow Controls */
.highlights-slider .custom-arrow {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #0d1f3c !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 30 !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    padding: 0 !important;
}

.highlights-slider .custom-arrow svg {
    width: 22px;
    height: 22px;
    stroke: #0d1f3c;
    transition: all 0.25s ease;
    display: block;
}

/* Left & Right Arrow Positions */
.highlights-slider .custom-arrow-prev {
    left: -24px !important;
}

.highlights-slider .custom-arrow-next {
    right: -24px !important;
}

/* Hover & Active States */
.highlights-slider .custom-arrow:hover {
    background: #c9a227 !important;
    border-color: #c9a227 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(201, 162, 39, 0.55) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.highlights-slider .custom-arrow:hover svg {
    stroke: #ffffff;
}

.highlights-slider .custom-arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Mobile & Tablet Adjustments */
@media screen and (max-width: 768px) {
    .highlights-slider .custom-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    .highlights-slider .custom-arrow svg {
        width: 18px;
        height: 18px;
    }
    .highlights-slider .custom-arrow-prev {
        left: -14px !important;
    }
    .highlights-slider .custom-arrow-next {
        right: -14px !important;
    }
    .highlight-card {
        height: 140px;
        padding: 12px 16px;
        border-radius: 6px;
    }
    .highlight-card img {
        max-height: 105px;
    }
}

/* Arabic Typography & Design Enhancements */
.font-arabic {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
}

body.font-arabic {
    letter-spacing: normal !important;
}

body.font-arabic .tracking-widest,
body.font-arabic .tracking-wider,
body.font-arabic .tracking-wide {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.font-arabic h1,
body.font-arabic h2,
body.font-arabic h3,
body.font-arabic h4,
body.font-arabic h5,
body.font-arabic h6 {
    line-height: 1.35 !important;
}

/* In Arabic mode, form inputs text align appropriately */
body.font-arabic input:not([type="email"]):not([type="file"]):not([dir="ltr"]),
body.font-arabic textarea:not([dir="ltr"]) {
    text-align: right;
}