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

.hero{

    padding:100px 0;

    text-align:center;

    background:
    linear-gradient(135deg,#EAF5FF,#F8FAFC);

}

.hero-badge{

    display:inline-block;

    padding:8px 10px;

    border-radius:30px;

    background:#DCEFFF;

    color:var(--primary);

    font-size:.9rem;

    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

    font-size:3rem;

    color:var(--text);

    margin-bottom:20px;

}

.hero p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    font-size:1.15rem;

    line-height:1.8;

}

.hero-search{

    max-width:760px;

    margin:40px auto;

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.hero-search input{

    flex:1;

    border:none;

    padding:20px 28px;

    font-size:1rem;

    outline:none;

}

.hero-search button{

    border:none;

    background:var(--primary);

    color:#fff;

    padding:0 35px;

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

}

.hero-search button:hover{

    background:var(--primary-dark);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:35px;

}

.btn{

    display:inline-block;

    text-decoration:none;

    padding:14px 30px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-secondary{

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

    color:var(--primary);

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

.popular-search{

    color:var(--muted);

}

.popular-search a{

    margin:0 10px;

    text-decoration:none;

    color:var(--primary);

}

.popular-search a:hover{

    text-decoration:underline;

}


/*=========================================
STATISTICS
=========================================*/

.statistics{

    padding:20px 0;

}

.section-title{

    text-align:center;

    font-size:2rem;

    margin-bottom:10px;

}

.section-subtitle{

    text-align:center;

    color:var(--muted);

    margin-bottom:20px;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-card{

    background:#fff;

    border-radius:12px;

    padding:20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h3{

    font-size:2.5rem;

    color:var(--primary);

}

.stat-card p{

    margin-top:10px;

    color:var(--muted);

}



/*=========================================
BROWSE DISTRICTS
=========================================*/

.districts{

    padding:20px 0;

    background:#F8FAFC;

}

.district-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.district-card{

    background:#fff;

    border-radius:16px;

    padding:35px;

    text-align:center;

    text-decoration:none;

    color:inherit;

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

    box-shadow:var(--shadow);

    transition:.3s;

}

.district-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.10);

}

.district-icon{

    font-size:3rem;

    margin-bottom:20px;

}

.district-card h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:1.4rem;

}

.district-card p{

    color:var(--muted);

    margin-bottom:20px;

}

.district-card span{

    font-weight:600;

    color:var(--primary);

}

.district-card.active{

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

}



@media(max-width:768px){

.stats-grid{

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

}

}


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

@media(max-width:768px){

    .hero{

        padding:70px 0;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero-search{

        flex-direction:column;

        border-radius:12px;

    }

    .hero-search button{

        padding:18px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

}

@media(max-width:768px){

    .stats-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }

@media(max-width:500px){

    .stats-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }