/* ==========================================================================
   مَعين — UI/UX polish layer (loaded LAST, overrides base theme)
   Brand: AQUA #00C6E4 · NAVY #0D1B2A · TEAL #009DB0 · SKY #6FB7D9
   ========================================================================== */

:root{
    --mn-aqua:#00C6E4; --mn-navy:#0D1B2A; --mn-teal:#009DB0; --mn-sky:#6FB7D9;
    --mn-grad:linear-gradient(135deg,#00C6E4 0%,#009DB0 55%,#0D1B2A 100%);
    --mn-grad-soft:linear-gradient(135deg,#00C6E4 0%,#009DB0 100%);
}

/* ---- Phone numbers & emails must read left-to-right inside RTL ---- */
a[href^="tel:"], .wasila-footer-contact-value, .contact-value-ltr,
.wasila-footer-contact-item a[href^="tel:"]{
    direction:ltr !important;
    unicode-bidi:plaintext;
    display:inline-block;
}

/* ---- HERO: brand background image + readable overlay ---- */
.hero-section{
    position:relative;
    background:
        linear-gradient(135deg, rgba(13,27,42,.82) 0%, rgba(0,157,176,.40) 48%, rgba(13,27,42,.86) 100%),
        url('/images/maeyn-hero.jpg') center 30%/cover no-repeat;
    background-color:#0D1B2A;
}
.hero-section .hero-overlay{
    background:radial-gradient(120% 120% at 50% 40%, rgba(13,27,42,0) 0%, rgba(13,27,42,.35) 100%);
}
.hero-title{ text-shadow:0 4px 24px rgba(0,0,0,.45); letter-spacing:.5px; }
.hero-subtitle{ text-shadow:0 2px 12px rgba(0,0,0,.4); }

/* Primary CTA = brand aqua→teal (never gold) */
.btn-hero-primary, .btn-hero-primary:focus{
    background:var(--mn-grad-soft) !important;
    border:none !important; color:#fff !important;
    box-shadow:0 10px 28px rgba(0,198,228,.32) !important;
}
.btn-hero-primary:hover{
    background:linear-gradient(135deg,#00b4d0 0%,#008196 100%) !important;
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(0,198,228,.42) !important;
}
.btn-hero-secondary{
    background:rgba(255,255,255,.10) !important;
    border:1.5px solid rgba(255,255,255,.55) !important; color:#fff !important;
    backdrop-filter:blur(4px);
}
.btn-hero-secondary:hover{ background:rgba(255,255,255,.20) !important; transform:translateY(-2px); }

/* ---- SERVICE cards: premium image display + lift on hover ---- */
.service-image-wrapper{
    height:250px; overflow:hidden; position:relative;
    background:var(--mn-grad);
}
.service-image{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .service-image{ transform:scale(1.06); }
.service-card{
    border:1px solid rgba(0,198,228,.10);
    border-radius:18px; overflow:hidden; background:#fff;
    box-shadow:0 8px 28px rgba(13,27,42,.10);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 50px rgba(13,27,42,.18);
    border-color:rgba(0,198,228,.35);
}

/* ---- Section rhythm & titles ---- */
.section{ padding-top:5.5rem; padding-bottom:5.5rem; }
.section-title{ font-weight:800; color:var(--mn-navy); position:relative; }
.section-title::after{
    content:""; display:block; width:74px; height:4px; margin:14px auto 0;
    background:var(--mn-grad-soft); border-radius:4px;
}
.section-subtitle{ color:#5A6B7D; max-width:640px; margin-inline:auto; }

/* ---- Buttons everywhere: brand, never gold ---- */
.btn-primary, .btn-order, .order-btn{
    background:var(--mn-grad-soft) !important; border:none !important; color:#fff !important;
}
.btn-primary:hover, .btn-order:hover, .order-btn:hover{
    background:linear-gradient(135deg,#00b4d0,#008196) !important;
}

/* ---- Contact info cards ---- */
.contact-info .contact-item i, .wasila-footer-contact-icon{
    background:var(--mn-grad-soft) !important;
    -webkit-background-clip:initial; color:#fff !important;
}

/* ---- Portfolio / works marquee polish ---- */
.wowar-track img, .wow-track img, .portfolio-item img{
    border-radius:14px; box-shadow:0 10px 26px rgba(13,27,42,.16);
}

/* ---- Header active pill uses brand aqua ---- */
.wasila-nav-link.active, .wasila-nav-link:hover{ color:var(--mn-teal); }
.wasila-nav-icon{ color:var(--mn-aqua) !important; }

/* ---- Mobile spacing ---- */
@media (max-width:768px){
    .section{ padding-top:3.5rem; padding-bottom:3.5rem; }
    .hero-title{ font-size:2rem; }
}