/* ===========================================================
   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;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 04-buttons.css
 Version : 1.0
 Purpose : Enterprise Button System (Part 1)
==========================================================*/


/*==========================================================
 BASE BUTTON
==========================================================*/

.btn-sicep{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    padding:0 28px;

    border:none;

    border-radius:var(--btn-radius);

    cursor:pointer;

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

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    text-decoration:none;

    transition:all .35s ease;

    overflow:hidden;

    user-select:none;

    white-space:nowrap;

}

.btn-sicep i{

    font-size:16px;

}

.btn-sicep:hover{

    transform:translateY(-3px);

    text-decoration:none;

}

.btn-sicep:active{

    transform:translateY(1px);

}


/*==========================================================
 BUTTON SIZES
==========================================================*/

.btn-xs{

    min-height:34px;

    padding:0 16px;

    font-size:12px;

}

.btn-sm{

    min-height:40px;

    padding:0 20px;

    font-size:13px;

}

.btn-md{

    min-height:48px;

    padding:0 26px;

    font-size:15px;

}

.btn-lg{

    min-height:56px;

    padding:0 34px;

    font-size:16px;

}

.btn-xl{

    min-height:64px;

    padding:0 42px;

    font-size:18px;

}


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

.btn-rounded{

    border-radius:12px;

}

.btn-pill{

    border-radius:60px;

}

.btn-square{

    border-radius:0;

}


/*==========================================================
 PRIMARY
==========================================================*/

.btn-primary{

    background:var(--primary);

    color:#fff;

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

}

.btn-primary:hover{

    background:var(--primary-light);

    color:#fff;

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

}


/*==========================================================
 SECONDARY
==========================================================*/

.btn-secondary{

    background:var(--secondary);

    color:#fff;

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

}

.btn-secondary:hover{

    background:var(--secondary-dark);

    color:#fff;

}


/*==========================================================
 ACCENT
==========================================================*/

.btn-accent{

    background:var(--accent);

    color:#fff;

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

}

.btn-accent:hover{

    background:var(--accent-dark);

    color:#fff;

}


/*==========================================================
 SUCCESS
==========================================================*/

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-success:hover{

    background:#1d8c39;

    color:#fff;

}


/*==========================================================
 WARNING
==========================================================*/

.btn-warning{

    background:var(--warning);

    color:#222;

}

.btn-warning:hover{

    background:#ffb300;

    color:#222;

}


/*==========================================================
 DANGER
==========================================================*/

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-danger:hover{

    background:#bf2534;

    color:#fff;

}


/*==========================================================
 DARK
==========================================================*/

.btn-dark{

    background:var(--dark);

    color:#fff;

}

.btn-dark:hover{

    background:#0d1b2a;

    color:#fff;

}


/*==========================================================
 LIGHT
==========================================================*/

.btn-light{

    background:#fff;

    color:var(--primary);

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

}

.btn-light:hover{

    background:var(--section);

}


/*==========================================================
 FULL WIDTH
==========================================================*/

.btn-block{

    width:100%;

}


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

.btn-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.btn-icon-right{

    flex-direction:row-reverse;

}


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

.hero-btn{

    min-height:62px;

    padding:0 42px;

    font-size:17px;

    font-weight:700;

    border-radius:60px;

}


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

.btn-shadow{

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

}

.btn-shadow-lg{

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

}


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

.btn-hover-lift{

    transition:all .35s ease;

}

.btn-hover-lift:hover{

    transform:translateY(-5px);

}

.btn-hover-grow:hover{

    transform:scale(1.04);

}


/*==========================================================
 BUTTON GROUP
==========================================================*/

.btn-group-sicep{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    align-items:center;

}


/*==========================================================
 DISABLED
==========================================================*/

.btn-sicep:disabled,

.btn-disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}


/*==========================================================
 ACTIVE
==========================================================*/

.btn-active{

    box-shadow:0 0 0 4px rgba(30,136,229,.15);

}


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

@media(max-width:992px){

.hero-btn{

    min-height:56px;

    padding:0 32px;

    font-size:16px;

}

}

@media(max-width:768px){

.btn-group-sicep{

    flex-direction:column;

    align-items:stretch;

}

.btn-sicep{

    width:100%;

}

.hero-btn{

    width:100%;

}

}

@media(max-width:576px){

.btn-xl{

    min-height:56px;

    font-size:16px;

}

.btn-lg{

    min-height:52px;

}

}
/*==========================================================
 PART 2
 Premium Buttons
==========================================================*/


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

.btn-outline-primary{

    background:transparent;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}


.btn-outline-secondary{

    background:transparent;

    color:var(--secondary);

    border:2px solid var(--secondary);

}

.btn-outline-secondary:hover{

    background:var(--secondary);

    color:#fff;

}


.btn-outline-accent{

    background:transparent;

    color:var(--accent);

    border:2px solid var(--accent);

}

.btn-outline-accent:hover{

    background:var(--accent);

    color:#fff;

}


.btn-outline-success{

    background:transparent;

    color:var(--success);

    border:2px solid var(--success);

}

.btn-outline-success:hover{

    background:var(--success);

    color:#fff;

}


.btn-outline-danger{

    background:transparent;

    color:var(--danger);

    border:2px solid var(--danger);

}

.btn-outline-danger:hover{

    background:var(--danger);

    color:#fff;

}



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

.btn-gradient{

    background:var(--gradient-primary);

    color:#fff;

    border:none;

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

}

.btn-gradient:hover{

    transform:translateY(-4px);

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

    color:#fff;

}


.btn-gradient-gold{

    background:var(--gradient-gold);

    color:#fff;

}


.btn-gradient-ai{

    background:var(--gradient-ai);

    color:#fff;

}



/*==========================================================
 GLASS BUTTON
==========================================================*/

.btn-glass{

    background:rgba(255,255,255,.15);

    color:#fff;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.btn-glass:hover{

    background:rgba(255,255,255,.25);

    color:#fff;

}



/*==========================================================
 ANIMATED BORDER BUTTON
==========================================================*/

.btn-border{

    position:relative;

    background:transparent;

    color:var(--primary);

    border:2px solid var(--primary);

    overflow:hidden;

    z-index:1;

}

.btn-border::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:var(--primary);

    transition:.45s;

    z-index:-1;

}

.btn-border:hover::before{

    left:0;

}

.btn-border:hover{

    color:#fff;

}



/*==========================================================
 NEON BUTTON
==========================================================*/

.btn-neon{

    background:var(--secondary);

    color:#fff;

    box-shadow:

    0 0 8px rgba(30,136,229,.45),

    0 0 18px rgba(30,136,229,.35),

    0 0 28px rgba(30,136,229,.25);

}

.btn-neon:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 10px rgba(30,136,229,.65),

    0 0 25px rgba(30,136,229,.50),

    0 0 45px rgba(30,136,229,.35);

}



/*==========================================================
 RIPPLE EFFECT
==========================================================*/

.btn-ripple{

    position:relative;

    overflow:hidden;

}

.btn-ripple::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.4);

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn-ripple:active::after{

    width:320px;

    height:320px;

    opacity:0;

}



/*==========================================================
 LOADING BUTTON
==========================================================*/

.btn-loading{

    pointer-events:none;

    opacity:.85;

}

.btn-loading::before{

    content:"";

    width:18px;

    height:18px;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    margin-right:10px;

    animation:btnSpin .8s linear infinite;

    display:inline-block;

}

@keyframes btnSpin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/*==========================================================
 DASHBOARD ACTION BUTTONS
==========================================================*/

.btn-edit{

    background:#1E88E5;

    color:#fff;

}

.btn-view{

    background:#20C997;

    color:#fff;

}

.btn-download{

    background:#6F42C1;

    color:#fff;

}

.btn-upload{

    background:#FD7E14;

    color:#fff;

}

.btn-print{

    background:#455A64;

    color:#fff;

}

.btn-delete{

    background:#DC3545;

    color:#fff;

}



/*==========================================================
 ICON ONLY BUTTON
==========================================================*/

.btn-icon-circle{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

}

.btn-icon-circle:hover{

    transform:translateY(-3px);

}



/*==========================================================
 FLOATING ACTION BUTTONS
==========================================================*/

.fab{

    position:fixed;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

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

    z-index:999;

    transition:.35s;

}

.fab:hover{

    transform:scale(1.08);

}

.fab-whatsapp{

    background:#25D366;

    bottom:25px;

    right:25px;

}

.fab-phone{

    background:var(--primary);

    bottom:95px;

    right:25px;

}

.fab-top{

    background:var(--secondary);

    bottom:165px;

    right:25px;

}



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

.btn-facebook{

    background:#1877F2;

    color:#fff;

}

.btn-instagram{

    background:#E1306C;

    color:#fff;

}

.btn-linkedin{

    background:#0A66C2;

    color:#fff;

}

.btn-youtube{

    background:#FF0000;

    color:#fff;

}

.btn-x{

    background:#111;

    color:#fff;

}

.btn-whatsapp{

    background:#25D366;

    color:#fff;

}



/*==========================================================
 SOCIAL ICONS
==========================================================*/

.social-btn{

    width:46px;

    height:46px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    margin:4px;

    transition:.35s;

}

.social-btn:hover{

    transform:translateY(-5px);

}



/*==========================================================
 BUTTON BADGE
==========================================================*/

.btn-badge{

    position:absolute;

    top:-6px;

    right:-6px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    font-size:10px;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*==========================================================
 MOBILE
==========================================================*/

@media(max-width:768px){

.fab{

width:52px;

height:52px;

}

.social-btn{

width:42px;

height:42px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 05-layout.css
 Version : 1.0
 Purpose : Enterprise Layout System
==========================================================*/


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

.container-xxl{
    width:100%;
    max-width:1600px;
    margin:auto;
    padding:0 20px;
}

.container-xl{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 20px;
}

.container-lg{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.container-md{
    width:100%;
    max-width:992px;
    margin:auto;
    padding:0 20px;
}

.container-sm{
    width:100%;
    max-width:768px;
    margin:auto;
    padding:0 20px;
}


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

.section{

    position:relative;

    padding:100px 0;

}

.section-sm{

    padding:70px 0;

}

.section-lg{

    padding:140px 0;

}

.section-xl{

    padding:180px 0;

}


/*==========================================================
 GRID SYSTEM
==========================================================*/

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}

.grid-5{

    grid-template-columns:repeat(5,1fr);

}

.grid-auto{

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

}


/*==========================================================
 FLEX
==========================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}


/*==========================================================
 GAP UTILITIES
==========================================================*/

.gap-10{gap:10px;}

.gap-20{gap:20px;}

.gap-30{gap:30px;}

.gap-40{gap:40px;}

.gap-50{gap:50px;}

.gap-60{gap:60px;}


/*==========================================================
 WIDTH
==========================================================*/

.w-25{width:25%;}

.w-50{width:50%;}

.w-75{width:75%;}

.w-100{width:100%;}

.max-500{

    max-width:500px;

}

.max-700{

    max-width:700px;

}

.max-900{

    max-width:900px;

}


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

.h-100{

    height:100%;

}

.min-vh{

    min-height:100vh;

}


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

.hero-layout{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

}

.hero-content{

    position:relative;

    z-index:5;

}

.hero-image{

    position:relative;

    text-align:center;

}


/*==========================================================
 CARD LAYOUT
==========================================================*/

.card-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.card-row{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}


/*==========================================================
 GLASS PANEL
==========================================================*/

.glass-panel{

    background:var(--glass);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:var(--glass-border);

    border-radius:24px;

    padding:40px;

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

}

.glass-card{

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(15px);

    border-radius:20px;

    border:1px solid rgba(255,255,255,.30);

    padding:30px;

    transition:.35s;

}

.glass-card:hover{

    transform:translateY(-8px);

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

}


/*==========================================================
 CONTENT BLOCKS
==========================================================*/

.content-left{

    text-align:left;

}

.content-center{

    text-align:center;

}

.content-right{

    text-align:right;

}


/*==========================================================
 STACK
==========================================================*/

.stack>*+*{

    margin-top:24px;

}


/*==========================================================
 DIVIDER
==========================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:40px 0;

}


/*==========================================================
 STICKY OFFSET
==========================================================*/

.anchor-offset{

    scroll-margin-top:110px;

}


/*==========================================================
 OVERFLOW
==========================================================*/

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}


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

.z-1{z-index:1;}

.z-5{z-index:5;}

.z-10{z-index:10;}

.z-20{z-index:20;}

.position-relative{

    position:relative;

}

.position-absolute{

    position:absolute;

}


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

@media(max-width:1200px){

.grid-4{

grid-template-columns:repeat(2,1fr);

}

.grid-5{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:992px){

.grid-3,

.grid-4,

.grid-5{

grid-template-columns:repeat(2,1fr);

}

.hero-layout{

text-align:center;

}

.flex-between{

flex-direction:column;

gap:30px;

}

}

@media(max-width:768px){

.grid-2,

.grid-3,

.grid-4,

.grid-5{

grid-template-columns:1fr;

}

.section{

padding:70px 0;

}

.section-lg{

padding:100px 0;

}

.glass-panel{

padding:30px;

}

}

@media(max-width:576px){

.container-xl,

.container-lg,

.container-md,

.container-sm{

padding:0 15px;

}

.glass-card{

padding:20px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 05-layout.css
 Part : 2
 Enterprise Application Layout System
==========================================================*/


/*==========================================================
 APPLICATION LAYOUT
==========================================================*/

.app-layout{

    display:flex;

    min-height:100vh;

    background:var(--body-bg);

}

.app-content{

    flex:1;

    display:flex;

    flex-direction:column;

    margin-left:280px;

    transition:.35s;

}


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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:280px;

    height:100vh;

    background:var(--primary);

    color:#fff;

    overflow-y:auto;

    z-index:1000;

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

}

.sidebar-header{

    padding:30px;

    border-bottom:1px solid rgba(255,255,255,.10);

}

.sidebar-logo{

    max-width:170px;

}

.sidebar-nav{

    padding:20px 0;

}

.sidebar-nav ul{

    list-style:none;

}

.sidebar-nav li{

    margin:6px 0;

}

.sidebar-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 28px;

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

    transition:.3s;

    border-left:4px solid transparent;

}

.sidebar-nav a:hover,

.sidebar-nav a.active{

    background:rgba(255,255,255,.08);

    color:#fff;

    border-left-color:var(--accent);

}

.sidebar-nav i{

    width:22px;

    text-align:center;

}


/*==========================================================
 TOP NAVBAR
==========================================================*/

.dashboard-header{

    height:80px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

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

    position:sticky;

    top:0;

    z-index:100;

}

.dashboard-search{

    width:340px;

}

.dashboard-search input{

    width:100%;

    height:48px;

    border-radius:40px;

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

    padding:0 20px;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:15px;

}


/*==========================================================
 CONTENT WRAPPER
==========================================================*/

.dashboard-content{

    padding:35px;

    flex:1;

}


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

.page-header{

    margin-bottom:35px;

}

.page-header h2{

    margin-bottom:6px;

}

.page-header p{

    color:var(--text-light);

}


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

.kpi-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

.kpi-card{

    background:#fff;

    border-radius:20px;

    padding:28px;

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

    transition:.3s;

}

.kpi-card:hover{

    transform:translateY(-6px);

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

}

.kpi-value{

    font-size:2.5rem;

    font-weight:800;

    color:var(--primary);

}

.kpi-label{

    margin-top:8px;

    color:var(--text-light);

}


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

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

}

.dashboard-widget{

    background:#fff;

    border-radius:20px;

    padding:30px;

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

}


/*==========================================================
 PORTAL GRID
==========================================================*/

.portal-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:30px;

}

.portal-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    transition:.35s;

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

}

.portal-card:hover{

    transform:translateY(-8px);

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

}


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

.timeline-layout{

    position:relative;

    padding-left:70px;

}

.timeline-layout::before{

    content:"";

    position:absolute;

    left:26px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--secondary);

}

.timeline-item{

    position:relative;

    margin-bottom:45px;

}

.timeline-dot{

    position:absolute;

    left:-57px;

    top:0;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--accent);

    border:5px solid #fff;

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

}


/*==========================================================
 AI MODULE GRID
==========================================================*/

.ai-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.ai-module{

    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

}

.ai-module:hover{

    transform:translateY(-8px);

}

.ai-module i{

    font-size:48px;

    color:var(--secondary);

    margin-bottom:20px;

}


/*==========================================================
 MASONRY GRID
==========================================================*/

.masonry{

    columns:3;

    column-gap:24px;

}

.masonry-item{

    display:inline-block;

    width:100%;

    margin-bottom:24px;

}


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

.table-wrapper{

    background:#fff;

    border-radius:20px;

    overflow:auto;

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

}


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

.panel{

    background:#fff;

    border-radius:20px;

    padding:30px;

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

}

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}


/*==========================================================
 NOTIFICATION PANEL
==========================================================*/

.notification-panel{

    display:flex;

    gap:18px;

    padding:20px;

    border-radius:18px;

    background:#fff;

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

    margin-bottom:20px;

}


