/* ===========================================================
   SICEP UI FRAMEWORK
   Version : 1.0
   File    : 01-variables.css
   Purpose : Global Design System
=========================================================== */

:root{

/*==========================================================
  BRAND COLORS
==========================================================*/

--primary:#0F2747;
--primary-light:#1B3E6D;
--primary-dark:#081A30;

--secondary:#1E88E5;
--secondary-light:#64B5F6;
--secondary-dark:#1565C0;

--accent:#C9A14D;
--accent-light:#E6C36A;
--accent-dark:#A8842D;

--success:#28A745;
--info:#17A2B8;
--warning:#FFC107;
--danger:#DC3545;

--purple:#6F42C1;
--orange:#FD7E14;
--cyan:#20C997;

/*==========================================================
  BACKGROUNDS
==========================================================*/

--body-bg:#F5F8FC;

--white:#FFFFFF;

--light:#F8F9FA;

--section:#F2F6FC;

--card:#FFFFFF;

--dark:#172B4D;

--dark-section:#091322;

--glass:rgba(255,255,255,.18);

--glass-dark:rgba(13,20,35,.45);

/*==========================================================
  TEXT
==========================================================*/

--text:#343A40;

--text-light:#6C757D;

--text-muted:#8C97A8;

--heading:#0F2747;

--white-text:#FFFFFF;

/*==========================================================
  BORDER
==========================================================*/

--border:#E4E8EF;

--border-light:#EEF2F8;

/*==========================================================
  SHADOWS
==========================================================*/

--shadow-xs:0 2px 6px rgba(0,0,0,.05);

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

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

--shadow-lg:0 20px 50px rgba(0,0,0,.15);

--shadow-xl:0 30px 80px rgba(0,0,0,.20);

/*==========================================================
  GLASS EFFECT
==========================================================*/

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

--glass-blur:18px;

/*==========================================================
  GRADIENTS
==========================================================*/

--gradient-primary:

linear-gradient(135deg,
#0F2747,
#1E88E5);

--gradient-gold:

linear-gradient(135deg,
#C9A14D,
#F6D365);

--gradient-success:

linear-gradient(135deg,
#28A745,
#4CD964);

--gradient-dark:

linear-gradient(135deg,
#081A30,
#0F2747);

--gradient-hero:

linear-gradient(
135deg,
rgba(15,39,71,.95),
rgba(30,136,229,.75));

--gradient-ai:

linear-gradient(
135deg,
#6F42C1,
#1E88E5);

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

--font-heading:'Poppins',sans-serif;

--font-body:'Montserrat',sans-serif;

/*==========================================================
  FONT SIZE
==========================================================*/

--fs-xs:.75rem;

--fs-sm:.875rem;

--fs-md:1rem;

--fs-lg:1.125rem;

--fs-xl:1.25rem;

--fs-2xl:1.5rem;

--fs-3xl:2rem;

--fs-4xl:2.5rem;

--fs-5xl:3rem;

--fs-6xl:4rem;

/*==========================================================
  FONT WEIGHT
==========================================================*/

--fw-light:300;

--fw-normal:400;

--fw-medium:500;

--fw-semibold:600;

--fw-bold:700;

--fw-extrabold:800;

/*==========================================================
  SPACING
==========================================================*/

--space-1:4px;

--space-2:8px;

--space-3:12px;

--space-4:16px;

--space-5:20px;

--space-6:24px;

--space-8:32px;

--space-10:40px;

--space-12:48px;

--space-16:64px;

--space-20:80px;

--space-24:96px;

/*==========================================================
  BORDER RADIUS
==========================================================*/

--radius-xs:4px;

--radius-sm:8px;

--radius-md:12px;

--radius-lg:18px;

--radius-xl:24px;

--radius-2xl:32px;

--radius-round:50px;

--radius-circle:50%;

/*==========================================================
  TRANSITION
==========================================================*/

--transition-fast:.2s ease;

--transition:.35s ease;

--transition-slow:.5s ease;

/*==========================================================
  HEADER
==========================================================*/

--header-height:90px;

/*==========================================================
  SIDEBAR
==========================================================*/

--sidebar-width:280px;

/*==========================================================
  Z INDEX
==========================================================*/

--z-dropdown:1000;

--z-sticky:1020;

--z-fixed:1030;

--z-modal:1050;

--z-tooltip:1080;

/*==========================================================
  DASHBOARD
==========================================================*/

--dashboard-card:160px;

--widget-height:120px;

--chart-height:350px;

/*==========================================================
  BUTTONS
==========================================================*/

--btn-height:52px;

--btn-radius:40px;

/*==========================================================
  INPUT
==========================================================*/

--input-height:55px;

--input-radius:12px;

/*==========================================================
  TIMELINE
==========================================================*/

--timeline-width:6px;

--timeline-node:70px;

/*==========================================================
  HERO
==========================================================*/

--hero-height:100vh;

/*==========================================================
  CONTAINER
==========================================================*/

--container:1320px;

}

/*==========================================================
  DARK MODE VARIABLES
==========================================================*/

[data-theme="dark"]{

--body-bg:#08111D;

--section:#0D1828;

--card:#132235;

--text:#E6EEF7;

--heading:#FFFFFF;

--border:#26364A;

--glass:rgba(255,255,255,.08);

}
/* ==========================================================
   SICEP UI FRAMEWORK
   File : 02-reset.css
   Version : 1.0
   Purpose : CSS Reset & Base Styles
========================================================== */

/*==========================================================
CSS RESET
==========================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*==========================================================
ROOT HTML
==========================================================*/

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

    text-rendering:optimizeLegibility;

}

/*==========================================================
BODY
==========================================================*/

body{

    font-family:var(--font-body);

    font-size:var(--fs-md);

    color:var(--text);

    background:var(--body-bg);

    line-height:1.7;

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*==========================================================
HEADINGS
==========================================================*/

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-heading);

    color:var(--heading);

    font-weight:700;

    line-height:1.2;

    margin-bottom:1rem;

}

h1{font-size:4rem;}

h2{font-size:3rem;}

h3{font-size:2.2rem;}

h4{font-size:1.8rem;}

h5{font-size:1.4rem;}

h6{font-size:1.1rem;}

/*==========================================================
TEXT
==========================================================*/

p{

    margin-bottom:1rem;

    color:var(--text-light);

}

strong{

    font-weight:700;

}

small{

    font-size:.85rem;

}

/*==========================================================
LINKS
==========================================================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}

/*==========================================================
LISTS
==========================================================*/

ul,ol{

    list-style:none;

    padding:0;

    margin:0;

}

/*==========================================================
IMAGES
==========================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

    user-select:none;

}

svg{

    display:block;

    max-width:100%;

}

/*==========================================================
MEDIA
==========================================================*/

video{

    max-width:100%;

}

iframe{

    border:0;

}

/*==========================================================
TABLE
==========================================================*/

table{

    border-collapse:collapse;

    width:100%;

}

/*==========================================================
FORM ELEMENTS
==========================================================*/

input,
textarea,
select,
button{

    font:inherit;

    outline:none;

}

button{

    cursor:pointer;

    border:none;

    background:none;

}

textarea{

    resize:vertical;

}

/*==========================================================
FOCUS
==========================================================*/

:focus-visible{

    outline:3px solid var(--secondary);

    outline-offset:3px;

}

/*==========================================================
SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

::-moz-selection{

    background:var(--primary);

    color:#fff;

}

/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/*==========================================================
SECTION
==========================================================*/

section{

    position:relative;

    overflow:hidden;

}

/*==========================================================
CONTAINER
==========================================================*/

.container-xl{

    max-width:1400px;

}

/*==========================================================
HELPERS
==========================================================*/

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-accent{

    color:var(--accent)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.bg-dark{

    background:var(--dark)!important;

}

.bg-light{

    background:var(--section)!important;

}

/*==========================================================
DISPLAY
==========================================================*/

.hidden{

    display:none!important;

}

.visible{

    display:block!important;

}

.overflow-hidden{

    overflow:hidden;

}

/*==========================================================
SPACING
==========================================================*/

.py-section{

    padding:100px 0;

}

.pt-section{

    padding-top:100px;

}

.pb-section{

    padding-bottom:100px;

}

/*==========================================================
UTILITY
==========================================================*/

.w-fit{

    width:fit-content;

}

.h-fit{

    height:fit-content;

}

.rounded-xl{

    border-radius:25px;

}

.shadow-soft{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-xl);

}

/*==========================================================
GLASS EFFECT
==========================================================*/

.glass{

    background:var(--glass);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    border:var(--glass-border);

}

/*==========================================================
ANIMATION
==========================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom{

    animation:zoom .8s ease forwards;

}

.float{

    animation:floating 6s ease-in-out infinite;

}

/*==========================================================
KEYFRAMES
==========================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes zoom{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/*==========================================================
ACCESSIBILITY
==========================================================*/

.sr-only{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}

/*==========================================================
PRINT
==========================================================*/

@media print{

body{

background:#fff;

color:#000;

}

.no-print{

display:none!important;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 03-typography.css
 Version : 1.0
 Purpose : Enterprise Typography System
==========================================================*/


/*==========================================================
 IMPORT GOOGLE FONTS
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');


/*==========================================================
 BODY
==========================================================*/

body{

    font-family:var(--font-body);

    color:var(--text);

    font-size:16px;

    font-weight:400;

    line-height:1.7;

}


/*==========================================================
 HEADINGS
==========================================================*/

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-heading);

    color:var(--heading);

    margin-bottom:1rem;

    font-weight:700;

}

h1{

    font-size:4rem;

    line-height:1.15;

}

h2{

    font-size:3rem;

}

h3{

    font-size:2.3rem;

}

h4{

    font-size:1.8rem;

}

h5{

    font-size:1.35rem;

}

h6{

    font-size:1.05rem;

}


/*==========================================================
 HERO
==========================================================*/

.hero-title{

    font-size:4.5rem;

    font-weight:800;

    line-height:1.15;

    color:#fff;

}

.hero-highlight{

    color:var(--accent);

}

.hero-subtitle{

    font-size:1.3rem;

    color:rgba(255,255,255,.92);

    max-width:700px;

}

.hero-caption{

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--accent);

    font-weight:600;

}


/*==========================================================
 SECTION
==========================================================*/

.section-tag{

    display:inline-block;

    padding:10px 22px;

    background:rgba(30,136,229,.08);

    color:var(--secondary);

    border-radius:50px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:700;

}

.section-title{

    font-size:3rem;

    font-weight:800;

    margin-top:20px;

}

.section-title span{

    color:var(--secondary);

}

.section-subtitle{

    font-size:1.15rem;

    color:var(--text-light);

    max-width:760px;

    margin:auto;

}


/*==========================================================
 PAGE TITLE
==========================================================*/

.page-title{

    font-size:3.8rem;

    font-weight:800;

}

.page-subtitle{

    font-size:1.25rem;

    color:var(--text-light);

}


/*==========================================================
 DASHBOARD
==========================================================*/

.dashboard-title{

    font-size:2rem;

    font-weight:700;

}

.dashboard-subtitle{

    color:var(--text-light);

}

.widget-title{

    font-size:1.1rem;

    font-weight:600;

}


/*==========================================================
 KPI
==========================================================*/

.kpi-number{

    font-size:3rem;

    font-weight:800;

    color:var(--primary);

}

.kpi-title{

    font-size:1rem;

    font-weight:600;

}

.kpi-growth{

    font-size:.9rem;

    color:var(--success);

}


/*==========================================================
 AI CARDS
==========================================================*/

.ai-title{

    font-size:1.35rem;

    font-weight:700;

}

.ai-description{

    color:var(--text-light);

}

.ai-value{

    font-size:2rem;

    color:var(--secondary);

    font-weight:800;

}


/*==========================================================
 BUTTONS
==========================================================*/

.btn{

    font-family:var(--font-heading);

    font-weight:600;

    letter-spacing:.3px;

}

.btn-lg{

    font-size:1rem;

}

.btn-xl{

    font-size:1.15rem;

}


/*==========================================================
 LABELS
==========================================================*/

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--heading);

}


