/* =====================================================
   FUNYATRA PREMIUM STATE PAGE
   Professional • Attractive • Responsive
===================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    background:#f7fafc;
    color:#172033;
    line-height:1.6;
}

img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(1200px,92%);margin:0 auto}


/* HERO */

.state-hero,.district-hero{
    position:relative;
    height:560px;
    min-height:480px;
    overflow:hidden;
    background:#0f172a;
}

.state-hero > img,.district-hero > img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    animation:stateHeroZoom 18s ease-in-out infinite alternate;
}

@keyframes stateHeroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.06)}
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(2,8,23,.10) 0%,
        rgba(2,8,23,.30) 38%,
        rgba(2,8,23,.88) 100%
    );
}

.hero-content{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:72px;
    transform:translateX(-50%);
    width:min(1200px,92%);
    color:#fff;
}

.hero-content h1{
    max-width:900px;
    margin-bottom:14px;
    font-size:clamp(38px,6vw,68px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-1.5px;
    text-shadow:0 4px 25px rgba(0,0,0,.35);
}

.hero-content p{
    max-width:780px;
    color:rgba(255,255,255,.94);
    font-size:clamp(16px,2vw,21px);
    line-height:1.7;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}


/* BREADCRUMB */

.breadcrumb{
    width:min(1200px,92%);
    margin:28px auto;
    padding:13px 20px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
    background:rgba(255,255,255,.96);
    border:1px solid #e8eef5;
    border-radius:14px;
    box-shadow:0 8px 28px rgba(15,23,42,.07);
    font-size:14px;
}

.breadcrumb a{
    color:#087ea4;
    text-decoration:none;
    font-weight:700;
}

.breadcrumb a:hover{color:#0f9f75}
.breadcrumb span{color:#64748b}


/* ABOUT */

.state-about,.district-about{padding:58px 0 25px}

.state-about h2,.district-about h2{
    margin-bottom:18px;
    text-align:center;
    font-size:clamp(30px,4vw,43px);
    line-height:1.2;
    font-weight:850;
    letter-spacing:-.7px;
    background:linear-gradient(90deg,#087ea4,#16a36f);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.state-about p,.district-about p{
    width:min(950px,100%);
    margin:auto;
    text-align:center;
    color:#526274;
    font-size:17px;
    line-height:1.9;
}


/* STATISTICS */

.state-stats{
    width:min(900px,92%);
    margin:28px auto 58px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.stat-card{
    position:relative;
    overflow:hidden;
    padding:28px 20px;
    text-align:center;
    background:#fff;
    border:1px solid #e8eef5;
    border-radius:22px;
    box-shadow:0 12px 32px rgba(15,23,42,.07);
    transition:transform .3s ease,box-shadow .3s ease;
}

.stat-card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:linear-gradient(90deg,#087ea4,#16a36f);
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 42px rgba(15,23,42,.11);
}

.stat-card h3{
    color:#087ea4;
    font-size:clamp(36px,5vw,50px);
    line-height:1;
    font-weight:900;
}

.stat-card p{
    margin-top:10px;
    color:#59697a;
    font-size:15px;
    font-weight:700;
}


/* SECTION HEADER */

.section-header{
    margin-bottom:34px;
    text-align:center;
}

.section-kicker{
    display:inline-block;
    margin-bottom:8px;
    color:#087ea4;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.section-header h2{
    color:#102033;
    font-size:clamp(29px,4vw,42px);
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.6px;
}

.section-header p{
    max-width:720px;
    margin:9px auto 0;
    color:#6a7888;
    font-size:16px;
}


/* DISTRICTS */

.district-section{padding:58px 0}

.district-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
}

.district-card{
    position:relative;
    min-height:76px;
    overflow:hidden;
    padding:19px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    background:#fff;
    border:1px solid #e6edf4;
    border-radius:17px;
    text-decoration:none;
    color:#172033;
    box-shadow:0 8px 25px rgba(15,23,42,.055);
    transition:transform .3s ease,color .3s ease,box-shadow .3s ease;
}

.district-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#087ea4,#16a36f);
    opacity:0;
    transition:opacity .3s ease;
}

.district-card:hover{
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(15,23,42,.13);
}

.district-card:hover::before{opacity:1}

.district-name,.district-card > span{
    position:relative;
    z-index:1;
}

.district-name{
    font-size:16px;
    line-height:1.35;
    font-weight:800;
}

.district-card > span{
    flex:0 0 auto;
    font-size:20px;
    opacity:.7;
    transition:transform .3s ease;
}

.district-card:hover > span{
    transform:translateX(4px);
    opacity:1;
}


/* POPULAR PLACES */

.state-places,.district-places{padding:58px 0 78px}

.place-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.place-card{
    overflow:hidden;
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.07);
    transition:transform .35s ease,box-shadow .35s ease;
}

.place-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 42px rgba(15,23,42,.13);
}

.place-image-link{
    display:block;
    text-decoration:none;
}

.place-image{
    position:relative;
    height:225px;
    overflow:hidden;
    background:#eaf0f5;
}

.place-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s ease;
}