/*==========================================================
 PROFILE CARD
==========================================================*/

.profile-card{

    text-align:center;

    background:#fff;

    border-radius:24px;

    padding:35px;

}

.profile-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    margin:auto;

    margin-bottom:20px;

}


/*==========================================================
 ENTERPRISE UTILITIES
==========================================================*/

.radius-lg{

    border-radius:24px;

}

.radius-xl{

    border-radius:32px;

}

.shadow-soft{

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

}

.shadow-medium{

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

}

.shadow-heavy{

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

}

.border-light{

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

}

.bg-glass{

    background:var(--glass);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.text-gradient{

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

@media(max-width:1200px){

.kpi-grid{

grid-template-columns:repeat(2,1fr);

}

.ai-grid{

grid-template-columns:repeat(2,1fr);

}

.masonry{

columns:2;

}

}

@media(max-width:992px){

.sidebar{

transform:translateX(-100%);

}

.app-content{

margin-left:0;

}

.dashboard-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.kpi-grid,

.ai-grid,

.portal-grid{

grid-template-columns:1fr;

}

.dashboard-content{

padding:20px;

}

.dashboard-header{

padding:0 20px;

}

.dashboard-search{

width:100%;

}

.masonry{

columns:1;

}

.timeline-layout{

padding-left:45px;

}

.timeline-dot{

left:-37px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Version : 1.0
 Part : 1
 Public Website Header
==========================================================*/


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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1050;

    transition:all .35s ease;

}

.site-header.scrolled{

    background:rgba(15,39,71,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}

.site-header.shrink{

    padding:0;

}


/*==========================================================
 NAVBAR
==========================================================*/

.navbar-sicep{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    transition:.35s ease;

}

.site-header.scrolled .navbar-sicep{

    height:74px;

}


/*==========================================================
 LOGO
==========================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:15px;

}

.navbar-brand img{

    height:60px;

    transition:.35s;

}

.site-header.scrolled .navbar-brand img{

    height:48px;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-title{

    color:#fff;

    font-weight:700;

    font-size:1.25rem;

}

.brand-subtitle{

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

    font-size:.78rem;

}


/*==========================================================
 NAVIGATION
==========================================================*/

.navbar-nav{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

}

.navbar-nav>li{

    position:relative;

}

.navbar-nav>li>a{

    position:relative;

    display:flex;

    align-items:center;

    height:90px;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.site-header.scrolled .navbar-nav>li>a{

    height:74px;

}

.navbar-nav>li>a:hover{

    color:var(--accent);

}


/*==========================================================
 UNDERLINE
==========================================================*/

.navbar-nav>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:22px;

    width:0;

    height:3px;

    background:var(--accent);

    border-radius:30px;

    transition:.35s;

}

.navbar-nav>li>a:hover::after,

.navbar-nav>li.active>a::after{

    width:100%;

}


/*==========================================================
 DROPDOWN
==========================================================*/

.nav-item-dropdown{

    position:relative;

}

.dropdown-menu-sicep{

    position:absolute;

    top:100%;

    left:0;

    min-width:260px;

    background:#fff;

    border-radius:16px;

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

    padding:12px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(18px);

    transition:.3s;

}

.nav-item-dropdown:hover .dropdown-menu-sicep{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu-sicep a{

    display:block;

    padding:14px 24px;

    color:var(--heading);

    transition:.25s;

}

.dropdown-menu-sicep a:hover{

    background:var(--section);

    color:var(--secondary);

    padding-left:32px;

}


/*==========================================================
 NAV RIGHT
==========================================================*/

.navbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}


/*==========================================================
 SEARCH ICON
==========================================================*/

.nav-search{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    background:rgba(255,255,255,.08);

    transition:.3s;

}

.nav-search:hover{

    background:var(--secondary);

}


/*==========================================================
 CTA
==========================================================*/

.nav-cta{

    min-height:46px;

    padding:0 26px;

}


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

.header-glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}


/*==========================================================
 MOBILE TOGGLE
==========================================================*/

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    background:rgba(255,255,255,.10);

    color:#fff;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

}

.mobile-toggle:hover{

    background:var(--secondary);

}

.mobile-toggle i{

    font-size:22px;

}


/*==========================================================
 OFFCANVAS
==========================================================*/

.mobile-nav{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:var(--primary);

    transition:.4s;

    z-index:1200;

    padding:30px;

    overflow-y:auto;

}

.mobile-nav.open{

    right:0;

}

.mobile-nav ul{

    list-style:none;

    margin-top:40px;

}

.mobile-nav li{

    margin-bottom:12px;

}

.mobile-nav a{

    display:block;

    padding:14px 18px;

    border-radius:12px;

    color:#fff;

    transition:.3s;

}

.mobile-nav a:hover{

    background:rgba(255,255,255,.08);

}

.mobile-close{

    width:44px;

    height:44px;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    margin-left:auto;

    cursor:pointer;

}


/*==========================================================
 OVERLAY
==========================================================*/

.nav-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1190;

}

.nav-overlay.show{

    opacity:1;

    visibility:visible;

}


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

.hero-offset{

    padding-top:90px;

}


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

@media(max-width:1200px){

.navbar-nav{

gap:24px;

}

}

@media(max-width:992px){

.navbar-nav{

display:none;

}

.nav-search{

display:none;

}

.nav-cta{

display:none;

}

.mobile-toggle{

display:flex;

}

.navbar-brand img{

height:52px;

}

}

@media(max-width:576px){

.navbar-sicep{

height:76px;

}

.site-header.scrolled .navbar-sicep{

height:68px;

}

.navbar-brand img{

height:44px;

}

.mobile-nav{

width:100%;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Part : 2A
 Premium Mega Menu
==========================================================*/


/*==========================================================
 MEGA MENU CONTAINER
==========================================================*/

.nav-item-mega{

    position:relative;

}

.nav-item-mega:hover>.mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*==========================================================
 MEGA MENU
==========================================================*/

.mega-menu{

    position:absolute;

    top:100%;

    left:50%;

    transform:translate(-50%,25px);

    width:1180px;

    max-width:95vw;

    background:#fff;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.18);

    padding:40px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1200;

    overflow:hidden;

}


/*==========================================================
 MEGA MENU GRID
==========================================================*/

.mega-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:35px;

}

.mega-column h5{

    margin-bottom:18px;

    color:var(--primary);

    font-weight:700;

}

.mega-column ul{

    list-style:none;

}

.mega-column li{

    margin-bottom:8px;

}


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

.mega-column a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:12px;

    color:var(--heading);

    transition:.3s;

}

.mega-column a:hover{

    background:var(--section);

    color:var(--secondary);

    padding-left:20px;

}

.mega-column i{

    width:24px;

    text-align:center;

    color:var(--secondary);

}


/*==========================================================
 FEATURE PANEL
==========================================================*/

.mega-feature{

    background:var(--gradient-primary);

    color:#fff;

    border-radius:20px;

    padding:30px;

    height:100%;

}

.mega-feature h4{

    color:#fff;

}

.mega-feature p{

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

}

.mega-feature .btn{

    margin-top:18px;

}


/*==========================================================
 CATEGORY TITLE
==========================================================*/

.mega-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.mega-title i{

    color:var(--accent);

}


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

.menu-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    margin-left:auto;

}

.badge-new{

    background:#28A745;

    color:#fff;

}

.badge-ai{

    background:var(--gradient-ai);

    color:#fff;

}

.badge-beta{

    background:#FFC107;

    color:#222;

}


/*==========================================================
 DIVIDER
==========================================================*/

.mega-divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:25px 0;

}


/*==========================================================
 MULTI LEVEL DROPDOWN
==========================================================*/

.dropdown-level{

    position:relative;

}

.dropdown-level>.submenu{

    position:absolute;

    top:0;

    left:100%;

    width:260px;

    background:#fff;

    border-radius:18px;

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

    opacity:0;

    visibility:hidden;

    transform:translateX(15px);

    transition:.3s;

}

.dropdown-level:hover>.submenu{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

.submenu a{

    display:block;

    padding:14px 20px;

}

.submenu a:hover{

    background:var(--section);

}


/*==========================================================
 MENU ICON
==========================================================*/

.has-submenu{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.has-submenu i:last-child{

    font-size:12px;

}


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

@keyframes menuFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.nav-item-dropdown:hover>.dropdown-menu-sicep,

.nav-item-mega:hover>.mega-menu{

    animation:menuFade .35s ease;

}


/*==========================================================
 HOVER EFFECT
==========================================================*/

.hover-slide{

    position:relative;

    overflow:hidden;

}

.hover-slide::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.35s;

}

.hover-slide:hover::before{

    left:0;

}


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

.mega-card{

    border-radius:18px;

    padding:22px;

    background:var(--section);

    transition:.35s;

}

.mega-card:hover{

    background:#fff;

    transform:translateY(-6px);

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

}

.mega-card i{

    font-size:34px;

    color:var(--secondary);

    margin-bottom:18px;

}


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

.quick-links{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.quick-link{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

    border-radius:14px;

    background:var(--section);

    transition:.3s;

}

.quick-link:hover{

    background:var(--secondary);

    color:#fff;

}


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

@media(max-width:1200px){

.mega-menu{

width:1000px;

}

}

@media(max-width:992px){

.mega-menu{

display:none;

}

.dropdown-level>.submenu{

position:relative;

left:0;

width:100%;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

margin-top:10px;

}

}

@media(max-width:768px){

.quick-links{

grid-template-columns:1fr;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Part : 2B
 Enterprise Dashboard Header
==========================================================*/


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

.dashboard-header{

    position:sticky;

    top:0;

    left:0;

    height:78px;

    width:100%;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    border-bottom:1px solid var(--border);

    z-index:1000;

    transition:.35s;

}

.dashboard-header.shadow{

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

}


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

.dashboard-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.sidebar-toggle{

    width:46px;

    height:46px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:var(--section);

    transition:.3s;

}

.sidebar-toggle:hover{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
 GLOBAL SEARCH
==========================================================*/

.global-search{

    position:relative;

    width:380px;

}

.global-search input{

    width:100%;

    height:48px;

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

    border-radius:40px;

    padding:0 55px 0 20px;

    background:#fff;

    transition:.3s;

}

.global-search input:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(30,136,229,.10);

}

.global-search i{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-light);

}


/*==========================================================
 SEARCH SUGGESTIONS
==========================================================*/

.search-suggestions{

    position:absolute;

    top:60px;

    left:0;

    width:100%;

    background:#fff;

    border-radius:18px;

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

    padding:15px;

    display:none;

    z-index:1001;

}

.global-search.active .search-suggestions{

    display:block;

}

.search-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:12px;

    transition:.25s;

}

.search-item:hover{

    background:var(--section);

}

.search-item i{

    position:static;

    transform:none;

}


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

.dashboard-right{

    display:flex;

    align-items:center;

    gap:18px;

}


/*==========================================================
 HEADER ICON BUTTONS
==========================================================*/

.header-icon{

    position:relative;

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--section);

    cursor:pointer;

    transition:.3s;

}

.header-icon:hover{

    background:var(--secondary);

    color:#fff;

}


/*==========================================================
 NOTIFICATION BADGE
==========================================================*/

.notify-badge{

    position:absolute;

    top:4px;

    right:2px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:20px;

    background:var(--danger);

    color:#fff;

    font-size:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    animation:pulseBadge 1.8s infinite;

}

@keyframes pulseBadge{

0%{

transform:scale(1);

}

50%{

transform:scale(1.18);

}

100%{

transform:scale(1);

}

}


/*==========================================================
 NOTIFICATION PANEL
==========================================================*/

.notification-dropdown{

    position:absolute;

    top:60px;

    right:0;

    width:360px;

    background:#fff;

    border-radius:22px;

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

    overflow:hidden;

    display:none;

    z-index:1200;

}

.notification-dropdown.show{

    display:block;

}

.notification-header{

    padding:20px;

    font-weight:700;

    border-bottom:1px solid var(--border);

}

.notification-body{

    max-height:420px;

    overflow:auto;

}

.notification-item{

    display:flex;

    gap:15px;

    padding:18px;

    transition:.25s;

    border-bottom:1px solid var(--border-light);

}

.notification-item:hover{

    background:var(--section);

}

.notification-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    overflow:hidden;

}

.notification-content h6{

    margin-bottom:4px;

    font-size:15px;

}

.notification-content small{

    color:var(--text-light);

}


/*==========================================================
 USER PROFILE
==========================================================*/

.user-profile{

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

}

.user-avatar{

    position:relative;

}

.user-avatar img{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

}

.user-status{

    position:absolute;

    right:0;

    bottom:0;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#28A745;

    border:2px solid #fff;

}

.user-name{

    display:flex;

    flex-direction:column;

}

.user-name strong{

    font-size:15px;

}

.user-name span{

    font-size:12px;

    color:var(--text-light);

}


/*==========================================================
 PROFILE DROPDOWN
==========================================================*/

.profile-dropdown{

    position:absolute;

    top:65px;

    right:0;

    width:260px;

    background:#fff;

    border-radius:18px;

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

    overflow:hidden;

    display:none;

}

.profile-dropdown.show{

    display:block;

}

.profile-dropdown a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 22px;

    transition:.25s;

}

.profile-dropdown a:hover{

    background:var(--section);

}

.profile-dropdown hr{

    margin:0;

}


/*==========================================================
 APPLICATION SWITCHER
==========================================================*/

.app-switcher{

    position:relative;

}

.app-grid{

    position:absolute;

    top:60px;

    right:0;

    width:340px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    padding:20px;

    background:#fff;

    border-radius:22px;

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

    display:none;

}

.app-grid.show{

    display:grid;

}

.app-item{

    text-align:center;

    padding:16px;

    border-radius:16px;

    transition:.3s;

}

.app-item:hover{

    background:var(--section);

}

.app-item i{

    font-size:30px;

    margin-bottom:10px;

    color:var(--secondary);

}


/*==========================================================
 WORKSPACE SELECTOR
==========================================================*/

.workspace-selector{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

    background:var(--section);

    cursor:pointer;

}

.workspace-selector img{

    width:32px;

    height:32px;

    border-radius:50%;

}


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

@media(max-width:1200px){

.global-search{

width:300px;

}

}

@media(max-width:992px){

.global-search{

display:none;

}

.user-name{

display:none;

}

}

@media(max-width:768px){

.dashboard-header{

padding:0 18px;

height:70px;

}

.notification-dropdown{

width:320px;

}

.workspace-selector{

display:none;

}

}

@media(max-width:576px){

.notification-dropdown{

width:300px;

right:-15px;

}

.profile-dropdown{

right:-15px;

}

.app-grid{

width:300px;

grid-template-columns:repeat(2,1fr);

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Part : 2C.1
 Theme Switcher • Language Selector
 Enterprise Widgets • Quick Actions
==========================================================*/


/*==========================================================
 THEME SWITCHER
==========================================================*/

.theme-switcher{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--section);

    cursor:pointer;

    transition:.35s;

}

.theme-switcher:hover{

    background:var(--secondary);

    color:#fff;

}

.theme-switcher i{

    font-size:18px;

    transition:.35s;

}

.theme-switcher:hover i{

    transform:rotate(180deg);

}


/*==========================================================
 THEME DROPDOWN
==========================================================*/

.theme-menu{

    position:absolute;

    top:60px;

    right:0;

    width:220px;

    background:#fff;

    border-radius:18px;

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

    padding:15px;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    z-index:1200;

}

.theme-menu.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.theme-option{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 15px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

.theme-option:hover{

    background:var(--section);

}


/*==========================================================
 LANGUAGE SELECTOR
==========================================================*/

.language-selector{

    position:relative;

}

.language-button{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

    background:var(--section);

    cursor:pointer;

    transition:.3s;

}

.language-button:hover{

    background:var(--secondary);

    color:#fff;

}

.language-button img{

    width:22px;

    border-radius:3px;

}

.language-menu{

    position:absolute;

    top:60px;

    right:0;

    width:220px;

    background:#fff;

    border-radius:18px;

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

    padding:12px;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

}

.language-menu.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.language-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

.language-item:hover{

    background:var(--section);

}

.language-item img{

    width:24px;

}


/*==========================================================
 ENTERPRISE WIDGETS
==========================================================*/

.header-widgets{

    display:flex;

    align-items:center;

    gap:15px;

}

.widget-button{

    position:relative;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--section);

    cursor:pointer;

    transition:.3s;

}

.widget-button:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);

}

.widget-button i{

    font-size:18px;

}

.widget-counter{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:20px;

    background:var(--danger);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:700;

}


/*==========================================================
 WIDGET DROPDOWN
==========================================================*/

.widget-dropdown{

    position:absolute;

    top:60px;

    right:0;

    width:340px;

    background:#fff;

    border-radius:20px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    overflow:hidden;

    z-index:1200;

}

.widget-dropdown.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.widget-header{

    padding:18px 22px;

    border-bottom:1px solid var(--border);

    font-weight:700;

}

