/* ===========================
   CivicNet Official Website
   =========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#08111f;

    color:#ffffff;

    line-height:1.7;

}

/* ========================= */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* ========================= */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#0c1628;

    border-bottom:1px solid #1f2f49;

    z-index:999;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:75px;

}

.logo h2{

    color:#4fd1ff;

    font-size:30px;

}

nav a{

    color:white;

    text-decoration:none;

    margin-left:25px;

    transition:.3s;

    font-size:15px;

}

nav a:hover{

    color:#4fd1ff;

}

/* ========================= */

.hero{

    padding-top:170px;

    padding-bottom:130px;

    text-align:center;

    background:linear-gradient(180deg,#08111f,#10294a);

}

.hero h1{

    font-size:58px;

    margin-bottom:20px;

}

.subtitle{

    color:#bfcde2;

    font-size:24px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ========================= */

.btn{

    display:inline-block;

    background:#1d9bf0;

    color:white;

    padding:15px 35px;

    border-radius:8px;

    text-decoration:none;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

    background:#32b1ff;

}

.secondary{

    background:#16a34a;

}

.secondary:hover{

    background:#1bc15b;

}

/* ========================= */

section{

    padding:90px 0;

}

section h2{

    text-align:center;

    font-size:38px;

    margin-bottom:45px;

}

/* ========================= */

.about p{

    max-width:900px;

    margin:auto;

    color:#c9d5e5;

    margin-bottom:20px;

    text-align:center;

}

/* ========================= */

.grid{

    display:grid;

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

    gap:25px;

}

/* ========================= */

.card{

    background:#112039;

    border:1px solid #223b63;

    padding:30px;

    border-radius:12px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#4fd1ff;

}

.card h3{

    margin-bottom:15px;

    color:#4fd1ff;

}

.card p{

    color:#cbd5e1;

}

/* ========================= */

table{

    width:100%;

    border-collapse:collapse;

    background:#112039;

    border-radius:10px;

    overflow:hidden;

}

table td{

    padding:18px;

    border-bottom:1px solid #233b61;

}

table tr:nth-child(even){

    background:#162947;

}

/* ========================= */

.done{

    border-left:5px solid #22c55e;

}

.progress{

    border-left:5px solid orange;

}

/* ========================= */

.cta{

    text-align:center;

    background:linear-gradient(90deg,#0b1830,#163962);

}

.cta p{

    margin-top:15px;

    margin-bottom:35px;

    color:#d8e6f6;

}

/* ========================= */

footer{

    background:#060d18;

    padding:70px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

footer h3{

    margin-bottom:15px;

    color:#4fd1ff;

}

footer ul{

    list-style:none;

}

footer li{

    margin-bottom:10px;

}

footer a{

    color:#b8c7dc;

    text-decoration:none;

}

footer a:hover{

    color:#4fd1ff;

}

hr{

    border:none;

    border-top:1px solid #223654;

    margin:40px 0;

}

.copyright{

    text-align:center;

    color:#90a5c0;

}

/* ========================= */

@media(max-width:900px){

header .container{

    flex-direction:column;

    height:auto;

    padding:20px;

}

nav{

    margin-top:15px;

}

nav a{

    display:inline-block;

    margin:10px;

}

.hero{

    padding-top:220px;

}

.hero h1{

    font-size:42px;

}

.subtitle{

    font-size:20px;

}

section h2{

    font-size:30px;

}

}

/* ========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08111f;

}

::-webkit-scrollbar-thumb{

    background:#214b83;

}

::-webkit-scrollbar-thumb:hover{

    background:#4fd1ff;

}