/* ======================================================
   HEALTHCODE DESIGN SYSTEM v1.0
   style.css
   Author : HealthCode
====================================================== */
html,
body{
    margin:0;
    padding:0;
}

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

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


/* ======================================================
   ROOT VARIABLES
====================================================== */

:root{

    /* Brand Colors */

    --primary:#0F2D62;
    --primary-light:#1E4B94;
    --primary-dark:#081B3D;

    --secondary:#0E9AA7;
    --secondary-light:#37C4D0;

    /* Background */

    --background:#F5F7FB;
    --white:#FFFFFF;

    /* Text */

    --text:#1E293B;
    --text-light:#64748B;
    --text-muted:#94A3B8;

    /* Status */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#3B82F6;

    /* Borders */

    --border:#E2E8F0;

    /* Radius */

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;
    --radius-xl:25px;

    /* Shadows */

    --shadow-sm:0 4px 12px rgba(15,45,98,.08);

    --shadow:
    0 10px 25px rgba(15,45,98,.08);

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

    /* Animation */

    --transition:.35s ease;

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}


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

h1{

    font-size:3rem;
    font-weight:700;
    line-height:1.2;

}

h2{

    font-size:2.4rem;
    font-weight:700;

}

h3{

    font-size:2rem;
    font-weight:600;

}

h4{

    font-size:1.6rem;
    font-weight:600;

}

h5{

    font-size:1.2rem;
    font-weight:600;

}

h6{

    font-size:1rem;
    font-weight:600;

}

p{

    font-size:16px;

    color:var(--text-light);

    line-height:1.8;

}

small{

    color:var(--text-muted);

}


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

a{

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}


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

img{

    max-width:100%;

    display:block;

}


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

.container{

    max-width:1320px;

}

.dashboard-container{

    max-width:none;

    width:100%;
    padding:30px;

}


/* ======================================================
   SECTIONS
====================================================== */

section{

    padding:80px 0;

}


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

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-success{

    color:var(--success)!important;

}

.text-danger{

    color:var(--danger)!important;

}

.text-warning{

    color:var(--warning)!important;

}

.text-muted{

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

}


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

.bg-primary{

    background:var(--primary)!important;

}

.bg-secondary{

    background:var(--secondary)!important;

}

.bg-light{

    background:#F8FAFC!important;

}

.bg-white{

    background:var(--white)!important;

}


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

.shadow-sm{

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

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

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

}


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

.rounded-sm{

    border-radius:var(--radius-sm)!important;

}

.rounded{

    border-radius:var(--radius)!important;

}

.rounded-lg{

    border-radius:var(--radius-lg)!important;

}

.rounded-xl{

    border-radius:var(--radius-xl)!important;

}


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

.cursor{

    cursor:pointer;

}

.w-fit{

    width:fit-content;

}

.h-100{

    height:100%;

}

.overflow-hidden{

    overflow:hidden;

}


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

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


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

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.py-80{

    padding:80px 0;

}


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

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.float{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


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

::selection{

    background:var(--secondary);

    color:#fff;

}


/* ======================================================
   PRELOADER SUPPORT
====================================================== */

.hidden{

    display:none!important;

}


/* ======================================================
   END
====================================================== */