.widget-body{

    max-height:380px;

    overflow-y:auto;

}

.widget-footer{

    padding:16px;

    text-align:center;

    border-top:1px solid var(--border);

}


/*==========================================================
 QUICK ACTION MENU
==========================================================*/

.quick-actions{

    position:relative;

}

.quick-action-button{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

}

.quick-action-button:hover{

    transform:rotate(90deg);

}

.quick-menu{

    position:absolute;

    top:60px;

    right:0;

    width:320px;

    background:#fff;

    border-radius:22px;

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

    padding:20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:1200;

}

.quick-menu.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.quick-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:24px;

    border-radius:18px;

    background:var(--section);

    transition:.3s;

    cursor:pointer;

}

.quick-item:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-4px);

}

.quick-item i{

    font-size:30px;

}

.quick-item span{

    font-size:14px;

    font-weight:600;

    text-align:center;

}


/*==========================================================
 ACTIVE STATE
==========================================================*/

.is-active{

    background:var(--secondary)!important;

    color:#fff!important;

}


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

@media(max-width:992px){

.language-selector{

display:none;

}

}

@media(max-width:768px){

.header-widgets{

gap:10px;

}

.widget-button,

.quick-action-button,

.theme-switcher{

width:42px;

height:42px;

}

.quick-menu{

width:290px;

grid-template-columns:1fr 1fr;

}

.widget-dropdown{

width:300px;

}

}

@media(max-width:576px){

.quick-menu{

right:-15px;

width:280px;

}

.widget-dropdown{

right:-15px;

width:280px;

}

.theme-menu,

.language-menu{

right:-10px;

width:200px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Part : 2C.2
 Enterprise Header Utilities
==========================================================*/


/*==========================================================
 BREADCRUMB
==========================================================*/

.breadcrumb-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:18px 30px;

    background:#fff;

    border-bottom:1px solid var(--border);

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    margin:0;

    padding:0;

    list-style:none;

}

.breadcrumb li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-light);

    font-size:14px;

}

.breadcrumb li:last-child{

    color:var(--primary);

    font-weight:600;

}

.breadcrumb a{

    color:inherit;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--secondary);

}

.breadcrumb i{

    font-size:11px;

}


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

.page-heading{

    display:flex;

    flex-direction:column;

}

.page-heading h1{

    font-size:28px;

    margin-bottom:6px;

}

.page-heading small{

    color:var(--text-light);

}


/*==========================================================
 STICKY HEADER MODES
==========================================================*/

.header-default{

    position:relative;

}

.header-sticky{

    position:sticky;

    top:0;

    z-index:1000;

}

.header-floating{

    margin:15px;

    border-radius:20px;

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

}

.header-compact{

    min-height:64px;

}

.header-shadow{

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

}


/*==========================================================
 ANNOUNCEMENT BAR
==========================================================*/

.announcement-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:44px;

    padding:0 30px;

    background:var(--gradient-primary);

    color:#fff;

}

.announcement-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.announcement-icon{

    color:var(--accent);

}

.announcement-text{

    font-size:14px;

}

.announcement-actions{

    display:flex;

    gap:15px;

}

.announcement-actions a{

    color:#fff;

    opacity:.9;

}

.announcement-actions a:hover{

    opacity:1;

}


/*==========================================================
 KEYBOARD SHORTCUT
==========================================================*/

.shortcut-key{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:28px;

    height:28px;

    padding:0 10px;

    border-radius:8px;

    background:var(--section);

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

    font-size:12px;

    font-weight:600;

    color:var(--heading);

}

.shortcut-group{

    display:flex;

    align-items:center;

    gap:8px;

}


/*==========================================================
 PAGE ACTIONS
==========================================================*/

.page-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.page-action{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:12px;

    background:var(--section);

    transition:.3s;

    cursor:pointer;

}

.page-action:hover{

    background:var(--secondary);

    color:#fff;

}

.page-action i{

    font-size:16px;

}


/*==========================================================
 ENVIRONMENT BADGE
==========================================================*/

.environment{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.env-development{

    background:#FFF3CD;

    color:#856404;

}

.env-staging{

    background:#CCE5FF;

    color:#004085;

}

.env-production{

    background:#D4EDDA;

    color:#155724;

}

.environment i{

    font-size:11px;

}


/*==========================================================
 ORGANIZATION PANEL
==========================================================*/

.organization-panel{

    display:flex;

    align-items:center;

    gap:14px;

}

.organization-logo{

    width:42px;

    height:42px;

    border-radius:12px;

    overflow:hidden;

}

.organization-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.organization-info{

    display:flex;

    flex-direction:column;

}

.organization-info strong{

    font-size:15px;

}

.organization-info span{

    font-size:12px;

    color:var(--text-light);

}


/*==========================================================
 WORKSPACE INFO
==========================================================*/

.workspace-info{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:16px;

    background:var(--section);

}

.workspace-status{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#28A745;

}


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

.header-tools{

    display:flex;

    align-items:center;

    gap:14px;

}

.header-divider{

    width:1px;

    height:34px;

    background:var(--border);

}

.header-chip{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:40px;

    background:var(--section);

    font-size:13px;

    font-weight:600;

}

.header-chip i{

    color:var(--secondary);

}


/*==========================================================
 SYSTEM STATUS
==========================================================*/

.system-status{

    display:flex;

    align-items:center;

    gap:8px;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#28A745;

    animation:statusPulse 2s infinite;

}

@keyframes statusPulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.3);

opacity:.6;

}

100%{

transform:scale(1);

opacity:1;

}

}


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

.header-stats{

    display:flex;

    align-items:center;

    gap:18px;

}

.header-stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:70px;

}

.header-stat strong{

    color:var(--primary);

    font-size:18px;

}

.header-stat span{

    font-size:11px;

    color:var(--text-light);

}


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

@media(max-width:1200px){

.header-stats{

display:none;

}

}

@media(max-width:992px){

.organization-info,

.workspace-info,

.environment{

display:none;

}

.page-actions{

width:100%;

justify-content:flex-start;

}

}

@media(max-width:768px){

.breadcrumb-bar{

padding:15px 20px;

flex-direction:column;

align-items:flex-start;

}

.announcement-bar{

padding:0 20px;

}

.page-actions{

gap:8px;

}

.page-action{

padding:8px 14px;

}

}

@media(max-width:576px){

.announcement-actions{

display:none;

}

.breadcrumb{

font-size:13px;

}

.page-heading h1{

font-size:22px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 06-header.css
 Part : 2C.3
 Mobile Navigation • Accessibility • Performance
==========================================================*/


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

.mobile-header{

    display:none;

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:70px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);

    z-index:1200;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

}

.mobile-logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.mobile-logo img{

    height:42px;

}


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

.mobile-sidebar{

    position:fixed;

    top:0;

    left:-100%;

    width:300px;

    max-width:90vw;

    height:100vh;

    background:var(--primary);

    color:#fff;

    overflow-y:auto;

    transition:left .35s ease;

    z-index:1300;

    padding:25px;

}

.mobile-sidebar.active{

    left:0;

}

.mobile-sidebar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;

}

.mobile-sidebar-close{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.10);

    cursor:pointer;

}

.mobile-sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mobile-sidebar-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    color:#fff;

    border-radius:12px;

    transition:.3s;

}

.mobile-sidebar-nav a:hover,

.mobile-sidebar-nav a.active{

    background:rgba(255,255,255,.12);

}


/*==========================================================
 MOBILE OVERLAY
==========================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1250;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

}


/*==========================================================
 MOBILE BOTTOM NAVIGATION
==========================================================*/

.mobile-bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:68px;

    background:#fff;

    display:none;

    justify-content:space-around;

    align-items:center;

    border-top:1px solid var(--border);

    box-shadow:0 -6px 20px rgba(0,0,0,.08);

    z-index:1200;

}

.mobile-bottom-nav a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:var(--text-light);

    font-size:11px;

    transition:.3s;

}

.mobile-bottom-nav a i{

    font-size:20px;

}

.mobile-bottom-nav a.active,

.mobile-bottom-nav a:hover{

    color:var(--secondary);

}


/*==========================================================
 TOUCH TARGETS
==========================================================*/

.touch-target{

    min-width:44px;

    min-height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

:focus-visible{

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

    outline-offset:3px;

}

.skip-link{

    position:absolute;

    left:-9999px;

    top:auto;

}

.skip-link:focus{

    left:20px;

    top:20px;

    background:#fff;

    color:#000;

    padding:12px 18px;

    border-radius:10px;

    z-index:9999;

}


/*==========================================================
 HIGH CONTRAST
==========================================================*/

.high-contrast{

    filter:contrast(125%);

}

.high-contrast .site-header,

.high-contrast .dashboard-header{

    border-bottom:2px solid #000;

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==========================================================
 SAFE AREA
==========================================================*/

.safe-top{

    padding-top:env(safe-area-inset-top);

}

.safe-bottom{

    padding-bottom:env(safe-area-inset-bottom);

}

.safe-left{

    padding-left:env(safe-area-inset-left);

}

.safe-right{

    padding-right:env(safe-area-inset-right);

}


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

@media print{

.site-header,

.dashboard-header,

.mobile-header,

.mobile-bottom-nav,

.mobile-sidebar,

.mobile-overlay{

display:none !important;

}

body{

padding-top:0;

}

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.site-header,

.dashboard-header,

.mobile-header,

.mobile-sidebar{

will-change:transform;

transform:translateZ(0);

backface-visibility:hidden;

}


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

@media(max-width:992px){

.site-header{

display:none;

}

.mobile-header{

display:flex;

}

.dashboard-header{

padding-left:20px;

padding-right:20px;

}

}

@media(max-width:768px){

.mobile-bottom-nav{

display:flex;

}

.dashboard-content{

padding-bottom:90px;

}

}

@media(max-width:576px){

.mobile-sidebar{

width:100%;

max-width:100%;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Version : 1.0
 Part : 1
 Hero Foundation
==========================================================*/


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--primary);

}

.hero-full{

    min-height:100vh;

}

.hero-large{

    min-height:900px;

}

.hero-medium{

    min-height:760px;

}

.hero-small{

    min-height:620px;

}


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

.hero-background{

    position:absolute;

    inset:0;

    z-index:1;

    overflow:hidden;

}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-background video{

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.hero-overlay{

    position:absolute;

    inset:0;

    background:var(--gradient-hero);

    z-index:2;

}

.hero-overlay-dark{

    background:rgba(0,0,0,.55);

}

.hero-overlay-light{

    background:rgba(255,255,255,.25);

}

.hero-overlay-blue{

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

}


/*==========================================================
 HERO CONTENT WRAPPER
==========================================================*/

.hero-wrapper{

    position:relative;

    z-index:5;

    width:100%;

}

.hero-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-content{

    position:relative;

}

.hero-media{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.hero-caption{

    margin-bottom:20px;

}

.hero-title{

    margin-bottom:25px;

}

.hero-description{

    max-width:680px;

    margin-bottom:35px;

}


/*==========================================================
 CTA AREA
==========================================================*/

.hero-actions{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    align-items:center;

}

.hero-actions .btn-sicep{

    min-width:190px;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    color:#fff;

    font-weight:600;

}

.hero-badge i{

    color:var(--accent);

}


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

.hero-top{

    padding-top:120px;

}

.hero-bottom{

    padding-bottom:80px;

}


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

.hero-image{

    position:relative;

    text-align:center;

}

.hero-image img{

    max-width:100%;

    height:auto;

}


/*==========================================================
 IMAGE VARIANTS
==========================================================*/

.hero-image-rounded img{

    border-radius:24px;

}

.hero-image-shadow img{

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

}

.hero-image-float{

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

}


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

.hero-grid{

    display:grid;

    gap:40px;

}

.hero-grid-2{

    grid-template-columns:repeat(2,1fr);

}

.hero-grid-3{

    grid-template-columns:repeat(3,1fr);

}


/*==========================================================
 BACKGROUND POSITION
==========================================================*/

.bg-center{

    background-position:center;

}

.bg-top{

    background-position:top;

}

.bg-bottom{

    background-position:bottom;

}

.bg-cover{

    background-size:cover;

}

.bg-contain{

    background-size:contain;

}


/*==========================================================
 PARALLAX SUPPORT
==========================================================*/

.hero-parallax{

    background-attachment:fixed;

}


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

.hero-relative{

    position:relative;

}

.hero-z{

    z-index:10;

}

.hero-white{

    color:#fff;

}

.hero-dark{

    color:var(--heading);

}


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

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:1200px){

.hero-row{

gap:50px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

}

.hero-row{

grid-template-columns:1fr;

}

.hero-content{

order:2;

}

.hero-media{

order:1;

}

.hero-actions{

justify-content:center;

}

.hero-description{

margin-left:auto;

margin-right:auto;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

padding:100px 0 70px;

}

.hero-actions{

flex-direction:column;

align-items:stretch;

}

.hero-actions .btn-sicep{

width:100%;

}

}

@media(max-width:576px){

.hero-title{

font-size:2.2rem;

}

.hero-description{

font-size:1rem;

}

.hero-badge{

font-size:13px;

padding:8px 16px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Part : 2
 Premium Hero Components
==========================================================*/


/*==========================================================
 GLASS HERO PANEL
==========================================================*/

.hero-glass{

    position:relative;

    padding:40px;

    border-radius:28px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}


/*==========================================================
 FLOATING KPI CARDS
==========================================================*/

.hero-stat{

    position:absolute;

    min-width:220px;

    padding:24px;

    border-radius:22px;

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

    backdrop-filter:blur(14px);

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

    transition:.35s;

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

}

.hero-stat:hover{

    transform:translateY(-8px);

}

.hero-stat h2{

    margin:0;

    color:var(--primary);

    font-size:2rem;

    font-weight:800;

}

.hero-stat span{

    color:var(--text-light);

    font-size:14px;

}

.hero-stat i{

    font-size:32px;

    color:var(--secondary);

    margin-bottom:15px;

}

.stat-top-left{

    top:40px;

    left:-70px;

}

.stat-top-right{

    top:60px;

    right:-60px;

}

.stat-bottom-left{

    bottom:60px;

    left:-80px;

}

.stat-bottom-right{

    bottom:40px;

    right:-70px;

}


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

.hero-kpi-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:35px;

}

.hero-kpi{

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    border-radius:18px;

    padding:20px;

    text-align:center;

}

.hero-kpi strong{

    display:block;

    font-size:2rem;

    color:#fff;

}

.hero-kpi span{

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

    font-size:13px;

}


/*==========================================================
 AI ILLUSTRATION
==========================================================*/

.ai-illustration{

    position:relative;

    max-width:620px;

    margin:auto;

}

.ai-illustration img{

    width:100%;

    animation:heroFloat 8s ease-in-out infinite;

}

.ai-ring{

    position:absolute;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.20);

    animation:rotateRing 25s linear infinite;

}

.ai-ring.ring-lg{

    width:520px;

    height:520px;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.ai-ring.ring-md{

    width:420px;

    height:420px;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    animation-duration:18s;

}


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

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:35px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:14px;

    backdrop-filter:blur(10px);

}

.trust-item i{

    color:var(--accent);

}


/*==========================================================
 PARTNER LOGOS
==========================================================*/

.partner-strip{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    margin-top:60px;

    flex-wrap:wrap;

}

.partner-strip img{

    height:48px;

    opacity:.75;

    filter:grayscale(100%);

    transition:.35s;

}

.partner-strip img:hover{

    opacity:1;

    filter:none;

    transform:scale(1.05);

}


/*==========================================================
 SCROLL INDICATOR
==========================================================*/

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    z-index:10;

}

.mouse{

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.75);

    border-radius:40px;

    position:relative;

}

.mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    width:6px;

    height:12px;

    background:#fff;

    border-radius:20px;

    transform:translateX(-50%);

    animation:mouseScroll 2s infinite;

}


/*==========================================================
 FLOATING SHAPES
==========================================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(4px);

    opacity:.18;

}

.shape-blue{

    width:240px;

    height:240px;

    background:#1E88E5;

    top:10%;

    right:-80px;

}

.shape-gold{

    width:180px;

    height:180px;

    background:#C9A14D;

    bottom:10%;

    left:-60px;

}

.shape-purple{

    width:120px;

    height:120px;

    background:#6F42C1;

    top:55%;

    right:20%;

}


/*==========================================================
 PRESENTATION LAYOUT
==========================================================*/

.presentation-hero{

    max-width:1400px;

    margin:auto;

}

.presentation-panel{

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}


/*==========================================================
 ANIMATIONS
==========================================================*/

@keyframes heroCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

@keyframes mouseScroll{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

        transform:translate(-50%,20px);

    }

}

@keyframes rotateRing{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}


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

@media(max-width:1200px){

.hero-stat{

min-width:180px;

}

.ai-ring.ring-lg{

width:420px;

height:420px;

}

}

@media(max-width:992px){

.hero-stat{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:15px auto;

}

.hero-kpi-grid{

grid-template-columns:1fr;

}

.partner-strip{

gap:25px;

}

}