/*==========================================================
 FORM
==========================================================*/

input,
textarea,
select{

    font-size:1rem;

}

.form-title{

    font-size:1.6rem;

    font-weight:700;

}

.form-helper{

    font-size:.9rem;

    color:var(--text-light);

}


/*==========================================================
 TABLE
==========================================================*/

table{

    font-size:.95rem;

}

thead{

    font-weight:700;

}

tbody{

    font-weight:400;

}


/*==========================================================
 BADGES
==========================================================*/

.badge{

    font-weight:600;

    letter-spacing:.5px;

}

.badge-ai{

    background:var(--gradient-ai);

    color:#fff;

}

.badge-success{

    background:var(--success);

    color:#fff;

}

.badge-warning{

    background:var(--warning);

}

.badge-primary{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
 TIMELINE
==========================================================*/

.timeline-title{

    font-size:1.4rem;

    font-weight:700;

}

.timeline-year{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}


/*==========================================================
 LINKS
==========================================================*/

a{

    transition:.35s;

}

a:hover{

    color:var(--secondary);

}


/*==========================================================
 TEXT COLORS
==========================================================*/

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-accent{

    color:var(--accent)!important;

}

.text-success{

    color:var(--success)!important;

}

.text-danger{

    color:var(--danger)!important;

}

.text-light{

    color:var(--text-light)!important;

}


/*==========================================================
 FONT WEIGHTS
==========================================================*/

.fw-300{

    font-weight:300;

}

.fw-400{

    font-weight:400;

}

.fw-500{

    font-weight:500;

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

.fw-800{

    font-weight:800;

}


/*==========================================================
 TEXT UTILITIES
==========================================================*/

.text-uppercase{

    text-transform:uppercase;

}

.text-capitalize{

    text-transform:capitalize;

}

.text-center{

    text-align:center;

}

.text-end{

    text-align:right;

}

.text-justify{

    text-align:justify;

}


/*==========================================================
 LETTER SPACING
==========================================================*/

.ls-1{

    letter-spacing:1px;

}

.ls-2{

    letter-spacing:2px;

}

.ls-3{

    letter-spacing:3px;

}


/*==========================================================
 LINE HEIGHT
==========================================================*/

.lh-1{

    line-height:1;

}

.lh-12{

    line-height:1.2;

}

.lh-15{

    line-height:1.5;

}

.lh-18{

    line-height:1.8;

}


/*==========================================================
 RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.hero-title{

font-size:3.8rem;

}

.section-title{

font-size:2.6rem;

}

}

@media(max-width:992px){

.hero-title{

font-size:3rem;

}

.page-title{

font-size:3rem;

}

.section-title{

font-size:2.3rem;

}

.dashboard-title{

font-size:1.8rem;

}

.kpi-number{

font-size:2.5rem;

}

}

@media(max-width:768px){

.hero-title{

font-size:2.4rem;

}

.page-title{

font-size:2.5rem;

}

.section-title{

font-size:2rem;

}

.hero-subtitle{

font-size:1.05rem;

}

.kpi-number{

font-size:2rem;

}

}

@media(max-width:576px){

.hero-title{

font-size:2rem;

}

.page-title{

font-size:2rem;

}

.section-title{

font-size:1.7rem;

}

h3{

font-size:1.5rem;

}

h4{

font-size:1.25rem;

}

}