/*
==================================================
PORTAL EMAIL POLTESA V3
FILE : assets/css/style.css
==================================================
*/

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

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --secondary:#64748b;

    --success:#16a34a;

    --danger:#dc2626;

    --warning:#f59e0b;

    --info:#0ea5e9;

    --dark:#1e293b;

    --light:#ffffff;

    --background:#f8fafc;

    --border:#e5e7eb;

    --shadow:0 10px 30px rgba(15,23,42,.08);

    --radius:16px;

}

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

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--dark);

    font-size:15px;

    line-height:1.7;

}

/* ==================================================
LINK
================================================== */

a{

    text-decoration:none;

    transition:.3s;

}

a:hover{

    text-decoration:none;

}

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

section{

    padding:70px 0;

}

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

.container{

    max-width:1200px;

}

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

#preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

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

.navbar{

    background:#fff !important;

    box-shadow:0 2px 15px rgba(0,0,0,.05);

    padding:15px 0;

}

.navbar-brand{

    font-weight:700;

}

.navbar-brand img{

    width:48px;

}

.nav-link{

    color:#334155 !important;

    font-weight:500;

    margin:0 8px;

}

.nav-link:hover{

    color:var(--primary) !important;

}

.nav-link.active{

    color:var(--primary) !important;

}

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

.btn{

    border-radius:12px;

    transition:.3s;

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline-primary{

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

}

.btn-outline-primary:hover{

    background:var(--primary);

}

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

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

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

}


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

.badge{

    border-radius:50px;

    padding:8px 16px;

    font-weight:600;

}

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

.form-label{

    font-weight:600;

    margin-bottom:8px;

}

.form-control,
.form-select{

    border-radius:12px;

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

    padding:12px 15px;

    box-shadow:none;

    transition:.3s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

textarea{

    resize:none;

}

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

.table{

    vertical-align:middle;

}

.table thead{

    background:#f1f5f9;

}

.table thead th{

    border:none;

    color:var(--dark);

    font-weight:600;

}

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

    background:#f8fafc;

}

/* ==================================================
ALERT
================================================== */

.alert{

    border:none;

    border-radius:12px;

    box-shadow:var(--shadow);

}

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

footer{

    background:#ffffff;

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

}

footer h5,
footer h6{

    font-weight:700;

}

footer a{

    color:var(--secondary);

}

footer a:hover{

    color:var(--primary);

}

footer small{

    color:#64748b;

}

/* ==================================================
HELPER
================================================== */

.required{

    color:var(--danger);

}

.shadow-soft{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:var(--radius);

}

.text-primary{

    color:var(--primary) !important;

}

.bg-primary{

    background:var(--primary) !important;

}


@media (max-width:576px){

    .card{

        margin-bottom:20px;

    }

    .display-3,
    .display-4,
    .display-5{

        font-size:2.2rem;

    }

}