@media(max-width:768px){

.hero-glass{

padding:30px;

}

.partner-strip img{

height:40px;

}

.hero-scroll{

display:none;

}

.ai-ring{

display:none;

}

}

@media(max-width:576px){

.hero-glass{

padding:22px;

}

.trust-item{

width:100%;

justify-content:center;

}

.hero-stat{

min-width:100%;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Part : 3A
 Core Motion System
==========================================================*/


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

:root{

    --motion-fast:.25s;

    --motion-normal:.45s;

    --motion-slow:.8s;

    --ease-default:cubic-bezier(.4,0,.2,1);

    --ease-premium:cubic-bezier(.16,1,.3,1);

}


/*==========================================================
 ANIMATED GRADIENT TEXT
==========================================================*/

.hero-gradient-text{

    background:linear-gradient(
        90deg,
        #ffffff,
        #C9A14D,
        #1E88E5,
        #ffffff
    );

    background-size:300% auto;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientFlow 8s linear infinite;

}

@keyframes gradientFlow{

0%{

background-position:0% center;

}

100%{

background-position:300% center;

}

}


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

.hero-shimmer{

    position:relative;

    overflow:hidden;

}

.hero-shimmer::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:translateX(-120%);

    animation:textShimmer 3.5s infinite;

}

@keyframes textShimmer{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(140%);

}

}


/*==========================================================
 TYPING EFFECT SUPPORT
==========================================================*/

.typing-text{

    display:inline-block;

    white-space:nowrap;

    overflow:hidden;

    border-right:3px solid currentColor;

    animation:

        typingCursor .8s step-end infinite;

}

@keyframes typingCursor{

50%{

border-color:transparent;

}

}


/*==========================================================
 FADE ANIMATIONS
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s var(--ease-premium),

    transform .8s var(--ease-premium);

}

.fade-down{

    opacity:0;

    transform:translateY(-40px);

    transition:

    opacity .8s var(--ease-premium),

    transform .8s var(--ease-premium);

}

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    transition:

    opacity .8s var(--ease-premium),

    transform .8s var(--ease-premium);

}

.fade-right{

    opacity:0;

    transform:translateX(50px);

    transition:

    opacity .8s var(--ease-premium),

    transform .8s var(--ease-premium);

}

.fade-scale{

    opacity:0;

    transform:scale(.92);

    transition:

    opacity .8s,

    transform .8s;

}

.is-visible{

    opacity:1 !important;

    transform:none !important;

}


/*==========================================================
 SLIDE EFFECTS
==========================================================*/

.slide-up{

    animation:slideUp .9s var(--ease-premium);

}

.slide-down{

    animation:slideDown .9s var(--ease-premium);

}

.slide-left{

    animation:slideLeft .9s var(--ease-premium);

}

.slide-right{

    animation:slideRight .9s var(--ease-premium);

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-60px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-70px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:none;

}

}


/*==========================================================
 ZOOM EFFECTS
==========================================================*/

.zoom-in{

    animation:zoomIn .8s var(--ease-premium);

}

.zoom-out{

    animation:zoomOut .8s var(--ease-premium);

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.75);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes zoomOut{

from{

opacity:0;

transform:scale(1.15);

}

to{

opacity:1;

transform:scale(1);

}

}


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

.stagger>*{

    opacity:0;

    transform:translateY(35px);

}

.stagger>*:nth-child(1){

transition-delay:.05s;

}

.stagger>*:nth-child(2){

transition-delay:.15s;

}

.stagger>*:nth-child(3){

transition-delay:.25s;

}

.stagger>*:nth-child(4){

transition-delay:.35s;

}

.stagger>*:nth-child(5){

transition-delay:.45s;

}

.stagger>*:nth-child(6){

transition-delay:.55s;

}

.stagger.is-visible>*{

    opacity:1;

    transform:none;

    transition:

    opacity .75s,

    transform .75s;

}


/*==========================================================
 FLOATING ELEMENTS
==========================================================*/

.float-soft{

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

}

.float-medium{

    animation:floatMedium 8s ease-in-out infinite;

}

.float-strong{

    animation:floatStrong 10s ease-in-out infinite;

}

@keyframes floatSoft{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes floatMedium{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes floatStrong{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-28px);

}

}


/*==========================================================
 ROTATION
==========================================================*/

.rotate-slow{

    animation:rotateSlow 18s linear infinite;

}

.rotate-fast{

    animation:rotateFast 8s linear infinite;

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes rotateFast{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*==========================================================
 PULSE
==========================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}


/*==========================================================
 REVEAL UTILITIES
==========================================================*/

.reveal{

    opacity:0;

    visibility:hidden;

}

.reveal.active{

    opacity:1;

    visibility:visible;

}


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

.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.delay-300{animation-delay:.3s;}
.delay-400{animation-delay:.4s;}
.delay-500{animation-delay:.5s;}
.delay-600{animation-delay:.6s;}
.delay-700{animation-delay:.7s;}
.delay-800{animation-delay:.8s;}


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

.speed-fast{

animation-duration:.4s;

}

.speed-normal{

animation-duration:.8s;

}

.speed-slow{

animation-duration:1.4s;

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-scale,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.zoom-in,
.zoom-out,
.float-soft,
.float-medium,
.float-strong{

    will-change:transform,opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-scale,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.zoom-in,
.zoom-out,
.float-soft,
.float-medium,
.float-strong,
.rotate-slow,
.rotate-fast,
.hero-gradient-text,
.hero-shimmer{

animation:none !important;

transition:none !important;

transform:none !important;

opacity:1 !important;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Part : 3B
 Premium Visual Effects
==========================================================*/


/*==========================================================
 BACKGROUND BLOBS
==========================================================*/

.hero-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.18;

    pointer-events:none;

    animation:blobFloat 18s ease-in-out infinite;

}

.blob-primary{

    width:520px;

    height:520px;

    background:#1E88E5;

    top:-120px;

    right:-140px;

}

.blob-accent{

    width:420px;

    height:420px;

    background:#C9A14D;

    bottom:-120px;

    left:-120px;

    animation-delay:4s;

}

.blob-purple{

    width:300px;

    height:300px;

    background:#6F42C1;

    top:45%;

    left:50%;

    transform:translate(-50%,-50%);

    animation-delay:8s;

}

@keyframes blobFloat{

0%,100%{

transform:translate3d(0,0,0) scale(1);

}

33%{

transform:translate3d(40px,-30px,0) scale(1.08);

}

66%{

transform:translate3d(-35px,25px,0) scale(.95);

}

}


/*==========================================================
 GRADIENT ORBS
==========================================================*/

.gradient-orb{

    position:absolute;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.9) 0%,
    rgba(30,136,229,.55) 35%,
    rgba(30,136,229,0) 70%);

    mix-blend-mode:screen;

    animation:orbPulse 7s ease-in-out infinite;

}

.orb-lg{

    width:240px;

    height:240px;

}

.orb-md{

    width:160px;

    height:160px;

}

.orb-sm{

    width:90px;

    height:90px;

}

@keyframes orbPulse{

0%,100%{

opacity:.45;

transform:scale(1);

}

50%{

opacity:.9;

transform:scale(1.2);

}

}


/*==========================================================
 AI NODES
==========================================================*/

.ai-node{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

    box-shadow:

        0 0 0 6px rgba(30,136,229,.12),

        0 0 20px rgba(30,136,229,.7);

    animation:nodeBlink 2.8s infinite;

}

.ai-node::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

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

}

@keyframes nodeBlink{

0%,100%{

opacity:1;

transform:scale(1);

}

50%{

opacity:.45;

transform:scale(1.35);

}

}


/*==========================================================
 FLOATING ICONS
==========================================================*/

.hero-floating-icon{

    position:absolute;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

    color:#fff;

    font-size:28px;

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

    animation:iconFloat 8s ease-in-out infinite;

}

.hero-floating-icon:nth-child(even){

    animation-duration:10s;

}

@keyframes iconFloat{

0%,100%{

transform:translateY(0) rotate(0deg);

}

50%{

transform:translateY(-18px) rotate(6deg);

}

}


/*==========================================================
 PARTICLE LAYER
==========================================================*/

.hero-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

.hero-particles canvas{

    width:100%;

    height:100%;

    display:block;

}


/*==========================================================
 GRID BACKGROUND
==========================================================*/

.hero-grid-bg{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle at center,#000 45%,transparent 95%);

    opacity:.35;

}


/*==========================================================
 LIGHT RAYS
==========================================================*/

.hero-light-rays{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-light-rays::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-10%;

    width:140%;

    height:200%;

    background:linear-gradient(

        115deg,

        transparent 20%,

        rgba(255,255,255,.10) 45%,

        transparent 70%

    );

    transform:rotate(-18deg);

    animation:lightSweep 14s linear infinite;

}

@keyframes lightSweep{

0%{

transform:translateX(-45%) rotate(-18deg);

}

100%{

transform:translateX(45%) rotate(-18deg);

}

}


/*==========================================================
 SVG WAVE
==========================================================*/

.hero-wave{

    position:absolute;

    left:0;

    bottom:-1px;

    width:100%;

    line-height:0;

    overflow:hidden;

}

.hero-wave svg{

    width:100%;

    height:120px;

    display:block;

}

.hero-wave path{

    fill:#ffffff;

}


/*==========================================================
 GLOW PANELS
==========================================================*/

.hero-glow{

    position:absolute;

    inset:auto;

    width:280px;

    height:280px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(201,161,77,.35),
    transparent 70%);

    filter:blur(45px);

    animation:glowDrift 12s ease-in-out infinite;

}

@keyframes glowDrift{

0%,100%{

transform:translate(0,0);

}

50%{

transform:translate(30px,-20px);

}

}


/*==========================================================
 AMBIENT PARTICLES
==========================================================*/

.ambient-dot{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    animation:ambientRise 10s linear infinite;

}

@keyframes ambientRise{

0%{

opacity:0;

transform:translateY(50px) scale(.6);

}

20%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(-220px) scale(1.4);

}

}


/*==========================================================
 PRESENTATION GLOW
==========================================================*/

.presentation-glow{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(30,136,229,.12),
    transparent 45%),

    radial-gradient(circle at 80% 65%,
    rgba(201,161,77,.10),
    transparent 45%);

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.hero-blob,
.gradient-orb,
.hero-floating-icon,
.hero-glow{

    will-change:transform,opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}


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

@media(max-width:992px){

.hero-floating-icon{

display:none;

}

.blob-primary{

width:360px;

height:360px;

}

.blob-accent{

width:300px;

height:300px;

}

}

@media(max-width:768px){

.hero-grid-bg,

.hero-light-rays{

display:none;

}

.gradient-orb{

opacity:.5;

}

.hero-wave svg{

height:80px;

}

}

@media(max-width:576px){

.hero-blob{

filter:blur(60px);

opacity:.12;

}

.hero-glow{

display:none;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Part : 3C
 Interactive Hero Motion System
==========================================================*/


/*==========================================================
 PREMIUM CTA BUTTONS
==========================================================*/

.hero-cta{

    position:relative;

    overflow:hidden;

    transition:all .35s cubic-bezier(.16,1,.3,1);

}

.hero-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:translateX(-140%);

}

.hero-cta:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 45px rgba(0,0,0,.22);

}

.hero-cta:hover::before{

    animation:ctaShine .8s forwards;

}

@keyframes ctaShine{

to{

transform:translateX(160%);

}

}


/*==========================================================
 MAGNETIC EFFECT
==========================================================*/

.magnetic{

    transition:

    transform .18s ease,

    box-shadow .3s ease;

    will-change:transform;

}

.magnetic:hover{

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}


/*==========================================================
 SCROLL REVEAL
==========================================================*/

.reveal-item{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s,

    transform .8s;

}

.reveal-item.show{

    opacity:1;

    transform:none;

}

.reveal-left{

    transform:translateX(-70px);

}

.reveal-right{

    transform:translateX(70px);

}

.reveal-zoom{

    transform:scale(.88);

}


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

.hero-image-hover{

    transition:

    transform .45s,

    filter .45s;

}

.hero-image-hover:hover{

    transform:scale(1.03) rotate(.5deg);

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.20));

}


/*==========================================================
 GLASS CARD INTERACTION
==========================================================*/

.hero-glass-card{

    transition:

    transform .35s,

    box-shadow .35s,

    border-color .35s;

}

.hero-glass-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,255,255,.35);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}


/*==========================================================
 PARALLAX LAYERS
==========================================================*/

.parallax-layer{

    position:absolute;

    inset:0;

    pointer-events:none;

    transform-style:preserve-3d;

}

.parallax-slow{

    transition:transform .2s linear;

}

.parallax-medium{

    transition:transform .15s linear;

}

.parallax-fast{

    transition:transform .1s linear;

}


/*==========================================================
 COUNTER STYLE
==========================================================*/

.hero-counter{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.hero-counter-value{

    font-size:3rem;

    font-weight:800;

    color:#fff;

}

.hero-counter-label{

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

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

}


/*==========================================================
 AI DATA FLOW
==========================================================*/

.data-flow{

    position:relative;

    overflow:hidden;

}

.data-flow::after{

    content:"";

    position:absolute;

    left:-35%;

    top:50%;

    width:35%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #ffffff,
        transparent
    );

    animation:dataFlow 2.8s linear infinite;

}

@keyframes dataFlow{

to{

left:120%;

}

}


/*==========================================================
 CONNECTION LINES
==========================================================*/

.ai-link{

    stroke-dasharray:12;

    animation:dashMove 8s linear infinite;

}

@keyframes dashMove{

to{

stroke-dashoffset:-240;

}

}


/*==========================================================
 PRESENTATION STATES
==========================================================*/

.presentation-enter{

    opacity:0;

    transform:translateY(50px);

}

.presentation-enter.active{

    opacity:1;

    transform:none;

    transition:

    opacity .9s,

    transform .9s;

}

.presentation-focus{

    box-shadow:

    0 0 0 5px rgba(30,136,229,.15),

    0 20px 45px rgba(0,0,0,.18);

}


/*==========================================================
 FLOATING ICON HOVER
==========================================================*/

.hero-floating-icon:hover{

    transform:

    translateY(-12px)

    scale(1.08)

    rotate(8deg);

}


/*==========================================================
 CTA GROUP
==========================================================*/

