/*====================================================
    ECSPI ENTERPRISE PORTAL
=====================================================*/

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

body{

    font-family:Segoe UI,Tahoma,Arial,sans-serif;

    background:#f3f6f4;

    color:#333;

}

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

.navbar{

    background:linear-gradient(90deg,#0f6b37,#16884a,#1f9d55) !important;

    border-bottom:4px solid #0d5d31;

}

.navbar-brand{

    font-size:24px;

    font-weight:bold;

    letter-spacing:1px;

}

.navbar-brand img{

    border-radius:5px;

}

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

.hero{

    background:url("../images/banner.jpg");

    background-size:cover;

    background-position:center;

    height:340px;

    position:relative;

}

.overlay{

    background:rgba(12,80,40,.75);

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

}

.hero h1{

    color:white;

    font-size:52px;

    font-weight:700;

}

.hero p{

    color:#dff6e5;

    font-size:22px;

}

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

.system-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    transition:.35s;

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

}

.system-card:hover{

    transform:translateY(-10px);

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

}

.system-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.system-card h3{

    color:#157347;

    margin-bottom:15px;

    font-weight:bold;

}

.system-card p{

    color:#666;

    min-height:90px;

}

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

.btn-primary{

    background:#198754;

    border:none;

}

.btn-primary:hover{

    background:#146c43;

}

.btn-success{

    background:#0f6b37;

    border:none;

}

.btn-success:hover{

    background:#0b4f2a;

}

.btn-secondary{

    background:#6c757d;

    border:none;

}

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

footer{

    margin-top:60px;

    background:#0f6b37;

    color:white;

    text-align:center;

    padding:25px;

}

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

@media(max-width:768px){

.hero{

    height:240px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:18px;

}

}