/* ==========================================================
   SUNEO INFORMATION CENTER
   Author : Suneo ERP
========================================================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --dark:#0f172a;
    --light:#f8fafc;
    --gray:#64748b;
    --border:#e2e8f0;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:#f1f5f9;

    color:#1e293b;

    font-family:
    "Segoe UI",
    sans-serif;

}

/* =======================================
Navbar
======================================= */

.navbar{

    background:var(--dark);

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.navbar-brand{

    font-size:24px;

    font-weight:bold;

}

.nav-link{

    color:#fff !important;

    margin-left:15px;

}

.nav-link:hover{

    color:#60a5fa !important;

}

/* =======================================
Information Bar
======================================= */

.top-info{

    background:var(--primary);

    color:#fff;

    padding:10px 0;

    font-size:15px;

}

.top-info i{

    margin-right:8px;

}

/* =======================================
Hero
======================================= */

.hero{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
    );

    color:#fff;

    padding:90px 0;

}

.hero h1{

    font-size:54px;

    font-weight:700;

    line-height:1.2;

}

.hero p{

    margin-top:20px;

    font-size:18px;

    opacity:.95;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#ffffff22;

    backdrop-filter:blur(10px);

    font-size:14px;

}

.hero-image{

    max-height:340px;

}

/* =======================================
Search
======================================= */

.search-box{

    margin-top:35px;

}

.search-box .form-control{

    border-radius:12px 0 0 12px;

    border:none;

    padding:15px;

}

.search-box .btn{

    border-radius:0 12px 12px 0;

    padding:15px 25px;

}

/* =======================================
Section
======================================= */

.section{

    padding:70px 0;

}

.section-title{

    font-size:32px;

    font-weight:700;

    margin-bottom:35px;

}

/* =======================================
Banner
======================================= */

.banner-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

}

.banner-image{

    height:320px;

    background:#dbeafe;

}

.banner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.banner-content{

    padding:35px;

}

/* =======================================
Featured
======================================= */

.featured-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-bottom:30px;

}

/* =======================================
Grid
======================================= */

.news-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.25s;

    height:100%;

}

.news-card:hover{

    transform:translateY(-8px);

}

.news-image{

    height:220px;

    background:#dbeafe;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.news-content{

    padding:25px;

}

.news-content h5{

    margin-top:15px;

    font-weight:700;

}

.news-content p{

    color:#64748b;

}

.news-content a{

    text-decoration:none;

    font-weight:bold;

}

/* =======================================
Badge
======================================= */

.badge{

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

}

/* =======================================
Download
======================================= */

.download-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

/* =======================================
Footer
======================================= */

.footer{

    margin-top:80px;

    background:var(--dark);

    color:#fff;

    padding:60px 0;

}

.footer h5{

    margin-bottom:20px;

}

.footer a{

    color:#cbd5e1;

    text-decoration:none;

}

.footer a:hover{

    color:#fff;

}

/* =======================================
Responsive
======================================= */

@media(max-width:991px){

.hero{

padding:60px 0;

text-align:center;

}

.hero h1{

font-size:38px;

}

.hero-image{

margin-top:40px;

}

.section{

padding:50px 0;

}

.section-title{

font-size:26px;

}

}