/* =========================
   FONT COLORS
========================= */

:root{
    /* =========================
       CORE COLORS
    ========================= */
    --bg-white: #ffffff;
    --logo-color: #ffffff;
    --text-color: #1f2937;
    --heading-color: #0a2540;

    /* Brand / Theme */
    --header-footer: #1E3A8A;
    --main-btn: #991b1b;
    --premium-btn: #f59e0b;
    --btn-hover: #991b1b;

    /* Accent / Icons */
    --icon-gold: #f8ffe5;
    --icon-blue: #1e40af;
    --accent-blue: #2453ff;
    --accent-blue-hover: #1d48e5;

    /* Common */
    --white: #ffffff;
    --black: #111111;

    /* =========================
       TEXT SHADES
    ========================= */
    --text-dark: #0f172a;
    --text-muted: #5b6473;
    --text-muted-2: #6b7280;
    --text-muted-3: #4b5563;
    --text-gray: #666666;

    /* =========================
       BACKGROUNDS
    ========================= */
    --bg-light: #f5f7fb;
    --bg-light-2: #f7f7f8;
    --bg-light-3: #f6f6f6;
    --bg-light-4: #efefef;
    --bg-light-5: #f8f8f8;
    --bg-dark: #1E3A8A;
    --bg-dark-2: #a4d68;
    --bg-dark-badge: #1E3A8A;

    /* =========================
       BORDERS / DIVIDERS
    ========================= */
    --border-light: #d8d8d8;
    --border-light-2: #d9dde5;
    --border-light-3: #d7d7d7;
    --border-light-4: #d7dbe2;
    --border-light-5: #e5e5e5;
    --border-light-6: #e5e7eb;

    /* =========================
       HEADER / NAVBAR COLORS
    ========================= */
    --navbar-brand-color: #ffffff;
    --nav-link-color: #ffffff;
    --nav-link-hover-color: #F8FFE5;

    --navbar-toggler-bg: rgba(255, 255, 255, 0.12);
    --navbar-toggler-line: #ffffff;
    --header-divider-color: rgba(255, 255, 255, 0.18);

    --mobile-menu-bg: rgba(30, 64, 175, 0.96);
    --mobile-menu-link-border: rgba(255, 255, 255, 0.10);

    /* =========================
       BUTTON COLORS
    ========================= */
    --contact-btn-bg: var(--accent-blue);
    --contact-btn-hover-bg: #1d46e6;
    --contact-btn-text: #ffffff;
    --contact-btn-icon-bg: #ffffff;
    --contact-btn-icon-color: #111111;

    --theme-btn-bg: var(--main-btn);
    --theme-btn-text: #ffffff;
    --theme-btn-border: var(--main-btn);
    --theme-btn-overlay-bg: #ffffff;

    --theme-btn-icon-bg: #ffffff;
    --theme-btn-icon-color: var(--main-btn);

    --theme-btn-hover-text: var(--btn-hover);
    --theme-btn-hover-border: var(--btn-hover);
    --theme-btn-hover-icon-bg: var(--btn-hover);
    --theme-btn-hover-icon-color: #ffffff;

    /* =========================
       RGBA / GLASS / OVERLAYS
    ========================= */
    --white-92: rgba(255, 255, 255, 0.92);
    --white-95: rgba(255, 255, 255, 0.95);
    --white-94: rgba(255, 255, 255, 0.94);
    --white-88: rgba(255, 255, 255, 0.88);
    --white-82: rgba(255, 255, 255, 0.82);
    --white-38: rgba(255, 255, 255, 0.38);
    --white-18: rgba(255, 255, 255, 0.18);
    --white-14: rgba(255, 255, 255, 0.14);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-11: rgba(255, 255, 255, 0.11);
    --white-10: rgba(255, 255, 255, 0.10);
    --white-09: rgba(255, 255, 255, 0.09);
    --white-06: rgba(255, 255, 255, 0.06);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-04: rgba(255, 255, 255, 0.04);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-02: rgba(255, 255, 255, 0.02);

    --black-04: rgba(0, 0, 0, 0.04);
    --black-08: rgba(0, 0, 0, 0.08);
    --black-18: rgba(0, 0, 0, 0.18);
    --black-20: rgba(0, 0, 0, 0.20);
    --black-22: rgba(0, 0, 0, 0.22);
    --black-25: rgba(0, 0, 0, 0.25);
    --black-80: rgba(0, 0, 0, 0.80);

    --brand-blue-04: rgba(30, 64, 175, 0.04);
    --brand-blue-05: rgba(30, 64, 175, 0.05);
    --brand-blue-96: rgba(30, 64, 175, 0.96);

    --accent-blue-10: rgba(36, 83, 255, 0.10);
    --accent-blue-18: rgba(36, 83, 255, 0.18);
    --accent-blue-25: rgba(36, 83, 255, 0.25);
    --accent-blue-28: rgba(36, 83, 255, 0.28);
    --accent-blue-30: rgba(36, 83, 255, 0.30);

    --gold-16: rgba(245, 158, 11, 0.16);
    --gold-18: rgba(245, 158, 11, 0.18);
    --gold-22: rgba(245, 158, 11, 0.22);
    --gold-28: rgba(245, 158, 11, 0.28);
    --gold-30: rgba(245, 158, 11, 0.30);

    --heading-shadow-06: rgba(10, 37, 64, 0.06);
    --heading-shadow-08: rgba(10, 37, 64, 0.08);
    --heading-shadow-10: rgba(10, 37, 64, 0.10);
    --heading-shadow-12: rgba(10, 37, 64, 0.12);
    --heading-shadow-14: rgba(10, 37, 64, 0.14);
    --heading-shadow-16: rgba(10, 37, 64, 0.16);
    --heading-shadow-18: rgba(10, 37, 64, 0.18);
    --heading-shadow-22: rgba(10, 37, 64, 0.22);

    /* =========================
       SHADOWS
    ========================= */
    --shadow-brand-icon: 0 12px 28px rgba(245, 158, 11, 0.35);
    --shadow-contact-btn: 0 12px 28px rgba(36, 83, 255, 0.35);
    --shadow-theme-btn: 0 12px 28px rgba(234, 88, 12, 0.35);
    --shadow-mobile-menu: 0 18px 40px rgba(0, 0, 0, 0.22);

    /* =========================
       BORDER RADIUS
    ========================= */
    --radius-pill: 999px;
    --radius-lg: 20px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-xs: 10px;

    /* =========================
       TRANSITIONS
    ========================= */
    --transition-default: 0.3s ease;
    --transition-smooth: 0.35s ease;
    --transition-overlay: 0.45s ease;

    /* =========================
       EXTRA OVERLAYS / EFFECT COLORS
    ========================= */
    --hero-overlay-dark-40: rgba(2, 22, 35, 0.40);
    --hero-overlay-dark-00: rgba(2, 22, 35, 0);
    --hero-overlay-dark-80: rgba(2, 22, 35, 0.80);

    --hero-overlay-blue-22: rgba(10, 37, 64, 0.22);
    --hero-overlay-blue-38: rgba(10, 37, 64, 0.38);
    --hero-overlay-blue-00: rgba(10, 37, 64, 0);

    --services-overlay-dark-90: rgba(2, 22, 35, 0.90);
    --service-text-light-88: rgba(255, 255, 255, 0.88);

    --why-review-border: rgba(15, 23, 42, 0.05);

    --story-overlay-dark-40: rgba(7, 18, 32, 0.40);
    --story-overlay-top-82: rgba(7, 18, 32, 0.82);
    --story-overlay-top-08: rgba(7, 18, 32, 0.08);
    --story-overlay-top-04: rgba(7, 18, 32, 0.04);

    --story-black-overlay-34: rgba(0, 0, 0, 0.34);
    --story-black-overlay-14: rgba(0, 0, 0, 0.14);
    --story-black-overlay-26: rgba(0, 0, 0, 0.26);

    --stats-number-color: #081b2d;
    --case-card-fallback-bg: #dddddd;

    --faq-badge-shadow: rgba(15, 23, 42, 0.06);
    --faq-item-border: rgba(15, 23, 42, 0.04);
    --testimonial-badge-shadow: rgba(15, 23, 42, 0.05);

    --contact-shell-dark-1: rgba(2, 18, 35, 0.96);
    --contact-shell-dark-2: rgba(2, 30, 56, 0.96);
    --contact-shell-dark-3: rgba(4, 27, 48, 0.96);

    --contact-user-border: #1E3A8A;

    --contact-form-glass-1: rgba(60, 78, 93, 0.78);
    --contact-form-glass-2: rgba(40, 59, 74, 0.84);

    /* =========================
       FOOTER VARIABLES
    ========================= */
    --footer-shell-dark-1: rgba(2, 20, 36, 0.96);
    --footer-shell-dark-2: rgba(4, 24, 41, 0.94);
    --footer-shell-dark-3: rgba(2, 18, 33, 0.96);
    --footer-shell-bg: linear-gradient(
        135deg,
        #1E3A8A 0%,
        #162D63 50%,
        #0A1022 100%
    );
    --footer-shell-shadow: 0 25px 60px var(--black-18);

    --footer-glow-blue-1: rgba(58, 119, 255, 0.16);
    --footer-glow-blue-2: rgba(58, 119, 255, 0.10);
    --footer-glow-white: rgba(255, 255, 255, 0.03);

    --footer-text-strong: rgba(255, 255, 255, 0.94);
    --footer-text-soft: rgba(255, 255, 255, 0.82);
    --footer-placeholder: rgba(255, 255, 255, 0.38);
    --footer-link-hover: #f8ffe5;

    --footer-divider: rgba(255, 255, 255, 0.10);
    --footer-social-border: rgba(255, 255, 255, 0.18);
    --footer-social-bg: rgba(255, 255, 255, 0.02);

    --footer-input-bg: rgba(255, 255, 255, 0.09);
    --footer-contact-box-bg: rgba(255, 255, 255, 0.10);
    --footer-contact-divider: rgba(255, 255, 255, 0.12);

    --footer-newsletter-btn-shadow: 0 10px 22px rgba(36, 83, 255, 0.28);
    --footer-contact-icon-shadow: 0 10px 24px rgba(36, 83, 255, 0.25);

    /* =========================
       SERVICE SIDEBAR / WIDGET
    ========================= */
    --service-widget-heading-bg: #1f49e0;
    --service-widget-border: #e5e5e5;
    --service-widget-link-hover: #1f49e0;
    --service-widget-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    --service-contact-overlay-dark: rgba(0, 0, 0, 0.80);
    --service-contact-overlay-light: rgba(0, 0, 0, 0.20);
    
/* =========================
   CONTACT PAGE VARIABLES
========================= */
--contact-text-soft: #5f6b7a;
--contact-text-light: #7a8492;

--contact-divider: #d9dee6;
--contact-divider-light: #e6ebf1;

--contact-input-bg: #f5f6f8;
--contact-placeholder: #6f7a87;
--contact-form-border: #edf1f5;

--contact-focus-ring: rgba(36, 83, 255, 0.08);
--contact-icon-shadow-color: rgba(36, 83, 255, 0.22);

    /* Extra UI colors */
    --white: #ffffff;
    --black: #000000;

    --text-dark: #0f172a;
    --text-muted: #5b6473;
    --text-muted-2: #6b7280;
    --text-muted-3: #4b5563;
    --text-dark-2: #081b2d;
    --text-dark-3: #111827;

    --primary-blue: #2453ff;
    --primary-blue-hover: #1d48e5;

    --light-bg: #f5f7fb;
    --light-bg-2: #f6f6f6;
    --light-card: #efefef;
    --light-border: #d9dde5;
    --light-border-2: #d7d7d7;
    --light-border-3: #d7dbe2;
    --light-divider: #e5e7eb;

    --dark-navy: #082238;
    --dark-navy-2: #0d2238;

    /* Overlay / alpha colors */
    --white-95: rgba(255,255,255,0.95);
    --white-92: rgba(255,255,255,0.92);
    --white-18: rgba(255,255,255,0.18);
    --white-14: rgba(255,255,255,0.14);
    --white-12: rgba(255,255,255,0.12);
    --white-10: rgba(255,255,255,0.10);
    --white-06: rgba(255,255,255,0.06);
    --white-05: rgba(255,255,255,0.05);
    --white-04: rgba(255,255,255,0.04);

    --black-04: rgba(0,0,0,0.04);
    --black-05: rgba(0,0,0,0.05);
    --black-14: rgba(0,0,0,0.14);
    --black-18: rgba(0,0,0,0.18);
    --black-22: rgba(0,0,0,0.22);
    --black-25: rgba(0,0,0,0.25);
    --black-26: rgba(0,0,0,0.26);
    --black-34: rgba(0,0,0,0.34);
    --black-40: rgba(0,0,0,0.40);

    --shadow-blue-soft: rgba(10,37,64,0.08);
    --shadow-blue: rgba(10,37,64,0.10);
    --shadow-blue-medium: rgba(10,37,64,0.12);
    --shadow-blue-strong: rgba(10,37,64,0.14);
    --shadow-blue-heavy: rgba(10,37,64,0.18);

    --shadow-primary: rgba(36,83,255,0.18);
    --shadow-primary-strong: rgba(36,83,255,0.28);

    --border-soft: rgba(15,23,42,0.04);
    --border-soft-2: rgba(15,23,42,0.05);
    --shadow-soft: rgba(15,23,42,0.06);
    
/* =========================
   WHATSAPP FLOAT BUTTON
========================= */
--whatsapp-btn-bg: #25d366;
--whatsapp-btn-bg-hover: #1ebe5b;
--whatsapp-btn-icon-color: var(--white);
--whatsapp-btn-shadow: 0 14px 34px rgba(37, 211, 102, 0.34);
--whatsapp-btn-ring: rgba(37, 211, 102, 0.18);

--mobile-sidebar-bg: linear-gradient(
    180deg,
    rgba(7, 16, 35, 0.96),
    rgba(10, 22, 48, 0.98)
);
--mobile-sidebar-border: rgba(255,255,255,0.08);
--mobile-sidebar-shadow: 25px 0 60px rgba(0,0,0,0.35);
--mobile-sidebar-text: var(--white);

--contact-shell-bg: linear-gradient(
    90deg,
    #1E3A8A 0%,
    #1E3A8A 100%


);


--mail-red: #991b1b;
--mail-red-25: rgba(153, 27, 27, 0.25);
--mail-red-18: rgba(153, 27, 27, 0.18);
--mail-red-10: rgba(153, 27, 27, 0.10);
}



/* =========================
   FONT SIZES
========================= */

:root{
    --heading-xl: 40px;   /* Hero */
    --heading-lg: 30px;   /* Section Headings */
    --heading-md: 22px;   /* Card Headings */
    --heading-sm: 18px;   /* Small Headings */
    
        /* Text */
    --text-lg: 17px;
    --text-md: 16px;
    --text-sm: 15px;
    --text-xs: 14px;
    --text-xxs: 13px;
    --text-mini: 12px;
    --text-tiny: 11px;
    --text-micro: 10px;
}


/* =========================
   MOBILE SIDEBAR
========================= */
--mobile-sidebar-link: var(--accent-blue);
--mobile-sidebar-link-hover: var(--icon-blue);

--mobile-sidebar-hover-bg: rgba(30, 64, 175, 0.08);

--mobile-sidebar-indicator-start: var(--accent-blue);
--mobile-sidebar-indicator-end: var(--icon-blue);

--mobile-sidebar-card-border: rgba(30, 64, 175, 0.08);
--mobile-sidebar-card-shadow: rgba(30, 64, 175, 0.06);

--mobile-sidebar-header-bg: linear-gradient(180deg, #ffffff, #f8fbff);
--mobile-sidebar-divider: rgba(30, 64, 175, 0.12);