/*==================================================
 QMS CORPORATE WEBSITE
 Variables.css
 Version : 1.0
==================================================*/

/*==============================
Google Fonts
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/*==============================
CSS VARIABLES
==============================*/
:root{

    /* Colors */
    --primary:#0E3A59;
    --primary-light:#15527C;
    --primary-dark:#07273D;

    --secondary:#00C6B7;
    --secondary-light:#5CE1E6;
    --secondary-dark:#00998C;

    --accent:#5CE1E6;

    --success:#00C853;
    --warning:#FFC107;
    --danger:#FF5252;
    --info:#29B6F6;

    --dark:#09141F;
    --dark-2:#102030;
    --dark-3:#172B3C;

    --white:#ffffff;

    --gray-50:#FAFBFC;
    --gray-100:#F5F7FA;
    --gray-200:#E9EDF2;
    --gray-300:#D8E0E8;
    --gray-400:#B5C1CE;
    --gray-500:#8D99A6;
    --gray-600:#6C7A89;
    --gray-700:#4F5D6B;
    --gray-800:#36414D;
    --gray-900:#1E252C;

    /* Gradients */

    --gradient-primary:
    linear-gradient(
    135deg,
    #0E3A59 0%,
    #15527C 50%,
    #00C6B7 100%);

    --gradient-secondary:
    linear-gradient(
    135deg,
    #5CE1E6,
    #00C6B7);

    --gradient-dark:
    linear-gradient(
    135deg,
    #09141F,
    #102030);

    --gradient-glass:
    linear-gradient(
    rgba(255,255,255,.18),
    rgba(255,255,255,.05));

    /* Typography */

    --heading-font:'Plus Jakarta Sans',sans-serif;
    --body-font:'Inter',sans-serif;

    --fs-12:.75rem;
    --fs-13:.813rem;
    --fs-14:.875rem;
    --fs-15:.938rem;
    --fs-16:1rem;
    --fs-18:1.125rem;
    --fs-20:1.25rem;
    --fs-24:1.5rem;
    --fs-28:1.75rem;
    --fs-32:2rem;
    --fs-40:2.5rem;
    --fs-48:3rem;
    --fs-56:3.5rem;
    --fs-64:4rem;

    /* Font Weight */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extra:800;

    /* Spacing */

    --space-4:4px;
    --space-8:8px;
    --space-12:12px;
    --space-16:16px;
    --space-20:20px;
    --space-24:24px;
    --space-32:32px;
    --space-40:40px;
    --space-48:48px;
    --space-56:56px;
    --space-64:64px;
    --space-72:72px;
    --space-80:80px;
    --space-96:96px;
    --space-120:120px;

    /* Border Radius */

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-2xl:30px;
    --radius-circle:50%;
    --radius-pill:999px;

    /* Shadows */

    --shadow-sm:
    0 5px 15px rgba(0,0,0,.08);

    --shadow-md:
    0 12px 30px rgba(0,0,0,.12);

    --shadow-lg:
    0 20px 45px rgba(0,0,0,.16);

    --shadow-xl:
    0 30px 70px rgba(0,0,0,.22);

    --shadow-primary:
    0 20px 40px rgba(14,58,89,.25);

    --shadow-secondary:
    0 20px 40px rgba(0,198,183,.30);

    /* Borders */

    --border:
    1px solid var(--gray-200);

    --border-light:
    1px solid rgba(255,255,255,.2);

    /* Glass */

    --glass-bg:
    rgba(255,255,255,.12);

    --glass-border:
    rgba(255,255,255,.25);

    --blur:20px;

    /* Header */

    --header-height:90px;

    /* Container */

    --container:1320px;

    /* Transition */

    --transition:.35s ease;

    --transition-fast:.2s ease;

    --transition-slow:.6s ease;

    /* Z-index */

    --z-preloader:99999;
    --z-modal:9999;
    --z-fixed:999;
    --z-header:100;
    --z-dropdown:90;
    --z-overlay:80;

}