/* modul css */
@import url("module-css/01-header.css");
@import url("module-css/02-mobile-menu.css");
@import url("module-css/03-banner.css");
@import url("module-css/04-footer.css");
@import url("module-css/05-how-to.css");
@import url("module-css/06-solution.css");
@import url("module-css/07-services.css");
@import url("module-css/08-brand.css");
@import url("module-css/09-video.css");
@import url("module-css/10-payment.css");
@import url("module-css/11-testimonial.css");
@import url("module-css/12-faq.css");
@import url("module-css/13-newsletter.css");
@import url("module-css/14-about.css");
@import url("module-css/15-wallet.css");
@import url("module-css/16-blog.css");
@import url("module-css/17-contact.css");
@import url("module-css/18-spacing.css");

/*  */
@import url("01-global.css");
@import url("color.css");
@import url("responsive.css");
@import url("all.min.css");
@import url("fancy-box-carusol.css");
@import url("intlTelInput.min.css");

/* Font: Onest (preferred) - using local @font-face declarations below.
    External Google Fonts imports have been removed to prefer self-hosting for privacy and performance.
    If you want a web fallback, place the woff2 files into public/assets/themes/nova/fonts/ and add @font-face rules. */

@font-face {
    font-family: 'Onset';
    /* Use the variable weight TTF if present as a broad fallback */
    src: url('/assets/themes/nova/fonts/Onest-VariableFont_wght_0.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Specific weight files (place your font files in ../fonts/Onset/) */
@font-face {
    font-family: 'Onset';
    src: url('/assets/themes/nova/fonts/Onest-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onset';
    src: url('/assets/themes/nova/fonts/Onest-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onset';
    src: url('/assets/themes/nova/fonts/Onest-SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Font weight usage */
html, body {
    font-family: var(--site-font);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.micro-brand-text, .micro-lang-toggle .micro-lang-label {
    font-weight: 700;
}

:root {
    --site-font: 'Onset', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* About section: main title should be H4 and subtitle H5 */
.about .common-title h4 {
    font-size: 32px !important; /* main title (h4) */
    font-weight: 400 !important; /* thinner */
    line-height: 40px !important;
    margin: 0 0 10px 0 !important;
    color: #17A2BD !important; /* updated requested color */
}
.about .common-title h5 {
    /* subtitle (h5) - make black and match mission font size */
    font-size: 32px !important; /* match mission heading */
    font-weight: 600 !important;
    line-height: 40px !important;
    margin: 0 0 14px 0 !important;
    color: #000000 !important; /* black subtitle */
    letter-spacing: 0.4px !important; /* improved font spacing */
}

/* Make subtitle paragraph inherit mission/vision content sizing */
.about .common-title .common-subtitle,
.about .about-mission p,
.about .common-title p {
    font-size: 18px !important; /* match mission/vision content size */
    line-height: 28px !important;
    color: var(--bs-body-color, #333) !important;
    margin: 0 0 14px 0 !important;
    font-weight: 700 !important; /* make bolder */
    letter-spacing: 0.6px !important; /* increased letter spacing */
    padding: 6px 0 8px 0 !important; /* vertical padding for breathing room */
}

/* Mission & Vision icon styles (use same accent color as title) */
.about .about-mission h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #17A2BD !important; /* accent color */
    margin-bottom: 8px !important;
}
.about .about-mission h4 .mission-icon {
    font-size: 22px;
    color: #17A2BD !important;
    background: rgba(23,162,189,0.08);
    border-radius: 10px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.about .about-mission p {
    margin: 0;
    color: var(--bs-body-color, #333);
}

html, body {
    font-family: var(--site-font);
}
@import url("flaticon.css");
@import url("animate.css");
@import url("icomoon.css");
@import url("jquery.fancybox.min.css");
@import url("swiper.min.css");
@import url("rtl.css");
@import url("color-switcher-design.css");
@import url("elpath.css");
@import url("select2.min.css");
@import url("nice-select.css");
@import url("flatpickr-min.css");
@import url("odometer-theme-default.css");
@import url("owl.css");
@import url("magnific-popup.css");
@import url("intlTelInput.min.css");

/* ==================== Micro Topbar (Bootstrap-based) ==================== */
.micro-topbar {
    position: sticky; /* stays above main header */
    top: 0;
    z-index: 1035; /* above sticky header */
    backdrop-filter: saturate(130%) blur(6px);
        background: color-mix(
                in oklab,
                var(--bs-body-bg) 85%,
                transparent
        ); /* subtle glass */
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
    padding-block: 0.35rem;
}

 
/* --- New color variables (single place) --- */
:root{
    --c-ice:   #00BDFF;
    --c-bright:#00B8FA;
    --c-sky:   #00ACEE;
    --c-ceru:  #0097D9;
    --c-steel: #007BBD;
    --c-royal: #015597;
    --c-indigo:#01296B;
    --c-navy:  #022466;
}

/* Top Header — Luminous Ribbon */
.top-header{
    position: relative;
    color:#fff;
    /* stronger luminous ribbon: deeper stops and higher contrast on the left */
   
    box-shadow: 0 8px 34px rgba(2, 36, 102, 0.32);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.32s ease, box-shadow 0.28s ease;
}

.top-header::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    opacity:.7; pointer-events:none;
}

.top-header::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%);
    opacity:.6; pointer-events:none;
}

.top-header .nav{
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* safe fallback for browsers that don't support backdrop-filter */
.top-header:not(:has(> .nav)) .nav{
    background: rgba(255,255,255,0.02);
}

/* brand */
.micro-brand .micro-logo {
    width: 150px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

/* Features section image sizing and rounding (targeted override) */
.solution .solution-image img,
.solution-image img {
    width: 260px; /* increased size as requested */
    max-width: 100%;
    height: auto;
    border-radius: 14px; /* keep rounded corners */
    object-fit: cover; /* crop if necessary */
    display: block;
    margin: 0 auto; /* center in its column */
}

/* Responsive tweak: larger image on medium+ screens */
@media (min-width: 992px) {
    .solution .solution-image img,
    .solution-image img {
        width: 340px; /* larger on wide screens */
    }
}

.micro-brand .micro-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* logo colors reverted to original (removed forced white filter) */
}
.micro-brand .micro-logo {
    /* subtle shadow behind the logo for contrast */
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.micro-brand-text {
    color: var(--bs-body-color);
    font-weight: 600;
    line-height: 1;
}

/* links */
.micro-links a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease;
}
.micro-links a:hover,
.micro-links a:focus {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.15);
    border-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.35);
    text-decoration: none;
}

/* ---------- Navbar icon styles ---------- */
.main-menu .navigation .nav-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    vertical-align: middle;
    margin-inline-end: .5rem; /* LTR: gap between icon and label */
    margin-inline-start: .5rem; /* LTR: gap between icon and label */
    color: rgba(255,255,255,0.95);
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* Ensure pill-like nav items that are using nav-link/nav-btn-login have the
   same prominent blue gradient and proper icon spacing (matches login button style) */
.main-menu .navigation a.nav-link.nav-btn-login.has-icon,
.micro-links a.nav-link.nav-btn-login.has-icon {
    background: var(--gradient-1);
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(3,63,120,0.16);
}

.main-menu .navigation a.nav-link.nav-btn-login.has-icon .nav-icon,
.micro-links a.nav-link.nav-btn-login.has-icon .nav-icon {
    width: 18px; height: 18px; font-size: 18px; margin-inline-end: .6rem; color: #fff;
}

.main-menu .navigation .has-icon .nav-icon {
    opacity: .95;
}

.main-menu .navigation a.has-icon {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.main-menu .navigation a.has-icon:hover .nav-icon,
.main-menu .navigation a.has-icon:focus .nav-icon {
    transform: translateY(-2px) scale(1.03);
    color: #fff;
}

/* For RTL layouts, swap margin direction */
:root:dir(rtl) .main-menu .navigation .nav-icon { margin-inline-end: 0.5rem; margin-inline-start: .5rem; }
:root:dir(ltr) .main-menu .navigation .nav-icon { margin-inline-end: 0.5rem; margin-inline-start: .5rem; }

/* Mobile: slightly larger and block-friendly */
@media (max-width: 991.98px) {
    .main-menu .navigation .nav-icon { width: 20px; height: 20px; font-size: 20px; }
    .mobile-extra a .nav-icon { margin-inline-end: .6rem;  margin-inline-start: .6rem; }
}

/* Icon styling for header action buttons (Reports/Login) */
.main-menu .navigation .nav-btn-report .nav-icon,
.main-menu .navigation .nav-btn-login .nav-icon {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}


/* language dropdown button */
.micro-lang-toggle {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-radius: 0.6rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.6rem;
}

/* Centralized pill/button styles for specific header items (About, Personal, Business)
   These ensure pills match the main navigation font-size and behave like buttons. */
.main-menu .navigation .nav-pill {
    padding: 8px 14px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: #fff !important;
    font-weight: 700;
    font-size: 15px; /* match .main-menu .navigation>li>a */
    line-height: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.main-menu .navigation .nav-pill:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(1,24,48,0.28); }

/* Distinct gradients per pill type (useful to emphasize categories) */
.main-menu .navigation .fxcard-about{ background: var(--gradient-1); }
.main-menu .navigation .fxcard-personal{ background: var(--gradient-1); }
.main-menu .navigation .fxcard-business{ background: var(--gradient-1); }

/* Remove nav icon spacing for pills */
.main-menu .navigation .nav-pill .nav-icon{ display:inline-block; color: #fff; margin-inline-end: .5rem; }

/* Stronger pill/button text color and gradient enforcement */
.main-menu .navigation a.nav-pill,
.main-header .main-menu .navigation a.nav-pill,
.header-lower--fixed .main-menu .navigation a.nav-pill,
.micro-links a.nav-pill,
.micro-links .nav-pill {
    color: #fff !important;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.main-menu .navigation a.nav-pill .nav-icon,
.micro-links a.nav-pill .nav-icon {
    color: #fff !important;
}

/* If pills use distinct styles elsewhere, force the icon color too */
.fxcard-about, .fxcard-personal, .fxcard-business { color: #fff !important; }

/* Force envelope icon color and dropdown chevrons to white throughout the header */
.main-header .main-menu .navigation .fa-envelope,
.main-header .main-menu .navigation .fa-solid.fa-envelope,
.header-top--bg .micro-links .fa-envelope,
.main-header .main-menu .navigation .nav-link .dropdown-toggle::after,
.main-header .micro-links .nav-link .dropdown-toggle::after {
    color: #fff !important;
    fill: #fff !important;
}

/* Some chevrons are implemented as SVG or pseudo-element borders — force their color */
.main-header .main-menu .navigation .dropdown-toggle::after,
.main-header .micro-links .dropdown-toggle::after {
    border-color: #fff !important;
}

/* Make sure the envelope/nav contact icon is white in the main header (override any primary-color rules) */
.main-header .nav-icon.fa-envelope,
.main-header .nav-icon.fas.fa-envelope,
.main-header .nav-icon.far.fa-envelope,
.main-header .nav-icon.fa-solid.fa-envelope,
.header-top--bg .micro-links .nav-icon.fa-envelope,
.mobile-menu .nav-icon.fa-envelope {
    color: #fff !important;
    fill: #fff !important;
}

/* Surgical override for the ::before pseudo-element that some rules set to var(--primary-color) */
.main-header .nav-icon.fa-envelope::before,
.main-header .nav-icon.fas.fa-envelope::before,
.main-header .nav-icon.far.fa-envelope::before,
.header-top--bg .micro-links .nav-icon.fa-envelope::before,
.mobile-menu .nav-icon.fa-envelope::before {
    color: #fff !important;
    border-color: #fff !important;
}

/* Dropdown chevron pseudo-element: force white borders instead of theme text color variables */
.main-menu .navigation>li.dropdown>a:before,
.header-style-two .main-menu .navigation>li.dropdown>a:before,
.header-style-two .sticky-header  .main-menu .navigation>li.dropdown>a:before {
    border-top: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
}

/* When active/hover, use primary color for emphasis but keep base icon/chevron white */
.main-menu .navigation>li.current>a:before,
.main-menu .navigation>li>a:hover:before,
.main-menu .navigation>li>a.active:before {
    border-top-color: var(--primary-color) !important;
    border-left-color: var(--primary-color) !important;
}

/* === Additional overrides: force phone/contact icons and chevrons to match nav icons === */
/* Covers fontawesome classes, svg icons, inline svgs, and pseudo-elements used as chevrons */
.main-header .main-menu .navigation .fa-phone,
.main-header .main-menu .navigation .fas.fa-phone,
.main-header .main-menu .navigation .fal.fa-phone,
.main-header .main-menu .navigation .far.fa-phone,
.main-header .main-menu .navigation .fab .fa-phone,
.header-top--bg .micro-links .fa-phone,
.main-header .main-menu .navigation .contact-icon,
.micro-links .contact-icon,
.main-header .main-menu .navigation .nav-link .icon-phone {
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
}

/* Some themes use SVG for chevrons — force their stroke/fill */
.main-header .main-menu .navigation svg.chevron,
.main-header .micro-links svg.chevron,
.main-header .main-menu .navigation .dropdown-toggle svg,
.main-header .micro-links .dropdown-toggle svg {
    stroke: #fff !important;
    fill: #fff !important;
}

/* Pseudo-element chevrons implemented via borders (triangles) */
.main-header .main-menu .navigation .dropdown-toggle::after,
.main-header .micro-links .dropdown-toggle::after,
.main-header .main-menu .navigation .nav-link .dropdown-toggle::after {
    border-top-color: #fff !important;
}

/* Ensure hover/focus state keeps icons white */
.main-header .main-menu .navigation a:hover .fa-envelope,
.main-header .main-menu .navigation a:focus .fa-envelope,
.main-header .main-menu .navigation a:hover .fa-phone,
.main-header .main-menu .navigation a:focus .fa-phone,
.main-header .micro-links a:hover .fa-envelope,
.main-header .micro-links a:hover .fa-phone {
    color: #fff !important;
    fill: #fff !important;
}

/* Edge-case: inline <img> used as icon (e.g., contact image) - tint using filter if needed */
.main-header .main-menu .navigation img.icon-img,
.main-header .micro-links img.icon-img {
    filter: brightness(0) invert(1) saturate(200%);
}

/* Slightly increase link weight inside the top header to make it bolder visually */
.top-header .main-menu .navigation>li>a,
.top-header .main-menu .navigation>li>a { font-weight: 700; }

/* Micro topbar (micro-links) should show the same pill/button visuals when
   the helper outputs nav-pill classes for those items. */
.micro-links .nav-pill {
    padding: 6px 10px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: #fff !important;
    font-weight: 700;
    font-size: 15px; /* match nav */
    line-height: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.micro-links .nav-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(1,24,48,0.22); }
.micro-links .nav-pill .nav-icon { display: none; }
.micro-links .nav-pill .nav-icon { display:inline-block; color:#fff; margin-inline-end:.5rem; }

/* Make pill buttons match the login button gradient and sizing */
.main-menu .navigation .nav-pill,
.micro-links .nav-pill {
    background: linear-gradient(90deg, #0066FF, #0077FF);
    box-shadow: 0 6px 18px rgba(3,63,27,0.10);
    color: #fff !important;
}

.main-menu .navigation a.nav-pill,
.micro-links a.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.micro-links .fxcard-about{ background: linear-gradient(90deg,#0077FF,#0050B3); }
.micro-links .fxcard-personal{ background: linear-gradient(90deg,#00C2FF,#0077FF); }
.micro-links .fxcard-business{ background: linear-gradient(90deg,#00A3FF,#0066CC); }

/* Language flag styles and dropdown polish */
.micro-lang-flag {
    display: inline-block;
    width: 50px; /* updated to 50px per user request */
    height: auto;
    object-fit: cover;
}

.micro-lang-toggle .micro-lang-label{
    font-weight: 600;
    color: var(--bs-body-color);
}

.micro-lang-menu .dropdown-item img.micro-lang-flag{
    width: 50px;
    height: auto;
    margin-right: .6rem;
}

/* Slightly larger click target and consistent spacing */
.micro-lang-dropdown .micro-lang-toggle {
    padding: .35rem .6rem;
}

/* Ensure dropdown alignment in RTL */
:root:dir(rtl) .micro-lang-menu.dropdown-menu-end {
    left: 0;
    right: auto;
}

/* Ensure language labels and menu items are white on dark header backgrounds */
.micro-lang-toggle .micro-lang-label,
.micro-lang-quick .micro-lang-label,
.micro-lang-quick {
    color: #fff !important;
}
.micro-lang-dropdown .dropdown-toggle {
    color: #fff !important;
}
.micro-lang-menu .dropdown-item{
    color: #fff !important;
    background: transparent;
}
.micro-lang-menu .dropdown-item:hover{
    background: rgba(255,255,255,0.04);
    color: #fff !important;
}

/* mobile language links in header menu */
.mobile-langs a { color: #fff !important; }
.mobile-langs a:hover { color: #fff !important; opacity: 0.9; }

/* quick toggle when only 2 languages exist */
.micro-lang-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: var(--bs-body-color);
}

.micro-lang-quick img.micro-lang-flag{ width: 50px; height: auto; }

/* mobile language image in the mobile menu */
.mobile-langs img { width: 50px; height: auto; border-radius: 4px; }

/* Hide language title text as requested */
.micro-lang-label,
.micro-lang-menu .dropdown-item span,
.mobile-langs li span {
    display: none !important;
}

/* Responsive: scale down on small screens */
@media (max-width: 480px) {
    .micro-lang-flag, .micro-lang-menu .dropdown-item img.micro-lang-flag, .mobile-langs img {
        width: 64px;
    }
    /* For very small viewports, reduce dropdown min-width to avoid overflow */
    .micro-lang-menu { min-width: 8rem; }
}

/* dropdown menu */
.micro-lang-menu {
    border-radius: 0.8rem;
    min-width: 10rem;
}
.micro-lang-menu .dropdown-item {
    padding: 0.45rem 0.7rem;
}

/* spacing tuning on container row */
.micro-row {
    min-height: 38px;
}

/* Mobile tweaks */
@media (max-width: 991.98px) {
    .micro-topbar {
        padding-block: 0.45rem;
    }
    .micro-brand-text {
        font-size: 0.95rem;
    }
}

/* ==================== RTL/LTR polish ==================== */
/* Keep dropdown end aligned on both directions */
:root:dir(rtl) .dropdown-menu-end {
    --bs-position: end;
    right: auto;
    left: 0;
}
:root:dir(ltr) .dropdown-menu-end {
    --bs-position: end;
    right: 0;
    left: auto;
}

/* In RTL, ensure small visual balance */
:root:dir(rtl) .micro-brand {
    flex-direction: row-reverse;
}
:root:dir(rtl) .micro-brand .micro-brand-text {
    margin-inline: 0 0.1rem;
}

/* Responsive Floating WhatsApp Button */
.whatsapp-fab {
    position: fixed;
    bottom: 2vw; /* scales with screen width */
    inset-inline-end: 2vw; /* RTL/LTR friendly */
    width: clamp(44px, 6vw, 64px); /* min 44px, max 64px */
    height: clamp(44px, 6vw, 64px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25d366;
    color: #001b0e;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}
.whatsapp-fab i {
    font-size: clamp(20px, 3vw, 30px); /* responsive icon size */
    line-height: 1;
}

/* Extra tweaks for very small screens */
@media (max-width: 480px) {
    .whatsapp-fab {
        bottom: 16px;
        inset-inline-end: 16px;
    }
}

/* App download hero image sizing (Nova theme) */
.app-download-hero{
    width:100%;
    max-width:760px; /* good central size for hero (enlarged) */
    height:auto;
    border-radius:12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    display:block;
}

@media (max-width:991px){
    .app-download-hero{ max-width:420px; }
}

/* ===== Hero / Slider responsive fixes =====
   Reduce banner vertical space and cap image heights to avoid extra empty space
   while preserving responsive behavior. */
.banner-section{
    /* reduce default top/bottom padding for tighter header integration */
    padding: 60px 0 48px;
}
.banner-center-image-1 img,
.banner-section .hero-img img,
.banner-section .banner-center-image-1 img{
    width: 100%;
    height: auto;
    max-height: 520px; /* cap large hero images */
    object-fit: cover;
    display: block;
}

@media (max-width: 1200px) {
    .banner-section { padding: 48px 0 40px; }
    .banner-center-image-1 img { max-height: 420px; }
}

/* High-specificity override to ensure the tayaseer hero image is prominent on served CSS
   This wins over any earlier rules and any inline styles from the template. */
.banner-section.banner-section-one .app-download-hero{
    width:100% !important;
    max-width:760px !important;
    height:auto !important;
}
@media (min-width:1400px){
    .banner-section.banner-section-one .app-download-hero{ max-width:1200px !important; }
}
/* Medium screens (md): increase tayaseer hero image so it's more prominent on tablets/larger phones */
@media (min-width:768px) and (max-width:991px){
    .banner-section.banner-section-one .app-download-hero{ max-width:760px !important; }
}
@media (max-width: 767px) {
    .banner-section { padding: 40px 0 32px; }
    .banner-center-image-1 img { max-height: 320px; }
}

/* Ensure slider/carousel slides don't exceed their container and avoid extra gaps */
.swiper-slide, .carousel__slide { display: block; }
.carousel__slide img, .swiper-slide img { width:100%; height:auto; max-height:640px; object-fit:cover; }

/* Gradient colored span inside hero title (darker, richer stops for stronger contrast) */
.banner-section .content-box h1 span,
section.banner-section.banner-section-one .hero-ad .content-box h1 span {
    background: linear-gradient(90deg, #0077CC 0%, #15368A 60%, #0B1430 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback */
}

/* ===== Enforce pill/button gradient visuals (higher specificity) =====
   Use more specific selectors to override other theme rules that may set
   button backgrounds elsewhere. */
.header-lower--fixed .main-menu .navigation a.nav-pill,
.header-lower--fixed .micro-links a.nav-pill,
.main-header .main-menu .navigation a.nav-pill,
.main-header .micro-links a.nav-pill {
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(3,63,27,0.12) !important;
    border: 0 !important;
}
.header-lower--fixed .main-menu .navigation a.nav-pill .nav-icon,
.header-lower--fixed .micro-links a.nav-pill .nav-icon { color: #fff !important; }

/* Increase touch target on mobile for pill buttons */
@media (max-width: 767px) {
    .header-lower--fixed .main-menu .navigation a.nav-pill,
    .header-lower--fixed .micro-links a.nav-pill { padding: 12px 16px !important; }
}