.hero-action-group{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-action-group>.btn-sicep{

    flex:0 0 auto;

}


/*==========================================================
 MOTION UTILITIES
==========================================================*/

.motion-none{

    animation:none!important;

    transition:none!important;

}

.motion-delay-1{

animation-delay:.15s;

}

.motion-delay-2{

animation-delay:.3s;

}

.motion-delay-3{

animation-delay:.45s;

}

.motion-delay-4{

animation-delay:.6s;

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.hero-cta,
.hero-image-hover,
.hero-glass-card,
.reveal-item{

    will-change:

    transform,

    opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}


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

.hero-cta:focus-visible,
.hero-glass-card:focus-visible{

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

    outline-offset:4px;

}

@media (prefers-reduced-motion:reduce){

.hero-cta,
.hero-image-hover,
.hero-glass-card,
.hero-floating-icon,
.data-flow::after{

animation:none!important;

transition:none!important;

transform:none!important;

}

}


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

@media(max-width:992px){

.hero-counter-value{

font-size:2.4rem;

}

}

@media(max-width:768px){

.hero-action-group{

flex-direction:column;

}

.hero-action-group>.btn-sicep{

width:100%;

}

}

@media(max-width:576px){

.hero-counter-value{

font-size:2rem;

}

.hero-counter-label{

font-size:12px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 07-hero.css
 Part : 4
 Responsive Hero Framework
==========================================================*/


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

.hero-standard{
    min-height:100vh;
}

.hero-compact{
    min-height:720px;
}

.hero-centered{
    text-align:center;
}

.hero-centered .hero-row{
    grid-template-columns:1fr;
}

.hero-centered .hero-content{
    max-width:920px;
    margin:auto;
}

.hero-split .hero-row{
    grid-template-columns:55% 45%;
}

.hero-image-left .hero-content{
    order:2;
}

.hero-image-left .hero-media{
    order:1;
}

.hero-reverse .hero-row{
    direction:rtl;
}

.hero-reverse .hero-content{
    direction:ltr;
}

.hero-reverse .hero-media{
    direction:ltr;
}


/*==========================================================
 LANDING PAGE VARIANTS
==========================================================*/

.hero-product{
    min-height:900px;
}

.hero-platform{
    min-height:950px;
}

.hero-dashboard{
    min-height:700px;
}

.hero-investor{
    min-height:1000px;
}

.hero-school{
    min-height:880px;
}

.hero-ai{
    min-height:980px;
}


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

.hero-dark{
    background:#08111f;
    color:#fff;
}

.hero-dark .hero-title{
    color:#fff;
}

.hero-dark .hero-description{
    color:rgba(255,255,255,.82);
}

.hero-light{
    background:#ffffff;
    color:var(--heading);
}

.hero-light .hero-title{
    color:var(--heading);
}

.hero-light .hero-description{
    color:var(--text-light);
}

.hero-gradient{
    background:var(--gradient-primary);
}

.hero-glass-theme{
    background:
        linear-gradient(
            135deg,
            rgba(15,39,71,.94),
            rgba(30,136,229,.82)
        );
}


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

.hero-start{
    align-items:flex-start;
}

.hero-center{
    align-items:center;
}

.hero-end{
    align-items:flex-end;
}

.hero-left{
    text-align:left;
}

.hero-right{
    text-align:right;
}


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

.hero-content-sm{
    max-width:560px;
}

.hero-content-md{
    max-width:720px;
}

.hero-content-lg{
    max-width:920px;
}

.hero-content-xl{
    max-width:1100px;
}


/*==========================================================
 TYPOGRAPHY SCALING
==========================================================*/

.hero-title-xl{
    font-size:5.5rem;
    line-height:1.05;
}

.hero-title-lg{
    font-size:4.5rem;
}

.hero-title-md{
    font-size:3.5rem;
}

.hero-title-sm{
    font-size:2.8rem;
}

.hero-description-lg{
    font-size:1.35rem;
}

.hero-description-md{
    font-size:1.15rem;
}

.hero-description-sm{
    font-size:1rem;
}


/*==========================================================
 DESKTOP (≥1600px)
==========================================================*/

@media(min-width:1600px){

.hero{
    min-height:1080px;
}

.hero-row{
    gap:90px;
}

.hero-title{
    font-size:6rem;
}

.hero-description{
    font-size:1.45rem;
    max-width:760px;
}

.hero-actions{
    gap:24px;
}

}


/*==========================================================
 LARGE DESKTOP
==========================================================*/

@media(max-width:1400px){

.hero-row{
    gap:60px;
}

.hero-title-xl{
    font-size:5rem;
}

}


/*==========================================================
 LAPTOP
==========================================================*/

@media(max-width:1200px){

.hero{
    min-height:900px;
}

.hero-row{
    gap:50px;
}

.hero-title-xl{
    font-size:4.4rem;
}

.hero-title-lg{
    font-size:4rem;
}

.hero-description-lg{
    font-size:1.2rem;
}

}


/*==========================================================
 TABLET
==========================================================*/

@media(max-width:992px){

.hero{
    min-height:auto;
    padding:120px 0 80px;
}

.hero-row,
.hero-split .hero-row{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-media{
    order:1;
}

.hero-content{
    order:2;
}

.hero-title-xl{
    font-size:3.6rem;
}

.hero-title-lg{
    font-size:3.2rem;
}

.hero-title-md{
    font-size:2.8rem;
}

.hero-description{

    margin-left:auto;

    margin-right:auto;

}

.hero-actions{

    justify-content:center;

}

.hero-content-sm,
.hero-content-md,
.hero-content-lg,
.hero-content-xl{

    max-width:760px;
    margin:auto;

}

}


/*==========================================================
 MOBILE
==========================================================*/

@media(max-width:768px){

.hero{

    padding:100px 0 70px;

}

.hero-title-xl{

    font-size:2.9rem;

}

.hero-title-lg{

    font-size:2.6rem;

}

.hero-title-md{

    font-size:2.3rem;

}

.hero-title-sm{

    font-size:2rem;

}

.hero-description-lg{

    font-size:1.08rem;

}

.hero-actions{

    flex-direction:column;

    align-items:stretch;

}

.hero-actions .btn-sicep{

    width:100%;

}

.hero-badge{

    font-size:13px;

}

}


/*==========================================================
 SMALL MOBILE
==========================================================*/

@media(max-width:576px){

.hero{

    padding:90px 0 60px;

}

.hero-title-xl{

    font-size:2.3rem;

}

.hero-title-lg{

    font-size:2.1rem;

}

.hero-title-md{

    font-size:1.9rem;

}

.hero-description{

    font-size:15px;

}

.hero-wrapper{

    padding:0 10px;

}

}


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

.hero-no-overlay .hero-overlay{
    display:none;
}

.hero-no-animation *{
    animation:none!important;
}

.hero-static{
    min-height:auto;
}

.hero-rounded{
    border-radius:40px;
    overflow:hidden;
}

.hero-shadow{
    box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.hero-overflow-visible{
    overflow:visible;
}


/*==========================================================
 PERFORMANCE
==========================================================*/

.hero,
.hero-wrapper,
.hero-content,
.hero-media{

    contain:layout style paint;

    will-change:transform;

}


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

.hero .btn-sicep:focus-visible{

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

    outline-offset:4px;

}

@media(prefers-reduced-motion:reduce){

.hero *,
.hero::before,
.hero::after{

    animation:none!important;

    transition:none!important;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Version : 1.0
 Part : 1
 Core Card System
==========================================================*/


/*==========================================================
 BASE CARD
==========================================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

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

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

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.card:hover{

    transform:translateY(-8px);

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

}


/*==========================================================
 CARD VARIANTS
==========================================================*/

.card-flat{

    box-shadow:none;

}

.card-bordered{

    border:2px solid var(--border);

}

.card-shadow{

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

}

.card-elevated{

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}


/*==========================================================
 CONTENT CARD
==========================================================*/

.content-card{

    background:#ffffff;

    border-radius:22px;

    padding:30px;

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

    transition:.35s;

}

.content-card:hover{

    transform:translateY(-6px);

}


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

.card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px 30px;

    border-bottom:1px solid var(--border);

}

.card-title{

    font-size:1.3rem;

    font-weight:700;

    color:var(--heading);

}

.card-subtitle{

    margin-top:5px;

    color:var(--text-light);

    font-size:14px;

}


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

.card-body{

    flex:1;

    padding:30px;

}

.card-body-sm{

    padding:20px;

}

.card-body-lg{

    padding:40px;

}


/*==========================================================
 CARD FOOTER
==========================================================*/

.card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:22px 30px;

    border-top:1px solid var(--border);

    background:#fafafa;

}


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

.card-media{

    position:relative;

    overflow:hidden;

}

.card-media img{

    width:100%;

    display:block;

    transition:.45s;

}

.card:hover .card-media img{

    transform:scale(1.05);

}


/*==========================================================
 CARD IMAGE HEIGHTS
==========================================================*/

.card-image-sm{

    height:180px;

}

.card-image-md{

    height:260px;

}

.card-image-lg{

    height:360px;

}

.card-image-sm img,
.card-image-md img,
.card-image-lg img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==========================================================
 CARD OVERLAY
==========================================================*/

.card-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.65)

    );

    display:flex;

    align-items:flex-end;

    padding:25px;

    color:#fff;

}


/*==========================================================
 CARD ACTIONS
==========================================================*/

.card-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.card-action{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--section);

    transition:.3s;

    cursor:pointer;

}

.card-action:hover{

    background:var(--secondary);

    color:#fff;

}


/*==========================================================
 CARD BADGE
==========================================================*/

.card-badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:7px 14px;

    border-radius:30px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:12px;

    font-weight:700;

    z-index:5;

}


/*==========================================================
 CARD ICON
==========================================================*/

.card-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:32px;

    margin-bottom:24px;

}


/*==========================================================
 CARD DIVIDER
==========================================================*/

.card-divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:20px 0;

}


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

.border-primary{

    border-color:var(--primary);

}

.border-secondary{

    border-color:var(--secondary);

}

.border-accent{

    border-color:var(--accent);

}

.border-success{

    border-color:#28A745;

}

.border-danger{

    border-color:#DC3545;

}


/*==========================================================
 RADIUS SYSTEM
==========================================================*/

.radius-sm{

    border-radius:12px;

}

.radius-md{

    border-radius:18px;

}

.radius-lg{

    border-radius:24px;

}

.radius-xl{

    border-radius:32px;

}

.radius-pill{

    border-radius:999px;

}


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

.card-container{

    display:grid;

    gap:30px;

}

.card-grid-2{

    grid-template-columns:repeat(2,1fr);

}

.card-grid-3{

    grid-template-columns:repeat(3,1fr);

}

.card-grid-4{

    grid-template-columns:repeat(4,1fr);

}

.card-auto{

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

}


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

@media(max-width:1200px){

.card-grid-4{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.card-grid-2,
.card-grid-3,
.card-grid-4{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.card-header,
.card-footer{

padding:20px;

flex-direction:column;

align-items:flex-start;

}

.card-body{

padding:20px;

}

.content-card{

padding:24px;

}

}

@media(max-width:576px){

.card{

border-radius:18px;

}

.card-image-lg{

height:260px;

}

.card-icon{

width:60px;

height:60px;

font-size:28px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 2
 Enterprise Card Library
==========================================================*/


/*==========================================================
 GLASSMORPHISM CARD
==========================================================*/

.glass-card{

    position:relative;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:24px;

    padding:30px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.glass-card:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

}


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

.dashboard-widget{

    background:#ffffff;

    border-radius:22px;

    padding:28px;

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

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

    transition:.35s;

}

.dashboard-widget:hover{

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

}


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

.kpi-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.kpi-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    color:#fff;

    background:var(--gradient-primary);

}

.kpi-value{

    font-size:2.4rem;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}

.kpi-label{

    margin-top:6px;

    color:var(--text-light);

    font-size:14px;

}

.kpi-growth{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

    font-size:13px;

    font-weight:600;

}

.kpi-growth.up{

    color:#28A745;

}

.kpi-growth.down{

    color:#DC3545;

}


/*==========================================================
 STATISTICS CARD
==========================================================*/

.stats-card{

    text-align:center;

    padding:35px;

}

.stats-number{

    font-size:3rem;

    font-weight:800;

    color:var(--secondary);

}

.stats-title{

    margin-top:12px;

    font-size:15px;

    color:var(--text-light);

}

.stats-chart{

    margin-top:20px;

    height:70px;

}


/*==========================================================
 ANALYTICS CARD
==========================================================*/

.analytics-card{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.analytics-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.analytics-chart{

    min-height:280px;

    border-radius:18px;

    background:linear-gradient(

        180deg,

        rgba(30,136,229,.08),

        rgba(30,136,229,.02)

    );

}


/*==========================================================
 PROGRESS CARD
==========================================================*/

.progress-card{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.progress-bar{

    width:100%;

    height:10px;

    background:#EDF2F7;

    border-radius:30px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    width:65%;

    border-radius:30px;

    background:var(--gradient-primary);

}

.progress-info{

    display:flex;

    justify-content:space-between;

    font-size:14px;

}


/*==========================================================
 SUMMARY CARD
==========================================================*/

.summary-card{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.summary-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:26px;

}

.summary-content h5{

    margin-bottom:8px;

}

.summary-content p{

    color:var(--text-light);

    line-height:1.7;

}


/*==========================================================
 NOTIFICATION CARD
==========================================================*/

.notification-card{

    display:flex;

    gap:18px;

    padding:22px;

    border-left:5px solid var(--secondary);

}

.notification-avatar{

    width:54px;

    height:54px;

    border-radius:50%;

    overflow:hidden;

}

.notification-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.notification-content{

    flex:1;

}

.notification-time{

    margin-top:10px;

    font-size:12px;

    color:var(--text-light);

}


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

.timeline-card{

    position:relative;

    padding-left:70px;

}

.timeline-card::before{

    content:"";

    position:absolute;

    left:22px;

    top:0;

    bottom:0;

    width:3px;

    background:var(--border);

}

.timeline-card::after{

    content:"";

    position:absolute;

    left:14px;

    top:20px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--secondary);

    box-shadow:0 0 0 6px rgba(30,136,229,.12);

}

.timeline-content{

    background:#fff;

    padding:24px;

    border-radius:18px;

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

}


/*==========================================================
 WIDGET GRID
==========================================================*/

.widget-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}

.widget-wide{

    grid-column:span 2;

}

.widget-tall{

    min-height:420px;

}


/*==========================================================
 STATUS CHIP
==========================================================*/

.status-chip{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:40px;

    font-size:12px;

    font-weight:700;

}

.status-online{

    background:#D4EDDA;

    color:#155724;

}

.status-warning{

    background:#FFF3CD;

    color:#856404;

}

.status-offline{

    background:#F8D7DA;

    color:#721C24;

}


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

@media(max-width:1200px){

.widget-wide{

grid-column:span 1;

}

}

@media(max-width:992px){

.kpi-card{

flex-direction:column;

text-align:center;

}

.analytics-chart{

min-height:220px;

}

}

@media(max-width:768px){

.dashboard-widget,

.glass-card{

padding:22px;

}

.timeline-card{

padding-left:50px;

}

.timeline-card::before{

left:16px;

}

.timeline-card::after{

left:8px;

}

}

@media(max-width:576px){

.stats-number{

font-size:2.4rem;

}

.kpi-value{

font-size:2rem;

}

.summary-card{

flex-direction:column;

align-items:center;

text-align:center;

}

.notification-card{

flex-direction:column;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 3A
 Core Application Cards
==========================================================*/


/*==========================================================
 AI ENGINE CARD
==========================================================*/

.ai-card{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        145deg,
        #0F2747,
        #1E88E5
    );

    color:#fff;

    border-radius:24px;

    padding:32px;

    transition:.35s;

    box-shadow:0 20px 60px rgba(15,39,71,.25);

}

.ai-card:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 80px rgba(15,39,71,.35);

}

.ai-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.ai-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:rgba(255,255,255,.15);

    margin-bottom:24px;

}

.ai-score{

    font-size:3rem;

    font-weight:800;

    margin:18px 0;

}

.ai-progress{

    width:100%;

    height:10px;

    background:rgba(255,255,255,.15);

    border-radius:20px;

    overflow:hidden;

}

.ai-progress span{

    display:block;

    height:100%;

    width:82%;

    background:#C9A14D;

}


/*==========================================================
 STUDENT DASHBOARD CARD
==========================================================*/

.student-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    border-top:5px solid #1E88E5;

    transition:.35s;

}

.student-card:hover{

    transform:translateY(-6px);

}

.student-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

    margin-bottom:20px;

}

.student-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.student-name{

    font-size:1.3rem;

    font-weight:700;

}

.student-meta{

    color:var(--text-light);

    margin-top:6px;

}

.student-progress{

    margin-top:24px;

}


/*==========================================================
 PARENT PORTAL CARD
==========================================================*/

.parent-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    border-left:5px solid #28A745;

}

.parent-header{

    display:flex;

    align-items:center;

    gap:16px;

}

.parent-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    overflow:hidden;

}

.parent-summary{

    margin-top:20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.parent-metric{

    text-align:center;

    padding:18px;

    border-radius:14px;

    background:var(--section);

}

.parent-metric strong{

    display:block;

    font-size:1.6rem;

    color:var(--primary);

}


/*==========================================================
 TEACHER CARD
==========================================================*/

.teacher-card{

    background:#fff;

    border-radius:22px;

    padding:30px;

    transition:.35s;

}

.teacher-card:hover{

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

}

.teacher-header{

    display:flex;

    align-items:center;

    gap:18px;

}

.teacher-avatar{

    width:78px;

    height:78px;

    border-radius:50%;

    overflow:hidden;

}

.teacher-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.teacher-info h5{

    margin-bottom:5px;

}

.teacher-subject{

    color:var(--secondary);

    font-weight:600;

}

.teacher-stats{

    margin-top:24px;

    display:flex;

    justify-content:space-between;

}

.teacher-stat{

    text-align:center;

}

.teacher-stat strong{

    display:block;

    font-size:1.5rem;

    color:var(--primary);

}


/*==========================================================
 SCHOOL ERP CARD
==========================================================*/

.erp-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

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

}

.erp-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.erp-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:30px;

}

.erp-metrics{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.erp-metric{

    padding:20px;

    border-radius:16px;

    background:var(--section);

}

.erp-metric h3{

    margin:0;

    color:var(--primary);

    font-size:2rem;

}

.erp-metric span{

    color:var(--text-light);

    font-size:13px;

}


/*==========================================================
 COMMON STATUS BADGES
==========================================================*/

.app-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.badge-active{

    background:#D4EDDA;

    color:#155724;

}

.badge-pending{

    background:#FFF3CD;

    color:#856404;

}

.badge-completed{

    background:#CCE5FF;

    color:#004085;

}


/*==========================================================
 ACTION BAR
==========================================================*/

.card-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-top:24px;

}

.toolbar-actions{

    display:flex;

    gap:10px;

}


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

@media(max-width:992px){

.parent-summary,

.erp-metrics{

grid-template-columns:1fr;

}

.teacher-stats{

flex-wrap:wrap;

gap:20px;

}

}

@media(max-width:768px){

.ai-card,

.student-card,

.parent-card,

.teacher-card,

.erp-card{

padding:22px;

}

.teacher-header,

.parent-header{

flex-direction:column;

text-align:center;

}

.card-toolbar{

flex-direction:column;

align-items:stretch;

}

.toolbar-actions{

justify-content:center;

}

}