.place-card:hover .place-image img{transform:scale(1.06)}

.place-rating{
    position:absolute;
    top:14px;
    right:14px;
    padding:6px 10px;
    background:rgba(15,23,42,.82);
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    backdrop-filter:blur(8px);
}

.place-content{padding:20px}

.place-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.place-content h3{
    margin:0;
    font-size:20px;
    line-height:1.3;
    font-weight:850;
}

.place-content h3 a{
    color:#152238;
    text-decoration:none;
}

.place-content h3 a:hover{color:#087ea4}

.review-count{
    flex:0 0 auto;
    color:#7a8795;
    font-size:11px;
    line-height:1.4;
    text-align:right;
}

.place-location{
    margin-top:9px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#087ea4;
    font-size:13px;
    font-weight:700;
}

.place-description{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    min-height:70px;
    margin:12px 0 16px;
    color:#64748b;
    font-size:14px;
    line-height:1.65;
}

.place-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border:1px solid #dce7ee;
    border-radius:10px;
    background:#f5fafc;
    color:#087ea4;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:background .25s ease,color .25s ease,transform .25s ease;
}

.place-btn:hover{
    background:#087ea4;
    color:#fff;
    transform:translateX(2px);
}


/* EMPTY STATE */

.empty-state{
    max-width:650px;
    margin:20px auto 0;
    padding:42px 25px;
    text-align:center;
    background:#fff;
    border:1px dashed #cbd8e3;
    border-radius:20px;
}

.empty-icon{margin-bottom:10px;font-size:38px}

.empty-state h3{
    color:#1e293b;
    font-size:21px;
}

.empty-state p{
    margin-top:7px;
    color:#64748b;
    font-size:14px;
}


/* ACCESSIBILITY */

a:focus-visible{
    outline:3px solid rgba(8,126,164,.28);
    outline-offset:3px;
    border-radius:5px;
}


/* TABLET */

