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

.district-hero{
    padding:10px 0 0;
    background:linear-gradient(135deg,#EAF5FF,#F8FAFC);
    text-align:center;
}

.breadcrumb{
    margin-bottom:10px;
    color:var(--muted);
    font-size:.95rem;
}

.breadcrumb a{
    color:var(--primary);
    text-decoration:none;
}

.breadcrumb span{
    margin:0 8px;
}

.district-hero h1{
    font-size:2.4rem;
    color:var(--text);
    margin-bottom:10px;
}

.district-hero p{
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:1.05rem;
}


/* ==========================================
   SECTOR LIST
========================================== */

.sector-list{
    padding:0px 0 0px;
}


/* ==========================================
   SECTOR GRID
========================================== */

.sector-grid{

    display:grid;

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

    gap:18px;

}


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

.sector-card{

    background:#fff;

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

    border-radius:10px;

    padding:18px;

    transition:.25s;

}

.sector-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

}

.sector-card h3{

    color:var(--primary);

    font-size:1.1rem;

    margin-bottom:15px;

    padding-bottom:10px;

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

}

.sector-card a{

    display:block;

    padding:8px 0;

    color:var(--text);

    text-decoration:none;

    font-size:.95rem;

    transition:.25s;

}

.sector-card a:hover{

    color:var(--primary);

    padding-left:5px;

}


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

@media (max-width:992px){

    .district-hero{
        padding:50px 0;
    }

    .district-hero h1{
        font-size:2rem;
    }

    .sector-grid{
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    }

}


@media (max-width:768px){

    .district-hero{
        padding:40px 0;
    }

    .district-hero h1{
        font-size:1.8rem;
    }

    .district-hero p{
        font-size:.95rem;
    }

    .sector-list{
        padding:35px 0 50px;
    }

    .sector-grid{
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
        gap:15px;
    }

}


@media (max-width:480px){

    .sector-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .sector-card{

        padding:15px;

    }

    .sector-card h3{

        font-size:1rem;

        margin-bottom:12px;

    }

    .sector-card a{

        font-size:.9rem;

        padding:6px 0;

    }

}