@media(max-width:576px){

.ai-score{

font-size:2.3rem;

}

.student-avatar,

.parent-avatar,

.teacher-avatar{

margin-left:auto;

margin-right:auto;

}

.teacher-stats{

justify-content:center;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 3B
 Learning Experience Cards
==========================================================*/


/*==========================================================
 COMPETITIVE PROGRAM CARD
==========================================================*/

.program-card{

    position:relative;

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    overflow:hidden;

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

    transition:.35s;

}

.program-card:hover{

    transform:translateY(-8px);

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

}

.program-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    color:#fff;

    background:var(--gradient-primary);

    margin-bottom:25px;

}

.program-title{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:10px;

}

.program-description{

    color:var(--text-light);

    line-height:1.7;

    margin-bottom:22px;

}

.program-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid var(--border);

}


/*==========================================================
 LMS COURSE CARD
==========================================================*/

.course-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

}

.course-banner{

    height:220px;

    overflow:hidden;

}

.course-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.course-card:hover .course-banner img{

    transform:scale(1.08);

}

.course-content{

    padding:28px;

}

.course-category{

    color:var(--secondary);

    font-weight:600;

    margin-bottom:10px;

}

.course-title{

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:15px;

}

.course-progress{

    margin-top:22px;

}

.course-footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*==========================================================
 ASSESSMENT CARD
==========================================================*/

.assessment-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    border-left:5px solid var(--accent);

}

.assessment-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.assessment-score{

    font-size:2.8rem;

    font-weight:800;

    color:var(--primary);

}

.assessment-status{

    margin-top:18px;

}


/*==========================================================
 CAREER CARD
==========================================================*/

.career-card{

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

    color:#fff;

    border-radius:24px;

    padding:32px;

    overflow:hidden;

}

.career-card h4{

    color:#fff;

}

.career-score{

    font-size:3rem;

    font-weight:800;

    margin:20px 0;

}

.career-list{

    margin-top:20px;

    list-style:none;

}

.career-list li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

}

.career-list i{

    color:var(--accent);

}


/*==========================================================
 LEARNING PATH
==========================================================*/

.learning-path{

    background:#fff;

    border-radius:22px;

    padding:28px;

}

.path-step{

    display:flex;

    gap:20px;

    margin-bottom:25px;

    position:relative;

}

.path-step::before{

    content:"";

    position:absolute;

    left:18px;

    top:42px;

    bottom:-25px;

    width:2px;

    background:var(--border);

}

.path-step:last-child::before{

    display:none;

}

.path-node{

    width:38px;

    height:38px;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}

.path-content h5{

    margin-bottom:6px;

}


/*==========================================================
 SKILL CARD
==========================================================*/

.skill-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

}

.skill-item{

    margin-bottom:22px;

}

.skill-title{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.skill-bar{

    width:100%;

    height:10px;

    border-radius:20px;

    background:#EDF2F7;

    overflow:hidden;

}

.skill-fill{

    height:100%;

    border-radius:20px;

    background:var(--gradient-primary);

}


/*==========================================================
 CERTIFICATE CARD
==========================================================*/

.certificate-card{

    background:#fff;

    border:2px dashed var(--secondary);

    border-radius:24px;

    padding:35px;

    text-align:center;

}

.certificate-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:42px;

    margin-bottom:24px;

}

.certificate-id{

    margin-top:20px;

    color:var(--text-light);

    font-size:13px;

}


/*==========================================================
 AI STUDY PLAN CARD
==========================================================*/

.study-plan-card{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:24px;

    padding:30px;

}

.study-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.study-day{

    padding:8px 16px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

}

.study-task{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.study-task i{

    color:var(--accent);

}


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

@media(max-width:992px){

.program-meta,

.course-footer,

.assessment-header,

.study-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}

@media(max-width:768px){

.program-card,

.course-content,

.assessment-card,

.career-card,

.learning-path,

.skill-card,

.certificate-card,

.study-plan-card{

padding:22px;

}

.course-banner{

height:180px;

}

}

@media(max-width:576px){

.program-icon{

width:64px;

height:64px;

font-size:28px;

}

.assessment-score,

.career-score{

font-size:2.2rem;

}

.certificate-icon{

width:72px;

height:72px;

font-size:34px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 3C
 Business & AI Experience Cards
==========================================================*/


/*==========================================================
 PRICING CARD
==========================================================*/

.pricing-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:40px;

    text-align:center;

    border:2px solid var(--border);

    transition:.35s;

    overflow:hidden;

}

.pricing-card:hover{

    transform:translateY(-10px);

    border-color:var(--secondary);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.pricing-card.featured{

    border-color:var(--accent);

    transform:scale(1.04);

}

.pricing-badge{

    position:absolute;

    top:18px;

    right:-38px;

    transform:rotate(45deg);

    background:var(--gradient-primary);

    color:#fff;

    padding:8px 45px;

    font-size:12px;

    font-weight:700;

}

.price-value{

    font-size:3.8rem;

    font-weight:800;

    color:var(--primary);

    margin:25px 0;

}

.price-features{

    list-style:none;

    margin:30px 0;

}

.price-features li{

    padding:10px 0;

    border-bottom:1px solid var(--border);

}


/*==========================================================
 FEATURE CARD
==========================================================*/

.feature-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    transition:.35s;

    position:relative;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}


/*==========================================================
 AI RECOMMENDATION
==========================================================*/

.ai-recommendation{

    background:linear-gradient(

        145deg,

        #0F2747,

        #1E88E5

    );

    color:#fff;

    border-radius:26px;

    padding:32px;

}

.ai-recommendation h4{

    color:#fff;

}

.ai-score-ring{

    width:130px;

    height:130px;

    border-radius:50%;

    margin:25px auto;

    border:10px solid rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    font-weight:800;

}

.ai-actions{

    display:flex;

    gap:15px;

    margin-top:25px;

}


/*==========================================================
 AI INSIGHT
==========================================================*/

.ai-insight{

    background:#fff;

    border-left:6px solid var(--secondary);

    border-radius:20px;

    padding:28px;

}

.insight-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.insight-icon{

    width:56px;

    height:56px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:24px;

}


/*==========================================================
 PERSONALIZED PANEL
==========================================================*/

.recommendation-panel{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.18);

    padding:30px;

}

.recommendation-item{

    display:flex;

    gap:18px;

    margin-bottom:22px;

}

.recommendation-item:last-child{

    margin-bottom:0;

}


/*==========================================================
 SCHOLARSHIP CARD
==========================================================*/

.scholarship-card{

    background:linear-gradient(

        135deg,

        #C9A14D,

        #FFD96A

    );

    color:#222;

    border-radius:24px;

    padding:35px;

}

.scholarship-amount{

    font-size:3rem;

    font-weight:800;

    margin:20px 0;

}

.scholarship-footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*==========================================================
 ACHIEVEMENT CARD
==========================================================*/

.achievement-card{

    text-align:center;

    background:#fff;

    border-radius:24px;

    padding:35px;

}

.achievement-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(201,161,77,.15);

    color:var(--accent);

    font-size:42px;

    margin-bottom:25px;

}

.achievement-level{

    margin-top:18px;

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:#EDF2F7;

}


/*==========================================================
 MEMBERSHIP CARD
==========================================================*/

.membership-card{

    background:linear-gradient(

        145deg,

        #1A1A1A,

        #303030

    );

    color:#fff;

    border-radius:28px;

    padding:38px;

    position:relative;

    overflow:hidden;

}

.membership-card::after{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.membership-tier{

    color:var(--accent);

    font-weight:700;

    letter-spacing:1px;

}


/*==========================================================
 CSR PARTNERSHIP
==========================================================*/

.csr-card{

    background:#fff;

    border-radius:24px;

    padding:34px;

    border-top:6px solid #28A745;

}

.csr-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.csr-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#D4EDDA;

    color:#28A745;

    font-size:30px;

}


/*==========================================================
 ENTERPRISE BUSINESS CARD
==========================================================*/

.enterprise-card{

    background:#fff;

    border-radius:26px;

    padding:35px;

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

}

.enterprise-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.enterprise-logo{

    width:72px;

    height:72px;

    border-radius:18px;

    background:var(--section);

    display:flex;

    align-items:center;

    justify-content:center;

}

.enterprise-metrics{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:25px;

}

.enterprise-metric{

    text-align:center;

    padding:18px;

    border-radius:16px;

    background:var(--section);

}

.enterprise-metric strong{

    display:block;

    font-size:1.8rem;

    color:var(--primary);

}


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

@media(max-width:992px){

.enterprise-metrics{

grid-template-columns:1fr;

}

.ai-actions,

.scholarship-footer{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.pricing-card,

.feature-card,

.ai-recommendation,

.ai-insight,

.recommendation-panel,

.scholarship-card,

.achievement-card,

.membership-card,

.csr-card,

.enterprise-card{

padding:24px;

}

.enterprise-header,

.csr-header{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:576px){

.price-value{

font-size:3rem;

}

.scholarship-amount{

font-size:2.4rem;

}

.ai-score-ring{

width:100px;

height:100px;

font-size:1.6rem;

}

.enterprise-logo{

width:60px;

height:60px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 4A
 Core Card Interaction System
==========================================================*/


/*==========================================================
 HOVER ELEVATION
==========================================================*/

.card-hover{

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s,
        border-color .35s;

    will-change:transform;

}

.card-hover:hover{

    transform:translateY(-12px);

    box-shadow:
        0 28px 60px rgba(15,39,71,.16);

}


/*==========================================================
 ELEVATION LEVELS
==========================================================*/

.hover-xs:hover{

    transform:translateY(-3px);

}

.hover-sm:hover{

    transform:translateY(-6px);

}

.hover-md:hover{

    transform:translateY(-10px);

}

.hover-lg:hover{

    transform:translateY(-16px);

}

.hover-xl:hover{

    transform:translateY(-22px);

}


/*==========================================================
 MAGNETIC CARD
==========================================================*/

.card-magnetic{

    position:relative;

    transition:

        transform .18s ease,

        box-shadow .35s ease;

    cursor:pointer;

}

.card-magnetic:hover{

    box-shadow:

        0 35px 70px rgba(15,39,71,.18);

}


/*==========================================================
 GLOW CARD
==========================================================*/

.card-glow{

    position:relative;

    overflow:hidden;

}

.card-glow::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            transparent,

            rgba(30,136,229,.25),

            rgba(201,161,77,.18),

            transparent

        );

    opacity:0;

    transition:.35s;

    z-index:-1;

}

.card-glow:hover::before{

    opacity:1;

}

.card-glow:hover{

    box-shadow:

        0 0 35px rgba(30,136,229,.18),

        0 30px 60px rgba(0,0,0,.14);

}


/*==========================================================
 PRIMARY GLOW
==========================================================*/

.glow-primary:hover{

    box-shadow:

        0 0 24px rgba(30,136,229,.35),

        0 25px 60px rgba(15,39,71,.18);

}

.glow-success:hover{

    box-shadow:

        0 0 24px rgba(40,167,69,.30),

        0 25px 60px rgba(0,0,0,.15);

}

.glow-warning:hover{

    box-shadow:

        0 0 24px rgba(201,161,77,.32),

        0 25px 60px rgba(0,0,0,.15);

}

.glow-danger:hover{

    box-shadow:

        0 0 24px rgba(220,53,69,.30),

        0 25px 60px rgba(0,0,0,.15);

}


/*==========================================================
 SOFT SHADOW
==========================================================*/

.card-soft-shadow{

    transition:box-shadow .35s;

}

.card-soft-shadow:hover{

    box-shadow:

        0 12px 24px rgba(0,0,0,.08),

        0 28px 60px rgba(15,39,71,.10);

}


/*==========================================================
 SHADOW LEVELS
==========================================================*/

.shadow-hover-sm:hover{

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

}

.shadow-hover-md:hover{

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

}

.shadow-hover-lg:hover{

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

}

.shadow-hover-xl:hover{

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

}


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

.card-border-animate{

    position:relative;

    overflow:hidden;

}

.card-border-animate::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--secondary),

            var(--accent),

            transparent

        );

    mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    mask-composite:exclude;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    opacity:0;

    transition:.35s;

}

.card-border-animate:hover::after{

    opacity:1;

}


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

.border-hover-primary:hover{

    border-color:var(--primary);

}

.border-hover-secondary:hover{

    border-color:var(--secondary);

}

.border-hover-accent:hover{

    border-color:var(--accent);

}

.border-hover-success:hover{

    border-color:#28A745;

}


/*==========================================================
 TRANSFORM UTILITIES
==========================================================*/

.transform-smooth{

    transition:

        transform .35s,

        opacity .35s,

        filter .35s;

}

.scale-hover:hover{

    transform:scale(1.03);

}

.scale-sm:hover{

    transform:scale(1.02);

}

.scale-lg:hover{

    transform:scale(1.06);

}

.rotate-hover:hover{

    transform:rotate(1deg);

}

.rotate-reverse:hover{

    transform:rotate(-1deg);

}


/*==========================================================
 IMAGE INTERACTION
==========================================================*/

.card-image-hover{

    overflow:hidden;

}

.card-image-hover img{

    transition:

        transform .5s,

        filter .5s;

}

.card-image-hover:hover img{

    transform:scale(1.08);

    filter:brightness(1.08);

}


/*==========================================================
 ICON INTERACTION
==========================================================*/

.card-hover:hover .card-icon,

.card-hover:hover .feature-icon,

.card-hover:hover .kpi-icon{

    transform:

        translateY(-4px)

        scale(1.08);

    transition:.35s;

}


/*==========================================================
 CONTENT SHIFT
==========================================================*/

.card-content-lift{

    transition:transform .35s;

}

.card-hover:hover .card-content-lift{

    transform:translateY(-5px);

}


/*==========================================================
 ACTIVE STATE
==========================================================*/

.card-active{

    border-color:var(--secondary);

    box-shadow:

        0 20px 50px rgba(30,136,229,.15);

}


/*==========================================================
 DISABLED
==========================================================*/

