/* =========================================================
CHALLAN PORTAL UI
UNIQUE GOVERNMENT DASHBOARD STYLE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
#edf4ff 0%,
#f7f9fc 40%,
#eef2f7 100%
);

color:#0f172a;

overflow-x:hidden;

}

/* =========================================================
PAGE WRAPPER
========================================================= */

.page-wrapper{

padding:40px 0 80px;

}

.page-wrapper .container{

max-width:1250px;

}

/* =========================================================
MAIN CARD
========================================================= */

.article-card{

background:#ffffff;

border-radius:34px;

padding:55px;

position:relative;

overflow:hidden;

box-shadow:
0 25px 70px rgba(15,23,42,.08);

border:1px solid #dbe7ff;

}

.article-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:8px;

background:
linear-gradient(
90deg,
#2563eb,
#0ea5e9,
#06b6d4
);

}

/* =========================================================
BREADCRUMB
========================================================= */

.breadcrumb-box{

display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;

margin-bottom:25px;

font-size:14px;

font-weight:600;

color:#64748b;

}

.breadcrumb-box a{

text-decoration:none;

color:#2563eb;

font-weight:700;

}

.breadcrumb-box span{

opacity:.8;

}

/* =========================================================
TITLE
========================================================= */

.article-title{

font-size:54px;

line-height:1.2;

font-weight:900;

letter-spacing:-1px;

margin-bottom:22px;

max-width:900px;

color:#0f172a;

}

.article-description{

font-size:19px;

line-height:2;

color:#475569;

margin-bottom:45px;

max-width:1000px;

}

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

.hero-box{

background:
linear-gradient(
135deg,
#0f172a 0%,
#111827 40%,
#1e3a8a 100%
);

border-radius:36px;

padding:50px;

position:relative;

overflow:hidden;

margin-bottom:70px;

box-shadow:
0 30px 80px rgba(15,23,42,.18);

}

.hero-box::before{

content:"";

position:absolute;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(255,255,255,.05);

top:-180px;
right:-120px;

}

.hero-box::after{

content:"";

position:absolute;

width:260px;
height:260px;

border-radius:50%;

background:
rgba(59,130,246,.18);

bottom:-100px;
left:-80px;

}

.hero-content{

position:relative;
z-index:2;

}

.hero-content h2{

font-size:42px;

line-height:1.3;

font-weight:800;

color:#fff;

margin-bottom:22px;

}

.hero-content p{

font-size:17px;

line-height:2;

color:#dbeafe;

margin-bottom:24px;

}

.hero-content ul{

padding-left:18px;

}

.hero-content li{

margin-bottom:14px;

color:#bfdbfe;

font-size:16px;

font-weight:500;

line-height:1.9;

}

.hero-btn{

display:inline-flex;

align-items:center;
justify-content:center;
gap:12px;

padding:18px 34px;

border-radius:16px;

margin-top:28px;

background:
linear-gradient(
135deg,
#f59e0b,
#f97316
);

color:#fff;

font-size:16px;

font-weight:800;

text-decoration:none;

box-shadow:
0 20px 45px rgba(249,115,22,.35);

transition:.35s;

}

.hero-btn:hover{

transform:
translateY(-5px);

color:#fff;

}

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

.hero-image{

position:relative;

z-index:2;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(14px);

padding:18px;

border-radius:28px;

border:1px solid rgba(255,255,255,.1);

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

}

.hero-image img{

width:100%;

border-radius:18px;

display:block;

background:#fff;

border:4px solid rgba(255,255,255,.08);

}

/* =========================================================
SECTION HEADINGS
========================================================= */

.content-heading{

font-size:36px;

font-weight:800;

line-height:1.4;

margin-top:70px;

margin-bottom:24px;

padding-left:22px;

position:relative;

color:#0f172a;

}

.content-heading::before{

content:"";

position:absolute;

left:0;
top:8px;

width:8px;
height:42px;

border-radius:30px;

background:
linear-gradient(
180deg,
#2563eb,
#06b6d4
);

}

/* =========================================================
TEXT
========================================================= */

.content-text{

font-size:18px;

line-height:2.2;

color:#334155;

margin-bottom:24px;

}

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

.custom-list{

padding-left:24px;

margin-bottom:35px;

}

.custom-list li{

margin-bottom:14px;

font-size:17px;

line-height:2;

color:#334155;

font-weight:500;

}

/* =========================================================
INFO GRID
========================================================= */

.info-grid{

display:grid;

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

gap:26px;

margin-top:55px;

margin-bottom:55px;

}

/* =========================================================
INFO CARD
========================================================= */

.info-card{

background:
linear-gradient(
135deg,
#ffffff,
#f8fbff
);

border-radius:26px;

padding:34px;

border:1px solid #dbeafe;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:
0 12px 30px rgba(37,99,235,.06);

}

.info-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#2563eb,
#06b6d4
);

}

.info-card:hover{

transform:
translateY(-8px);

box-shadow:
0 25px 50px rgba(37,99,235,.12);

}