@media(max-width:1000px){

    .state-hero,.district-hero{height:500px}

    .district-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

    .place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* MOBILE */

@media(max-width:700px){

    .container{width:92%}

    .state-hero,.district-hero{
        height:410px;
        min-height:380px;
    }

    .hero-content{
        bottom:38px;
        width:92%;
    }

    .hero-content h1{
        margin-bottom:10px;
        font-size:34px;
        letter-spacing:-.7px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.55;
    }

    .breadcrumb{
        width:92%;
        margin:16px auto;
        padding:11px 14px;
        border-radius:12px;
        font-size:12px;
        gap:6px 9px;
    }

    .state-about,.district-about{padding:38px 0 15px}

    .state-about h2,.district-about h2{
        margin-bottom:13px;
        font-size:29px;
    }

    .state-about p,.district-about p{
        font-size:15px;
        line-height:1.7;
    }

    .state-stats{
        width:92%;
        margin:20px auto 38px;
        gap:12px;
    }

    .stat-card{
        padding:22px 15px;
        border-radius:17px;
    }

    .stat-card h3{font-size:36px}

    .stat-card p{
        margin-top:7px;
        font-size:13px;
    }

    .district-section,.state-places,.district-places{
        padding:38px 0 48px;
    }

    .section-header{margin-bottom:23px}

    .section-kicker{
        font-size:11px;
        margin-bottom:5px;
    }

    .section-header h2{font-size:28px}

    .section-header p{
        font-size:14px;
        line-height:1.55;
    }

    .district-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .district-card{
        min-height:60px;
        padding:13px 12px;
        border-radius:13px;
        gap:7px;
    }

    .district-name{font-size:14px}

    .district-card > span{font-size:17px}

    .place-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .place-image{height:205px}

    .place-content{padding:16px}

    .place-content h3{font-size:18px}

    .place-description{
        min-height:0;
        margin:10px 0 13px;
        font-size:13px;
        line-height:1.55;
    }
}


/* SMALL MOBILE */

@media(max-width:420px){

    .state-hero,.district-hero{height:370px}

    .hero-content h1{font-size:29px}

    .hero-content p{font-size:14px}

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

    .stat-card h3{font-size:31px}

    .district-name{font-size:13px}

    .place-image{height:190px}
}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

    html{scroll-behavior:auto}

    .state-hero > img,.district-hero > img{animation:none}

    *,*::before,*::after{transition:none !important}
}/* =====================================================
   FUNYATRA PREMIUM STATE PAGE
   Professional • Attractive • Responsive
===================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    background:#f7fafc;
    color:#172033;
    line-height:1.6;
}

img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(1200px,92%);margin:0 auto}


/* HERO */

.state-hero,.district-hero{
    position:relative;
    height:560px;
    min-height:480px;
    overflow:hidden;
    background:#0f172a;
}

.state-hero > img,.district-hero > img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    animation:stateHeroZoom 18s ease-in-out infinite alternate;
}

@keyframes stateHeroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.06)}
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(2,8,23,.10) 0%,
        rgba(2,8,23,.30) 38%,
        rgba(2,8,23,.88) 100%
    );
}

.hero-content{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:72px;
    transform:translateX(-50%);
    width:min(1200px,92%);
    color:#fff;
}