.card-disabled{

    opacity:.55;

    pointer-events:none;

    filter:grayscale(.3);

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.card-hover,
.card-magnetic,
.card-glow,
.card-soft-shadow,
.transform-smooth{

    backface-visibility:hidden;

    transform:translateZ(0);

    contain:layout style paint;

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.card-hover,
.card-magnetic,
.card-glow,
.card-soft-shadow,
.transform-smooth{

    transition:none!important;

    animation:none!important;

}

.card-hover:hover,
.card-magnetic:hover,
.card-glow:hover{

    transform:none!important;

}

}


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

@media(max-width:768px){

.hover-lg:hover,
.hover-xl:hover{

    transform:translateY(-6px);

}

.scale-lg:hover{

    transform:scale(1.02);

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 4B
 Advanced Card Motion System
==========================================================*/


/*==========================================================
 3D PERSPECTIVE
==========================================================*/

.perspective{

    perspective:1400px;

    transform-style:preserve-3d;

}

.perspective-sm{

    perspective:800px;

}

.perspective-lg{

    perspective:2000px;

}


/*==========================================================
 3D TILT CARD
==========================================================*/

.card-tilt{

    position:relative;

    transform-style:preserve-3d;

    transition:

        transform .45s cubic-bezier(.16,1,.3,1),

        box-shadow .35s;

}

.card-tilt:hover{

    transform:

        rotateX(6deg)

        rotateY(-6deg)

        translateY(-10px);

    box-shadow:

        0 40px 70px rgba(15,39,71,.18);

}

.card-tilt>*{

    transform:translateZ(20px);

}


/*==========================================================
 DEPTH LAYERS
==========================================================*/

.depth-1{transform:translateZ(10px);}
.depth-2{transform:translateZ(20px);}
.depth-3{transform:translateZ(35px);}
.depth-4{transform:translateZ(55px);}
.depth-5{transform:translateZ(80px);}


/*==========================================================
 FLIP CARD
==========================================================*/

.flip-card{

    perspective:1500px;

}

.flip-inner{

    position:relative;

    width:100%;

    height:100%;

    transform-style:preserve-3d;

    transition:transform .8s;

}

.flip-card:hover .flip-inner{

    transform:rotateY(180deg);

}

.flip-front,
.flip-back{

    position:absolute;

    inset:0;

    backface-visibility:hidden;

    border-radius:inherit;

}

.flip-back{

    transform:rotateY(180deg);

}


/*==========================================================
 FLIP DIRECTIONS
==========================================================*/

.flip-x:hover .flip-inner{

    transform:rotateX(180deg);

}

.flip-back-x{

    transform:rotateX(180deg);

}


/*==========================================================
 EXPANDABLE CARD
==========================================================*/

.expand-card{

    overflow:hidden;

    transition:

        max-height .45s ease,

        box-shadow .35s;

    max-height:260px;

}

.expand-card.expanded{

    max-height:1200px;

}

.expand-toggle{

    cursor:pointer;

}


/*==========================================================
 COLLAPSIBLE
==========================================================*/

.collapse-panel{

    overflow:hidden;

    max-height:0;

    opacity:0;

    transition:

        max-height .4s,

        opacity .3s;

}

.collapse-panel.show{

    max-height:1000px;

    opacity:1;

}


/*==========================================================
 REVEAL PANEL
==========================================================*/

.reveal-panel{

    position:relative;

    overflow:hidden;

}

.reveal-content{

    position:absolute;

    inset:0;

    opacity:0;

    transform:translateY(20px);

    transition:

        opacity .35s,

        transform .35s;

}

.reveal-panel:hover .reveal-content{

    opacity:1;

    transform:none;

}


/*==========================================================
 CARD STACK
==========================================================*/

.card-stack{

    position:relative;

}

.card-stack .card{

    position:absolute;

    width:100%;

    transition:.4s;

}

.card-stack .card:nth-child(1){

    transform:translateY(0);

    z-index:3;

}

.card-stack .card:nth-child(2){

    transform:translateY(12px) scale(.97);

    opacity:.85;

    z-index:2;

}

.card-stack .card:nth-child(3){

    transform:translateY(24px) scale(.94);

    opacity:.7;

    z-index:1;

}

.card-stack:hover .card:nth-child(2){

    transform:translateY(80px);

}

.card-stack:hover .card:nth-child(3){

    transform:translateY(160px);

}


/*==========================================================
 LAYERED DEPTH
==========================================================*/

.layered-card{

    position:relative;

}

.layered-card::before,

.layered-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:#fff;

    z-index:-1;

    transition:.35s;

}

.layered-card::before{

    transform:translate(8px,8px);

    opacity:.18;

}

.layered-card::after{

    transform:translate(16px,16px);

    opacity:.10;

}

.layered-card:hover::before{

    transform:translate(12px,12px);

}

.layered-card:hover::after{

    transform:translate(24px,24px);

}


/*==========================================================
 FLOATING DEPTH
==========================================================*/

.depth-hover:hover{

    transform:

        translateY(-12px)

        scale(1.01);

}


/*==========================================================
 PERSPECTIVE SHADOW
==========================================================*/

.shadow-depth{

    position:relative;

}

.shadow-depth::after{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    bottom:-18px;

    height:26px;

    border-radius:50%;

    background:rgba(0,0,0,.18);

    filter:blur(18px);

    opacity:0;

    transition:.35s;

}

.shadow-depth:hover::after{

    opacity:1;

}


/*==========================================================
 CARD REORDER
==========================================================*/

.card-sortable{

    cursor:grab;

}

.card-sortable:active{

    cursor:grabbing;

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.card-tilt,

.flip-inner,

.expand-card,

.collapse-panel,

.card-stack .card{

    will-change:

        transform,

        opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}


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

.expand-toggle:focus-visible,

.flip-card:focus-visible{

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

    outline-offset:4px;

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.card-tilt,

.flip-inner,

.expand-card,

.collapse-panel,

.card-stack .card{

    transition:none!important;

    animation:none!important;

}

.card-tilt:hover{

    transform:none!important;

}

.flip-card:hover .flip-inner{

    transform:none!important;

}

}


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

@media(max-width:768px){

.card-tilt:hover{

    transform:translateY(-6px);

}

.card-stack{

    min-height:420px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 08-cards.css
 Part : 4C
 Premium Micro Interactions
==========================================================*/


/*==========================================================
 RIPPLE EFFECT
==========================================================*/

.card-ripple{

    position:relative;

    overflow:hidden;

}

.card-ripple::after{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:scale(0);

    opacity:0;

    pointer-events:none;

}

.card-ripple:active::after{

    animation:rippleAnimation .65s ease-out;

}

@keyframes rippleAnimation{

0%{

transform:scale(0);

opacity:.8;

}

100%{

transform:scale(28);

opacity:0;

}

}


/*==========================================================
 ANIMATED GRADIENT BORDER
==========================================================*/

.card-gradient-border{

    position:relative;

    overflow:hidden;

}

.card-gradient-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:linear-gradient(

        90deg,

        #1E88E5,

        #C9A14D,

        #6F42C1,

        #1E88E5

    );

    background-size:300%;

    border-radius:inherit;

    animation:borderFlow 8s linear infinite;

    z-index:-2;

}

.card-gradient-border::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#fff;

    border-radius:inherit;

    z-index:-1;

}

@keyframes borderFlow{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}


/*==========================================================
 ICON INTERACTION
==========================================================*/

.card-icon-animate{

    transition:

        transform .35s,

        color .35s;

}

.card:hover .card-icon-animate{

    transform:

        translateY(-5px)

        scale(1.12)

        rotate(6deg);

    color:var(--accent);

}


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

.floating-badge{

    position:absolute;

    top:16px;

    right:16px;

    animation:floatingBadge 3s ease-in-out infinite;

}

@keyframes floatingBadge{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/*==========================================================
 SUCCESS PULSE
==========================================================*/

.success-pulse{

    position:relative;

}

.success-pulse::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:inherit;

    border:2px solid #28A745;

    opacity:0;

    animation:successPulse 2.4s infinite;

}

@keyframes successPulse{

0%{

transform:scale(.9);

opacity:.9;

}

100%{

transform:scale(1.25);

opacity:0;

}

}


/*==========================================================
 NOTIFICATION SHAKE
==========================================================*/

.notification-shake:hover{

    animation:notifyShake .6s;

}

@keyframes notifyShake{

10%,90%{

transform:translateX(-2px);

}

20%,80%{

transform:translateX(3px);

}

30%,50%,70%{

transform:translateX(-6px);

}

40%,60%{

transform:translateX(6px);

}

}


/*==========================================================
 LOADING PULSE
==========================================================*/

.loading-card{

    position:relative;

    overflow:hidden;

}

.loading-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(255,255,255,0),

        rgba(255,255,255,.45),

        rgba(255,255,255,0)

    );

    transform:translateX(-120%);

    animation:loadingSweep 1.4s infinite;

}

@keyframes loadingSweep{

100%{

transform:translateX(120%);

}

}


/*==========================================================
 SKELETON
==========================================================*/

.skeleton{

    background:#ECEFF3;

    position:relative;

    overflow:hidden;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    animation:skeletonMove 1.6s infinite;

}

@keyframes skeletonMove{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(120%);

}

}


/*==========================================================
 PREMIUM HOVER
==========================================================*/

.card-premium:hover{

    transform:

        translateY(-10px)

        scale(1.01);

    box-shadow:

        0 35px 80px rgba(15,39,71,.18);

    filter:saturate(1.08);

}


/*==========================================================
 ICON PULSE
==========================================================*/

.icon-pulse:hover{

    animation:iconPulse 1s infinite;

}

@keyframes iconPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}


/*==========================================================
 SHINE EFFECT
==========================================================*/

.card-shine{

    position:relative;

    overflow:hidden;

}

.card-shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.card-shine:hover::before{

    animation:cardShine .8s;

}

@keyframes cardShine{

100%{

left:140%;

}

}


/*==========================================================
 STATUS INDICATOR
==========================================================*/

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#28A745;

}

.status-dot.online{

    animation:onlinePulse 2s infinite;

}

@keyframes onlinePulse{

0%,100%{

box-shadow:0 0 0 0 rgba(40,167,69,.45);

}

70%{

box-shadow:0 0 0 12px rgba(40,167,69,0);

}

}


/*==========================================================
 HOVER TRANSITIONS
==========================================================*/

.hover-fade{

    transition:opacity .3s;

}

.hover-fade:hover{

    opacity:.88;

}

.hover-bright{

    transition:filter .35s;

}

.hover-bright:hover{

    filter:brightness(1.08);

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.card-premium,
.card-ripple,
.card-gradient-border,
.card-shine{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}


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

.card-premium:focus-visible,
.card-ripple:focus-visible{

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

    outline-offset:4px;

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.card-ripple::after,
.card-gradient-border::before,
.floating-badge,
.success-pulse::after,
.notification-shake,
.loading-card::before,
.skeleton::after,
.icon-pulse,
.card-shine::before{

animation:none!important;

transition:none!important;

}

}


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

@media(max-width:768px){

.card-premium:hover{

transform:translateY(-5px);

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 09-sections.css
 Part : 2
 Content Layout Framework
==========================================================*/


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

.hero-subsection{

    position:relative;

    padding:80px 0;

}

.hero-subsection-sm{

    padding:60px 0;

}

.hero-subsection-lg{

    padding:120px 0;

}


/*==========================================================
 SPLIT LAYOUT
==========================================================*/

.split-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.split-layout.reverse .split-image{

    order:2;

}

.split-layout.reverse .split-content{

    order:1;

}

.split-content{

    position:relative;

}

.split-image{

    position:relative;

}

.split-image img{

    width:100%;

    display:block;

    border-radius:24px;

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

}


/*==========================================================
 TWO COLUMN CONTENT
==========================================================*/

.two-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

}

.two-column.equal{

    align-items:stretch;

}

.two-column.center{

    align-items:center;

}


/*==========================================================
 THREE COLUMN FEATURE
==========================================================*/

.feature-columns{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.feature-column{

    display:flex;

    flex-direction:column;

}


/*==========================================================
 IMAGE + CONTENT
==========================================================*/

.image-content{

    display:grid;

    grid-template-columns:45% 55%;

    gap:60px;

    align-items:center;

}

.image-content.image-right{

    grid-template-columns:55% 45%;

}

.image-content.image-right .content{

    order:1;

}

.image-content.image-right .image{

    order:2;

}

.image img{

    width:100%;

    border-radius:24px;

}


/*==========================================================
 ICON FEATURE SECTION
==========================================================*/

.icon-section{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.icon-feature{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.icon-feature-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:30px;

    flex-shrink:0;

}

.icon-feature-content{

    flex:1;

}


/*==========================================================
 FEATURE GRID
==========================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:32px;

}

.feature-grid-lg{

    grid-template-columns:repeat(3,1fr);

}

.feature-grid-sm{

    grid-template-columns:repeat(2,1fr);

}


/*==========================================================
 CONTENT BLOCKS
==========================================================*/

.content-block{

    max-width:700px;

}

.content-block-center{

    margin:auto;

    text-align:center;

}

.content-block-wide{

    max-width:900px;

}


/*==========================================================
 PRESENTATION LAYOUT
==========================================================*/

.presentation-layout{

    display:grid;

    grid-template-columns:40% 60%;

    gap:70px;

    align-items:center;

}

.presentation-panel{

    background:#fff;

    border-radius:28px;

    padding:40px;

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

}

.presentation-panel.dark{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
 FEATURE HIGHLIGHTS
==========================================================*/

.feature-highlights{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:35px;

}

.feature-highlight{

    text-align:center;

    padding:22px;

    border-radius:18px;

    background:var(--section);

}


/*==========================================================
 CONTENT UTILITIES
==========================================================*/

.align-center{

    align-items:center;

}

.align-start{

    align-items:flex-start;

}

.align-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.gap-sm{

    gap:20px;

}

.gap-md{

    gap:40px;

}

.gap-lg{

    gap:70px;

}


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

@media(max-width:1200px){

.split-layout,
.image-content,
.presentation-layout{

gap:50px;

}

.feature-grid-lg{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.split-layout,
.two-column,
.image-content,
.presentation-layout{

grid-template-columns:1fr;

}

.feature-columns{

grid-template-columns:repeat(2,1fr);

}

.feature-grid-sm{

grid-template-columns:1fr;

}

.split-image,
.image{

order:1;

}

.split-content,
.content{

order:2;

}

}

@media(max-width:768px){

.feature-columns{

grid-template-columns:1fr;

}

.feature-grid-lg{

grid-template-columns:1fr;

}

.hero-subsection{

padding:60px 0;

}

.presentation-panel{

padding:28px;

}

.icon-feature{

flex-direction:column;

text-align:center;

align-items:center;

}

}

@media(max-width:576px){

.feature-grid{

grid-template-columns:1fr;

}

.feature-highlights{

grid-template-columns:1fr;

}

.icon-feature-icon{

width:60px;

height:60px;

font-size:24px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 09-sections.css
 Part : 3
 Business Presentation Sections
==========================================================*/


/*==========================================================
 AI ECOSYSTEM SECTION
==========================================================*/

.ai-ecosystem{

    position:relative;

    overflow:hidden;

}

.ai-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.ai-module{

    position:relative;

    padding:35px;

    border-radius:24px;

    background:#fff;

    text-align:center;

    transition:.35s;

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

}

.ai-module:hover{

    transform:translateY(-10px);

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

}

.ai-module-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:38px;

    margin-bottom:25px;

}


/*==========================================================
 PROCESS FLOW
==========================================================*/

.process-flow{

    position:relative;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

}

.process-step{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:30px;

    text-align:center;

}

.process-number{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:20px;

}


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

.timeline-section{

    position:relative;

}

.timeline-line{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    transform:translateX(-50%);

    background:var(--gradient-primary);

}

.timeline-row{

    display:grid;

    grid-template-columns:1fr 80px 1fr;

    gap:40px;

    align-items:center;

    margin-bottom:70px;

}

.timeline-dot{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--secondary);

    margin:auto;

    box-shadow:0 0 0 8px rgba(30,136,229,.12);

}


/*==========================================================
 STATISTICS
==========================================================*/

.stats-section{

    position:relative;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-box{

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

}

.stat-box h2{

    font-size:3rem;

    color:var(--secondary);

    margin-bottom:10px;

}


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

.cta-section{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:var(--gradient-primary);

    color:#fff;

    padding:70px;

}

.cta-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.cta-content{

    max-width:650px;

}

.cta-content h2{

    color:#fff;

}

.cta-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


/*==========================================================
 BENEFITS
==========================================================*/

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.benefit-item{

    background:#fff;

    padding:35px;

    border-radius:22px;

}

.benefit-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    font-size:30px;

    margin-bottom:20px;

}


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

.program-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.program-box{

    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.program-box:hover{

    transform:translateY(-8px);

}


/*==========================================================
 TECHNOLOGY ARCHITECTURE
==========================================================*/

.tech-section{

    position:relative;

}

.tech-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.tech-node{

    background:#fff;

    border-radius:22px;

    padding:30px;

    text-align:center;

    position:relative;

}

.tech-node::after{

    content:"";

    position:absolute;

    right:-18px;

    top:50%;

    width:36px;

    height:3px;

    background:var(--secondary);

}

.tech-grid>.tech-node:last-child::after{

    display:none;

}


/*==========================================================
 PARTNER STRIP
==========================================================*/

.partner-section{

    text-align:center;

}

.partner-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

    gap:30px;

    align-items:center;

}

.partner-item{

    padding:25px;

    background:#fff;

    border-radius:20px;

}

.partner-item img{

    max-width:100%;

    max-height:55px;

    filter:grayscale(100%);

    opacity:.75;

    transition:.35s;

}

.partner-item:hover img{

    filter:none;

    opacity:1;

}


/*==========================================================
 PRESENTATION BLOCKS
==========================================================*/

.presentation-block{

    background:#fff;

    border-radius:30px;

    padding:45px;

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

}

.presentation-dark{

    background:var(--primary);

    color:#fff;

}

.presentation-gradient{

    background:var(--gradient-primary);

    color:#fff;

}


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

@media(max-width:1200px){

.ai-grid,
.program-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.timeline-line{

left:24px;

}

.timeline-row{

grid-template-columns:60px 1fr;

}

.timeline-row>*:first-child{

display:none;

}

.tech-grid,
.benefits-grid{

grid-template-columns:1fr;

}

.cta-row{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.ai-grid,
.program-grid,
.stats-grid{

grid-template-columns:1fr;

}

.cta-section{

padding:40px 30px;

}

.presentation-block{

padding:30px;

}

}

@media(max-width:576px){

.process-grid{

grid-template-columns:1fr;

}

.partner-grid{

grid-template-columns:repeat(2,1fr);

}

.stat-box h2{

font-size:2.4rem;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 09-sections.css
 Part : 4
 Interactive & Conversion Sections
==========================================================*/


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

.testimonial-section{

    position:relative;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:32px;

}

.testimonial-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    position:relative;

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

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

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

}

.testimonial-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

    margin-bottom:20px;

}

.testimonial-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.testimonial-rating{

    color:#FFC107;

    margin-top:18px;

}


/*==========================================================
 FAQ
==========================================================*/

.faq-section{

    max-width:1000px;

    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:20px;

    margin-bottom:18px;

    overflow:hidden;

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

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    cursor:pointer;

    font-weight:700;

}

.faq-answer{

    padding:0 28px;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease,padding .35s ease;

}

.faq-item.active .faq-answer{

    max-height:400px;

    padding:0 28px 24px;

}


/*==========================================================
 CONTACT
==========================================================*/

.contact-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-card{

    background:#fff;

    padding:28px;

    border-radius:22px;

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-icon{

    width:60px;

    height:60px;

    border-radius:18px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--secondary);

    font-size:24px;

}


/*==========================================================
 NEWSLETTER
==========================================================*/

.newsletter-section{

    background:var(--gradient-primary);

    color:#fff;

    border-radius:28px;

    padding:60px;

    text-align:center;

}

.newsletter-form{

    display:flex;

    max-width:720px;

    margin:35px auto 0;

    gap:18px;

}

.newsletter-form input{

    flex:1;

}


/*==========================================================
 INQUIRY
==========================================================*/

.inquiry-section{

    display:grid;

    grid-template-columns:45% 55%;

    gap:50px;

}

.inquiry-panel{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

}


/*==========================================================
 DEMO BOOKING
==========================================================*/

.demo-section{

    background:var(--section);

    border-radius:28px;

    padding:50px;

}

.demo-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.demo-benefits{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==========================================================
 BROCHURE DOWNLOAD
==========================================================*/

.download-section{

    background:#fff;

    border-radius:28px;

    padding:45px;

    text-align:center;

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

}

.download-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:30px;

}


/*==========================================================
 OFFICE LOCATION
==========================================================*/

.office-section{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.office-card{

    background:#fff;

    border-radius:22px;

    padding:30px;

    text-align:center;

}

.office-map{

    border-radius:20px;

    overflow:hidden;

    margin-top:18px;

}


/*==========================================================
 SOCIAL CONNECT
==========================================================*/

.social-section{

    text-align:center;

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:28px;

}

.social-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--section);

    transition:.35s;

}

.social-icon:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-5px);

}


/*==========================================================
 CONVERSION CTA
==========================================================*/

.conversion-cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    border-radius:32px;

    padding:70px;

    text-align:center;

}

.conversion-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}


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

@media(max-width:1200px){

.office-section{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.contact-section,
.inquiry-section,
.demo-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

}

@media(max-width:768px){

.office-section{

grid-template-columns:1fr;

}

.newsletter-section,
.demo-section,
.download-section,
.conversion-cta{

padding:35px 24px;

}

.contact-card,
.office-card{

padding:24px;

}

}

@media(max-width:576px){

.conversion-actions,
.download-buttons{

flex-direction:column;

}

.social-icons{

gap:12px;

}

.social-icon{

width:50px;

height:50px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 09-sections.css
 Part : 5
 Decorative Background System
==========================================================*/


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

.bg-gradient-primary{

    background:linear-gradient(
        135deg,
        #0F2747 0%,
        #1E88E5 100%
    );

}

.bg-gradient-secondary{

    background:linear-gradient(
        135deg,
        #1E88E5,
        #6EC6FF
    );

}

.bg-gradient-accent{

    background:linear-gradient(
        135deg,
        #C9A14D,
        #FFD36A
    );

}

.bg-gradient-dark{

    background:linear-gradient(
        135deg,
        #08111F,
        #132C4D
    );

}

.bg-gradient-mesh{

    background:
        radial-gradient(circle at top left,
            rgba(30,136,229,.20), transparent 40%),
        radial-gradient(circle at bottom right,
            rgba(201,161,77,.18), transparent 45%),
        linear-gradient(135deg,#0F2747,#132C4D);

}


/*==========================================================
 SVG / WAVE DIVIDERS
==========================================================*/

.section-wave-top{

    position:relative;

}

.section-wave-top::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:80px;

    background:
        radial-gradient(circle at 50% 120%,
        transparent 58px,
        rgba(255,255,255,.12) 60px);

    pointer-events:none;

}

.section-wave-bottom{

    position:relative;

}

.section-wave-bottom::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:80px;

    background:
        radial-gradient(circle at 50% -20%,
        transparent 58px,
        rgba(255,255,255,.10) 60px);

    pointer-events:none;

}


/*==========================================================
 ANIMATED BLOBS
==========================================================*/

.bg-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.28;

    animation:blobFloat 18s ease-in-out infinite;

}

.bg-blob.primary{

    background:#1E88E5;

}

.bg-blob.accent{

    background:#C9A14D;

}

.bg-blob.success{

    background:#28A745;

}

@keyframes blobFloat{

0%,100%{

transform:translate(0,0) scale(1);

}

33%{

transform:translate(40px,-30px) scale(1.08);

}

66%{

transform:translate(-35px,25px) scale(.94);

}

}


/*==========================================================
 DOT GRID
==========================================================*/

.bg-dots{

    background-image:

    radial-gradient(

        rgba(255,255,255,.16) 1px,

        transparent 1px

    );

    background-size:22px 22px;

}

.bg-dots-dark{

    background-image:

    radial-gradient(

        rgba(15,39,71,.10) 1px,

        transparent 1px

    );

    background-size:22px 22px;

}


/*==========================================================
 MESH GRID
==========================================================*/

.bg-mesh{

    position:relative;

}

.bg-mesh::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(

            rgba(255,255,255,.05) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.05) 1px,

            transparent 1px

        );

    background-size:40px 40px;

    pointer-events:none;

}


/*==========================================================
 FLOATING SHAPES
==========================================================*/

.shape{

    position:absolute;

    pointer-events:none;

    opacity:.18;

}

.shape-circle{

    border-radius:50%;

}

.shape-square{

    border-radius:18px;

}

.shape-diamond{

    transform:rotate(45deg);

}

.float-slow{

    animation:floatSlow 14s ease-in-out infinite;

}

.float-fast{

    animation:floatFast 8s ease-in-out infinite;

}

@keyframes floatSlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}

@keyframes floatFast{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}


/*==========================================================
 DECORATIVE LINES
==========================================================*/

.decor-line{

    width:100%;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(30,136,229,.55),

        transparent

    );

}

.decor-vertical{

    width:2px;

    height:100%;

    background:linear-gradient(

        transparent,

        rgba(30,136,229,.45),

        transparent

    );

}


/*==========================================================
 GLOW EFFECTS
==========================================================*/

.bg-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

}

.bg-glow.primary{

    background:#1E88E5;

}

.bg-glow.accent{

    background:#C9A14D;

}


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

.section-glass{

    position:relative;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:32px;

    overflow:hidden;

}


/*==========================================================
 BACKGROUND IMAGE
==========================================================*/

.bg-cover{

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.bg-fixed{

    background-attachment:fixed;

}

.bg-overlay{

    position:relative;

}

.bg-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,17,31,.55);

    pointer-events:none;

}

.bg-overlay>*{

    position:relative;

    z-index:2;

}


/*==========================================================
 AMBIENT EFFECTS
==========================================================*/

.ambient-light{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(140px);

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

    pointer-events:none;

}

.ambient-gold{

    background:rgba(201,161,77,.16);

}

.ambient-green{

    background:rgba(40,167,69,.16);

}


/*==========================================================
 SECTION PATTERN HELPERS
==========================================================*/

.pattern-diagonal{

    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.04) 0,
            rgba(255,255,255,.04) 2px,
            transparent 2px,
            transparent 18px
        );

}

.pattern-grid{

    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:30px 30px;

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.bg-blob,
.bg-glow,
.shape,
.ambient-light{

    will-change:transform,opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.bg-blob,
.shape,
.float-slow,
.float-fast{

animation:none!important;

}

}


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

@media(max-width:768px){

.bg-fixed{

background-attachment:scroll;

}

.ambient-light{

width:260px;

height:260px;

filter:blur(80px);

}

.section-glass{

border-radius:24px;

}

}

@media(max-width:576px){

.bg-blob{

filter:blur(50px);

}

.pattern-grid{

background-size:20px 20px;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 09-sections.css
 Part : 6
 Section Utilities & Performance
==========================================================*/


/*==========================================================
 SECTION ANIMATION HELPERS
==========================================================*/

.section-animate{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.section-animate.is-visible{

    opacity:1;

    transform:none;

}

.fade-up{

    transform:translateY(50px);

}

.fade-down{

    transform:translateY(-50px);

}

.fade-left{

    transform:translateX(-60px);

}

.fade-right{

    transform:translateX(60px);

}

.zoom-in{

    transform:scale(.92);

}

.zoom-out{

    transform:scale(1.08);

}

.rotate-up{

    transform:

        rotate(-2deg)

        translateY(25px);

}


/*==========================================================
 STAGGER UTILITIES
==========================================================*/

.stagger>*{

    opacity:0;

    transform:translateY(30px);

}

.stagger>*:nth-child(1){transition-delay:.05s;}
.stagger>*:nth-child(2){transition-delay:.10s;}
.stagger>*:nth-child(3){transition-delay:.15s;}
.stagger>*:nth-child(4){transition-delay:.20s;}
.stagger>*:nth-child(5){transition-delay:.25s;}
.stagger>*:nth-child(6){transition-delay:.30s;}
.stagger>*:nth-child(7){transition-delay:.35s;}
.stagger>*:nth-child(8){transition-delay:.40s;}

.stagger.is-visible>*{

    opacity:1;

    transform:none;

}


/*==========================================================
 SCROLL ANCHORS
==========================================================*/

.anchor{

    position:relative;

    scroll-margin-top:120px;

}

.anchor-sm{

    scroll-margin-top:80px;

}

.anchor-lg{

    scroll-margin-top:160px;

}


/*==========================================================
 SCROLL SNAP
==========================================================*/

.snap-container{

    scroll-snap-type:y proximity;

}

.snap-start{

    scroll-snap-align:start;

}

.snap-center{

    scroll-snap-align:center;

}


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

.section-transition{

    transition:

        background-color .35s,

        color .35s,

        border-color .35s;

}

.section-hover{

    transition:

        transform .35s,

        box-shadow .35s;

}

.section-hover:hover{

    transform:translateY(-5px);

}


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

.opacity-100{opacity:1;}
.opacity-90{opacity:.9;}
.opacity-80{opacity:.8;}
.opacity-70{opacity:.7;}
.opacity-60{opacity:.6;}
.opacity-50{opacity:.5;}


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

.space-xs{

    padding:20px;

}

.space-sm{

    padding:30px;

}

.space-md{

    padding:50px;

}

.space-lg{

    padding:80px;

}

.space-xl{

    padding:120px;

}

.gap-xs{gap:10px;}
.gap-sm{gap:20px;}
.gap-md{gap:35px;}
.gap-lg{gap:60px;}
.gap-xl{gap:90px;}


/*==========================================================
 VISIBILITY
==========================================================*/

.hide{

    display:none!important;

}

.show{

    display:block!important;

}

.visible{

    visibility:visible;

}

.invisible{

    visibility:hidden;

}


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

@media print{

.section{

padding:20px 0!important;

background:#fff!important;

color:#000!important;

box-shadow:none!important;

}

.section::before,
.section::after,

.bg-blob,
.bg-glow,
.shape,
.ambient-light{

display:none!important;

}

a{

text-decoration:none;

color:#000;

}

}


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

.focus-ring:focus-visible{

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

    outline-offset:4px;

}

.skip-link{

    position:absolute;

    top:-100px;

    left:20px;

    background:#000;

    color:#fff;

    padding:12px 18px;

    z-index:9999;

}

.skip-link:focus{

    top:20px;

}

.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;

}


/*==========================================================
 HIGH CONTRAST
==========================================================*/

@media(prefers-contrast:more){

.section{

border:2px solid currentColor;

}

.section-divider{

height:6px;

}

.section-subtitle{

border:2px solid currentColor;

}

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.section,
.section *{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

.section-hover:hover{

transform:none!important;

}

}


/*==========================================================
 PERFORMANCE
==========================================================*/

.section,
.section-container,
.section-content{

    contain:layout style paint;

}

.optimize{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}


/*==========================================================
 ENTERPRISE UTILITIES
==========================================================*/

.elevation-low{

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

}

.elevation-medium{

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

}

.elevation-high{

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

}

.elevation-xl{

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

}

.rounded-sm{

    border-radius:12px;

}

.rounded-md{

    border-radius:20px;

}

.rounded-lg{

    border-radius:30px;

}

.rounded-xl{

    border-radius:40px;

}

.border-light{

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

}

.border-none{

    border:none;

}

.overflow-hidden{

    overflow:hidden;

}

.overflow-visible{

    overflow:visible;

}

.pointer{

    cursor:pointer;

}

.no-select{

    user-select:none;

}

.center-content{

    display:flex;

    align-items:center;

    justify-content:center;

}

.full-height{

    min-height:100vh;

}

.full-width{

    width:100%;

}


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

@media(max-width:1200px){

.space-xl{

padding:90px;

}

}

@media(max-width:992px){

.space-lg{

padding:60px;

}

.hide-lg{

display:none!important;

}

}

@media(max-width:768px){

.space-md{

padding:35px;

}

.hide-md{

display:none!important;

}

.center-mobile{

text-align:center;

}

}

@media(max-width:576px){

.space-sm{

padding:20px;

}

.space-md{

padding:24px;

}

.space-lg{

padding:35px;

}

.hide-sm{

display:none!important;

}

}
/*==========================================================
 SICEP UI FRAMEWORK
 File : 10-timeline.css
 Version : 1.0
 Part : 1
 Core Timeline Framework
==========================================================*/


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

.timeline{

    position:relative;

    width:100%;

}

.timeline-container{

    position:relative;

    max-width:1400px;

    margin:auto;

}


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

.timeline-vertical{

    position:relative;

    padding:40px 0;

}

.timeline-vertical::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    transform:translateX(-50%);

    background:linear-gradient(
        var(--secondary),
        var(--accent)
    );

    border-radius:20px;

}


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

.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:1fr 90px 1fr;

    gap:40px;

    margin-bottom:80px;

    align-items:center;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item.left .timeline-card{

    grid-column:1;

}

.timeline-item.right .timeline-card{

    grid-column:3;

}


/*==========================================================
 NODE
==========================================================*/

.timeline-node{

    position:relative;

    width:34px;

    height:34px;

    margin:auto;

    border-radius:50%;

    background:var(--secondary);

    border:6px solid #fff;

    box-shadow:

        0 0 0 8px rgba(30,136,229,.12);

    z-index:3;

}


/*==========================================================
 NODE STATES
==========================================================*/

.timeline-node.active{

    background:var(--accent);

}

.timeline-node.completed{

    background:#28A745;

}

.timeline-node.pending{

    background:#FFC107;

}

.timeline-node.disabled{

    background:#CED4DA;

}


/*==========================================================
 CONNECTOR
==========================================================*/

.timeline-connector{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    transform:translateX(-50%);

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

}


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

.timeline-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:32px;

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

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

    transition:.35s;

}

.timeline-card:hover{

    transform:translateY(-8px);

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

}

.timeline-card::after{

    content:"";

    position:absolute;

    top:40px;

    width:18px;

    height:18px;

    background:#fff;

    transform:rotate(45deg);

}

.timeline-item.left .timeline-card::after{

    right:-9px;

}

.timeline-item.right .timeline-card::after{

    left:-9px;

}


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

.timeline-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:18px;

}

.timeline-title{

    font-size:1.4rem;

    font-weight:700;

    color:var(--heading);

}

.timeline-subtitle{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
 STEP LABEL
==========================================================*/

.timeline-step{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 16px;

    border-radius:30px;

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

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

}


/*==========================================================
 DATE LABEL
==========================================================*/

.timeline-date{

    font-size:13px;

    font-weight:600;

    color:var(--text-light);

}


/*==========================================================
 ICON
==========================================================*/

.timeline-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:34px;

    margin-bottom:24px;

}


/*==========================================================
 CONTENT
==========================================================*/

.timeline-content{

    color:var(--text-light);

    line-height:1.8;

}


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

.timeline-horizontal{

    position:relative;

    display:flex;

    gap:40px;

    overflow-x:auto;

    padding:60px 0;

}

.timeline-horizontal::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:92px;

    height:4px;

    background:var(--border);

}

.timeline-horizontal .timeline-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:260px;

    margin:0;

}

.timeline-horizontal .timeline-node{

    margin-bottom:30px;

}

.timeline-horizontal .timeline-card{

    width:100%;

}

.timeline-horizontal .timeline-card::after{

    display:none;

}


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

.timeline-label{

    margin-top:14px;

    font-size:13px;

    font-weight:700;

    color:var(--secondary);

}

.timeline-description{

    margin-top:14px;

    color:var(--text-light);

}


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

.timeline-center{

    text-align:center;

}

.timeline-left{

    text-align:left;

}

.timeline-right{

    text-align:right;

}

.timeline-gap-sm{

    gap:20px;

}

.timeline-gap-md{

    gap:40px;

}

.timeline-gap-lg{

    gap:70px;

}


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

@media(max-width:1200px){

.timeline-item{

gap:24px;

}

}

@media(max-width:992px){

.timeline-vertical::before{

left:28px;

}

.timeline-item{

grid-template-columns:70px 1fr;

gap:24px;

}

.timeline-item.left .timeline-card,
.timeline-item.right .timeline-card{

grid-column:2;

}

.timeline-node{

margin:0 auto;

}

.timeline-card::after{

display:none;

}

}

@media(max-width:768px){

.timeline-card{

padding:24px;

}

.timeline-horizontal{

gap:24px;

}

.timeline-horizontal .timeline-item{

min-width:220px;

}

.timeline-icon{

width:60px;

height:60px;

font-size:28px;

}

}

@media(max-width:576px){

.timeline-title{

font-size:1.2rem;

}

.timeline-card{

padding:20px;

}

.timeline-horizontal{

padding:40px 0;

}

}