.info-icon{

width:72px;
height:72px;

border-radius:20px;

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:#fff;

font-size:28px;

margin-bottom:22px;

box-shadow:
0 15px 35px rgba(37,99,235,.28);

}

.info-card h3{

font-size:24px;

font-weight:800;

margin-bottom:12px;

color:#0f172a;

}

.info-card p{

font-size:15px;

line-height:2;

color:#475569;

}

/* =========================================================
LEGAL BOX
========================================================= */

.legal-box{

background:
linear-gradient(
135deg,
#fff7ed,
#fff1e6
);

padding:35px;

border-radius:28px;

border-left:7px solid #f97316;

margin-top:55px;

margin-bottom:55px;

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

}

.legal-box h2{

font-size:30px;

font-weight:800;

margin-bottom:16px;

color:#9a3412;

}

.legal-box p{

font-size:17px;

line-height:2;

color:#7c2d12;

}

/* =========================================================
DOWNLOAD BOX
========================================================= */

.download-box{

background:
linear-gradient(
135deg,
#1e3a8a 0%,
#2563eb 45%,
#7c3aed 100%
);

padding:55px 40px;

border-radius:34px;

text-align:center;

color:#fff;

position:relative;

overflow:hidden;

margin-top:60px;

margin-bottom:60px;

box-shadow:
0 35px 80px rgba(37,99,235,.25);

}

.download-box::before{

content:"";

position:absolute;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(255,255,255,.08);

top:-220px;
right:-150px;

}

.download-box h2{

font-size:42px;

font-weight:900;

margin-bottom:18px;

position:relative;

z-index:2;

}

.download-box p{

font-size:18px;

line-height:2;

margin-bottom:28px;

position:relative;

z-index:2;

color:#dbeafe;

}

.download-btn{

display:inline-flex;

align-items:center;
justify-content:center;
gap:12px;

padding:18px 38px;

border-radius:16px;

background:#fff;

color:#1d4ed8;

font-size:17px;

font-weight:800;

text-decoration:none;

position:relative;

z-index:2;

transition:.3s;

box-shadow:
0 12px 30px rgba(255,255,255,.15);

}

.download-btn:hover{

transform:
translateY(-5px);

color:#111827;

}

/* =========================================================
RELATED GRID
========================================================= */

.related-grid{

display:grid;

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

gap:24px;

margin-top:35px;

}

.related-card{

background:#fff;

border:1px solid #dbeafe;

padding:28px;

border-radius:24px;

text-decoration:none;

transition:.3s;

box-shadow:
0 10px 25px rgba(15,23,42,.04);

}

.related-card:hover{

transform:translateY(-6px);

border-color:#2563eb;

}

.related-card h3{

font-size:22px;

font-weight:800;

margin-bottom:12px;

color:#0f172a;

}

.related-card p{

font-size:15px;

line-height:1.9;

color:#475569;

}

/* =========================================================
FAQ
========================================================= */

.faq-box{

background:#fff;

border-radius:22px;

padding:28px;

margin-bottom:20px;

border:1px solid #e2e8f0;

box-shadow:
0 10px 25px rgba(15,23,42,.04);

transition:.3s;

}

.faq-box:hover{

border-color:#93c5fd;

}

.faq-box h3{

font-size:21px;

font-weight:800;

margin-bottom:12px;

color:#0f172a;

}

.faq-box p{

font-size:16px;

line-height:2;

color:#475569;

}

/* =========================================================
AUTHOR
========================================================= */

.author-box{

margin-top:55px;

padding-top:28px;

border-top:1px solid #dbeafe;

}

.author-box h4{

font-size:24px;

font-weight:800;

margin-bottom:10px;

color:#0f172a;

}

.author-box p{

font-size:15px;

color:#64748b;

line-height:1.9;

}

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

@media(max-width:992px){

.info-grid{

grid-template-columns:1fr;

}

.related-grid{

grid-template-columns:1fr;

}

.article-title{

font-size:42px;

}

}

@media(max-width:768px){

.page-wrapper{

padding:18px 0 50px;

}

.article-card{

padding:24px;

border-radius:24px;

}

.article-title{

font-size:34px;

line-height:1.35;

}

.article-description{

font-size:16px;

line-height:2;

}

.hero-box{

padding:28px;

border-radius:28px;

}

.hero-content h2{

font-size:30px;

}

.hero-content p{

font-size:16px;

}

.hero-image{

margin-top:35px;

}

.content-heading{

font-size:28px;

padding-left:16px;

}

.content-heading::before{

height:34px;

}

.content-text{

font-size:16px;

line-height:2;

}

.custom-list li{

font-size:15px;

}

.hero-btn,
.download-btn{

width:100%;

}

.download-box{

padding:38px 24px;

border-radius:26px;

}

.download-box h2{

font-size:30px;

}

.download-box p{

font-size:16px;

}

.faq-box{

padding:22px;

}

.faq-box h3{

font-size:18px;

}

}