.hero-content h1{
    max-width:900px;
    margin-bottom:14px;
    font-size:clamp(38px,6vw,68px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-1.5px;
    text-shadow:0 4px 25px rgba(0,0,0,.35);
}

.hero-content p{
    max-width:780px;
    color:rgba(255,255,255,.94);
    font-size:clamp(16px,2vw,21px);
    line-height:1.7;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}


/* BREADCRUMB */

.breadcrumb{
    width:min(1200px,92%);
    margin:28px auto;
    padding:13px 20px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
    background:rgba(255,255,255,.96);
    border:1px solid #e8eef5;
    border-radius:14px;
    box-shadow:0 8px 28px rgba(15,23,42,.07);
    font-size:14px;
}

.breadcrumb a{
    color:#087ea4;
    text-decoration:none;
    font-weight:700;
}

.breadcrumb a:hover{color:#0f9f75}
.breadcrumb span{color:#64748b}


/* ABOUT */

.state-about,.district-about{padding:58px 0 25px}

.state-about h2,.district-about h2{
    margin-bottom:18px;
    text-align:center;
    font-size:clamp(30px,4vw,43px);
    line-height:1.2;
    font-weight:850;
    letter-spacing:-.7px;
    background:linear-gradient(90deg,#087ea4,#16a36f);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.state-about p,.district-about p{
    width:min(950px,100%);
    margin:auto;
    text-align:center;
    color:#526274;
    font-size:17px;
    line-height:1.9;
}


/* STATISTICS */

.state-stats{
    width:min(900px,92%);
    margin:28px auto 58px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.stat-card{
    position:relative;
    overflow:hidden;
    padding:28px 20px;
    text-align:center;
    background:#fff;
    border:1px solid #e8eef5;
    border-radius:22px;
    box-shadow:0 12px 32px rgba(15,23,42,.07);
    transition:transform .3s ease,box-shadow .3s ease;
}

.stat-card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:linear-gradient(90deg,#087ea4,#16a36f);
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 42px rgba(15,23,42,.11);
}

.stat-card h3{
    color:#087ea4;
    font-size:clamp(36px,5vw,50px);
    line-height:1;
    font-weight:900;
}

.stat-card p{
    margin-top:10px;
    color:#59697a;
    font-size:15px;
    font-weight:700;
}


/* SECTION HEADER */

.section-header{
    margin-bottom:34px;
    text-align:center;
}

.section-kicker{
    display:inline-block;
    margin-bottom:8px;
    color:#087ea4;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.section-header h2{
    color:#102033;
    font-size:clamp(29px,4vw,42px);
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.6px;
}

.section-header p{
    max-width:720px;
    margin:9px auto 0;
    color:#6a7888;
    font-size:16px;
}


/* DISTRICTS */

.district-section{padding:58px 0}

.district-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
}

.district-card{
    position:relative;
    min-height:76px;
    overflow:hidden;
    padding:19px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    background:#fff;
    border:1px solid #e6edf4;
    border-radius:17px;
    text-decoration:none;
    color:#172033;
    box-shadow:0 8px 25px rgba(15,23,42,.055);
    transition:transform .3s ease,color .3s ease,box-shadow .3s ease;
}

.district-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#087ea4,#16a36f);
    opacity:0;
    transition:opacity .3s ease;
}

.district-card:hover{
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(15,23,42,.13);
}

.district-card:hover::before{opacity:1}

.district-name,.district-card > span{
    position:relative;
    z-index:1;
}

.district-name{
    font-size:16px;
    line-height:1.35;
    font-weight:800;
}

.district-card > span{
    flex:0 0 auto;
    font-size:20px;
    opacity:.7;
    transition:transform .3s ease;
}

.district-card:hover > span{
    transform:translateX(4px);
    opacity:1;
}


/* =====================================================
   POPULAR TOURIST PLACES
===================================================== */

.state-places,
.district-places {
    padding: 42px 0 55px;
}


/* ===============================
   PLACE GRID
================================ */

.place-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* ===============================
   PLACE CARD
================================ */

.place-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e5ebf1;

    border-radius: 18px;

    box-shadow:
        0 7px 24px rgba(15, 23, 42, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.place-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .12);
}


/* ===============================
   IMAGE
================================ */

.place-image-link {
    display: block;
    text-decoration: none;
}

.place-image {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;

    background: #eef3f7;
}

.place-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.place-card:hover .place-image img {
    transform: scale(1.05);
}


/* ===============================
   RATING
================================ */

.place-rating {
    position: absolute;

    top: 12px;
    right: 12px;

    padding: 5px 9px;

    border-radius: 20px;

    background: rgba(15, 23, 42, .82);

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    backdrop-filter: blur(7px);
}


/* ===============================
   CONTENT
================================ */

.place-content {
    padding: 17px 18px 18px;
}


/* ===============================
   HEADING
================================ */

.place-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;
}

.place-content h3 {
    margin: 0;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 800;
}

.place-content h3 a {
    color: #152238;

    text-decoration: none;

    transition: color .25s ease;
}

.place-content h3 a:hover {
    color: #087ea4;
}


/* ===============================
   REVIEWS
================================ */

.review-count {
    flex: 0 0 auto;

    color: #7a8795;

    font-size: 11px;

    line-height: 1.4;

    text-align: right;
}


/* ===============================
   LOCATION
================================ */

.place-location {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 6px;

    color: #087ea4;

    font-size: 12px;

    font-weight: 700;
}


/* ===============================
   SHORT DESCRIPTION
================================ */

.place-description {
    margin: 9px 0 11px;

    padding: 0;

    color: #64748b;

    font-size: 13.5px;

    line-height: 1.55;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* ===============================
   BUTTON
================================ */

.place-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid #d8e5ec;

    border-radius: 9px;

    background: #f5fafc;

    color: #087ea4;

    text-decoration: none;

    font-size: 12.5px;

    font-weight: 800;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.place-btn:hover {
    background: #087ea4;

    color: #fff;

    transform: translateX(2px);
}


/* ===============================
   EMPTY STATE
================================ */

.empty-state {
    max-width: 650px;

    margin: 15px auto 0;

    padding: 35px 22px;

    text-align: center;

    background: #fff;

    border: 1px dashed #cbd8e3;

    border-radius: 18px;
}

.empty-icon {
    margin-bottom: 8px;

    font-size: 35px;
}

.empty-state h3 {
    color: #1e293b;

    font-size: 20px;
}

.empty-state p {
    margin-top: 6px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* ===============================
   TABLET
================================ */

@media (max-width: 1000px) {

    .place-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


/* ===============================
   MOBILE
================================ */

@media (max-width: 600px) {

    .state-places,
    .district-places {
        padding: 28px 0 38px;
    }

    .place-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .place-image {
        height: 135px;
    }

    .place-content {
        padding: 11px;
    }

    .place-content h3 {
        font-size: 15px;
        line-height: 1.3;
    }

    .review-count {
        font-size: 9px;
    }

    .place-location {
        margin-top: 5px;

        font-size: 10.5px;

        line-height: 1.3;
    }

    .place-description {
        margin: 6px 0 8px;

        font-size: 11.5px;

        line-height: 1.45;

        -webkit-line-clamp: 3;
    }

    .place-rating {
        top: 8px;
        right: 8px;

        padding: 4px 7px;

        font-size: 10px;
    }

    .place-btn {
        padding: 7px 9px;

        font-size: 10.5px;

        gap: 5px;
    }

}


/* ===============================
   VERY SMALL MOBILE
================================ */

@media (max-width: 380px) {

    .place-grid {
        gap: 9px;
    }

    .place-image {
        height: 120px;
    }

    .place-content {
        padding: 9px;
    }

    .place-content h3 {
        font-size: 14px;
    }

    .place-description {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }

    .place-btn {
        font-size: 10px;
        padding: 6px 8px;
    }

}


/* ACCESSIBILITY */

a:focus-visible{
    outline:3px solid rgba(8,126,164,.28);
    outline-offset:3px;
    border-radius:5px;
}


/* TABLET */

@media(max-width:1000px){

    .state-hero,.district-hero{height:500px}

    .district-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

    .place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* MOBILE */

@media(max-width:700px){

    .container{width:92%}

    .state-hero,.district-hero{
        height:410px;
        min-height:380px;
    }

    .hero-content{
        bottom:38px;
        width:92%;
    }

    .hero-content h1{
        margin-bottom:10px;
        font-size:34px;
        letter-spacing:-.7px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.55;
    }

    .breadcrumb{
        width:92%;
        margin:16px auto;
        padding:11px 14px;
        border-radius:12px;
        font-size:12px;
        gap:6px 9px;
    }

    .state-about,.district-about{padding:38px 0 15px}

    .state-about h2,.district-about h2{
        margin-bottom:13px;
        font-size:29px;
    }

    .state-about p,.district-about p{
        font-size:15px;
        line-height:1.7;
    }

    .state-stats{
        width:92%;
        margin:20px auto 38px;
        gap:12px;
    }

    .stat-card{
        padding:22px 15px;
        border-radius:17px;
    }

    .stat-card h3{font-size:36px}

    .stat-card p{
        margin-top:7px;
        font-size:13px;
    }

    .district-section,.state-places,.district-places{
        padding:38px 0 48px;
    }

    .section-header{margin-bottom:23px}

    .section-kicker{
        font-size:11px;
        margin-bottom:5px;
    }

    .section-header h2{font-size:28px}

    .section-header p{
        font-size:14px;
        line-height:1.55;
    }

    .district-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .district-card{
        min-height:60px;
        padding:13px 12px;
        border-radius:13px;
        gap:7px;
    }

    .district-name{font-size:14px}

    .district-card > span{font-size:17px}

    .place-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .place-image{height:205px}

    .place-content{padding:16px}

    .place-content h3{font-size:18px}

    .place-description{
        min-height:0;
        margin:10px 0 13px;
        font-size:13px;
        line-height:1.55;
    }
}


/* SMALL MOBILE */

@media(max-width:420px){

    .state-hero,.district-hero{height:370px}

    .hero-content h1{font-size:29px}

    .hero-content p{font-size:14px}

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

    .stat-card h3{font-size:31px}

    .district-name{font-size:13px}

    .place-image{height:190px}
}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

    html{scroll-behavior:auto}

    .state-hero > img,.district-hero > img{animation:none}

    *,*::before,*::after{transition:none !important}
}